react-better-html 1.1.218 → 1.1.220

package/dist/index.d.mts

@@ -520,6 +520,8 @@ type ModalProps = {
     name?: string;
     overflow?: React.CSSProperties["overflow"];
     withoutCloseButton?: boolean;
+    /** @default false */
+    defaultIsOpened?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
     children?: React.ReactNode;
@@ -1055,6 +1057,7 @@ type AlertsPluginOptions = {
     align?: "left" | "center" | "right";
     /** @default "auto" */
     defaultDuration?: AlertDuration;
+    defaultDisplay?: PartialRecord<AlertType, AlertDisplay>;
     /** @default 460 */
     maxWidth?: number;
     /** @default true */

package/dist/index.d.ts

@@ -520,6 +520,8 @@ type ModalProps = {
     name?: string;
     overflow?: React.CSSProperties["overflow"];
     withoutCloseButton?: boolean;
+    /** @default false */
+    defaultIsOpened?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
     children?: React.ReactNode;
@@ -1055,6 +1057,7 @@ type AlertsPluginOptions = {
     align?: "left" | "center" | "right";
     /** @default "auto" */
     defaultDuration?: AlertDuration;
+    defaultDisplay?: PartialRecord<AlertType, AlertDisplay>;
     /** @default 460 */
     maxWidth?: number;
     /** @default true */

package/dist/index.js

@@ -1296,12 +1296,6 @@ function useUrlQuery() {
     );
   }
   const reactRouterDomPluginConfig = reactRouterDomPlugin2.getConfig();
-  const isInRouterContext = reactRouterDomPluginConfig.useInRouterContext();
-  if (!isInRouterContext) {
-    throw new Error(
-      "`useUrlQuery` hook must be used inside a React Router context. Make sure your component is wrapped in a `<BrowserRouter>`, or another Router component."
-    );
-  }
   const navigate = reactRouterDomPluginConfig.useNavigate();
   const [searchParams] = reactRouterDomPluginConfig.useSearchParams();
   const createSearchParams2 = reactRouterDomPluginConfig.createSearchParams;
@@ -1853,6 +1847,7 @@ var defaultAlertsPluginOptions = {
   position: "bottom",
   align: "right",
   defaultDuration: "auto",
+  defaultDisplay: {},
   maxWidth: 460,
   withLoaderBar: true,
   withCloseButton: true
@@ -2291,6 +2286,7 @@ var ModalComponent = (0, import_react11.forwardRef)(function Modal({
   name,
   overflow,
   withoutCloseButton,
+  defaultIsOpened = false,
   onOpen,
   onClose,
   children
@@ -2301,12 +2297,12 @@ var ModalComponent = (0, import_react11.forwardRef)(function Modal({
   const { app } = useBetterHtmlContextInternal();
   const { colorTheme } = (0, import_react_better_core10.useBetterCoreContext)();
   const dialogRef = (0, import_react11.useRef)(null);
-  const [isOpened, setIsOpened] = (0, import_react11.useState)(false);
-  const [isOpenedLate, setIsOpenedLate] = (0, import_react11.useState)(false);
+  const [isOpened, setIsOpened] = (0, import_react_better_core10.useBooleanState)(false);
+  const [isOpenedLate, setIsOpenedLate] = (0, import_react_better_core10.useBooleanState)(false);
   const onClickOpen = (0, import_react11.useCallback)(() => {
     dialogRef.current?.showModal();
-    setIsOpened(true);
-    setIsOpenedLate(true);
+    setIsOpened.setTrue();
+    setIsOpenedLate.setTrue();
     if (urlQuery && name) {
       urlQuery.setQuery(
         {
@@ -2318,12 +2314,12 @@ var ModalComponent = (0, import_react11.forwardRef)(function Modal({
     onOpen?.();
   }, [onOpen, urlQuery, name]);
   const onClickClose = (0, import_react11.useCallback)(() => {
-    setIsOpened(false);
+    setIsOpened.setFalse();
     onClose?.();
     if (urlQuery && name) urlQuery.removeQuery(`${name}-modal`, false);
     setTimeout(() => {
       dialogRef.current?.close();
-      setIsOpenedLate(false);
+      setIsOpenedLate.setFalse();
     }, 0.2 * 1e3);
   }, [onClose, urlQuery, name]);
   const onKeyDown = (0, import_react11.useCallback)(
@@ -2335,6 +2331,10 @@ var ModalComponent = (0, import_react11.forwardRef)(function Modal({
     },
     [withoutCloseButton]
   );
+  (0, import_react11.useEffect)(() => {
+    if (!defaultIsOpened) return;
+    onClickOpen();
+  }, []);
   (0, import_react11.useImperativeHandle)(
     ref,
     () => {
@@ -2684,6 +2684,7 @@ function Alert2({ alert }) {
     alert.duration ?? pluginConfig.defaultDuration ?? defaultAlertsPluginOptions.defaultDuration,
     alert
   );
+  const defaultAlertDisplay = alert.display ?? pluginConfig.defaultDisplay?.[alert.type] ?? defaultAlertsPluginOptions.defaultDisplay[alert.type] ?? "default";
   const intervalRef = (0, import_react12.useRef)(void 0);
   const startTimeRef = (0, import_react12.useRef)(Date.now());
   const remainingTimeRef = (0, import_react12.useRef)(defaultAlertDurationNumber);
@@ -2703,7 +2704,7 @@ function Alert2({ alert }) {
       setProgress(newProgress);
       if (newProgress <= 0) {
         if (intervalRef.current) clearInterval(intervalRef.current);
-        if (alert.display === "prominent") return;
+        if (defaultAlertDisplay === "prominent") return;
         setIsRemoved(true);
         setTimeout(() => {
           alertControls2.removeAlert(alert.id);
@@ -2714,7 +2715,7 @@ function Alert2({ alert }) {
         }, 0.2 * 1e3 - 10);
       }
     }, updateInterval);
-  }, [alert, progress]);
+  }, [alert, progress, defaultAlertDisplay]);
   const onClickCloseAlert = (0, import_react12.useCallback)(() => {
     setIsRemoved(true);
     setTimeout(() => {
@@ -2773,13 +2774,6 @@ function Alert2({ alert }) {
     }),
     [theme2]
   );
-  (0, import_react12.useEffect)(() => {
-    if (alert.display === "prominent") {
-      setTimeout(() => {
-        modalRef.current?.open();
-      }, 0.1 * 1e3);
-    }
-  }, []);
   (0, import_react12.useEffect)(() => {
     startTimeRef.current = Date.now();
     remainingTimeRef.current = defaultAlertDurationNumber;
@@ -2790,9 +2784,10 @@ function Alert2({ alert }) {
   }, [defaultAlertDurationNumber, startProgressTimer]);
   const animation = `${isRemoved ? getAnimationOutName(pluginConfig.position ?? defaultAlertsPluginOptions.position)[pluginConfig.align ?? defaultAlertsPluginOptions.align] : getAnimationInName(pluginConfig.position ?? defaultAlertsPluginOptions.position)[pluginConfig.align ?? defaultAlertsPluginOptions.align]} ${theme2.styles.transition}`;
   const alertTitle = alert.title ?? alertData[alert.type].title;
-  return alert.display === "prominent" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return defaultAlertDisplay === "prominent" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     Modal_default,
     {
+      defaultIsOpened: true,
       icon: alertData[alert.type].icon,
       title: alertTitle,
       description: alert.message,