@ninetailed/experience.js-react 7.20.1 → 7.20.2

package/index.cjs.js

@@ -497,21 +497,28 @@ const DefaultExperienceLoadingComponent = _a => {
   const {
     logger
   } = useNinetailed();
-  const [hidden, setHidden] = React.useState(true);
+  const [isHidden, setIsHidden] = React.useState(true);
   React.useEffect(() => {
+    if (!isHidden) {
+      return;
+    }
     const timer = setTimeout(() => {
-      setHidden(false);
+      setIsHidden(false);
       logger.error(new Error(`The experience was still in loading state after ${unhideAfterMs}ms. That happens when no events are sent to the Ninetailed API. The baseline is now shown instead.`));
     }, unhideAfterMs);
     return () => {
       clearTimeout(timer);
     };
-  }, []);
-  if (hidden) {
+  }, [isHidden, logger, unhideAfterMs]);
+  if (isHidden) {
     return jsxRuntime.jsx("div", Object.assign({
       style: {
-        opacity: 0
-      }
+        visibility: 'hidden',
+        pointerEvents: 'none'
+      },
+      "aria-hidden": "true",
+      // Prevent focus and interaction within the hidden loading subtree.
+      inert: true
     }, {
       children: jsxRuntime.jsx(Component, Object.assign({}, passthroughProps, baseline, {
         ninetailed: {
@@ -521,7 +528,7 @@ const DefaultExperienceLoadingComponent = _a => {
           }
         }
       }))
-    }), "hide");
+    }), "experience-loader-hidden-baseline");
   }
   return jsxRuntime.jsx(Component, Object.assign({}, passthroughProps, baseline, {
     ninetailed: {
@@ -532,6 +539,7 @@ const DefaultExperienceLoadingComponent = _a => {
     }
   }));
 };
+
 const Experience = _a => {
   var {
       experiences,

package/index.esm.js

@@ -495,21 +495,28 @@ const DefaultExperienceLoadingComponent = _a => {
   const {
     logger
   } = useNinetailed();
-  const [hidden, setHidden] = useState(true);
+  const [isHidden, setIsHidden] = useState(true);
   useEffect(() => {
+    if (!isHidden) {
+      return;
+    }
     const timer = setTimeout(() => {
-      setHidden(false);
+      setIsHidden(false);
       logger.error(new Error(`The experience was still in loading state after ${unhideAfterMs}ms. That happens when no events are sent to the Ninetailed API. The baseline is now shown instead.`));
     }, unhideAfterMs);
     return () => {
       clearTimeout(timer);
     };
-  }, []);
-  if (hidden) {
+  }, [isHidden, logger, unhideAfterMs]);
+  if (isHidden) {
     return jsx("div", Object.assign({
       style: {
-        opacity: 0
-      }
+        visibility: 'hidden',
+        pointerEvents: 'none'
+      },
+      "aria-hidden": "true",
+      // Prevent focus and interaction within the hidden loading subtree.
+      inert: true
     }, {
       children: jsx(Component, Object.assign({}, passthroughProps, baseline, {
         ninetailed: {
@@ -519,7 +526,7 @@ const DefaultExperienceLoadingComponent = _a => {
           }
         }
       }))
-    }), "hide");
+    }), "experience-loader-hidden-baseline");
   }
   return jsx(Component, Object.assign({}, passthroughProps, baseline, {
     ninetailed: {
@@ -530,6 +537,7 @@ const DefaultExperienceLoadingComponent = _a => {
     }
   }));
 };
