{"_id":"@crow281/mui-locale-autocomplete","_rev":"2-35edd6a310033deb836b9bfce77b4489","name":"@crow281/mui-locale-autocomplete","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0-rc1":{"name":"@crow281/mui-locale-autocomplete","version":"1.0.0-rc1","keywords":["autocomplete","i18next","locale","mui","react","widget"],"author":{"name":"crow281"},"license":"MIT","_id":"@crow281/mui-locale-autocomplete@1.0.0-rc1","maintainers":[{"name":"crow281","email":"heretic24@proton.me"}],"contributors":[],"dist":{"shasum":"c360448a4b5e05795e33113bf8d05c6f58102823","tarball":"https://registry.npmjs.org/@crow281/mui-locale-autocomplete/-/mui-locale-autocomplete-1.0.0-rc1.tgz","fileCount":31,"integrity":"sha512-Y3JyRXfjSh1d51nppnKti1CRHi/At19G6uNW27zUJOrLYNJcxv5JDtent1jp8cvqFx7Ro1utA8rQkN5cvYJ1TQ==","signatures":[{"sig":"MEUCID31TGRY98HhmUewrD4vaqQxKat47QG9+dqKcsllrx50AiEAtbwl8s2gKbVtQ3hp1c+LPalYpukgeK+EhO6ULr+eNbc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":42156},"type":"module","types":"./dist/types/index.d.ts","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.cjs"}},"gitHead":"baba9c4da3ed83d2b69a91e2c35dd13b257d171f","private":false,"scripts":{"doc":"typedoc --out doc/api/latest src/index.ts","lint":"eslint src/","build":"npm run build:js && npm run build:types","format":"prettier src/ --write","build:js":"rollup --config rollup.config.mjs","build:types":"tsc --emitDeclarationOnly"},"_npmUser":{"name":"crow281","email":"heretic24@proton.me"},"_npmVersion":"10.7.0","description":"A widget library built over Material UI providing extensions of Autocomplete designed to support selecting a locale.","directories":{},"sideEffects":false,"_nodeVersion":"20.14.0","dependencies":{"@babel/runtime":"^7.26.0"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^9.16.0","rollup":"^4.28.1","globals":"^15.13.0","typedoc":"^0.27.3","typescript":"^5.7.2","@babel/core":"^7.26.0","@babel/preset-env":"^7.26.0","typescript-eslint":"^8.17.0","@babel/preset-react":"^7.26.3","eslint-plugin-react":"^7.37.2","@rollup/plugin-babel":"^6.0.4","rollup-plugin-delete":"^2.1.0","eslint-config-prettier":"^9.1.0","prettier-plugin-svelte":"^3.3.2","@rollup/plugin-commonjs":"^28.0.1","@babel/preset-typescript":"^7.26.0","rollup-plugin-includepaths":"^0.2.4","@rollup/plugin-node-resolve":"^15.3.0","rollup-plugin-node-externals":"^7.1.3","@babel/plugin-transform-runtime":"^7.25.9","@trivago/prettier-plugin-sort-imports":"^5.1.0"},"peerDependencies":{"react":"^18.3.1","i18next":"^24.0.5","react-dom":"^18.3.1","@types/react":"^18.3.12","@mui/material":"^6.1.10","react-i18next":"^15.1.3","@emotion/react":"^11.13.5","@emotion/styled":"^11.13.5","@types/react-dom":"^18.3.1","@mui/icons-material":"^6.1.10"},"_npmOperationalInternal":{"tmp":"tmp/mui-locale-autocomplete_1.0.0-rc1_1733705147243_0.5146585491056683","host":"s3://npm-registry-packages-npm-production"}},"1.0.0-rc2":{"name":"@crow281/mui-locale-autocomplete","version":"1.0.0-rc2","keywords":["autocomplete","i18next","locale","mui","react","widget"],"author":{"name":"crow281"},"license":"MIT","_id":"@crow281/mui-locale-autocomplete@1.0.0-rc2","maintainers":[{"name":"crow281","email":"heretic24@proton.me"}],"contributors":[],"homepage":"https://github.com/Crow281/mui-locale-autocomplete#readme","bugs":{"url":"https://github.com/Crow281/mui-locale-autocomplete/issues"},"dist":{"shasum":"cadb68f1c6362b3118429684aa82604adfff1d5e","tarball":"https://registry.npmjs.org/@crow281/mui-locale-autocomplete/-/mui-locale-autocomplete-1.0.0-rc2.tgz","fileCount":31,"integrity":"sha512-eWcnhqTm6Q0rU8FrGUv8rdGPJA2lGJREOarO46FLDEri7USOfn+DeYRB2iaInsnoWRrfJYm4oxkpuqVQeyoqbA==","signatures":[{"sig":"MEUCID40jQS2d5yqQztcCtCbFd+zdc3Rjf+j0MaX+fhJU4bUAiEA7PwwI5ykhDgp2vND091KfnoR2aGrHAJX/m4hBNFsFSk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":42322},"type":"module","types":"./dist/types/index.d.ts","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"gitHead":"baba9c4da3ed83d2b69a91e2c35dd13b257d171f","private":false,"scripts":{"doc":"typedoc --out doc/api/latest src/index.ts","lint":"eslint src/","build":"npm run build:js && npm run build:types","format":"prettier src/ --write","build:js":"rollup --config rollup.config.mjs","build:types":"tsc --emitDeclarationOnly"},"_npmUser":{"name":"crow281","email":"heretic24@proton.me"},"repository":{"url":"git+https://github.com/Crow281/mui-locale-autocomplete.git","type":"git"},"_npmVersion":"10.7.0","description":"A widget library built over Material UI providing extensions of Autocomplete designed to support selecting a locale.","directories":{},"sideEffects":false,"_nodeVersion":"20.14.0","dependencies":{"@babel/runtime":"^7.26.0"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^9.16.0","rollup":"^4.28.1","globals":"^15.13.0","typedoc":"^0.27.3","typescript":"^5.7.2","@babel/core":"^7.26.0","@babel/preset-env":"^7.26.0","typescript-eslint":"^8.17.0","@babel/preset-react":"^7.26.3","eslint-plugin-react":"^7.37.2","@rollup/plugin-babel":"^6.0.4","rollup-plugin-delete":"^2.1.0","eslint-config-prettier":"^9.1.0","prettier-plugin-svelte":"^3.3.2","@rollup/plugin-commonjs":"^28.0.1","@babel/preset-typescript":"^7.26.0","rollup-plugin-includepaths":"^0.2.4","@rollup/plugin-node-resolve":"^15.3.0","rollup-plugin-node-externals":"^7.1.3","@babel/plugin-transform-runtime":"^7.25.9","@trivago/prettier-plugin-sort-imports":"^5.1.0"},"peerDependencies":{"react":"^18.3.1","i18next":"^24.0.5","react-dom":"^18.3.1","@types/react":"^18.3.12","@mui/material":"^6.1.10","react-i18next":"^15.1.3","@emotion/react":"^11.13.5","@emotion/styled":"^11.13.5","@types/react-dom":"^18.3.1","@mui/icons-material":"^6.1.10"},"_npmOperationalInternal":{"tmp":"tmp/mui-locale-autocomplete_1.0.0-rc2_1733705768466_0.047571972966784726","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@crow281/mui-locale-autocomplete","private":false,"license":"MIT","version":"1.0.0","keywords":["autocomplete","i18next","locale","mui","react","widget"],"description":"A widget library built over Material UI providing extensions of Autocomplete designed to support selecting a locale.","author":{"name":"crow281"},"contributors":[],"scripts":{"lint":"eslint src/","format":"prettier src/ --write","build:types":"tsc --emitDeclarationOnly","build:js":"rollup --config rollup.config.mjs","build":"npm run build:js && npm run build:types","doc":"typedoc"},"homepage":"https://github.com/Crow281/mui-locale-autocomplete","bugs":{"url":"https://github.com/Crow281/mui-locale-autocomplete/issues"},"repository":{"type":"git","url":"git+https://github.com/Crow281/mui-locale-autocomplete.git"},"type":"module","sideEffects":false,"exports":{".":{"types":"./dist/types/index.d.ts","require":"./dist/index.cjs","import":"./dist/index.mjs"}},"devDependencies":{"@babel/core":"^7.26.0","@babel/plugin-transform-runtime":"^7.25.9","@babel/preset-env":"^7.26.0","@babel/preset-react":"^7.26.3","@babel/preset-typescript":"^7.26.0","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-commonjs":"^28.0.1","@rollup/plugin-node-resolve":"^16.0.0","@trivago/prettier-plugin-sort-imports":"^5.1.0","eslint":"^9.16.0","eslint-config-prettier":"^9.1.0","eslint-plugin-react":"^7.37.2","globals":"^15.13.0","prettier-plugin-svelte":"^3.3.2","rollup":"^4.28.1","rollup-plugin-delete":"^2.1.0","rollup-plugin-includepaths":"^0.2.4","rollup-plugin-node-externals":"^8.0.0","typedoc":"^0.27.3","typescript":"^5.7.2","typescript-eslint":"^8.17.0"},"peerDependencies":{"@emotion/react":"^11.14.0","@emotion/styled":"^11.14.0","@mui/icons-material":"^6.3.0","@mui/material":"^6.3.0","@types/react":"^19.0.2","@types/react-dom":"^19.0.2","i18next":"^24.2.0","react":"^19.0.0","react-dom":"^19.0.0","react-i18next":"^15.2.0"},"dependencies":{"@babel/runtime":"^7.26.0"},"_id":"@crow281/mui-locale-autocomplete@1.0.0","gitHead":"210e16f0d49836c384515993fb99430769b0f01b","_nodeVersion":"20.14.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-/23ZMshGNJVuDTS7nsABp7kKBYFBrRBuplHGsJpB1ynXw/oQJBZzodDi1p95JV35Y9Kq8LqnuG4wnMsKGYsLkw==","shasum":"599cea7af8cf92812cfd96c8a52d002d3a2cc4de","tarball":"https://registry.npmjs.org/@crow281/mui-locale-autocomplete/-/mui-locale-autocomplete-1.0.0.tgz","fileCount":44,"unpackedSize":69457,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjCOBmnref9MTxrYBUGavTbTUzOCPR4lz9tGpmyWx7DgIgcQLtppTecZFuqhvwBPLn1TTkOJwtOePSc9Y2Vsuzyvg="}]},"_npmUser":{"name":"crow281","email":"heretic24@proton.me"},"directories":{},"maintainers":[{"name":"crow281","email":"heretic24@proton.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mui-locale-autocomplete_1.0.0_1735361521673_0.2621804976002273"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-09T00:45:47.131Z","modified":"2024-12-28T04:52:02.051Z","1.0.0-rc1":"2024-12-09T00:45:47.451Z","1.0.0-rc2":"2024-12-09T00:56:08.658Z","1.0.0":"2024-12-28T04:52:01.831Z"},"bugs":{"url":"https://github.com/Crow281/mui-locale-autocomplete/issues"},"author":{"name":"crow281"},"license":"MIT","homepage":"https://github.com/Crow281/mui-locale-autocomplete","keywords":["autocomplete","i18next","locale","mui","react","widget"],"repository":{"type":"git","url":"git+https://github.com/Crow281/mui-locale-autocomplete.git"},"description":"A widget library built over Material UI providing extensions of Autocomplete designed to support selecting a locale.","contributors":[],"maintainers":[{"name":"crow281","email":"heretic24@proton.me"}],"readme":"# mui-locale-autocomplete\n\n## Introduction\n![LocaleAutocomplete](https://crow281.github.io/mui-locale-autocomplete/image/LocaleAutocomplete.png)\n\nA widget library built over Material UI providing extensions of Autocomplete designed to support selecting a locale.\n\nYou can access the github project [here](https://github.com/Crow281/mui-locale-autocomplete).\n\n## Installation\n\nGet [@crow281/mui-locale-autocomplete from NPM](https://www.npmjs.com/package/@crow281/mui-locale-autocomplete):\n\n```console\nnpm i --save @crow281/mui-locale-autocomplete\n```\n\n@crow281/mui-locale-autocomplete is also dependent on Material UI and Material Icons as peer dependencies:\n\n```console\nnpm i --save @mui/icons-material @mui/material @emotion/styled @emotion/react\n```\n\nIf you want to be able to use I18nextAutocomplete, you will need to install react-i18next and i18next:\n\n```console\nnpm i --save react-i18next i18next\n```\n\n## Documentation\n\nThe API documentation is available [here](https://crow281.github.io/mui-locale-autocomplete/doc/api/latest/).\n\n## Demo\nThe sample project is [here](https://github.com/Crow281/mui-locale-autocomplete/blob/main/sample/locale-autocomplete-demo/).\n\nYou can view a live demo [here](https://crow281.github.io/mui-locale-autocomplete/sample/locale-autocomplete-demo/).\n\n## Sample Code\nHere are some quick samples to show you how the widgets can be used.\n\n### LocaleAutocomplete\nLocaleAutocomplete is a basic class in need of setup.\n\n```typescript\nimport { LocaleAutocomplete } from \"@crow281/mui-locale-autocomplete\";\nimport { useState } from \"react\";\n\n/**\n * Displays LocaleAutocomplete in action.\n */\nexport function LocaleAutocompleteDemo(): JSX.Element {\n    //Currently selected locale.\n    const [selectedLocale, setSelectedLocale] = useState(\"Null\");\n\n    //List of locales user can pick from.\n    const locales: Intl.Locale[] = [\n        new Intl.Locale(\"en\"),\n        new Intl.Locale(\"en-GB\"),\n        new Intl.Locale(\"en-US\"),\n        new Intl.Locale(\"es\"),\n    ];\n\n    //Function called whenever locale is changed.\n    const onChange = (\n        event: React.SyntheticEvent<Element, Event>,\n        value: Intl.Locale | null,\n    ): void => {\n        //Records string value of locale.\n        let localeString: string;\n\n        //Update currently selected locale.\n        //If a locale was selected.\n        if (value) {\n            //Convert to string.\n            localeString = value.baseName;\n\n            //If nothing was selected.\n        } else {\n            //Tell user selected locale is null.\n            localeString = \"Null\";\n        }\n\n        //Update the selected locale.\n        setSelectedLocale(localeString);\n    };\n\n    return (\n        <div>\n            <LocaleAutocomplete options={locales} onChange={onChange} />\n            <div>Selected Locale: {selectedLocale}</div>\n        </div>\n    );\n}\n```\n\n### I18nextAutocomplete\nI18nextAutocomplete automatically binds to I18next, so just putting the element where it is needed is enough.\n\n```typescript\nimport { I18nextAutocomplete } from \"@crow281/mui-locale-autocomplete\";\nimport { useTranslation } from \"react-i18next\";\n\n/**\n *\n * @returns\n * Widget demonstrating I18nextAutocomplete\n */\nexport function I18nextAutocompleteDemo() {\n    //Fetch localization.\n    const { t, i18n } = useTranslation();\n\n    return (\n        <div>\n            <I18nextAutocomplete />\n            <br />\n            <div\n                style={{\n                    textAlign: \"left\",\n                }}\n            >\n                Selected Locale: {i18n.language}\n            </div>\n            <table\n                style={{\n                    border: \"1px solid black\",\n                }}\n            >\n                <thead>\n                    <tr>\n                        <th>Localization Key</th>\n                        <th>Translated Value</th>\n                    </tr>\n                </thead>\n                <tbody>\n                    <tr>\n                        <td>\"example.goodbye\"</td>\n                        <td>{t(\"example.goodbye\")}</td>\n                    </tr>\n                    <tr>\n                        <td>\"example.goodDay\"</td>\n                        <td>{t(\"example.goodDay\")}</td>\n                    </tr>\n                    <tr>\n                        <td>\"example.helloWorld\"</td>\n                        <td>{t(\"example.helloWorld\")}</td>\n                    </tr>\n                </tbody>\n            </table>\n        </div>\n    );\n}\n```\n","readmeFilename":"README.md"}