mui-language-picker 1.1.15 → 1.2.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 SIL LSDev
+Copyright (c) 2020-2022 SIL LSDev
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -4,7 +4,7 @@ Material UI react language picker
 
 ## Installation
 
-Complete installation for [material-ui](https://material-ui.com/getting-started/installation/).
+Complete information for [material-ui](https://mui.com/material-ui/).
 
 ```sh
 npm install mui-language-picker --save
@@ -12,19 +12,26 @@ npm install mui-language-picker --save
 
 ## Usage
 
-### TypeScript React 16 code
+### TypeScript React 18 code
 
 ```typescript
 import {
   LanguagePicker,
   ILanguagePickerStrings,
   languagePickerStrings_en,
+  LangTag,
+  DisplayName,
 } from "mui-language-picker";
 
 const MyComponent = (props: any) => {
   const [bcp47, setBcp47] = React.useState("und");
   const [lgName, setLgName] = React.useState("");
   const [fontName, setFontName] = React.useState("");
+  const [tag, setTag] = React.useState<LangTag>()
+
+  const displayName = (name: string, tag?:LangTag) => {
+    return tag.localname || tag.name
+  }
 
   return (
     <LanguagePicker
@@ -34,6 +41,8 @@ const MyComponent = (props: any) => {
       setName={setLgName}
       font={fontName}
       setFont={setFontName}
+      displayName={displayName}
+      setInfo={setTag}
       t={languagePickerStrings_en}
     />
   );
@@ -54,6 +63,8 @@ Output should be a Language Picker when entered opens a dialog
 | setName\*  | (name: string) => void  | callback to change language name    |
 | font       | string                  | font family name                    |
 | setFont\*  | (font: string) => void  | callback to change font family name |
+| displayName\* | DisplayName          | function to control display of name |
+| setInfo\*  | (tag: LangTag) => void  | callback to receive tag information |
 | disabled\* | boolean                 | true if control disabled            |
 | t          | ILanguagePickerStrings  | localization strings (see below)    |
 
@@ -63,24 +74,53 @@ Output should be a Language Picker when entered opens a dialog
 
 ```typescript
 export const languagePickerStrings_en = {
-  font: "Font",
-  script: "Script",
-  language: "Language",
-  selectLanguage: "Choose Language Details",
-  findALanguage: "Find a language by name, code, or country",
-  codeExplained: "Code Explained",
-  subtags: "Subtags",
-  details: "Details",
-  languageOf: "A Language of $1$2.",
-  inScript: " in the $1 script",
-  select: "Save",
-  cancel: "Cancel",
-  phonetic: "Phonetic",
+  font: 'Font',
+  script: 'Script',
+  language: 'Language',
+  selectLanguage: 'Choose Language Details',
+  findALanguage: 'Find a language by name, code, or country',
+  codeExplained: 'Code Explained',
+  subtags: 'Subtags',
+  details: 'Details',
+  languageOf: 'A Language of $1$2.',
+  inScript: ' in the $1 script',
+  select: 'Save',
+  cancel: 'Cancel',
+  phonetic: 'Phonetic',
+  changeName: 'Change Name',
+  nameInstruction:
+    'If you would like to change the language name enter the new name here.',
+  newName: 'New Language Name',
+  change: 'Change',
 } as ILanguagePickerStrings;
 ```
 
+### Information returned by setInfo
+
+```typescript
+export interface LangTag {
+  full: string;
+  iana?: string;
+  iso639_3?: string;
+  localname?: string;
+  name: string;
+  names?: string[];
+  nophonvars?: boolean;
+  region?: string;
+  regionname?: string;
+  regions?: string[];
+  script: string;
+  sldr: boolean;
+  tag: string;
+  tags?: string[];
+  variants?: string[];
+  defaultFont?: string;
+  fonts?: string[];
+}
+```
+
 ### Change control background
-If the theme involves using a dark background, the control background can be changed with css. See also [material-ui](https://material-ui.com/) documentation.
+If the theme involves using a dark background, the control background can be changed with css. See also [material-ui](https://mui.com/) documentation.
 ```css
 #LangBcp47 .MuiFilledInput-root {
   background-color: rgba(255, 255, 255, 0.9);

package/dist/ChangeName.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ILanguagePickerStrings } from './model';
+interface IProps {
+    isOpen: boolean;
+    onClose?: () => void;
+    curName?: string;
+    onNewName?: (name: string) => void;
+    t?: ILanguagePickerStrings;
+}
+export default function ChangeName({ isOpen, onClose, curName, onNewName, t, }: IProps): JSX.Element;
+export {};

package/dist/ChangeName.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var TextField_1 = __importDefault(require("@mui/material/TextField"));
+var Dialog_1 = __importDefault(require("@mui/material/Dialog"));
+var DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
+var DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+var DialogContentText_1 = __importDefault(require("@mui/material/DialogContentText"));
+var DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
+var localization_1 = require("./localization");
+function ChangeName(_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, curName = _a.curName, onNewName = _a.onNewName, t = _a.t;
+    var _b = React.useState(isOpen), open = _b[0], setOpen = _b[1];
+    var _c = React.useState(curName || ''), name = _c[0], setName = _c[1];
+    var handleClose = function (save) { return function () {
+        if (save && name)
+            onNewName && onNewName(name);
+        onClose && onClose();
+        setOpen(false);
+    }; };
+    var handleNameChange = function (event) {
+        setName(event.target.value);
+    };
+    React.useEffect(function () {
+        setOpen(isOpen);
+    }, [isOpen]);
+    return (React.createElement(Dialog_1.default, { open: open, onClose: handleClose() },
+        React.createElement(DialogTitle_1.default, null, (t === null || t === void 0 ? void 0 : t.changeName) || localization_1.languagePickerStrings_en.changeName),
+        React.createElement(DialogContent_1.default, null,
+            React.createElement(DialogContentText_1.default, null, (t === null || t === void 0 ? void 0 : t.nameInstruction) || localization_1.languagePickerStrings_en.nameInstruction),
+            React.createElement(TextField_1.default, { autoFocus: true, margin: "dense", id: "name", label: (t === null || t === void 0 ? void 0 : t.newName) || localization_1.languagePickerStrings_en.newName, fullWidth: true, value: name, onChange: handleNameChange })),
+        React.createElement(DialogActions_1.default, null,
+            React.createElement(Button_1.default, { onClick: handleClose() }, (t === null || t === void 0 ? void 0 : t.cancel) || localization_1.languagePickerStrings_en.cancel),
+            React.createElement(Button_1.default, { onClick: handleClose(true) }, (t === null || t === void 0 ? void 0 : t.change) || localization_1.languagePickerStrings_en.change))));
+}
+exports.default = ChangeName;

package/dist/GrowingSpacer.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const GrowingSpacer: () => JSX.Element;

package/dist/GrowingSpacer.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GrowingSpacer = void 0;
+var react_1 = __importDefault(require("react"));
+var material_1 = require("@mui/material");
+var GrowingSpacer = function () { return react_1.default.createElement(material_1.Box, { sx: { flexGrow: 1 } }, '\u00A0'); };
+exports.GrowingSpacer = GrowingSpacer;

package/dist/LanguageChoice.d.ts

@@ -1,12 +1,14 @@
 /// <reference types="react" />
 import { ILanguagePickerStrings } from './model';
 import { LangTag, ScriptName } from './langPicker/types';
+import { DisplayName } from './getDisplayName';
 interface IProps {
     list: number[];
     choose: (tag: LangTag) => void;
     secondary?: boolean;
     langTags: LangTag[];
     scriptName: ScriptName;
+    displayName?: DisplayName;
     t: ILanguagePickerStrings;
 }
 export declare function LanguageChoice(props: IProps): JSX.Element;

package/dist/LanguageChoice.js

@@ -1,41 +1,39 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LanguageChoice = void 0;
-var react_1 = __importDefault(require("react"));
-var styles_1 = require("@material-ui/core/styles");
-var core_1 = require("@material-ui/core");
+var react_1 = __importStar(require("react"));
+var material_1 = require("@mui/material");
 var lodash_1 = require("lodash");
-var useStyles = styles_1.makeStyles(function (theme) {
-    return styles_1.createStyles({
-        root: {
-            flexGrow: 1,
-            maxWidth: 752,
-        },
-        paper: {
-            backgroundColor: theme.palette.background.paper,
-        },
-        list: {
-            overflowY: 'scroll',
-        },
-        title: {
-            margin: theme.spacing(4, 0, 2),
-        },
-        firstLine: {
-            display: 'flex',
-        },
-        grow: {
-            flexGrow: 1,
-        },
-    });
-});
+var GrowingSpacer_1 = require("./GrowingSpacer");
+var getDisplayName_1 = require("./getDisplayName");
 function LanguageChoice(props) {
     var list = props.list, langTags = props.langTags, scriptName = props.scriptName, secondary = props.secondary, t = props.t, choose = props.choose;
-    var classes = useStyles();
-    var dense = react_1.default.useState(true)[0];
-    var _a = react_1.default.useState(window.innerHeight), height = _a[0], setHeight = _a[1];
+    var displayName = props.displayName;
+    var dense = (0, react_1.useState)(true)[0];
+    var _a = (0, react_1.useState)(window.innerHeight), height = _a[0], setHeight = _a[1];
     var handleChoose = function (tag) { return function () {
         choose(tag);
     }; };
@@ -44,8 +42,8 @@ function LanguageChoice(props) {
             choose(tag);
         }
     }; };
-    react_1.default.useEffect(function () {
-        var handleResize = lodash_1.debounce(function () { return setHeight(window.innerHeight); }, 100);
+    (0, react_1.useEffect)(function () {
+        var handleResize = (0, lodash_1.debounce)(function () { return setHeight(window.innerHeight); }, 100);
         window.addEventListener('resize', handleResize);
         return function () {
             window.removeEventListener('resize', handleResize);
@@ -59,25 +57,25 @@ function LanguageChoice(props) {
     };
     var detail = function (tag) {
         return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(core_1.Typography, { component: 'span' }, t.languageOf
+            react_1.default.createElement(material_1.Typography, { component: 'span' }, t.languageOf
                 .replace('$1', tag.regionname ? tag.regionname : '')
                 .replace('$2', scriptDetail(tag))),
             react_1.default.createElement("br", null),
-            react_1.default.createElement(core_1.Typography, { component: 'span' }, tag.names ? tag.names.join(', ') : '')));
+            react_1.default.createElement(material_1.Typography, { component: 'span' }, tag.names ? tag.names.join(', ') : '')));
     };
     var langElems = function (refList, refTags) {
         return refList.map(function (r, i) {
             var tag = refTags[r];
-            return (react_1.default.createElement(core_1.ListItem, { key: tag.tag + " " + i, button: true, onClick: handleChoose(tag), onKeyDown: handleKeydown(tag) },
-                react_1.default.createElement(core_1.ListItemText, { primary: react_1.default.createElement("div", { className: classes.firstLine },
-                        react_1.default.createElement(core_1.Typography, null, tag.name),
-                        react_1.default.createElement("div", { className: classes.grow }, '\u00A0'),
-                        react_1.default.createElement(core_1.Typography, null, tag.tag)), secondary: secondary ? detail(tag) : null })));
+            return (react_1.default.createElement(material_1.ListItem, { key: "".concat(tag.tag, " ").concat(i), button: true, onClick: handleChoose(tag), onKeyDown: handleKeydown(tag) },
+                react_1.default.createElement(material_1.ListItemText, { primary: react_1.default.createElement(material_1.Box, { sx: { display: 'flex' } },
+                        react_1.default.createElement(material_1.Typography, null, (0, getDisplayName_1.getDisplayName)(tag.name, tag, displayName)),
+                        react_1.default.createElement(GrowingSpacer_1.GrowingSpacer, null),
+                        react_1.default.createElement(material_1.Typography, null, tag.tag)), secondary: secondary ? detail(tag) : null })));
         });
     };
-    return (react_1.default.createElement("div", { className: classes.root },
-        react_1.default.createElement("div", { className: classes.paper },
-            react_1.default.createElement(core_1.List, { dense: dense, className: classes.list, style: { maxHeight: Math.max(height - 450, 200) } }, langElems(list, langTags)))));
+    return (react_1.default.createElement(material_1.Box, { sx: { flexGrow: 1, maxWidth: 752 } },
+        react_1.default.createElement(material_1.Box, { sx: { backgroundColor: 'background.paper' } },
+            react_1.default.createElement(material_1.List, { dense: dense, sx: { overflowY: 'scroll' }, style: { maxHeight: Math.max(height - 450, 200) } }, langElems(list, langTags)))));
 }
 exports.LanguageChoice = LanguageChoice;
 exports.default = LanguageChoice;

package/dist/LanguagePicker.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { ILanguagePickerStrings } from './model';
+import { LangTag } from './langPicker/types';
+import { DisplayName } from './getDisplayName';
 interface IStateProps {
     t: ILanguagePickerStrings;
 }
@@ -7,9 +9,11 @@ interface IProps extends IStateProps {
     value: string;
     name: string;
     font: string;
+    displayName?: DisplayName;
     setCode?: (code: string) => void;
     setName?: (name: string) => void;
     setFont?: (font: string) => void;
+    setInfo?: (tag: LangTag) => void;
     disabled?: boolean;
 }
 export declare const LanguagePicker: (props: IProps) => JSX.Element;

package/dist/LanguagePicker.js

@@ -16,12 +16,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LanguagePicker = void 0;
 var react_1 = __importDefault(require("react"));
-var styles_1 = require("@material-ui/core/styles");
-var core_1 = require("@material-ui/core");
-var Clear_1 = __importDefault(require("@material-ui/icons/Clear"));
+var material_1 = require("@mui/material");
+var Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
+var BorderColor_1 = __importDefault(require("@mui/icons-material/BorderColor"));
 var util_1 = require("./util");
 var LanguageChoice_1 = __importDefault(require("./LanguageChoice"));
-var clsx_1 = __importDefault(require("clsx"));
 var LgExact_1 = require("./index/LgExact");
 var LgScripts_1 = require("./index/LgScripts");
 var LgScriptName_1 = require("./index/LgScriptName");
@@ -29,51 +28,22 @@ var LgFontMap_1 = require("./index/LgFontMap");
 var bcp47_1 = require("./bcp47");
 var langTags_1 = require("./langTags");
 var useDebounce_1 = __importDefault(require("./useDebounce"));
+var GrowingSpacer_1 = require("./GrowingSpacer");
+var ChangeName_1 = __importDefault(require("./ChangeName"));
+var getDisplayName_1 = require("./getDisplayName");
 var MAXOPTIONS = 50;
-var useStyles = styles_1.makeStyles(function (theme) {
-    return styles_1.createStyles({
-        root: {
-            '& .MuiDialog-paperScrollPaper': {
-                marginBottom: 'auto',
-                width: '90%',
-            },
-        },
-        check: {
-            justifyContent: 'flex-end',
-        },
-        label: {
-            flexDirection: 'row-reverse',
-        },
-        label2: {
-            flexDirection: 'row-reverse',
-            marginRight: 0,
-        },
-        textField: {
-            width: 150,
-            marginLeft: theme.spacing(1),
-            marginRight: theme.spacing(1),
-        },
-        fontField: {
-            width: 300,
-            marginLeft: theme.spacing(1),
-            marginRight: theme.spacing(1),
-        },
-        menu: {
-            width: 200,
-        },
-        hide: {
-            display: 'none',
-        },
-        grow: {
-            flexGrow: 1,
-        },
-    });
-});
-exports.LanguagePicker = function (props) {
+var menuWidth = { width: 200 };
+var StyledDialog = (0, material_1.styled)(material_1.Dialog)(function () { return ({
+    '& .MuiDialog-paperScrollPaper': {
+        marginBottom: 'auto',
+        width: '90%',
+    },
+}); });
+var LanguagePicker = function (props) {
     var _a;
     var disabled = props.disabled;
-    var value = props.value, name = props.name, font = props.font, setCode = props.setCode, setName = props.setName, setFont = props.setFont, t = props.t;
-    var classes = useStyles();
+    var value = props.value, name = props.name, font = props.font, setCode = props.setCode, setName = props.setName, setFont = props.setFont, setInfo = props.setInfo, t = props.t;
+    var displayName = props.displayName;
     var _b = react_1.default.useState(false), open = _b[0], setOpen = _b[1];
     var _c = react_1.default.useState(value), curValue = _c[0], setCurValue = _c[1];
     var _d = react_1.default.useState(name), curName = _d[0], setCurName = _d[1];
@@ -84,8 +54,9 @@ exports.LanguagePicker = function (props) {
     var _j = react_1.default.useState(''), defaultScript = _j[0], setDefaultScript = _j[1];
     var _k = react_1.default.useState(''), defaultFont = _k[0], setDefaultFont = _k[1];
     var _l = react_1.default.useState(Array()), fontOpts = _l[0], setFontOpts = _l[1];
+    var _m = react_1.default.useState(false), newName = _m[0], setNewName = _m[1];
     var langEl = react_1.default.useRef();
-    var debouncedResponse = useDebounce_1.default(response, 500);
+    var debouncedResponse = (0, useDebounce_1.default)(response, 500);
     var TAB = 9;
     var SHIFT = 16;
     var CTRL = 17;
@@ -97,10 +68,11 @@ exports.LanguagePicker = function (props) {
             return;
         if (e.keyCode && [TAB, SHIFT, CTRL].indexOf(e.keyCode) !== -1)
             return;
-        var found = bcp47_1.bcp47Find(curValue);
+        var found = (0, bcp47_1.bcp47Find)(curValue);
         if (curValue !== 'und') {
             if (found && !Array.isArray(found)) {
-                setResponse(curName + ' (' + curValue + ')');
+                var tagName = (0, getDisplayName_1.getDisplayName)(curName, found, displayName);
+                setResponse(tagName + ' (' + curValue + ')');
                 setTag(found);
                 selectFont(found);
                 setDefaultScript(found.script);
@@ -108,9 +80,9 @@ exports.LanguagePicker = function (props) {
             }
             else {
                 var key = curValue.toLocaleLowerCase();
-                if (LgExact_1.hasExact(key)) {
+                if ((0, LgExact_1.hasExact)(key)) {
                     setResponse(curName + ' (' + curValue + ')');
-                    var langTag = langTags_1.langTags[LgExact_1.getExact(key)[0]];
+                    var langTag = langTags_1.langTags[(0, LgExact_1.getExact)(key)[0]];
                     setTag(langTag);
                     selectFont(langTag);
                     setDefaultScript(langTag.script);
@@ -142,7 +114,8 @@ exports.LanguagePicker = function (props) {
     };
     var displayTag = function (tagP, val) {
         if (tagP && tagP.name) {
-            setResponse(tagP.name + ' (' + tagP.tag + ')');
+            var tagName = (0, getDisplayName_1.getDisplayName)(tagP.name, tagP, displayName);
+            setResponse(tagName + ' (' + tagP.tag + ')');
             setCurValue(val ? val : tagP.tag);
             setCurName(tagP.name);
         }
@@ -154,6 +127,8 @@ exports.LanguagePicker = function (props) {
             setName(curName);
         if (setFont)
             setFont(curFont);
+        if (setInfo && tag)
+            setInfo(tag);
         if (tag) {
             displayTag(tag, curValue);
         }
@@ -184,7 +159,7 @@ exports.LanguagePicker = function (props) {
     var selectFont = function (tagP) {
         if (!tagP || tagP.tag === 'und')
             return;
-        var parse = bcp47_1.bcp47Parse(tagP.tag);
+        var parse = (0, bcp47_1.bcp47Parse)(tagP.tag);
         var script = parse.script ? parse.script : tagP.script;
         var region = parse.region ? parse.region : tagP.region;
         var code = script;
@@ -202,6 +177,17 @@ exports.LanguagePicker = function (props) {
         else
             selectDefaultFont(code);
     };
+    var handleNewName = function () {
+        setNewName(true);
+    };
+    var handleCloseName = function () {
+        setNewName(false);
+    };
+    var handleSetName = function (name) {
+        setCurName(name);
+        var tagName = (0, getDisplayName_1.getDisplayName)(name, tag, displayName);
+        setResponse(tagName);
+    };
     react_1.default.useEffect(function () {
         if (response === '')
             handleClear();
@@ -215,7 +201,7 @@ exports.LanguagePicker = function (props) {
     var handleScriptChange = function (tagP) { return function (e) {
         var val = e.target.value;
         setDefaultScript(val);
-        var parse = bcp47_1.bcp47Parse(curValue);
+        var parse = (0, bcp47_1.bcp47Parse)(curValue);
         var script = parse.script ? parse.script : tagP === null || tagP === void 0 ? void 0 : tagP.script;
         if (script !== val) {
             var newTag = parse.language || 'und';
@@ -223,13 +209,13 @@ exports.LanguagePicker = function (props) {
                 newTag += '-' + val;
             if (parse.region)
                 newTag += '-' + parse.region;
-            var found = bcp47_1.bcp47Find(newTag);
+            var found = (0, bcp47_1.bcp47Find)(newTag);
             if (found) {
                 var firstFind = Array.isArray(found) ? found[0] : found;
                 setTag(firstFind);
                 var myTag_1 = firstFind.tag;
                 if (val === IpaTag)
-                    myTag_1 += "-" + IpaTag;
+                    myTag_1 += "-".concat(IpaTag);
                 else if (parse.variant && parse.variant !== IpaTag)
                     myTag_1 += '-' + parse.variant;
                 if (parse.extension)
@@ -246,14 +232,14 @@ exports.LanguagePicker = function (props) {
         }
     }; };
     var selectScript = function (tagP) {
-        var tagParts = bcp47_1.bcp47Parse(tagP.tag);
+        var tagParts = (0, bcp47_1.bcp47Parse)(tagP.tag);
         selectFont(tagP);
         setDefaultScript(tagParts.script ? tagParts.script : tagP.script);
     };
     var scriptList = function (tagP) {
         if (!tagP)
             return [];
-        return LgScripts_1.getScripts(tagP.tag.split('-')[0]).concat(IpaTag);
+        return (0, LgScripts_1.getScripts)(tagP.tag.split('-')[0]).concat(IpaTag);
     };
     var handleLanguageClick = function () {
         if (tag)
@@ -262,7 +248,7 @@ exports.LanguagePicker = function (props) {
     };
     var handleChoose = function (tagP) {
         var newTag = tagP;
-        var found = bcp47_1.bcp47Find(response);
+        var found = (0, bcp47_1.bcp47Find)(response);
         var maxMatch = '';
         var tagList = [tagP.full, tagP.tag];
         if (tagP.iso639_3) {
@@ -273,7 +259,7 @@ exports.LanguagePicker = function (props) {
                 tagList.push(tagP.iso639_3 + '-' + tagP.script + '-' + tagP.region);
             }
         }
-        var parse = bcp47_1.bcp47Parse(response);
+        var parse = (0, bcp47_1.bcp47Parse)(response);
         if (parse.extlang && parse.language) {
             tagList.push(parse.language);
             tagList.push(parse.language + '-' + tagP.script);
@@ -298,7 +284,7 @@ exports.LanguagePicker = function (props) {
         if (maxMatch !== '') {
             var newCode = tagP.tag;
             if (parse.variant && tagP.tag.indexOf(tagP.script) > 0) {
-                newCode = tagP.tag.replace("-" + tagP.script, '');
+                newCode = tagP.tag.replace("-".concat(tagP.script), '');
             }
             newTag = __assign(__assign({}, tagP), { tag: newCode + response.slice(maxMatch.length) });
             displayTag(newTag);
@@ -326,14 +312,14 @@ exports.LanguagePicker = function (props) {
             var list_1 = Array();
             debouncedResponse.split(' ').forEach(function (w) {
                 if (w.length > 1) {
-                    var wLangTags = bcp47_1.bcp47Index(w);
+                    var wLangTags = (0, bcp47_1.bcp47Index)(w);
                     if (wLangTags) {
                         list_1 = mergeList(list_1, wLangTags);
                     }
                     else {
-                        var token = util_1.woBadChar(w).toLocaleLowerCase();
-                        if (LgExact_1.hasExact(token)) {
-                            list_1 = mergeList(list_1, LgExact_1.getExact(token));
+                        var token = (0, util_1.woBadChar)(w).toLocaleLowerCase();
+                        if ((0, LgExact_1.hasExact)(token)) {
+                            list_1 = mergeList(list_1, (0, LgExact_1.getExact)(token));
                         }
                     }
                 }
@@ -342,18 +328,18 @@ exports.LanguagePicker = function (props) {
                 if (w.length > 1) {
                     var lastDash = w.lastIndexOf('-');
                     if (lastDash !== -1) {
-                        var wLangTags = bcp47_1.bcp47Index(w.slice(0, lastDash));
+                        var wLangTags = (0, bcp47_1.bcp47Index)(w.slice(0, lastDash));
                         if (wLangTags)
                             list_1 = mergeList(list_1, wLangTags);
                     }
                     else {
-                        var token_1 = util_1.woBadChar(w).toLocaleLowerCase();
-                        if (LgExact_1.hasPart(token_1)) {
+                        var token_1 = (0, util_1.woBadChar)(w).toLocaleLowerCase();
+                        if ((0, LgExact_1.hasPart)(token_1)) {
                             var tokLen_1 = token_1.length;
-                            Object.keys(LgExact_1.getPart(token_1)).forEach(function (k) {
+                            Object.keys((0, LgExact_1.getPart)(token_1)).forEach(function (k) {
                                 if (list_1.length < MAXOPTIONS) {
                                     if (token_1 === k.slice(0, tokLen_1))
-                                        list_1 = mergeList(list_1, LgExact_1.getExact(k));
+                                        list_1 = mergeList(list_1, (0, LgExact_1.getExact)(k));
                                 }
                             });
                         }
@@ -362,48 +348,49 @@ exports.LanguagePicker = function (props) {
             });
             if (list_1.length > 0) {
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(core_1.FormGroup, { row: true, className: classes.check },
-                        react_1.default.createElement(core_1.FormControlLabel, { className: classes.label2, control: react_1.default.createElement(core_1.Checkbox, { checked: secondary, onChange: function (event) { return setSecondary(event.target.checked); }, value: "secondary" }), label: t.details })),
-                    react_1.default.createElement(LanguageChoice_1.default, { list: list_1, secondary: secondary, choose: handleChoose, langTags: langTags_1.langTags, scriptName: LgScriptName_1.scriptName, t: t })));
+                    react_1.default.createElement(material_1.FormGroup, { row: true, sx: { justifyContent: 'flex-end' } },
+                        react_1.default.createElement(material_1.FormControlLabel, { sx: { flexDirection: 'row-reverse', mr: 0 }, control: react_1.default.createElement(material_1.Checkbox, { checked: secondary, onChange: function (event) { return setSecondary(event.target.checked); }, value: "secondary" }), label: t.details })),
+                    react_1.default.createElement(LanguageChoice_1.default, { list: list_1, secondary: secondary, choose: handleChoose, langTags: langTags_1.langTags, scriptName: LgScriptName_1.scriptName, displayName: displayName, t: t })));
             }
         }
         return react_1.default.createElement(react_1.default.Fragment, null);
     };
     return (react_1.default.createElement("div", { id: "LangBcp47" },
-        react_1.default.createElement(core_1.TextField, { variant: "filled", margin: "dense", id: "lang-bcp47", label: t.language, required: true, style: { width: 300 }, value: value !== 'und' ? name + ' (' + value + ')' : '', onClick: handleClickOpen, onKeyDown: handleClickOpen, disabled: disabled ? disabled : false }),
-        react_1.default.createElement(core_1.Dialog, { id: "LanguagePicker", open: open, onClose: handleCancel, "aria-labelledby": "form-dialog-title", className: classes.root },
-            react_1.default.createElement(core_1.DialogTitle, { id: "form-dialog-title" }, t.selectLanguage),
-            react_1.default.createElement(core_1.DialogContent, { dividers: true },
-                react_1.default.createElement(core_1.TextField, { autoFocus: true, margin: "normal", id: "language", label: t.findALanguage, fullWidth: true, value: response, onChange: handleChange, onClick: handleLanguageClick, variant: "outlined", InputProps: {
+        react_1.default.createElement(material_1.TextField, { variant: "filled", margin: "dense", id: "lang-bcp47", label: t.language, required: true, style: { width: 300 }, value: value !== 'und' ? name + ' (' + value + ')' : '', onClick: handleClickOpen, onKeyDown: handleClickOpen, disabled: disabled ? disabled : false }),
+        react_1.default.createElement(StyledDialog, { id: "LanguagePicker", open: open, onClose: handleCancel, "aria-labelledby": "form-dialog-title" },
+            react_1.default.createElement(material_1.DialogTitle, { id: "form-dialog-title" }, t.selectLanguage),
+            react_1.default.createElement(material_1.DialogContent, { dividers: true },
+                react_1.default.createElement(material_1.TextField, { autoFocus: true, margin: "normal", id: "language", label: t.findALanguage, fullWidth: true, value: response, onChange: handleChange, onClick: handleLanguageClick, variant: "outlined", InputProps: {
                         ref: langEl,
-                        endAdornment: (react_1.default.createElement(core_1.InputAdornment, { position: "end", className: clsx_1.default((_a = {}, _a[classes.hide] = response === '', _a)) },
-                            react_1.default.createElement(core_1.IconButton, { edge: "end", "aria-label": "clear language", onClick: handleClear },
-                                react_1.default.createElement(Clear_1.default, null)))),
+                        endAdornment: (react_1.default.createElement(material_1.InputAdornment, { position: "end" },
+                            react_1.default.createElement(material_1.IconButton, { edge: "end", "aria-label": "clear language", onClick: handleClear },
+                                react_1.default.createElement(Clear_1.default, { color: "primary" })))),
                     } }),
                 optList(),
-                react_1.default.createElement(core_1.FormControlLabel, { control: react_1.default.createElement(core_1.TextField, { id: "select-script", select: true, className: classes.textField, label: t.script, value: defaultScript, onChange: handleScriptChange(tag), style: { width: 400 }, SelectProps: {
-                            MenuProps: {
-                                className: classes.menu,
-                            },
+                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.TextField, { id: "select-script", select: true, sx: { width: 150, mx: 1 }, label: t.script, value: defaultScript, onChange: handleScriptChange(tag), style: { width: 400 }, SelectProps: {
+                            MenuProps: __assign({ sx: menuWidth }),
                         }, helperText: '', margin: "normal", variant: "filled", required: true }, scriptList(tag)
-                        .map(function (s) { return (react_1.default.createElement(core_1.MenuItem, { key: s, value: s }, LgScriptName_1.scriptName[s] + ' - ' + s)); })
+                        .map(function (s) { return (react_1.default.createElement(material_1.MenuItem, { key: s, value: s }, LgScriptName_1.scriptName[s] + ' - ' + s)); })
                         .concat(scriptList(tag).includes(defaultScript)
                         ? []
                         : [
-                            react_1.default.createElement(core_1.MenuItem, { key: defaultScript, value: defaultScript }, defaultScript),
+                            react_1.default.createElement(material_1.MenuItem, { key: defaultScript, value: defaultScript }, defaultScript),
                         ])), label: "" }),
-                react_1.default.createElement(core_1.FormControlLabel, { control: react_1.default.createElement(core_1.TextField, { id: "select-font", select: true, className: classes.fontField, label: t.font, value: defaultFont, onChange: addFontInfo, SelectProps: {
-                            MenuProps: {
-                                className: classes.menu,
-                            },
-                        }, helperText: '', margin: "normal", variant: "filled", required: true }, fontOpts.map(function (s) { return (react_1.default.createElement(core_1.MenuItem, { key: s, value: s }, s)); })), label: "" })),
-            react_1.default.createElement(core_1.DialogActions, null,
+                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.TextField, { id: "select-font", select: true, sx: { width: 300, mx: 1 }, label: t.font, value: defaultFont, onChange: addFontInfo, SelectProps: {
+                            MenuProps: __assign({ sx: menuWidth }),
+                        }, helperText: '', margin: "normal", variant: "filled", required: true }, fontOpts.map(function (s) { return (react_1.default.createElement(material_1.MenuItem, { key: s, value: s }, s)); })), label: "" })),
+            react_1.default.createElement(material_1.DialogActions, null,
                 react_1.default.createElement("a", { href: "https://www.w3.org/International/questions/qa-choosing-language-tags", target: "_blank", rel: "noopener noreferrer" },
-                    react_1.default.createElement(core_1.Typography, null, t.codeExplained)),
-                react_1.default.createElement("div", { className: classes.grow }, '\u00A0'),
-                react_1.default.createElement(core_1.Button, { onClick: handleCancel, color: "primary" },
-                    react_1.default.createElement(core_1.Typography, null, t.cancel)),
-                react_1.default.createElement(core_1.Button, { onClick: handleSelect, color: "primary", disabled: tag === undefined },
-                    react_1.default.createElement(core_1.Typography, null, t.select))))));
+                    react_1.default.createElement(material_1.Typography, null, t.codeExplained)),
+                curName !== '' && (react_1.default.createElement(material_1.Tooltip, { title: (_a = t.changeName) !== null && _a !== void 0 ? _a : 'Change name' },
+                    react_1.default.createElement(material_1.IconButton, { color: "primary", size: "small", onClick: handleNewName },
+                        react_1.default.createElement(BorderColor_1.default, { fontSize: "small" })))),
+                react_1.default.createElement(GrowingSpacer_1.GrowingSpacer, null),
+                react_1.default.createElement(material_1.Button, { onClick: handleCancel, color: "primary" },
+                    react_1.default.createElement(material_1.Typography, null, t.cancel)),
+                react_1.default.createElement(material_1.Button, { onClick: handleSelect, color: "primary", disabled: tag === undefined },
+                    react_1.default.createElement(material_1.Typography, null, t.select)))),
+        newName && (react_1.default.createElement(ChangeName_1.default, { isOpen: newName, onClose: handleCloseName, curName: curName, onNewName: handleSetName, t: t }))));
 };
+exports.LanguagePicker = LanguagePicker;
 exports.default = exports.LanguagePicker;

package/dist/getDisplayName.d.ts

@@ -0,0 +1,3 @@
+import { LangTag } from './model';
+export declare type DisplayName = (curName: string, tag: LangTag | undefined) => string;
+export declare const getDisplayName: (curName: string, tag: LangTag | undefined, displayName?: DisplayName) => string;

package/dist/getDisplayName.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDisplayName = void 0;
+var getDisplayName = function (curName, tag, displayName) {
+    // If user setup a custom language name
+    if (tag && curName !== tag.name)
+        return curName;
+    // if caller provided a custom name formatter
+    if (displayName)
+        return displayName(curName, tag);
+    // By default show the local name if present and the name
+    var tagName = curName;
+    if ((tag === null || tag === void 0 ? void 0 : tag.localname) && tag.localname.toLowerCase() !== curName.toLowerCase())
+        tagName = "".concat(tag.localname, " / ").concat(curName);
+    return tagName;
+};
+exports.getDisplayName = getDisplayName;

package/dist/index/LgExact.js

@@ -204,7 +204,7 @@ var _31925_1 = require("./Exact/31925");
 var _31908_1 = require("./Exact/31908");
 var _20013_1 = require("./Exact/20013");
 var _32321_1 = require("./Exact/32321");
-exports.hasExact = function (key) {
+var hasExact = function (key) {
     if (!key || key.length === 0)
         return false;
     switch (key.slice(0, 1).charCodeAt(0)) {
@@ -413,7 +413,8 @@ exports.hasExact = function (key) {
         default: return false;
     }
 };
-exports.getExact = function (key) {
+exports.hasExact = hasExact;
+var getExact = function (key) {
     if (!key || key.length === 0)
         return [];
     switch (key.slice(0, 1).charCodeAt(0)) {
@@ -622,7 +623,8 @@ exports.getExact = function (key) {
         default: return [];
     }
 };
-exports.hasPart = function (key) {
+exports.getExact = getExact;
+var hasPart = function (key) {
     if (!key || key.length === 0)
         return false;
     switch (key.slice(0, 1).charCodeAt(0)) {
@@ -831,7 +833,8 @@ exports.hasPart = function (key) {
         default: return false;
     }
 };
-exports.getPart = function (key) {
+exports.hasPart = hasPart;
+var getPart = function (key) {
     if (!key || key.length === 0)
         return [];
     switch (key.slice(0, 1).charCodeAt(0)) {
@@ -1040,3 +1043,4 @@ exports.getPart = function (key) {
         default: return [];
     }
 };
+exports.getPart = getPart;

package/dist/index/LgScripts.js

@@ -29,7 +29,7 @@ var _119_1 = require("./Scripts/119");
 var _120_1 = require("./Scripts/120");
 var _121_1 = require("./Scripts/121");
 var _122_1 = require("./Scripts/122");
-exports.hasScripts = function (key) {
+var hasScripts = function (key) {
     if (!key || key.length === 0)
         return false;
     switch (key.slice(0, 1).charCodeAt(0)) {
@@ -63,7 +63,8 @@ exports.hasScripts = function (key) {
         default: return false;
     }
 };
-exports.getScripts = function (key) {
+exports.hasScripts = hasScripts;
+var getScripts = function (key) {
     if (!key || key.length === 0)
         return [];
     switch (key.slice(0, 1).charCodeAt(0)) {
@@ -97,7 +98,8 @@ exports.getScripts = function (key) {
         default: return [];
     }
 };
-exports.hasPart = function (key) {
+exports.getScripts = getScripts;
+var hasPart = function (key) {
     if (!key || key.length === 0)
         return false;
     switch (key.slice(0, 1).charCodeAt(0)) {
@@ -131,7 +133,8 @@ exports.hasPart = function (key) {
         default: return false;
     }
 };
-exports.getPart = function (key) {
+exports.hasPart = hasPart;
+var getPart = function (key) {
     if (!key || key.length === 0)
         return [];
     switch (key.slice(0, 1).charCodeAt(0)) {
@@ -165,3 +168,4 @@ exports.getPart = function (key) {
         default: return [];
     }
 };
+exports.getPart = getPart;

package/dist/index.js

@@ -1,13 +1,17 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./LanguagePicker"), exports);

package/dist/localization/index.d.ts

@@ -12,5 +12,9 @@ export interface ILanguagePickerStrings {
     select: string;
     cancel: string;
     phonetic: string;
+    changeName?: string;
+    nameInstruction?: string;
+    newName?: string;
+    change?: string;
 }
 export declare const languagePickerStrings_en: ILanguagePickerStrings;

package/dist/localization/index.js

@@ -15,5 +15,9 @@ exports.languagePickerStrings_en = {
     inScript: ' in the $1 script',
     select: 'Save',
     cancel: 'Cancel',
-    phonetic: 'Phonetic'
+    phonetic: 'Phonetic',
+    changeName: 'Change Name',
+    nameInstruction: 'If you would like to change the language name enter the new name here.',
+    newName: 'New Language Name',
+    change: 'Change',
 };

package/dist/model/index.js

@@ -1,13 +1,17 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../langPicker/types"), exports);

package/dist/useDebounce.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
 var useDebounce = function (value, delay) {
-    var _a = react_1.useState(value), debouncedValue = _a[0], setDebouncedValue = _a[1];
-    react_1.useEffect(function () {
+    var _a = (0, react_1.useState)(value), debouncedValue = _a[0], setDebouncedValue = _a[1];
+    (0, react_1.useEffect)(function () {
         var handler = setTimeout(function () {
             setDebouncedValue(value);
         }, delay);

package/dist/util/badChar.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.woBadChar = exports.hasBadChar = void 0;
 var badChar = " (),.:/!?_'`0123456789";
-exports.hasBadChar = function (s) {
+var hasBadChar = function (s) {
     for (var _i = 0, _a = s.split(''); _i < _a.length; _i++) {
         var c = _a[_i];
         if (badChar.indexOf(c) !== -1)
@@ -10,7 +10,8 @@ exports.hasBadChar = function (s) {
     }
     return false;
 };
-exports.woBadChar = function (s) {
+exports.hasBadChar = hasBadChar;
+var woBadChar = function (s) {
     if (!s)
         return '';
     var result = '';
@@ -21,3 +22,4 @@ exports.woBadChar = function (s) {
     }
     return result;
 };
+exports.woBadChar = woBadChar;

package/dist/util/index.js

@@ -1,13 +1,17 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./badChar"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-language-picker",
-  "version": "1.1.15",
+  "version": "1.2.2",
   "description": "Material UI language picker",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -29,42 +29,47 @@
   },
   "homepage": "https://github.com/sillsdev/mui-language-picker#readme",
   "devDependencies": {
-    "@babel/cli": "^7.11.6",
-    "@babel/core": "^7.11.6",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-react": "^7.10.4",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
-    "@types/jest": "^24.9.1",
+    "@babel/cli": "^7.18.10",
+    "@babel/core": "^7.18.13",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@mui/icons-material": "^5.10.2",
+    "@mui/material": "^5.10.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
     "@types/lodash": "^4.14.162",
-    "@types/node": "^12.12.67",
-    "@types/react": "^16.9.52",
-    "@types/react-dom": "^16.9.8",
+    "@types/node": "^16.11.52",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
     "copyfiles": "^2.4.0",
-    "jest": "^26.5.3",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-testing-library": "^8.0.1",
     "rimraf": "^3.0.2",
-    "ts-jest": "^26.4.1",
+    "ts-jest": "^28.0.8",
     "tslint": "^6.1.3",
-    "typescript": "^3.9.7",
+    "typescript": "^4.7.4",
     "write": "^2.0.0"
   },
   "peerdependencies": {
-    "@material-ui/core": "^4.10.0",
-    "@material-ui/icons": "^4.9.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@mui/icons-material": "^5.10.2",
+    "@mui/material": "^5.10.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "prettier": {
     "trailingComma": "es5"
   },
   "dependencies": {
-    "keycode": "^2.2.0",
-    "lodash": "^4.17.20"
+    "lodash": "^4.17.21"
   },
   "jest": {
     "moduleFileExtensions": [
@@ -76,5 +81,17 @@
       "\\.(ts|tsx)$": "ts-jest"
     },
     "testRegex": "(/__tests__/.*|.*\\.test)\\.(ts|tsx)$"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }