@nualang/nualang-ui-components 0.1.1400 → 0.1.1402

package/dist/Exercises/Roleplay/Games/TopBarActions.js

@@ -7,23 +7,10 @@ import EditIcon from "@mui/icons-material/Create";
 import Share from "@mui/icons-material/Share";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import { makeStyles } from "tss-react/mui";
-import { withStyles } from "tss-react/mui";
 import { alpha } from "@mui/material/styles";
 import VoiceSpeedSelector from "../../../Misc/VoiceSpeed/VoiceSpeed";
 import ReportProblem from "../../../Misc/ReportProblem/ReportProblem";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const RoundedLinearProgress = withStyles(LinearProgress, theme => ({
-  root: {
-    height: 12,
-    borderRadius: 4
-  },
-  colorPrimary: {
-    backgroundColor: alpha(theme.palette.success.light, 0.25)
-  },
-  barColorPrimary: {
-    backgroundColor: theme.palette.success.main
-  }
-}));
 const useStyles = makeStyles()((theme, _params, classes) => ({
   label: {
     color: "#fff"
@@ -238,13 +225,21 @@ const TopBarActions = ({
     children: roleplayHasStarted || isRoleplayPreview ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [!isRoleplayPreview && /*#__PURE__*/_jsx("div", {
         className: classes.progress,
-        children: /*#__PURE__*/_jsx(RoundedLinearProgress, {
+        children: /*#__PURE__*/_jsx(LinearProgress, {
           variant: "determinate",
           value: currentMessages.length / roleplay.script.length * 100,
           "aria-label": t("exercise"),
           "aria-valuemin": 0,
           "aria-valuemax": 100,
-          "aria-valuenow": currentMessages.length / roleplay.script.length * 100
+          "aria-valuenow": currentMessages.length / roleplay.script.length * 100,
+          sx: {
+            height: 12,
+            borderRadius: 4,
+            backgroundColor: theme => alpha(theme.palette.success.light, 0.25),
+            "& .MuiLinearProgress-bar": {
+              backgroundColor: theme => theme.palette.success.main
+            }
+          }
         })
       }), hiddenDown ? null : /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(VoiceSpeedSelector, {

package/dist/Exercises/Roleplay/OriginalRoleplay.js

@@ -1,9 +1,8 @@
 import { useEffect, useState, memo } from "react";
 import { Joyride, STATUS } from "react-joyride";
 import { useTheme, alpha } from "@mui/material/styles";
-import { withStyles } from "tss-react/mui";
 import { makeStyles } from "tss-react/mui";
-import { Grid, Slide, IconButton, Button, ButtonBase, Avatar, Dialog, Typography, Box, Divider, Tooltip, LinearProgress, useMediaQuery } from "@mui/material";
+import { Grid, Slide, IconButton, Button, ButtonBase, Avatar, Dialog, Typography, Box, Divider, Tooltip, useMediaQuery, LinearProgress } from "@mui/material";
 import Alert from "@mui/material/Alert";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
@@ -31,18 +30,6 @@ import ReportProblem from "../../Misc/ReportProblem/ReportProblem";
 import { removeExtraWhiteSpaces } from "../../utils";
 import DefaultButton from "../../Misc/DefaultColourButton/DefaultColourButton";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const RoundedLinearProgress = withStyles(LinearProgress, theme => ({
-  root: {
-    height: 12,
-    borderRadius: 4
-  },
-  colorPrimary: {
-    backgroundColor: alpha(theme.palette.success.light, 0.25)
-  },
-  barColorPrimary: {
-    backgroundColor: theme.palette.success.main
-  }
-}));
 const useStyles = makeStyles()((theme, {
   isActorOne
 }, classes) => ({
@@ -629,9 +616,17 @@ function Roleplay({
     children: roleplayHasStarted ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("div", {
         className: classes.progress,
-        children: /*#__PURE__*/_jsx(RoundedLinearProgress, {
+        children: /*#__PURE__*/_jsx(LinearProgress, {
           variant: "determinate",
-          value: currentMessages.length / roleplay.script.length * 100
+          value: currentMessages.length / roleplay.script.length * 100,
+          sx: {
+            height: 12,
+            borderRadius: 4,
+            backgroundColor: theme => alpha(theme.palette.success.light, 0.25),
+            "& .MuiLinearProgress-bar": {
+              backgroundColor: theme => theme.palette.success.main
+            }
+          }
         })
       }), hiddenDown ? null : /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsxs(Button, {

package/dist/Forms/Settings/Tabs/General/General.js

@@ -56,7 +56,8 @@ function GeneralForm({
 }) {
   const {
     email,
-    preferred_username
+    given_name,
+    family_name
   } = values;
   const learnLang = values["custom:learnLang"] || "";
   const forLang = values["custom:forLang"] || "";
@@ -85,7 +86,7 @@ function GeneralForm({
     };
     getLearnLangLabel();
   }, [role, t]);
-  const isPreferredUsernameDisabled = username && (username.toLowerCase().includes("wayside") || username.toLowerCase().includes("google"));
+  const isNameDisabled = username && (username.toLowerCase().includes("wayside") || username.toLowerCase().includes("google"));
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: {
@@ -102,46 +103,54 @@ function GeneralForm({
         },
         children: t("required_field")
       })
-    }), !isGeneratedEmail && /*#__PURE__*/_jsx(Grid, {
+    }), /*#__PURE__*/_jsx(Grid, {
       size: {
         xs: 12,
         md: 6
       },
       children: /*#__PURE__*/_jsx(TextField, {
-        id: "email",
-        name: "email",
-        label: t("email"),
-        value: email,
+        id: "given_name",
+        name: "given_name",
+        label: t("first_name"),
+        title: t("first_name"),
+        value: given_name,
         onChange: handleChange,
         onBlur: handleBlur,
-        helperText: touched.email ? t(errors.email) : "",
-        error: touched.email && Boolean(errors.email),
-        type: "email",
+        helperText: touched.given_name ? t(errors.given_name) : "",
+        error: touched.given_name && Boolean(errors.given_name),
+        type: "text",
         variant: "outlined",
-        disabled: true,
         fullWidth: true,
-        required: true
+        required: true,
+        disabled: isNameDisabled,
+        slotProps: {
+          htmlInput: {
+            "data-lpignore": "true",
+            autoComplete: "off",
+            maxLength: 32
+          }
+        }
       })
     }), /*#__PURE__*/_jsx(Grid, {
       size: {
         xs: 12,
-        md: isGeneratedEmail ? 12 : 6
+        md: 6
       },
       children: /*#__PURE__*/_jsx(TextField, {
-        id: "preferred_username",
-        name: "preferred_username",
-        label: t("name"),
-        title: t("name"),
-        value: preferred_username,
+        id: "family_name",
+        name: "family_name",
+        label: t("last_name"),
+        title: t("last_name"),
+        value: family_name,
         onChange: handleChange,
         onBlur: handleBlur,
-        helperText: touched.preferred_username ? t(errors.preferred_username) : "",
-        error: touched.preferred_username && Boolean(errors.preferred_username),
+        helperText: touched.family_name ? t(errors.family_name) : "",
+        error: touched.family_name && Boolean(errors.family_name),
         type: "text",
         variant: "outlined",
         fullWidth: true,
         required: true,
-        disabled: isPreferredUsernameDisabled,
+        disabled: isNameDisabled,
         slotProps: {
           htmlInput: {
             "data-lpignore": "true",
@@ -150,6 +159,26 @@ function GeneralForm({
           }
         }
       })
+    }), !isGeneratedEmail && /*#__PURE__*/_jsx(Grid, {
+      size: {
+        xs: 12,
+        md: 6
+      },
+      children: /*#__PURE__*/_jsx(TextField, {
+        id: "email",
+        name: "email",
+        label: t("email"),
+        value: email,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        helperText: touched.email ? t(errors.email) : "",
+        error: touched.email && Boolean(errors.email),
+        type: "email",
+        variant: "outlined",
+        disabled: true,
+        fullWidth: true,
+        required: true
+      })
     }), /*#__PURE__*/_jsx(Grid, {
       size: {
         xs: 12,
@@ -241,7 +270,8 @@ export default function General({
   t = text => text,
   initialValues = {
     picture: null,
-    name: "Unknown",
+    given_name: "",
+    family_name: "",
     email: "Unknown",
     city: "",
     country: "",
@@ -261,8 +291,11 @@ export default function General({
 }) {
   const {
     email,
+    given_name,
+    family_name,
     preferred_username
   } = initialValues;
+  const displayName = [given_name, family_name].filter(Boolean).join(" ");
   const {
     classes
   } = useStyles();
@@ -271,7 +304,8 @@ export default function General({
   const [avatarOptionClicked, setAvatarOptionClicked] = useState(false);
   const [confirm] = useConfirm(t);
   const generalFormInitialValues = {
-    preferred_username,
+    given_name,
+    family_name,
     email,
     "custom:learnLang": initialValues["custom:learnLang"],
     "custom:forLang": initialValues["custom:forLang"],
@@ -316,12 +350,12 @@ export default function General({
                     display: "inline-block"
                   },
                   children: [values.picture ? /*#__PURE__*/_jsx(Avatar, {
-                    "aria-label": preferred_username,
+                    "aria-label": displayName,
                     src: values.picture,
                     className: classes.avatar,
                     alt: ""
                   }) : /*#__PURE__*/_jsx(Avatar, {
-                    "aria-label": preferred_username,
+                    "aria-label": displayName,
                     sx: theme => ({
                       backgroundColor: theme.palette.mode === "dark" ? "white" : "",
                       color: theme.palette.mode === "dark" ? theme.palette.background.default : ""
@@ -378,7 +412,12 @@ export default function General({
                   variant: "h5",
                   component: "h5",
                   gutterBottom: true,
-                  children: preferred_username
+                  title: displayName || preferred_username,
+                  noWrap: true,
+                  sx: {
+                    maxWidth: "100%"
+                  },
+                  children: displayName || preferred_username
                 }), !isGeneratedEmail && /*#__PURE__*/_jsx(Typography, {
                   color: "textSecondary",
                   variant: "body1",
@@ -527,7 +566,8 @@ const isEmail = value => {
   return !emailRegex.test(value);
 };
 General.validationSchema = Yup.object().shape({
-  preferred_username: Yup.string().required("required").test("noSpecialChars", "no_special_characters", value => !containsInvalidSymbols(value)).test("is-not-email", "Email addresses are not allowed", value => isEmail(value)),
+  given_name: Yup.string().required("required").test("noSpecialChars", "no_special_characters", value => !containsInvalidSymbols(value)).test("is-not-email", "Email addresses are not allowed", value => isEmail(value)),
+  family_name: Yup.string().required("required").test("noSpecialChars", "no_special_characters", value => !containsInvalidSymbols(value)).test("is-not-email", "Email addresses are not allowed", value => isEmail(value)),
   name: Yup.string().test("noSpecialChars", "no_special_characters", value => !containsInvalidSymbols(value)).nullable(),
   "custom:forLang": Yup.string().nullable(),
   "custom:learnLang": Yup.string().nullable()

package/dist/Lists/ExerciseSelection/ExerciseSelection.js

@@ -27,7 +27,8 @@ function Exercise({
   sectionId,
   topicId,
   setIsExerciseSelected,
-  phrases
+  phrases,
+  topicName
 }) {
   const noRoleplays = name.toLowerCase() === "roleplays" && roleplays.length === 0;
   const noPhrases = name.toLowerCase() === "phrases" && !phrases?.length && !getPhraseLists;
@@ -96,7 +97,8 @@ function Exercise({
           isExerciseSelected: isExerciseSelected,
           setIsExerciseSelected: setIsExerciseSelected,
           isExpanded: phraseListsOpen,
-          onPhraseListsLoaded: handlePhraseListsLoaded
+          onPhraseListsLoaded: handlePhraseListsLoaded,
+          topicName: topicName
         })
       })
     }), name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(Collapse, {
@@ -114,7 +116,8 @@ function Exercise({
           t: t,
           isExerciseSelected: isExerciseSelected,
           handleSelectExercise: handleSelectExercise,
-          useCase: useCase
+          useCase: useCase,
+          topicName: topicName
         })
       })
     })]
@@ -340,6 +343,7 @@ function Topic({
           handleStartExercise: handleStartExercise,
           isCreator: isCreator,
           getPhraseLists: getPhraseLists,
+          topicName: topicName,
           ...otherProps
         })
       })]

package/dist/Lists/Exercises/Exercises.js

@@ -15,7 +15,8 @@ import { searchStringToObj, objToSearchString } from "../../utils";
 import FlashOnIcon from "@mui/icons-material/FlashOn";
 import FlashOffIcon from "@mui/icons-material/FlashOff";
 import MenuBookIcon from "@mui/icons-material/MenuBook";
-import { Collapse, ListItemText, ListItemIcon, List, ListItemAvatar, IconButton, Badge, Tooltip, Box, Chip, LinearProgress } from "@mui/material";
+import { Collapse, ListItemText, ListItemIcon, List, ListItemAvatar, IconButton, Badge, Tooltip, Box, Chip } from "@mui/material";
+import ColorLinearProgress from "../../Misc/ColorLinearProgress/ColorLinearProgress";
 import Add from "@mui/icons-material/Add";
 import Face from "@mui/icons-material/Face";
 import ForumIcon from "@mui/icons-material/Forum";
@@ -181,13 +182,9 @@ function ItemProgressBar({
       sx: {
         width: 160
       },
-      children: /*#__PURE__*/_jsx(LinearProgress, {
+      children: /*#__PURE__*/_jsx(ColorLinearProgress, {
         variant: "determinate",
-        value: pct,
-        sx: {
-          height: 6,
-          borderRadius: 3
-        }
+        value: pct
       })
     }), /*#__PURE__*/_jsx(Typography, {
       variant: "caption",

package/dist/Lists/Members/Members.js

@@ -1,15 +1,17 @@
-import { useEffect, useState, Fragment } from "react";
+import { useEffect, useMemo, useState } from "react";
 import PropTypes from "prop-types";
-import { Avatar, Box, Button, IconButton, List, ListItem, ListItemAvatar, ListItemText, ListSubheader, Typography, Tooltip, Menu, MenuItem, Chip } from "@mui/material";
+import { Avatar, Box, Button, IconButton, List, ListItem, ListItemAvatar, ListItemText, ListSubheader, TextField, Typography, Tooltip, Menu, MenuItem, Chip } from "@mui/material";
 import { makeStyles } from "tss-react/mui";
 import Person from "@mui/icons-material/Person";
 import CommentIcon from "@mui/icons-material/Comment";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
+import SortIcon from "@mui/icons-material/Sort";
 import Skeleton from "@mui/material/Skeleton";
 import MembersNotFound from "../../Misc/NotFound/Members";
 import { DateTime } from "luxon";
 import useConfirm from "../../hooks/useConfirm";
 import HtmlTooltipComponent from "../../Misc/HtmlTooltipComponent/HtmlTooltipComponent";
+import { getStudentSortOrder, setStudentSortOrder, compareMembersBySortOrder, MEMBERS_SORT_ORDER_KEY } from "../../utils/studentSort";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   root: {
@@ -116,7 +118,7 @@ function Member(props) {
           })
         })
       }), /*#__PURE__*/_jsx(ListItemText, {
-        primary: featureFlags.classroomModes.readWrite && featureFlags.classroomModes.challenge && member.assignedLabels?.isReadWriteModeStudent && member.assignedLabels?.isChallengeModeStudent ? /*#__PURE__*/_jsxs(Box, {
+        primary: featureFlags.classroomModes?.readWrite && featureFlags.classroomModes?.challenge && member.assignedLabels?.isReadWriteModeStudent && member.assignedLabels?.isChallengeModeStudent ? /*#__PURE__*/_jsxs(Box, {
           sx: {
             display: "flex",
             alignItems: "center",
@@ -143,7 +145,7 @@ function Member(props) {
               color: "primary"
             })
           })]
-        }) : featureFlags.classroomModes.readWrite && member.assignedLabels?.isReadWriteModeStudent ? /*#__PURE__*/_jsxs(Box, {
+        }) : featureFlags.classroomModes?.readWrite && member.assignedLabels?.isReadWriteModeStudent ? /*#__PURE__*/_jsxs(Box, {
           sx: {
             display: "flex",
             alignItems: "center",
@@ -160,7 +162,7 @@ function Member(props) {
               color: "primary"
             })
           })]
-        }) : featureFlags.classroomModes.challenge && member.assignedLabels?.isChallengeModeStudent ? /*#__PURE__*/_jsxs(Box, {
+        }) : featureFlags.classroomModes?.challenge && member.assignedLabels?.isChallengeModeStudent ? /*#__PURE__*/_jsxs(Box, {
           sx: {
             display: "flex",
             alignItems: "center",
@@ -193,7 +195,7 @@ function Member(props) {
     }), /*#__PURE__*/_jsxs(OverflowMenu, {
       anchorEl: anchorEl,
       handleClose: handleCloseMenu,
-      children: [featureFlags.classroomModes.readWrite && (member.assignedLabels?.isReadWriteModeStudent ? /*#__PURE__*/_jsx(HtmlTooltipComponent, {
+      children: [featureFlags.classroomModes?.readWrite && (member.assignedLabels?.isReadWriteModeStudent ? /*#__PURE__*/_jsx(HtmlTooltipComponent, {
         titleBold: t("heritage_speaker"),
         titleDesc: t("heritage_speaker_desc"),
         placement: "right",
@@ -229,7 +231,7 @@ function Member(props) {
             primary: t("mark_as_heritage_speaker")
           })
         })
-      })), featureFlags.classroomModes.challenge && (member.assignedLabels?.isChallengeModeStudent ? /*#__PURE__*/_jsx(HtmlTooltipComponent, {
+      })), featureFlags.classroomModes?.challenge && (member.assignedLabels?.isChallengeModeStudent ? /*#__PURE__*/_jsx(HtmlTooltipComponent, {
         titleBold: t("challenge_student"),
         titleDesc: t("challenge_student_desc"),
         placement: "right",
@@ -405,13 +407,56 @@ function Members({
   handleDeleteClassroomMember,
   handleUpdateClassroomMember,
   isClassroomArchived,
-  featureFlags = {}
+  featureFlags = {},
+  showSortControl = false
 }) {
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(MemberList, {
+  const [sortOrder, setSortOrder] = useState(() => getStudentSortOrder(MEMBERS_SORT_ORDER_KEY, "joinDate"));
+  const handleSortOrderChange = value => {
+    setSortOrder(value);
+    setStudentSortOrder(MEMBERS_SORT_ORDER_KEY, value);
+  };
+  const sortedMembers = useMemo(() => [...(members || [])].sort((a, b) => compareMembersBySortOrder(a, b, sortOrder)), [members, sortOrder]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showSortControl && t && /*#__PURE__*/_jsxs(Box, {
+      sx: theme => ({
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: 1,
+        px: 2,
+        py: 1,
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : theme.palette.grey[50]
+      }),
+      children: [/*#__PURE__*/_jsx(SortIcon, {
+        fontSize: "small",
+        color: "action"
+      }), /*#__PURE__*/_jsxs(TextField, {
+        select: true,
+        size: "small",
+        id: "members_sort_by",
+        "data-cy": "members_sort_by",
+        label: t("sort_by"),
+        value: sortOrder,
+        onChange: e => handleSortOrderChange(e.target.value),
+        sx: {
+          minWidth: 170
+        },
+        children: [/*#__PURE__*/_jsx(MenuItem, {
+          value: "joinDate",
+          children: t("join_date")
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          value: "firstName",
+          children: t("first_name")
+        }), /*#__PURE__*/_jsx(MenuItem, {
+          value: "lastName",
+          children: t("last_name")
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(MemberList, {
       t: t,
       placeholderImageUrl: placeholderImageUrl,
-      members: members ? members.sort((a, b) => a.createdAt < b.createdAt ? 1 : -1) : [],
+      members: sortedMembers,
       handleMessage: handleMessage,
       disableSubheader: disableSubheader,
       getMemberDetails: getMemberDetails,
@@ -420,7 +465,7 @@ function Members({
       handleUpdateClassroomMember: handleUpdateClassroomMember,
       isClassroomArchived: isClassroomArchived,
       featureFlags: featureFlags
-    })
+    })]
   });
 }
 Members.propTypes = {

package/dist/Lists/Members/Members.test.js

@@ -1,20 +1,81 @@
-import { render } from "@testing-library/react";
-import { describe, it } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { describe, it, expect, afterEach } from "vitest";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import Members from "./Members";
 import { props } from "./Members.stories";
+import { MEMBERS_SORT_ORDER_KEY } from "../../utils/studentSort";
 import { jsx as _jsx } from "react/jsx-runtime";
+const renderMembers = (extraProps = {}) => {
+  const theme = createTheme();
+  return render(/*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    children: /*#__PURE__*/_jsx(Members, {
+      ...props,
+      featureFlags: {
+        classroomModes: {}
+      },
+      ...extraProps
+    })
+  }));
+};
+const renderedUsernames = async () => {
+  await screen.findByText("Peter Parker");
+  const knownUsernames = new Set(props.members.map(m => m.username));
+  return Array.from(document.querySelectorAll(".MuiListItemText-primary")).map(el => el.textContent).filter(text => knownUsernames.has(text));
+};
+afterEach(() => {
+  cleanup();
+  localStorage.removeItem(MEMBERS_SORT_ORDER_KEY);
+});
 describe("Members", () => {
   it("renders without crashing", () => {
-    const theme = createTheme();
     const {
       unmount
-    } = render(/*#__PURE__*/_jsx(ThemeProvider, {
-      theme: theme,
-      children: /*#__PURE__*/_jsx(Members, {
-        ...props
-      })
-    }));
+    } = renderMembers();
+    unmount();
+  });
+  it("defaults to join date order (newest first)", async () => {
+    const {
+      unmount
+    } = renderMembers({
+      showSortControl: true
+    });
+    const usernames = await renderedUsernames();
+    expect(usernames).toEqual(["Indigo Young", "Indigo Garland", "Cellophane", "Spider", "Evelyn Tool", "Oran Tool", "Peter Parker", "Mary Jane", "Giles Posture", "Indigo Violet", "Norman Gordon", "Penny Tool"]);
+    unmount();
+  });
+  it("sorts by last name when the stored preference is lastName", async () => {
+    localStorage.setItem(MEMBERS_SORT_ORDER_KEY, "lastName");
+    const {
+      unmount
+    } = renderMembers({
+      showSortControl: true
+    });
+    const usernames = await renderedUsernames();
+    expect(usernames).toEqual(["Cellophane", "Indigo Garland", "Norman Gordon", "Mary Jane", "Peter Parker", "Giles Posture", "Spider", "Evelyn Tool", "Oran Tool", "Penny Tool", "Indigo Violet", "Indigo Young"]);
+    unmount();
+  });
+  it("sorts by first name when the stored preference is firstName", async () => {
+    localStorage.setItem(MEMBERS_SORT_ORDER_KEY, "firstName");
+    const {
+      unmount
+    } = renderMembers({
+      showSortControl: true
+    });
+    const usernames = await renderedUsernames();
+    expect(usernames).toEqual(["Cellophane", "Evelyn Tool", "Giles Posture", "Indigo Garland", "Indigo Violet", "Indigo Young", "Mary Jane", "Norman Gordon", "Oran Tool", "Penny Tool", "Peter Parker", "Spider"]);
+    unmount();
+  });
+  it("does not mutate the members prop", async () => {
+    localStorage.setItem(MEMBERS_SORT_ORDER_KEY, "lastName");
+    const originalOrder = props.members.map(m => m.memberId);
+    const {
+      unmount
+    } = renderMembers({
+      showSortControl: true
+    });
+    await screen.findByText("Peter Parker");
+    expect(props.members.map(m => m.memberId)).toEqual(originalOrder);
     unmount();
   });
 });

package/dist/Lists/PhraseListSelection/PhraseListSelection.js

@@ -18,7 +18,8 @@ function PhraseList({
   setIsPhraseListSelected,
   t,
   isExerciseSelected,
-  setIsExerciseSelected
+  setIsExerciseSelected,
+  topicName
 }) {
   const [open, setOpen] = useState(false);
   const isTranslationHidden = phraseList?.hiddenPhraseGroupGames?.translation;
@@ -37,7 +38,8 @@ function PhraseList({
       timer: 30,
       answerOption: 0,
       phraseListId: phraseList.phraseListId,
-      phrases: phraseList.phrases || []
+      phrases: phraseList.phrases || [],
+      topicName: topicName ?? ""
     });
   };
   return /*#__PURE__*/_jsxs("div", {
@@ -162,7 +164,8 @@ function PhraseListSelection({
   isExerciseSelected,
   isExpanded,
   setIsExerciseSelected,
-  onPhraseListsLoaded
+  onPhraseListsLoaded,
+  topicName
 }) {
   const [isPhraseListSelected, setIsPhraseListSelected] = useState(false);
   const phraseListsQuery = courseQuerys.useCourseSectionTopicPhraseLists(async (cId, sId, tId, filters) => getPhraseLists(cId, sId, tId, filters), {
@@ -232,7 +235,8 @@ function PhraseListSelection({
     setIsPhraseListSelected: setIsPhraseListSelected,
     t: t,
     isExerciseSelected: isExerciseSelected,
-    setIsExerciseSelected: setIsExerciseSelected
+    setIsExerciseSelected: setIsExerciseSelected,
+    topicName: topicName
   }, phraseList.phraseListId || index));
 }
 export default PhraseListSelection;

package/dist/Lists/RoleplaySelection/RoleplaySelection.js

@@ -15,7 +15,8 @@ function Roleplay({
   setIsRoleplaySelected,
   t,
   isExerciseSelected,
-  handleSelectExercise = null
+  handleSelectExercise = null,
+  topicName
 }) {
   const [open, setOpen] = useState(false);
   const games = ["roleplay-story", "roleplay-fill-in-the-blanks", "roleplay-act-it-out", "roleplay-act-it-out-listening", "roleplay-act-it-out-speaking", "roleplay-act-it-out-listening-speaking"];
@@ -26,7 +27,8 @@ function Roleplay({
       exercise: exerciseName,
       timer: 30,
       answerOption: 0,
-      roleplayId: roleplay.roleplayId
+      roleplayId: roleplay.roleplayId,
+      topicName: topicName ?? ""
     });
   };
   const isRoleplayEmpty = roleplay?.script?.length === 0 || !roleplay?.script?.some(line => line.text !== undefined);
@@ -174,7 +176,8 @@ function RoleplaySelection({
   t,
   isExerciseSelected,
   handleSelectExercise,
-  useCase
+  useCase,
+  topicName
 }) {
   const [isRoleplaySelected, setIsRoleplaySelected] = useState(false);
   return roleplays.map((roleplay, index) => /*#__PURE__*/_jsx(Roleplay, {
@@ -186,7 +189,8 @@ function RoleplaySelection({
     t: t,
     isExerciseSelected: isExerciseSelected,
     handleSelectExercise: handleSelectExercise,
-    useCase: useCase
+    useCase: useCase,
+    topicName: topicName
   }, index));
 }
 export default RoleplaySelection;