@refinedev/core 4.47.2 → 4.49.0

package/src/components/gh-banner/index.tsx

@@ -2,269 +2,262 @@ import React, { SVGProps, useEffect } from "react";
 import { CSSRules } from "./styles";
 
 const text =
-    "If you find Refine useful, you can contribute to its growth by giving it a star on GitHub";
+  "If you find Refine useful, you can contribute to its growth by giving it a star on GitHub";
 
 export const GitHubBanner = () => {
-    useEffect(() => {
-        const styleTag = document.createElement("style");
-        document.head.appendChild(styleTag);
-        CSSRules.forEach((rule) =>
-            styleTag.sheet?.insertRule(rule, styleTag.sheet.cssRules.length),
-        );
-    }, []);
+  useEffect(() => {
+    const styleTag = document.createElement("style");
+    document.head.appendChild(styleTag);
+    CSSRules.forEach((rule) =>
+      styleTag.sheet?.insertRule(rule, styleTag.sheet.cssRules.length),
+    );
+  }, []);
 
-    return (
+  return (
+    <div
+      className="banner bg-top-announcement"
+      style={{
+        width: "100%",
+        height: "48px",
+      }}
+    >
+      <div
+        style={{
+          position: "relative",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          paddingLeft: "200px",
+          width: "100%",
+          maxWidth: "100vw",
+          height: "100%",
+          borderBottom: "1px solid #47ebeb26",
+        }}
+      >
         <div
-            className="banner bg-top-announcement"
+          className="top-announcement-mask"
+          style={{
+            position: "absolute",
+            left: 0,
+            top: 0,
+            width: "100%",
+            height: "100%",
+            borderBottom: "1px solid #47ebeb26",
+          }}
+        >
+          <div
             style={{
-                width: "100%",
-                height: "48px",
+              position: "relative",
+              width: "960px",
+              height: "100%",
+              display: "flex",
+              justifyContent: "space-between",
+              margin: "0 auto",
             }}
-        >
+          >
             <div
+              style={{
+                width: "calc(50% - 300px)",
+                height: "100%",
+                position: "relative",
+              }}
+            >
+              <GlowSmall
                 style={{
-                    position: "relative",
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    paddingLeft: "200px",
-                    width: "100%",
-                    maxWidth: "100vw",
-                    height: "100%",
-                    borderBottom: "1px solid #47ebeb26",
+                  animationDelay: "1.5s",
+                  position: "absolute",
+                  top: "2px",
+                  right: "220px",
                 }}
-            >
-                <div
-                    className="top-announcement-mask"
-                    style={{
-                        position: "absolute",
-                        left: 0,
-                        top: 0,
-                        width: "100%",
-                        height: "100%",
-                        borderBottom: "1px solid #47ebeb26",
-                    }}
-                >
-                    <div
-                        style={{
-                            position: "relative",
-                            width: "960px",
-                            height: "100%",
-                            display: "flex",
-                            justifyContent: "space-between",
-                            margin: "0 auto",
-                        }}
-                    >
-                        <div
-                            style={{
-                                width: "calc(50% - 300px)",
-                                height: "100%",
-                                position: "relative",
-                            }}
-                        >
-                            <GlowSmall
-                                style={{
-                                    animationDelay: "1.5s",
-                                    position: "absolute",
-                                    top: "2px",
-                                    right: "220px",
-                                }}
-                                id={"1"}
-                            />
-                            <GlowSmall
-                                style={{
-                                    animationDelay: "1s",
-                                    position: "absolute",
-                                    top: "8px",
-                                    right: "100px",
-                                    transform: "rotate(180deg)",
-                                }}
-                                id={"2"}
-                            />
-                            <GlowBig
-                                style={{
-                                    position: "absolute",
-                                    right: "10px",
-                                }}
-                                id={"3"}
-                            />
-                        </div>
-
-                        <div
-                            style={{
-                                width: "calc(50% - 300px)",
-                                height: "100%",
-                                position: "relative",
-                            }}
-                        >
-                            <GlowSmall
-                                style={{
-                                    animationDelay: "2s",
-                                    position: "absolute",
-                                    top: "6px",
-                                    right: "180px",
-                                    transform: "rotate(180deg)",
-                                }}
-                                id={"4"}
-                            />
-                            <GlowSmall
-                                style={{
-                                    animationDelay: "0.5s",
-                                    transitionDelay: "1.3s",
-                                    position: "absolute",
-                                    top: "2px",
-                                    right: "40px",
-                                }}
-                                id={"5"}
-                            />
-                            <GlowBig
-                                style={{
-                                    position: "absolute",
-                                    right: "-70px",
-                                }}
-                                id={"6"}
-                            />
-                        </div>
-                    </div>
-                </div>
-                <Text text={text} />
+                id={"1"}
+              />
+              <GlowSmall
+                style={{
+                  animationDelay: "1s",
+                  position: "absolute",
+                  top: "8px",
+                  right: "100px",
+                  transform: "rotate(180deg)",
+                }}
+                id={"2"}
+              />
+              <GlowBig
+                style={{
+                  position: "absolute",
+                  right: "10px",
+                }}
+                id={"3"}
+              />
             </div>
-        </div>
-    );
-};
 
-const Text = ({ text }: { text: string }) => {
-    return (
-        <a
-            className="gh-link"
-            href="https://s.refine.dev/github-support"
-            target="_blank"
-            rel="noreferrer"
-            style={{
-                position: "absolute",
-                height: "100%",
-                padding: "0 60px",
-                display: "flex",
-                flexWrap: "nowrap",
-                whiteSpace: "nowrap",
-                justifyContent: "center",
-                alignItems: "center",
-                backgroundImage:
-                    "linear-gradient(90deg, rgba(31, 63, 72, 0.00) 0%, #1F3F48 10%, #1F3F48 90%, rgba(31, 63, 72, 0.00) 100%)",
-            }}
-        >
             <div
+              style={{
+                width: "calc(50% - 300px)",
+                height: "100%",
+                position: "relative",
+              }}
+            >
+              <GlowSmall
                 style={{
-                    color: "#fff",
-                    display: "flex",
-                    flexDirection: "row",
-                    gap: "8px",
+                  animationDelay: "2s",
+                  position: "absolute",
+                  top: "6px",
+                  right: "180px",
+                  transform: "rotate(180deg)",
                 }}
-            >
-                <span
-                    style={{
-                        display: "flex",
-                        flexDirection: "row",
-                        justifyContent: "center",
-                        alignItems: "center",
-                    }}
-                >
-                    ⭐️
-                </span>
-                <span
-                    className="text"
-                    style={{
-                        fontSize: "16px",
-                        lineHeight: "24px",
-                    }}
-                >
-                    {text}
-                </span>
-                <span
-                    style={{
-                        display: "flex",
-                        flexDirection: "row",
-                        justifyContent: "center",
-                        alignItems: "center",
-                    }}
-                >
-                    ⭐️
-                </span>
+                id={"4"}
+              />
+              <GlowSmall
+                style={{
+                  animationDelay: "0.5s",
+                  transitionDelay: "1.3s",
+                  position: "absolute",
+                  top: "2px",
+                  right: "40px",
+                }}
+                id={"5"}
+              />
+              <GlowBig
+                style={{
+                  position: "absolute",
+                  right: "-70px",
+                }}
+                id={"6"}
+              />
             </div>
-        </a>
-    );
+          </div>
+        </div>
+        <Text text={text} />
+      </div>
+    </div>
+  );
 };
 
