@officesdk/design 0.1.0 → 0.1.1

package/dist/components/index.d.mts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TooltipProps as TooltipProps$1 } from 'rc-tooltip/lib/Tooltip';
 
-interface ButtonProps {
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Button variant type
      */
@@ -39,22 +39,6 @@ interface ButtonProps {
      * Whether the icon button should have a border (only for variant='icon')
      */
     iconBordered?: boolean;
-    /**
-     * Click event handler
-     */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Button content
-     */
-    children?: React.ReactNode;
-    /**
-     * Custom className
-     */
-    className?: string;
-    /**
-     * Custom inline styles
-     */
-    style?: React.CSSProperties;
 }
 /**
  * Button Component
@@ -698,7 +682,7 @@ interface TabsProps {
  */
 declare const Tabs: React.FC<TabsProps>;
 
-interface TooltipProps extends Omit<TooltipProps$1, 'overlay'> {
+interface TooltipProps extends TooltipProps$1 {
     /**
      * Tooltip content
      */
@@ -715,6 +699,10 @@ interface TooltipProps extends Omit<TooltipProps$1, 'overlay'> {
      * Children element that triggers the tooltip
      */
     children: React.ReactElement;
+    /**
+     * Function to get the container element for the tooltip
+     */
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 }
 /**
  * Tooltip Component

package/dist/components/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TooltipProps as TooltipProps$1 } from 'rc-tooltip/lib/Tooltip';
 
-interface ButtonProps {
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Button variant type
      */
@@ -39,22 +39,6 @@ interface ButtonProps {
      * Whether the icon button should have a border (only for variant='icon')
      */
     iconBordered?: boolean;
-    /**
-     * Click event handler
-     */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Button content
-     */
-    children?: React.ReactNode;
-    /**
-     * Custom className
-     */
-    className?: string;
-    /**
-     * Custom inline styles
-     */
-    style?: React.CSSProperties;
 }
 /**
  * Button Component
@@ -698,7 +682,7 @@ interface TabsProps {
  */
 declare const Tabs: React.FC<TabsProps>;
 
-interface TooltipProps extends Omit<TooltipProps$1, 'overlay'> {
+interface TooltipProps extends TooltipProps$1 {
     /**
      * Tooltip content
      */
@@ -715,6 +699,10 @@ interface TooltipProps extends Omit<TooltipProps$1, 'overlay'> {
      * Children element that triggers the tooltip
      */
     children: React.ReactElement;
+    /**
+     * Function to get the container element for the tooltip
+     */
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 }
 /**
  * Tooltip Component

package/dist/components/index.js

@@ -145,10 +145,8 @@ var Button = ({
   iconBefore,
   iconAfter,
   iconBordered = false,
-  onClick,
   children,
-  className,
-  style
+  ...rest
 }) => {
   const isIconOnly = variant === "icon" || !children && !!(iconBefore || iconAfter);
   const iconOnlyContent = iconBefore || iconAfter;
@@ -162,9 +160,7 @@ var Button = ({
       $isIconOnly: isIconOnly,
       $iconBordered: iconBordered,
       disabled: disabled || loading,
-      onClick,
-      className,
-      style
+      ...rest
     },
     loading ? /* @__PURE__ */ React11__default.default.createElement(React11__default.default.Fragment, null, "Loading...") : isIconOnly ? iconOnlyContent : /* @__PURE__ */ React11__default.default.createElement(React11__default.default.Fragment, null, iconBefore && /* @__PURE__ */ React11__default.default.createElement(IconWrapper, { $size: size, $position: "before" }, iconBefore), children, iconAfter && /* @__PURE__ */ React11__default.default.createElement(IconWrapper, { $size: size, $position: "after" }, iconAfter))
   );
@@ -1996,15 +1992,39 @@ var Tabs = ({
   ))));
 };
 Tabs.displayName = "Tab";
+var Tooltip = ({
+  content,
+  variant = "black",
+  size = "small",
+  children,
+  placement = "top",
+  trigger = ["hover"],
+  overlay,
+  overlayClassName,
+  getPopupContainer,
+  ...rest
+}) => {
+  const overlayContent = React11__default.default.useMemo(() => /* @__PURE__ */ React11__default.default.createElement("div", null, content), [content]);
+  const variantClass = `tooltip-variant-${variant}`;
+  const sizeClass = variant === "white" ? `tooltip-size-${size}` : "";
+  const combinedClassName = [variantClass, sizeClass, overlayClassName].filter(Boolean).join(" ");
+  const tooltipProps = {
+    overlay: overlay ?? overlayContent,
+    placement,
+    trigger,
+    destroyTooltipOnHide: false,
+    overlayClassName: combinedClassName,
+    ...getPopupContainer && { getPopupContainer },
+    ...rest
+  };
+  return /* @__PURE__ */ React11__default.default.createElement(RcTooltip__default.default, { ...tooltipProps }, children);
+};
+Tooltip.displayName = "Tooltip";
+var paddingDistance = "5px";
+var positionDistance = "0";
 var TooltipGlobalStyles = styled3.createGlobalStyle`
   .rc-tooltip {
-    position: absolute;
-    z-index: 1070;
-    display: block;
-    visibility: visible;
-    font-size: 12px;
-    line-height: 1.5;
-    opacity: 0;
+    opacity: 1;
   }
 
   .rc-tooltip-hidden {
@@ -2014,65 +2034,30 @@ var TooltipGlobalStyles = styled3.createGlobalStyle`
   .rc-tooltip-placement-top,
   .rc-tooltip-placement-topLeft,
   .rc-tooltip-placement-topRight {
-    padding-bottom: 8px;
+    padding-bottom: ${paddingDistance};
   }
 
   .rc-tooltip-placement-right,
   .rc-tooltip-placement-rightTop,
   .rc-tooltip-placement-rightBottom {
-    padding-left: 8px;
+    padding-left: ${paddingDistance};
   }
 
   .rc-tooltip-placement-bottom,
   .rc-tooltip-placement-bottomLeft,
   .rc-tooltip-placement-bottomRight {
-    padding-top: 8px;
+    padding-top: ${paddingDistance};
   }
 
   .rc-tooltip-placement-left,
   .rc-tooltip-placement-leftTop,
   .rc-tooltip-placement-leftBottom {
-    padding-right: 8px;
+    padding-right: ${paddingDistance};
   }
 
   .rc-tooltip-inner {
-    /* istanbul ignore next - styled-components CSS generation */
-    ${({ $variant, $size, theme }) => {
-  if ($variant === "black") {
-    const config = theme.components.tooltip.black;
-    return `
-          background: ${config.background};
-          border: 1px solid ${config.borderColor};
-          color: ${config.color};
-          border-radius: ${config.borderRadius};
-          padding: ${config.padding};
-          box-shadow: ${config.boxShadow};
-          font-size: ${config.fontSize};
-          line-height: ${config.lineHeight};
-          font-weight: ${config.fontWeight};
-          max-width: ${config.maxWidth};
-          text-align: left;
-          text-decoration: none;
-          word-wrap: break-word;
-        `;
-  } else {
-    const sizeConfig = theme.components.tooltip.white[$size || "small"];
-    return `
-          background: ${sizeConfig.background};
-          border: 1px solid ${sizeConfig.borderColor};
-          color: ${sizeConfig.color};
-          border-radius: ${sizeConfig.borderRadius};
-          padding: ${sizeConfig.padding};
-          box-shadow: ${sizeConfig.boxShadow};
-          font-size: ${sizeConfig.fontSize};
-          line-height: ${sizeConfig.lineHeight};
-          font-weight: ${sizeConfig.fontWeight};
-          text-align: left;
-          text-decoration: none;
-          word-wrap: break-word;
-        `;
-  }
-}}
+    word-wrap: break-word;
+    min-height: unset;
   }
 
   .rc-tooltip-arrow {
@@ -2083,48 +2068,6 @@ var TooltipGlobalStyles = styled3.createGlobalStyle`
     border-style: solid;
   }
 
-  /* istanbul ignore next - styled-components CSS generation */
-  ${({ $variant, theme }) => {
-  const bgColor = $variant === "black" ? theme.components?.tooltip?.black?.background : theme.components?.tooltip?.white?.small?.background;
-  return `
-      .rc-tooltip-placement-top .rc-tooltip-arrow,
-      .rc-tooltip-placement-topLeft .rc-tooltip-arrow,
-      .rc-tooltip-placement-topRight .rc-tooltip-arrow {
-        bottom: 3px;
-        margin-left: -5px;
-        border-width: 5px 5px 0;
-        border-top-color: ${bgColor};
-      }
-
-      .rc-tooltip-placement-right .rc-tooltip-arrow,
-      .rc-tooltip-placement-rightTop .rc-tooltip-arrow,
-      .rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
-        left: 3px;
-        margin-top: -5px;
-        border-width: 5px 5px 5px 0;
-        border-right-color: ${bgColor};
-      }
-
-      .rc-tooltip-placement-left .rc-tooltip-arrow,
-      .rc-tooltip-placement-leftTop .rc-tooltip-arrow,
-      .rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
-        right: 3px;
-        margin-top: -5px;
-        border-width: 5px 0 5px 5px;
-        border-left-color: ${bgColor};
-      }
-
-      .rc-tooltip-placement-bottom .rc-tooltip-arrow,
-      .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
-      .rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
-        top: 3px;
-        margin-left: -5px;
-        border-width: 0 5px 5px;
-        border-bottom-color: ${bgColor};
-      }
-    `;
-}}
-
   .rc-tooltip.rc-tooltip-zoom-enter,
   .rc-tooltip.rc-tooltip-zoom-leave {
     display: block;
@@ -2182,20 +2125,161 @@ var TooltipGlobalStyles = styled3.createGlobalStyle`
       transform: scale(0, 0);
     }
   }
