@builder.io/sdk-react-native 4.0.8 → 4.0.9

package/lib/node/typescript/blocks/personalization-container/helpers.d.ts

@@ -1,5 +1,7 @@
 import type { BuilderBlock } from '../../types/builder-block';
+import type { Target } from '../../types/targets';
 import type { PersonalizationContainerProps } from './personalization-container.types';
+export declare const DEFAULT_INDEX = "default";
 export type UserAttributes = {
     date?: string | Date;
     urlPath?: string;
@@ -12,6 +14,25 @@ export type Query = {
     operator: QueryOperator;
     value: QueryValue;
 };
+type BlocksToRenderReturnType = {
+    blocks: BuilderBlock[];
+    path: string;
+    index: number | typeof DEFAULT_INDEX;
+};
+/**
+ * SDKs that support Variant Containers
+ */
+export declare const SDKS_SUPPORTING_PERSONALIZATION: Target[];
+/**
+ * After hydration, we reset the tree
+ * These SDKs handle Personalization Container in a special way:
+ * - first, the inlined script will help us add `display: none`, `aria-hidden: true` and `hidden: true` to the non-winning variants
+ * - then, on mount / when the component is hydrated - we reset the tree with only the winning variant and deleting the entire tree
+ *
+ * This helps us to avoid flicker and show the correct / winning variant initially and then once we've hydrated we show the winning variant
+ * and keep a track of the cookies to update to the correct variant dynamically when the cookie updates.
+ */
+export declare const SDKS_REQUIRING_RESET_APPROACH: Target[];
 export declare function checkShouldRenderVariants(variants: PersonalizationContainerProps['variants'], canTrack: boolean): boolean;
 export declare function getBlocksToRender({ variants, previewingIndex, isHydrated, filteredVariants, fallbackBlocks }: {
     variants: PersonalizationContainerProps['variants'];
@@ -19,10 +40,9 @@ export declare function getBlocksToRender({ variants, previewingIndex, isHydrate
     isHydrated: boolean;
     filteredVariants: PersonalizationContainerProps['variants'];
     fallbackBlocks?: BuilderBlock[];
-}): {
-    blocks: BuilderBlock[];
-    path: string | undefined;
-};
+}): BlocksToRenderReturnType;
+export declare const getInitPersonalizationVariantsFnsScriptString: () => string;
 export declare const getPersonalizationScript: (variants: PersonalizationContainerProps['variants'], blockId: string, locale?: string) => string;
+export declare const getUpdateVisibilityStylesScript: (variants: PersonalizationContainerProps['variants'], blockId: string, locale?: string) => string;
 export { filterWithCustomTargeting } from './helpers/inlined-fns';
 //# sourceMappingURL=helpers.d.ts.map

package/lib/node/typescript/blocks/personalization-container/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/personalization-container/helpers.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAE9D,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AACvF,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AACF,KAAK,aAAa,GAAG,IAAI,GAAG,OAAO,GAAG,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,aAAa,GAAG,UAAU,GAAG,sBAAsB,GAAG,mBAAmB,CAAC;AACzJ,KAAK,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAC/E,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AACF,wBAAgB,yBAAyB,CAAC,QAAQ,EAAE,6BAA6B,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,WAQ/G;AACD,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,cAAc,EACf,EAAE;IACD,QAAQ,EAAE,6BAA6B,CAAC,UAAU,CAAC,CAAC;IACpD,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,6BAA6B,CAAC,UAAU,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;CACjC,GAAG;IACF,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1B,CA+BA;AACD,eAAO,MAAM,wBAAwB,aAAc,6BAA6B,CAAC,UAAU,CAAC,WAAW,MAAM,WAAW,MAAM,WAQ7H,CAAC;AACF,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/personalization-container/helpers.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAElD,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AACvF,eAAO,MAAM,aAAa,YAAY,CAAC;AAIvC,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AACF,KAAK,aAAa,GAAG,IAAI,GAAG,OAAO,GAAG,UAAU,GAAG,YAAY,GAAG,UAAU,GAAG,aAAa,GAAG,UAAU,GAAG,sBAAsB,GAAG,mBAAmB,CAAC;AACzJ,KAAK,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAC/E,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AACF,KAAK,wBAAwB,GAAG;IAC9B,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,OAAO,aAAa,CAAC;CACtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,UAA2C,CAAC;AAExF;;;;;;;;GAQG;AACH,eAAO,MAAM,6BAA6B,UAAkC,CAAC;AAC7E,wBAAgB,yBAAyB,CAAC,QAAQ,EAAE,6BAA6B,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,OAAO,WAQ/G;AACD,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,cAAc,EACf,EAAE;IACD,QAAQ,EAAE,6BAA6B,CAAC,UAAU,CAAC,CAAC;IACpD,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,6BAA6B,CAAC,UAAU,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,YAAY,EAAE,CAAC;CACjC,GAAG,wBAAwB,CAuC3B;AACD,eAAO,MAAM,6CAA6C,cAMzD,CAAC;AAEF,eAAO,MAAM,wBAAwB,aAAc,6BAA6B,CAAC,UAAU,CAAC,WAAW,MAAM,WAAW,MAAM,WAE7H,CAAC;AACF,eAAO,MAAM,+BAA+B,aAAc,6BAA6B,CAAC,UAAU,CAAC,WAAW,MAAM,WAAW,MAAM,WAEpI,CAAC;AACF,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA"}

package/lib/node/typescript/blocks/personalization-container/personalization-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"personalization-container.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/personalization-container/personalization-container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4B/B,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AAEvF,iBAAS,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,qBA+IrE;AAED,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"personalization-container.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/personalization-container/personalization-container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkC/B,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,mCAAmC,CAAC;AAGvF,iBAAS,wBAAwB,CAAC,KAAK,EAAE,6BAA6B,qBAiNrE;AAED,eAAe,wBAAwB,CAAC"}

package/lib/node/typescript/blocks/personalization-container/personalization-container.types.d.ts

@@ -1,5 +1,5 @@
 import type { BuilderBlock } from '../../types/builder-block';
-import type { BuilderDataProps } from '../../types/builder-props';
+import type { BuilderComponentsProp, BuilderDataProps } from '../../types/builder-props';
 import type { Query } from './helpers';
 export type PersonalizationContainerProps = {
     children?: any;
@@ -11,5 +11,5 @@ export type PersonalizationContainerProps = {
         startDate?: string;
         endDate?: string;
     }>;
-} & BuilderDataProps;
+} & BuilderDataProps & BuilderComponentsProp;
 //# sourceMappingURL=personalization-container.types.d.ts.map

