npm - mui-language-picker - Versions diffs - 1.1.15 → 1.2.0 - Mend

mui-language-picker 1.1.15 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/LICENSE +1 -1
package/README.md +25 -16
package/dist/ChangeName.d.ts +11 -0
package/dist/ChangeName.js +62 -0
package/dist/GrowingSpacer.d.ts +2 -0
package/dist/GrowingSpacer.js +10 -0
package/dist/LanguageChoice.js +39 -43
package/dist/LanguagePicker.d.ts +2 -0
package/dist/LanguagePicker.js +89 -98
package/dist/index/LgExact.js +8 -4
package/dist/index/LgScripts.js +8 -4
package/dist/index.js +6 -2
package/dist/localization/index.d.ts +4 -0
package/dist/localization/index.js +5 -1
package/dist/model/index.js +6 -2
package/dist/useDebounce.js +2 -2
package/dist/util/badChar.js +4 -2
package/dist/util/index.js +6 -2
package/package.json +42 -25

package/LICENSE CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,21 @@ npm install mui-language-picker --save
 ## Usage
-### TypeScript React 16 code
+### TypeScript React 18 code
 ```typescript
 import {
   LanguagePicker,
   ILanguagePickerStrings,
   languagePickerStrings_en,
+  LangTag,
 } 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>()
   return (
     <LanguagePicker
@@ -34,6 +36,7 @@ const MyComponent = (props: any) => {
       setName={setLgName}
       font={fontName}
       setFont={setFontName}
+      setInfo={setTag}
       t={languagePickerStrings_en}
     />
   );
@@ -54,6 +57,7 @@ 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 |
+| setInfo\*  | (tag: LangTag) => void  | callback to receive tag information |
 | disabled\* | boolean                 | true if control disabled            |
 | t          | ILanguagePickerStrings  | localization strings (see below)    |
@@ -63,24 +67,29 @@ 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;
 ```
 ### 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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,62 @@
+"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"));
+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 () {
+        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) || 'Change Name'),
+        React.createElement(DialogContent_1.default, null,
+            React.createElement(DialogContentText_1.default, null, (t === null || t === void 0 ? void 0 : t.nameInstruction) ||
+                'If you would like to change the language name enter the new name here.'),
+            React.createElement(TextField_1.default, { autoFocus: true, margin: "dense", id: "name", label: (t === null || t === void 0 ? void 0 : t.newName) || 'New Language Name', 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),
+            React.createElement(Button_1.default, { onClick: handleClose }, (t === null || t === void 0 ? void 0 : t.change) || 'Change'))));
+}
+exports.default = ChangeName;

package/dist/GrowingSpacer.d.ts ADDED Viewed

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

package/dist/GrowingSpacer.js ADDED Viewed

@@ -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.js CHANGED Viewed

@@ -1,41 +1,37 @@
 "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");
 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 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 +40,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 +55,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, tag.localname ? "".concat(tag.localname, " / ").concat(tag.name) : tag.name),
+                        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 CHANGED Viewed

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { ILanguagePickerStrings } from './model';
+import { LangTag } from './langPicker/types';
 interface IStateProps {
     t: ILanguagePickerStrings;
 }
@@ -10,6 +11,7 @@ interface IProps extends IStateProps {
     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 CHANGED Viewed

@@ -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,20 @@ 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 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 _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 +52,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 +66,13 @@ 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 = curName;
+                if (found.localname)
+                    tagName = "".concat(found.localname, " / ").concat(curName);
+                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,10 @@ exports.LanguagePicker = function (props) {
     };
     var displayTag = function (tagP, val) {
         if (tagP && tagP.name) {
-            setResponse(tagP.name + ' (' + tagP.tag + ')');
+            var tagName = tagP.name;
+            if (tagP.localname)
+                tagName = "".concat(tagP.localname, " / ").concat(tagP.name);
+            setResponse(tagName + ' (' + tagP.tag + ')');
             setCurValue(val ? val : tagP.tag);
             setCurName(tagP.name);
         }
@@ -154,6 +129,8 @@ exports.LanguagePicker = function (props) {
             setName(curName);
         if (setFont)
             setFont(curFont);
+        if (setInfo && tag)
+            setInfo(tag);
         if (tag) {
             displayTag(tag, curValue);
         }
@@ -184,7 +161,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 +179,19 @@ 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 = name;
+        if (tag === null || tag === void 0 ? void 0 : tag.localname)
+            tagName = "".concat(tag.localname, " / ").concat(name);
+        setResponse(tagName);
+    };
     react_1.default.useEffect(function () {
         if (response === '')
             handleClear();
@@ -215,7 +205,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 +213,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 +236,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 +252,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 +263,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 +288,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 +316,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 +332,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 +352,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(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, 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/index/LgExact.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "mui-language-picker",
-  "version": "1.1.15",
+  "version": "1.2.0",
   "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"
+    ]
   }
 }