@nualang/nualang-ui-components 0.1.1399 → 0.2.0

package/dist/Lists/Phrases/Phrases.js

@@ -1,717 +0,0 @@
-import { useState, useEffect, memo } from "react";
-import { Typography, List, ListSubheader, ListItem, ListItemText, Grid, ListItemSecondaryAction, Box, IconButton, Tooltip, Avatar, useMediaQuery, Menu, MenuItem, Checkbox, Button } from "@mui/material";
-import { makeStyles } from "tss-react/mui";
-import Skeleton from "@mui/material/Skeleton";
-import RecordVoiceOverIcon from "@mui/icons-material/RecordVoiceOver";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import EditIcon from "@mui/icons-material/Edit";
-import DeleteIcon from "@mui/icons-material/Delete";
-import ImageSearchIcon from "@mui/icons-material/ImageSearch";
-import GTranslateIcon from "@mui/icons-material/GTranslate";
-import MenuBookIcon from "@mui/icons-material/MenuBook";
-import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
-import MoveDownIcon from '@mui/icons-material/MoveDown';
-import ListenerDialog from "../../Dialogs/Listener/Listener";
-import TransferPhraseDialog from "../../Dialogs/TransferPhrase/TransferPhrase";
-import CreatePhraseListFromSelectionDialog from "../../Dialogs/CreatePhraseListFromSelectionDialog/CreatePhraseListFromSelectionDialog";
-import GenerateDefinitionsDialog from "../../Dialogs/GenerateDefinitions/GenerateDefinitions";
-import UpdatePhraseDialog from "../../Dialogs/CreatePhrase/CreatePhrase";
-import ViewImageDialog from "../../Dialogs/ViewImageDialog/ViewImageDialog";
-import { propsAreEqual } from "../../utils";
-import { useTheme } from "@mui/material/styles";
-import useConfirm from "../../hooks/useConfirm";
-import { arrayMove } from "@dnd-kit/sortable";
-import DragHandleIcon from "@mui/icons-material/DragHandle";
-import { SortableHandleOnly, SortableDndContextWrapper } from "../../utils/dragAndDrop/dragAndDrop";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const useStyles = makeStyles()(theme => ({
-  root: {
-    width: "100%"
-  },
-  translationRow: {
-    display: "flex",
-    alignItems: "flex-start",
-    gap: "6px",
-    lineHeight: 1.2
-  },
-  iconBeforeText: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 14,
-    height: 14,
-    color: theme.palette.text.secondary,
-    marginTop: 1
-  },
-  phraseText: {
-    width: "80%",
-    wordBreak: "break-all"
-  },
-  phraseTextSmall: {
-    width: "60%",
-    wordBreak: "break-all"
-  },
-  avatar: {
-    cursor: "pointer",
-    margin: theme.spacing(),
-    marginRight: 20,
-    width: 40,
-    height: 40
-  },
-  avatarNoClick: {
-    margin: theme.spacing(),
-    marginRight: 20,
-    width: 40,
-    height: 40
-  },
-  translationsText: {
-    overflow: "hidden",
-    whiteSpace: "normal",
-    textOverflow: "ellipsis"
-  },
-  definitionsText: {
-    overflow: "hidden",
-    whiteSpace: "normal",
-    textOverflow: "ellipsis"
-  },
-  actionButton: {
-    marginTop: theme.spacing(0.5),
-    marginBottom: theme.spacing(0.5),
-    marginRight: theme.spacing()
-  }
-}));
-function Phrase(props) {
-  const [isListenerOpen, setIsListenerOpen] = useState(false);
-  const [isUpdateOpen, setIsUpdateOpen] = useState(false);
-  const [isbrowserSupported, setbrowserSupported] = useState(false);
-  const [imageOpen, setImageOpen] = useState(false);
-  const [anchorEl, setAnchorEl] = useState(null);
-  const {
-    classes
-  } = useStyles();
-  const theme = useTheme();
-  const isLargeScreen = useMediaQuery(theme.breakpoints.up("sm"));
-  const {
-    t,
-    isCreator,
-    disableGutters,
-    disableActions,
-    learnLang,
-    handleSpeak,
-    userAttributes,
-    handleUpdatePhrase,
-    uploadAudio,
-    voices = {},
-    handleTranslate,
-    makeChatGptApiRequest,
-    forLang,
-    fileSizeLimit,
-    validatePhraseRecognition,
-    siteLanguage,
-    selectedPhrases,
-    handleSelectPhrase,
-    verificationStatus,
-    renderHandle
-  } = props;
-  const {
-    phrase = "",
-    translations = [],
-    definitions = [],
-    alternativeVersions,
-    image
-  } = props.phrase || {};
-  const hasDefinitions = (definitions || []).length > 0;
-  const hasTranslations = (translations || []).length > 0;
-  const useCompactSecondary = hasDefinitions && hasTranslations;
-  const handleImageOpen = () => setImageOpen(true);
-  const handleImageClose = () => setImageOpen(false);
-  useEffect(() => {
-    if (window.location.protocol === "https:" || window.location.hostname === "localhost") {
-      setbrowserSupported(true);
-    }
-  }, []);
-  if (!props.phrase) {
-    return /*#__PURE__*/_jsx(Box, {
-      sx: {
-        px: 2,
-        pb: 2
-      },
-      children: /*#__PURE__*/_jsx(Skeleton, {
-        variant: "text",
-        height: 60
-      })
-    });
-  }
-  const handleClickOpenListener = () => {
-    if (isbrowserSupported) {
-      setIsListenerOpen(true);
-    } else {
-      setbrowserSupported(false);
-      window.alert("Native microphone recording is only supported in https. Please use localhost for testing purposes");
-    }
-  };
-  const handleCloseMenu = () => setAnchorEl(null);
-  const handleCloseListener = () => setIsListenerOpen(false);
-  const handleClickOpenUpdate = () => setIsUpdateOpen(true);
-  const handleCloseUpdate = () => setIsUpdateOpen(false);
-  const combinedVoices = props.phrase.voices && props.phrase.voices.length > 0 ? [{
-    label: "Uploaded",
-    voiceOptions: props.phrase.voices
-  }, ...Object.values(voices)] : Object.values(voices);
-  return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsxs(ListItem, {
-      "data-cy": "phrase-list-item",
-      disableGutters: disableGutters,
-      children: [isCreator && /*#__PURE__*/_jsx(Tooltip, {
-        title: "Select",
-        enterDelay: 200,
-        children: /*#__PURE__*/_jsx(Checkbox, {
-          checked: selectedPhrases.includes(props.phrase.phraseId),
-          onChange: () => handleSelectPhrase(props.phrase.phraseId),
-          slotProps: {
-            input: {
-              "aria-label": `Select phrase ${props.phrase.phraseId}`
-            }
-          }
-        })
-      }), image ? /*#__PURE__*/_jsx(Avatar, {
-        onClick: handleImageOpen,
-        src: image,
-        className: classes.avatar,
-        alt: ""
-      }) : /*#__PURE__*/_jsx(Avatar, {
-        className: classes.avatarNoClick,
-        alt: "",
-        children: /*#__PURE__*/_jsx(ImageSearchIcon, {})
-      }), isLargeScreen && isCreator ? /*#__PURE__*/_jsx(Grid, {
-        container: true,
-        sx: {
-          width: "100%"
-        },
-        className: classes.phraseText,
-        children: /*#__PURE__*/_jsx(ListItemText, {
-          className: classes.phrases,
-          primary: `${phrase}${Array.isArray(alternativeVersions) && alternativeVersions.length ? " - " : ""}${(alternativeVersions || []).join(", ")}`,
-          secondary: /*#__PURE__*/_jsxs("div", {
-            children: [/*#__PURE__*/_jsxs(Box, {
-              className: classes.translationRow,
-              sx: {
-                mt: 0.75
-              },
-              children: [/*#__PURE__*/_jsx(Tooltip, {
-                title: t("translation") || "Translation",
-                children: /*#__PURE__*/_jsx("span", {
-                  className: classes.iconBeforeText,
-                  "aria-hidden": true,
-                  children: /*#__PURE__*/_jsx(GTranslateIcon, {
-                    fontSize: "small"
-                  })
-                })
-              }), /*#__PURE__*/_jsx(Typography, {
-                variant: "body2",
-                color: "textSecondary",
-                className: classes.translationsText,
-                children: (translations || []).join(", ")
-              })]
-            }), (props.phrase.definitions || []).length > 0 && /*#__PURE__*/_jsxs(Box, {
-              className: classes.translationRow,
-              sx: {
-                mt: 0.25
-              },
-              children: [/*#__PURE__*/_jsx(Tooltip, {
-                title: t("definition") || "Definition",
-                children: /*#__PURE__*/_jsx("span", {
-                  className: classes.iconBeforeText,
-                  "aria-hidden": true,
-                  children: /*#__PURE__*/_jsx(MenuBookIcon, {
-                    fontSize: "small"
-                  })
-                })
-              }), /*#__PURE__*/_jsx(Typography, {
-                variant: "body2",
-                color: "textSecondary",
-                className: `${useCompactSecondary ? classes.secondaryTextCompact : ""} ${classes.definitionsText}`,
-                children: (props.phrase.definitions || []).join("; ")
-              })]
-            })]
-          })
-        })
-      }) : /*#__PURE__*/_jsx(Grid, {
-        container: true,
-        sx: {
-          width: "100%"
-        },
-        className: classes.phraseTextSmall,
-        children: /*#__PURE__*/_jsx(ListItemText, {
-          className: classes.phrases,
-          primary: `${phrase}${Array.isArray(alternativeVersions) && alternativeVersions.length ? " - " : ""}${(alternativeVersions || []).join(", ")}`,
-          secondary: /*#__PURE__*/_jsxs("div", {
-            children: [/*#__PURE__*/_jsxs(Box, {
-              className: classes.translationRow,
-              sx: {
-                mt: 0.75
-              },
-              children: [/*#__PURE__*/_jsx(Tooltip, {
-                title: t("translation") || "Translation",
-                children: /*#__PURE__*/_jsx("span", {
-                  className: classes.iconBeforeText,
-                  "aria-hidden": true,
-                  children: /*#__PURE__*/_jsx(GTranslateIcon, {
-                    fontSize: "small"
-                  })
-                })
-              }), /*#__PURE__*/_jsx(Tooltip, {
-                title: (translations || []).join(", "),
-                children: /*#__PURE__*/_jsx(Typography, {
-                  variant: "body2",
-                  color: "textSecondary",
-                  className: classes.translationsText,
-                  children: (translations || []).join(", ")
-                })
-              })]
-            }), (props.phrase.definitions || []).length > 0 && /*#__PURE__*/_jsxs(Box, {
-              className: classes.translationRow,
-              sx: {
-                mt: 0.25
-              },
-              children: [/*#__PURE__*/_jsx(Tooltip, {
-                title: t("definition") || "Definition",
-                children: /*#__PURE__*/_jsx("span", {
-                  className: classes.iconBeforeText,
-                  "aria-hidden": true,
-                  children: /*#__PURE__*/_jsx(MenuBookIcon, {
-                    fontSize: "small"
-                  })
-                })
-              }), /*#__PURE__*/_jsx(Tooltip, {
-                title: (props.phrase.definitions || []).join("; "),
-                children: /*#__PURE__*/_jsx(Typography, {
-                  variant: "body2",
-                  color: "textSecondary",
-                  className: classes.definitionsText,
-                  children: (props.phrase.definitions || []).join("; ")
-                })
-              })]
-            })]
-          })
-        })
-      }), /*#__PURE__*/_jsxs(ListItemSecondaryAction, {
-        children: [!disableActions && !isLargeScreen && isCreator && /*#__PURE__*/_jsxs("div", {
-          children: [/*#__PURE__*/_jsx(Tooltip, {
-            title: t("more_options"),
-            enterDelay: 300,
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: e => setAnchorEl(e.currentTarget),
-              "aria-label": "More options",
-              size: "large",
-              "aria-expanded": Boolean(anchorEl),
-              children: /*#__PURE__*/_jsx(MoreVertIcon, {})
-            })
-          }), /*#__PURE__*/_jsxs(Menu, {
-            id: "edit-phrase-overflow-menu",
-            anchorEl: anchorEl,
-            keepMounted: true,
-            open: Boolean(anchorEl),
-            onClose: handleCloseMenu,
-            children: [/*#__PURE__*/_jsx(MenuItem, {
-              onClick: handleClickOpenListener,
-              "aria-label": "Listen to phrase",
-              color: "inherit",
-              id: "phrase-listen",
-              disabled: selectedPhrases.length > 0,
-              children: /*#__PURE__*/_jsx(Typography, {
-                children: t("listen")
-              })
-            }), /*#__PURE__*/_jsx(MenuItem, {
-              onClick: handleClickOpenUpdate,
-              "aria-label": "Update phrase",
-              disabled: selectedPhrases.length > 0,
-              color: "inherit",
-              id: "phrase-update",
-              children: /*#__PURE__*/_jsx(Typography, {
-                children: t("update")
-              })
-            }), /*#__PURE__*/_jsx(MenuItem, {
-              onClick: () => props.handleDeletePhrases([props.phrase.phraseId]),
-              "aria-label": "Remove phrase",
-              disabled: selectedPhrases.length > 0,
-              color: "inherit",
-              id: "phrase-remove",
-              children: /*#__PURE__*/_jsx(Typography, {
-                children: t("remove")
-              })
-            })]
-          }), renderHandle && renderHandle()]
-        }), !isCreator && !disableActions && /*#__PURE__*/_jsx(Tooltip, {
-          title: t("listen"),
-          enterDelay: 300,
-          children: /*#__PURE__*/_jsx(IconButton, {
-            onClick: handleClickOpenListener,
-            "aria-label": "Listen to phrase",
-            size: "large",
-            children: /*#__PURE__*/_jsx(RecordVoiceOverIcon, {})
-          })
-        }), isCreator && !disableActions && isLargeScreen && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Tooltip, {
-            title: t("listen"),
-            enterDelay: 300,
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onClick: handleClickOpenListener,
-              "aria-label": "Listen to phrase",
-              size: "large",
-              disabled: selectedPhrases.length > 0,
-              children: /*#__PURE__*/_jsx(RecordVoiceOverIcon, {})
-            })
-          }), /*#__PURE__*/_jsx(Tooltip, {
-            title: t("update"),
-            enterDelay: 300,
-            children: /*#__PURE__*/_jsx("span", {
-              children: /*#__PURE__*/_jsx(IconButton, {
-                onClick: handleClickOpenUpdate,
-                "aria-label": "Update phrase",
-                disabled: selectedPhrases.length > 0,
-                size: "large",
-                children: /*#__PURE__*/_jsx(EditIcon, {})
-              })
-            })
-          }), /*#__PURE__*/_jsx(Tooltip, {
-            title: t("remove"),
-            enterDelay: 300,
-            children: /*#__PURE__*/_jsx("span", {
-              children: /*#__PURE__*/_jsx(IconButton, {
-                onClick: () => props.handleDeletePhrases([props.phrase.phraseId]),
-                "aria-label": "Remove phrase",
-                disabled: selectedPhrases.length > 0,
-                size: "large",
-                children: /*#__PURE__*/_jsx(DeleteIcon, {})
-              })
-            })
-          }), renderHandle && renderHandle()]
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(ListenerDialog, {
-      t: t,
-      open: isListenerOpen,
-      handleClose: handleCloseListener,
-      dialogTitle: phrase,
-      text: phrase,
-      learnLang: learnLang,
-      handleSpeak: handleSpeak,
-      voices: combinedVoices,
-      userAttributes: userAttributes,
-      isCreator: isCreator,
-      phrase: props.phrase,
-      handleUpdatePhrase: handleUpdatePhrase,
-      uploadAudio: uploadAudio
-    }), /*#__PURE__*/_jsx(UpdatePhraseDialog, {
-      t: t,
-      update: true,
-      phrase: phrase,
-      image: props.phrase.image,
-      translations: translations,
-      alternativeVersions: props.phrase.alternativeVersions,
-      definitions: props.phrase.definitions,
-      voices: props.phrase.voices,
-      learnLang: learnLang,
-      forLang: forLang,
-      open: isUpdateOpen,
-      handleClose: handleCloseUpdate,
-      handleTranslate: handleTranslate,
-      makeChatGptApiRequest: makeChatGptApiRequest,
-      onSubmit: async values => {
-        const response = await handleUpdatePhrase(props.phrase.phraseId, values);
-        if (response) {
-          handleCloseUpdate();
-          return response;
-        }
-      },
-      forLangCharacters: props.forLangCharacters,
-      learnLangCharacters: props.learnLangCharacters,
-      fileSizeLimit: fileSizeLimit,
-      validatePhraseRecognition: validatePhraseRecognition,
-      siteLanguage: siteLanguage,
-      verificationStatus: verificationStatus
-    }), /*#__PURE__*/_jsx(ViewImageDialog, {
-      open: imageOpen,
-      image: image,
-      handleClose: handleImageClose
-    })]
-  });
-}
-function PhraseList({
-  t = text => text,
-  isCreator,
-  isMember,
-  phrases,
-  disablePadding,
-  disableGutters,
-  disableActions,
-  disableDragAndDrop = false,
-  updatePhrases,
-  handleRemovePhrases,
-  otherPhraseLists,
-  otherPhraseListsLoading,
-  handleTransferPhrase,
-  handleCreatePhraseListFromSelection,
-  ...otherProps
-}) {
-  const {
-    classes
-  } = useStyles();
-  const theme = useTheme();
-  const isLargeScreen = useMediaQuery(theme.breakpoints.up("sm"));
-  const [confirm] = useConfirm(t);
-  const [phrasesArray, setPhrasesArray] = useState([]);
-  const [selectedPhrases, setSelectedPhrases] = useState([]);
-  const [isGenerateDefinitionsOpen, setIsGenerateDefinitionsOpen] = useState(false);
-  const [isTransferOpen, setIsTransferOpen] = useState(false);
-  const [isCreatePhraseListFromSelectionOpen, setIsCreatePhraseListFromSelectionOpen] = useState(false);
-  const phrasesStringified = JSON.stringify(phrases);
-  useEffect(() => {
-    if (phrases && Array.isArray(phrases) && phrases.length > 0) {
-      const sortedPhrases = [...phrases].sort((a, b) => a.idx - b.idx);
-      setPhrasesArray(sortedPhrases);
-    } else if (phrases && Array.isArray(phrases)) {
-      setPhrasesArray(phrases);
-    }
-  }, [phrases, phrasesStringified]);
-  const onDragEnd = result => {
-    const {
-      active,
-      over
-    } = result;
-    if (!over) return;
-    if (active.id !== over.id) {
-      const oldIndex = phrasesArray.findIndex(item => `phrase-${item.phraseId}` === active.id);
-      const newIndex = phrasesArray.findIndex(item => `phrase-${item.phraseId}` === over.id);
-      const updatedPhrases = arrayMove(phrasesArray, oldIndex, newIndex);
-      setPhrasesArray(updatedPhrases);
-      updatePhrases(updatedPhrases);
-    }
-  };
-  const handleSelectAll = () => {
-    if (selectedPhrases.length === phrasesArray.length) {
-      setSelectedPhrases([]);
-    } else if (selectedPhrases.length > 0) {
-      setSelectedPhrases([]);
-    } else {
-      setSelectedPhrases(phrasesArray.map(p => p.phraseId));
-    }
-  };
-  const handleSelectPhrase = phraseId => {
-    setSelectedPhrases(prev => prev.includes(phraseId) ? prev.filter(id => id !== phraseId) : [...prev, phraseId]);
-  };
-  const handleDeletePhrases = async (phraseIds = selectedPhrases) => {
-    const isMultiple = phraseIds.length > 1;
-    const confirmed = await confirm(isMultiple ? t("delete_phrases") : t("delete_phrase"), isMultiple ? t("delete_phrases_confirmation") : t("delete_phrase_confirmation"));
-    if (confirmed) {
-      try {
-        await handleRemovePhrases(phraseIds);
-        setSelectedPhrases([]);
-      } catch (error) {
-        console.error(error);
-      }
-    }
-  };
-  const isDragDisabled = !isCreator || selectedPhrases.length > 0;
-  const selectedPhraseObjects = phrasesArray.filter(p => selectedPhrases.includes(p.phraseId));
-  const subheaderContent = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [isMember && !isCreator && /*#__PURE__*/_jsx(ListSubheader, {
-      disableSticky: true,
-      disableGutters: disableGutters,
-      component: "div",
-      id: "nested-list-subheader",
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: "subtitle1",
-        children: /*#__PURE__*/_jsx(Box, {
-          sx: {
-            display: "flex"
-          },
-          children: /*#__PURE__*/_jsxs(Box, {
-            sx: {
-              fontWeight: "fontWeightBold",
-              flexGrow: 1,
-              alignSelf: "center"
-            },
-            children: [t("phrases"), " (", phrases.length, ")"]
-          })
-        })
-      })
-    }), isCreator && phrasesArray.length > 0 && /*#__PURE__*/_jsxs(ListSubheader, {
-      disableSticky: true,
-      disableGutters: disableGutters,
-      component: "div",
-      id: "nested-list-subheader",
-      children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "Select all",
-        enterDelay: 200,
-        children: /*#__PURE__*/_jsx(Checkbox, {
-          indeterminate: selectedPhrases.length > 0 && selectedPhrases.length < phrasesArray.length,
-          checked: selectedPhrases.length === phrasesArray.length,
-          onChange: handleSelectAll,
-          slotProps: {
-            input: {
-              "aria-label": "Select all phrases"
-            }
-          }
-        })
-      }), handleTransferPhrase && /*#__PURE__*/_jsx(Button, {
-        disabled: selectedPhrases.length === 0,
-        variant: "text",
-        color: "primary",
-        size: "small",
-        onClick: () => setIsTransferOpen(true),
-        startIcon: isLargeScreen ? /*#__PURE__*/_jsx(MoveDownIcon, {}) : null,
-        style: {
-          marginLeft: "10px"
-        },
-        children: isLargeScreen ? t("transfer_phrases") : /*#__PURE__*/_jsx(MoveDownIcon, {})
-      }), /*#__PURE__*/_jsx(Button, {
-        disabled: selectedPhrases.length === 0,
-        variant: "text",
-        color: "secondary",
-        size: "small",
-        "aria-label": t("generate_definitions"),
-        onClick: () => setIsGenerateDefinitionsOpen(true),
-        startIcon: isLargeScreen ? /*#__PURE__*/_jsx(AutoFixHighIcon, {}) : null,
-        style: {
-          marginLeft: "10px"
-        },
-        children: isLargeScreen ? t("generate_definitions") : /*#__PURE__*/_jsx(AutoFixHighIcon, {})
-      }), /*#__PURE__*/_jsx(Button, {
-        disabled: selectedPhrases.length === 0,
-        variant: "text",
-        color: "error",
-        size: "small",
-        onClick: () => handleDeletePhrases(),
-        startIcon: isLargeScreen ? /*#__PURE__*/_jsx(DeleteIcon, {}) : null,
-        style: {
-          marginLeft: "10px"
-        },
-        children: isLargeScreen ? t("delete") : /*#__PURE__*/_jsx(DeleteIcon, {})
-      })]
-    })]
-  });
-  if (!phrases) {
-    return /*#__PURE__*/_jsx(List, {
-      className: classes.root,
-      disablePadding: disablePadding,
-      subheader: /*#__PURE__*/_jsx(ListSubheader, {
-        disableSticky: true,
-        disableGutters: disableGutters,
-        component: "div",
-        id: "nested-list-subheader",
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: "subtitle1",
-          children: /*#__PURE__*/_jsx(Box, {
-            sx: {
-              fontWeight: "fontWeightBold"
-            },
-            children: t("phrases")
-          })
-        })
-      }),
-      children: new Array(3).fill(null).map((_, index) => /*#__PURE__*/_jsx(Phrase, {
-        ...otherProps,
-        disableGutters: disableGutters
-      }, index))
-    });
-  }
-  const renderPhrase = (phrase, index) => /*#__PURE__*/_jsx(SortableHandleOnly, {
-    sortId: `phrase-${phrase.phraseId}`,
-    index: phrase.phraseId,
-    renderHandle: ({
-      setActivatorNodeRef,
-      listeners
-    }) => isCreator && /*#__PURE__*/_jsx(Tooltip, {
-      title: t("move_phrase"),
-      enterDelay: 300,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        size: "large",
-        "aria-label": "Drag Answer",
-        ref: setActivatorNodeRef,
-        ...listeners,
-        disabled: isDragDisabled || disableDragAndDrop,
-        children: /*#__PURE__*/_jsx(DragHandleIcon, {})
-      })
-    }),
-    children: ({
-      renderHandle
-    }) => /*#__PURE__*/_jsx(Phrase, {
-      t: t,
-      phraseIndex: index,
-      phrase: phrase,
-      isCreator: isCreator,
-      disableGutters: disableGutters,
-      disableActions: disableActions,
-      disableDragAndDrop: disableDragAndDrop,
-      selectedPhrases: selectedPhrases,
-      handleSelectPhrase: handleSelectPhrase,
-      handleDeletePhrases: handleDeletePhrases,
-      renderHandle: renderHandle,
-      ...otherProps
-    })
-  }, `phrase-${phrase.phraseId}`);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [!isDragDisabled ? /*#__PURE__*/_jsx(SortableDndContextWrapper, {
-      onDragEnd: onDragEnd,
-      items: phrasesArray.map(phrase => `phrase-${phrase.phraseId}`),
-      children: /*#__PURE__*/_jsx(List, {
-        className: classes.root,
-        disablePadding: disablePadding,
-        subheader: subheaderContent,
-        children: phrasesArray.map(renderPhrase)
-      })
-    }) : /*#__PURE__*/_jsx(List, {
-      className: classes.root,
-      disablePadding: disablePadding,
-      subheader: subheaderContent,
-      children: phrasesArray.map(renderPhrase)
-    }), /*#__PURE__*/_jsx(GenerateDefinitionsDialog, {
-      t: t,
-      open: isGenerateDefinitionsOpen,
-      handleClose: () => {
-        setIsGenerateDefinitionsOpen(false);
-        setSelectedPhrases([]);
-      },
-      selectedPhraseObjects: selectedPhraseObjects,
-      makeChatGptApiRequest: otherProps.makeChatGptApiRequest,
-      handleUpdatePhrase: otherProps.handleUpdatePhrase,
-      learnLang: otherProps.learnLang,
-      forLang: otherProps.forLang,
-      siteLanguage: otherProps.siteLanguage,
-      difficulty: otherProps.difficulty
-    }), handleTransferPhrase && /*#__PURE__*/_jsx(TransferPhraseDialog, {
-      t: t,
-      open: isTransferOpen,
-      handleClose: () => {
-        setIsTransferOpen(false);
-        setSelectedPhrases([]);
-      },
-      phraseIds: selectedPhrases,
-      otherPhraseLists: otherPhraseLists || [],
-      otherPhraseListsLoading: otherPhraseListsLoading,
-      handleTransferPhrase: handleTransferPhrase,
-      handleCreateNew: handleCreatePhraseListFromSelection ? () => {
-        setIsTransferOpen(false);
-        setIsCreatePhraseListFromSelectionOpen(true);
-      } : undefined
-    }), handleCreatePhraseListFromSelection && /*#__PURE__*/_jsx(CreatePhraseListFromSelectionDialog, {
-      t: t,
-      open: isCreatePhraseListFromSelectionOpen,
-      handleClose: () => {
-        setIsCreatePhraseListFromSelectionOpen(false);
-        setSelectedPhrases([]);
-      },
-      phraseIds: selectedPhrases,
-      handleCreatePhraseListFromSelection: handleCreatePhraseListFromSelection
-    })]
-  });
-}
-function Phrases(props) {
-  return /*#__PURE__*/_jsx(PhraseList, {
-    ...props
-  });
-}
-const MemoizedPhrases = /*#__PURE__*/memo(Phrases, (prevProps, nextProps) => propsAreEqual(prevProps, nextProps, "phrases", "phraseId"));
-export default MemoizedPhrases;