+
 const Experience = _a => {
   var {
       experiences,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ninetailed/experience.js-react",
-  "version": "7.20.1",
+  "version": "7.20.2",
   "description": "Ninetailed SDK for React",
   "license": "MIT",
   "repository": {
@@ -28,9 +28,9 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@ninetailed/experience.js": "7.20.1",
-    "@ninetailed/experience.js-shared": "7.20.1",
-    "@ninetailed/experience.js-plugin-analytics": "7.20.1",
+    "@ninetailed/experience.js": "7.20.2",
+    "@ninetailed/experience.js-shared": "7.20.2",
+    "@ninetailed/experience.js-plugin-analytics": "7.20.2",
     "radash": "10.9.0",
     "react-is": "19.2.4"
   },

package/src/lib/Experience/DefaultExperienceLoadingComponent.d.ts

@@ -0,0 +1,7 @@
+import type { Reference } from '@ninetailed/experience.js';
+import type { ExperienceBaseProps } from './types/Experience';
+type DefaultExperienceLoadingComponentProps = ExperienceBaseProps<Record<string, unknown>, Record<string, unknown>, Record<string, unknown> & Reference> & {
+    unhideAfterMs?: number;
+};
+export declare const DefaultExperienceLoadingComponent: ({ component: Component, unhideAfterMs, passthroughProps, ...baseline }: DefaultExperienceLoadingComponentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/Experience/Experience.d.ts

@@ -1,27 +1,5 @@
-import React from 'react';
-import { Baseline, ExperienceConfiguration, Reference } from '@ninetailed/experience.js';
-export type ExperienceComponent<P> = React.ComponentType<Omit<P, 'id'> & {
-    ninetailed?: {
-        isPersonalized: boolean;
-        audience: {
-            id: string;
-        };
-    };
-}>;
-export type ExperienceBaseProps<P, PassThroughProps extends Partial<P>, Variant extends Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference> = Baseline<Pick<P, Exclude<keyof P, keyof PassThroughProps>>> & {
-    experiences: ExperienceConfiguration<Variant>[];
-    component: React.ComponentType<P>;
-    passthroughProps?: PassThroughProps;
-};
-export type ExperienceLoadingComponent<P, PassThroughProps extends Partial<P>, Variant extends Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference> = React.ComponentType<ExperienceBaseProps<P, PassThroughProps, Variant>>;
-export type ExperienceProps<P, PassThroughProps extends Partial<P> = Partial<P>, Variant extends Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference = Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference> = ExperienceBaseProps<P, PassThroughProps, Variant> & {
-    experiences: ExperienceConfiguration<Variant>[];
-    component: React.ComponentType<P>;
-    loadingComponent?: ExperienceLoadingComponent<P, PassThroughProps, Variant>;
-};
-type DefaultExperienceLoadingComponentProps = ExperienceBaseProps<Record<string, unknown>, Record<string, unknown>, Record<string, unknown> & Reference> & {
-    unhideAfterMs?: number;
-};
-export declare const DefaultExperienceLoadingComponent: React.FC<DefaultExperienceLoadingComponentProps>;
+import type { Reference } from '@ninetailed/experience.js';
+import type { ExperienceProps } from './types/Experience';
 export declare const Experience: <P, PassThroughProps extends Partial<P> = Partial<P>, Variant extends Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference = Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference>({ experiences, component: Component, loadingComponent: LoadingComponent, passthroughProps, ...baseline }: ExperienceProps<P, PassThroughProps, Variant>) => import("react/jsx-runtime").JSX.Element;
-export {};
+export type { ExperienceProps, ExperienceBaseProps, ExperienceComponent, ExperienceLoadingComponent, } from './types/Experience';
+export { DefaultExperienceLoadingComponent } from './DefaultExperienceLoadingComponent';

package/src/lib/Experience/index.d.ts

@@ -1,4 +1,4 @@
 export { Experience, DefaultExperienceLoadingComponent } from './Experience';
-export type { ExperienceProps, ExperienceBaseProps, ExperienceComponent, ExperienceLoadingComponent, } from './Experience';
+export type { ExperienceProps, ExperienceBaseProps, ExperienceComponent, ExperienceLoadingComponent, } from './types/Experience';
 export { ESRProvider, ESRLoadingComponent } from './ESRLoadingComponent';
 export { useExperience } from './useExperience';

package/src/lib/Experience/types/Experience.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentType } from 'react';
+import type { Baseline, ExperienceConfiguration, Reference } from '@ninetailed/experience.js';
+export type ExperienceComponent<P> = ComponentType<Omit<P, 'id'> & {
+    ninetailed?: {
+        isPersonalized: boolean;
+        audience: {
+            id: string;
+        };
+    };
+}>;
+export type ExperienceBaseProps<P, PassThroughProps extends Partial<P>, Variant extends Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference> = Baseline<Pick<P, Exclude<keyof P, keyof PassThroughProps>>> & {
+    experiences: ExperienceConfiguration<Variant>[];
+    component: ComponentType<P>;
+    passthroughProps?: PassThroughProps;
+};
+export type ExperienceLoadingComponent<P, PassThroughProps extends Partial<P>, Variant extends Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference> = ComponentType<ExperienceBaseProps<P, PassThroughProps, Variant>>;
+export type ExperienceProps<P, PassThroughProps extends Partial<P> = Partial<P>, Variant extends Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference = Pick<P, Exclude<keyof P, keyof PassThroughProps>> & Reference> = ExperienceBaseProps<P, PassThroughProps, Variant> & {
+    experiences: ExperienceConfiguration<Variant>[];
+    component: ComponentType<P>;
+    loadingComponent?: ExperienceLoadingComponent<P, PassThroughProps, Variant>;
+};

package/src/lib/Experience/types/index.d.ts

@@ -1,3 +1,4 @@
 export type { Baseline } from './Baseline';
 export type { Variant } from './Variant';
 export type { BaselineWithVariants } from './BaselineWithVariants';
+export type { ExperienceProps, ExperienceBaseProps, ExperienceComponent, ExperienceLoadingComponent, } from './Experience';