@cuemath/leap 3.4.3-mbx2 → 3.4.4-m

package/dist/features/stickers/sticker-selector/hooks/use-stickers-journey/use-stickers-journey.js

@@ -1,19 +1,20 @@
-import { jsxs as l, jsx as e, Fragment as u } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { useCallback as m, useMemo as h } from "react";
 import { JOURNEY_ID_TEACHER as t } from "../../../../journey/journey-id/journey-id-teacher.js";
 import { IndicatorType as C } from "../../../../journey/use-journey/constants.js";
 import { useJourney as T } from "../../../../journey/use-journey/use-journey.js";
 import y from "../../../../ui/buttons/button/button.js";
-import d from "../../../../ui/layout/flex-view.js";
+import O from "../../../../ui/layout/flex-view.js";
 import S from "../../../../ui/separator/separator.js";
-import O from "../../../../ui/text/text.js";
+import u from "../../../../ui/text/text.js";
 const x = ({
   triggerRef: o,
+  triggerElement: n,
   tooltipConfig: r
 }) => {
-  const { setJourney: n, nextCoachmark: i, endJourney: a } = T(), s = m(() => {
-    a(t.STICKERS_INTRO_JOURNEY);
-  }, [a]), c = m(() => {
+  const { setJourney: a, nextCoachmark: s, endJourney: i } = T(), d = m(() => {
+    i(t.STICKERS_INTRO_JOURNEY);
+  }, [i]), c = m(() => {
     if (!o.current) return;
     const p = {
       position: r.position,
@@ -24,9 +25,9 @@ const x = ({
       borderColor: "BLACK",
       arrowColor: "BLACK",
       backgroundColor: "PURPLE_4",
-      tooltipItem: /* @__PURE__ */ l(d, { children: [
-        /* @__PURE__ */ e(d, { children: /* @__PURE__ */ l(
-          O,
+      tooltipItem: /* @__PURE__ */ l(O, { children: [
+        /* @__PURE__ */ e(O, { children: /* @__PURE__ */ l(
+          u,
           {
             $renderOnMobileAs: "ab3",
             $renderAs: "ab3",
@@ -34,7 +35,7 @@ const x = ({
             $inline: !0,
             $whiteSpace: "normal",
             children: [
-              /* @__PURE__ */ e(O, { $renderAs: "ab3-bold", as: "span", $inline: !0, children: "New Stickers" }),
+              /* @__PURE__ */ e(u, { $renderAs: "ab3-bold", as: "span", $inline: !0, children: "New Stickers" }),
               " ",
               "- Use them to celebrate little moments of joy!"
             ]
@@ -48,20 +49,36 @@ const x = ({
             label: "Got It",
             size: "xsmall",
             width: "50%",
-            onClick: s
+            onClick: d
           }
         )
       ] })
     };
-    n(t.STICKERS_INTRO_JOURNEY, [
-      {
-        originalElementToHighlightRef: o,
-        type: C.TOOLTIP,
-        elementToHighlight: /* @__PURE__ */ e(u, {}),
-        indicator: p
-      }
-    ]), i(t.STICKERS_INTRO_JOURNEY);
-  }, [o, n, s, i, r]);
+    a(
+      t.STICKERS_INTRO_JOURNEY,
+      [
+        {
+          originalElementToHighlightRef: o,
+          type: C.TOOLTIP,
+          elementToHighlight: n,
+          indicator: p
+        }
+      ],
+      void 0,
+      !1
+    ), s(t.STICKERS_INTRO_JOURNEY);
+  }, [
+    o,
+    n,
+    r.position,
+    r.tooltipXCoOrdinates,
+    r.tooltipYCoOrdinates,
+    r.arrowXCoOrdinates,
+    r.arrowYCoOrdinates,
+    d,
+    a,
+    s
+  ]);
   return h(
     () => ({
       startTeacherStickersJourney: c

package/dist/features/stickers/sticker-selector/hooks/use-stickers-journey/use-stickers-journey.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-stickers-journey.js","sources":["../../../../../../src/features/stickers/sticker-selector/hooks/use-stickers-journey/use-stickers-journey.tsx"],"sourcesContent":["import type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport type { IUseTeacherStickersJourneyProps } from './use-stickers-journey-types';\n\nimport { useCallback, useMemo } from 'react';\n\nimport { JOURNEY_ID_TEACHER } from '../../../../journey/journey-id/journey-id-teacher';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport Button from '../../../../ui/buttons/button/button';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\n\nexport const useStickersJourney = ({\n  triggerRef,\n  tooltipConfig,\n}: IUseTeacherStickersJourneyProps) => {\n  const { setJourney, nextCoachmark, endJourney } = useJourney();\n\n  const endTeacherStickersOnboarding = useCallback(() => {\n    endJourney(JOURNEY_ID_TEACHER.STICKERS_INTRO_JOURNEY);\n  }, [endJourney]);\n\n  const startTeacherStickersJourney = useCallback(() => {\n    if (!triggerRef.current) return;\n\n    const indicatorPayload = {\n      position: tooltipConfig.position,\n      tooltipXCoOrdinates: tooltipConfig.tooltipXCoOrdinates,\n      tooltipYCoOrdinates: tooltipConfig.tooltipYCoOrdinates,\n      arrowXCoOrdinates: tooltipConfig.arrowXCoOrdinates,\n      arrowYCoOrdinates: tooltipConfig.arrowYCoOrdinates,\n      borderColor: 'BLACK',\n      arrowColor: 'BLACK',\n      backgroundColor: 'PURPLE_4',\n      tooltipItem: (\n        <FlexView>\n          <FlexView>\n            <Text\n              $renderOnMobileAs=\"ab3\"\n              $renderAs=\"ab3\"\n              as=\"span\"\n              $inline={true}\n              $whiteSpace=\"normal\"\n            >\n              <Text $renderAs=\"ab3-bold\" as=\"span\" $inline={true}>\n                New Stickers\n              </Text>{' '}\n              - Use them to celebrate little moments of joy!\n            </Text>\n          </FlexView>\n          <Separator height={10} />\n          <Button\n            renderAs=\"secondary\"\n            label=\"Got It\"\n            size=\"xsmall\"\n            width=\"50%\"\n            onClick={endTeacherStickersOnboarding}\n          />\n        </FlexView>\n      ),\n    } as IArrowTooltipProps;\n\n    setJourney(JOURNEY_ID_TEACHER.STICKERS_INTRO_JOURNEY, [\n      {\n        originalElementToHighlightRef: triggerRef,\n        type: IndicatorType.TOOLTIP,\n        elementToHighlight: <></>,\n        indicator: indicatorPayload,\n      },\n    ]);\n\n    nextCoachmark(JOURNEY_ID_TEACHER.STICKERS_INTRO_JOURNEY);\n  }, [triggerRef, setJourney, endTeacherStickersOnboarding, nextCoachmark, tooltipConfig]);\n\n  const stickerJourney = useMemo(\n    () => ({\n      startTeacherStickersJourney,\n    }),\n    [startTeacherStickersJourney],\n  );\n\n  return stickerJourney;\n};\n"],"names":["useStickersJourney","triggerRef","tooltipConfig","setJourney","nextCoachmark","endJourney","useJourney","endTeacherStickersOnboarding","useCallback","JOURNEY_ID_TEACHER","startTeacherStickersJourney","indicatorPayload","FlexView","jsx","jsxs","Text","Separator","Button","IndicatorType","Fragment","useMemo"],"mappings":";;;;;;;;;AAaO,MAAMA,IAAqB,CAAC;AAAA,EACjC,YAAAC;AAAA,EACA,eAAAC;AACF,MAAuC;AACrC,QAAM,EAAE,YAAAC,GAAY,eAAAC,GAAe,YAAAC,MAAeC,EAAW,GAEvDC,IAA+BC,EAAY,MAAM;AACrD,IAAAH,EAAWI,EAAmB,sBAAsB;AAAA,EAAA,GACnD,CAACJ,CAAU,CAAC,GAETK,IAA8BF,EAAY,MAAM;AAChD,QAAA,CAACP,EAAW,QAAS;AAEzB,UAAMU,IAAmB;AAAA,MACvB,UAAUT,EAAc;AAAA,MACxB,qBAAqBA,EAAc;AAAA,MACnC,qBAAqBA,EAAc;AAAA,MACnC,mBAAmBA,EAAc;AAAA,MACjC,mBAAmBA,EAAc;AAAA,MACjC,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,+BACGU,GACC,EAAA,UAAA;AAAA,QAAA,gBAAAC,EAACD,GACC,EAAA,UAAA,gBAAAE;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,mBAAkB;AAAA,YAClB,WAAU;AAAA,YACV,IAAG;AAAA,YACH,SAAS;AAAA,YACT,aAAY;AAAA,YAEZ,UAAA;AAAA,cAAA,gBAAAF,EAACE,KAAK,WAAU,YAAW,IAAG,QAAO,SAAS,IAAM,UAEpD,eAAA,CAAA;AAAA,cAAQ;AAAA,cAAI;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAGhB;AAAA,QACA,gBAAAF,EAACG,GAAU,EAAA,QAAQ,GAAI,CAAA;AAAA,QACvB,gBAAAH;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,UAAS;AAAA,YACT,OAAM;AAAA,YACN,MAAK;AAAA,YACL,OAAM;AAAA,YACN,SAASV;AAAA,UAAA;AAAA,QACX;AAAA,MAAA,GACF;AAAA,IAAA;AAIJ,IAAAJ,EAAWM,EAAmB,wBAAwB;AAAA,MACpD;AAAA,QACE,+BAA+BR;AAAA,QAC/B,MAAMiB,EAAc;AAAA,QACpB,oBAAsB,gBAAAL,EAAAM,GAAA,EAAA;AAAA,QACtB,WAAWR;AAAA,MACb;AAAA,IAAA,CACD,GAEDP,EAAcK,EAAmB,sBAAsB;AAAA,EAAA,GACtD,CAACR,GAAYE,GAAYI,GAA8BH,GAAeF,CAAa,CAAC;AAShF,SAPgBkB;AAAA,IACrB,OAAO;AAAA,MACL,6BAAAV;AAAA,IAAA;AAAA,IAEF,CAACA,CAA2B;AAAA,EAAA;AAIhC;"}
+{"version":3,"file":"use-stickers-journey.js","sources":["../../../../../../src/features/stickers/sticker-selector/hooks/use-stickers-journey/use-stickers-journey.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { JOURNEY_ID_TEACHER } from '../../../../journey/journey-id/journey-id-teacher';\nimport { IndicatorType } from '../../../../journey/use-journey/constants';\nimport { useJourney } from '../../../../journey/use-journey/use-journey';\nimport type { IArrowTooltipProps } from '../../../../ui/arrow-tooltip/arrow-tooltip-types';\nimport Button from '../../../../ui/buttons/button/button';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport type { IUseTeacherStickersJourneyProps } from './use-stickers-journey-types';\n\nexport const useStickersJourney = ({\n  triggerRef,\n  triggerElement,\n  tooltipConfig,\n}: IUseTeacherStickersJourneyProps) => {\n  const { setJourney, nextCoachmark, endJourney } = useJourney();\n\n  const endTeacherStickersOnboarding = useCallback(() => {\n    endJourney(JOURNEY_ID_TEACHER.STICKERS_INTRO_JOURNEY);\n  }, [endJourney]);\n\n  const startTeacherStickersJourney = useCallback(() => {\n    if (!triggerRef.current) return;\n\n    const indicatorPayload = {\n      position: tooltipConfig.position,\n      tooltipXCoOrdinates: tooltipConfig.tooltipXCoOrdinates,\n      tooltipYCoOrdinates: tooltipConfig.tooltipYCoOrdinates,\n      arrowXCoOrdinates: tooltipConfig.arrowXCoOrdinates,\n      arrowYCoOrdinates: tooltipConfig.arrowYCoOrdinates,\n      borderColor: 'BLACK',\n      arrowColor: 'BLACK',\n      backgroundColor: 'PURPLE_4',\n      tooltipItem: (\n        <FlexView>\n          <FlexView>\n            <Text\n              $renderOnMobileAs=\"ab3\"\n              $renderAs=\"ab3\"\n              as=\"span\"\n              $inline={true}\n              $whiteSpace=\"normal\"\n            >\n              <Text $renderAs=\"ab3-bold\" as=\"span\" $inline={true}>\n                New Stickers\n              </Text>{' '}\n              - Use them to celebrate little moments of joy!\n            </Text>\n          </FlexView>\n          <Separator height={10} />\n          <Button\n            renderAs=\"secondary\"\n            label=\"Got It\"\n            size=\"xsmall\"\n            width=\"50%\"\n            onClick={endTeacherStickersOnboarding}\n          />\n        </FlexView>\n      ),\n    } as IArrowTooltipProps;\n\n    setJourney(\n      JOURNEY_ID_TEACHER.STICKERS_INTRO_JOURNEY,\n      [\n        {\n          originalElementToHighlightRef: triggerRef,\n          type: IndicatorType.TOOLTIP,\n          elementToHighlight: triggerElement,\n          indicator: indicatorPayload,\n        },\n      ],\n      undefined,\n      false,\n    );\n\n    nextCoachmark(JOURNEY_ID_TEACHER.STICKERS_INTRO_JOURNEY);\n  }, [\n    triggerRef,\n    triggerElement,\n    tooltipConfig.position,\n    tooltipConfig.tooltipXCoOrdinates,\n    tooltipConfig.tooltipYCoOrdinates,\n    tooltipConfig.arrowXCoOrdinates,\n    tooltipConfig.arrowYCoOrdinates,\n    endTeacherStickersOnboarding,\n    setJourney,\n    nextCoachmark,\n  ]);\n\n  const stickerJourney = useMemo(\n    () => ({\n      startTeacherStickersJourney,\n    }),\n    [startTeacherStickersJourney],\n  );\n\n  return stickerJourney;\n};\n"],"names":["useStickersJourney","triggerRef","triggerElement","tooltipConfig","setJourney","nextCoachmark","endJourney","useJourney","endTeacherStickersOnboarding","useCallback","JOURNEY_ID_TEACHER","startTeacherStickersJourney","indicatorPayload","FlexView","jsx","jsxs","Text","Separator","Button","IndicatorType","useMemo"],"mappings":";;;;;;;;;AAYO,MAAMA,IAAqB,CAAC;AAAA,EACjC,YAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,eAAAC;AACF,MAAuC;AACrC,QAAM,EAAE,YAAAC,GAAY,eAAAC,GAAe,YAAAC,MAAeC,EAAW,GAEvDC,IAA+BC,EAAY,MAAM;AACrD,IAAAH,EAAWI,EAAmB,sBAAsB;AAAA,EAAA,GACnD,CAACJ,CAAU,CAAC,GAETK,IAA8BF,EAAY,MAAM;AAChD,QAAA,CAACR,EAAW,QAAS;AAEzB,UAAMW,IAAmB;AAAA,MACvB,UAAUT,EAAc;AAAA,MACxB,qBAAqBA,EAAc;AAAA,MACnC,qBAAqBA,EAAc;AAAA,MACnC,mBAAmBA,EAAc;AAAA,MACjC,mBAAmBA,EAAc;AAAA,MACjC,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,+BACGU,GACC,EAAA,UAAA;AAAA,QAAA,gBAAAC,EAACD,GACC,EAAA,UAAA,gBAAAE;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,mBAAkB;AAAA,YAClB,WAAU;AAAA,YACV,IAAG;AAAA,YACH,SAAS;AAAA,YACT,aAAY;AAAA,YAEZ,UAAA;AAAA,cAAA,gBAAAF,EAACE,KAAK,WAAU,YAAW,IAAG,QAAO,SAAS,IAAM,UAEpD,eAAA,CAAA;AAAA,cAAQ;AAAA,cAAI;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAGhB;AAAA,QACA,gBAAAF,EAACG,GAAU,EAAA,QAAQ,GAAI,CAAA;AAAA,QACvB,gBAAAH;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,UAAS;AAAA,YACT,OAAM;AAAA,YACN,MAAK;AAAA,YACL,OAAM;AAAA,YACN,SAASV;AAAA,UAAA;AAAA,QACX;AAAA,MAAA,GACF;AAAA,IAAA;AAIJ,IAAAJ;AAAA,MACEM,EAAmB;AAAA,MACnB;AAAA,QACE;AAAA,UACE,+BAA+BT;AAAA,UAC/B,MAAMkB,EAAc;AAAA,UACpB,oBAAoBjB;AAAA,UACpB,WAAWU;AAAA,QACb;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,IAAA,GAGFP,EAAcK,EAAmB,sBAAsB;AAAA,EAAA,GACtD;AAAA,IACDT;AAAA,IACAC;AAAA,IACAC,EAAc;AAAA,IACdA,EAAc;AAAA,IACdA,EAAc;AAAA,IACdA,EAAc;AAAA,IACdA,EAAc;AAAA,IACdK;AAAA,IACAJ;AAAA,IACAC;AAAA,EAAA,CACD;AASM,SAPgBe;AAAA,IACrB,OAAO;AAAA,MACL,6BAAAT;AAAA,IAAA;AAAA,IAEF,CAACA,CAA2B;AAAA,EAAA;AAIhC;"}

package/dist/features/stickers/sticker-selector/sticker-selector.js

@@ -2,8 +2,8 @@ import { jsx as t } from "react/jsx-runtime";
 import { memo as B, useState as G, useCallback as H, useMemo as c } from "react";
 import K from "../../ui/arrow-tooltip/arrow-tooltip.js";
 import R from "./comps/stiker-selector-grid/sticker-selector-grid.js";
-import { TriggerWrapper as _ } from "./sticker-selector-styled.js";
-import { useHandleStickerSend as $ } from "./hooks/use-handle-sticker-send.js";
+import { useHandleStickerSend as _ } from "./hooks/use-handle-sticker-send.js";
+import { TriggerWrapper as $ } from "./sticker-selector-styled.js";
 const q = ({
   triggerNode: e,
   studentClassroomId: m,
@@ -30,7 +30,7 @@ const q = ({
     zIndex: M,
     parentWidth: X,
     isBlocking: D = !1
-  } = f, [o, n] = G(!1), r = $(m), l = H(
+  } = f, [o, n] = G(!1), r = _(m), l = H(
     (W) => {
       if (o) return;
       const d = ["burst-from-edges", "pop-expand", "float-up", "fall-down"], Y = d[Math.floor(Math.random() * d.length)];
@@ -53,7 +53,7 @@ const q = ({
       }
     ),
     [i, s, a, l, o]
-  ), V = c(() => /* @__PURE__ */ t(_, { $disabled: o, children: e }), [o, e]);
+  ), V = c(() => /* @__PURE__ */ t($, { $disabled: o, children: e }), [o, e]);
   return /* @__PURE__ */ t(
     K,
     {

package/dist/features/stickers/sticker-selector/sticker-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"sticker-selector.js","sources":["../../../../src/features/stickers/sticker-selector/sticker-selector.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { memo, useMemo, useState, useCallback } from 'react';\n\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport type { IStickerData, TStickerAnimationEffects } from '../stickers-types';\nimport StickerSelectorGrid from './comps/stiker-selector-grid/sticker-selector-grid';\nimport * as Styled from './sticker-selector-styled';\nimport type { IStickerSelectorProps } from './sticker-selector-types';\nimport { useHandleStickerSend } from './hooks/use-handle-sticker-send';\n\nconst StickerSelector: FC<IStickerSelectorProps> = ({\n  triggerNode,\n  studentClassroomId,\n  gridConfig,\n  tooltipConfig,\n  visible,\n}) => {\n  const { columns = 4, gap = 8, stickerSize = 48 } = gridConfig;\n  const {\n    isAnimated,\n    arrowColor,\n    arrowSize,\n    arrowXCoOrdinates,\n    arrowYCoOrdinates,\n    backgroundColor,\n    borderColor,\n    position = 'bottom',\n    renderAs = 'primary',\n    textVariant,\n    tooltipOffset,\n    tooltipXCoOrdinates,\n    tooltipYCoOrdinates,\n    width,\n    widthX,\n    zIndex,\n    parentWidth,\n    isBlocking = false,\n  } = tooltipConfig;\n\n  const [isTemporarilyDisabled, setIsTemporarilyDisabled] = useState(false);\n\n  const sendSticker = useHandleStickerSend(studentClassroomId);\n\n  const handleStickerSend = useCallback(\n    (sticker: IStickerData) => {\n      if (isTemporarilyDisabled) return;\n\n      const STICKER_EFFECTS = ['burst-from-edges', 'pop-expand', 'float-up', 'fall-down'] as const;\n\n      const randomEffect: TStickerAnimationEffects =\n        STICKER_EFFECTS[Math.floor(Math.random() * STICKER_EFFECTS.length)]!;\n\n      sendSticker?.(sticker, randomEffect);\n      setIsTemporarilyDisabled(true);\n\n      const timeout = setTimeout(() => {\n        setIsTemporarilyDisabled(false);\n      }, 5000);\n\n      return () => clearTimeout(timeout);\n    },\n    [sendSticker, isTemporarilyDisabled],\n  );\n\n  const tooltipItem = useMemo(\n    () => (\n      <StickerSelectorGrid\n        columns={columns}\n        gap={gap}\n        stickerSize={stickerSize}\n        onStickerClick={handleStickerSend}\n        disabled={isTemporarilyDisabled}\n      />\n    ),\n    [columns, gap, stickerSize, handleStickerSend, isTemporarilyDisabled],\n  );\n\n  const triggerEle = useMemo(() => {\n    return (\n      <Styled.TriggerWrapper $disabled={isTemporarilyDisabled}>{triggerNode}</Styled.TriggerWrapper>\n    );\n  }, [isTemporarilyDisabled, triggerNode]);\n\n  return (\n    <ArrowTooltip\n      children={triggerEle}\n      alwaysVisible\n      hidden={!visible}\n      tooltipItem={tooltipItem}\n      renderAs={renderAs}\n      position={position}\n      isBlocking={isBlocking}\n      isAnimated={isAnimated}\n      zIndex={zIndex}\n      width={width}\n      widthX={widthX}\n      parentWidth={parentWidth}\n      backgroundColor={backgroundColor}\n      borderColor={borderColor}\n      textVariant={textVariant}\n      tooltipOffset={tooltipOffset}\n      arrowColor={arrowColor}\n      arrowSize={arrowSize}\n      arrowXCoOrdinates={arrowXCoOrdinates}\n      arrowYCoOrdinates={arrowYCoOrdinates}\n      tooltipXCoOrdinates={tooltipXCoOrdinates}\n      tooltipYCoOrdinates={tooltipYCoOrdinates}\n    />\n  );\n};\n\nexport default memo(StickerSelector);\n"],"names":["StickerSelector","triggerNode","studentClassroomId","gridConfig","tooltipConfig","visible","columns","gap","stickerSize","isAnimated","arrowColor","arrowSize","arrowXCoOrdinates","arrowYCoOrdinates","backgroundColor","borderColor","position","renderAs","textVariant","tooltipOffset","tooltipXCoOrdinates","tooltipYCoOrdinates","width","widthX","zIndex","parentWidth","isBlocking","isTemporarilyDisabled","setIsTemporarilyDisabled","useState","sendSticker","useHandleStickerSend","handleStickerSend","useCallback","sticker","STICKER_EFFECTS","randomEffect","timeout","tooltipItem","useMemo","jsx","StickerSelectorGrid","triggerEle","Styled.TriggerWrapper","ArrowTooltip","stickerSelector","memo"],"mappings":";;;;;;AAUA,MAAMA,IAA6C,CAAC;AAAA,EAClD,aAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,SAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,IAAU,GAAG,KAAAC,IAAM,GAAG,aAAAC,IAAc,GAAO,IAAAL,GAC7C;AAAA,IACJ,YAAAM;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,EACX,IAAAtB,GAEE,CAACuB,GAAuBC,CAAwB,IAAIC,EAAS,EAAK,GAElEC,IAAcC,EAAqB7B,CAAkB,GAErD8B,IAAoBC;AAAA,IACxB,CAACC,MAA0B;AACzB,UAAIP,EAAuB;AAE3B,YAAMQ,IAAkB,CAAC,oBAAoB,cAAc,YAAY,WAAW,GAE5EC,IACJD,EAAgB,KAAK,MAAM,KAAK,WAAWA,EAAgB,MAAM,CAAC;AAEpE,MAAAL,KAAA,QAAAA,EAAcI,GAASE,IACvBR,EAAyB,EAAI;AAEvB,YAAAS,IAAU,WAAW,MAAM;AAC/B,QAAAT,EAAyB,EAAK;AAAA,SAC7B,GAAI;AAEA,aAAA,MAAM,aAAaS,CAAO;AAAA,IACnC;AAAA,IACA,CAACP,GAAaH,CAAqB;AAAA,EAAA,GAG/BW,IAAcC;AAAA,IAClB,MACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAAnC;AAAA,QACA,KAAAC;AAAA,QACA,aAAAC;AAAA,QACA,gBAAgBwB;AAAA,QAChB,UAAUL;AAAA,MAAA;AAAA,IACZ;AAAA,IAEF,CAACrB,GAASC,GAAKC,GAAawB,GAAmBL,CAAqB;AAAA,EAAA,GAGhEe,IAAaH,EAAQ,wBAEtBI,GAAA,EAAsB,WAAWhB,GAAwB,UAAY1B,EAAA,CAAA,GAEvE,CAAC0B,GAAuB1B,CAAW,CAAC;AAGrC,SAAA,gBAAAuC;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,UAAUF;AAAA,MACV,eAAa;AAAA,MACb,QAAQ,CAACrC;AAAA,MACT,aAAAiC;AAAA,MACA,UAAArB;AAAA,MACA,UAAAD;AAAA,MACA,YAAAU;AAAA,MACA,YAAAjB;AAAA,MACA,QAAAe;AAAA,MACA,OAAAF;AAAA,MACA,QAAAC;AAAA,MACA,aAAAE;AAAA,MACA,iBAAAX;AAAA,MACA,aAAAC;AAAA,MACA,aAAAG;AAAA,MACA,eAAAC;AAAA,MACA,YAAAT;AAAA,MACA,WAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,qBAAAO;AAAA,MACA,qBAAAC;AAAA,IAAA;AAAA,EAAA;AAGN,GAEewB,IAAAC,EAAK9C,CAAe;"}
+{"version":3,"file":"sticker-selector.js","sources":["../../../../src/features/stickers/sticker-selector/sticker-selector.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { memo, useMemo, useState, useCallback } from 'react';\n\nimport ArrowTooltip from '../../ui/arrow-tooltip/arrow-tooltip';\nimport type { IStickerData, TStickerAnimationEffects } from '../stickers-types';\nimport StickerSelectorGrid from './comps/stiker-selector-grid/sticker-selector-grid';\nimport { useHandleStickerSend } from './hooks/use-handle-sticker-send';\nimport * as Styled from './sticker-selector-styled';\nimport type { IStickerSelectorProps } from './sticker-selector-types';\n\nconst StickerSelector: FC<IStickerSelectorProps> = ({\n  triggerNode,\n  studentClassroomId,\n  gridConfig,\n  tooltipConfig,\n  visible,\n}) => {\n  const { columns = 4, gap = 8, stickerSize = 48 } = gridConfig;\n  const {\n    isAnimated,\n    arrowColor,\n    arrowSize,\n    arrowXCoOrdinates,\n    arrowYCoOrdinates,\n    backgroundColor,\n    borderColor,\n    position = 'bottom',\n    renderAs = 'primary',\n    textVariant,\n    tooltipOffset,\n    tooltipXCoOrdinates,\n    tooltipYCoOrdinates,\n    width,\n    widthX,\n    zIndex,\n    parentWidth,\n    isBlocking = false,\n  } = tooltipConfig;\n\n  const [isTemporarilyDisabled, setIsTemporarilyDisabled] = useState(false);\n\n  const sendSticker = useHandleStickerSend(studentClassroomId);\n\n  const handleStickerSend = useCallback(\n    (sticker: IStickerData) => {\n      if (isTemporarilyDisabled) return;\n\n      const STICKER_EFFECTS = ['burst-from-edges', 'pop-expand', 'float-up', 'fall-down'] as const;\n\n      const randomEffect: TStickerAnimationEffects =\n        STICKER_EFFECTS[Math.floor(Math.random() * STICKER_EFFECTS.length)]!;\n\n      sendSticker?.(sticker, randomEffect);\n      setIsTemporarilyDisabled(true);\n\n      const timeout = setTimeout(() => {\n        setIsTemporarilyDisabled(false);\n      }, 5000);\n\n      return () => clearTimeout(timeout);\n    },\n    [sendSticker, isTemporarilyDisabled],\n  );\n\n  const tooltipItem = useMemo(\n    () => (\n      <StickerSelectorGrid\n        columns={columns}\n        gap={gap}\n        stickerSize={stickerSize}\n        onStickerClick={handleStickerSend}\n        disabled={isTemporarilyDisabled}\n      />\n    ),\n    [columns, gap, stickerSize, handleStickerSend, isTemporarilyDisabled],\n  );\n\n  const triggerEle = useMemo(() => {\n    return (\n      <Styled.TriggerWrapper $disabled={isTemporarilyDisabled}>{triggerNode}</Styled.TriggerWrapper>\n    );\n  }, [isTemporarilyDisabled, triggerNode]);\n\n  return (\n    <ArrowTooltip\n      children={triggerEle}\n      alwaysVisible\n      hidden={!visible}\n      tooltipItem={tooltipItem}\n      renderAs={renderAs}\n      position={position}\n      isBlocking={isBlocking}\n      isAnimated={isAnimated}\n      zIndex={zIndex}\n      width={width}\n      widthX={widthX}\n      parentWidth={parentWidth}\n      backgroundColor={backgroundColor}\n      borderColor={borderColor}\n      textVariant={textVariant}\n      tooltipOffset={tooltipOffset}\n      arrowColor={arrowColor}\n      arrowSize={arrowSize}\n      arrowXCoOrdinates={arrowXCoOrdinates}\n      arrowYCoOrdinates={arrowYCoOrdinates}\n      tooltipXCoOrdinates={tooltipXCoOrdinates}\n      tooltipYCoOrdinates={tooltipYCoOrdinates}\n    />\n  );\n};\n\nexport default memo(StickerSelector);\n"],"names":["StickerSelector","triggerNode","studentClassroomId","gridConfig","tooltipConfig","visible","columns","gap","stickerSize","isAnimated","arrowColor","arrowSize","arrowXCoOrdinates","arrowYCoOrdinates","backgroundColor","borderColor","position","renderAs","textVariant","tooltipOffset","tooltipXCoOrdinates","tooltipYCoOrdinates","width","widthX","zIndex","parentWidth","isBlocking","isTemporarilyDisabled","setIsTemporarilyDisabled","useState","sendSticker","useHandleStickerSend","handleStickerSend","useCallback","sticker","STICKER_EFFECTS","randomEffect","timeout","tooltipItem","useMemo","jsx","StickerSelectorGrid","triggerEle","Styled.TriggerWrapper","ArrowTooltip","stickerSelector","memo"],"mappings":";;;;;;AAUA,MAAMA,IAA6C,CAAC;AAAA,EAClD,aAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,SAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,IAAU,GAAG,KAAAC,IAAM,GAAG,aAAAC,IAAc,GAAO,IAAAL,GAC7C;AAAA,IACJ,YAAAM;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,EACX,IAAAtB,GAEE,CAACuB,GAAuBC,CAAwB,IAAIC,EAAS,EAAK,GAElEC,IAAcC,EAAqB7B,CAAkB,GAErD8B,IAAoBC;AAAA,IACxB,CAACC,MAA0B;AACzB,UAAIP,EAAuB;AAE3B,YAAMQ,IAAkB,CAAC,oBAAoB,cAAc,YAAY,WAAW,GAE5EC,IACJD,EAAgB,KAAK,MAAM,KAAK,WAAWA,EAAgB,MAAM,CAAC;AAEpE,MAAAL,KAAA,QAAAA,EAAcI,GAASE,IACvBR,EAAyB,EAAI;AAEvB,YAAAS,IAAU,WAAW,MAAM;AAC/B,QAAAT,EAAyB,EAAK;AAAA,SAC7B,GAAI;AAEA,aAAA,MAAM,aAAaS,CAAO;AAAA,IACnC;AAAA,IACA,CAACP,GAAaH,CAAqB;AAAA,EAAA,GAG/BW,IAAcC;AAAA,IAClB,MACE,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAAnC;AAAA,QACA,KAAAC;AAAA,QACA,aAAAC;AAAA,QACA,gBAAgBwB;AAAA,QAChB,UAAUL;AAAA,MAAA;AAAA,IACZ;AAAA,IAEF,CAACrB,GAASC,GAAKC,GAAawB,GAAmBL,CAAqB;AAAA,EAAA,GAGhEe,IAAaH,EAAQ,wBAEtBI,GAAA,EAAsB,WAAWhB,GAAwB,UAAY1B,EAAA,CAAA,GAEvE,CAAC0B,GAAuB1B,CAAW,CAAC;AAGrC,SAAA,gBAAAuC;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,UAAUF;AAAA,MACV,eAAa;AAAA,MACb,QAAQ,CAACrC;AAAA,MACT,aAAAiC;AAAA,MACA,UAAArB;AAAA,MACA,UAAAD;AAAA,MACA,YAAAU;AAAA,MACA,YAAAjB;AAAA,MACA,QAAAe;AAAA,MACA,OAAAF;AAAA,MACA,QAAAC;AAAA,MACA,aAAAE;AAAA,MACA,iBAAAX;AAAA,MACA,aAAAC;AAAA,MACA,aAAAG;AAAA,MACA,eAAAC;AAAA,MACA,YAAAT;AAAA,MACA,WAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,qBAAAO;AAAA,MACA,qBAAAC;AAAA,IAAA;AAAA,EAAA;AAGN,GAEewB,IAAAC,EAAK9C,CAAe;"}

package/dist/features/stickers/stickers-effects/context/sticker-provider.js

@@ -1,43 +1,31 @@
-import { jsxs as f, jsx as d } from "react/jsx-runtime";
-import { useState as k, useCallback as o, useMemo as u } from "react";
-import S from "../../../communication/hooks/use-inclass-message-broker/use-inclass-message-broker.js";
-import p from "../stickers-effects.js";
-import { StickersContext as g } from "../stickers-effects-types.js";
-const I = ({ children: c }) => {
-  const [t, r] = k(null), e = o((s) => {
-    r(s);
-  }, []), a = o(() => {
-    r(null);
-  }, []), i = o(
-    (s) => {
-      s.forEach(({ eventName: l, eventPayload: m }) => {
-        l === "STICKERS" && e(m);
-      });
-    },
-    [e]
-  );
-  S({
-    onMessageReceive: i
-  });
-  const n = u(
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+import { useState as m, useCallback as s, useMemo as d } from "react";
+import f from "../stickers-effects.js";
+import { StickersContext as k } from "../stickers-effects-types.js";
+const h = ({ children: o }) => {
+  const [e, t] = m(null), r = s((a) => {
+    t(a);
+  }, []), c = s(() => {
+    t(null);
+  }, []), i = d(
     () => ({
-      showSticker: e
+      showSticker: r
     }),
-    [e]
+    [r]
   );
-  return /* @__PURE__ */ f(g.Provider, { value: n, children: [
-    c,
-    t && /* @__PURE__ */ d(
-      p,
+  return /* @__PURE__ */ n(k.Provider, { value: i, children: [
+    o,
+    e && /* @__PURE__ */ l(
+      f,
       {
-        stickerId: t.message.data.selectedSticker.id,
-        effectType: t.message.data.effectId,
-        onClose: a
+        stickerId: e.message.data.selectedSticker.id,
+        effectType: e.message.data.effectId,
+        onClose: c
       }
     )
   ] });
 };
 export {
-  I as StickersProvider
+  h as StickersProvider
 };
 //# sourceMappingURL=sticker-provider.js.map

package/dist/features/stickers/stickers-effects/context/sticker-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"sticker-provider.js","sources":["../../../../../src/features/stickers/stickers-effects/context/sticker-provider.tsx"],"sourcesContent":["import type { TInclassMessage } from '../../../communication/hooks/use-inclass-message-broker/use-inclass-message-broker-types';\nimport type { TStickerAnimationEffects, TStickersPayload } from '../../stickers-types';\n\nimport { useCallback, useMemo, useState, type ReactNode } from 'react';\n\nimport useInClassMessageBroker from '../../../communication/hooks/use-inclass-message-broker/use-inclass-message-broker';\nimport StickersEffect from '../stickers-effects';\nimport { StickersContext } from '../stickers-effects-types';\n\ninterface IStickersProviderProps {\n  children: ReactNode;\n  studentClassroomId?: string;\n}\n\nexport const StickersProvider = ({ children }: IStickersProviderProps) => {\n  const [stickerData, setStickerData] = useState<TStickersPayload | null>(null);\n\n  const showSticker = useCallback((payload: TStickersPayload) => {\n    setStickerData(payload);\n  }, []);\n\n  const handleAnimationEnd = useCallback(() => {\n    setStickerData(null);\n  }, []);\n\n  const handleOnMessageReceive = useCallback(\n    (newMessages: Array<TInclassMessage>) => {\n      newMessages.forEach(({ eventName, eventPayload }) => {\n        if (eventName === 'STICKERS') {\n          showSticker(eventPayload);\n        }\n      });\n    },\n    [showSticker],\n  );\n\n  useInClassMessageBroker({\n    onMessageReceive: handleOnMessageReceive,\n  });\n\n  const contextValue = useMemo(\n    () => ({\n      showSticker,\n    }),\n    [showSticker],\n  );\n\n  return (\n    <StickersContext.Provider value={contextValue}>\n      {children}\n      {stickerData && (\n        <StickersEffect\n          stickerId={stickerData.message.data.selectedSticker.id}\n          effectType={stickerData.message.data.effectId as TStickerAnimationEffects}\n          onClose={handleAnimationEnd}\n        />\n      )}\n    </StickersContext.Provider>\n  );\n};\n"],"names":["StickersProvider","children","stickerData","setStickerData","useState","showSticker","useCallback","payload","handleAnimationEnd","handleOnMessageReceive","newMessages","eventName","eventPayload","useInClassMessageBroker","contextValue","useMemo","jsxs","StickersContext","jsx","StickersEffect"],"mappings":";;;;;AAcO,MAAMA,IAAmB,CAAC,EAAE,UAAAC,QAAuC;AACxE,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAkC,IAAI,GAEtEC,IAAcC,EAAY,CAACC,MAA8B;AAC7D,IAAAJ,EAAeI,CAAO;AAAA,EACxB,GAAG,CAAE,CAAA,GAECC,IAAqBF,EAAY,MAAM;AAC3C,IAAAH,EAAe,IAAI;AAAA,EACrB,GAAG,CAAE,CAAA,GAECM,IAAyBH;AAAA,IAC7B,CAACI,MAAwC;AACvC,MAAAA,EAAY,QAAQ,CAAC,EAAE,WAAAC,GAAW,cAAAC,QAAmB;AACnD,QAAID,MAAc,cAChBN,EAAYO,CAAY;AAAA,MAC1B,CACD;AAAA,IACH;AAAA,IACA,CAACP,CAAW;AAAA,EAAA;AAGU,EAAAQ,EAAA;AAAA,IACtB,kBAAkBJ;AAAA,EAAA,CACnB;AAED,QAAMK,IAAeC;AAAA,IACnB,OAAO;AAAA,MACL,aAAAV;AAAA,IAAA;AAAA,IAEF,CAACA,CAAW;AAAA,EAAA;AAGd,SACG,gBAAAW,EAAAC,EAAgB,UAAhB,EAAyB,OAAOH,GAC9B,UAAA;AAAA,IAAAb;AAAA,IACAC,KACC,gBAAAgB;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWjB,EAAY,QAAQ,KAAK,gBAAgB;AAAA,QACpD,YAAYA,EAAY,QAAQ,KAAK;AAAA,QACrC,SAASM;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"sticker-provider.js","sources":["../../../../../src/features/stickers/stickers-effects/context/sticker-provider.tsx"],"sourcesContent":["import { useCallback, useMemo, useState, type ReactNode } from 'react';\n\nimport type { TStickerAnimationEffects, TStickersPayload } from '../../stickers-types';\nimport StickersEffect from '../stickers-effects';\nimport { StickersContext } from '../stickers-effects-types';\n\ninterface IStickersProviderProps {\n  children: ReactNode;\n  studentClassroomId?: string;\n}\n\nexport const StickersProvider = ({ children }: IStickersProviderProps) => {\n  const [stickerData, setStickerData] = useState<TStickersPayload | null>(null);\n\n  const showSticker = useCallback((payload: TStickersPayload) => {\n    setStickerData(payload);\n  }, []);\n\n  const handleAnimationEnd = useCallback(() => {\n    setStickerData(null);\n  }, []);\n\n  const contextValue = useMemo(\n    () => ({\n      showSticker,\n    }),\n    [showSticker],\n  );\n\n  return (\n    <StickersContext.Provider value={contextValue}>\n      {children}\n      {stickerData && (\n        <StickersEffect\n          stickerId={stickerData.message.data.selectedSticker.id}\n          effectType={stickerData.message.data.effectId as TStickerAnimationEffects}\n          onClose={handleAnimationEnd}\n        />\n      )}\n    </StickersContext.Provider>\n  );\n};\n"],"names":["StickersProvider","children","stickerData","setStickerData","useState","showSticker","useCallback","payload","handleAnimationEnd","contextValue","useMemo","jsxs","StickersContext","jsx","StickersEffect"],"mappings":";;;;AAWO,MAAMA,IAAmB,CAAC,EAAE,UAAAC,QAAuC;AACxE,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAkC,IAAI,GAEtEC,IAAcC,EAAY,CAACC,MAA8B;AAC7D,IAAAJ,EAAeI,CAAO;AAAA,EACxB,GAAG,CAAE,CAAA,GAECC,IAAqBF,EAAY,MAAM;AAC3C,IAAAH,EAAe,IAAI;AAAA,EACrB,GAAG,CAAE,CAAA,GAECM,IAAeC;AAAA,IACnB,OAAO;AAAA,MACL,aAAAL;AAAA,IAAA;AAAA,IAEF,CAACA,CAAW;AAAA,EAAA;AAGd,SACG,gBAAAM,EAAAC,EAAgB,UAAhB,EAAyB,OAAOH,GAC9B,UAAA;AAAA,IAAAR;AAAA,IACAC,KACC,gBAAAW;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWZ,EAAY,QAAQ,KAAK,gBAAgB;AAAA,QACpD,YAAYA,EAAY,QAAQ,KAAK;AAAA,QACrC,SAASM;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/features/stickers/stickers-effects/stickers-effects.js.map

@@ -1 +1 @@
-{"version":3,"file":"stickers-effects.js","sources":["../../../../src/features/stickers/stickers-effects/stickers-effects.tsx"],"sourcesContent":["import type { IStickersEffectProps, TStickerAnimationData } from './stickers-effects-types';\nimport type { FC } from 'react';\nimport { memo, useEffect, useState } from 'react';\n\nimport StickerWithFallback from './comps/sticker-with-fallback';\nimport { EFFECTS_MAP } from './constants';\nimport { generateStickerData } from './stickers-effects-helper';\nimport * as Styled from './stickers-effects-styled';\n\nconst StickersEffect: FC<IStickersEffectProps> = ({\n  stickerId,\n  effectType,\n  duration = 3500,\n  onClose,\n}) => {\n  const [stickersData, setStickersData] = useState<ReturnType<typeof generateStickerData>>([]);\n\n  const effectConfig = EFFECTS_MAP[effectType];\n\n  useEffect(() => {\n    if (!onClose) return;\n\n    const timeout = setTimeout(onClose, duration);\n\n    return () => clearTimeout(timeout);\n  }, [onClose, duration]);\n\n  useEffect(() => {\n    const stickerData = generateStickerData({\n      count: effectConfig.count,\n      effect: effectConfig.effect,\n      stickerId,\n      minSize: 48,\n      maxSize: 72,\n    });\n\n    setStickersData(stickerData);\n\n    const timeout = setTimeout(() => setStickersData([]), effectConfig.duration);\n\n    return () => clearTimeout(timeout);\n  }, [effectConfig, stickerId]);\n\n  if (stickersData.length === 0) return null;\n\n  return (\n    <Styled.StickersWrapper $alignItems=\"top\" $justifyContent=\"center\" $inherit>\n      <Styled.Container>\n        {stickersData.map((data: TStickerAnimationData, i) => {\n          const { id, sticker, lottie, x, y, size, fromX, fromY } = data;\n\n          return (\n            <Styled.Sticker\n              key={`${id}-${i}`}\n              effect={effectConfig.effect}\n              duration={effectConfig.duration}\n              delay={500}\n              fromX={fromX}\n              fromY={fromY}\n              x={x}\n              y={y}\n              size={size}\n            >\n              <StickerWithFallback url={lottie} sticker={sticker} size={size} />\n            </Styled.Sticker>\n          );\n        })}\n      </Styled.Container>\n    </Styled.StickersWrapper>\n  );\n};\n\nexport default memo(StickersEffect);\n"],"names":["StickersEffect","stickerId","effectType","duration","onClose","stickersData","setStickersData","useState","effectConfig","EFFECTS_MAP","useEffect","timeout","stickerData","generateStickerData","Styled.StickersWrapper","jsx","Styled.Container","data","i","id","sticker","lottie","x","y","size","fromX","fromY","Styled.Sticker","StickerWithFallback","StickersEffect$1","memo"],"mappings":";;;;;;AASA,MAAMA,IAA2C,CAAC;AAAA,EAChD,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAiD,CAAE,CAAA,GAErFC,IAAeC,EAAYP,CAAU;AA0BvC,SAxBJQ,EAAU,MAAM;AACd,QAAI,CAACN,EAAS;AAER,UAAAO,IAAU,WAAWP,GAASD,CAAQ;AAErC,WAAA,MAAM,aAAaQ,CAAO;AAAA,EAAA,GAChC,CAACP,GAASD,CAAQ,CAAC,GAEtBO,EAAU,MAAM;AACd,UAAME,IAAcC,EAAoB;AAAA,MACtC,OAAOL,EAAa;AAAA,MACpB,QAAQA,EAAa;AAAA,MACrB,WAAAP;AAAA,MACA,SAAS;AAAA,MACT,SAAS;AAAA,IAAA,CACV;AAED,IAAAK,EAAgBM,CAAW;AAErB,UAAAD,IAAU,WAAW,MAAML,EAAgB,CAAA,CAAE,GAAGE,EAAa,QAAQ;AAEpE,WAAA,MAAM,aAAaG,CAAO;AAAA,EAAA,GAChC,CAACH,GAAcP,CAAS,CAAC,GAExBI,EAAa,WAAW,IAAU,yBAGnCS,GAAA,EAAuB,aAAY,OAAM,iBAAgB,UAAS,UAAQ,IACzE,UAAA,gBAAAC,EAACC,GAAA,EACE,YAAa,IAAI,CAACC,GAA6BC,MAAM;AAC9C,UAAA,EAAE,IAAAC,GAAI,SAAAC,GAAS,QAAAC,GAAQ,GAAAC,GAAG,GAAAC,GAAG,MAAAC,GAAM,OAAAC,GAAO,OAAAC,EAAU,IAAAT;AAGxD,WAAA,gBAAAF;AAAA,MAACY;AAAAA,MAAA;AAAA,QAEC,QAAQnB,EAAa;AAAA,QACrB,UAAUA,EAAa;AAAA,QACvB,OAAO;AAAA,QACP,OAAAiB;AAAA,QACA,OAAAC;AAAA,QACA,GAAAJ;AAAA,QACA,GAAAC;AAAA,QACA,MAAAC;AAAA,QAEA,UAAC,gBAAAT,EAAAa,GAAA,EAAoB,KAAKP,GAAQ,SAAAD,GAAkB,MAAAI,GAAY;AAAA,MAAA;AAAA,MAV3D,GAAGL,CAAE,IAAID,CAAC;AAAA,IAAA;AAAA,EAWjB,CAEH,GACH,EACF,CAAA;AAEJ,GAEeW,IAAAC,EAAK9B,CAAc;"}
+{"version":3,"file":"stickers-effects.js","sources":["../../../../src/features/stickers/stickers-effects/stickers-effects.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { memo, useEffect, useState } from 'react';\n\nimport StickerWithFallback from './comps/sticker-with-fallback';\nimport { EFFECTS_MAP } from './constants';\nimport { generateStickerData } from './stickers-effects-helper';\nimport * as Styled from './stickers-effects-styled';\nimport type { IStickersEffectProps, TStickerAnimationData } from './stickers-effects-types';\n\nconst StickersEffect: FC<IStickersEffectProps> = ({\n  stickerId,\n  effectType,\n  duration = 3500,\n  onClose,\n}) => {\n  const [stickersData, setStickersData] = useState<ReturnType<typeof generateStickerData>>([]);\n\n  const effectConfig = EFFECTS_MAP[effectType];\n\n  useEffect(() => {\n    if (!onClose) return;\n\n    const timeout = setTimeout(onClose, duration);\n\n    return () => clearTimeout(timeout);\n  }, [onClose, duration]);\n\n  useEffect(() => {\n    const stickerData = generateStickerData({\n      count: effectConfig.count,\n      effect: effectConfig.effect,\n      stickerId,\n      minSize: 48,\n      maxSize: 72,\n    });\n\n    setStickersData(stickerData);\n\n    const timeout = setTimeout(() => setStickersData([]), effectConfig.duration);\n\n    return () => clearTimeout(timeout);\n  }, [effectConfig, stickerId]);\n\n  if (stickersData.length === 0) return null;\n\n  return (\n    <Styled.StickersWrapper $alignItems=\"top\" $justifyContent=\"center\" $inherit>\n      <Styled.Container>\n        {stickersData.map((data: TStickerAnimationData, i) => {\n          const { id, sticker, lottie, x, y, size, fromX, fromY } = data;\n\n          return (\n            <Styled.Sticker\n              key={`${id}-${i}`}\n              effect={effectConfig.effect}\n              duration={effectConfig.duration}\n              delay={500}\n              fromX={fromX}\n              fromY={fromY}\n              x={x}\n              y={y}\n              size={size}\n            >\n              <StickerWithFallback url={lottie} sticker={sticker} size={size} />\n            </Styled.Sticker>\n          );\n        })}\n      </Styled.Container>\n    </Styled.StickersWrapper>\n  );\n};\n\nexport default memo(StickersEffect);\n"],"names":["StickersEffect","stickerId","effectType","duration","onClose","stickersData","setStickersData","useState","effectConfig","EFFECTS_MAP","useEffect","timeout","stickerData","generateStickerData","Styled.StickersWrapper","jsx","Styled.Container","data","i","id","sticker","lottie","x","y","size","fromX","fromY","Styled.Sticker","StickerWithFallback","StickersEffect$1","memo"],"mappings":";;;;;;AASA,MAAMA,IAA2C,CAAC;AAAA,EAChD,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAiD,CAAE,CAAA,GAErFC,IAAeC,EAAYP,CAAU;AA0BvC,SAxBJQ,EAAU,MAAM;AACd,QAAI,CAACN,EAAS;AAER,UAAAO,IAAU,WAAWP,GAASD,CAAQ;AAErC,WAAA,MAAM,aAAaQ,CAAO;AAAA,EAAA,GAChC,CAACP,GAASD,CAAQ,CAAC,GAEtBO,EAAU,MAAM;AACd,UAAME,IAAcC,EAAoB;AAAA,MACtC,OAAOL,EAAa;AAAA,MACpB,QAAQA,EAAa;AAAA,MACrB,WAAAP;AAAA,MACA,SAAS;AAAA,MACT,SAAS;AAAA,IAAA,CACV;AAED,IAAAK,EAAgBM,CAAW;AAErB,UAAAD,IAAU,WAAW,MAAML,EAAgB,CAAA,CAAE,GAAGE,EAAa,QAAQ;AAEpE,WAAA,MAAM,aAAaG,CAAO;AAAA,EAAA,GAChC,CAACH,GAAcP,CAAS,CAAC,GAExBI,EAAa,WAAW,IAAU,yBAGnCS,GAAA,EAAuB,aAAY,OAAM,iBAAgB,UAAS,UAAQ,IACzE,UAAA,gBAAAC,EAACC,GAAA,EACE,YAAa,IAAI,CAACC,GAA6BC,MAAM;AAC9C,UAAA,EAAE,IAAAC,GAAI,SAAAC,GAAS,QAAAC,GAAQ,GAAAC,GAAG,GAAAC,GAAG,MAAAC,GAAM,OAAAC,GAAO,OAAAC,EAAU,IAAAT;AAGxD,WAAA,gBAAAF;AAAA,MAACY;AAAAA,MAAA;AAAA,QAEC,QAAQnB,EAAa;AAAA,QACrB,UAAUA,EAAa;AAAA,QACvB,OAAO;AAAA,QACP,OAAAiB;AAAA,QACA,OAAAC;AAAA,QACA,GAAAJ;AAAA,QACA,GAAAC;AAAA,QACA,MAAAC;AAAA,QAEA,UAAC,gBAAAT,EAAAa,GAAA,EAAoB,KAAKP,GAAQ,SAAAD,GAAkB,MAAAI,GAAY;AAAA,MAAA;AAAA,MAV3D,GAAGL,CAAE,IAAID,CAAC;AAAA,IAAA;AAAA,EAWjB,CAEH,GACH,EACF,CAAA;AAEJ,GAEeW,IAAAC,EAAK9B,CAAc;"}

package/dist/index.d.ts

@@ -4410,6 +4410,7 @@ declare interface IUserTypeSelectorProps {
 
 declare interface IUseTeacherStickersJourneyProps {
     triggerRef: RefObject<HTMLDivElement>;
+    triggerElement: ReactElement;
     tooltipConfig: TArrowTooltipConfigProps;
 }
 
@@ -7162,7 +7163,7 @@ export declare const UserTypeSelector: NamedExoticComponent<IUserTypeSelectorPro
 
 export declare const useStickers: () => IStickersContextType;
 
-export declare const useStickersJourney: ({ triggerRef, tooltipConfig, }: IUseTeacherStickersJourneyProps) => {
+export declare const useStickersJourney: ({ triggerRef, triggerElement, tooltipConfig, }: IUseTeacherStickersJourneyProps) => {
     startTeacherStickersJourney: () => void;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.4.3-mbx2",
+  "version": "3.4.4-m",
   "type": "module",
   "files": [
     "dist"