@optiaxiom/proteus 0.1.26 → 0.2.0

package/dist/esm/assets/src/proteus-chart/{ProteusChart.css.ts.vanilla-B-FJ2e1F.css → ProteusChart.css.ts.vanilla-BLxzbWut.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom._1fktkd1;
-@layer optiaxiom._1fktkd1 {
+@layer optiaxiom._155jno1;
+@layer optiaxiom._155jno1 {
   .ProteusChart__jmlqij1 {
     border-radius: 16px;
   }

package/dist/esm/assets/src/proteus-chart/{ProteusChartTooltipContent.css.ts.vanilla-B7GlVdiy.css → ProteusChartTooltipContent.css.ts.vanilla-BxCxymWg.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom._1fktkd1;
-@layer optiaxiom._1fktkd1 {
+@layer optiaxiom._155jno1;
+@layer optiaxiom._155jno1 {
   .ProteusChartTooltipContent__1gsvq810 {
     min-width: 128px;
   }

package/dist/esm/assets/src/proteus-document/{ProteusDocumentShell.css.ts.vanilla-GbLC1fdW.css → ProteusDocumentShell.css.ts.vanilla-BZNGG_wN.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom._1fktkd1;
-@layer optiaxiom._1fktkd1 {
+@layer optiaxiom._155jno1;
+@layer optiaxiom._155jno1 {
   .ProteusDocumentShell__vpuvfj1 {
     margin: -4px;
   }

package/dist/esm/assets/src/proteus-image-carousel/{ProteusImageCarousel.css.ts.vanilla-B21Y_xyv.css → ProteusImageCarousel.css.ts.vanilla-f4zcbZW_.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom._1fktkd1;
-@layer optiaxiom._1fktkd1 {
+@layer optiaxiom._155jno1;
+@layer optiaxiom._155jno1 {
   .ProteusImageCarousel__1t6qej70 {
     outline: none;
     user-select: none;

package/dist/esm/assets/src/proteus-question/{ProteusQuestion.css.ts.vanilla--FkursVc.css → ProteusQuestion.css.ts.vanilla-D7Zi6Bwi.css}

@@ -1,5 +1,5 @@
-@layer optiaxiom._1fktkd1;
-@layer optiaxiom._1fktkd1 {
+@layer optiaxiom._155jno1;
+@layer optiaxiom._155jno1 {
   .ProteusQuestion__8f590p0 {
     outline: none;
   }

package/dist/esm/proteus-chart/ProteusChart-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-B-FJ2e1F.css';
+import './../assets/src/proteus-chart/ProteusChart.css.ts.vanilla-BLxzbWut.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var chart = recipe({base:[{border:'1',borderColor:'border.tertiary',fontSize:'sm',p:'16'},'ProteusChart__jmlqij1','ProteusChart__jmlqij0']});

package/dist/esm/proteus-chart/ProteusChartTooltipContent-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-B7GlVdiy.css';
+import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-BxCxymWg.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var tooltip = recipe({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'grid',fontSize:'sm',gap:'6',px:'8',py:'10',rounded:'lg',shadow:'lg'},'ProteusChartTooltipContent__1gsvq810']});

package/dist/esm/proteus-document/ProteusDocumentShell-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-GbLC1fdW.css';
+import './../assets/src/proteus-document/ProteusDocumentShell.css.ts.vanilla-BZNGG_wN.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var body = recipe({base:[{flexDirection:'column',gap:'16'},'ProteusDocumentShell__vpuvfj0'],variants:{truncate:{false:{},true:[{maxH:'sm',overflow:'auto',p:'4'},'ProteusDocumentShell__vpuvfj1']}}});

package/dist/esm/proteus-document/ProteusDocumentShell.js

@@ -20,6 +20,7 @@ function ProteusDocumentShell({
   onInteraction,
   onMessage,
   onOpenChange,
+  onTrack,
   open: openProp,
   readOnly = false,
   strict,
@@ -95,6 +96,11 @@ function ProteusDocumentShell({
         }
         return;
       }),
+      onTrack: useEffectEvent(
+        (event, properties) => {
+          onTrack?.(event, properties);
+        }
+      ),
       readOnly,
       strict,
       useResource,

package/dist/esm/proteus-image-carousel/ProteusImageCarousel-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-B21Y_xyv.css';
+import './../assets/src/proteus-image-carousel/ProteusImageCarousel.css.ts.vanilla-f4zcbZW_.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var carousel = recipe({base:[{flexDirection:'column',gap:'12'},'ProteusImageCarousel__1t6qej70']});

package/dist/esm/proteus-question/ProteusQuestion-css.js

@@ -1,4 +1,4 @@
-import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla--FkursVc.css';
+import './../assets/src/proteus-question/ProteusQuestion.css.ts.vanilla-D7Zi6Bwi.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
 var addon = recipe({base:[{display:'grid',fontWeight:'500',placeItems:'center',rounded:'lg',size:'md',transition:'colors'},'ProteusQuestion__8f590p3'],variants:{cursor:{pointer:{cursor:'pointer'}}}});

package/dist/esm/proteus-question/ProteusQuestion.js

@@ -12,18 +12,28 @@ import { useProteusDocumentContext } from '../proteus-document/ProteusDocumentCo
 import { addon, choice, choiceGroup, question } from './ProteusQuestion-css.js';
 
 function ProteusQuestion({ questions }) {
-  const { onEvent } = useProteusDocumentContext(
+  const { onEvent, onTrack } = useProteusDocumentContext(
     "@optiaxiom/proteus/ProteusQuestion"
   );
   const [answers, setAnswers] = useState([]);
   const [currentIndex, setCurrentIndex] = useState(0);
   const value = answers[currentIndex];
   const valid = Array.isArray(value) && value.length > 0 && value.every(Boolean);
+  const goBack = useCallback(() => {
+    onTrack?.("Ask User Question Back", {
+      fromIndex: String(currentIndex),
+      toIndex: String(currentIndex - 1)
+    });
+    setCurrentIndex((i) => i - 1);
+  }, [currentIndex, onTrack]);
   const onDismiss = useCallback(() => {
+    onTrack?.("Ask User Question Dismissed", {
+      questionIndex: String(currentIndex)
+    });
     void onEvent({
       message: "[User declined to answer the question]"
     });
-  }, [onEvent]);
+  }, [currentIndex, onEvent, onTrack]);
   const questionRef = useRef(null);
   const lastIndexRef = useRef(currentIndex);
   useEffect(() => {
@@ -57,17 +67,30 @@ function ProteusQuestion({ questions }) {
   const isLast = currentIndex === questions.length - 1;
   const otherValue = value?.find((v) => !options.includes(v));
   const otherChecked = otherValue !== void 0;
-  const onComplete = () => onEvent({
-    message: answers.map(
-      (value2, index) => `Q: ${questions[index].question}
+  const onComplete = () => {
+    const answeredCount = answers.filter(
+      (answer) => Array.isArray(answer) && answer.length > 0
+    ).length;
+    onTrack?.("Ask User Question Submitted", {
+      answeredCount: String(answeredCount),
+      skippedCount: String(questions.length - answeredCount),
+      totalQuestions: String(questions.length)
+    });
+    return onEvent({
+      message: answers.map(
+        (value2, index) => `Q: ${questions[index].question}
 A: ${value2 || "[Not specified]"}`
-    ).join("\n\n")
-  });
+      ).join("\n\n")
+    });
+  };
   const onValueChange = (value2) => {
     answers[currentIndex] = value2;
     setAnswers([...answers]);
   };
   const onSkip = () => {
+    onTrack?.("Ask User Question Skipped", {
+      questionIndex: String(currentIndex)
+    });
     answers[currentIndex] = null;
     setAnswers([...answers]);
     if (isLast) {
@@ -77,6 +100,15 @@ A: ${value2 || "[Not specified]"}`
     }
   };
   const onSubmit = () => {
+    const currentValue = answers[currentIndex];
+    if (currentValue) {
+      const firstIndex = options.indexOf(currentValue[0]);
+      onTrack?.("Ask User Question Option Selected", {
+        isCustomText: String(currentValue.some((v) => !options.includes(v))),
+        optionIndex: String(firstIndex),
+        questionIndex: String(currentIndex)
+      });
+    }
     if (isLast) {
       void onComplete();
     } else {
@@ -98,7 +130,7 @@ A: ${value2 || "[Not specified]"}`
         if ((event.key === "ArrowLeft" || event.key === "ArrowRight") && !(event.target instanceof HTMLInputElement) && !event.target.isContentEditable) {
           event.preventDefault();
           if (event.key === "ArrowLeft" && currentIndex > 0) {
-            setCurrentIndex((i) => i - 1);
+            goBack();
           } else if (event.key === "ArrowRight" && !isLast) {
             setCurrentIndex((i) => i + 1);
           }
@@ -121,7 +153,7 @@ A: ${value2 || "[Not specified]"}`
                     icon: /* @__PURE__ */ jsx(IconAngleLeft, {}),
                     onClick: (event) => {
                       event.preventDefault();
-                      setCurrentIndex((i) => i - 1);
+                      goBack();
                     },
                     size: "sm"
                   }

package/dist/index.d.ts

@@ -252,6 +252,10 @@ type ProteusDocumentShellProps = Pick<ComponentPropsWithoutRef<typeof Disclosure
      * Callback when user sends a message action
      */
     onMessage?: (message: string) => Promise<void> | void;
+    /**
+     * Callback when an analytics event is fired
+     */
+    onTrack?: (event: string, properties: Record<string, string>) => void;
     /**
      * Whether form is readonly
      */
@@ -276,7 +280,7 @@ type ProteusDocument$2 = {
     title?: ReactNode;
     titleIcon?: string;
 };
-declare function ProteusDocumentShell({ collapsible: collapsibleProp, data, defaultOpen, element, onDataChange, onDownload, onInteraction, onMessage, onOpenChange, open: openProp, readOnly, strict, useResource, }: ProteusDocumentShellProps): react_jsx_runtime.JSX.Element;
+declare function ProteusDocumentShell({ collapsible: collapsibleProp, data, defaultOpen, element, onDataChange, onDownload, onInteraction, onMessage, onOpenChange, onTrack, open: openProp, readOnly, strict, useResource, }: ProteusDocumentShellProps): react_jsx_runtime.JSX.Element;
 declare namespace ProteusDocumentShell {
     var displayName: string;
 }

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/optimizely-axiom/optiaxiom.git"
   },
   "type": "module",
-  "version": "0.1.26",
+  "version": "0.2.0",
   "files": [
     "dist/**",
     "LICENSE"
@@ -38,8 +38,8 @@
     "embla-carousel-react": "^8.6.0",
     "jsonpointer": "^5.0.1",
     "recharts": "^3.8.1",
-    "@optiaxiom/icons": "1.1.1",
-    "@optiaxiom/react": "1.9.27"
+    "@optiaxiom/react": "1.9.28",
+    "@optiaxiom/icons": "1.1.1"
   },
   "devDependencies": {
     "@emotion/hash": "^0.9.2",