-const GlowSmall = ({ style, ...props }: SVGProps<SVGSVGElement>) => {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width={80}
-            height={40}
-            fill="none"
-            style={{
-                opacity: 1,
-                animation:
-                    "top-announcement-glow 1s ease-in-out infinite alternate",
-                ...style,
-            }}
+const Text = ({ text }: { text: string }) => {
+  return (
+    <a
+      className="gh-link"
+      href="https://s.refine.dev/github-support"
+      target="_blank"
+      rel="noreferrer"
+      style={{
+        position: "absolute",
+        height: "100%",
+        padding: "0 60px",
+        display: "flex",
+        flexWrap: "nowrap",
+        whiteSpace: "nowrap",
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundImage:
+          "linear-gradient(90deg, rgba(31, 63, 72, 0.00) 0%, #1F3F48 10%, #1F3F48 90%, rgba(31, 63, 72, 0.00) 100%)",
+      }}
+    >
+      <div
+        style={{
+          color: "#fff",
+          display: "flex",
+          flexDirection: "row",
+          gap: "8px",
+        }}
+      >
+        <span
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
         >
-            <circle
-                cx={40}
-                r={40}
-                fill={`url(#${props.id}-a)`}
-                fillOpacity={0.5}
-            />
-            <defs>
-                <radialGradient
-                    id={`${props.id}-a`}
-                    cx={0}
-                    cy={0}
-                    r={1}
-                    gradientTransform="matrix(0 40 -40 0 40 0)"
-                    gradientUnits="userSpaceOnUse"
-                >
-                    <stop stopColor="#47EBEB" />
-                    <stop offset={1} stopColor="#47EBEB" stopOpacity={0} />
-                </radialGradient>
-            </defs>
-        </svg>
-    );
+          ⭐️
+        </span>
+        <span
+          className="text"
+          style={{
+            fontSize: "16px",
+            lineHeight: "24px",
+          }}
+        >
+          {text}
+        </span>
+        <span
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          ⭐️
+        </span>
+      </div>
+    </a>
+  );
 };
 
