@nualang/nualang-ui-components 0.1.1428 → 0.1.1430

package/dist/Assignments/AssignmentCardsList/AssignmentCardsList.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { Typography, Box, IconButton, Tooltip, Skeleton, Select, MenuItem, FormControl, InputLabel } from "@mui/material";
+import { Typography, Box, IconButton, Tooltip, Skeleton, MenuItem, TextField } from "@mui/material";
 import AssignmentCard from "../AssignmentCard/AssignmentCard";
 import Refresh from "@mui/icons-material/Refresh";
 import TeacherCreate from "../../img/teacher-create-2.svg";
@@ -199,32 +199,27 @@ const AssignmentCardsList = ({
           display: "flex",
           justifyContent: "space-between",
           alignItems: "center",
-          mb: 3,
-          mt: "8px"
+          mb: 1
         },
-        children: [/*#__PURE__*/_jsxs(FormControl, {
-          size: "large",
+        children: [/*#__PURE__*/_jsxs(TextField, {
+          select: true,
+          size: "small",
+          variant: "outlined",
+          label: t("view"),
+          value: filter,
+          onChange: e => setFilter(e.target.value),
           sx: {
-            minWidth: 140,
-            marginTop: 1
+            minWidth: 150
           },
-          children: [/*#__PURE__*/_jsx(InputLabel, {
-            children: t("view")
-          }), /*#__PURE__*/_jsxs(Select, {
-            value: filter,
-            onChange: e => setFilter(e.target.value),
-            label: t("view"),
-            autoWidth: true,
-            children: [/*#__PURE__*/_jsx(MenuItem, {
-              value: "all",
-              children: t("all")
-            }), /*#__PURE__*/_jsx(MenuItem, {
-              value: "pastDue",
-              children: t("past_due")
-            }), /*#__PURE__*/_jsx(MenuItem, {
-              value: "scheduled",
-              children: t("scheduled")
-            })]
+          children: [/*#__PURE__*/_jsx(MenuItem, {
+            value: "all",
+            children: t("all")
+          }), /*#__PURE__*/_jsx(MenuItem, {
+            value: "pastDue",
+            children: t("past_due")
+          }), /*#__PURE__*/_jsx(MenuItem, {
+            value: "scheduled",
+            children: t("scheduled")
           })]
         }), /*#__PURE__*/_jsx(Tooltip, {
           placement: "left",
@@ -291,32 +286,27 @@ const AssignmentCardsList = ({
         display: "flex",
         justifyContent: isCreator ? "space-between" : "flex-end",
         alignItems: "center",
-        mb: 3,
-        mt: "8px"
+        mb: 1
       },
-      children: [isCreator && /*#__PURE__*/_jsxs(FormControl, {
-        size: "large",
+      children: [isCreator && /*#__PURE__*/_jsxs(TextField, {
+        select: true,
+        size: "small",
+        variant: "outlined",
+        label: t("view"),
+        value: filter,
+        onChange: e => setFilter(e.target.value),
         sx: {
-          minWidth: 140,
-          marginTop: 1
+          minWidth: 150
         },
-        children: [/*#__PURE__*/_jsx(InputLabel, {
-          children: t("view")
-        }), /*#__PURE__*/_jsxs(Select, {
-          value: filter,
-          onChange: e => setFilter(e.target.value),
-          label: t("view"),
-          autoWidth: true,
-          children: [/*#__PURE__*/_jsx(MenuItem, {
-            value: "all",
-            children: t("all")
-          }), /*#__PURE__*/_jsx(MenuItem, {
-            value: "pastDue",
-            children: t("past_due")
-          }), /*#__PURE__*/_jsx(MenuItem, {
-            value: "scheduled",
-            children: t("scheduled")
-          })]
+        children: [/*#__PURE__*/_jsx(MenuItem, {
+          value: "all",
+          children: t("all")
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          value: "pastDue",
+          children: t("past_due")
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          value: "scheduled",
+          children: t("scheduled")
         })]
       }), /*#__PURE__*/_jsx(Tooltip, {
         placement: "left",

package/dist/Cards/CardElements/CardTitle/CardTitle.js

@@ -1,6 +1,9 @@
+import { useRef } from "react";
 import PropTypes from "prop-types";
 import Typography from "@mui/material/Typography";
+import Tooltip from "@mui/material/Tooltip";
 import { styled } from "@mui/system";
+import useIsTruncated from "../../../hooks/useIsTruncated";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledCardTitle = styled(Typography)(({
   theme
@@ -13,13 +16,20 @@ function CardTitle({
   component = "h3",
   compact = false
 }) {
-  return /*#__PURE__*/_jsx(StyledCardTitle, {
-    variant: compact ? "subtitle2" : "subtitle1",
-    component: component,
-    compact: compact,
-    noWrap: true,
-    "aria-label": title,
-    children: title
+  const titleRef = useRef(null);
+  const isTruncated = useIsTruncated(titleRef, [title]);
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: title,
+    disableHoverListener: !isTruncated,
+    children: /*#__PURE__*/_jsx(StyledCardTitle, {
+      ref: titleRef,
+      variant: compact ? "subtitle2" : "subtitle1",
+      component: component,
+      compact: compact,
+      noWrap: true,
+      "aria-label": title,
+      children: title
+    })
   });
 }
 CardTitle.propTypes = {

package/dist/Cards/CardElements/CardVisibility/CardVisibility.js

@@ -10,7 +10,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function CardVisibility({
   t = text => text,
   visibility = "",
-  isCourseHidden = false
+  isCourseHidden = false,
+  compact = false
 }) {
   const isPublic = visibility === "public";
   let icon;
@@ -31,6 +32,22 @@ function CardVisibility({
     });
     color = "secondary";
   }
+
+  // Compact cards use a smaller pill (24px tall, 12px radius, 14px icon, 6px
+  // inset) so the badge doesn't overwhelm the shorter media band.
+  const compactSx = compact ? {
+    bottom: "6px",
+    right: "6px",
+    height: "24px",
+    borderRadius: "12px",
+    fontSize: "11px",
+    "& .MuiChip-icon": {
+      fontSize: "14px"
+    }
+  } : {
+    bottom: "8px",
+    right: "8px"
+  };
   return /*#__PURE__*/_jsxs(Box, {
     sx: {
       position: "relative"
@@ -42,8 +59,6 @@ function CardVisibility({
       sx: theme => ({
         border: "1px solid",
         position: "absolute",
-        bottom: "8px",
-        right: "8px",
         fontWeight: "bold",
         textTransform: "capitalize",
         pointerEvents: "none",
@@ -51,7 +66,8 @@ function CardVisibility({
         backgroundColor: isPublic ? theme.palette.success.dark : theme.palette.mode === "light" ? blue[700] : blue[500],
         ...(theme.palette.mode === "light" && {
           color: "white"
-        })
+        }),
+        ...compactSx
       })
     }), isCourseHidden && /*#__PURE__*/_jsx(Chip, {
       color: "success",
@@ -75,6 +91,7 @@ function CardVisibility({
   });
 }
 CardVisibility.propTypes = {
-  visibility: PropTypes.string.isRequired
+  visibility: PropTypes.string.isRequired,
+  compact: PropTypes.bool
 };
 export default CardVisibility;

package/dist/Cards/CardElements/index.js

@@ -42,7 +42,8 @@ const CardAvatarImg = styled(Avatar)(({
 }));
 const CardAvatar = props => {
   const {
-    badgeSize = "default"
+    badgeSize = "default",
+    compact = false
   } = props;
   const passDownProps = {
     ...props
@@ -50,11 +51,15 @@ const CardAvatar = props => {
   delete passDownProps.badgeSize;
   delete passDownProps.verificationStatus;
   delete passDownProps.gameAward;
+  delete passDownProps.compact;
   return /*#__PURE__*/_jsxs(Box, {
     sx: theme => ({
       position: "absolute",
-      bottom: theme.spacing(-3),
-      left: theme.spacing(2)
+      // Compact cards use a smaller avatar with a tighter overlap over the
+      // media band (18px overlap, 12px inset) instead of the default's
+      // theme-spaced offsets.
+      bottom: compact ? "-18px" : theme.spacing(-3),
+      left: compact ? "12px" : theme.spacing(2)
     }),
     children: [/*#__PURE__*/_jsx(CardAvatarImg, {
       ...passDownProps

package/dist/Cards/Classroom/Classroom.js

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import PropTypes from "prop-types";
 import { useInView } from "react-intersection-observer";
 import { Button, Box, Typography, IconButton, Menu, MenuItem, Tooltip, CardActions, CardActionArea, Divider, CircularProgress } from "@mui/material";
@@ -15,6 +15,7 @@ import { capitalize } from "../../utils/index";
 import PlaceholderImages from "../../utils/placeholder-images/index";
 import ProgressiveCardMedia from "../../Misc/ProgressiveCardMedia/ProgressiveCardMedia";
 import useClassroomState from "../../hooks/useClassroomState";
+import useIsTruncated from "../../hooks/useIsTruncated";
 import { classes, CardContainer, CardAvatar, CardHeader, CardTitle, CardSubheader, CardInfoSection, CardDescription, CardTop, CardContent, CardMenuIcon, CardVisibility } from "../CardElements";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function OverflowMenu({
@@ -184,6 +185,8 @@ function ClassroomCard({
     createdByName,
     visibility
   } = classroom;
+  const descriptionRef = useRef(null);
+  const isDescriptionTruncated = useIsTruncated(descriptionRef, [description]);
   const viewClassroom = () => {
     handleViewClassroom(classroom.classroomId);
   };
@@ -323,20 +326,25 @@ function ClassroomCard({
             flexGrow: 1
           }
         })]
-      }), /*#__PURE__*/_jsx(CardDescription, {
-        variant: compact ? "caption" : "body2",
-        color: "textSecondary",
-        component: "p",
-        sx: compact ? {
-          height: "auto",
-          lineHeight: 1.4,
-          display: "-webkit-box",
-          WebkitLineClamp: 2,
-          WebkitBoxOrient: "vertical",
-          overflow: "hidden",
-          marginBottom: 1
-        } : {},
-        children: description
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: description,
+        disableHoverListener: !compact || !isDescriptionTruncated,
+        children: /*#__PURE__*/_jsx(CardDescription, {
+          ref: compact ? descriptionRef : undefined,
+          variant: compact ? "caption" : "body2",
+          color: "textSecondary",
+          component: "p",
+          sx: compact ? {
+            height: "auto",
+            lineHeight: 1.4,
+            display: "-webkit-box",
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: "vertical",
+            overflow: "hidden",
+            marginBottom: 1
+          } : {},
+          children: description
+        })
       })]
     }), !compact && /*#__PURE__*/_jsxs(CardActions, {
       children: [isCreator && /*#__PURE__*/_jsx(Button, {