@cuemath/leap 3.5.1 → 3.5.2

package/dist/features/wins-dashboard/student-badges/hooks/use-student-badge-list-hook.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-student-badge-list-hook.js","sources":["../../../../../src/features/wins-dashboard/student-badges/hooks/use-student-badge-list-hook.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState, type FC, type RefObject } from 'react';\nimport type { RuleSet } from 'styled-components';\nimport { css } from 'styled-components';\n\nimport { BADGE_TYPE_TAB_ICON, STUDENT_BADGE_TYPE } from '../../constants';\n\nconst HEADER_HEIGHT = 64;\nconst TAB_BAR_HEIGHT = 48;\nconst TOTAL_TAB_BAR_HEIGHT = HEADER_HEIGHT + TAB_BAR_HEIGHT;\n\n// Screen sizes constants\nconst SCREEN_SIZES = {\n  TABLET: 768,\n  LAPTOP: 1024,\n  LAPTOPL: 1440,\n};\n\ninterface CategoryConfig {\n  badgeWidth: number;\n  badgeCategoryGap: number;\n  badgeCategoryWidth: number;\n  maxBadgeNameLines: number;\n  containerStyle: RuleSet<object>;\n}\n\nconst getBadgeContainerConfig = (containerWidth: number): CategoryConfig => {\n  if (containerWidth > SCREEN_SIZES.LAPTOPL) {\n    return {\n      badgeWidth: 140,\n      badgeCategoryGap: 40,\n      badgeCategoryWidth: 1040,\n      maxBadgeNameLines: 1,\n      containerStyle: css`\n        grid-template-columns: repeat(auto-fit, 140px);\n        grid-column-gap: 40px;\n        margin-top: 32px;\n      `,\n    };\n  }\n\n  if (containerWidth > SCREEN_SIZES.LAPTOP) {\n    const gutter = 120;\n    const badgeGap = 40;\n    const badgeWidth = (containerWidth - (2 * gutter + 5 * badgeGap)) / 6;\n\n    return {\n      badgeWidth,\n      badgeCategoryGap: 40,\n      badgeCategoryWidth: containerWidth - 2 * gutter,\n      maxBadgeNameLines: 1,\n      containerStyle: css`\n        grid-template-columns: repeat(auto-fit, ${badgeWidth}px);\n        grid-column-gap: 40px;\n        margin-top: 32px;\n      `,\n    };\n  }\n\n  if (containerWidth > SCREEN_SIZES.TABLET) {\n    return {\n      badgeWidth: 104,\n      badgeCategoryGap: 24,\n      badgeCategoryWidth: 784,\n      maxBadgeNameLines: 2,\n      containerStyle: css`\n        grid-column-gap: 32px;\n        grid-template-columns: repeat(auto-fit, 104px);\n        margin-top: 24px;\n      `,\n    };\n  }\n\n  const gutter = 40;\n  const badgeGap = 26;\n  const badgeWidth = (containerWidth - (2 * gutter + 5 * badgeGap)) / 6;\n\n  return {\n    badgeWidth,\n    badgeCategoryGap: 24,\n    badgeCategoryWidth: containerWidth - 2 * gutter,\n    maxBadgeNameLines: 2,\n    containerStyle: css`\n      grid-column-gap: 26px;\n      grid-template-columns: repeat(auto-fit, ${badgeWidth}px);\n      margin-top: 24px;\n    `,\n  };\n};\n\nexport default function useStudentBadgeListHook({\n  currentScreenWidth,\n  handleScrollTo,\n  scrollPosition,\n  userBadges,\n}: {\n  currentScreenWidth: number;\n  handleScrollTo: (position: number) => void;\n  scrollPosition: number;\n  userBadges: Record<string, unknown[]>;\n}) {\n  // Create refs for all possible badge categories\n  const commonTabRef = useRef<HTMLDivElement | null>(null);\n  const rareTabRef = useRef<HTMLDivElement | null>(null);\n  const epicTabRef = useRef<HTMLDivElement | null>(null);\n  const legendaryTabRef = useRef<HTMLDivElement | null>(null);\n  const mythicTabRef = useRef<HTMLDivElement | null>(null);\n  const mysteryTabRef = useRef<HTMLDivElement | null>(null);\n\n  const commonBadgeRef = useRef<HTMLDivElement | null>(null);\n  const rareBadgeRef = useRef<HTMLDivElement | null>(null);\n  const epicBadgeRef = useRef<HTMLDivElement | null>(null);\n  const legendaryBadgeRef = useRef<HTMLDivElement | null>(null);\n  const mythicBadgeRef = useRef<HTMLDivElement | null>(null);\n  const mysteryBadgeRef = useRef<HTMLDivElement | null>(null);\n\n  const tabBarRefs: Record<string, RefObject<HTMLDivElement | null>> = useMemo(\n    () => ({\n      [STUDENT_BADGE_TYPE.COMMON]: commonTabRef,\n      [STUDENT_BADGE_TYPE.RARE]: rareTabRef,\n      [STUDENT_BADGE_TYPE.EPIC]: epicTabRef,\n      [STUDENT_BADGE_TYPE.LEGENDARY]: legendaryTabRef,\n      [STUDENT_BADGE_TYPE.MYTHIC]: mythicTabRef,\n      [STUDENT_BADGE_TYPE.MYSTERY]: mysteryTabRef,\n    }),\n    [],\n  );\n\n  const badgeCategoryRefs: Record<string, RefObject<HTMLDivElement | null>> = useMemo(\n    () => ({\n      [STUDENT_BADGE_TYPE.COMMON]: commonBadgeRef,\n      [STUDENT_BADGE_TYPE.RARE]: rareBadgeRef,\n      [STUDENT_BADGE_TYPE.EPIC]: epicBadgeRef,\n      [STUDENT_BADGE_TYPE.LEGENDARY]: legendaryBadgeRef,\n      [STUDENT_BADGE_TYPE.MYTHIC]: mythicBadgeRef,\n      [STUDENT_BADGE_TYPE.MYSTERY]: mysteryBadgeRef,\n    }),\n    [],\n  );\n\n  const [showTabBar, setShowTabBar] = useState(false);\n  const [currentSelectedBadgeType, setCurrentSelectedBadgeType] = useState(\n    STUDENT_BADGE_TYPE.COMMON,\n  );\n\n  useEffect(() => {\n    const categoryReached = Object.keys(badgeCategoryRefs)\n      .reverse()\n      .find(category => {\n        const categoryRef = badgeCategoryRefs[category];\n        const categoryTopOffset = categoryRef?.current?.offsetTop;\n\n        if (typeof categoryTopOffset !== 'number') return false;\n\n        return (\n          scrollPosition >=\n          categoryTopOffset -\n            (category === STUDENT_BADGE_TYPE.COMMON ? HEADER_HEIGHT : TOTAL_TAB_BAR_HEIGHT)\n        );\n      });\n\n    if (categoryReached && categoryReached !== currentSelectedBadgeType) {\n      setCurrentSelectedBadgeType(categoryReached);\n    }\n\n    if (categoryReached && !showTabBar) {\n      setShowTabBar(true);\n    }\n\n    if (!categoryReached && showTabBar) {\n      setShowTabBar(false);\n    }\n  }, [badgeCategoryRefs, currentSelectedBadgeType, scrollPosition, showTabBar]);\n\n  const onTabClick = useCallback(\n    (category: string) => {\n      const categoryRef = badgeCategoryRefs[category];\n      const categoryTopOffset = categoryRef?.current?.offsetTop;\n\n      if (typeof categoryTopOffset === 'number') {\n        const scrollTopPosition =\n          categoryTopOffset -\n          (category === STUDENT_BADGE_TYPE.COMMON ? HEADER_HEIGHT : TOTAL_TAB_BAR_HEIGHT);\n\n        handleScrollTo(scrollTopPosition);\n      }\n    },\n    [badgeCategoryRefs, handleScrollTo],\n  );\n\n  const scrollToTop = useCallback(() => {\n    const scrollTopPosition = 0;\n\n    handleScrollTo(scrollTopPosition);\n  }, [handleScrollTo]);\n\n  const getTabBarData = (): Array<{\n    id: string;\n    title: string;\n    Icon: FC<{ color?: string; selected?: boolean }>;\n    ref: RefObject<HTMLDivElement | null>;\n  }> => {\n    const tabBarData: Array<{\n      id: string;\n      title: string;\n      Icon: FC<{ color?: string; selected?: boolean }>;\n      ref: RefObject<HTMLDivElement | null>;\n    }> = [];\n\n    Object.keys(userBadges).forEach(category => {\n      const Icon = BADGE_TYPE_TAB_ICON[category];\n      const ref = tabBarRefs[category];\n\n      if (Icon && ref) {\n        tabBarData.push({\n          id: category,\n          title: category,\n          Icon,\n          ref,\n        });\n      }\n    });\n\n    return tabBarData;\n  };\n\n  return {\n    badgeCategoryRefs,\n    categoryConfig: getBadgeContainerConfig(currentScreenWidth),\n    currentSelectedBadgeType,\n    onTabClick,\n    scrollToTop,\n    showTabBar,\n    tabs: getTabBarData(),\n    totalBadgeCategories: Object.keys(userBadges).length,\n  };\n}\n"],"names":["HEADER_HEIGHT","TAB_BAR_HEIGHT","TOTAL_TAB_BAR_HEIGHT","SCREEN_SIZES","getBadgeContainerConfig","containerWidth","css","badgeWidth","gutter","useStudentBadgeListHook","currentScreenWidth","handleScrollTo","scrollPosition","userBadges","commonTabRef","useRef","rareTabRef","epicTabRef","legendaryTabRef","mythicTabRef","mysteryTabRef","commonBadgeRef","rareBadgeRef","epicBadgeRef","legendaryBadgeRef","mythicBadgeRef","mysteryBadgeRef","tabBarRefs","useMemo","STUDENT_BADGE_TYPE","badgeCategoryRefs","showTabBar","setShowTabBar","useState","currentSelectedBadgeType","setCurrentSelectedBadgeType","useEffect","categoryReached","category","categoryRef","categoryTopOffset","_a","onTabClick","useCallback","scrollTopPosition","scrollToTop","getTabBarData","tabBarData","Icon","BADGE_TYPE_TAB_ICON","ref"],"mappings":"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"}
+{"version":3,"file":"use-student-badge-list-hook.js","sources":["../../../../../src/features/wins-dashboard/student-badges/hooks/use-student-badge-list-hook.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState, type FC, type RefObject } from 'react';\nimport type { RuleSet } from 'styled-components';\nimport { css } from 'styled-components';\n\nimport { BADGE_TYPE_TAB_ICON, STUDENT_BADGE_TYPE } from '../../constants';\n\nconst HEADER_HEIGHT = 64;\nconst TAB_BAR_HEIGHT = 48;\nconst TOTAL_TAB_BAR_HEIGHT = HEADER_HEIGHT + TAB_BAR_HEIGHT;\n\n// Screen sizes constants\nconst SCREEN_SIZES = {\n  TABLET: 768,\n  LAPTOP: 1024,\n  LAPTOPL: 1440,\n};\n\ninterface CategoryConfig {\n  badgeWidth: number;\n  badgeCategoryGap: number;\n  badgeCategoryWidth: number;\n  maxBadgeNameLines: number;\n  containerStyle: RuleSet<object>;\n}\n\nconst getBadgeContainerConfig = (containerWidth: number): CategoryConfig => {\n  if (containerWidth > SCREEN_SIZES.LAPTOPL) {\n    return {\n      badgeWidth: 140,\n      badgeCategoryGap: 40,\n      badgeCategoryWidth: 1040,\n      maxBadgeNameLines: 1,\n      containerStyle: css`\n        grid-template-columns: repeat(auto-fit, 140px);\n        grid-column-gap: 40px;\n        margin-top: 32px;\n      `,\n    };\n  }\n\n  if (containerWidth > SCREEN_SIZES.LAPTOP) {\n    const gutter = 120;\n    const badgeGap = 40;\n    const badgeWidth = (containerWidth - (2 * gutter + 5 * badgeGap)) / 6;\n\n    return {\n      badgeWidth,\n      badgeCategoryGap: 40,\n      badgeCategoryWidth: containerWidth - 2 * gutter,\n      maxBadgeNameLines: 1,\n      containerStyle: css`\n        grid-template-columns: repeat(auto-fit, ${badgeWidth}px);\n        grid-column-gap: 40px;\n        margin-top: 32px;\n      `,\n    };\n  }\n\n  if (containerWidth > SCREEN_SIZES.TABLET) {\n    return {\n      badgeWidth: 104,\n      badgeCategoryGap: 24,\n      badgeCategoryWidth: 784,\n      maxBadgeNameLines: 2,\n      containerStyle: css`\n        grid-column-gap: 32px;\n        grid-template-columns: repeat(auto-fit, 104px);\n        margin-top: 24px;\n      `,\n    };\n  }\n\n  const gutter = 40;\n  const badgeGap = 26;\n  const badgeWidth = (containerWidth - (2 * gutter + 5 * badgeGap)) / 6;\n\n  return {\n    badgeWidth,\n    badgeCategoryGap: 24,\n    badgeCategoryWidth: containerWidth - 2 * gutter,\n    maxBadgeNameLines: 2,\n    containerStyle: css`\n      grid-column-gap: 26px;\n      grid-template-columns: repeat(auto-fit, ${badgeWidth}px);\n      margin-top: 24px;\n    `,\n  };\n};\n\nexport default function useStudentBadgeListHook({\n  currentScreenWidth,\n  handleScrollTo,\n  scrollPosition,\n  userBadges,\n}: {\n  currentScreenWidth: number;\n  handleScrollTo: (position: number) => void;\n  scrollPosition: number;\n  userBadges: Record<string, unknown[]>;\n}) {\n  // Create refs for all possible badge categories\n  const commonTabRef = useRef<HTMLDivElement | null>(null);\n  const rareTabRef = useRef<HTMLDivElement | null>(null);\n  const epicTabRef = useRef<HTMLDivElement | null>(null);\n  const legendaryTabRef = useRef<HTMLDivElement | null>(null);\n  const mythicTabRef = useRef<HTMLDivElement | null>(null);\n  const mysteryTabRef = useRef<HTMLDivElement | null>(null);\n\n  const commonBadgeRef = useRef<HTMLDivElement | null>(null);\n  const rareBadgeRef = useRef<HTMLDivElement | null>(null);\n  const epicBadgeRef = useRef<HTMLDivElement | null>(null);\n  const legendaryBadgeRef = useRef<HTMLDivElement | null>(null);\n  const mythicBadgeRef = useRef<HTMLDivElement | null>(null);\n  const mysteryBadgeRef = useRef<HTMLDivElement | null>(null);\n\n  const tabBarRefs: Record<string, RefObject<HTMLDivElement | null>> = useMemo(\n    () => ({\n      [STUDENT_BADGE_TYPE.COMMON]: commonTabRef,\n      [STUDENT_BADGE_TYPE.RARE]: rareTabRef,\n      [STUDENT_BADGE_TYPE.EPIC]: epicTabRef,\n      [STUDENT_BADGE_TYPE.LEGENDARY]: legendaryTabRef,\n      [STUDENT_BADGE_TYPE.MYTHIC]: mythicTabRef,\n      [STUDENT_BADGE_TYPE.MYSTERY]: mysteryTabRef,\n    }),\n    [],\n  );\n\n  const badgeCategoryRefs: Record<string, RefObject<HTMLDivElement | null>> = useMemo(\n    () => ({\n      [STUDENT_BADGE_TYPE.COMMON]: commonBadgeRef,\n      [STUDENT_BADGE_TYPE.RARE]: rareBadgeRef,\n      [STUDENT_BADGE_TYPE.EPIC]: epicBadgeRef,\n      [STUDENT_BADGE_TYPE.LEGENDARY]: legendaryBadgeRef,\n      [STUDENT_BADGE_TYPE.MYTHIC]: mythicBadgeRef,\n      [STUDENT_BADGE_TYPE.MYSTERY]: mysteryBadgeRef,\n    }),\n    [],\n  );\n\n  const [showTabBar, setShowTabBar] = useState(false);\n  const [currentSelectedBadgeType, setCurrentSelectedBadgeType] = useState(\n    STUDENT_BADGE_TYPE.COMMON,\n  );\n\n  useEffect(() => {\n    const categoryReached = Object.keys(badgeCategoryRefs)\n      .reverse()\n      .find(category => {\n        const categoryRef = badgeCategoryRefs[category];\n        const categoryTopOffset = categoryRef?.current?.offsetTop;\n\n        if (typeof categoryTopOffset !== 'number') return false;\n\n        return (\n          scrollPosition >=\n          categoryTopOffset -\n            (category === STUDENT_BADGE_TYPE.COMMON ? HEADER_HEIGHT : TOTAL_TAB_BAR_HEIGHT)\n        );\n      });\n\n    if (categoryReached && categoryReached !== currentSelectedBadgeType) {\n      setCurrentSelectedBadgeType(categoryReached);\n    }\n\n    if (categoryReached && !showTabBar) {\n      setShowTabBar(true);\n    }\n\n    if (!categoryReached && showTabBar) {\n      setShowTabBar(false);\n    }\n  }, [badgeCategoryRefs, currentSelectedBadgeType, scrollPosition, showTabBar]);\n\n  const onTabClick = useCallback(\n    (category: string) => {\n      const categoryRef = badgeCategoryRefs[category];\n      const categoryTopOffset = categoryRef?.current?.offsetTop;\n\n      if (typeof categoryTopOffset === 'number') {\n        const scrollTopPosition =\n          categoryTopOffset -\n          (category === STUDENT_BADGE_TYPE.COMMON ? HEADER_HEIGHT : TOTAL_TAB_BAR_HEIGHT);\n\n        handleScrollTo(scrollTopPosition);\n      }\n    },\n    [badgeCategoryRefs, handleScrollTo],\n  );\n\n  const scrollToTop = useCallback(() => {\n    const scrollTopPosition = 0;\n\n    handleScrollTo(scrollTopPosition);\n  }, [handleScrollTo]);\n\n  const getTabBarData = (): Array<{\n    id: string;\n    title: string;\n    Icon: FC<{ color?: string; selected?: boolean }>;\n    ref: RefObject<HTMLDivElement | null>;\n  }> => {\n    const tabBarData: Array<{\n      id: string;\n      title: string;\n      Icon: FC<{ color?: string; selected?: boolean }>;\n      ref: RefObject<HTMLDivElement | null>;\n    }> = [];\n\n    Object.keys(userBadges).forEach(category => {\n      const Icon = BADGE_TYPE_TAB_ICON[category];\n      const ref = tabBarRefs[category];\n\n      if (ref) {\n        tabBarData.push({\n          id: category,\n          title: category,\n          Icon,\n          ref,\n        });\n      }\n    });\n\n    return tabBarData;\n  };\n\n  return {\n    badgeCategoryRefs,\n    categoryConfig: getBadgeContainerConfig(currentScreenWidth),\n    currentSelectedBadgeType,\n    onTabClick,\n    scrollToTop,\n    showTabBar,\n    tabs: getTabBarData(),\n    totalBadgeCategories: Object.keys(userBadges).length,\n  };\n}\n"],"names":["HEADER_HEIGHT","TAB_BAR_HEIGHT","TOTAL_TAB_BAR_HEIGHT","SCREEN_SIZES","getBadgeContainerConfig","containerWidth","css","badgeWidth","gutter","useStudentBadgeListHook","currentScreenWidth","handleScrollTo","scrollPosition","userBadges","commonTabRef","useRef","rareTabRef","epicTabRef","legendaryTabRef","mythicTabRef","mysteryTabRef","commonBadgeRef","rareBadgeRef","epicBadgeRef","legendaryBadgeRef","mythicBadgeRef","mysteryBadgeRef","tabBarRefs","useMemo","STUDENT_BADGE_TYPE","badgeCategoryRefs","showTabBar","setShowTabBar","useState","currentSelectedBadgeType","setCurrentSelectedBadgeType","useEffect","categoryReached","category","categoryRef","categoryTopOffset","_a","onTabClick","useCallback","scrollTopPosition","scrollToTop","getTabBarData","tabBarData","Icon","BADGE_TYPE_TAB_ICON","ref"],"mappings":";;;AAMA,MAAMA,IAAgB,IAChBC,IAAiB,IACjBC,IAAuBF,IAAgBC,GAGvCE,IAAe;AAAA,EACnB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AACX,GAUMC,IAA0B,CAACC,MAA2C;AACtE,MAAAA,IAAiBF,EAAa;AACzB,WAAA;AAAA,MACL,YAAY;AAAA,MACZ,kBAAkB;AAAA,MAClB,oBAAoB;AAAA,MACpB,mBAAmB;AAAA,MACnB,gBAAgBG;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAQhB,MAAAD,IAAiBF,EAAa,QAAQ;AAGxC,UAAMI,KAAcF,IAAkB,OAA8B;AAE7D,WAAA;AAAA,MACL,YAAAE;AAAAA,MACA,kBAAkB;AAAA,MAClB,oBAAoBF,IAAiB,IAAIG;AAAAA,MACzC,mBAAmB;AAAA,MACnB,gBAAgBF;AAAA,kDAC4BC,CAAU;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAK1D;AAEI,MAAAF,IAAiBF,EAAa;AACzB,WAAA;AAAA,MACL,YAAY;AAAA,MACZ,kBAAkB;AAAA,MAClB,oBAAoB;AAAA,MACpB,mBAAmB;AAAA,MACnB,gBAAgBG;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAQpB,QAAME,IAAS,IAETD,KAAcF,KAAkB,IAAIG,IAAS,IADlC,OACmD;AAE7D,SAAA;AAAA,IACL,YAAAD;AAAA,IACA,kBAAkB;AAAA,IAClB,oBAAoBF,IAAiB,IAAIG;AAAA,IACzC,mBAAmB;AAAA,IACnB,gBAAgBF;AAAA;AAAA,gDAE4BC,CAAU;AAAA;AAAA;AAAA,EAAA;AAI1D;AAEA,SAAwBE,EAAwB;AAAA,EAC9C,oBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC;AACF,GAKG;AAEK,QAAAC,IAAeC,EAA8B,IAAI,GACjDC,IAAaD,EAA8B,IAAI,GAC/CE,IAAaF,EAA8B,IAAI,GAC/CG,IAAkBH,EAA8B,IAAI,GACpDI,IAAeJ,EAA8B,IAAI,GACjDK,IAAgBL,EAA8B,IAAI,GAElDM,IAAiBN,EAA8B,IAAI,GACnDO,IAAeP,EAA8B,IAAI,GACjDQ,IAAeR,EAA8B,IAAI,GACjDS,IAAoBT,EAA8B,IAAI,GACtDU,IAAiBV,EAA8B,IAAI,GACnDW,IAAkBX,EAA8B,IAAI,GAEpDY,IAA+DC;AAAA,IACnE,OAAO;AAAA,MACL,CAACC,EAAmB,MAAM,GAAGf;AAAA,MAC7B,CAACe,EAAmB,IAAI,GAAGb;AAAA,MAC3B,CAACa,EAAmB,IAAI,GAAGZ;AAAA,MAC3B,CAACY,EAAmB,SAAS,GAAGX;AAAA,MAChC,CAACW,EAAmB,MAAM,GAAGV;AAAA,MAC7B,CAACU,EAAmB,OAAO,GAAGT;AAAA,IAAA;AAAA,IAEhC,CAAC;AAAA,EAAA,GAGGU,IAAsEF;AAAA,IAC1E,OAAO;AAAA,MACL,CAACC,EAAmB,MAAM,GAAGR;AAAA,MAC7B,CAACQ,EAAmB,IAAI,GAAGP;AAAA,MAC3B,CAACO,EAAmB,IAAI,GAAGN;AAAA,MAC3B,CAACM,EAAmB,SAAS,GAAGL;AAAA,MAChC,CAACK,EAAmB,MAAM,GAAGJ;AAAA,MAC7B,CAACI,EAAmB,OAAO,GAAGH;AAAA,IAAA;AAAA,IAEhC,CAAC;AAAA,EAAA,GAGG,CAACK,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,CAACC,GAA0BC,CAA2B,IAAIF;AAAA,IAC9DJ,EAAmB;AAAA,EAAA;AAGrB,EAAAO,EAAU,MAAM;AACR,UAAAC,IAAkB,OAAO,KAAKP,CAAiB,EAClD,QAAQ,EACR,KAAK,CAAYQ,MAAA;;AACV,YAAAC,IAAcT,EAAkBQ,CAAQ,GACxCE,KAAoBC,IAAAF,KAAA,gBAAAA,EAAa,YAAb,gBAAAE,EAAsB;AAE5C,aAAA,OAAOD,KAAsB,WAAiB,KAGhD5B,KACA4B,KACGF,MAAaT,EAAmB,SAAS7B,IAAgBE;AAAA,IAAA,CAE/D;AAEC,IAAAmC,KAAmBA,MAAoBH,KACzCC,EAA4BE,CAAe,GAGzCA,KAAmB,CAACN,KACtBC,EAAc,EAAI,GAGhB,CAACK,KAAmBN,KACtBC,EAAc,EAAK;AAAA,KAEpB,CAACF,GAAmBI,GAA0BtB,GAAgBmB,CAAU,CAAC;AAE5E,QAAMW,IAAaC;AAAA,IACjB,CAACL,MAAqB;;AACd,YAAAC,IAAcT,EAAkBQ,CAAQ,GACxCE,KAAoBC,IAAAF,KAAA,gBAAAA,EAAa,YAAb,gBAAAE,EAAsB;AAE5C,UAAA,OAAOD,KAAsB,UAAU;AACzC,cAAMI,IACJJ,KACCF,MAAaT,EAAmB,SAAS7B,IAAgBE;AAE5D,QAAAS,EAAeiC,CAAiB;AAAA,MAClC;AAAA,IACF;AAAA,IACA,CAACd,GAAmBnB,CAAc;AAAA,EAAA,GAG9BkC,IAAcF,EAAY,MAAM;AAGpC,IAAAhC,EAAe,CAAiB;AAAA,EAAA,GAC/B,CAACA,CAAc,CAAC,GAEbmC,IAAgB,MAKhB;AACJ,UAAMC,IAKD,CAAA;AAEL,kBAAO,KAAKlC,CAAU,EAAE,QAAQ,CAAYyB,MAAA;AACpC,YAAAU,IAAOC,EAAoBX,CAAQ,GACnCY,IAAMvB,EAAWW,CAAQ;AAE/B,MAAIY,KACFH,EAAW,KAAK;AAAA,QACd,IAAIT;AAAA,QACJ,OAAOA;AAAA,QACP,MAAAU;AAAA,QACA,KAAAE;AAAA,MAAA,CACD;AAAA,IACH,CACD,GAEMH;AAAA,EAAA;AAGF,SAAA;AAAA,IACL,mBAAAjB;AAAA,IACA,gBAAgB1B,EAAwBM,CAAkB;AAAA,IAC1D,0BAAAwB;AAAA,IACA,YAAAQ;AAAA,IACA,aAAAG;AAAA,IACA,YAAAd;AAAA,IACA,MAAMe,EAAc;AAAA,IACpB,sBAAsB,OAAO,KAAKjC,CAAU,EAAE;AAAA,EAAA;AAElD;"}

package/dist/features/worksheet/user-pointer-pin/hooks/use-user-location.js

@@ -1,18 +1,18 @@
-import { useAVMessage as u } from "@cuemath/av";
-import { useState as a, useMemo as I, useCallback as c } from "react";
+import { useState as u, useMemo as a, useCallback as I } from "react";
+import { useAVMessage as c } from "@cuemath/av";
 const N = ({
   questions: o,
   activeQuestionIndex: r,
   userType: p
 }) => {
   var n;
-  const [t, i] = a(), e = I(
+  const [t, i] = u(), e = a(
     () => o.findIndex((s) => s.response_id === t),
     [t, o]
-  ), d = c((s, m) => {
+  ), d = I((s, m) => {
     i(m.id);
   }, []);
-  return u({
+  return c({
     type: "STUDENT_MOUSE_POINTER_POSITION_CHANGED",
     onMessage: d
   }), p !== "TEACHER" || e === -1 || r === e ? {

package/dist/features/worksheet/user-pointer-pin/hooks/use-user-location.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-user-location.js","sources":["../../../../../src/features/worksheet/user-pointer-pin/hooks/use-user-location.ts"],"sourcesContent":["import { useAVMessage } from '@cuemath/av';\nimport { useCallback, useMemo, useState } from 'react';\n\nimport type { TUserTypes } from '../../../ui/types';\nimport type { IWorksheetQuestion } from '../../worksheet/worksheet-types';\n\ninterface IUseRemoteUserLocationProps {\n  questions: IWorksheetQuestion[];\n  activeQuestionIndex: number;\n  userType?: TUserTypes;\n}\n\ntype TpointerLocation = 'up' | 'down' | undefined;\n\ninterface IUseRemoteUserLocation {\n  peerLocation: TpointerLocation;\n  peerQuestionIndex: number | undefined;\n  peerItemNumber: number | undefined;\n}\n\nconst useRemoteUserLocation = ({\n  questions,\n  activeQuestionIndex,\n  userType,\n}: IUseRemoteUserLocationProps): IUseRemoteUserLocation => {\n  const [peerResponseId, setPeerResponseId] = useState<string | undefined>();\n  const peerQuestionIndex = useMemo(\n    () => questions.findIndex(qs => qs.response_id === peerResponseId),\n    [peerResponseId, questions],\n  );\n  const onPointerReceive = useCallback((_: string, data: Record<string, unknown>) => {\n    setPeerResponseId(data.id as string);\n  }, []);\n\n  useAVMessage<Record<string, unknown>>({\n    type: 'STUDENT_MOUSE_POINTER_POSITION_CHANGED',\n    onMessage: onPointerReceive,\n  });\n\n  if (\n    userType !== 'TEACHER' ||\n    peerQuestionIndex === -1 ||\n    activeQuestionIndex === peerQuestionIndex\n  ) {\n    return {\n      peerLocation: undefined,\n      peerQuestionIndex: undefined,\n      peerItemNumber: undefined,\n    };\n  }\n\n  return {\n    peerLocation: peerQuestionIndex > activeQuestionIndex ? 'down' : 'up',\n    peerQuestionIndex,\n    peerItemNumber: questions[peerQuestionIndex]?.item_number,\n  };\n};\n\nexport default useRemoteUserLocation;\n"],"names":["useRemoteUserLocation","questions","activeQuestionIndex","userType","peerResponseId","setPeerResponseId","useState","peerQuestionIndex","useMemo","qs","onPointerReceive","useCallback","_","data","useAVMessage","_a"],"mappings":";;AAoBA,MAAMA,IAAwB,CAAC;AAAA,EAC7B,WAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,UAAAC;AACF,MAA2D;;AACzD,QAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAA6B,GACnEC,IAAoBC;AAAA,IACxB,MAAMP,EAAU,UAAU,CAAMQ,MAAAA,EAAG,gBAAgBL,CAAc;AAAA,IACjE,CAACA,GAAgBH,CAAS;AAAA,EAAA,GAEtBS,IAAmBC,EAAY,CAACC,GAAWC,MAAkC;AACjF,IAAAR,EAAkBQ,EAAK,EAAY;AAAA,EACrC,GAAG,CAAE,CAAA;AAOL,SALsCC,EAAA;AAAA,IACpC,MAAM;AAAA,IACN,WAAWJ;AAAA,EAAA,CACZ,GAGCP,MAAa,aACbI,MAAsB,MACtBL,MAAwBK,IAEjB;AAAA,IACL,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,EAAA,IAIb;AAAA,IACL,cAAcA,IAAoBL,IAAsB,SAAS;AAAA,IACjE,mBAAAK;AAAA,IACA,iBAAgBQ,IAAAd,EAAUM,CAAiB,MAA3B,gBAAAQ,EAA8B;AAAA,EAAA;AAElD;"}
+{"version":3,"file":"use-user-location.js","sources":["../../../../../src/features/worksheet/user-pointer-pin/hooks/use-user-location.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\n\nimport { useAVMessage } from '@cuemath/av';\n\nimport type { TUserTypes } from '../../../ui/types';\nimport type { IWorksheetQuestion } from '../../worksheet/worksheet-types';\n\ninterface IUseRemoteUserLocationProps {\n  questions: IWorksheetQuestion[];\n  activeQuestionIndex: number;\n  userType?: TUserTypes;\n}\n\ntype TpointerLocation = 'up' | 'down' | undefined;\n\ninterface IUseRemoteUserLocation {\n  peerLocation: TpointerLocation;\n  peerQuestionIndex: number | undefined;\n  peerItemNumber: number | undefined;\n}\n\nconst useRemoteUserLocation = ({\n  questions,\n  activeQuestionIndex,\n  userType,\n}: IUseRemoteUserLocationProps): IUseRemoteUserLocation => {\n  const [peerResponseId, setPeerResponseId] = useState<string | undefined>();\n  const peerQuestionIndex = useMemo(\n    () => questions.findIndex(qs => qs.response_id === peerResponseId),\n    [peerResponseId, questions],\n  );\n  const onPointerReceive = useCallback((_: string, data: Record<string, unknown>) => {\n    setPeerResponseId(data.id as string);\n  }, []);\n\n  useAVMessage<Record<string, unknown>>({\n    type: 'STUDENT_MOUSE_POINTER_POSITION_CHANGED',\n    onMessage: onPointerReceive,\n  });\n\n  if (\n    userType !== 'TEACHER' ||\n    peerQuestionIndex === -1 ||\n    activeQuestionIndex === peerQuestionIndex\n  ) {\n    return {\n      peerLocation: undefined,\n      peerQuestionIndex: undefined,\n      peerItemNumber: undefined,\n    };\n  }\n\n  return {\n    peerLocation: peerQuestionIndex > activeQuestionIndex ? 'down' : 'up',\n    peerQuestionIndex,\n    peerItemNumber: questions[peerQuestionIndex]?.item_number,\n  };\n};\n\nexport default useRemoteUserLocation;\n"],"names":["useRemoteUserLocation","questions","activeQuestionIndex","userType","peerResponseId","setPeerResponseId","useState","peerQuestionIndex","useMemo","qs","onPointerReceive","useCallback","_","data","useAVMessage","_a"],"mappings":";;AAqBA,MAAMA,IAAwB,CAAC;AAAA,EAC7B,WAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,UAAAC;AACF,MAA2D;;AACzD,QAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAA6B,GACnEC,IAAoBC;AAAA,IACxB,MAAMP,EAAU,UAAU,CAAMQ,MAAAA,EAAG,gBAAgBL,CAAc;AAAA,IACjE,CAACA,GAAgBH,CAAS;AAAA,EAAA,GAEtBS,IAAmBC,EAAY,CAACC,GAAWC,MAAkC;AACjF,IAAAR,EAAkBQ,EAAK,EAAY;AAAA,EACrC,GAAG,CAAE,CAAA;AAOL,SALsCC,EAAA;AAAA,IACpC,MAAM;AAAA,IACN,WAAWJ;AAAA,EAAA,CACZ,GAGCP,MAAa,aACbI,MAAsB,MACtBL,MAAwBK,IAEjB;AAAA,IACL,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,EAAA,IAIb;AAAA,IACL,cAAcA,IAAoBL,IAAsB,SAAS;AAAA,IACjE,mBAAAK;AAAA,IACA,iBAAgBQ,IAAAd,EAAUM,CAAiB,MAA3B,gBAAAQ,EAA8B;AAAA,EAAA;AAElD;"}

package/dist/index.d.ts

@@ -28,7 +28,6 @@ import { NamedExoticComponent } from 'react';
 import { Omit as Omit_2 } from 'google-maps-react';
 import type { PLUGIN_NAME } from '@cuemath/analytics-v2/dist/constants';
 import { PropsWithChildren } from 'react';
-import { default as React_2 } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
@@ -422,9 +421,9 @@ export declare const CueBoardFilledIcon: FC<SVGProps<SVGSVGElement>>;
 
 export declare const CueBoardIcon: FC<SVGProps<SVGSVGElement>>;
 
-export declare const CueCanvas: React_2.FC<ICueCanvas>;
+export declare const CueCanvas: FC<ICueCanvas>;
 
-export declare const CueCanvasController: React_2.FC<IToolbarProps>;
+export declare const CueCanvasController: FC<IToolbarProps>;
 
 export declare const CueCanvasHomeworkController: NamedExoticComponent<IHomeWorkControllerProps>;
 
@@ -785,7 +784,7 @@ export declare const HintFillIcon: FC<SVGProps<SVGSVGElement>>;
 
 export declare const HomeIcon: FC<SVGProps<SVGSVGElement>>;
 
-export declare const HomeworkCardList: React_2.NamedExoticComponent<HWCardListProps>;
+export declare const HomeworkCardList: NamedExoticComponent<HWCardListProps>;
 
 declare const hues: readonly ["YELLOW", "ORANGE", "PURPLE", "GREEN", "BLUE"];
 
@@ -796,7 +795,7 @@ declare interface HWCardListProps extends INodeCardCallbacks {
     onTestPreview?: (sheetData: INodeDataProps, milestoneId?: string) => void;
     onTestStart?: (sheetData: INodeDataProps, homeworkId?: string) => void;
     onTestReview?: (sheetData: INodeDataProps, milestoneId?: string) => void;
-    homeworkRef?: React_2.RefObject<HTMLDivElement>;
+    homeworkRef?: React.RefObject<HTMLDivElement>;
     startHomePageJourney?: ({ studentId, stream, userType }: IHomepageStartJourneyProps) => void;
     canStartJourney?: boolean;
     canStartPuzzleAssignedJourney?: boolean;
@@ -3574,13 +3573,6 @@ declare interface ISessionInsightsQuery {
     student_name: string;
 }
 
-declare interface IShareInstructionModalProps {
-    milestoneAchievementId: string;
-    studentName: string;
-    onSubmit: () => void;
-    onError: (errorMessage: string) => void;
-}
-
 declare interface IShareInstructionModalProps {
     milestoneAchievementId: string;
     selectedAssetId: string;
@@ -5170,7 +5162,7 @@ export declare enum NODE_TYPES {
     'PUZZLE_CARD' = "PUZZLE_CARD"
 }
 
-declare const Notification_2: React.FC<NotificationProps>;
+declare const Notification_2: FC<NotificationProps>;
 export { Notification_2 as Notification }
 
 declare interface NotificationProps {
@@ -5680,7 +5672,7 @@ export declare const StudentProfileSummaryModal: MemoExoticComponent<() => JSX.E
 
 export declare const StudentTrialReportModal: MemoExoticComponent<() => JSX.Element>;
 
-export declare const SubmitMilestoneModal: React.FC<ISubmitModalProps>;
+export declare const SubmitMilestoneModal: FC<ISubmitModalProps>;
 
 export declare const SwitchIcon: FC<SVGProps<SVGSVGElement>>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.5.1",
+  "version": "3.5.2",
   "type": "module",
   "files": [
     "dist"
@@ -37,7 +37,7 @@
     "@100mslive/hms-video-store": "0.10.8",
     "@cuemath/av": "2.0.0",
     "@cuemath/cue-message-broker": "1.0.37",
-    "@cuemath/eslint-config": "2.1.0",
+    "@cuemath/eslint-config": "2.2.0",
     "@cuemath/prettier-config": "1.0.4",
     "@cuemath/rest-api": "0.0.7",
     "@cuemath/ts-config": "2.0.0",
@@ -89,6 +89,5 @@
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-svgr": "3.2.0",
     "vite-tsconfig-paths": "^4.2.2"
-  },
-  "packageManager": "yarn@4.9.2"
+  }
 }