package/lib/node/typescript/blocks/personalization-container/personalization-container.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"personalization-container.types.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/personalization-container/personalization-container.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AACvC,MAAM,MAAM,6BAA6B,GAAG;IAC1C,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC;QACf,MAAM,EAAE,YAAY,EAAE,CAAC;QACvB,KAAK,EAAE,KAAK,EAAE,CAAC;QACf,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;CACJ,GAAG,gBAAgB,CAAA"}
+{"version":3,"file":"personalization-container.types.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/personalization-container/personalization-container.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AACvC,MAAM,MAAM,6BAA6B,GAAG;IAC1C,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC;QACf,MAAM,EAAE,YAAY,EAAE,CAAC;QACvB,KAAK,EAAE,KAAK,EAAE,CAAC;QACf,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;CACJ,GAAG,gBAAgB,GAAG,qBAAqB,CAAA"}

package/lib/node/typescript/components/blocks/blocks-wrapper.d.ts

@@ -9,7 +9,19 @@ export type BlocksWrapperProps = {
      */
     BlocksWrapper: any;
     /**
-     * Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
+     * Props to be applied to the wrapping element of blocks. Can be set in two ways:
+     * 1. Globally via `<Content blocksWrapperProps={{...}}/>` - applies to all blocks wrappers in the Content
+     * 2. Locally via `<Blocks BlocksWrapperProps={{...}}/>` - applies only to this specific blocks instance and overrides global props
+     *
+     * For merging both global and local props, spread the context props before adding your own:
+     * ```
+     * <Blocks
+     *   BlocksWrapperProps={{
+     *     ...builderContext.BlocksWrapperProps,
+     *     'data-test-id': 'my-test-id'
+     *   }}
+     * />
+     * ```
      */
     BlocksWrapperProps: any;
     children?: any;

package/lib/node/typescript/components/blocks/blocks-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"blocks-wrapper.d.ts","sourceRoot":"","sources":["../../../../../src/components/blocks/blocks-wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,YAAY,EAAE,GAAG,SAAS,CAAC;IACnC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAC;IAC3C;;OAEG;IACH,aAAa,EAAE,GAAG,CAAC;IACnB;;OAEG;IACH,kBAAkB,EAAE,GAAG,CAAC;IACxB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAE9D,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAkG/C;AAMD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"blocks-wrapper.d.ts","sourceRoot":"","sources":["../../../../../src/components/blocks/blocks-wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,YAAY,EAAE,GAAG,SAAS,CAAC;IACnC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAC;IAC3C;;OAEG;IACH,aAAa,EAAE,GAAG,CAAC;IACnB;;;;;;;;;;;;;;OAcG;IACH,kBAAkB,EAAE,GAAG,CAAC;IACxB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAE9D,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAkG/C;AAMD,eAAe,aAAa,CAAC"}

package/lib/node/typescript/components/blocks/blocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../../../../../src/components/blocks/blocks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,qBAuDjC;;AAED,wBAA4B"}
+{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../../../../../src/components/blocks/blocks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,qBA0DjC;;AAED,wBAA4B"}

package/lib/node/typescript/components/blocks/blocks.types.d.ts

@@ -1,6 +1,6 @@
 import type { BuilderContextInterface, RegisteredComponents } from '../../context/types';
 import type { BlocksWrapperProps } from './blocks-wrapper';
-export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps' | 'classNameProp'>> & {
+export type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'classNameProp'>> & {
     context?: BuilderContextInterface;
     registeredComponents?: RegisteredComponents;
     linkComponent?: any;

package/lib/node/typescript/components/blocks/blocks.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"blocks.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/blocks/blocks.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACzF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,eAAe,GAAG,oBAAoB,GAAG,eAAe,CAAC,CAAC,GAAG;IACtH,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;IAC5C,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAA"}
+{"version":3,"file":"blocks.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/blocks/blocks.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACzF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,eAAe,GAAG,eAAe,CAAC,CAAC,GAAG;IAC/F,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;IAC5C,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAA"}

package/lib/node/typescript/components/content-variants/content-variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content-variants.d.ts","sourceRoot":"","sources":["../../../../../src/components/content-variants/content-variants.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,KAAK,qBAAqB,GAAG,mBAAmB,GAAG;IACjD;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAOF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAQpE,iBAAS,eAAe,CAAC,KAAK,EAAE,qBAAqB,qBA0HpD;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"content-variants.d.ts","sourceRoot":"","sources":["../../../../../src/components/content-variants/content-variants.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,KAAK,qBAAqB,GAAG,mBAAmB,GAAG;IACjD;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAWF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAQpE,iBAAS,eAAe,CAAC,KAAK,EAAE,qBAAqB,qBAmIpD;AAED,eAAe,eAAe,CAAC"}

package/lib/node/typescript/constants/builder-registered-components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"builder-registered-components.d.ts","sourceRoot":"","sources":["../../../../src/constants/builder-registered-components.ts"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAI5D;;;GAGG;AACH,eAAO,MAAM,8BAA8B,EAAE,MAAM,mBAAmB,EAiCzC,CAAA"}
+{"version":3,"file":"builder-registered-components.d.ts","sourceRoot":"","sources":["../../../../src/constants/builder-registered-components.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAI5D;;;GAGG;AACH,eAAO,MAAM,8BAA8B,EAAE,MAAM,mBAAmB,EAiCzC,CAAA"}

package/lib/node/typescript/constants/sdk-version.d.ts

@@ -1,2 +1,2 @@
-export declare const SDK_VERSION = "4.0.8";
+export declare const SDK_VERSION = "4.0.9";
 //# sourceMappingURL=sdk-version.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "4.0.8",
+  "version": "4.0.9",
   "homepage": "https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/react-native",
   "repository": {
     "type": "git",

package/src/blocks/personalization-container/component-info.ts

@@ -3,7 +3,8 @@ export const componentInfo: ComponentInfo = {
   name: 'PersonalizationContainer',
   shouldReceiveBuilderProps: {
     builderBlock: true,
-    builderContext: true
+    builderContext: true,
+    builderComponents: true
   },
   noWrap: true,
   image: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F37229ed30d8c41dfb10b8cca1992053a',

package/src/blocks/personalization-container/helpers/inlined-fns.ts

@@ -84,5 +84,45 @@ export function filterWithCustomTargeting(userAttributes: UserAttributes, query:
     return objectMatchesQuery(userAttributes, filter);
   });
 }
-export const PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  function removeVariants() {\n    variants?.forEach(function (_, index) {\n      document.querySelector('template[data-variant-id=\"' + blockId + '-' + index + '\"]')?.remove();\n    });\n    document.querySelector('script[data-id=\"variants-script-' + blockId + '\"]')?.remove();\n    document.querySelector('style[data-id=\"variants-styles-' + blockId + '\"]')?.remove();\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const isDebug = location.href.includes('builder.debug=true');\n  if (isDebug) {\n    console.debug('PersonalizationContainer', {\n      attributes,\n      variants,\n      winningVariantIndex\n    });\n  }\n  if (winningVariantIndex !== -1) {\n    const winningVariant = document.querySelector('template[data-variant-id=\"' + blockId + '-' + winningVariantIndex + '\"]');\n    if (winningVariant) {\n      const parentNode = winningVariant.parentNode;\n      if (parentNode) {\n        const newParent = parentNode.cloneNode(false);\n        newParent.appendChild(winningVariant.content.firstChild);\n        newParent.appendChild(winningVariant.content.lastChild);\n        parentNode.parentNode?.replaceChild(newParent, parentNode);\n      }\n      if (isDebug) {\n        console.debug('PersonalizationContainer', 'Winning variant Replaced:', winningVariant);\n      }\n    }\n  } else if (variants && variants.length > 0) {\n    removeVariants();\n  }\n}";
-export const FILTER_WITH_CUSTOM_TARGETING_SCRIPT = "function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {\n  function isString(val) {\n    return typeof val === 'string';\n  }\n  function isNumber(val) {\n    return typeof val === 'number';\n  }\n  function objectMatchesQuery(userattr, query) {\n    const result = (() => {\n      const property = query.property;\n      const operator = query.operator;\n      let testValue = query.value;\n      if (query && query.property === 'urlPath' && query.value && typeof query.value === 'string' && query.value !== '/' && query.value.endsWith('/')) {\n        testValue = query.value.slice(0, -1);\n      }\n      if (!(property && operator)) {\n        return true;\n      }\n      if (Array.isArray(testValue)) {\n        if (operator === 'isNot') {\n          return testValue.every(val => objectMatchesQuery(userattr, {\n            property,\n            operator,\n            value: val\n          }));\n        }\n        return !!testValue.find(val => objectMatchesQuery(userattr, {\n          property,\n          operator,\n          value: val\n        }));\n      }\n      const value = userattr[property];\n      if (Array.isArray(value)) {\n        return value.includes(testValue);\n      }\n      switch (operator) {\n        case 'is':\n          return value === testValue;\n        case 'isNot':\n          return value !== testValue;\n        case 'contains':\n          return (isString(value) || Array.isArray(value)) && value.includes(String(testValue));\n        case 'startsWith':\n          return isString(value) && value.startsWith(String(testValue));\n        case 'endsWith':\n          return isString(value) && value.endsWith(String(testValue));\n        case 'greaterThan':\n          return isNumber(value) && isNumber(testValue) && value > testValue;\n        case 'lessThan':\n          return isNumber(value) && isNumber(testValue) && value < testValue;\n        case 'greaterThanOrEqualTo':\n          return isNumber(value) && isNumber(testValue) && value >= testValue;\n        case 'lessThanOrEqualTo':\n          return isNumber(value) && isNumber(testValue) && value <= testValue;\n        default:\n          return false;\n      }\n    })();\n    return result;\n  }\n  const item = {\n    query,\n    startDate,\n    endDate\n  };\n  const now = userAttributes.date && new Date(userAttributes.date) || new Date();\n  if (item.startDate && new Date(item.startDate) > now) {\n    return false;\n  } else if (item.endDate && new Date(item.endDate) < now) {\n    return false;\n  }\n  if (!item.query || !item.query.length) {\n    return true;\n  }\n  return item.query.every(filter => {\n    return objectMatchesQuery(userAttributes, filter);\n  });\n}";
+export function updateVisibilityStylesScript(variants: PersonalizationContainerProps['variants'], blockId: string, isHydrationTarget: boolean, locale?: string) {
+  function getCookie(name: string) {
+    const nameEQ = name + '=';
+    const ca = document.cookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  }
+  const visibilityStylesEl = (document.currentScript?.previousElementSibling as HTMLStyleElement);
+  if (!visibilityStylesEl) {
+    return;
+  }
+  if (isHydrationTarget) {
+    visibilityStylesEl.remove();
+    const currentScript = document.currentScript;
+    if (currentScript) {
+      currentScript.remove();
+    }
+  } else {
+    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');
+    if (locale) {
+      attributes.locale = locale;
+    }
+    const winningVariantIndex = variants?.findIndex(function (variant) {
+      return (window as any).filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);
+    });
+    if (winningVariantIndex !== -1) {
+      let newStyleStr = variants?.map((_, index) => {
+        if (index === winningVariantIndex) return '';
+        return `div[data-variant-id="${blockId}-${index}"] { display: none !important; } `;
+      }).join('') || '';
+      newStyleStr += `div[data-variant-id="${blockId}-default"] { display: none !important; } `;
+      visibilityStylesEl.innerHTML = newStyleStr;
+    }
+  }
+}
+export const PERSONALIZATION_SCRIPT = "function getPersonalizedVariant(variants, blockId, isHydrationTarget, locale) {\n  if (!navigator.cookieEnabled) {\n    return;\n  }\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n  if (locale) {\n    attributes.locale = locale;\n  }\n  const winningVariantIndex = variants?.findIndex(function (variant) {\n    return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n  });\n  const parentDiv = document.currentScript?.parentElement;\n  const variantId = parentDiv?.getAttribute('data-variant-id');\n  const isDefaultVariant = variantId === `${blockId}-default`;\n  const isWinningVariant = winningVariantIndex !== -1 && variantId === `${blockId}-${winningVariantIndex}` || winningVariantIndex === -1 && isDefaultVariant;\n  if (isWinningVariant && !isDefaultVariant) {\n    parentDiv?.removeAttribute('hidden');\n    parentDiv?.removeAttribute('aria-hidden');\n  } else if (!isWinningVariant && isDefaultVariant) {\n    parentDiv?.setAttribute('hidden', 'true');\n    parentDiv?.setAttribute('aria-hidden', 'true');\n  }\n  if (isHydrationTarget) {\n    if (!isWinningVariant) {\n      const itsStyleEl = parentDiv?.previousElementSibling;\n      if (itsStyleEl) {\n        itsStyleEl.remove();\n      }\n      parentDiv?.remove();\n    }\n    const thisScript = document.currentScript;\n    if (thisScript) {\n      thisScript.remove();\n    }\n  }\n}";
+export const FILTER_WITH_CUSTOM_TARGETING_SCRIPT = "function filterWithCustomTargeting(userAttributes, query, startDate, endDate) {\n  function isString(val) {\n    return typeof val === 'string';\n  }\n  function isNumber(val) {\n    return typeof val === 'number';\n  }\n  function objectMatchesQuery(userattr, query) {\n    const result = (() => {\n      const property = query.property;\n      const operator = query.operator;\n      let testValue = query.value;\n      if (query && query.property === 'urlPath' && query.value && typeof query.value === 'string' && query.value !== '/' && query.value.endsWith('/')) {\n        testValue = query.value.slice(0, -1);\n      }\n      if (!(property && operator)) {\n        return true;\n      }\n      if (Array.isArray(testValue)) {\n        if (operator === 'isNot') {\n          return testValue.every(val => objectMatchesQuery(userattr, {\n            property,\n            operator,\n            value: val\n          }));\n        }\n        return !!testValue.find(val => objectMatchesQuery(userattr, {\n          property,\n          operator,\n          value: val\n        }));\n      }\n      const value = userattr[property];\n      if (Array.isArray(value)) {\n        return value.includes(testValue);\n      }\n      switch (operator) {\n        case 'is':\n          return value === testValue;\n        case 'isNot':\n          return value !== testValue;\n        case 'contains':\n          return (isString(value) || Array.isArray(value)) && value.includes(String(testValue));\n        case 'startsWith':\n          return isString(value) && value.startsWith(String(testValue));\n        case 'endsWith':\n          return isString(value) && value.endsWith(String(testValue));\n        case 'greaterThan':\n          return isNumber(value) && isNumber(testValue) && value > testValue;\n        case 'lessThan':\n          return isNumber(value) && isNumber(testValue) && value < testValue;\n        case 'greaterThanOrEqualTo':\n          return isNumber(value) && isNumber(testValue) && value >= testValue;\n        case 'lessThanOrEqualTo':\n          return isNumber(value) && isNumber(testValue) && value <= testValue;\n        default:\n          return false;\n      }\n    })();\n    return result;\n  }\n  const item = {\n    query,\n    startDate,\n    endDate\n  };\n  const now = userAttributes.date && new Date(userAttributes.date) || new Date();\n  if (item.startDate && new Date(item.startDate) > now) {\n    return false;\n  } else if (item.endDate && new Date(item.endDate) < now) {\n    return false;\n  }\n  if (!item.query || !item.query.length) {\n    return true;\n  }\n  return item.query.every(filter => {\n    return objectMatchesQuery(userAttributes, filter);\n  });\n}";
+export const UPDATE_VISIBILITY_STYLES_SCRIPT = "function updateVisibilityStylesScript(variants, blockId, isHydrationTarget, locale) {\n  function getCookie(name) {\n    const nameEQ = name + '=';\n    const ca = document.cookie.split(';');\n    for (let i = 0; i < ca.length; i++) {\n      let c = ca[i];\n      while (c.charAt(0) == ' ') c = c.substring(1, c.length);\n      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);\n    }\n    return null;\n  }\n  const visibilityStylesEl = document.currentScript?.previousElementSibling;\n  if (!visibilityStylesEl) {\n    return;\n  }\n  if (isHydrationTarget) {\n    visibilityStylesEl.remove();\n    const currentScript = document.currentScript;\n    if (currentScript) {\n      currentScript.remove();\n    }\n  } else {\n    const attributes = JSON.parse(getCookie('builder.userAttributes') || '{}');\n    if (locale) {\n      attributes.locale = locale;\n    }\n    const winningVariantIndex = variants?.findIndex(function (variant) {\n      return window.filterWithCustomTargeting(attributes, variant.query, variant.startDate, variant.endDate);\n    });\n    if (winningVariantIndex !== -1) {\n      let newStyleStr = variants?.map((_, index) => {\n        if (index === winningVariantIndex) return '';\n        return `div[data-variant-id=\"${blockId}-${index}\"] { display: none !important; } `;\n      }).join('') || '';\n      newStyleStr += `div[data-variant-id=\"${blockId}-default\"] { display: none !important; } `;\n      visibilityStylesEl.innerHTML = newStyleStr;\n    }\n  }\n}";

package/src/blocks/personalization-container/helpers.ts

@@ -2,8 +2,13 @@ import { TARGET } from '../../constants/target';
 import { isBrowser } from '../../functions/is-browser';
 import { isEditing } from '../../functions/is-editing';
 import type { BuilderBlock } from '../../types/builder-block';
-import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT } from './helpers/inlined-fns';
+import type { Target } from '../../types/targets';
+import { FILTER_WITH_CUSTOM_TARGETING_SCRIPT, PERSONALIZATION_SCRIPT, UPDATE_VISIBILITY_STYLES_SCRIPT } from './helpers/inlined-fns';
 import type { PersonalizationContainerProps } from './personalization-container.types';
+export const DEFAULT_INDEX = 'default';
+const FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME = 'filterWithCustomTargeting';
+const BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME = 'builderIoPersonalization';
+const UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME = 'updateVisibilityStylesScript';
 export type UserAttributes = {
   date?: string | Date;
   urlPath?: string;
@@ -16,12 +21,33 @@ export type Query = {
   operator: QueryOperator;
   value: QueryValue;
 };
+type BlocksToRenderReturnType = {
+  blocks: BuilderBlock[];
+  path: string;
+  index: number | typeof DEFAULT_INDEX;
+};
+
+/**
+ * SDKs that support Variant Containers
+ */
+export const SDKS_SUPPORTING_PERSONALIZATION = (['react', 'vue', 'svelte'] as Target[]);
+
+/**
+ * After hydration, we reset the tree
+ * These SDKs handle Personalization Container in a special way:
+ * - first, the inlined script will help us add `display: none`, `aria-hidden: true` and `hidden: true` to the non-winning variants
+ * - then, on mount / when the component is hydrated - we reset the tree with only the winning variant and deleting the entire tree
+ *
+ * This helps us to avoid flicker and show the correct / winning variant initially and then once we've hydrated we show the winning variant
+ * and keep a track of the cookies to update to the correct variant dynamically when the cookie updates.
+ */
+export const SDKS_REQUIRING_RESET_APPROACH = (['vue', 'svelte'] as Target[]);
 export function checkShouldRenderVariants(variants: PersonalizationContainerProps['variants'], canTrack: boolean) {
   const hasVariants = variants && variants.length > 0;
   if (TARGET === 'reactNative') return false;
   if (!hasVariants) return false;
   if (!canTrack) return false;
-  if (TARGET === 'vue' || TARGET === 'svelte') return true;
+  if (SDKS_REQUIRING_RESET_APPROACH.includes(TARGET)) return true;
   if (isBrowser()) return false;
   return true;
 }
@@ -37,22 +63,23 @@ export function getBlocksToRender({
   isHydrated: boolean;
   filteredVariants: PersonalizationContainerProps['variants'];
   fallbackBlocks?: BuilderBlock[];
-}): {
-  blocks: BuilderBlock[];
-  path: string | undefined;
-} {
-  const fallback = {
+}): BlocksToRenderReturnType {
+  const fallback: BlocksToRenderReturnType = {
     blocks: fallbackBlocks ?? [],
-    path: 'this.children'
+    path: 'this.children',
+    index: DEFAULT_INDEX
   };
   if (isHydrated && isEditing()) {
     // If editing a specific variant
     if (typeof previewingIndex === 'number' && previewingIndex < (variants?.length ?? 0)) {
-      const variant = variants![previewingIndex];
-      return {
-        blocks: variant.blocks,
-        path: `component.options.variants.${previewingIndex}.blocks`
-      };
+      const variant = variants?.[previewingIndex];
+      if (variant) {
+        return {
+          blocks: variant.blocks,
+          path: `variants.${previewingIndex}.blocks`,
+          index: previewingIndex
+        };
+      }
     }
     // Otherwise we're editing the default variant
     return fallback;
@@ -61,24 +88,33 @@ export function getBlocksToRender({
   // If we're on the browser, check if there's a winning variant
   if (isBrowser()) {
     const winningVariant = filteredVariants?.[0];
-    if (winningVariant) {
-      return {
-        blocks: winningVariant.blocks,
-        path: `component.options.variants.${variants?.indexOf(winningVariant)}.blocks`
-      };
+    if (winningVariant && variants) {
+      const variantIndex = variants.indexOf(winningVariant);
+      if (variantIndex !== -1) {
+        return {
+          blocks: winningVariant.blocks,
+          path: `variants.${variantIndex}.blocks`,
+          index: variantIndex
+        };
+      }
     }
   }
 
   // If no winning variant or we are on the server, return the default variant
   return fallback;
 }
-export const getPersonalizationScript = (variants: PersonalizationContainerProps['variants'], blockId: string, locale?: string) => {
+export const getInitPersonalizationVariantsFnsScriptString = () => {
   return `
-  (function() {
-    ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT}
-    ${PERSONALIZATION_SCRIPT}
-    getPersonalizedVariant(${JSON.stringify(variants)}, "${blockId}"${locale ? `, "${locale}"` : ''})
-  })();
+  window.${FILTER_WITH_CUSTOM_TARGETING_SCRIPT_FN_NAME} = ${FILTER_WITH_CUSTOM_TARGETING_SCRIPT}
+  window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME} = ${PERSONALIZATION_SCRIPT}
+  window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME} = ${UPDATE_VISIBILITY_STYLES_SCRIPT}
   `;
 };
+const isHydrationTarget = TARGET === 'react';
+export const getPersonalizationScript = (variants: PersonalizationContainerProps['variants'], blockId: string, locale?: string) => {
+  return `window.${BUILDER_IO_PERSONALIZATION_SCRIPT_FN_NAME}(${JSON.stringify(variants)}, "${blockId}", ${isHydrationTarget}${locale ? `, "${locale}"` : ''})`;
+};
+export const getUpdateVisibilityStylesScript = (variants: PersonalizationContainerProps['variants'], blockId: string, locale?: string) => {
+  return `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(${JSON.stringify(variants)}, "${blockId}", ${isHydrationTarget}${locale ? `, "${locale}"` : ''})`;
+};
 export { filterWithCustomTargeting } from './helpers/inlined-fns'

package/src/blocks/personalization-container/personalization-container.tsx

@@ -16,17 +16,24 @@ import { useState, useRef, useEffect } from "react";
 import Blocks from "../../components/blocks/blocks";
 import InlinedScript from "../../components/inlined-script";
 import InlinedStyles from "../../components/inlined-styles";
+import { TARGET } from "../../constants/target";
+import { getClassPropName } from "../../functions/get-class-prop-name";
 import { isEditing } from "../../functions/is-editing";
 import { isPreviewing } from "../../functions/is-previewing";
 import { getDefaultCanTrack } from "../../helpers/canTrack";
 import { userAttributesService } from "../../helpers/user-attributes";
+import { filterAttrs } from "../helpers";
 import {
   checkShouldRenderVariants,
+  DEFAULT_INDEX,
   filterWithCustomTargeting,
   getBlocksToRender,
   getPersonalizationScript,
+  getUpdateVisibilityStylesScript,
+  SDKS_REQUIRING_RESET_APPROACH,
 } from "./helpers";
 import type { PersonalizationContainerProps } from "./personalization-container.types";
+import { setAttrs } from "../helpers";
 
 function PersonalizationContainer(props: PersonalizationContainerProps) {
   const rootRef = useRef<HTMLDivElement>(null);
@@ -42,6 +49,15 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
     )
   );
 
+  const [updateVisibilityStylesScript, setUpdateVisibilityStylesScript] =
+    useState(() =>
+      getUpdateVisibilityStylesScript(
+        props.variants,
+        props.builderBlock?.id || "none",
+        props.builderContext?.rootState?.locale as string | undefined
+      )
+    );
+
   const [unsubscribers, setUnsubscribers] = useState(() => []);
 
   const [shouldRenderVariants, setShouldRenderVariants] = useState(() =>
@@ -51,7 +67,17 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
     )
   );
 
-  const [isHydrated, setIsHydrated] = useState(() => false);
+  const [shouldResetVariants, setShouldResetVariants] = useState(() => false);
+
+  function attrs() {
+    return {
+      ...props.attributes,
+      ...{},
+      [getClassPropName()]: `builder-personalization-container ${
+        props.attributes[getClassPropName()] || ""
+      }`,
+    };
+  }
 
   function filteredVariants() {
     return (props.variants || []).filter((variant) => {
@@ -75,7 +101,7 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
     return getBlocksToRender({
       variants: props.variants,
       fallbackBlocks: props.builderBlock?.children,
-      isHydrated: isHydrated,
+      isHydrated: shouldResetVariants,
       filteredVariants: filteredVariants(),
       previewingIndex: props.previewingIndex,
     });
@@ -85,13 +111,13 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
     return (props.variants || [])
       .map(
         (_, index) =>
-          `[data-variant-id="${props.builderBlock?.id}-${index}"] { display: none; } `
+          `div[data-variant-id="${props.builderBlock?.id}-${index}"] { display: none !important; } `
       )
       .join("");
   }
 
   useEffect(() => {
-    setIsHydrated(true);
+    setShouldResetVariants(true);
     const unsub = userAttributesService.subscribeOnUserAttributesChange(
       (attrs) => {
         setUserAttributes(attrs);
@@ -103,7 +129,7 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
         rootRef.current.dispatchEvent(
           new CustomEvent("builder.variantLoaded", {
             detail: {
-              variant: variant || "default",
+              variant: variant || DEFAULT_INDEX,
               content: props.builderContext?.content,
             },
             bubbles: true,
@@ -115,7 +141,7 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
               rootRef.current.dispatchEvent(
                 new CustomEvent("builder.variantDisplayed", {
                   detail: {
-                    variant: variant || "default",
+                    variant: variant || DEFAULT_INDEX,
                     content: props.builderContext?.content,
                   },
                   bubbles: true,
@@ -137,38 +163,85 @@ function PersonalizationContainer(props: PersonalizationContainerProps) {
   }, []);
 
   return (
-    <View ref={rootRef} {...props.attributes}>
-      {shouldRenderVariants ? (
+    <View ref={rootRef} {...attrs()}>
+      {shouldResetVariants && SDKS_REQUIRING_RESET_APPROACH.includes(TARGET) ? (
+        <Blocks
+          blocks={blocksToRender().blocks}
+          parent={props.builderBlock?.id}
+          path={blocksToRender().path}
+          context={props.builderContext}
+          registeredComponents={props.builderComponents}
+          BlocksWrapperProps={{
+            ...props.builderContext?.BlocksWrapperProps,
+            "data-variant-id": `${props.builderBlock?.id}-${
+              blocksToRender().index
+            }`,
+          }}
+        />
+      ) : null}
+      {(!shouldResetVariants &&
+        SDKS_REQUIRING_RESET_APPROACH.includes(TARGET)) ||
+      !SDKS_REQUIRING_RESET_APPROACH.includes(TARGET) ? (
         <>
-          {props.variants?.map((variant, index) => (
-            <View
-              key={index}
-              data-variant-id={`${props.builderBlock?.id}-${index}`}
-            >
-              <Blocks
-                blocks={variant.blocks}
-                parent={props.builderBlock?.id}
-                path={`component.options.variants.${index}.blocks`}
+          {shouldRenderVariants ? (
+            <>
+              <InlinedStyles
+                nonce={props.builderContext?.nonce || ""}
+                styles={hideVariantsStyleString()}
+                id={`variants-styles-${props.builderBlock?.id}`}
+              />
+              <InlinedScript
+                nonce={props.builderContext?.nonce || ""}
+                scriptStr={updateVisibilityStylesScript}
+                id={`variants-visibility-script-${props.builderBlock?.id}`}
+              />
+              {props.variants?.map((variant, index) => (
+                <Blocks
+                  key={`${props.builderBlock?.id}-${index}`}
+                  BlocksWrapperProps={{
+                    ...props.builderContext?.BlocksWrapperProps,
+                    "aria-hidden": true,
+                    hidden: true,
+                    "data-variant-id": `${props.builderBlock?.id}-${index}`,
+                  }}
+                  blocks={variant.blocks}
+                  parent={props.builderBlock?.id}
+                  path={`component.options.variants.${index}.blocks`}
+                  context={props.builderContext}
+                  registeredComponents={props.builderComponents}
+                >
+                  <InlinedScript
+                    nonce={props.builderContext?.nonce || ""}
+                    scriptStr={scriptStr}
+                    id={`variants-script-${props.builderBlock?.id}-${index}`}
+                  />
+                </Blocks>
+              ))}
+            </>
+          ) : null}
+          <Blocks
+            blocks={blocksToRender().blocks}
+            parent={props.builderBlock?.id}
+            path={blocksToRender().path}
+            context={props.builderContext}
+            registeredComponents={props.builderComponents}
+            BlocksWrapperProps={{
+              ...props.builderContext?.BlocksWrapperProps,
+              "data-variant-id": `${props.builderBlock?.id}-${
+                blocksToRender().index
+              }`,
+            }}
+          >
+            {shouldRenderVariants ? (
+              <InlinedScript
+                nonce={props.builderContext?.nonce || ""}
+                scriptStr={scriptStr}
+                id={`variants-script-${props.builderBlock?.id}-${DEFAULT_INDEX}`}
               />
-            </View>
-          ))}
-          <InlinedStyles
-            nonce={props.builderContext?.nonce || ""}
-            styles={hideVariantsStyleString()}
-            id={`variants-styles-${props.builderBlock?.id}`}
-          />
-          <InlinedScript
-            nonce={props.builderContext?.nonce || ""}
-            scriptStr={scriptStr}
-            id={`variants-script-${props.builderBlock?.id}`}
-          />
+            ) : null}
+          </Blocks>
         </>
       ) : null}
-      <Blocks
-        blocks={blocksToRender().blocks}
-        parent={props.builderBlock?.id}
-        path={blocksToRender().path}
-      />
     </View>
   );
 }

package/src/blocks/personalization-container/personalization-container.types.ts

@@ -1,5 +1,5 @@
 import type { BuilderBlock } from '../../types/builder-block';
-import type { BuilderDataProps } from '../../types/builder-props';
+import type { BuilderComponentsProp, BuilderDataProps } from '../../types/builder-props';
 import type { Query } from './helpers';
 export type PersonalizationContainerProps = {
   children?: any;
@@ -11,4 +11,4 @@ export type PersonalizationContainerProps = {
     startDate?: string;
     endDate?: string;
   }>;
-} & BuilderDataProps
+} & BuilderDataProps & BuilderComponentsProp

package/src/components/blocks/blocks-wrapper.tsx

@@ -24,7 +24,19 @@ export type BlocksWrapperProps = {
    */
   BlocksWrapper: any;
   /**
-   * Additonal props to pass to `blocksWrapper`. Defaults to `{}`.
+   * Props to be applied to the wrapping element of blocks. Can be set in two ways:
+   * 1. Globally via `<Content blocksWrapperProps={{...}}/>` - applies to all blocks wrappers in the Content
+   * 2. Locally via `<Blocks BlocksWrapperProps={{...}}/>` - applies only to this specific blocks instance and overrides global props
+   *
+   * For merging both global and local props, spread the context props before adding your own:
+   * ```
+   * <Blocks
+   *   BlocksWrapperProps={{
+   *     ...builderContext.BlocksWrapperProps,
+   *     'data-test-id': 'my-test-id'
+   *   }}
+   * />
+   * ```
    */
   BlocksWrapperProps: any;
   children?: any;