+
+  /* Black variant */
+  .tooltip-variant-black .rc-tooltip-inner {
+    background: ${({ theme }) => theme.components.tooltip.black.background};
+    border: 1px solid ${({ theme }) => theme.components.tooltip.black.borderColor};
+    color: ${({ theme }) => theme.components.tooltip.black.color};
+    border-radius: ${({ theme }) => theme.components.tooltip.black.borderRadius};
+    padding: ${({ theme }) => theme.components.tooltip.black.padding};
+    box-shadow: ${({ theme }) => theme.components.tooltip.black.boxShadow};
+    font-size: ${({ theme }) => theme.components.tooltip.black.fontSize};
+    line-height: ${({ theme }) => theme.components.tooltip.black.lineHeight};
+    font-weight: ${({ theme }) => theme.components.tooltip.black.fontWeight};
+    max-width: ${({ theme }) => theme.components.tooltip.black.maxWidth};
+    text-align: left;
+    text-decoration: none;
+  }
+
+  .tooltip-variant-black.rc-tooltip-placement-top .rc-tooltip-arrow,
+  .tooltip-variant-black.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
+  .tooltip-variant-black.rc-tooltip-placement-topRight .rc-tooltip-arrow {
+    bottom: ${positionDistance};
+    margin-left: -5px;
+    border-width: 5px 5px 0;
+    border-top-color: ${({ theme }) => theme.components.tooltip.black.background};
+  }
+
+  .tooltip-variant-black.rc-tooltip-placement-right .rc-tooltip-arrow,
+  .tooltip-variant-black.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
+  .tooltip-variant-black.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
+    left: ${positionDistance};
+    margin-top: -5px;
+    border-width: 5px 5px 5px 0;
+    border-right-color: ${({ theme }) => theme.components.tooltip.black.background};
+  }
+
+  .tooltip-variant-black.rc-tooltip-placement-left .rc-tooltip-arrow,
+  .tooltip-variant-black.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
+  .tooltip-variant-black.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
+    right: ${positionDistance};
+    margin-top: -5px;
+    border-width: 5px 0 5px 5px;
+    border-left-color: ${({ theme }) => theme.components.tooltip.black.background};
+  }
+
+  .tooltip-variant-black.rc-tooltip-placement-bottom .rc-tooltip-arrow,
+  .tooltip-variant-black.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
+  .tooltip-variant-black.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
+    top: ${positionDistance};
+    margin-left: -5px;
+    border-width: 0 5px 5px;
+    border-bottom-color: ${({ theme }) => theme.components.tooltip.black.background};
+  }
+
+  /* White variant - small size */
+  .tooltip-variant-white.tooltip-size-small .rc-tooltip-inner {
+    background: ${({ theme }) => theme.components.tooltip.white.small.background};
+    border: 1px solid ${({ theme }) => theme.components.tooltip.white.small.borderColor};
+    color: ${({ theme }) => theme.components.tooltip.white.small.color};
+    border-radius: ${({ theme }) => theme.components.tooltip.white.small.borderRadius};
+    padding: ${({ theme }) => theme.components.tooltip.white.small.padding};
+    box-shadow: ${({ theme }) => theme.components.tooltip.white.small.boxShadow};
+    font-size: ${({ theme }) => theme.components.tooltip.white.small.fontSize};
+    line-height: ${({ theme }) => theme.components.tooltip.white.small.lineHeight};
+    font-weight: ${({ theme }) => theme.components.tooltip.white.small.fontWeight};
+    text-align: left;
+    text-decoration: none;
+  }
+
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-top .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-topRight .rc-tooltip-arrow {
+    bottom: ${positionDistance};
+    margin-left: -5px;
+    border-width: 5px 5px 0;
+    border-top-color: ${({ theme }) => theme.components.tooltip.white.small.background};
+  }
+
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-right .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
+    left: ${positionDistance};
+    margin-top: -5px;
+    border-width: 5px 5px 5px 0;
+    border-right-color: ${({ theme }) => theme.components.tooltip.white.small.background};
+  }
+
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-left .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
+    right: ${positionDistance};
+    margin-top: -5px;
+    border-width: 5px 0 5px 5px;
+    border-left-color: ${({ theme }) => theme.components.tooltip.white.small.background};
+  }
+
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-bottom .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-small.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
+    top: ${positionDistance};
+    margin-left: -5px;
+    border-width: 0 5px 5px;
+    border-bottom-color: ${({ theme }) => theme.components.tooltip.white.small.background};
+  }
+
+  /* White variant - large size */
+  .tooltip-variant-white.tooltip-size-large .rc-tooltip-inner {
+    background: ${({ theme }) => theme.components.tooltip.white.large.background};
+    border: 1px solid ${({ theme }) => theme.components.tooltip.white.large.borderColor};
+    color: ${({ theme }) => theme.components.tooltip.white.large.color};
+    border-radius: ${({ theme }) => theme.components.tooltip.white.large.borderRadius};
+    padding: ${({ theme }) => theme.components.tooltip.white.large.padding};
+    box-shadow: ${({ theme }) => theme.components.tooltip.white.large.boxShadow};
+    font-size: ${({ theme }) => theme.components.tooltip.white.large.fontSize};
+    line-height: ${({ theme }) => theme.components.tooltip.white.large.lineHeight};
+    font-weight: ${({ theme }) => theme.components.tooltip.white.large.fontWeight};
+    text-align: left;
+    text-decoration: none;
+  }
+
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-top .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-topRight .rc-tooltip-arrow {
+    bottom: ${positionDistance};
+    margin-left: -5px;
+    border-width: 5px 5px 0;
+    border-top-color: ${({ theme }) => theme.components.tooltip.white.large.background};
+  }
+
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-right .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
+    left: ${positionDistance};
+    margin-top: -5px;
+    border-width: 5px 5px 5px 0;
+    border-right-color: ${({ theme }) => theme.components.tooltip.white.large.background};
+  }
+
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-left .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
+    right: ${positionDistance};
+    margin-top: -5px;
+    border-width: 5px 0 5px 5px;
+    border-left-color: ${({ theme }) => theme.components.tooltip.white.large.background};
+  }
+
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-bottom .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
+  .tooltip-variant-white.tooltip-size-large.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
+    top: ${positionDistance};
+    margin-left: -5px;
+    border-width: 0 5px 5px;
+    border-bottom-color: ${({ theme }) => theme.components.tooltip.white.large.background};
+  }
 `;
-var Tooltip = ({
-  content,
-  variant = "black",
-  size = "small",
-  children,
-  placement = "top",
-  trigger = ["hover"],
-  ...rest
-}) => {
-  const GlobalStyles = TooltipGlobalStyles;
-  return /* @__PURE__ */ React11__default.default.createElement(React11__default.default.Fragment, null, /* @__PURE__ */ React11__default.default.createElement(GlobalStyles, { $variant: variant, $size: size }), /* @__PURE__ */ React11__default.default.createElement(RcTooltip__default.default, { overlay: /* @__PURE__ */ React11__default.default.createElement("div", null, content), placement, trigger, ...rest }, children));
-};
-Tooltip.displayName = "Tooltip";
 var UIConfigContext = React11.createContext(null);
 var UIConfigProvider = ({
   config,
@@ -2211,7 +2295,8 @@ var UIConfigProvider = ({
     defaultDuration: toast.defaultDuration ?? 3e3
   };
   const Provider = styled3.ThemeProvider;
-  return /* @__PURE__ */ React11__default.default.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React11__default.default.createElement(Provider, { theme }, /* @__PURE__ */ React11__default.default.createElement(IconProvider, { icons }, /* @__PURE__ */ React11__default.default.createElement(
+  const TooltipStyles = TooltipGlobalStyles;
+  return /* @__PURE__ */ React11__default.default.createElement(UIConfigContext.Provider, { value: config }, /* @__PURE__ */ React11__default.default.createElement(Provider, { theme }, /* @__PURE__ */ React11__default.default.createElement(TooltipStyles, null), /* @__PURE__ */ React11__default.default.createElement(IconProvider, { icons }, /* @__PURE__ */ React11__default.default.createElement(
     ToastContainer2,
     {
       maxCount: toastConfig.maxCount,