@cuemath/leap 2.8.61-as17 → 2.8.61-as2

package/dist/features/homework/hw-card-list/hw-card-list.js

@@ -1,182 +1,105 @@
-import { jsxs as s, jsx as t, Fragment as J } from "react/jsx-runtime";
-import { useRef as D, useState as a, useCallback as n, useEffect as d } from "react";
-import ee from "../../../assets/line-icons/icons/chevron-left.js";
-import te from "../../../assets/line-icons/icons/chevron-right.js";
-import { getTopicsFromItems as oe } from "../../milestone/milestone-tests/tests-list/test-sheets-list/test-sheet-item/test-sheet-item-utils.js";
-import g from "../../ui/layout/flex-view.js";
-import $ from "../../ui/text/text.js";
-import re from "../homework-card.js";
-import { useGetHomeworks as ne } from "./api/get-homeworks.js";
-import { ContentWrapper as ie, HoverZone as k, ScrollButton as b, ScrollContainer as le, QueueWrapper as se, QueueText as ce } from "./hw-card-list-styled.js";
-const he = ({
-  userType: _ = "STUDENT",
-  studentId: f,
-  stream: p,
-  onTestStart: w,
-  onNodeAttempt: R,
-  onTestPreview: A,
-  onNodeView: E,
-  onTestReview: S,
-  onNodeReview: x,
-  onNodeUnassign: I
+import { jsxs as p, jsx as o, Fragment as _ } from "react/jsx-runtime";
+import { h as E } from "../../../node_modules/humanize-plus/dist/humanize.js";
+import { useRef as F, useState as I, useCallback as t, useEffect as M } from "react";
+import f from "styled-components";
+import L from "../../../assets/line-icons/icons/chevron-right.js";
+import { getTopicsFromItems as R } from "../../milestone/milestone-tests/tests-list/test-sheets-list/test-sheet-item/test-sheet-item-utils.js";
+import n from "../../ui/layout/flex-view.js";
+import j from "../../ui/separator/separator.js";
+import A from "../homework-card.js";
+import { useGetHomeworks as q } from "./api/get-homeworks.js";
+const B = f.div`
+  display: flex;
+  overflow-x: auto;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+  padding: 16px 0;
+
+  &::-webkit-scrollbar {
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+`, D = f(n)`
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 32px;
+  cursor: pointer;
+  transition: opacity 0.3s ease-in-out;
+  opacity: ${({ $visible: e }) => e ? 1 : 0};
+  pointer-events: ${({ $visible: e }) => e ? "auto" : "none"};
+
+  path {
+    fill: ${({ theme: e }) => e.colors.WHITE};
+  }
+`, W = ({
+  userType: e = "STUDENT",
+  studentId: a,
+  stream: l,
+  ...w
 }) => {
-  const r = D(null), [T, v] = a(!1), [y, C] = a(!1), [B, W] = a(!1), [N, j] = a(!0), {
-    get: L,
-    data: e,
-    isProcessingFailed: F,
-    isProcessing: u,
-    isStale: H
-  } = ne(f), K = n(() => {
-    r.current && r.current.scrollBy({ left: -200, behavior: "smooth" });
-  }, []), M = n(() => {
+  const r = F(null), [b, c] = I(!1), $ = t(() => {
+    requestAnimationFrame(() => c(!0));
+  }, []), g = t(() => {
+    requestAnimationFrame(() => c(!1));
+  }, []), k = t(() => {
     r.current && r.current.scrollBy({ left: 200, behavior: "smooth" });
-  }, []), G = n(() => {
-    v(!0);
-  }, []), P = n(() => {
-    v(!1);
-  }, []), Q = n(() => {
-    C(!0);
-  }, []), X = n(() => {
-    C(!1);
-  }, []), i = n(() => {
-    if (r.current) {
-      const { scrollLeft: o, scrollWidth: l, clientWidth: m } = r.current;
-      W(o > 10), j(o < l - m - 10);
-    }
-  }, []);
-  d(() => {
-    const o = r.current;
-    if (o)
-      return o.addEventListener("scroll", i), i(), () => {
-        o.removeEventListener("scroll", i);
-      };
-  }, [i]), d(() => {
-    i();
-  }, [e, i]);
-  const c = n(() => {
-    L(f, void 0, { stream: p });
-  }, [L, p, f]);
-  d(() => {
-    !u && H && c();
-  }, [c, u, H]), d(() => {
-    c();
-  }, [c]);
-  const O = ((e == null ? void 0 : e.filter((o) => o.state === "WAIT_FOR_REVIEW")) || []).length;
-  return e && e.length === 0 ? /* @__PURE__ */ s(g, { $flexRowGapX: 1, children: [
-    /* @__PURE__ */ s($, { $renderAs: "ac4-black", $color: "BLACK_T_60", children: [
-      "Homework (",
-      e == null ? void 0 : e.length,
-      ")"
-    ] }),
-    /* @__PURE__ */ t($, { $renderAs: "ab2", $color: "BLACK_T_60", children: "No Homework assigned yet" })
-  ] }) : F ? null : /* @__PURE__ */ s(ie, { $flexRowGapX: 1, $disablePointerEvents: u, children: [
-    /* @__PURE__ */ s($, { $renderAs: "ac4-black", $color: "BLACK_T_60", children: [
-      "Homework (",
-      O,
-      "/",
-      e == null ? void 0 : e.length,
-      ")"
-    ] }),
-    /* @__PURE__ */ s(g, { $position: "relative", onMouseEnter: i, children: [
-      B && /* @__PURE__ */ t(
-        k,
-        {
-          $position: "absolute",
-          $width: "60px",
-          left: "0",
-          right: "auto",
-          onMouseEnter: G,
-          onMouseLeave: P,
-          children: /* @__PURE__ */ t(
-            b,
-            {
-              $position: "absolute",
-              $background: "BLACK_T_60",
-              $justifyContent: "center",
-              $alignItems: "center",
-              $height: "100%",
-              onClick: K,
-              $visible: T,
-              left: "0px",
-              right: "auto",
-              children: /* @__PURE__ */ t(ee, { width: 24, height: 24 })
-            }
-          )
-        },
-        "left-hover-zone"
-      ),
-      /* @__PURE__ */ t(le, { ref: r, children: /* @__PURE__ */ t(g, { $flexDirection: "row", $flexGapX: 1, children: e == null ? void 0 : e.map((o, l) => {
-        const {
-          items: m,
-          node_id: V,
-          worksheet_id: z,
-          node_type: U,
-          title: Y,
-          subtext: Z
-        } = o, q = oe(m).join(", "), h = U === "DYNAMIC";
-        return /* @__PURE__ */ s(J, { children: [
-          e.length > 10 && l === 10 && /* @__PURE__ */ t(
-            se,
-            {
-              $widthX: 9.5,
-              $background: "BLACK_4",
-              $justifyContent: "center",
-              $gutter: 4,
-              $gap: 8,
-              children: /* @__PURE__ */ t(ce, { $renderAs: "ac3", $color: "WHITE", children: "In Queue" })
-            }
-          ),
-          /* @__PURE__ */ t(
-            re,
-            {
-              isInQueue: e.length > 10 && l > 9,
-              userType: _,
-              header: h ? q : Y,
-              subHeader: Z || "",
-              nodeData: o,
-              renderAs: "homework",
-              onNodeAttempt: h ? w : R,
-              shouldOpenOnRight: e.length > 3 && l === e.length - 1,
-              onNodeView: h ? A : E,
-              onNodeReview: h ? S : x,
-              onNodeUnassign: I
-            },
-            `${z}_${V}_${l}`
-          )
-        ] });
-      }) }) }),
-      N && /* @__PURE__ */ t(
-        k,
-        {
-          $position: "absolute",
-          $width: "60px",
-          right: "0",
-          left: "auto",
-          onMouseEnter: Q,
-          onMouseLeave: X,
-          children: /* @__PURE__ */ t(
-            b,
-            {
-              $position: "absolute",
-              $width: "60px",
-              $height: "100%",
-              $background: "BLACK_T_60",
-              $justifyContent: "center",
-              $alignItems: "center",
-              onClick: M,
-              $visible: y,
-              left: "auto",
-              right: "0px",
-              children: /* @__PURE__ */ t(te, { width: 24, height: 24 })
-            }
-          )
-        },
-        "right-hover-zone"
-      )
-    ] })
+  }, []), { get: h, data: i, isProcessingFailed: v } = q(), m = t(() => {
+    h(a, void 0, { stream: l });
+  }, [h, l, a]);
+  return M(() => {
+    m();
+  }, [m]), v ? null : /* @__PURE__ */ p(n, { $position: "relative", onMouseEnter: $, onMouseLeave: g, children: [
+    /* @__PURE__ */ o(B, { ref: r, children: /* @__PURE__ */ o(n, { $flexDirection: "row", $flexRowGapX: 1, children: i == null ? void 0 : i.map((d) => {
+      const {
+        items: x,
+        node_id: C,
+        sheet_time: u,
+        total_questions: s,
+        worksheet_id: H
+      } = d, y = u && Math.ceil(u / 60) || 0, S = R(x).join(", "), T = `${typeof s == "number" ? `${s} ${E.pluralize(s, "Question")}, ` : ""}${y} Mins`;
+      return /* @__PURE__ */ p(_, { children: [
+        /* @__PURE__ */ o(
+          A,
+          {
+            userType: e,
+            header: S,
+            subHeader: T,
+            nodeData: d,
+            renderAs: "homework",
+            ...w
+          },
+          `${H}_${C}`
+        ),
+        /* @__PURE__ */ o(j, { width: 16 })
+      ] });
+    }) }) }),
+    /* @__PURE__ */ o(
+      D,
+      {
+        $position: "absolute",
+        $width: "100%",
+        $height: 1,
+        $background: "BLACK_T_60",
+        $justifyContent: "center",
+        $alignItems: "center",
+        onClick: k,
+        $visible: b,
+        children: /* @__PURE__ */ o(L, { width: 24, height: 24 })
+      }
+    )
   ] });
-}, He = he;
+}, Y = W;
 export {
-  He as default
+  Y as default
 };
 //# sourceMappingURL=hw-card-list.js.map

package/dist/features/homework/hw-card-list/hw-card-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"hw-card-list.js","sources":["../../../../src/features/homework/hw-card-list/hw-card-list.tsx"],"sourcesContent":["import type {\n  INodeCardCallbacks,\n  INodeDataProps,\n} from '../../chapters-v2/comps/node-card/node-card-types';\nimport type { TUserTypes } from '../../ui/types';\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport ChevronLeftIcon from '../../../assets/line-icons/icons/chevron-left';\nimport ChevronRightIcon from '../../../assets/line-icons/icons/chevron-right';\nimport { getTopicsFromItems } from '../../milestone/milestone-tests/tests-list/test-sheets-list/test-sheet-item/test-sheet-item-utils';\nimport FlexView from '../../ui/layout/flex-view';\nimport Text from '../../ui/text/text';\nimport HomeworkCard from '../homework-card';\nimport { useGetHomeworks } from './api/get-homeworks';\nimport * as Styled from './hw-card-list-styled';\n\ninterface HWCardListProps extends INodeCardCallbacks {\n  userType: TUserTypes;\n  studentId: string;\n  stream: string;\n  onTestPreview?: (sheetData: INodeDataProps, milestoneId?: string) => void;\n  onTestStart?: (sheetData: INodeDataProps) => void;\n  onTestReview?: (sheetData: INodeDataProps, milestoneId?: string) => void;\n}\n\nconst HWCardList: React.FC<HWCardListProps> = ({\n  userType = 'STUDENT',\n  studentId,\n  stream,\n  onTestStart,\n  onNodeAttempt,\n  onTestPreview,\n  onNodeView,\n  onTestReview,\n  onNodeReview,\n  onNodeUnassign,\n}) => {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const [isLeftHovered, setIsLeftHovered] = useState(false);\n  const [isRightHovered, setIsRightHovered] = useState(false);\n  const [canScrollLeft, setCanScrollLeft] = useState(false);\n  const [canScrollRight, setCanScrollRight] = useState(true);\n  const {\n    get: getHomeworks,\n    data: hwDetails,\n    isProcessingFailed,\n    isProcessing,\n    isStale,\n  } = useGetHomeworks(studentId);\n\n  const handleScrollLeft = useCallback(() => {\n    if (scrollRef.current) {\n      scrollRef.current.scrollBy({ left: -200, behavior: 'smooth' });\n    }\n  }, []);\n\n  const handleScrollRight = useCallback(() => {\n    if (scrollRef.current) {\n      scrollRef.current.scrollBy({ left: 200, behavior: 'smooth' });\n    }\n  }, []);\n\n  const handleLeftHoverEnter = useCallback(() => {\n    setIsLeftHovered(true);\n  }, []);\n\n  const handleLeftHoverLeave = useCallback(() => {\n    setIsLeftHovered(false);\n  }, []);\n\n  const handleRightHoverEnter = useCallback(() => {\n    setIsRightHovered(true);\n  }, []);\n\n  const handleRightHoverLeave = useCallback(() => {\n    setIsRightHovered(false);\n  }, []);\n\n  const checkScrollPosition = useCallback(() => {\n    if (scrollRef.current) {\n      const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;\n\n      setCanScrollLeft(scrollLeft > 10);\n      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10);\n    }\n  }, []);\n\n  useEffect(() => {\n    const scrollElement = scrollRef.current;\n\n    if (scrollElement) {\n      scrollElement.addEventListener('scroll', checkScrollPosition);\n      checkScrollPosition();\n\n      return () => {\n        scrollElement.removeEventListener('scroll', checkScrollPosition);\n      };\n    }\n  }, [checkScrollPosition]);\n\n  // Also check when content changes\n  useEffect(() => {\n    checkScrollPosition();\n  }, [hwDetails, checkScrollPosition]);\n\n  const fetchHomeworks = useCallback(() => {\n    getHomeworks(studentId, undefined, { stream });\n  }, [getHomeworks, stream, studentId]);\n\n  useEffect(() => {\n    if (!isProcessing && isStale) {\n      fetchHomeworks();\n    }\n  }, [fetchHomeworks, isProcessing, isStale]);\n\n  useEffect(() => {\n    fetchHomeworks();\n  }, [fetchHomeworks]);\n\n  const waitForReviewSheets = (hwDetails?.filter(sheet => sheet.state === 'WAIT_FOR_REVIEW') || [])\n    .length;\n\n  if (hwDetails && hwDetails.length === 0) {\n    return (\n      <FlexView $flexRowGapX={1}>\n        <Text $renderAs=\"ac4-black\" $color=\"BLACK_T_60\">\n          Homework ({hwDetails?.length})\n        </Text>\n        <Text $renderAs=\"ab2\" $color=\"BLACK_T_60\">\n          No Homework assigned yet\n        </Text>\n      </FlexView>\n    );\n  }\n\n  if (isProcessingFailed) {\n    return null;\n  }\n\n  return (\n    <Styled.ContentWrapper $flexRowGapX={1} $disablePointerEvents={isProcessing}>\n      <Text $renderAs=\"ac4-black\" $color=\"BLACK_T_60\">\n        Homework ({waitForReviewSheets}/{hwDetails?.length})\n      </Text>\n      <FlexView $position=\"relative\" onMouseEnter={checkScrollPosition}>\n        {/* Left hover zone */}\n        {canScrollLeft && (\n          <Styled.HoverZone\n            key=\"left-hover-zone\"\n            $position=\"absolute\"\n            $width=\"60px\"\n            left=\"0\"\n            right=\"auto\"\n            onMouseEnter={handleLeftHoverEnter}\n            onMouseLeave={handleLeftHoverLeave}\n          >\n            {/* Left scroll button - only visible when hovered */}\n            <Styled.ScrollButton\n              $position=\"absolute\"\n              $background=\"BLACK_T_60\"\n              $justifyContent=\"center\"\n              $alignItems=\"center\"\n              $height=\"100%\"\n              onClick={handleScrollLeft}\n              $visible={isLeftHovered}\n              left=\"0px\"\n              right=\"auto\"\n            >\n              <ChevronLeftIcon width={24} height={24} />\n            </Styled.ScrollButton>\n          </Styled.HoverZone>\n        )}\n\n        <Styled.ScrollContainer ref={scrollRef}>\n          <FlexView $flexDirection=\"row\" $flexGapX={1}>\n            {hwDetails?.map((sheet, idx) => {\n              const {\n                items,\n                node_id: nodeId,\n                worksheet_id: worksheetId,\n                node_type: nodeType,\n                title,\n                subtext,\n              } = sheet;\n              const topics = getTopicsFromItems(items);\n              const testChapterName = topics.join(', ');\n              const isDynamicSheet = nodeType === 'DYNAMIC';\n\n              return (\n                <>\n                  {hwDetails.length > 10 && idx === 10 && (\n                    <Styled.QueueWrapper\n                      $widthX={9.5}\n                      $background=\"BLACK_4\"\n                      $justifyContent=\"center\"\n                      $gutter={4}\n                      $gap={8}\n                    >\n                      <Styled.QueueText $renderAs=\"ac3\" $color=\"WHITE\">\n                        In Queue\n                      </Styled.QueueText>\n                    </Styled.QueueWrapper>\n                  )}\n                  <HomeworkCard\n                    isInQueue={hwDetails.length > 10 && idx > 9}\n                    key={`${worksheetId}_${nodeId}_${idx}`}\n                    userType={userType}\n                    header={isDynamicSheet ? testChapterName : title}\n                    subHeader={subtext || ''}\n                    nodeData={sheet}\n                    renderAs=\"homework\"\n                    onNodeAttempt={isDynamicSheet ? onTestStart : onNodeAttempt}\n                    shouldOpenOnRight={hwDetails.length > 3 && idx === hwDetails.length - 1}\n                    onNodeView={isDynamicSheet ? onTestPreview : onNodeView}\n                    onNodeReview={isDynamicSheet ? onTestReview : onNodeReview}\n                    onNodeUnassign={onNodeUnassign}\n                  />\n                </>\n              );\n            })}\n          </FlexView>\n        </Styled.ScrollContainer>\n\n        {/* Right hover zone */}\n        {canScrollRight && (\n          <Styled.HoverZone\n            key=\"right-hover-zone\"\n            $position=\"absolute\"\n            $width=\"60px\"\n            right=\"0\"\n            left=\"auto\"\n            onMouseEnter={handleRightHoverEnter}\n            onMouseLeave={handleRightHoverLeave}\n          >\n            {/* Right scroll button - only visible when hovered */}\n            <Styled.ScrollButton\n              $position=\"absolute\"\n              $width=\"60px\"\n              $height=\"100%\"\n              $background=\"BLACK_T_60\"\n              $justifyContent=\"center\"\n              $alignItems=\"center\"\n              onClick={handleScrollRight}\n              $visible={isRightHovered}\n              left=\"auto\"\n              right=\"0px\"\n            >\n              <ChevronRightIcon width={24} height={24} />\n            </Styled.ScrollButton>\n          </Styled.HoverZone>\n        )}\n      </FlexView>\n    </Styled.ContentWrapper>\n  );\n};\n\nexport default HWCardList;\n"],"names":["HWCardList","userType","studentId","stream","onTestStart","onNodeAttempt","onTestPreview","onNodeView","onTestReview","onNodeReview","onNodeUnassign","scrollRef","useRef","isLeftHovered","setIsLeftHovered","useState","isRightHovered","setIsRightHovered","canScrollLeft","setCanScrollLeft","canScrollRight","setCanScrollRight","getHomeworks","hwDetails","isProcessingFailed","isProcessing","isStale","useGetHomeworks","handleScrollLeft","useCallback","handleScrollRight","handleLeftHoverEnter","handleLeftHoverLeave","handleRightHoverEnter","handleRightHoverLeave","checkScrollPosition","scrollLeft","scrollWidth","clientWidth","useEffect","scrollElement","fetchHomeworks","waitForReviewSheets","sheet","jsxs","FlexView","Text","Styled.ContentWrapper","jsx","Styled.HoverZone","Styled.ScrollButton","ChevronLeftIcon","Styled.ScrollContainer","idx","items","nodeId","worksheetId","nodeType","title","subtext","testChapterName","getTopicsFromItems","isDynamicSheet","Fragment","Styled.QueueWrapper","Styled.QueueText","HomeworkCard","ChevronRightIcon","HWCardList$1"],"mappings":"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"}
+{"version":3,"file":"hw-card-list.js","sources":["../../../../src/features/homework/hw-card-list/hw-card-list.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\n\nimport { pluralize } from 'humanize-plus';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport ChevronRightIcon from '../../../assets/line-icons/icons/chevron-right';\nimport { getTopicsFromItems } from '../../milestone/milestone-tests/tests-list/test-sheets-list/test-sheet-item/test-sheet-item-utils';\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport HomeworkCard from '../homework-card';\nimport { useGetHomeworks } from './api/get-homeworks';\n\ninterface HWCardListProps {\n  userType: TUserTypes;\n  studentId: string;\n  stream: string;\n}\n\nconst ScrollContainer = styled.div`\n  display: flex;\n  overflow-x: auto;\n  white-space: nowrap;\n  -webkit-overflow-scrolling: touch;\n  scrollbar-width: thin;\n  padding: 16px 0;\n\n  &::-webkit-scrollbar {\n    height: 6px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #888;\n    border-radius: 4px;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background: #555;\n  }\n`;\n\nconst ScrollButton = styled(FlexView)<{ $visible: boolean }>`\n  right: 0;\n  top: 0;\n  height: 100%;\n  width: 32px;\n  cursor: pointer;\n  transition: opacity 0.3s ease-in-out;\n  opacity: ${({ $visible }) => ($visible ? 1 : 0)};\n  pointer-events: ${({ $visible }) => ($visible ? 'auto' : 'none')};\n\n  path {\n    fill: ${({ theme }) => theme.colors.WHITE};\n  }\n`;\n\nconst HWCardList: React.FC<HWCardListProps> = ({\n  userType = 'STUDENT',\n  studentId,\n  stream,\n  ...sheetCallbacks\n}) => {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleMouseEnter = useCallback(() => {\n    requestAnimationFrame(() => setIsHovered(true));\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    requestAnimationFrame(() => setIsHovered(false));\n  }, []);\n\n  const handleScrollRight = useCallback(() => {\n    if (scrollRef.current) {\n      scrollRef.current.scrollBy({ left: 200, behavior: 'smooth' });\n    }\n  }, []);\n\n  const { get: getHomeworks, data: hwDetails, isProcessingFailed } = useGetHomeworks();\n\n  const fetchChapterDetails = useCallback(() => {\n    getHomeworks(studentId, undefined, { stream });\n  }, [getHomeworks, stream, studentId]);\n\n  useEffect(() => {\n    fetchChapterDetails();\n  }, [fetchChapterDetails]);\n\n  if (isProcessingFailed) {\n    return null;\n  }\n\n  return (\n    <FlexView $position=\"relative\" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n      <ScrollContainer ref={scrollRef}>\n        <FlexView $flexDirection=\"row\" $flexRowGapX={1}>\n          {hwDetails?.map(sheet => {\n            const {\n              items,\n              node_id: nodeId,\n              sheet_time: sheetTime,\n              total_questions: totalQuestions,\n              worksheet_id: worksheetId,\n            } = sheet;\n            const totalSheetTime = (sheetTime && Math.ceil(sheetTime / 60)) || 0;\n            const topics = getTopicsFromItems(items);\n            const testChapterName = topics.join(', ');\n            const subHeader = `${\n              typeof totalQuestions === 'number'\n                ? `${totalQuestions} ${pluralize(totalQuestions, 'Question')}, `\n                : ''\n            }${totalSheetTime} Mins`;\n\n            return (\n              <>\n                <HomeworkCard\n                  key={`${worksheetId}_${nodeId}`}\n                  userType={userType}\n                  header={testChapterName}\n                  subHeader={subHeader}\n                  nodeData={sheet}\n                  renderAs=\"homework\"\n                  {...sheetCallbacks}\n                />\n                <Separator width={16} />\n              </>\n            );\n          })}\n        </FlexView>\n      </ScrollContainer>\n\n      <ScrollButton\n        $position=\"absolute\"\n        $width=\"100%\"\n        $height={1}\n        $background=\"BLACK_T_60\"\n        $justifyContent=\"center\"\n        $alignItems=\"center\"\n        onClick={handleScrollRight}\n        $visible={isHovered}\n      >\n        <ChevronRightIcon width={24} height={24} />\n      </ScrollButton>\n    </FlexView>\n  );\n};\n\nexport default HWCardList;\n"],"names":["ScrollContainer","styled","ScrollButton","FlexView","$visible","theme","HWCardList","userType","studentId","stream","sheetCallbacks","scrollRef","useRef","isHovered","setIsHovered","useState","handleMouseEnter","useCallback","handleMouseLeave","handleScrollRight","getHomeworks","hwDetails","isProcessingFailed","useGetHomeworks","fetchChapterDetails","useEffect","jsx","sheet","items","nodeId","sheetTime","totalQuestions","worksheetId","totalSheetTime","testChapterName","getTopicsFromItems","subHeader","pluralize","jsxs","Fragment","HomeworkCard","Separator","ChevronRightIcon","HWCardList$1"],"mappings":"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"}

package/dist/features/homework/styles.js

@@ -1,7 +1,7 @@
 import r from "styled-components";
-import n from "../../assets/line-icons/icons/minus2.js";
+import i from "../../assets/line-icons/icons/minus2.js";
 import e from "../ui/layout/flex-view.js";
-import i from "../ui/text/text.js";
+import n from "../ui/text/text.js";
 const l = r(e)(({ theme: o }) => `
     cursor: pointer;
     width: 24px;
@@ -12,28 +12,31 @@ const l = r(e)(({ theme: o }) => `
       border-radius: 50%;
       background: ${o.colors.WHITE_5}; 
     }
-  `), d = r(i)`
+  `), d = r(n)`
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-`, u = r(e)(({
-  $shouldopenonright: o,
+`, x = r(e)(({
+  theme: o,
   $visible: t
 }) => `
     cursor: pointer;
     position: absolute;
     z-index: 6;
     top: calc(100% + 4px);
-    right: ${o ? 0 : "auto"};
+    left: 0;
     transform-origin: top;
     transform: scaleY(${t ? 1 : 0});
     opacity: ${t ? 1 : 0};
     transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.4);
-    z-index: 10;
-  `), x = r(e)`
+    
+    &:hover {
+      border-radius: 50%;
+      background: ${o.colors.WHITE_5}; 
+    }
+  `), u = r(e)`
   border: 1px solid ${({ theme: o }) => o.colors.BLACK_T_15};
 
   &:hover {
@@ -45,7 +48,7 @@ const l = r(e)(({ theme: o }) => `
       background-size: cover;
       background-position: center;
       overflow: hidden;
-    ` : "overflow: hidden;"), h = r(e)`
+    ` : "overflow: hidden;"), f = r(e)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -53,7 +56,7 @@ const l = r(e)(({ theme: o }) => `
   position: absolute;
   right: -18px;
   top: -4px;
-`, f = r.img(({ theme: o }) => {
+`, h = r.img(({ theme: o }) => {
   const { gutter: t } = o.layout;
   return `
     border: 1px solid ${o.colors.BLACK_T_15};
@@ -61,20 +64,24 @@ const l = r(e)(({ theme: o }) => `
     height: ${t * 4}px;
     border-radius: 50%;
   `;
-}), g = r(n)`
+}), g = r(i)`
   path {
     stroke: ${({ theme: o }) => o.colors.WHITE};
   }
-`, m = r(i)`
+`, m = r(n)`
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: break-spaces;
-`;
-r(e)``;
-const k = r(e)(({
+`, k = r(e)`
+  box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.4);
+  position: absolute;
+  top: ${({ $top: o }) => o}px;
+  left: ${({ $left: o }) => o}px;
+  z-index: 10;
+`, v = r(e)(({
   theme: o,
   $disabled: t
 }) => `
@@ -87,7 +94,7 @@ const k = r(e)(({
     path {
       fill: ${o.colors.WHITE_1};
     }
-  `), v = r(i)`
+  `), $ = r(n)`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -98,32 +105,20 @@ const k = r(e)(({
   right: 12px;
   transform-origin: top;
   transform: scaleY(1);
-`, $ = r(e)`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0.5;
-`, y = r(e)`
-  position: absolute;
-  right: 42px;
-  top: 24px;
 `;
 export {
-  f as BannerImage,
+  h as BannerImage,
   w as BannerImageWrapper,
-  $ as BlurContainer,
-  y as BlurFlexView,
-  x as CardContainer,
+  u as CardContainer,
   l as CardKebabMenuWrapper,
-  u as CardMenuOptionsWrapper,
-  k as CardOptionWrapper,
+  x as CardMenuOptionsWrapper,
+  v as CardOptionWrapper,
+  k as CardOptions,
   b as CardWrapper,
   m as HeaderText,
-  h as IconWrapper,
+  f as IconWrapper,
   C as MenuWrapper,
-  v as OptionText,
+  $ as OptionText,
   g as StyledMinus2Icon,
   d as SubHeaderText
 };

package/dist/features/homework/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../src/features/homework/styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport Minus2Icon from '../../assets/line-icons/icons/minus2';\nimport FlexView from '../ui/layout/flex-view';\nimport Text from '../ui/text/text';\n\ninterface ICardWrapperProps {\n  $bgImage: string;\n}\ninterface ICardOptionsMenuWrapperProps {\n  $visible: boolean;\n  $shouldopenonright: boolean;\n}\n\nexport const CardKebabMenuWrapper = styled(FlexView)(({ theme }) => {\n  return `\n    cursor: pointer;\n    width: 24px;\n    height: 24px;\n    \n    \n    &:hover {\n      border-radius: 50%;\n      background: ${theme.colors.WHITE_5}; \n    }\n  `;\n});\n\nexport const SubHeaderText = styled(Text)`\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nexport const CardMenuOptionsWrapper = styled(FlexView)<ICardOptionsMenuWrapperProps>(({\n  $shouldopenonright,\n  $visible,\n}) => {\n  return `\n    cursor: pointer;\n    position: absolute;\n    z-index: 6;\n    top: calc(100% + 4px);\n    right: ${$shouldopenonright ? 0 : 'auto'};\n    transform-origin: top;\n    transform: scaleY(${$visible ? 1 : 0});\n    opacity: ${$visible ? 1 : 0};\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.4);\n    z-index: 10;\n  `;\n});\n\nexport const CardContainer = styled(FlexView)`\n  border: 1px solid ${({ theme }) => theme.colors.BLACK_T_15};\n\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.BLACK};\n  }\n`;\n\nexport const CardWrapper = styled(FlexView)<ICardWrapperProps>(({ $bgImage }) => {\n  if ($bgImage) {\n    return `\n      background-image: url(${$bgImage});\n      background-repeat: no-repeat;\n      background-size: cover;\n      background-position: center;\n      overflow: hidden;\n    `;\n  }\n\n  return 'overflow: hidden;';\n});\n\nexport const IconWrapper = styled(FlexView)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const BannerImageWrapper = styled(FlexView)`\n  position: absolute;\n  right: -18px;\n  top: -4px;\n`;\n\nexport const BannerImage = styled.img(({ theme }) => {\n  const { gutter } = theme.layout;\n\n  return `\n    border: 1px solid ${theme.colors.BLACK_T_15};\n    width: ${gutter * 4}px;\n    height: ${gutter * 4}px;\n    border-radius: 50%;\n  `;\n});\n\nexport const StyledMinus2Icon = styled(Minus2Icon)`\n  path {\n    stroke: ${({ theme }) => theme.colors.WHITE};\n  }\n`;\n\nexport const HeaderText = styled(Text)`\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: break-spaces;\n`;\n\ninterface ICardOptionWrapperProps {\n  $disabled?: boolean;\n}\ninterface ICardOptionsProps {\n  $top: number;\n  $left: number;\n}\n\nexport const CardOptions = styled(FlexView)<ICardOptionsProps>``;\n\nexport const CardOptionWrapper = styled(FlexView)<ICardOptionWrapperProps>(({\n  theme,\n  $disabled,\n}) => {\n  return `\n    cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n    \n    &:hover {\n      background: ${$disabled ? 'transparent' : theme.colors.BLACK};\n    };\n    \n    path {\n      fill: ${theme.colors.WHITE_1};\n    }\n  `;\n});\n\nexport const OptionText = styled(Text)`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nexport const MenuWrapper = styled(FlexView)`\n  position: absolute;\n  z-index: 6;\n  top: calc(100% - 36px);\n  right: 12px;\n  transform-origin: top;\n  transform: scaleY(1);\n`;\n\nexport const BlurContainer = styled(FlexView)`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0.5;\n`;\n\nexport const BlurFlexView = styled(FlexView)`\n  position: absolute;\n  right: 42px;\n  top: 24px;\n`;\n"],"names":["CardKebabMenuWrapper","styled","FlexView","theme","SubHeaderText","Text","CardMenuOptionsWrapper","$shouldopenonright","$visible","CardContainer","CardWrapper","$bgImage","IconWrapper","BannerImageWrapper","BannerImage","gutter","StyledMinus2Icon","Minus2Icon","HeaderText","CardOptionWrapper","$disabled","OptionText","MenuWrapper","BlurContainer","BlurFlexView"],"mappings":";;;;AAcO,MAAMA,IAAuBC,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAC,QAC/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAQWA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC,GAEYC,IAAgBH,EAAOI,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ3BC,IAAyBL,EAAOC,CAAQ,EAAgC,CAAC;AAAA,EACpF,oBAAAK;AAAA,EACA,UAAAC;AACF,MACS;AAAA;AAAA;AAAA;AAAA;AAAA,aAKID,IAAqB,IAAI,MAAM;AAAA;AAAA,wBAEpBC,IAAW,IAAI,CAAC;AAAA,eACzBA,IAAW,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,GAK9B,GAEYC,IAAgBR,EAAOC,CAAQ;AAAA,sBACtB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA,wBAGpC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA,GAI5CO,IAAcT,EAAOC,CAAQ,EAAqB,CAAC,EAAE,UAAAS,QAC5DA,IACK;AAAA,8BACmBA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,QAQ7B,mBACR,GAEYC,IAAcX,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAM7BW,IAAqBZ,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAMpCY,IAAcb,EAAO,IAAI,CAAC,EAAE,OAAAE,QAAY;AAC7C,QAAA,EAAE,QAAAY,EAAO,IAAIZ,EAAM;AAElB,SAAA;AAAA,wBACeA,EAAM,OAAO,UAAU;AAAA,aAClCY,IAAS,CAAC;AAAA,cACTA,IAAS,CAAC;AAAA;AAAA;AAGxB,CAAC,GAEYC,IAAmBf,EAAOgB,CAAU;AAAA;AAAA,cAEnC,CAAC,EAAE,OAAAd,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA,GAIlCe,IAAajB,EAAOI,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBVJ,EAAOC,CAAQ;AAEnC,MAAMiB,IAAoBlB,EAAOC,CAAQ,EAA2B,CAAC;AAAA,EAC1E,OAAAC;AAAA,EACA,WAAAiB;AACF,MACS;AAAA,cACKA,IAAY,gBAAgB,SAAS;AAAA;AAAA;AAAA,oBAG/BA,IAAY,gBAAgBjB,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,cAIpDA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGjC,GAEYkB,IAAapB,EAAOI,CAAI;AAAA;AAAA;AAAA;AAAA,GAMxBiB,IAAcrB,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS7BqB,IAAgBtB,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS/BsB,IAAevB,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"styles.js","sources":["../../../src/features/homework/styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport Minus2Icon from '../../assets/line-icons/icons/minus2';\nimport FlexView from '../ui/layout/flex-view';\nimport Text from '../ui/text/text';\n\ninterface ICardWrapperProps {\n  $bgImage: string;\n}\ninterface ICardOptionsMenuWrapperProps {\n  $visible: boolean;\n}\n\nexport const CardKebabMenuWrapper = styled(FlexView)(({ theme }) => {\n  return `\n    cursor: pointer;\n    width: 24px;\n    height: 24px;\n    \n    \n    &:hover {\n      border-radius: 50%;\n      background: ${theme.colors.WHITE_5}; \n    }\n  `;\n});\n\nexport const SubHeaderText = styled(Text)`\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nexport const CardMenuOptionsWrapper = styled(FlexView)<ICardOptionsMenuWrapperProps>(({\n  theme,\n  $visible,\n}) => {\n  return `\n    cursor: pointer;\n    position: absolute;\n    z-index: 6;\n    top: calc(100% + 4px);\n    left: 0;\n    transform-origin: top;\n    transform: scaleY(${$visible ? 1 : 0});\n    opacity: ${$visible ? 1 : 0};\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n    \n    &:hover {\n      border-radius: 50%;\n      background: ${theme.colors.WHITE_5}; \n    }\n  `;\n});\n\nexport const CardContainer = styled(FlexView)`\n  border: 1px solid ${({ theme }) => theme.colors.BLACK_T_15};\n\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.BLACK};\n  }\n`;\n\nexport const CardWrapper = styled(FlexView)<ICardWrapperProps>(({ $bgImage }) => {\n  if ($bgImage) {\n    return `\n      background-image: url(${$bgImage});\n      background-repeat: no-repeat;\n      background-size: cover;\n      background-position: center;\n      overflow: hidden;\n    `;\n  }\n\n  return 'overflow: hidden;';\n});\n\nexport const IconWrapper = styled(FlexView)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const BannerImageWrapper = styled(FlexView)`\n  position: absolute;\n  right: -18px;\n  top: -4px;\n`;\n\nexport const BannerImage = styled.img(({ theme }) => {\n  const { gutter } = theme.layout;\n\n  return `\n    border: 1px solid ${theme.colors.BLACK_T_15};\n    width: ${gutter * 4}px;\n    height: ${gutter * 4}px;\n    border-radius: 50%;\n  `;\n});\n\nexport const StyledMinus2Icon = styled(Minus2Icon)`\n  path {\n    stroke: ${({ theme }) => theme.colors.WHITE};\n  }\n`;\n\nexport const HeaderText = styled(Text)`\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: break-spaces;\n`;\n\ninterface ICardOptionWrapperProps {\n  $disabled?: boolean;\n}\ninterface ICardOptionsProps {\n  $top: number;\n  $left: number;\n}\n\nexport const CardOptions = styled(FlexView)<ICardOptionsProps>`\n  box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.4);\n  position: absolute;\n  top: ${({ $top }) => $top}px;\n  left: ${({ $left }) => $left}px;\n  z-index: 10;\n`;\n\nexport const CardOptionWrapper = styled(FlexView)<ICardOptionWrapperProps>(({\n  theme,\n  $disabled,\n}) => {\n  return `\n    cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n    \n    &:hover {\n      background: ${$disabled ? 'transparent' : theme.colors.BLACK};\n    };\n    \n    path {\n      fill: ${theme.colors.WHITE_1};\n    }\n  `;\n});\n\nexport const OptionText = styled(Text)`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nexport const MenuWrapper = styled(FlexView)`\n  position: absolute;\n  z-index: 6;\n  top: calc(100% - 36px);\n  right: 12px;\n  transform-origin: top;\n  transform: scaleY(1);\n`;\n"],"names":["CardKebabMenuWrapper","styled","FlexView","theme","SubHeaderText","Text","CardMenuOptionsWrapper","$visible","CardContainer","CardWrapper","$bgImage","IconWrapper","BannerImageWrapper","BannerImage","gutter","StyledMinus2Icon","Minus2Icon","HeaderText","CardOptions","$top","$left","CardOptionWrapper","$disabled","OptionText","MenuWrapper"],"mappings":";;;;AAaO,MAAMA,IAAuBC,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAC,QAC/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAQWA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC,GAEYC,IAAgBH,EAAOI,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ3BC,IAAyBL,EAAOC,CAAQ,EAAgC,CAAC;AAAA,EACpF,OAAAC;AAAA,EACA,UAAAI;AACF,MACS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOeA,IAAW,IAAI,CAAC;AAAA,eACzBA,IAAW,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKXJ,EAAM,OAAO,OAAO;AAAA;AAAA,GAGvC,GAEYK,IAAgBP,EAAOC,CAAQ;AAAA,sBACtB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA,wBAGpC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA,GAI5CM,IAAcR,EAAOC,CAAQ,EAAqB,CAAC,EAAE,UAAAQ,QAC5DA,IACK;AAAA,8BACmBA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,QAQ7B,mBACR,GAEYC,IAAcV,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAM7BU,IAAqBX,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAMpCW,IAAcZ,EAAO,IAAI,CAAC,EAAE,OAAAE,QAAY;AAC7C,QAAA,EAAE,QAAAW,EAAO,IAAIX,EAAM;AAElB,SAAA;AAAA,wBACeA,EAAM,OAAO,UAAU;AAAA,aAClCW,IAAS,CAAC;AAAA,cACTA,IAAS,CAAC;AAAA;AAAA;AAGxB,CAAC,GAEYC,IAAmBd,EAAOe,CAAU;AAAA;AAAA,cAEnC,CAAC,EAAE,OAAAb,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA,GAIlCc,IAAahB,EAAOI,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiBxBa,IAAcjB,EAAOC,CAAQ;AAAA;AAAA;AAAA,SAGjC,CAAC,EAAE,MAAAiB,EAAK,MAAMA,CAAI;AAAA,UACjB,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA;AAAA,GAIjBC,IAAoBpB,EAAOC,CAAQ,EAA2B,CAAC;AAAA,EAC1E,OAAAC;AAAA,EACA,WAAAmB;AACF,MACS;AAAA,cACKA,IAAY,gBAAgB,SAAS;AAAA;AAAA;AAAA,oBAG/BA,IAAY,gBAAgBnB,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,cAIpDA,EAAM,OAAO,OAAO;AAAA;AAAA,GAGjC,GAEYoB,IAAatB,EAAOI,CAAI;AAAA;AAAA;AAAA;AAAA,GAMxBmB,IAAcvB,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}