react-better-html 1.1.286 → 1.1.288

package/dist/index.js

@@ -1558,6 +1558,7 @@ Image.profileImage = (0, import_react4.forwardRef)(function ProfileImage({ size
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const props = useComponentsPropsMerger(betterHtmlContextInternal.components.image?.style?.default, ImageProps3);
   const theme2 = (0, import_react_better_core4.useTheme)();
+  const lettersSplit = letters?.split(" ") ?? [];
   return letters ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Div_default.row,
     {
@@ -1571,7 +1572,7 @@ Image.profileImage = (0, import_react4.forwardRef)(function ProfileImage({ size
       ...props,
       width: size,
       height: size,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text_default, { fontSize: size / 2.5, fontWeight: 700, color: letterColor ?? theme2.colors.textPrimary, children: letters.toUpperCase().slice(0, 2) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text_default, { fontSize: size / 2.5, fontWeight: 700, color: letterColor ?? theme2.colors.textPrimary, children: lettersSplit.length > 1 ? lettersSplit[0][0] + (lettersSplit.at(-1)?.[0] ?? lettersSplit[0][1] ?? "") : letters.toUpperCase().slice(0, 2) })
     }
   ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Image,
@@ -3851,6 +3852,7 @@ var DropdownComponent = (0, import_react19.forwardRef)(function Dropdown(dropdow
     labelGap,
     errorText,
     infoText,
+    infoTextColor,
     required,
     name,
     disabled,
@@ -4097,6 +4099,7 @@ var DropdownComponent = (0, import_react19.forwardRef)(function Dropdown(dropdow
       labelGap,
       errorText,
       infoText,
+      infoTextColor,
       required: withMultiselect ? (Array.isArray(value) ? value.length > 0 : value !== void 0) ? false : required : required,
       textAlign,
       name,
@@ -4749,6 +4752,7 @@ var InputFieldComponent = (0, import_react22.forwardRef)(function InputField(inp
     labelGap,
     errorText,
     infoText,
+    infoTextColor,
     leftIcon,
     rightIcon,
     prefix,
@@ -4914,7 +4918,7 @@ var InputFieldComponent = (0, import_react22.forwardRef)(function InputField(inp
         as: "span",
         display: "block",
         fontSize: 14,
-        color: errorText ? theme2.colors.error : labelColor ?? theme2.colors.textSecondary,
+        color: errorText ? theme2.colors.error : infoTextColor ?? labelColor ?? theme2.colors.textSecondary,
         children: errorText || infoText
       }
     )
@@ -5918,6 +5922,7 @@ var ToggleInputComponent = (0, import_react23.forwardRef)(function ToggleInput({
   textAdvanced,
   errorText,
   infoText,
+  infoTextColor,
   size = componentSize,
   value,
   onChange,
@@ -6047,7 +6052,7 @@ var ToggleInputComponent = (0, import_react23.forwardRef)(function ToggleInput({
         as: "span",
         display: "block",
         fontSize: 14,
-        color: errorText ? theme2.colors.error : labelColor ?? theme2.colors.textSecondary,
+        color: errorText ? theme2.colors.error : infoTextColor ?? labelColor ?? theme2.colors.textSecondary,
         children: errorText || infoText
       }
     )
@@ -6174,30 +6179,32 @@ var ToggleInput_default = {
 var import_react24 = require("react");
 var import_react_better_core21 = require("react-better-core");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var FormComponent = (0, import_react24.forwardRef)(function Form({
-  form,
-  name,
-  submitButtonText,
-  submitButtonLoaderName,
-  submitButtonIsLoading,
-  submitButtonId,
-  submitButtonIsDisabled,
-  cancelButtonText,
-  cancelButtonLoaderName,
-  cancelButtonIsLoading,
-  cancelButtonId,
-  cancelButtonIsDisabled,
-  actionButtonsLocation = "right",
-  gap,
-  isDestructive,
-  withDividers,
-  renderActionButtons,
-  onClickCancel,
-  onSubmit,
-  id,
-  children,
-  ...props
-}, ref) {
+var FormComponent = (0, import_react24.forwardRef)(function Form(formProps, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const {
+    form,
+    name,
+    submitButtonText,
+    submitButtonLoaderName,
+    submitButtonIsLoading,
+    submitButtonId,
+    submitButtonIsDisabled,
+    cancelButtonText,
+    cancelButtonLoaderName,
+    cancelButtonIsLoading,
+    cancelButtonId,
+    cancelButtonIsDisabled,
+    actionButtonsLocation = "right",
+    gap,
+    isDestructive,
+    withDividers,
+    renderActionButtons,
+    onClickCancel,
+    onSubmit,
+    id,
+    children,
+    ...props
+  } = useComponentsPropsMerger(betterHtmlContextInternal.components.form?.style?.default, formProps);
   const theme2 = (0, import_react_better_core21.useTheme)();
   const submitButtonIsDisabledInternal = (0, import_react24.useMemo)(() => {
     if (!form || !form.requiredFields) return false;
@@ -6207,6 +6214,17 @@ var FormComponent = (0, import_react24.forwardRef)(function Form({
   }, [form]);
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
+  const cancelButton = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    Button_default.secondary,
+    {
+      text: cancelButtonText ?? "Cancel",
+      isLoading: cancelButtonIsLoading,
+      loaderName: cancelButtonLoaderName,
+      disabled: cancelButtonIsDisabled,
+      id: cancelButtonId,
+      onClick: onClickCancel
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("form", { name, onSubmit: onSubmit ?? form?.onSubmit, id, ref, children: [
     gap !== void 0 || withDividers ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? import_react24.Children.toArray(children).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react24.Fragment, { children: [
       child,
@@ -6225,18 +6243,8 @@ var FormComponent = (0, import_react24.forwardRef)(function Form({
         gap: theme2.styles.gap,
         marginTop: theme2.styles.space,
         children: [
-          renderActionButtons,
-          onClickCancel && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            Button_default.secondary,
-            {
-              text: cancelButtonText ?? "Cancel",
-              isLoading: cancelButtonIsLoading,
-              loaderName: cancelButtonLoaderName,
-              disabled: cancelButtonIsDisabled,
-              id: cancelButtonId,
-              onClick: onClickCancel
-            }
-          ),
+          actionButtonsLocation === "right" && renderActionButtons,
+          actionButtonsLocation === "right" && onClickCancel ? cancelButton : void 0,
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             SubmitButtonTag,
             {
@@ -6247,7 +6255,9 @@ var FormComponent = (0, import_react24.forwardRef)(function Form({
               id: submitButtonId,
               isSubmit: true
             }
-          )
+          ),
+          actionButtonsLocation === "left" && onClickCancel ? cancelButton : void 0,
+          actionButtonsLocation === "left" && renderActionButtons
         ]
       }
     )
@@ -7294,73 +7304,38 @@ var Table_default = Table2;
 
 // src/components/Tooltip.tsx
 var import_react29 = require("react");
+var import_react_dom2 = require("react-dom");
 var import_react_better_core26 = require("react-better-core");
 var import_styled_components14 = __toESM(require("styled-components"));
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var tooltipContainerStyle = (props) => ({
+var isStartAlign = (align) => align === "left" || align === "top";
+var tooltipClosedTransform = (props) => ({
   top: import_styled_components14.css`
-      bottom: calc(100% + ${props.gap}px + ${props.arrowSize}px);
-      ${props.align === "center" ? "left: 50%;" : props.align === "left" ? "left: 0;" : "right: 0;"}
+      transform: translateY(${props.theme.styles.gap}px);
    `,
   bottom: import_styled_components14.css`
-      top: calc(100% + ${props.gap}px + ${props.arrowSize}px);
-      ${props.align === "center" ? "left: 50%;" : props.align === "left" ? "left: 0;" : "right: 0;"};
+      transform: translateY(-${props.theme.styles.gap}px);
    `,
   left: import_styled_components14.css`
-      ${props.align === "center" ? "top: 50%;" : props.align === "top" ? "top: 0;" : "bottom: 0;"};
-      right: calc(100% + ${props.gap}px + ${props.arrowSize}px);
+      transform: translateX(${props.theme.styles.gap}px);
    `,
   right: import_styled_components14.css`
-      ${props.align === "center" ? "top: 50%;" : props.align === "top" ? "top: 0;" : "bottom: 0;"};
-      left: calc(100% + ${props.gap}px + ${props.arrowSize}px);
+      transform: translateX(-${props.theme.styles.gap}px);
    `
 });
-var tooltipPositionStyle = (props) => ({
-  top: {
-    opened: import_styled_components14.css`
-         transform: translateX(${props.align === "center" ? "-50%" : "0"});
-      `,
-    closed: import_styled_components14.css`
-         transform: translateX(${props.align === "center" ? "-50%" : "0"}) translateY(${props.theme.styles.gap}px);
-      `
-  },
-  bottom: {
-    opened: import_styled_components14.css`
-         transform: translateX(${props.align === "center" ? "-50%" : "0"});
-      `,
-    closed: import_styled_components14.css`
-         transform: translateX(${props.align === "center" ? "-50%" : "0"}) translateY(-${props.theme.styles.gap}px);
-      `
-  },
-  left: {
-    opened: import_styled_components14.css`
-         transform: translateY(${props.align === "center" ? "-50%" : "0"});
-      `,
-    closed: import_styled_components14.css`
-         transform: translateX(${props.theme.styles.gap}px) translateY(${props.align === "center" ? "-50%" : "0"});
-      `
-  },
-  right: {
-    opened: import_styled_components14.css`
-         transform: translateY(${props.align === "center" ? "-50%" : "0"});
-      `,
-    closed: import_styled_components14.css`
-         transform: translateX(-${props.theme.styles.gap}px) translateY(${props.align === "center" ? "-50%" : "0"});
-      `
-  }
-});
 var TooltipContainer = import_styled_components14.default.div.withConfig({
-  shouldForwardProp: (prop) => !["theme", "position", "align", "pointerEvents", "withArrow", "arrowSize", "isOpen", "gap"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "position", "pointerEvents", "isOpen"].includes(prop)
 })`
-   position: absolute;
+   position: fixed;
+   top: 0;
+   left: 0;
    opacity: ${(props) => props.isOpen ? 1 : 0};
    pointer-events: ${(props) => props.isOpen ? props.pointerEvents : "none"};
    transition: ${(props) => props.theme.styles.transition};
+   transition-property: opacity, transform;
    z-index: 1000;
 
-   ${(props) => tooltipContainerStyle(props)[props.position]}
-
-   ${(props) => props.isOpen ? tooltipPositionStyle(props)[props.position].opened : tooltipPositionStyle(props)[props.position].closed}
+   ${(props) => props.isOpen ? "transform: none;" : tooltipClosedTransform(props)[props.position]}
 `;
 var arrowStyle = (props, borderWidth) => ({
   top: {
@@ -7456,6 +7431,7 @@ var TooltipComponent = (0, import_react29.forwardRef)(function Tooltip({
   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);
@@ -7463,6 +7439,8 @@ var TooltipComponent = (0, import_react29.forwardRef)(function Tooltip({
   const gap = theme2.styles.gap / 2;
   const outsideScreenGap = theme2.styles.gap / 2;
   const totalGap = arrowSize + gap;
+  const arrowSideSpace = theme2.styles.borderRadius;
+  const arrowAnchorOffset = withArrow ? arrowSideSpace + arrowSize : 0;
   const openTooltip = (0, import_react29.useCallback)(() => {
     if (disabled) return;
     if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
@@ -7500,19 +7478,25 @@ var TooltipComponent = (0, import_react29.forwardRef)(function Tooltip({
     },
     [trigger, isOpen, closeTooltip]
   );
-  const clampContentInsideViewport = (0, import_react29.useCallback)(() => {
-    if (!wrapperRef.current || !contentRef.current) return;
+  const updateContainerPosition = (0, import_react29.useCallback)(() => {
+    if (!wrapperRef.current || !contentRef.current || !tooltipContainerRef.current) return;
     const wrapperRect = wrapperRef.current.getBoundingClientRect();
     const contentWidth2 = contentRef.current.offsetWidth;
     const contentHeight = contentRef.current.offsetHeight;
+    const getCrossAxisStart = (wrapperStart, wrapperSize, contentSize) => {
+      const wrapperCenter = wrapperStart + wrapperSize / 2;
+      if (align === "center") return wrapperCenter - contentSize / 2;
+      if (isStartAlign(align)) return arrowAnchorOffset ? wrapperCenter - arrowAnchorOffset : wrapperStart;
+      return arrowAnchorOffset ? wrapperCenter + arrowAnchorOffset - contentSize : wrapperStart + wrapperSize - contentSize;
+    };
     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;
+      expectedLeft = getCrossAxisStart(wrapperRect.left, wrapperRect.width, contentWidth2);
     } 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;
+      expectedTop = getCrossAxisStart(wrapperRect.top, wrapperRect.height, contentHeight);
     }
     const getShift = (start, size, viewportSize) => {
       if (start < outsideScreenGap) return outsideScreenGap - start;
@@ -7521,8 +7505,9 @@ var TooltipComponent = (0, import_react29.forwardRef)(function Tooltip({
     };
     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]);
+    tooltipContainerRef.current.style.left = `${expectedLeft + shiftX}px`;
+    tooltipContainerRef.current.style.top = `${expectedTop + shiftY}px`;
+  }, [position, align, totalGap, outsideScreenGap, arrowAnchorOffset]);
   (0, import_react29.useEffect)(() => {
     if (trigger === "click") {
       document.addEventListener("mousedown", onClickOutside);
@@ -7536,8 +7521,15 @@ var TooltipComponent = (0, import_react29.forwardRef)(function Tooltip({
     closeTooltip();
   }, [disabled]);
   (0, import_react29.useLayoutEffect)(() => {
-    if (isOpen) clampContentInsideViewport();
-  }, [isOpen, clampContentInsideViewport]);
+    if (!isOpen) return;
+    updateContainerPosition();
+    window.addEventListener("scroll", updateContainerPosition, true);
+    window.addEventListener("resize", updateContainerPosition);
+    return () => {
+      window.removeEventListener("scroll", updateContainerPosition, true);
+      window.removeEventListener("resize", updateContainerPosition);
+    };
+  }, [isOpen, updateContainerPosition]);
   (0, import_react29.useImperativeHandle)(ref, () => {
     return {
       isOpen,
@@ -7566,60 +7558,60 @@ var TooltipComponent = (0, import_react29.forwardRef)(function Tooltip({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          TooltipContainer,
-          {
-            theme: theme2,
-            position,
-            align,
-            pointerEvents: contentPointerEvents,
-            withArrow,
-            arrowSize,
-            gap,
-            isOpen,
-            role: "tooltip",
-            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,
-                {
-                  position: "relative",
-                  width: contentWidth,
-                  minWidth: contentMinWidth,
-                  backgroundColor: backgroundColor ?? theme2.colors.backgroundContent,
-                  boxShadow: "0px 10px 20px #00000020",
-                  paddingBlock: contentPaddingBlock ?? (isSmall ? theme2.styles.gap / 2 : theme2.styles.gap),
-                  paddingInline: contentPaddingInline ?? (asContextMenu ? 0 : isSmall ? theme2.styles.space / 2 : theme2.styles.space),
-                  overflow: asContextMenu ? "hidden" : void 0,
-                  children: content
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                Div_default,
-                {
-                  position: "absolute",
-                  width: position === "left" || position === "right" ? totalGap : "100%",
-                  height: position === "top" || position === "bottom" ? totalGap : "100%",
-                  top: position === "top" ? "100%" : position === "bottom" ? void 0 : 0,
-                  bottom: position === "bottom" ? "100%" : position === "top" ? void 0 : 0,
-                  left: position === "left" ? "100%" : position === "right" ? void 0 : 0,
-                  right: position === "right" ? "100%" : position === "left" ? void 0 : 0,
-                  borderTopLeftRadius: 999,
-                  borderTopRightRadius: 999
-                }
-              ),
-              withArrow && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                Arrow,
-                {
-                  position,
-                  align,
-                  sideSpace: theme2.styles.borderRadius,
-                  size: arrowSize,
-                  color: backgroundColor ?? theme2.colors.backgroundContent,
-                  isOpen
-                }
-              )
-            ] })
-          }
+        (0, import_react_dom2.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            TooltipContainer,
+            {
+              theme: theme2,
+              position,
+              pointerEvents: contentPointerEvents,
+              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,
+                  {
+                    position: "relative",
+                    width: contentWidth,
+                    minWidth: contentMinWidth,
+                    backgroundColor: backgroundColor ?? theme2.colors.backgroundContent,
+                    boxShadow: "0px 10px 20px #00000020",
+                    paddingBlock: contentPaddingBlock ?? (isSmall ? theme2.styles.gap / 2 : theme2.styles.gap),
+                    paddingInline: contentPaddingInline ?? (asContextMenu ? 0 : isSmall ? theme2.styles.space / 2 : theme2.styles.space),
+                    overflow: asContextMenu ? "hidden" : void 0,
+                    children: content
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  Div_default,
+                  {
+                    position: "absolute",
+                    width: position === "left" || position === "right" ? totalGap : "100%",
+                    height: position === "top" || position === "bottom" ? totalGap : "100%",
+                    top: position === "top" ? "100%" : position === "bottom" ? void 0 : 0,
+                    bottom: position === "bottom" ? "100%" : position === "top" ? void 0 : 0,
+                    left: position === "left" ? "100%" : position === "right" ? void 0 : 0,
+                    right: position === "right" ? "100%" : position === "left" ? void 0 : 0,
+                    borderTopLeftRadius: 999,
+                    borderTopRightRadius: 999
+                  }
+                ),
+                withArrow && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  Arrow,
+                  {
+                    position,
+                    align,
+                    sideSpace: arrowSideSpace,
+                    size: arrowSize,
+                    color: backgroundColor ?? theme2.colors.backgroundContent,
+                    isOpen
+                  }
+                )
+              ] })
+            }
+          ),
+          document.body
         )
       ]
     }