react-better-html 1.1.193 → 1.1.195

package/dist/index.mjs

@@ -9,7 +9,6 @@ var isMobileDevice = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Op
 
 // src/utils/hooks.ts
 import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
-import { createSearchParams } from "react-router-dom";
 
 // src/constants/css.ts
 var cssProps = {
@@ -1548,12 +1547,13 @@ var alertsPlugin = (options) => ({
 });
 
 // src/plugins/reactRouterDom.ts
-import { useInRouterContext, useLocation, useNavigate, useSearchParams } from "react-router-dom";
+import { createSearchParams, useInRouterContext, useLocation, useNavigate, useSearchParams } from "react-router-dom";
 var defaultReactRouterDomPluginOptions = {
   useNavigate,
   useLocation,
   useInRouterContext,
-  useSearchParams
+  useSearchParams,
+  createSearchParams
 };
 var reactRouterDomPlugin = (options) => ({
   name: "react-router-dom",
@@ -3113,6 +3113,7 @@ function useUrlQuery() {
   }
   const navigate = reactRouterDomPluginConfig.useNavigate();
   const [searchParams] = reactRouterDomPluginConfig.useSearchParams();
+  const createSearchParams2 = reactRouterDomPluginConfig.createSearchParams;
   const setQuery = useCallback4(
     (query, keepHistory = true) => {
       const currentSearchParams = {};
@@ -3121,7 +3122,7 @@ function useUrlQuery() {
       });
       navigate(
         {
-          search: createSearchParams({
+          search: createSearchParams2({
             ...currentSearchParams,
             ...Object.fromEntries(Object.entries(query).map(([key, value]) => [key, value.toString()]))
           }).toString()
@@ -3194,7 +3195,7 @@ var PageHeaderComponent = forwardRef5(function PageHeader({
   imageUrl,
   imageSize = 60,
   title,
-  titleAs,
+  titleAs = "h1",
   titleColor,
   titleRightElement,
   description,
@@ -3233,7 +3234,7 @@ var PageHeaderComponent = forwardRef5(function PageHeader({
                     /* @__PURE__ */ jsx10(
                       Text_default,
                       {
-                        as: titleAs ?? "h1",
+                        as: titleAs,
                         textAlign,
                         color: titleColor ?? (lightMode ? theme2.colors.base : theme2.colors.textPrimary),
                         children: title
@@ -9206,7 +9207,12 @@ var FoldableComponent = forwardRef18(function Foldable({
   isOpen: controlledIsOpen,
   defaultOpen = false,
   title,
+  titleAs = "h3",
+  titleColor,
+  titleRightElement,
   description,
+  descriptionColor,
+  rightElement,
   icon,
   image,
   headerPaddingBlock,
@@ -9274,7 +9280,7 @@ var FoldableComponent = forwardRef18(function Foldable({
       {
         width: "100%",
         alignItems: "center",
-        gap: theme2.styles.gap,
+        gap: theme2.styles.space,
         paddingBlock: headerPaddingBlock ?? theme2.styles.gap,
         paddingInline: headerPaddingInline,
         cursor: "pointer",
@@ -9285,10 +9291,23 @@ var FoldableComponent = forwardRef18(function Foldable({
             icon && /* @__PURE__ */ jsx26(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
             image && /* @__PURE__ */ jsx26(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
             /* @__PURE__ */ jsxs22(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-              title && /* @__PURE__ */ jsx26(Text_default, { as: "h3", fontWeight: 700, lineHeight: "20px", children: title }),
-              description && /* @__PURE__ */ jsx26(Text_default, { color: theme2.colors.textSecondary, children: description })
+              title && /* @__PURE__ */ jsxs22(Div_default.row, { alignItems: "center", gap: theme2.styles.space, children: [
+                /* @__PURE__ */ jsx26(
+                  Text_default,
+                  {
+                    as: titleAs,
+                    fontWeight: 700,
+                    lineHeight: "20px",
+                    color: titleColor ?? theme2.colors.textPrimary,
+                    children: title
+                  }
+                ),
+                titleRightElement
+              ] }),
+              description && /* @__PURE__ */ jsx26(Text_default, { color: descriptionColor ?? theme2.colors.textSecondary, children: description })
             ] })
           ] }),
+          rightElement,
           /* @__PURE__ */ jsx26(
             Icon_default,
             {
@@ -9491,7 +9510,8 @@ var SideMenuComponent = function SideMenu({
   collapsable,
   withCloseButton,
   widthMobileHandle,
-  backgroundColor
+  backgroundColor,
+  paddingTop
 }) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
@@ -9519,7 +9539,7 @@ var SideMenuComponent = function SideMenu({
       backgroundColor: readyBackgroundColor,
       borderRight: `solid 1px ${theme2.colors.border}`,
       transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : "translateX(-100%)",
-      paddingTop: logoAssetName || logoUrl ? theme2.styles.gap : theme2.styles.space,
+      paddingTop: paddingTop ?? (logoAssetName || logoUrl ? theme2.styles.gap : theme2.styles.space),
       transition: mediaQuery.size1000 ? !isCollapsed ? `transform ${theme2.styles.transition}` : "none" : theme2.styles.transition,
       userSelect: "none",
       zIndex: 10,