react-better-html 1.1.193 → 1.1.194

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import { WebTarget } from 'styled-components';
 import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { useNavigate, useLocation, useInRouterContext, useSearchParams } from 'react-router-dom';
+import { useNavigate, useLocation, useInRouterContext, useSearchParams, createSearchParams } from 'react-router-dom';
 
 type PluginName = "alerts" | "react-router-dom" | "localStorage";
 type BetterHtmlPluginConstructor<T extends object = object> = (config?: T) => BetterHtmlPlugin<T>;
@@ -58,12 +58,13 @@ type PageHeaderProps = {
     imageUrl?: string;
     imageSize?: number;
     title?: string;
+    /** @default "h1" */
     titleAs?: TextAs;
-    /** @default theme.colors.textPrimary */
+    /** @default textPrimary */
     titleColor?: React.CSSProperties["color"];
     titleRightElement?: React.ReactNode;
     description?: string;
-    /** @default theme.colors.textSecondary */
+    /** @default textSecondary */
     descriptionColor?: React.CSSProperties["color"];
     textAlign?: React.CSSProperties["textAlign"];
     rightElement?: React.ReactNode;
@@ -910,7 +911,15 @@ type FoldableProps = {
     isOpen?: boolean;
     defaultOpen?: boolean;
     title?: string;
+    /** @default "h3" */
+    titleAs?: TextAs;
+    /** @default textPrimary */
+    titleColor?: React.CSSProperties["color"];
+    titleRightElement?: React.ReactNode;
     description?: string;
+    /** @default textSecondary */
+    descriptionColor?: React.CSSProperties["color"];
+    rightElement?: React.ReactNode;
     icon?: IconName | AnyOtherString;
     image?: AssetName | AnyOtherString;
     headerPaddingBlock?: React.CSSProperties["paddingBlock"];
@@ -1132,6 +1141,7 @@ type ReactRouterDomPluginOptions = {
     useLocation: typeof useLocation;
     useInRouterContext: typeof useInRouterContext;
     useSearchParams: typeof useSearchParams;
+    createSearchParams: typeof createSearchParams;
 };
 declare const defaultReactRouterDomPluginOptions: Required<ReactRouterDomPluginOptions>;
 declare const reactRouterDomPlugin: BetterHtmlPluginConstructor<ReactRouterDomPluginOptions>;

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { WebTarget } from 'styled-components';
 import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { useNavigate, useLocation, useInRouterContext, useSearchParams } from 'react-router-dom';
+import { useNavigate, useLocation, useInRouterContext, useSearchParams, createSearchParams } from 'react-router-dom';
 
 type PluginName = "alerts" | "react-router-dom" | "localStorage";
 type BetterHtmlPluginConstructor<T extends object = object> = (config?: T) => BetterHtmlPlugin<T>;
@@ -58,12 +58,13 @@ type PageHeaderProps = {
     imageUrl?: string;
     imageSize?: number;
     title?: string;
+    /** @default "h1" */
     titleAs?: TextAs;
-    /** @default theme.colors.textPrimary */
+    /** @default textPrimary */
     titleColor?: React.CSSProperties["color"];
     titleRightElement?: React.ReactNode;
     description?: string;
-    /** @default theme.colors.textSecondary */
+    /** @default textSecondary */
     descriptionColor?: React.CSSProperties["color"];
     textAlign?: React.CSSProperties["textAlign"];
     rightElement?: React.ReactNode;
@@ -910,7 +911,15 @@ type FoldableProps = {
     isOpen?: boolean;
     defaultOpen?: boolean;
     title?: string;
+    /** @default "h3" */
+    titleAs?: TextAs;
+    /** @default textPrimary */
+    titleColor?: React.CSSProperties["color"];
+    titleRightElement?: React.ReactNode;
     description?: string;
+    /** @default textSecondary */
+    descriptionColor?: React.CSSProperties["color"];
+    rightElement?: React.ReactNode;
     icon?: IconName | AnyOtherString;
     image?: AssetName | AnyOtherString;
     headerPaddingBlock?: React.CSSProperties["paddingBlock"];
@@ -1132,6 +1141,7 @@ type ReactRouterDomPluginOptions = {
     useLocation: typeof useLocation;
     useInRouterContext: typeof useInRouterContext;
     useSearchParams: typeof useSearchParams;
+    createSearchParams: typeof createSearchParams;
 };
 declare const defaultReactRouterDomPluginOptions: Required<ReactRouterDomPluginOptions>;
 declare const reactRouterDomPlugin: BetterHtmlPluginConstructor<ReactRouterDomPluginOptions>;

package/dist/index.js

@@ -106,7 +106,6 @@ var isMobileDevice = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Op
 
 // src/utils/hooks.ts
 var import_react10 = require("react");
-var import_react_router_dom2 = require("react-router-dom");
 
 // src/constants/css.ts
 var cssProps = {
@@ -1650,7 +1649,8 @@ var defaultReactRouterDomPluginOptions = {
   useNavigate: import_react_router_dom.useNavigate,
   useLocation: import_react_router_dom.useLocation,
   useInRouterContext: import_react_router_dom.useInRouterContext,
-  useSearchParams: import_react_router_dom.useSearchParams
+  useSearchParams: import_react_router_dom.useSearchParams,
+  createSearchParams: import_react_router_dom.createSearchParams
 };
 var reactRouterDomPlugin = (options) => ({
   name: "react-router-dom",
@@ -3210,6 +3210,7 @@ function useUrlQuery() {
   }
   const navigate = reactRouterDomPluginConfig.useNavigate();
   const [searchParams] = reactRouterDomPluginConfig.useSearchParams();
+  const createSearchParams2 = reactRouterDomPluginConfig.createSearchParams;
   const setQuery = (0, import_react10.useCallback)(
     (query, keepHistory = true) => {
       const currentSearchParams = {};
@@ -3218,7 +3219,7 @@ function useUrlQuery() {
       });
       navigate(
         {
-          search: (0, import_react_router_dom2.createSearchParams)({
+          search: createSearchParams2({
             ...currentSearchParams,
             ...Object.fromEntries(Object.entries(query).map(([key, value]) => [key, value.toString()]))
           }).toString()
@@ -3291,7 +3292,7 @@ var PageHeaderComponent = (0, import_react12.forwardRef)(function PageHeader({
   imageUrl,
   imageSize = 60,
   title,
-  titleAs,
+  titleAs = "h1",
   titleColor,
   titleRightElement,
   description,
@@ -3330,7 +3331,7 @@ var PageHeaderComponent = (0, import_react12.forwardRef)(function PageHeader({
                     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       Text_default,
                       {
-                        as: titleAs ?? "h1",
+                        as: titleAs,
                         textAlign,
                         color: titleColor ?? (lightMode ? theme2.colors.base : theme2.colors.textPrimary),
                         children: title
@@ -9293,7 +9294,12 @@ var FoldableComponent = (0, import_react29.forwardRef)(function Foldable({
   isOpen: controlledIsOpen,
   defaultOpen = false,
   title,
+  titleAs = "h3",
+  titleColor,
+  titleRightElement,
   description,
+  descriptionColor,
+  rightElement,
   icon,
   image,
   headerPaddingBlock,
@@ -9361,7 +9367,7 @@ var FoldableComponent = (0, import_react29.forwardRef)(function Foldable({
       {
         width: "100%",
         alignItems: "center",
-        gap: theme2.styles.gap,
+        gap: theme2.styles.space,
         paddingBlock: headerPaddingBlock ?? theme2.styles.gap,
         paddingInline: headerPaddingInline,
         cursor: "pointer",
@@ -9372,10 +9378,23 @@ var FoldableComponent = (0, import_react29.forwardRef)(function Foldable({
             icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: icon, size: 20, flexShrink: 0 }),
             image && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Image_default.profileImage, { name: image, size: 24, flexShrink: 0 }),
             /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { gap: theme2.styles.gap / 2, children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text_default, { as: "h3", fontWeight: 700, lineHeight: "20px", children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text_default, { color: theme2.colors.textSecondary, children: description })
+              title && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.space, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  Text_default,
+                  {
+                    as: titleAs,
+                    fontWeight: 700,
+                    lineHeight: "20px",
+                    color: titleColor ?? theme2.colors.textPrimary,
+                    children: title
+                  }
+                ),
+                titleRightElement
+              ] }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text_default, { color: descriptionColor ?? theme2.colors.textSecondary, children: description })
             ] })
           ] }),
+          rightElement,
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             Icon_default,
             {