react-better-html 1.1.284 → 1.1.286

package/dist/index.d.mts

@@ -212,6 +212,10 @@ type PageHeaderProps = {
     descriptionFontSize?: React.CSSProperties["fontSize"];
     /** @default textSecondary */
     descriptionColor?: React.CSSProperties["color"];
+    /** @default theme.styles.space */
+    imageGap?: React.CSSProperties["gap"];
+    /** @default theme.styles.gap / 2 */
+    titleGap?: React.CSSProperties["gap"];
     textAlign?: React.CSSProperties["textAlign"];
     rightElement?: React.ReactNode;
     /** @default false */
@@ -1196,6 +1200,8 @@ type SideMenuPageHolderProps = PageHolderProps & {
 type BurgerButtonProps = {
     /** @default "left" */
     position?: "left" | "center" | "right";
+    /** @default theme.colors.border */
+    color?: React.CSSProperties["color"];
     onClick?: (isOpened: boolean) => void;
 };
 declare const SideMenu: typeof SideMenuComponent & {

package/dist/index.d.ts

@@ -212,6 +212,10 @@ type PageHeaderProps = {
     descriptionFontSize?: React.CSSProperties["fontSize"];
     /** @default textSecondary */
     descriptionColor?: React.CSSProperties["color"];
+    /** @default theme.styles.space */
+    imageGap?: React.CSSProperties["gap"];
+    /** @default theme.styles.gap / 2 */
+    titleGap?: React.CSSProperties["gap"];
     textAlign?: React.CSSProperties["textAlign"];
     rightElement?: React.ReactNode;
     /** @default false */
@@ -1196,6 +1200,8 @@ type SideMenuPageHolderProps = PageHolderProps & {
 type BurgerButtonProps = {
     /** @default "left" */
     position?: "left" | "center" | "right";
+    /** @default theme.colors.border */
+    color?: React.CSSProperties["color"];
     onClick?: (isOpened: boolean) => void;
 };
 declare const SideMenu: typeof SideMenuComponent & {

package/dist/index.js

@@ -1687,6 +1687,8 @@ var PageHeaderComponent = (0, import_react7.forwardRef)(function PageHeader({
   description,
   descriptionFontSize,
   descriptionColor,
+  imageGap,
+  titleGap,
   textAlign,
   rightElement,
   lightMode,
@@ -1701,7 +1703,7 @@ var PageHeaderComponent = (0, import_react7.forwardRef)(function PageHeader({
     Div_default.row,
     {
       alignItems: "center",
-      gap: theme2.styles.space,
+      gap: imageGap ?? theme2.styles.space,
       marginBottom: marginBottom ?? theme2.styles.space * 2,
       ref,
       children: [
@@ -1722,7 +1724,7 @@ var PageHeaderComponent = (0, import_react7.forwardRef)(function PageHeader({
           {
             alignItems: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
             flex: 1,
-            gap: theme2.styles.gap / 2,
+            gap: titleGap ?? theme2.styles.gap / 2,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                 Div_default.row,
@@ -1869,6 +1871,7 @@ DivComponent.box = (0, import_react8.forwardRef)(function Box({
   titleRightElement,
   description,
   descriptionColor,
+  titleGap,
   textAlign,
   rightElement,
   lightMode,
@@ -1922,6 +1925,7 @@ DivComponent.box = (0, import_react8.forwardRef)(function Box({
                   titleRightElement,
                   description,
                   descriptionColor,
+                  titleGap,
                   textAlign,
                   rightElement,
                   lightMode,
@@ -7449,9 +7453,9 @@ var TooltipComponent = (0, import_react29.forwardRef)(function Tooltip({
   children
 }, ref) {
   const theme2 = (0, import_react_better_core26.useTheme)();
+  const wrapperRef = (0, import_react29.useRef)(null);
   const triggerHolderRef = (0, import_react29.useRef)(null);
   const contentRef = (0, import_react29.useRef)(null);
-  const tooltipContainerRef = (0, import_react29.useRef)(null);
   const closeTimerRef = (0, import_react29.useRef)(void 0);
   const [isOpen, setIsOpen] = (0, import_react29.useState)(false);
   const [isOpenLate, setIsOpenLate] = (0, import_react29.useState)(false);
@@ -7464,26 +7468,8 @@ var TooltipComponent = (0, import_react29.forwardRef)(function Tooltip({
     if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
     setIsOpen(true);
     setIsOpenLate(true);
-    setTimeout(() => {
-      if (!tooltipContainerRef.current) return;
-      if (!contentRef.current) return;
-      const clientRects = tooltipContainerRef.current.getBoundingClientRect();
-      if (clientRects) {
-        const { width, height, x, y } = clientRects;
-        const topOutside = y < 0;
-        const bottomOutside = y + height > window.innerHeight;
-        const leftOutside = x < 0;
-        const rightOutside = x + width > window.innerWidth;
-        if (topOutside) contentRef.current.style.transform = `translateY(${y * -1 + outsideScreenGap}px)`;
-        if (bottomOutside)
-          contentRef.current.style.transform = `translateY(${window.innerHeight - (y + height) - totalGap}px)`;
-        if (leftOutside) contentRef.current.style.transform = `translateX(${x * -1 + outsideScreenGap}px)`;
-        if (rightOutside)
-          contentRef.current.style.transform = `translateX(${window.innerWidth - (x + width) - totalGap}px)`;
-      }
-    }, 1);
     onOpen?.();
-  }, [disabled, onOpen, outsideScreenGap, totalGap]);
+  }, [disabled, onOpen]);
   const closeTooltip = (0, import_react29.useCallback)(() => {
     setIsOpen(false);
     closeTimerRef.current = setTimeout(() => setIsOpenLate(false), 300);
@@ -7514,6 +7500,29 @@ var TooltipComponent = (0, import_react29.forwardRef)(function Tooltip({
     },
     [trigger, isOpen, closeTooltip]
   );
+  const clampContentInsideViewport = (0, import_react29.useCallback)(() => {
+    if (!wrapperRef.current || !contentRef.current) return;
+    const wrapperRect = wrapperRef.current.getBoundingClientRect();
+    const contentWidth2 = contentRef.current.offsetWidth;
+    const contentHeight = contentRef.current.offsetHeight;
+    let expectedLeft;
+    let expectedTop;
+    if (position === "top" || position === "bottom") {
+      expectedTop = position === "top" ? wrapperRect.top - totalGap - contentHeight : wrapperRect.bottom + totalGap;
+      expectedLeft = align === "left" ? wrapperRect.left : align === "right" ? wrapperRect.right - contentWidth2 : wrapperRect.left + wrapperRect.width / 2 - contentWidth2 / 2;
+    } else {
+      expectedLeft = position === "left" ? wrapperRect.left - totalGap - contentWidth2 : wrapperRect.right + totalGap;
+      expectedTop = align === "top" ? wrapperRect.top : align === "bottom" ? wrapperRect.bottom - contentHeight : wrapperRect.top + wrapperRect.height / 2 - contentHeight / 2;
+    }
+    const getShift = (start, size, viewportSize) => {
+      if (start < outsideScreenGap) return outsideScreenGap - start;
+      if (start + size > viewportSize - outsideScreenGap) return viewportSize - outsideScreenGap - (start + size);
+      return 0;
+    };
+    const shiftX = getShift(expectedLeft, contentWidth2, window.innerWidth);
+    const shiftY = getShift(expectedTop, contentHeight, window.innerHeight);
+    contentRef.current.style.transform = shiftX || shiftY ? `translate(${shiftX}px, ${shiftY}px)` : "";
+  }, [position, align, totalGap, outsideScreenGap]);
   (0, import_react29.useEffect)(() => {
     if (trigger === "click") {
       document.addEventListener("mousedown", onClickOutside);
@@ -7526,6 +7535,9 @@ var TooltipComponent = (0, import_react29.forwardRef)(function Tooltip({
     if (!disabled) return;
     closeTooltip();
   }, [disabled]);
+  (0, import_react29.useLayoutEffect)(() => {
+    if (isOpen) clampContentInsideViewport();
+  }, [isOpen, clampContentInsideViewport]);
   (0, import_react29.useImperativeHandle)(ref, () => {
     return {
       isOpen,
@@ -7542,6 +7554,7 @@ var TooltipComponent = (0, import_react29.forwardRef)(function Tooltip({
       onClick: onClickHolder,
       onMouseEnter,
       onMouseLeave,
+      ref: wrapperRef,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           Div_default,
@@ -7565,7 +7578,6 @@ var TooltipComponent = (0, import_react29.forwardRef)(function Tooltip({
             gap,
             isOpen,
             role: "tooltip",
-            ref: tooltipContainerRef,
             children: (isOpen || isOpenLate) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default, { position: "relative", ref: contentRef, children: [
               /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 Div_default.box,
@@ -7941,6 +7953,7 @@ var FoldableComponent = (0, import_react31.forwardRef)(function Foldable({
   description,
   descriptionFontSize,
   descriptionColor,
+  titleGap,
   textAlign,
   rightElement,
   lightMode,
@@ -8033,6 +8046,7 @@ var FoldableComponent = (0, import_react31.forwardRef)(function Foldable({
               description,
               descriptionFontSize,
               descriptionColor,
+              titleGap,
               textAlign,
               rightElement,
               lightMode,
@@ -8639,7 +8653,7 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({
     }
   );
 };
-SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onClick }) {
+SideMenuComponent.burgerButton = function BurgerButton({ position = "left", color, onClick }) {
   const theme2 = (0, import_react_better_core29.useTheme)();
   const { sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
   const [isHovered, setIsHovered] = (0, import_react_better_core29.useBooleanState)();
@@ -8648,6 +8662,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
     onClick?.(!sideMenuIsOpenMobile);
   }, [onClick, sideMenuIsOpenMobile]);
   const width = 2;
+  const backgroundColor = color ?? theme2.colors.border;
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     Div_default,
     {
@@ -8669,7 +8684,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
             top: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
             left: position === "left" ? 0 : position === "center" ? sideMenuIsOpenMobile ? 0 : "50%" : "auto",
             right: position === "right" ? 0 : void 0,
-            backgroundColor: theme2.colors.border,
+            backgroundColor,
             borderRadius: 999,
             transform: sideMenuIsOpenMobile ? "rotate(45deg)" : position === "center" ? "translateX(-50%)" : void 0,
             transition: theme2.styles.transition
@@ -8684,7 +8699,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
             top: "50%",
             left: position === "left" ? 0 : position === "center" ? "50%" : "auto",
             right: position === "right" ? 0 : void 0,
-            backgroundColor: theme2.colors.border,
+            backgroundColor,
             borderRadius: 999,
             transform: `translateY(-50%)${position === "center" ? " translateX(-50%)" : ""}`,
             opacity: sideMenuIsOpenMobile ? 0 : void 0,
@@ -8700,7 +8715,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
             bottom: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
             left: position === "left" ? 0 : position === "center" ? sideMenuIsOpenMobile ? 0 : "50%" : "auto",
             right: position === "right" ? 0 : void 0,
-            backgroundColor: theme2.colors.border,
+            backgroundColor,
             borderRadius: 999,
             transform: sideMenuIsOpenMobile ? "rotate(-45deg)" : position === "center" ? "translateX(-50%)" : void 0,
             transition: theme2.styles.transition