build: release 15-11-2024

apps/builder/app/builder/features/navigator/css-preview.tsx

@@ -32,7 +32,6 @@ const getCssText = (
   instanceId: string
 ) => {
   const sourceStyles: StyleMap = new Map();
-  const inheritedStyles: StyleMap = new Map();
   const cascadedStyles: StyleMap = new Map();
   const presetStyles: StyleMap = new Map();
 
@@ -55,8 +54,6 @@ const getCssText = (
     if (group) {
       if (styleDecl.source.instanceId === instanceId) {
         group.set(property, styleDecl.cascadedValue);
-      } else {
-        inheritedStyles.set(property, styleDecl.cascadedValue);
       }
     }
   }
@@ -73,7 +70,6 @@ const getCssText = (
 
   add("Style Sources", sourceStyles);
   add("Cascaded", cascadedStyles);
-  add("Inherited", inheritedStyles);
   add("Preset", presetStyles);
 
   return result.join("\n");

apps/builder/app/builder/features/project-settings/section-marketplace.tsx

@@ -213,8 +213,8 @@ export const SectionMarketplace = () => {
 
       <Grid gap={2} css={sectionSpacing}>
         <Label>Thumbnail</Label>
-        <Grid flow="column" gap={3}>
-          <InputErrorsTooltip errors={errors?.thumbnailAssetId}>
+        <InputErrorsTooltip errors={errors?.thumbnailAssetId}>
+          <Grid flow="column" gap={3}>
             <Box className={thumbnailStyle()}>
               <Image
                 className={thumbnailImageStyle({
@@ -224,18 +224,18 @@ export const SectionMarketplace = () => {
                 loader={imageLoader}
               />
             </Box>
-          </InputErrorsTooltip>
 
-          <Grid gap={2}>
-            <Text color="subtle">
-              The optimal dimensions in marketplace are 600x315 px or larger
-              with a 1.91:1 aspect ratio.
-            </Text>
-            <ImageControl onAssetIdChange={handleSave("thumbnailAssetId")}>
-              <Button css={{ justifySelf: "start" }}>Upload</Button>
-            </ImageControl>
+            <Grid gap={2}>
+              <Text color="subtle">
+                The optimal dimensions in marketplace are 600x315 px or larger
+                with a 1.91:1 aspect ratio.
+              </Text>
+              <ImageControl onAssetIdChange={handleSave("thumbnailAssetId")}>
+                <Button css={{ justifySelf: "start" }}>Upload</Button>
+              </ImageControl>
+            </Grid>
           </Grid>
-        </Grid>
+        </InputErrorsTooltip>
       </Grid>
 
       <Grid gap={1} css={sectionSpacing}>

apps/builder/app/builder/features/style-panel/shared/configs.ts

@@ -54,7 +54,8 @@ export const styleConfigByName = (propertyName: StyleProperty): StyleConfig => {
 
   const keywords = keywordValues[property] || [];
   const label = humanizeString(property);
-  const propertyData = properties[property];
+  // property data does not exist for css custom properties
+  const propertyData = properties[property] ?? {};
 
   const result = {
     label,

apps/builder/app/builder/features/topbar/publish.tsx

@@ -361,7 +361,7 @@ const getStaticPublishStatusAndText = ({
   publishStatus,
 }: {
   updatedAt: string;
-  publishStatus: string;
+  publishStatus: "PENDING" | "FAILED" | "PUBLISHED";
 }) => {
   let status = publishStatus;
 
@@ -411,8 +411,7 @@ const PublishStatic = ({
 
   const [isPending, setIsPendingOptimistic] = useOptimistic(false);
 
-  const isPublishInProgress =
-    project.latestStaticBuild?.publishStatus === "PENDING" || isPending;
+  const isPublishInProgress = status === "PENDING" || isPending;
 
   return (
     <Flex gap={2} shrink={false} direction={"column"}>

apps/builder/app/builder/shared/binding-popover.tsx

@@ -271,6 +271,8 @@ const BindingButton = forwardRef<
           left: 0,
           boxSizing: "border-box",
           padding: 2,
+          // Because of the InputErrorsTooltip, we need to set zIndex to 1 (as InputErrorsTooltip needs an additional position relative wrapper)
+          zIndex: 1,
           transform: "translate(-50%, -50%) scale(1)",
           transition: "transform 60ms, opacity 0ms 60ms",
           // https://easings.net/#easeInOutSine

apps/builder/app/shared/pages/use-switch-page.ts

@@ -12,7 +12,6 @@ import {
 } from "~/shared/nano-states";
 import { builderPath } from "~/shared/router-utils";
 import { $selectedPage, selectPage } from "../awareness";
-import invariant from "tiny-invariant";
 
 const setPageStateFromUrl = () => {
   const searchParams = new URLSearchParams(window.location.search);
@@ -22,13 +21,12 @@ const setPageStateFromUrl = () => {
   }
   const pageId = searchParams.get("pageId") ?? pages.homePage.id;
 
-  const mode = searchParams.get("mode");
+  let mode = searchParams.get("mode");
 
   // Check in case of BuilderMode rename
-  invariant(
-    mode === null || isBuilderMode(mode),
-    `Invalid search param mode: ${mode}`
-  );
+  if (!isBuilderMode(mode)) {
+    mode = null;
+  }
 
   setBuilderMode(mode);
 

packages/design-system/src/components/tooltip.tsx

@@ -245,25 +245,42 @@ export const InputErrorsTooltip = ({
   // Wrap the error tooltip with its own provider to avoid logic intersection with ordinary tooltips.
   // This is especially important for hover delays.
   // Here we ensure that hovering over the tooltip trigger after any input will not show the tooltip immediately.
+  // --
+  // Additionally, we can't wrap the underlying Input with Tooltip because we are not rendering Tooltips in case of no errors.
+  // This causes a full re-render of the Input and loss of focus.
+  // Because of that, we are wrapping the Tooltip with the relative Box component and providing an invisible trigger for the Tooltip.
   return (
     <TooltipProvider>
       <Box ref={ref as never} css={{ display: "contents" }}></Box>
-      <Tooltip
-        {...rest}
-        collisionBoundary={collisionBoundary as never}
-        collisionPadding={-8}
-        hideWhenDetached={true}
-        content={
-          errors !== undefined && errors.length !== 0
-            ? (content ?? " ")
-            : undefined
-        }
-        open={errors !== undefined && errors.length !== 0}
-        side={side ?? "right"}
-        css={css}
-      >
+      <Box css={{ position: "relative" }}>
+        <Tooltip
+          {...rest}
+          collisionBoundary={collisionBoundary as never}
+          collisionPadding={-8}
+          hideWhenDetached={true}
+          content={
+            errors !== undefined && errors.length !== 0
+              ? (content ?? " ")
+              : undefined
+          }
+          open={errors !== undefined && errors.length !== 0}
+          side={side ?? "right"}
+          css={css}
+        >
+          <Box
+            css={{
+              position: "absolute",
+              inset: 0,
+              visibility: "hidden",
+              // Uncomment for debugging
+              // backgroundColor: "red",
+              // opacity: 0.3,
+              // pointerEvents: "none",
+            }}
+          ></Box>
+        </Tooltip>
         {children}
-      </Tooltip>
+      </Box>
     </TooltipProvider>
   );
 };