avoid merging JSX.Elements in config

Author: veej

packages/bento-design-system/src/BentoConfigContext.tsx

@@ -1,7 +1,7 @@
-import { createContext, useContext } from "react";
+import React, { createContext, useContext } from "react";
 import * as defaultConfigs from "./util/defaultConfigs";
 import type { BentoConfig, PartialBentoConfig } from "./BentoConfig";
-import { deepmerge } from "deepmerge-ts";
+import { deepmergeCustom } from "deepmerge-ts";
 import { Children } from "./util/Children";
 
 const BentoConfigContext = createContext<BentoConfig>(defaultConfigs);
@@ -23,6 +23,17 @@ export function BentoConfigProvider({
   // in case this is the top level provider.
   const parentConfig = useBentoConfig();
 
+  const deepmerge = deepmergeCustom({
+    mergeRecords: (value, utils) => {
+      // NOTE(vince): in case of a JSX.Element in the config (like the Navigation's activeVisualElement),
+      // we don't want to merge the props of the two elements, but we want to take just the second element instead.
+      if (React.isValidElement(value[0]) || React.isValidElement(value[1])) {
+        return value[1];
+      }
+      return utils.actions.defaultMerge;
+    },
+  });
+
   return (
     <BentoConfigContext.Provider value={deepmerge(parentConfig, config) as BentoConfig}>
       {children}

packages/storybook/stories/Components/Navigation.stories.tsx

@@ -1,9 +1,9 @@
 import { createComponentStories } from "../util";
 import { Navigation } from "../";
-import { ComponentProps } from "react";
 import { IconInformative, IllustrationIdea } from "..";
+import { Box, NavigationProps, withBentoConfig } from "@buildo/bento-design-system";
 
-const destinations: ComponentProps<typeof Navigation>["destinations"] = [
+const destinations: NavigationProps<"none">["destinations"] = [
   {
     label: "Destination 1",
     href: "https://google.com",
@@ -47,3 +47,25 @@ export const withIllustrations = createControlledStory("destination1", {
   kind: "illustration",
   destinations: destinations.map((d) => ({ ...d, illustration: IllustrationIdea })) as any,
 });
+
+// Note(vince): test that the nested activeVisualElement completely replace the parent one,
+// and their props are not merged, i.e. the resulting activeVisualElement
+const CustomNavigation = withBentoConfig(
+  {
+    navigation: {
+      activeVisualElement: <Box background="brandPrimary" height={8} borderRadius={4} />,
+      uppercaseLabel: true,
+    },
+  },
+  withBentoConfig(
+    {
+      navigation: {
+        activeVisualElement: <Box background="brandSecondary" height={8} />,
+      },
+    },
+    Navigation
+  )
+);
+export const withCustomActiveVisualElement = () => {
+  return <CustomNavigation kind="none" destinations={destinations} size="large" />;
+};