react-better-html 1.1.112 → 1.1.114

package/dist/index.mjs

@@ -2819,6 +2819,7 @@ var Divider_default = {
 
 // src/components/Modal.tsx
 import { memo as memo9, useCallback as useCallback5, forwardRef as forwardRef6, useImperativeHandle, useRef as useRef2, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
 import styled7 from "styled-components";
 import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var DialogStylesElement = styled7.dialog.withConfig({
@@ -2915,101 +2916,104 @@ var ModalComponent = forwardRef6(function Modal({
     },
     [onClickOpen, onClickClose, isOpened]
   );
-  return /* @__PURE__ */ jsx9(
-    DialogStylesElement,
-    {
-      theme: theme2,
-      colorTheme,
-      opacity: !isOpened ? 0 : 1,
-      onClose: onClickClose,
-      ref: dialogRef,
-      children: isOpenedLate ? /* @__PURE__ */ jsx9(
-        Div_default.column,
-        {
-          position: "relative",
-          width: "100%",
-          maxWidth: maxWidth ?? app.contentMaxWidth / 1.3,
-          minHeight: `calc(100% - ${theme2.styles.space * 2}px)`,
-          alignItems: "center",
-          justifyContent: "center",
-          marginBlock: theme2.styles.space,
-          marginInline: "auto",
-          transform: `translateY(${theme2.styles.space}px)`,
-          transition: theme2.styles.transition,
-          animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards",
-          children: /* @__PURE__ */ jsxs5(
-            Div_default,
-            {
-              position: "relative",
-              width: "100%",
-              minHeight: 32 + theme2.styles.space * 2,
-              backgroundColor: theme2.colors.backgroundBase,
-              borderRadius: theme2.styles.borderRadius * 2,
-              paddingInline: !title ? theme2.styles.space + theme2.styles.gap : void 0,
-              paddingBlock: !title ? theme2.styles.space : void 0,
-              overflow,
-              children: [
-                title ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
-                  /* @__PURE__ */ jsxs5(
-                    Div_default.row,
-                    {
-                      alignItems: "center",
-                      gap: theme2.styles.gap,
-                      backgroundColor: headerBackgroundColor,
-                      borderTopLeftRadius: theme2.styles.borderRadius * 2 - 1,
-                      borderTopRightRadius: theme2.styles.borderRadius * 2 - 1,
-                      paddingInline: theme2.styles.space + theme2.styles.gap,
-                      paddingBlock: theme2.styles.space,
-                      transition: theme2.styles.transition,
-                      children: [
-                        /* @__PURE__ */ jsxs5(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+  return createPortal(
+    /* @__PURE__ */ jsx9(
+      DialogStylesElement,
+      {
+        theme: theme2,
+        colorTheme,
+        opacity: !isOpened ? 0 : 1,
+        onClose: onClickClose,
+        ref: dialogRef,
+        children: isOpenedLate ? /* @__PURE__ */ jsx9(
+          Div_default.column,
+          {
+            position: "relative",
+            width: "100%",
+            maxWidth: maxWidth ?? app.contentMaxWidth / 1.3,
+            minHeight: `calc(100% - ${theme2.styles.space * 2}px)`,
+            alignItems: "center",
+            justifyContent: "center",
+            marginBlock: theme2.styles.space,
+            marginInline: "auto",
+            transform: `translateY(${theme2.styles.space}px)`,
+            transition: theme2.styles.transition,
+            animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards",
+            children: /* @__PURE__ */ jsxs5(
+              Div_default,
+              {
+                position: "relative",
+                width: "100%",
+                minHeight: 32 + theme2.styles.space * 2,
+                backgroundColor: theme2.colors.backgroundBase,
+                borderRadius: theme2.styles.borderRadius * 2,
+                paddingInline: !title ? theme2.styles.space + theme2.styles.gap : void 0,
+                paddingBlock: !title ? theme2.styles.space : void 0,
+                overflow,
+                children: [
+                  title ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+                    /* @__PURE__ */ jsxs5(
+                      Div_default.row,
+                      {
+                        alignItems: "center",
+                        gap: theme2.styles.gap,
+                        backgroundColor: headerBackgroundColor,
+                        borderTopLeftRadius: theme2.styles.borderRadius * 2 - 1,
+                        borderTopRightRadius: theme2.styles.borderRadius * 2 - 1,
+                        paddingInline: theme2.styles.space + theme2.styles.gap,
+                        paddingBlock: theme2.styles.space,
+                        transition: theme2.styles.transition,
+                        children: [
+                          /* @__PURE__ */ jsxs5(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
+                            /* @__PURE__ */ jsx9(
+                              Text_default,
+                              {
+                                as: "h1",
+                                color: titleColor ?? theme2.colors.textPrimary,
+                                transition: theme2.styles.transition,
+                                children: title
+                              }
+                            ),
+                            description && /* @__PURE__ */ jsx9(
+                              Text_default,
+                              {
+                                color: descriptionColor ?? theme2.colors.textSecondary,
+                                transition: theme2.styles.transition,
+                                children: description
+                              }
+                            )
+                          ] }),
                           /* @__PURE__ */ jsx9(
-                            Text_default,
-                            {
-                              as: "h1",
-                              color: titleColor ?? theme2.colors.textPrimary,
-                              transition: theme2.styles.transition,
-                              children: title
-                            }
-                          ),
-                          description && /* @__PURE__ */ jsx9(
-                            Text_default,
+                            Button_default.icon,
                             {
-                              color: descriptionColor ?? theme2.colors.textSecondary,
-                              transition: theme2.styles.transition,
-                              children: description
+                              icon: "XMark",
+                              marginTop: 1,
+                              iconColor: titleColor,
+                              onClick: onClickClose,
+                              transition: theme2.styles.transition
                             }
                           )
-                        ] }),
-                        /* @__PURE__ */ jsx9(
-                          Button_default.icon,
-                          {
-                            icon: "XMark",
-                            marginTop: 1,
-                            iconColor: titleColor,
-                            onClick: onClickClose,
-                            transition: theme2.styles.transition
-                          }
-                        )
-                      ]
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx9(Divider_default.horizontal, {})
+                  ] }) : /* @__PURE__ */ jsx9(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, children: /* @__PURE__ */ jsx9(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }),
+                  /* @__PURE__ */ jsx9(
+                    Div_default,
+                    {
+                      paddingInline: title ? theme2.styles.space + theme2.styles.gap : void 0,
+                      paddingBlock: title ? theme2.styles.space : void 0,
+                      children
                     }
-                  ),
-                  /* @__PURE__ */ jsx9(Divider_default.horizontal, {})
-                ] }) : /* @__PURE__ */ jsx9(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, children: /* @__PURE__ */ jsx9(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }),
-                /* @__PURE__ */ jsx9(
-                  Div_default,
-                  {
-                    paddingInline: title ? theme2.styles.space + theme2.styles.gap : void 0,
-                    paddingBlock: title ? theme2.styles.space : void 0,
-                    children
-                  }
-                )
-              ]
-            }
-          )
-        }
-      ) : void 0
-    }
+                  )
+                ]
+              }
+            )
+          }
+        ) : void 0
+      }
+    ),
+    document.body
   );
 });
 ModalComponent.confirmation = forwardRef6(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
@@ -3024,7 +3028,7 @@ ModalComponent.confirmation = forwardRef6(function Confirmation({ continueButton
     modalRef.current?.close();
   }, [onContinue]);
   useImperativeHandle(ref, () => modalRef.current, []);
-  return /* @__PURE__ */ jsxs5(Modal2, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
+  return /* @__PURE__ */ jsxs5(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
     /* @__PURE__ */ jsx9(Text_default, { color: theme2.colors.textSecondary, children: "Do you really want to continue? This action may be irreversible." }),
     /* @__PURE__ */ jsxs5(
       Div_default.row,
@@ -3053,7 +3057,7 @@ ModalComponent.destructive = forwardRef6(function Destructive2({ deleteButtonLoa
     modalRef.current?.close();
   }, [onDelete]);
   useImperativeHandle(ref, () => modalRef.current, []);
-  return /* @__PURE__ */ jsxs5(Modal2, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
+  return /* @__PURE__ */ jsxs5(ModalComponent, { title: "Are you sure?", maxWidth: 660, ...props, ref: modalRef, children: [
     /* @__PURE__ */ jsx9(Text_default, { color: theme2.colors.textSecondary, children: "Do you really want to continue with the deleting of the item? This action may be irreversible." }),
     /* @__PURE__ */ jsxs5(
       Div_default.row,
@@ -3118,6 +3122,7 @@ PageHolderComponent.center = forwardRef7(function Center({
   const mediaQuery = useMediaQuery();
   const { app } = useBetterHtmlContextInternal();
   const breakingPoint = mediaQuery.size1000;
+  const withSideImage = (sideImageSrc || sideImageName) && !breakingPoint;
   return /* @__PURE__ */ jsxs6(
     Div_default.row,
     {
@@ -3127,8 +3132,8 @@ PageHolderComponent.center = forwardRef7(function Center({
       justifyContent: "center",
       backgroundColor: pageBackgroundColor,
       children: [
-        sideImagePosition === "left" && !breakingPoint && /* @__PURE__ */ jsx10(Div_default, { width: "50%" }),
-        /* @__PURE__ */ jsx10(Div_default.column, { width: `${!breakingPoint && (sideImageSrc || sideImageName) ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ jsx10(
+        sideImagePosition === "left" && withSideImage && /* @__PURE__ */ jsx10(Div_default, { width: "50%" }),
+        /* @__PURE__ */ jsx10(Div_default.column, { width: `${withSideImage ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ jsx10(
           Div_default.box,
           {
             width: `calc(100% - ${theme2.styles.space}px * 2)`,
@@ -3140,8 +3145,8 @@ PageHolderComponent.center = forwardRef7(function Center({
             children
           }
         ) }),
-        sideImagePosition === "right" && !breakingPoint && /* @__PURE__ */ jsx10(Div_default, { width: "50%" }),
-        (sideImageSrc || sideImageName) && !breakingPoint && /* @__PURE__ */ jsxs6(
+        sideImagePosition === "right" && withSideImage && /* @__PURE__ */ jsx10(Div_default, { width: "50%" }),
+        withSideImage && /* @__PURE__ */ jsxs6(
           Div_default,
           {
             position: "fixed",
@@ -6737,6 +6742,45 @@ var FormRow_default = FormRow2;
 
 // src/components/ColorThemeSwitch.tsx
 import { memo as memo19, useEffect as useEffect8 } from "react";
+
+// src/utils/variableFunctions.ts
+var checkBetterHtmlContextValue = (value, functionsName) => {
+  if (value === void 0) {
+    throw new Error(
+      `\`${functionsName}()\` must be used within a \`<BetterHtmlProvider>\`. Make sure to add one at the root of your component tree.`
+    );
+  }
+  return value !== void 0;
+};
+var loaderControls = {
+  startLoading: (loaderName) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.startLoading")) return;
+    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
+      ...oldValue,
+      [loaderName.toString()]: true
+    }));
+  },
+  stopLoading: (loaderName) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.stopLoading")) return;
+    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
+      ...oldValue,
+      [loaderName.toString()]: false
+    }));
+  }
+};
+var colorThemeControls = {
+  toggleTheme: (theme2) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "colorThemeControls.toggleTheme")) return;
+    const currentColorTheme = externalBetterHtmlContextValue.colorTheme;
+    const newColorTheme = theme2 ?? (currentColorTheme === "dark" ? "light" : "dark");
+    setTimeout(() => {
+      window.document.body.parentElement?.setAttribute("data-theme", newColorTheme);
+      localStorage.setItem("theme", newColorTheme);
+    }, 0.01 * 1e3);
+  }
+};
+
+// src/components/ColorThemeSwitch.tsx
 import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 var ColorThemeSwitchComponent = function ColorThemeSwitch({
   withMoon,
@@ -6749,13 +6793,7 @@ var ColorThemeSwitchComponent = function ColorThemeSwitch({
     }
   });
   useEffect8(() => {
-    const timeout = setTimeout(() => {
-      window.document.body.parentElement?.setAttribute("data-theme", form.values.darkMode ? "dark" : "light");
-      localStorage.setItem("theme", form.values.darkMode ? "dark" : "light");
-    }, 0.2 * 1e3);
-    return () => {
-      clearTimeout(timeout);
-    };
+    colorThemeControls.toggleTheme(form.values.darkMode ? "dark" : "light");
   }, [form.values.darkMode]);
   useEffect8(() => {
     const html = document.querySelector("html");
@@ -6843,7 +6881,7 @@ var TableStyledComponent = styled10.table.withConfig({
                  transition: ${props.theme.styles.transition};
 
                  &:not(.isHeader):not(.isFooter):not(.withoutHover):hover {
-                    filter: brightness(${props.colorTheme === "light" ? "0.95" : "0.85"});
+                    filter: brightness(${props.colorTheme === "light" ? 0.95 : 0.7});
                  }
               ` : ""}
 
@@ -7168,7 +7206,7 @@ var TableComponent = forwardRef15(function Table({
       []
     );
   }, [data, openedFilterColumn]);
-  const pageCountInternal = pageCount ?? (pageSize !== void 0 ? Math.ceil(dataAfterPagination.length / pageSize) : 1);
+  const pageCountInternal = pageCount ?? (pageSize !== void 0 ? Math.ceil(dataAfterFilter.length / pageSize) : 1);
   const paginationItems = useMemo7(() => {
     const halfRange = Math.floor(maximumVisiblePages / 2);
     let startPage = Math.max(1, currentPage - halfRange);
@@ -7461,11 +7499,18 @@ var TableComponent = forwardRef15(function Table({
                     onClickWithValue: onClickFilterListItem,
                     children: /* @__PURE__ */ jsxs16(Div_default.row, { alignItems: "center", gap: theme2.styles.gap / 2, children: [
                       /* @__PURE__ */ jsx20(Text_default, { children: value.value }),
-                      openedFilterColumn.withTotalNumber && /* @__PURE__ */ jsxs16(Text_default, { fontSize: 14, color: theme2.colors.textSecondary, children: [
-                        "(",
-                        value.count,
-                        ")"
-                      ] })
+                      openedFilterColumn.withTotalNumber && /* @__PURE__ */ jsxs16(
+                        Text_default,
+                        {
+                          fontSize: 14,
+                          color: isActive ? theme2.colors.base + "c0" : theme2.colors.textSecondary,
+                          children: [
+                            "(",
+                            value.count,
+                            ")"
+                          ]
+                        }
+                      )
                     ] })
                   },
                   value.value
@@ -7790,32 +7835,6 @@ var Foldable2 = memo22(FoldableComponent);
 Foldable2.box = FoldableComponent.box;
 var Foldable_default = Foldable2;
 
-// src/utils/variableFunctions.ts
-var checkBetterHtmlContextValue = (value, functionsName) => {
-  if (value === void 0) {
-    throw new Error(
-      `\`${functionsName}()\` must be used within a \`<BetterHtmlProvider>\`. Make sure to add one at the root of your component tree.`
-    );
-  }
-  return value !== void 0;
-};
-var loaderControls = {
-  startLoading: (loaderName) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.startLoading")) return;
-    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
-      ...oldValue,
-      [loaderName.toString()]: true
-    }));
-  },
-  stopLoading: (loaderName) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "loaderControls.stopLoading")) return;
-    externalBetterHtmlContextValue.setLoaders((oldValue) => ({
-      ...oldValue,
-      [loaderName.toString()]: false
-    }));
-  }
-};
-
 // src/plugins/react-router-dom.ts
 import { Link as RouterLink, NavLink as RouterNavLink } from "react-router-dom";
 var reactRouterDomPlugin = {
@@ -7851,6 +7870,7 @@ export {
   Tabs_default as Tabs,
   Text_default as Text,
   ToggleInput_default as ToggleInput,
+  colorThemeControls,
   countries,
   darkenColor,
   desaturateColor,