-const GlowBig = ({ style, ...props }: SVGProps<SVGSVGElement>) => (
+const GlowSmall = ({ style, ...props }: SVGProps<SVGSVGElement>) => {
+  return (
     <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width={120}
-        height={48}
-        fill="none"
-        {...props}
-        style={{
-            opacity: 1,
-            animation:
-                "top-announcement-glow 1s ease-in-out infinite alternate",
-            ...style,
-        }}
+      xmlns="http://www.w3.org/2000/svg"
+      width={80}
+      height={40}
+      fill="none"
+      style={{
+        opacity: 1,
+        animation: "top-announcement-glow 1s ease-in-out infinite alternate",
+        ...style,
+      }}
     >
-        <circle
-            cx={60}
-            cy={24}
-            r={60}
-            fill={`url(#${props.id}-a)`}
-            fillOpacity={0.5}
-        />
-        <defs>
-            <radialGradient
-                id={`${props.id}-a`}
-                cx={0}
-                cy={0}
-                r={1}
-                gradientTransform="matrix(0 60 -60 0 60 24)"
-                gradientUnits="userSpaceOnUse"
-            >
-                <stop stopColor="#47EBEB" />
-                <stop offset={1} stopColor="#47EBEB" stopOpacity={0} />
-            </radialGradient>
-        </defs>
+      <circle cx={40} r={40} fill={`url(#${props.id}-a)`} fillOpacity={0.5} />
+      <defs>
+        <radialGradient
+          id={`${props.id}-a`}
+          cx={0}
+          cy={0}
+          r={1}
+          gradientTransform="matrix(0 40 -40 0 40 0)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#47EBEB" />
+          <stop offset={1} stopColor="#47EBEB" stopOpacity={0} />
+        </radialGradient>
+      </defs>
     </svg>
+  );
+};
+
+const GlowBig = ({ style, ...props }: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={120}
+    height={48}
+    fill="none"
+    {...props}
+    style={{
+      opacity: 1,
+      animation: "top-announcement-glow 1s ease-in-out infinite alternate",
+      ...style,
+    }}
+  >
+    <circle
+      cx={60}
+      cy={24}
+      r={60}
+      fill={`url(#${props.id}-a)`}
+      fillOpacity={0.5}
+    />
+    <defs>
+      <radialGradient
+        id={`${props.id}-a`}
+        cx={0}
+        cy={0}
+        r={1}
+        gradientTransform="matrix(0 60 -60 0 60 24)"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#47EBEB" />
+        <stop offset={1} stopColor="#47EBEB" stopOpacity={0} />
+      </radialGradient>
+    </defs>
+  </svg>
 );

package/src/components/gh-banner/styles.ts

@@ -1,5 +1,5 @@
 export const CSSRules = [
-    `
+  `
     .bg-top-announcement {
         border-bottom: 1px solid rgba(71, 235, 235, 0.15);
         background: radial-gradient(
@@ -10,7 +10,7 @@ export const CSSRules = [
             #14141f;
     }
     `,
-    `
+  `
     .top-announcement-mask {
         mask-image: url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/hexagon.svg);
         -webkit-mask-image: url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/hexagon.svg);
@@ -19,20 +19,20 @@ export const CSSRules = [
         background: rgba(71, 235, 235, 0.25);
     }
     `,
-    `
+  `
     .banner {
         display: flex;
         @media (max-width: 1000px) {
             display: none;
         }
     }`,
-    `
+  `
     .gh-link, .gh-link:hover, .gh-link:active, .gh-link:visited, .gh-link:focus {
         text-decoration: none;
         z-index: 9;
     }
     `,
-    `
+  `
     @keyframes top-announcement-glow {
         0% {
             opacity: 1;

package/src/components/index.ts

@@ -7,4 +7,4 @@ export { Authenticated } from "./authenticated";
 export { RouteChangeHandler } from "./routeChangeHandler";
 export { CanAccess, CanAccessProps } from "./canAccess";
 export { GitHubBanner } from "./gh-banner";
-export { AutoSaveIndicator } from "./autoSaveIndicator";
+export { AutoSaveIndicator, AutoSaveIndicatorProps } from "./autoSaveIndicator";

package/src/components/layoutWrapper/defaultLayout/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { LayoutProps } from "../../../interfaces";
+import { LayoutProps } from "../../../contexts/refine/types";
 
 export const DefaultLayout: React.FC<LayoutProps> = ({ children }) => {
-    return <div>{children}</div>;
+  return <div>{children}</div>;
 };