@strapi/i18n 5.28.0 → 5.30.0

package/dist/admin/components/LocaleListCell.js

@@ -1,14 +1,19 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
-var icons = require('@strapi/icons');
+var qs = require('qs');
 var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
 var locales = require('../services/locales.js');
+var getTranslation = require('../utils/getTranslation.js');
 
-const LocaleListCell = ({ locale: currentLocale, localizations })=>{
-    const { locale: language } = reactIntl.useIntl();
+const LocaleListCell = ({ locale: currentLocale, localizations, documentId })=>{
+    const { locale: language, formatMessage } = reactIntl.useIntl();
     const { data: locales$1 = [] } = locales.useGetLocalesQuery();
+    const navigate = reactRouterDom.useNavigate();
+    const [{ query }] = strapiAdmin.useQueryParams();
     const formatter = designSystem.useCollator(language, {
         sensitivity: 'base'
     });
@@ -24,55 +29,70 @@ const LocaleListCell = ({ locale: currentLocale, localizations })=>{
             return loc === locale.code;
         });
         if (createdLocale) {
-            acc.push(locale);
+            const name = locale.isDefault ? `${locale.name} (default)` : locale.name;
+            acc.push({
+                code: locale.code,
+                name
+            });
         }
         return acc;
-    }, []).map((locale)=>{
-        if (locale.isDefault) {
-            return `${locale.name} (default)`;
+    }, []).toSorted((a, b)=>formatter.compare(a.name, b.name));
+    const getDisplayText = ()=>{
+        const displayedLocales = localesForDocument.slice(0, 2);
+        const remainingCount = localesForDocument.length - 2;
+        const baseText = displayedLocales.map(({ name })=>name).join(', ');
+        if (remainingCount <= 0) {
+            return baseText;
         }
-        return locale.name;
-    }).toSorted((a, b)=>formatter.compare(a, b));
-    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Popover.Root, {
+        return formatMessage({
+            id: getTranslation.getTranslation('CMListView.popover.display-locales.more'),
+            defaultMessage: '{locales} + {count} more'
+        }, {
+            locales: baseText,
+            count: remainingCount
+        });
+    };
+    const handleLocaleClick = (localeCode)=>{
+        navigate({
+            pathname: documentId,
+            search: qs.stringify({
+                plugins: {
+                    ...query.plugins,
+                    i18n: {
+                        locale: localeCode
+                    }
+                }
+            })
+        });
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Trigger, {
-                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
-                    variant: "ghost",
-                    type: "button",
-                    onClick: (e)=>e.stopPropagation(),
-                    children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                        minWidth: "100%",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        fontWeight: "regular",
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                textColor: "neutral800",
-                                ellipsis: true,
-                                marginRight: 2,
-                                children: localesForDocument.join(', ')
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                                children: /*#__PURE__*/ jsxRuntime.jsx(icons.CaretDown, {
-                                    width: "1.2rem",
-                                    height: "1.2rem"
-                                })
-                            })
-                        ]
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Trigger, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                    minWidth: "100%",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontWeight: "regular",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                        textColor: "neutral800",
+                        ellipsis: true,
+                        marginRight: 2,
+                        children: getDisplayText()
                     })
                 })
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Content, {
-                sideOffset: 16,
-                children: /*#__PURE__*/ jsxRuntime.jsx("ul", {
-                    children: localesForDocument.map((name)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-                            padding: 3,
-                            tag: "li",
-                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                children: name
-                            })
-                        }, name))
-                })
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Content, {
+                children: localesForDocument.map(({ code, name })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        onClick: (e)=>{
+                            e.stopPropagation();
+                            handleLocaleClick(code);
+                        },
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            textColor: "neutral800",
+                            fontWeight: "regular",
+                            children: name
+                        })
+                    }, code))
             })
         ]
     });

package/dist/admin/components/LocaleListCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocaleListCell.js","sources":["../../../admin/src/components/LocaleListCell.tsx"],"sourcesContent":["import { Box, Flex, Popover, Typography, useCollator, Button } from '@strapi/design-system';\nimport { CaretDown } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { Locale } from '../../../shared/contracts/locales';\nimport { useGetLocalesQuery } from '../services/locales';\n\ninterface LocaleListCellProps {\n  localizations: { locale: string }[];\n  locale: string;\n}\n\nconst LocaleListCell = ({ locale: currentLocale, localizations }: LocaleListCellProps) => {\n  const { locale: language } = useIntl();\n  const { data: locales = [] } = useGetLocalesQuery();\n  const formatter = useCollator(language, {\n    sensitivity: 'base',\n  });\n\n  if (!Array.isArray(locales) || !localizations) {\n    return null;\n  }\n\n  const availableLocales = localizations.map((loc) => loc.locale);\n\n  const localesForDocument = locales\n    .reduce<Locale[]>((acc, locale) => {\n      const createdLocale = [currentLocale, ...availableLocales].find((loc) => {\n        return loc === locale.code;\n      });\n\n      if (createdLocale) {\n        acc.push(locale);\n      }\n\n      return acc;\n    }, [])\n    .map((locale) => {\n      if (locale.isDefault) {\n        return `${locale.name} (default)`;\n      }\n\n      return locale.name;\n    })\n    .toSorted((a, b) => formatter.compare(a, b));\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger>\n        <Button variant=\"ghost\" type=\"button\" onClick={(e) => e.stopPropagation()}>\n          <Flex minWidth=\"100%\" alignItems=\"center\" justifyContent=\"center\" fontWeight=\"regular\">\n            <Typography textColor=\"neutral800\" ellipsis marginRight={2}>\n              {localesForDocument.join(', ')}\n            </Typography>\n            <Flex>\n              <CaretDown width=\"1.2rem\" height=\"1.2rem\" />\n            </Flex>\n          </Flex>\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content sideOffset={16}>\n        <ul>\n          {localesForDocument.map((name) => (\n            <Box key={name} padding={3} tag=\"li\">\n              <Typography>{name}</Typography>\n            </Box>\n          ))}\n        </ul>\n      </Popover.Content>\n    </Popover.Root>\n  );\n};\n\nexport { LocaleListCell };\nexport type { LocaleListCellProps };\n"],"names":["LocaleListCell","locale","currentLocale","localizations","language","useIntl","data","locales","useGetLocalesQuery","formatter","useCollator","sensitivity","Array","isArray","availableLocales","map","loc","localesForDocument","reduce","acc","createdLocale","find","code","push","isDefault","name","toSorted","a","b","compare","_jsxs","Popover","Root","_jsx","Trigger","Button","variant","type","onClick","e","stopPropagation","Flex","minWidth","alignItems","justifyContent","fontWeight","Typography","textColor","ellipsis","marginRight","join","CaretDown","width","height","Content","sideOffset","ul","Box","padding","tag"],"mappings":"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"}
+{"version":3,"file":"LocaleListCell.js","sources":["../../../admin/src/components/LocaleListCell.tsx"],"sourcesContent":["import { useQueryParams } from '@strapi/admin/strapi-admin';\nimport { Flex, Menu, Typography, useCollator } from '@strapi/design-system';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { useNavigate } from 'react-router-dom';\n\nimport { useGetLocalesQuery } from '../services/locales';\nimport { getTranslation } from '../utils/getTranslation';\n\nimport type { I18nBaseQuery } from '../types';\n\ninterface LocaleListCellProps {\n  localizations: { locale: string }[];\n  locale: string;\n  documentId: string;\n}\n\nconst LocaleListCell = ({\n  locale: currentLocale,\n  localizations,\n  documentId,\n}: LocaleListCellProps) => {\n  const { locale: language, formatMessage } = useIntl();\n  const { data: locales = [] } = useGetLocalesQuery();\n  const navigate = useNavigate();\n  const [{ query }] = useQueryParams<I18nBaseQuery>();\n  const formatter = useCollator(language, {\n    sensitivity: 'base',\n  });\n\n  if (!Array.isArray(locales) || !localizations) {\n    return null;\n  }\n\n  const availableLocales = localizations.map((loc) => loc.locale);\n\n  const localesForDocument = locales\n    .reduce<Array<{ code: string; name: string }>>((acc, locale) => {\n      const createdLocale = [currentLocale, ...availableLocales].find((loc) => {\n        return loc === locale.code;\n      });\n\n      if (createdLocale) {\n        const name = locale.isDefault ? `${locale.name} (default)` : locale.name;\n        acc.push({ code: locale.code, name });\n      }\n\n      return acc;\n    }, [])\n    .toSorted((a, b) => formatter.compare(a.name, b.name));\n\n  const getDisplayText = () => {\n    const displayedLocales = localesForDocument.slice(0, 2);\n    const remainingCount = localesForDocument.length - 2;\n\n    const baseText = displayedLocales.map(({ name }) => name).join(', ');\n\n    if (remainingCount <= 0) {\n      return baseText;\n    }\n\n    return formatMessage(\n      {\n        id: getTranslation('CMListView.popover.display-locales.more'),\n        defaultMessage: '{locales} + {count} more',\n      },\n      { locales: baseText, count: remainingCount }\n    );\n  };\n\n  const handleLocaleClick = (localeCode: string) => {\n    navigate({\n      pathname: documentId,\n      search: stringify({\n        plugins: {\n          ...query.plugins,\n          i18n: { locale: localeCode },\n        },\n      }),\n    });\n  };\n\n  return (\n    <Menu.Root>\n      <Menu.Trigger>\n        <Flex minWidth=\"100%\" alignItems=\"center\" justifyContent=\"center\" fontWeight=\"regular\">\n          <Typography textColor=\"neutral800\" ellipsis marginRight={2}>\n            {getDisplayText()}\n          </Typography>\n        </Flex>\n      </Menu.Trigger>\n      <Menu.Content>\n        {localesForDocument.map(({ code, name }) => (\n          <Menu.Item\n            key={code}\n            onClick={(e: React.MouseEvent) => {\n              e.stopPropagation();\n              handleLocaleClick(code);\n            }}\n          >\n            <Typography textColor=\"neutral800\" fontWeight=\"regular\">\n              {name}\n            </Typography>\n          </Menu.Item>\n        ))}\n      </Menu.Content>\n    </Menu.Root>\n  );\n};\n\nexport { LocaleListCell };\nexport type { LocaleListCellProps };\n"],"names":["LocaleListCell","locale","currentLocale","localizations","documentId","language","formatMessage","useIntl","data","locales","useGetLocalesQuery","navigate","useNavigate","query","useQueryParams","formatter","useCollator","sensitivity","Array","isArray","availableLocales","map","loc","localesForDocument","reduce","acc","createdLocale","find","code","name","isDefault","push","toSorted","a","b","compare","getDisplayText","displayedLocales","slice","remainingCount","length","baseText","join","id","getTranslation","defaultMessage","count","handleLocaleClick","localeCode","pathname","search","stringify","plugins","i18n","_jsxs","Menu","Root","_jsx","Trigger","Flex","minWidth","alignItems","justifyContent","fontWeight","Typography","textColor","ellipsis","marginRight","Content","Item","onClick","e","stopPropagation"],"mappings":";;;;;;;;;;;AAiBMA,MAAAA,cAAAA,GAAiB,CAAC,EACtBC,MAAAA,EAAQC,aAAa,EACrBC,aAAa,EACbC,UAAU,EACU,GAAA;AACpB,IAAA,MAAM,EAAEH,MAAQI,EAAAA,QAAQ,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC5C,IAAA,MAAM,EAAEC,IAAAA,EAAMC,SAAU,GAAA,EAAE,EAAE,GAAGC,0BAAAA,EAAAA;AAC/B,IAAA,MAAMC,QAAWC,GAAAA,0BAAAA,EAAAA;AACjB,IAAA,MAAM,CAAC,EAAEC,KAAK,EAAE,CAAC,GAAGC,0BAAAA,EAAAA;IACpB,MAAMC,SAAAA,GAAYC,yBAAYX,QAAU,EAAA;QACtCY,WAAa,EAAA;AACf,KAAA,CAAA;AAEA,IAAA,IAAI,CAACC,KAAMC,CAAAA,OAAO,CAACV,SAAAA,CAAAA,IAAY,CAACN,aAAe,EAAA;QAC7C,OAAO,IAAA;AACT;AAEA,IAAA,MAAMiB,mBAAmBjB,aAAckB,CAAAA,GAAG,CAAC,CAACC,GAAAA,GAAQA,IAAIrB,MAAM,CAAA;AAE9D,IAAA,MAAMsB,kBAAqBd,GAAAA,SAAAA,CACxBe,MAAM,CAAwC,CAACC,GAAKxB,EAAAA,MAAAA,GAAAA;AACnD,QAAA,MAAMyB,aAAgB,GAAA;AAACxB,YAAAA,aAAAA;AAAkBkB,YAAAA,GAAAA;SAAiB,CAACO,IAAI,CAAC,CAACL,GAAAA,GAAAA;YAC/D,OAAOA,GAAAA,KAAQrB,OAAO2B,IAAI;AAC5B,SAAA,CAAA;AAEA,QAAA,IAAIF,aAAe,EAAA;AACjB,YAAA,MAAMG,IAAO5B,GAAAA,MAAAA,CAAO6B,SAAS,GAAG,CAAC,EAAE7B,MAAO4B,CAAAA,IAAI,CAAC,UAAU,CAAC,GAAG5B,OAAO4B,IAAI;AACxEJ,YAAAA,GAAAA,CAAIM,IAAI,CAAC;AAAEH,gBAAAA,IAAAA,EAAM3B,OAAO2B,IAAI;AAAEC,gBAAAA;AAAK,aAAA,CAAA;AACrC;QAEA,OAAOJ,GAAAA;AACT,KAAA,EAAG,EAAE,CAAA,CACJO,QAAQ,CAAC,CAACC,CAAGC,EAAAA,CAAAA,GAAMnB,SAAUoB,CAAAA,OAAO,CAACF,CAAAA,CAAEJ,IAAI,EAAEK,EAAEL,IAAI,CAAA,CAAA;AAEtD,IAAA,MAAMO,cAAiB,GAAA,IAAA;AACrB,QAAA,MAAMC,gBAAmBd,GAAAA,kBAAAA,CAAmBe,KAAK,CAAC,CAAG,EAAA,CAAA,CAAA;QACrD,MAAMC,cAAAA,GAAiBhB,kBAAmBiB,CAAAA,MAAM,GAAG,CAAA;QAEnD,MAAMC,QAAAA,GAAWJ,gBAAiBhB,CAAAA,GAAG,CAAC,CAAC,EAAEQ,IAAI,EAAE,GAAKA,IAAMa,CAAAA,CAAAA,IAAI,CAAC,IAAA,CAAA;AAE/D,QAAA,IAAIH,kBAAkB,CAAG,EAAA;YACvB,OAAOE,QAAAA;AACT;AAEA,QAAA,OAAOnC,aACL,CAAA;AACEqC,YAAAA,EAAAA,EAAIC,6BAAe,CAAA,yCAAA,CAAA;YACnBC,cAAgB,EAAA;SAElB,EAAA;YAAEpC,OAASgC,EAAAA,QAAAA;YAAUK,KAAOP,EAAAA;AAAe,SAAA,CAAA;AAE/C,KAAA;AAEA,IAAA,MAAMQ,oBAAoB,CAACC,UAAAA,GAAAA;QACzBrC,QAAS,CAAA;YACPsC,QAAU7C,EAAAA,UAAAA;AACV8C,YAAAA,MAAAA,EAAQC,YAAU,CAAA;gBAChBC,OAAS,EAAA;AACP,oBAAA,GAAGvC,MAAMuC,OAAO;oBAChBC,IAAM,EAAA;wBAAEpD,MAAQ+C,EAAAA;AAAW;AAC7B;AACF,aAAA;AACF,SAAA,CAAA;AACF,KAAA;IAEA,qBACEM,eAAA,CAACC,kBAAKC,IAAI,EAAA;;AACR,0BAAAC,cAAA,CAACF,kBAAKG,OAAO,EAAA;AACX,gBAAA,QAAA,gBAAAD,cAACE,CAAAA,iBAAAA,EAAAA;oBAAKC,QAAS,EAAA,MAAA;oBAAOC,UAAW,EAAA,QAAA;oBAASC,cAAe,EAAA,QAAA;oBAASC,UAAW,EAAA,SAAA;AAC3E,oBAAA,QAAA,gBAAAN,cAACO,CAAAA,uBAAAA,EAAAA;wBAAWC,SAAU,EAAA,YAAA;wBAAaC,QAAQ,EAAA,IAAA;wBAACC,WAAa,EAAA,CAAA;AACtD/B,wBAAAA,QAAAA,EAAAA,cAAAA;;;;AAIP,0BAAAqB,cAAA,CAACF,kBAAKa,OAAO,EAAA;0BACV7C,kBAAmBF,CAAAA,GAAG,CAAC,CAAC,EAAEO,IAAI,EAAEC,IAAI,EAAE,iBACrC4B,cAACF,CAAAA,iBAAAA,CAAKc,IAAI,EAAA;AAERC,wBAAAA,OAAAA,EAAS,CAACC,CAAAA,GAAAA;AACRA,4BAAAA,CAAAA,CAAEC,eAAe,EAAA;4BACjBzB,iBAAkBnB,CAAAA,IAAAA,CAAAA;AACpB,yBAAA;AAEA,wBAAA,QAAA,gBAAA6B,cAACO,CAAAA,uBAAAA,EAAAA;4BAAWC,SAAU,EAAA,YAAA;4BAAaF,UAAW,EAAA,SAAA;AAC3ClC,4BAAAA,QAAAA,EAAAA;;AAPED,qBAAAA,EAAAA,IAAAA,CAAAA;;;;AAcjB;;;;"}

package/dist/admin/components/LocaleListCell.mjs

@@ -1,12 +1,17 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useCollator, Popover, Button, Flex, Typography, Box } from '@strapi/design-system';
-import { CaretDown } from '@strapi/icons';
+import { useQueryParams } from '@strapi/admin/strapi-admin';
+import { useCollator, Menu, Flex, Typography } from '@strapi/design-system';
+import { stringify } from 'qs';
 import { useIntl } from 'react-intl';
+import { useNavigate } from 'react-router-dom';
 import { useGetLocalesQuery } from '../services/locales.mjs';
+import { getTranslation } from '../utils/getTranslation.mjs';
 
-const LocaleListCell = ({ locale: currentLocale, localizations })=>{
-    const { locale: language } = useIntl();
+const LocaleListCell = ({ locale: currentLocale, localizations, documentId })=>{
+    const { locale: language, formatMessage } = useIntl();
     const { data: locales = [] } = useGetLocalesQuery();
+    const navigate = useNavigate();
+    const [{ query }] = useQueryParams();
     const formatter = useCollator(language, {
         sensitivity: 'base'
     });
@@ -22,55 +27,70 @@ const LocaleListCell = ({ locale: currentLocale, localizations })=>{
             return loc === locale.code;
         });
         if (createdLocale) {
-            acc.push(locale);
+            const name = locale.isDefault ? `${locale.name} (default)` : locale.name;
+            acc.push({
+                code: locale.code,
+                name
+            });
         }
         return acc;
-    }, []).map((locale)=>{
-        if (locale.isDefault) {
-            return `${locale.name} (default)`;
+    }, []).toSorted((a, b)=>formatter.compare(a.name, b.name));
+    const getDisplayText = ()=>{
+        const displayedLocales = localesForDocument.slice(0, 2);
+        const remainingCount = localesForDocument.length - 2;
+        const baseText = displayedLocales.map(({ name })=>name).join(', ');
+        if (remainingCount <= 0) {
+            return baseText;
         }
-        return locale.name;
-    }).toSorted((a, b)=>formatter.compare(a, b));
-    return /*#__PURE__*/ jsxs(Popover.Root, {
+        return formatMessage({
+            id: getTranslation('CMListView.popover.display-locales.more'),
+            defaultMessage: '{locales} + {count} more'
+        }, {
+            locales: baseText,
+            count: remainingCount
+        });
+    };
+    const handleLocaleClick = (localeCode)=>{
+        navigate({
+            pathname: documentId,
+            search: stringify({
+                plugins: {
+                    ...query.plugins,
+                    i18n: {
+                        locale: localeCode
+                    }
+                }
+            })
+        });
+    };
+    return /*#__PURE__*/ jsxs(Menu.Root, {
         children: [
-            /*#__PURE__*/ jsx(Popover.Trigger, {
-                children: /*#__PURE__*/ jsx(Button, {
-                    variant: "ghost",
-                    type: "button",
-                    onClick: (e)=>e.stopPropagation(),
-                    children: /*#__PURE__*/ jsxs(Flex, {
-                        minWidth: "100%",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        fontWeight: "regular",
-                        children: [
-                            /*#__PURE__*/ jsx(Typography, {
-                                textColor: "neutral800",
-                                ellipsis: true,
-                                marginRight: 2,
-                                children: localesForDocument.join(', ')
-                            }),
-                            /*#__PURE__*/ jsx(Flex, {
-                                children: /*#__PURE__*/ jsx(CaretDown, {
-                                    width: "1.2rem",
-                                    height: "1.2rem"
-                                })
-                            })
-                        ]
+            /*#__PURE__*/ jsx(Menu.Trigger, {
+                children: /*#__PURE__*/ jsx(Flex, {
+                    minWidth: "100%",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontWeight: "regular",
+                    children: /*#__PURE__*/ jsx(Typography, {
+                        textColor: "neutral800",
+                        ellipsis: true,
+                        marginRight: 2,
+                        children: getDisplayText()
                     })
                 })
             }),
-            /*#__PURE__*/ jsx(Popover.Content, {
-                sideOffset: 16,
-                children: /*#__PURE__*/ jsx("ul", {
-                    children: localesForDocument.map((name)=>/*#__PURE__*/ jsx(Box, {
-                            padding: 3,
-                            tag: "li",
-                            children: /*#__PURE__*/ jsx(Typography, {
-                                children: name
-                            })
-                        }, name))
-                })
+            /*#__PURE__*/ jsx(Menu.Content, {
+                children: localesForDocument.map(({ code, name })=>/*#__PURE__*/ jsx(Menu.Item, {
+                        onClick: (e)=>{
+                            e.stopPropagation();
+                            handleLocaleClick(code);
+                        },
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            textColor: "neutral800",
+                            fontWeight: "regular",
+                            children: name
+                        })
+                    }, code))
             })
         ]
     });

package/dist/admin/components/LocaleListCell.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LocaleListCell.mjs","sources":["../../../admin/src/components/LocaleListCell.tsx"],"sourcesContent":["import { Box, Flex, Popover, Typography, useCollator, Button } from '@strapi/design-system';\nimport { CaretDown } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { Locale } from '../../../shared/contracts/locales';\nimport { useGetLocalesQuery } from '../services/locales';\n\ninterface LocaleListCellProps {\n  localizations: { locale: string }[];\n  locale: string;\n}\n\nconst LocaleListCell = ({ locale: currentLocale, localizations }: LocaleListCellProps) => {\n  const { locale: language } = useIntl();\n  const { data: locales = [] } = useGetLocalesQuery();\n  const formatter = useCollator(language, {\n    sensitivity: 'base',\n  });\n\n  if (!Array.isArray(locales) || !localizations) {\n    return null;\n  }\n\n  const availableLocales = localizations.map((loc) => loc.locale);\n\n  const localesForDocument = locales\n    .reduce<Locale[]>((acc, locale) => {\n      const createdLocale = [currentLocale, ...availableLocales].find((loc) => {\n        return loc === locale.code;\n      });\n\n      if (createdLocale) {\n        acc.push(locale);\n      }\n\n      return acc;\n    }, [])\n    .map((locale) => {\n      if (locale.isDefault) {\n        return `${locale.name} (default)`;\n      }\n\n      return locale.name;\n    })\n    .toSorted((a, b) => formatter.compare(a, b));\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger>\n        <Button variant=\"ghost\" type=\"button\" onClick={(e) => e.stopPropagation()}>\n          <Flex minWidth=\"100%\" alignItems=\"center\" justifyContent=\"center\" fontWeight=\"regular\">\n            <Typography textColor=\"neutral800\" ellipsis marginRight={2}>\n              {localesForDocument.join(', ')}\n            </Typography>\n            <Flex>\n              <CaretDown width=\"1.2rem\" height=\"1.2rem\" />\n            </Flex>\n          </Flex>\n        </Button>\n      </Popover.Trigger>\n      <Popover.Content sideOffset={16}>\n        <ul>\n          {localesForDocument.map((name) => (\n            <Box key={name} padding={3} tag=\"li\">\n              <Typography>{name}</Typography>\n            </Box>\n          ))}\n        </ul>\n      </Popover.Content>\n    </Popover.Root>\n  );\n};\n\nexport { LocaleListCell };\nexport type { LocaleListCellProps };\n"],"names":["LocaleListCell","locale","currentLocale","localizations","language","useIntl","data","locales","useGetLocalesQuery","formatter","useCollator","sensitivity","Array","isArray","availableLocales","map","loc","localesForDocument","reduce","acc","createdLocale","find","code","push","isDefault","name","toSorted","a","b","compare","_jsxs","Popover","Root","_jsx","Trigger","Button","variant","type","onClick","e","stopPropagation","Flex","minWidth","alignItems","justifyContent","fontWeight","Typography","textColor","ellipsis","marginRight","join","CaretDown","width","height","Content","sideOffset","ul","Box","padding","tag"],"mappings":"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"}
+{"version":3,"file":"LocaleListCell.mjs","sources":["../../../admin/src/components/LocaleListCell.tsx"],"sourcesContent":["import { useQueryParams } from '@strapi/admin/strapi-admin';\nimport { Flex, Menu, Typography, useCollator } from '@strapi/design-system';\nimport { stringify } from 'qs';\nimport { useIntl } from 'react-intl';\nimport { useNavigate } from 'react-router-dom';\n\nimport { useGetLocalesQuery } from '../services/locales';\nimport { getTranslation } from '../utils/getTranslation';\n\nimport type { I18nBaseQuery } from '../types';\n\ninterface LocaleListCellProps {\n  localizations: { locale: string }[];\n  locale: string;\n  documentId: string;\n}\n\nconst LocaleListCell = ({\n  locale: currentLocale,\n  localizations,\n  documentId,\n}: LocaleListCellProps) => {\n  const { locale: language, formatMessage } = useIntl();\n  const { data: locales = [] } = useGetLocalesQuery();\n  const navigate = useNavigate();\n  const [{ query }] = useQueryParams<I18nBaseQuery>();\n  const formatter = useCollator(language, {\n    sensitivity: 'base',\n  });\n\n  if (!Array.isArray(locales) || !localizations) {\n    return null;\n  }\n\n  const availableLocales = localizations.map((loc) => loc.locale);\n\n  const localesForDocument = locales\n    .reduce<Array<{ code: string; name: string }>>((acc, locale) => {\n      const createdLocale = [currentLocale, ...availableLocales].find((loc) => {\n        return loc === locale.code;\n      });\n\n      if (createdLocale) {\n        const name = locale.isDefault ? `${locale.name} (default)` : locale.name;\n        acc.push({ code: locale.code, name });\n      }\n\n      return acc;\n    }, [])\n    .toSorted((a, b) => formatter.compare(a.name, b.name));\n\n  const getDisplayText = () => {\n    const displayedLocales = localesForDocument.slice(0, 2);\n    const remainingCount = localesForDocument.length - 2;\n\n    const baseText = displayedLocales.map(({ name }) => name).join(', ');\n\n    if (remainingCount <= 0) {\n      return baseText;\n    }\n\n    return formatMessage(\n      {\n        id: getTranslation('CMListView.popover.display-locales.more'),\n        defaultMessage: '{locales} + {count} more',\n      },\n      { locales: baseText, count: remainingCount }\n    );\n  };\n\n  const handleLocaleClick = (localeCode: string) => {\n    navigate({\n      pathname: documentId,\n      search: stringify({\n        plugins: {\n          ...query.plugins,\n          i18n: { locale: localeCode },\n        },\n      }),\n    });\n  };\n\n  return (\n    <Menu.Root>\n      <Menu.Trigger>\n        <Flex minWidth=\"100%\" alignItems=\"center\" justifyContent=\"center\" fontWeight=\"regular\">\n          <Typography textColor=\"neutral800\" ellipsis marginRight={2}>\n            {getDisplayText()}\n          </Typography>\n        </Flex>\n      </Menu.Trigger>\n      <Menu.Content>\n        {localesForDocument.map(({ code, name }) => (\n          <Menu.Item\n            key={code}\n            onClick={(e: React.MouseEvent) => {\n              e.stopPropagation();\n              handleLocaleClick(code);\n            }}\n          >\n            <Typography textColor=\"neutral800\" fontWeight=\"regular\">\n              {name}\n            </Typography>\n          </Menu.Item>\n        ))}\n      </Menu.Content>\n    </Menu.Root>\n  );\n};\n\nexport { LocaleListCell };\nexport type { LocaleListCellProps };\n"],"names":["LocaleListCell","locale","currentLocale","localizations","documentId","language","formatMessage","useIntl","data","locales","useGetLocalesQuery","navigate","useNavigate","query","useQueryParams","formatter","useCollator","sensitivity","Array","isArray","availableLocales","map","loc","localesForDocument","reduce","acc","createdLocale","find","code","name","isDefault","push","toSorted","a","b","compare","getDisplayText","displayedLocales","slice","remainingCount","length","baseText","join","id","getTranslation","defaultMessage","count","handleLocaleClick","localeCode","pathname","search","stringify","plugins","i18n","_jsxs","Menu","Root","_jsx","Trigger","Flex","minWidth","alignItems","justifyContent","fontWeight","Typography","textColor","ellipsis","marginRight","Content","Item","onClick","e","stopPropagation"],"mappings":";;;;;;;;;AAiBMA,MAAAA,cAAAA,GAAiB,CAAC,EACtBC,MAAAA,EAAQC,aAAa,EACrBC,aAAa,EACbC,UAAU,EACU,GAAA;AACpB,IAAA,MAAM,EAAEH,MAAQI,EAAAA,QAAQ,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC5C,IAAA,MAAM,EAAEC,IAAAA,EAAMC,OAAU,GAAA,EAAE,EAAE,GAAGC,kBAAAA,EAAAA;AAC/B,IAAA,MAAMC,QAAWC,GAAAA,WAAAA,EAAAA;AACjB,IAAA,MAAM,CAAC,EAAEC,KAAK,EAAE,CAAC,GAAGC,cAAAA,EAAAA;IACpB,MAAMC,SAAAA,GAAYC,YAAYX,QAAU,EAAA;QACtCY,WAAa,EAAA;AACf,KAAA,CAAA;AAEA,IAAA,IAAI,CAACC,KAAMC,CAAAA,OAAO,CAACV,OAAAA,CAAAA,IAAY,CAACN,aAAe,EAAA;QAC7C,OAAO,IAAA;AACT;AAEA,IAAA,MAAMiB,mBAAmBjB,aAAckB,CAAAA,GAAG,CAAC,CAACC,GAAAA,GAAQA,IAAIrB,MAAM,CAAA;AAE9D,IAAA,MAAMsB,kBAAqBd,GAAAA,OAAAA,CACxBe,MAAM,CAAwC,CAACC,GAAKxB,EAAAA,MAAAA,GAAAA;AACnD,QAAA,MAAMyB,aAAgB,GAAA;AAACxB,YAAAA,aAAAA;AAAkBkB,YAAAA,GAAAA;SAAiB,CAACO,IAAI,CAAC,CAACL,GAAAA,GAAAA;YAC/D,OAAOA,GAAAA,KAAQrB,OAAO2B,IAAI;AAC5B,SAAA,CAAA;AAEA,QAAA,IAAIF,aAAe,EAAA;AACjB,YAAA,MAAMG,IAAO5B,GAAAA,MAAAA,CAAO6B,SAAS,GAAG,CAAC,EAAE7B,MAAO4B,CAAAA,IAAI,CAAC,UAAU,CAAC,GAAG5B,OAAO4B,IAAI;AACxEJ,YAAAA,GAAAA,CAAIM,IAAI,CAAC;AAAEH,gBAAAA,IAAAA,EAAM3B,OAAO2B,IAAI;AAAEC,gBAAAA;AAAK,aAAA,CAAA;AACrC;QAEA,OAAOJ,GAAAA;AACT,KAAA,EAAG,EAAE,CAAA,CACJO,QAAQ,CAAC,CAACC,CAAGC,EAAAA,CAAAA,GAAMnB,SAAUoB,CAAAA,OAAO,CAACF,CAAAA,CAAEJ,IAAI,EAAEK,EAAEL,IAAI,CAAA,CAAA;AAEtD,IAAA,MAAMO,cAAiB,GAAA,IAAA;AACrB,QAAA,MAAMC,gBAAmBd,GAAAA,kBAAAA,CAAmBe,KAAK,CAAC,CAAG,EAAA,CAAA,CAAA;QACrD,MAAMC,cAAAA,GAAiBhB,kBAAmBiB,CAAAA,MAAM,GAAG,CAAA;QAEnD,MAAMC,QAAAA,GAAWJ,gBAAiBhB,CAAAA,GAAG,CAAC,CAAC,EAAEQ,IAAI,EAAE,GAAKA,IAAMa,CAAAA,CAAAA,IAAI,CAAC,IAAA,CAAA;AAE/D,QAAA,IAAIH,kBAAkB,CAAG,EAAA;YACvB,OAAOE,QAAAA;AACT;AAEA,QAAA,OAAOnC,aACL,CAAA;AACEqC,YAAAA,EAAAA,EAAIC,cAAe,CAAA,yCAAA,CAAA;YACnBC,cAAgB,EAAA;SAElB,EAAA;YAAEpC,OAASgC,EAAAA,QAAAA;YAAUK,KAAOP,EAAAA;AAAe,SAAA,CAAA;AAE/C,KAAA;AAEA,IAAA,MAAMQ,oBAAoB,CAACC,UAAAA,GAAAA;QACzBrC,QAAS,CAAA;YACPsC,QAAU7C,EAAAA,UAAAA;AACV8C,YAAAA,MAAAA,EAAQC,SAAU,CAAA;gBAChBC,OAAS,EAAA;AACP,oBAAA,GAAGvC,MAAMuC,OAAO;oBAChBC,IAAM,EAAA;wBAAEpD,MAAQ+C,EAAAA;AAAW;AAC7B;AACF,aAAA;AACF,SAAA,CAAA;AACF,KAAA;IAEA,qBACEM,IAAA,CAACC,KAAKC,IAAI,EAAA;;AACR,0BAAAC,GAAA,CAACF,KAAKG,OAAO,EAAA;AACX,gBAAA,QAAA,gBAAAD,GAACE,CAAAA,IAAAA,EAAAA;oBAAKC,QAAS,EAAA,MAAA;oBAAOC,UAAW,EAAA,QAAA;oBAASC,cAAe,EAAA,QAAA;oBAASC,UAAW,EAAA,SAAA;AAC3E,oBAAA,QAAA,gBAAAN,GAACO,CAAAA,UAAAA,EAAAA;wBAAWC,SAAU,EAAA,YAAA;wBAAaC,QAAQ,EAAA,IAAA;wBAACC,WAAa,EAAA,CAAA;AACtD/B,wBAAAA,QAAAA,EAAAA,cAAAA;;;;AAIP,0BAAAqB,GAAA,CAACF,KAAKa,OAAO,EAAA;0BACV7C,kBAAmBF,CAAAA,GAAG,CAAC,CAAC,EAAEO,IAAI,EAAEC,IAAI,EAAE,iBACrC4B,GAACF,CAAAA,IAAAA,CAAKc,IAAI,EAAA;AAERC,wBAAAA,OAAAA,EAAS,CAACC,CAAAA,GAAAA;AACRA,4BAAAA,CAAAA,CAAEC,eAAe,EAAA;4BACjBzB,iBAAkBnB,CAAAA,IAAAA,CAAAA;AACpB,yBAAA;AAEA,wBAAA,QAAA,gBAAA6B,GAACO,CAAAA,UAAAA,EAAAA;4BAAWC,SAAU,EAAA,YAAA;4BAAaF,UAAW,EAAA,SAAA;AAC3ClC,4BAAAA,QAAAA,EAAAA;;AAPED,qBAAAA,EAAAA,IAAAA,CAAAA;;;;AAcjB;;;;"}

package/dist/admin/components/LocalePicker.js

@@ -68,16 +68,26 @@ const LocalePicker = ()=>{
         locales$1,
         query.plugins?.i18n?.locale
     ]);
+    const sortedLocaleOptions = React__namespace.useMemo(()=>{
+        const displayedLocales = Array.isArray(locales$1) ? locales$1.filter((locale)=>{
+            /**
+           * If you can create or read we allow you to see the locale exists
+           * this is because in the ListView, you may be able to create a new entry
+           * in a locale you can't read.
+           */ return canCreate.includes(locale.code) || canRead.includes(locale.code);
+        }) : [];
+        return displayedLocales.sort((a, b)=>a.name.localeCompare(b.name)).map((locale)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                value: locale.code,
+                children: locale.name
+            }, locale.id));
+    }, [
+        locales$1,
+        canCreate,
+        canRead
+    ]);
     if (!hasI18n || !Array.isArray(locales$1) || locales$1.length === 0) {
         return null;
     }
-    const displayedLocales = locales$1.filter((locale)=>{
-        /**
-     * If you can create or read we allow you to see the locale exists
-     * this is because in the ListView, you may be able to create a new entry
-     * in a locale you can't read.
-     */ return canCreate.includes(locale.code) || canRead.includes(locale.code);
-    });
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelect, {
         size: "S",
         "aria-label": formatMessage({
@@ -87,10 +97,7 @@ const LocalePicker = ()=>{
         value: query.plugins?.i18n?.locale || locales$1.find((locale)=>locale.isDefault)?.code,
         // @ts-expect-error – This can be removed in V2 of the DS.
         onChange: handleChange,
-        children: displayedLocales.map((locale)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
-                value: locale.code,
-                children: locale.name
-            }, locale.id))
+        children: sortedLocaleOptions
     });
 };
 

package/dist/admin/components/LocalePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalePicker.js","sources":["../../../admin/src/components/LocalePicker.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams } from '@strapi/admin/strapi-admin';\nimport { SingleSelect, SingleSelectOption } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useI18n } from '../hooks/useI18n';\nimport { useGetLocalesQuery } from '../services/locales';\nimport { getTranslation } from '../utils/getTranslation';\n\nimport type { I18nBaseQuery } from '../types';\n\ninterface Query extends I18nBaseQuery {\n  page?: number;\n}\n\nconst LocalePicker = () => {\n  const { formatMessage } = useIntl();\n  const [{ query }, setQuery] = useQueryParams<Query>();\n\n  const { hasI18n, canRead, canCreate } = useI18n();\n  const { data: locales = [] } = useGetLocalesQuery(undefined, {\n    skip: !hasI18n,\n  });\n\n  const handleChange = React.useCallback(\n    (code: string, replace = false) => {\n      setQuery(\n        {\n          page: 1,\n          plugins: { ...query.plugins, i18n: { locale: code } },\n        },\n        'push',\n        replace\n      );\n    },\n    [query.plugins, setQuery]\n  );\n\n  React.useEffect(() => {\n    if (!Array.isArray(locales) || !hasI18n) {\n      return;\n    }\n    /**\n     * Handle the case where the current locale query param doesn't exist\n     * in the list of available locales, so we redirect to the default locale.\n     */\n    const currentDesiredLocale = query.plugins?.i18n?.locale;\n    const doesLocaleExist = locales.find((loc) => loc.code === currentDesiredLocale);\n    const defaultLocale = locales.find((locale) => locale.isDefault);\n    if (!doesLocaleExist && defaultLocale?.code) {\n      handleChange(defaultLocale.code, true);\n    }\n  }, [hasI18n, handleChange, locales, query.plugins?.i18n?.locale]);\n\n  if (!hasI18n || !Array.isArray(locales) || locales.length === 0) {\n    return null;\n  }\n\n  const displayedLocales = locales.filter((locale) => {\n    /**\n     * If you can create or read we allow you to see the locale exists\n     * this is because in the ListView, you may be able to create a new entry\n     * in a locale you can't read.\n     */\n    return canCreate.includes(locale.code) || canRead.includes(locale.code);\n  });\n\n  return (\n    <SingleSelect\n      size=\"S\"\n      aria-label={formatMessage({\n        id: getTranslation('actions.select-locale'),\n        defaultMessage: 'Select locale',\n      })}\n      value={query.plugins?.i18n?.locale || locales.find((locale) => locale.isDefault)?.code}\n      // @ts-expect-error – This can be removed in V2 of the DS.\n      onChange={handleChange}\n    >\n      {displayedLocales.map((locale) => (\n        <SingleSelectOption key={locale.id} value={locale.code}>\n          {locale.name}\n        </SingleSelectOption>\n      ))}\n    </SingleSelect>\n  );\n};\n\nexport { LocalePicker };\n"],"names":["LocalePicker","formatMessage","useIntl","query","setQuery","useQueryParams","hasI18n","canRead","canCreate","useI18n","data","locales","useGetLocalesQuery","undefined","skip","handleChange","React","useCallback","code","replace","page","plugins","i18n","locale","useEffect","Array","isArray","currentDesiredLocale","doesLocaleExist","find","loc","defaultLocale","isDefault","length","displayedLocales","filter","includes","_jsx","SingleSelect","size","aria-label","id","getTranslation","defaultMessage","value","onChange","map","SingleSelectOption","name"],"mappings":"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"}
+{"version":3,"file":"LocalePicker.js","sources":["../../../admin/src/components/LocalePicker.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams } from '@strapi/admin/strapi-admin';\nimport { SingleSelect, SingleSelectOption } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useI18n } from '../hooks/useI18n';\nimport { useGetLocalesQuery } from '../services/locales';\nimport { getTranslation } from '../utils/getTranslation';\n\nimport type { I18nBaseQuery } from '../types';\n\ninterface Query extends I18nBaseQuery {\n  page?: number;\n}\n\nconst LocalePicker = () => {\n  const { formatMessage } = useIntl();\n  const [{ query }, setQuery] = useQueryParams<Query>();\n\n  const { hasI18n, canRead, canCreate } = useI18n();\n  const { data: locales = [] } = useGetLocalesQuery(undefined, {\n    skip: !hasI18n,\n  });\n\n  const handleChange = React.useCallback(\n    (code: string, replace = false) => {\n      setQuery(\n        {\n          page: 1,\n          plugins: { ...query.plugins, i18n: { locale: code } },\n        },\n        'push',\n        replace\n      );\n    },\n    [query.plugins, setQuery]\n  );\n\n  React.useEffect(() => {\n    if (!Array.isArray(locales) || !hasI18n) {\n      return;\n    }\n    /**\n     * Handle the case where the current locale query param doesn't exist\n     * in the list of available locales, so we redirect to the default locale.\n     */\n    const currentDesiredLocale = query.plugins?.i18n?.locale;\n    const doesLocaleExist = locales.find((loc) => loc.code === currentDesiredLocale);\n    const defaultLocale = locales.find((locale) => locale.isDefault);\n    if (!doesLocaleExist && defaultLocale?.code) {\n      handleChange(defaultLocale.code, true);\n    }\n  }, [hasI18n, handleChange, locales, query.plugins?.i18n?.locale]);\n\n  const sortedLocaleOptions = React.useMemo(() => {\n    const displayedLocales = Array.isArray(locales)\n      ? locales.filter((locale) => {\n          /**\n           * If you can create or read we allow you to see the locale exists\n           * this is because in the ListView, you may be able to create a new entry\n           * in a locale you can't read.\n           */\n          return canCreate.includes(locale.code) || canRead.includes(locale.code);\n        })\n      : [];\n\n    return displayedLocales\n      .sort((a, b) => a.name.localeCompare(b.name))\n      .map((locale) => (\n        <SingleSelectOption key={locale.id} value={locale.code}>\n          {locale.name}\n        </SingleSelectOption>\n      ));\n  }, [locales, canCreate, canRead]);\n\n  if (!hasI18n || !Array.isArray(locales) || locales.length === 0) {\n    return null;\n  }\n\n  return (\n    <SingleSelect\n      size=\"S\"\n      aria-label={formatMessage({\n        id: getTranslation('actions.select-locale'),\n        defaultMessage: 'Select locale',\n      })}\n      value={query.plugins?.i18n?.locale || locales.find((locale) => locale.isDefault)?.code}\n      // @ts-expect-error – This can be removed in V2 of the DS.\n      onChange={handleChange}\n    >\n      {sortedLocaleOptions}\n    </SingleSelect>\n  );\n};\n\nexport { LocalePicker };\n"],"names":["LocalePicker","formatMessage","useIntl","query","setQuery","useQueryParams","hasI18n","canRead","canCreate","useI18n","data","locales","useGetLocalesQuery","undefined","skip","handleChange","React","useCallback","code","replace","page","plugins","i18n","locale","useEffect","Array","isArray","currentDesiredLocale","doesLocaleExist","find","loc","defaultLocale","isDefault","sortedLocaleOptions","useMemo","displayedLocales","filter","includes","sort","a","b","name","localeCompare","map","_jsx","SingleSelectOption","value","id","length","SingleSelect","size","aria-label","getTranslation","defaultMessage","onChange"],"mappings":"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"}

package/dist/admin/components/LocalePicker.mjs

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useQueryParams } from '@strapi/admin/strapi-admin';
-import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
+import { SingleSelectOption, SingleSelect } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { useI18n } from '../hooks/useI18n.mjs';
 import { useGetLocalesQuery } from '../services/locales.mjs';
@@ -47,16 +47,26 @@ const LocalePicker = ()=>{
         locales,
         query.plugins?.i18n?.locale
     ]);
+    const sortedLocaleOptions = React.useMemo(()=>{
+        const displayedLocales = Array.isArray(locales) ? locales.filter((locale)=>{
+            /**
+           * If you can create or read we allow you to see the locale exists
+           * this is because in the ListView, you may be able to create a new entry
+           * in a locale you can't read.
+           */ return canCreate.includes(locale.code) || canRead.includes(locale.code);
+        }) : [];
+        return displayedLocales.sort((a, b)=>a.name.localeCompare(b.name)).map((locale)=>/*#__PURE__*/ jsx(SingleSelectOption, {
+                value: locale.code,
+                children: locale.name
+            }, locale.id));
+    }, [
+        locales,
+        canCreate,
+        canRead
+    ]);
     if (!hasI18n || !Array.isArray(locales) || locales.length === 0) {
         return null;
     }
-    const displayedLocales = locales.filter((locale)=>{
-        /**
-     * If you can create or read we allow you to see the locale exists
-     * this is because in the ListView, you may be able to create a new entry
-     * in a locale you can't read.
-     */ return canCreate.includes(locale.code) || canRead.includes(locale.code);
-    });
     return /*#__PURE__*/ jsx(SingleSelect, {
         size: "S",
         "aria-label": formatMessage({
@@ -66,10 +76,7 @@ const LocalePicker = ()=>{
         value: query.plugins?.i18n?.locale || locales.find((locale)=>locale.isDefault)?.code,
         // @ts-expect-error – This can be removed in V2 of the DS.
         onChange: handleChange,
-        children: displayedLocales.map((locale)=>/*#__PURE__*/ jsx(SingleSelectOption, {
-                value: locale.code,
-                children: locale.name
-            }, locale.id))
+        children: sortedLocaleOptions
     });
 };
 

package/dist/admin/components/LocalePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LocalePicker.mjs","sources":["../../../admin/src/components/LocalePicker.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams } from '@strapi/admin/strapi-admin';\nimport { SingleSelect, SingleSelectOption } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useI18n } from '../hooks/useI18n';\nimport { useGetLocalesQuery } from '../services/locales';\nimport { getTranslation } from '../utils/getTranslation';\n\nimport type { I18nBaseQuery } from '../types';\n\ninterface Query extends I18nBaseQuery {\n  page?: number;\n}\n\nconst LocalePicker = () => {\n  const { formatMessage } = useIntl();\n  const [{ query }, setQuery] = useQueryParams<Query>();\n\n  const { hasI18n, canRead, canCreate } = useI18n();\n  const { data: locales = [] } = useGetLocalesQuery(undefined, {\n    skip: !hasI18n,\n  });\n\n  const handleChange = React.useCallback(\n    (code: string, replace = false) => {\n      setQuery(\n        {\n          page: 1,\n          plugins: { ...query.plugins, i18n: { locale: code } },\n        },\n        'push',\n        replace\n      );\n    },\n    [query.plugins, setQuery]\n  );\n\n  React.useEffect(() => {\n    if (!Array.isArray(locales) || !hasI18n) {\n      return;\n    }\n    /**\n     * Handle the case where the current locale query param doesn't exist\n     * in the list of available locales, so we redirect to the default locale.\n     */\n    const currentDesiredLocale = query.plugins?.i18n?.locale;\n    const doesLocaleExist = locales.find((loc) => loc.code === currentDesiredLocale);\n    const defaultLocale = locales.find((locale) => locale.isDefault);\n    if (!doesLocaleExist && defaultLocale?.code) {\n      handleChange(defaultLocale.code, true);\n    }\n  }, [hasI18n, handleChange, locales, query.plugins?.i18n?.locale]);\n\n  if (!hasI18n || !Array.isArray(locales) || locales.length === 0) {\n    return null;\n  }\n\n  const displayedLocales = locales.filter((locale) => {\n    /**\n     * If you can create or read we allow you to see the locale exists\n     * this is because in the ListView, you may be able to create a new entry\n     * in a locale you can't read.\n     */\n    return canCreate.includes(locale.code) || canRead.includes(locale.code);\n  });\n\n  return (\n    <SingleSelect\n      size=\"S\"\n      aria-label={formatMessage({\n        id: getTranslation('actions.select-locale'),\n        defaultMessage: 'Select locale',\n      })}\n      value={query.plugins?.i18n?.locale || locales.find((locale) => locale.isDefault)?.code}\n      // @ts-expect-error – This can be removed in V2 of the DS.\n      onChange={handleChange}\n    >\n      {displayedLocales.map((locale) => (\n        <SingleSelectOption key={locale.id} value={locale.code}>\n          {locale.name}\n        </SingleSelectOption>\n      ))}\n    </SingleSelect>\n  );\n};\n\nexport { LocalePicker };\n"],"names":["LocalePicker","formatMessage","useIntl","query","setQuery","useQueryParams","hasI18n","canRead","canCreate","useI18n","data","locales","useGetLocalesQuery","undefined","skip","handleChange","React","useCallback","code","replace","page","plugins","i18n","locale","useEffect","Array","isArray","currentDesiredLocale","doesLocaleExist","find","loc","defaultLocale","isDefault","length","displayedLocales","filter","includes","_jsx","SingleSelect","size","aria-label","id","getTranslation","defaultMessage","value","onChange","map","SingleSelectOption","name"],"mappings":"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"}
+{"version":3,"file":"LocalePicker.mjs","sources":["../../../admin/src/components/LocalePicker.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams } from '@strapi/admin/strapi-admin';\nimport { SingleSelect, SingleSelectOption } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useI18n } from '../hooks/useI18n';\nimport { useGetLocalesQuery } from '../services/locales';\nimport { getTranslation } from '../utils/getTranslation';\n\nimport type { I18nBaseQuery } from '../types';\n\ninterface Query extends I18nBaseQuery {\n  page?: number;\n}\n\nconst LocalePicker = () => {\n  const { formatMessage } = useIntl();\n  const [{ query }, setQuery] = useQueryParams<Query>();\n\n  const { hasI18n, canRead, canCreate } = useI18n();\n  const { data: locales = [] } = useGetLocalesQuery(undefined, {\n    skip: !hasI18n,\n  });\n\n  const handleChange = React.useCallback(\n    (code: string, replace = false) => {\n      setQuery(\n        {\n          page: 1,\n          plugins: { ...query.plugins, i18n: { locale: code } },\n        },\n        'push',\n        replace\n      );\n    },\n    [query.plugins, setQuery]\n  );\n\n  React.useEffect(() => {\n    if (!Array.isArray(locales) || !hasI18n) {\n      return;\n    }\n    /**\n     * Handle the case where the current locale query param doesn't exist\n     * in the list of available locales, so we redirect to the default locale.\n     */\n    const currentDesiredLocale = query.plugins?.i18n?.locale;\n    const doesLocaleExist = locales.find((loc) => loc.code === currentDesiredLocale);\n    const defaultLocale = locales.find((locale) => locale.isDefault);\n    if (!doesLocaleExist && defaultLocale?.code) {\n      handleChange(defaultLocale.code, true);\n    }\n  }, [hasI18n, handleChange, locales, query.plugins?.i18n?.locale]);\n\n  const sortedLocaleOptions = React.useMemo(() => {\n    const displayedLocales = Array.isArray(locales)\n      ? locales.filter((locale) => {\n          /**\n           * If you can create or read we allow you to see the locale exists\n           * this is because in the ListView, you may be able to create a new entry\n           * in a locale you can't read.\n           */\n          return canCreate.includes(locale.code) || canRead.includes(locale.code);\n        })\n      : [];\n\n    return displayedLocales\n      .sort((a, b) => a.name.localeCompare(b.name))\n      .map((locale) => (\n        <SingleSelectOption key={locale.id} value={locale.code}>\n          {locale.name}\n        </SingleSelectOption>\n      ));\n  }, [locales, canCreate, canRead]);\n\n  if (!hasI18n || !Array.isArray(locales) || locales.length === 0) {\n    return null;\n  }\n\n  return (\n    <SingleSelect\n      size=\"S\"\n      aria-label={formatMessage({\n        id: getTranslation('actions.select-locale'),\n        defaultMessage: 'Select locale',\n      })}\n      value={query.plugins?.i18n?.locale || locales.find((locale) => locale.isDefault)?.code}\n      // @ts-expect-error – This can be removed in V2 of the DS.\n      onChange={handleChange}\n    >\n      {sortedLocaleOptions}\n    </SingleSelect>\n  );\n};\n\nexport { LocalePicker };\n"],"names":["LocalePicker","formatMessage","useIntl","query","setQuery","useQueryParams","hasI18n","canRead","canCreate","useI18n","data","locales","useGetLocalesQuery","undefined","skip","handleChange","React","useCallback","code","replace","page","plugins","i18n","locale","useEffect","Array","isArray","currentDesiredLocale","doesLocaleExist","find","loc","defaultLocale","isDefault","sortedLocaleOptions","useMemo","displayedLocales","filter","includes","sort","a","b","name","localeCompare","map","_jsx","SingleSelectOption","value","id","length","SingleSelect","size","aria-label","getTranslation","defaultMessage","onChange"],"mappings":"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"}

package/dist/admin/contentManagerHooks/editView.js

@@ -82,9 +82,12 @@ const LabelAction = ({ title, icon })=>{
                 tag: "span",
                 children: formatMessage(title)
             }),
-            /*#__PURE__*/ React__namespace.cloneElement(icon, {
-                'aria-hidden': true,
-                focusable: false
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+                label: formatMessage(title),
+                children: /*#__PURE__*/ React__namespace.cloneElement(icon, {
+                    'aria-hidden': true,
+                    focusable: false
+                })
             })
         ]
     });

package/dist/admin/contentManagerHooks/editView.js.map

@@ -1 +1 @@
-{"version":3,"file":"editView.js","sources":["../../../admin/src/contentManagerHooks/editView.tsx"],"sourcesContent":["/* eslint-disable check-file/filename-naming-convention */\nimport * as React from 'react';\n\nimport { Flex, VisuallyHidden } from '@strapi/design-system';\nimport { Earth, EarthStriked } from '@strapi/icons';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslation } from '../utils/getTranslation';\n\nimport type { EditFieldLayout, EditLayout } from '@strapi/content-manager/strapi-admin';\n\ninterface MutateEditViewArgs {\n  layout: EditLayout;\n}\n\nconst mutateEditViewHook = ({ layout }: MutateEditViewArgs): MutateEditViewArgs => {\n  // If i18n isn't explicitly enabled on the content type, then no field can be localized\n  if (\n    !('i18n' in layout.options) ||\n    (typeof layout.options.i18n === 'object' &&\n      layout.options.i18n !== null &&\n      'localized' in layout.options.i18n &&\n      !layout.options.i18n.localized)\n  ) {\n    return { layout };\n  }\n\n  const components = Object.entries(layout.components).reduce<EditLayout['components']>(\n    (acc, [key, componentLayout]) => {\n      return {\n        ...acc,\n        [key]: {\n          ...componentLayout,\n          layout: componentLayout.layout.map((row) => row.map(addLabelActionToField)),\n        },\n      };\n    },\n    {}\n  );\n\n  return {\n    layout: {\n      ...layout,\n      components,\n      layout: layout.layout.map((panel) => panel.map((row) => row.map(addLabelActionToField))),\n    },\n  } satisfies Pick<MutateEditViewArgs, 'layout'>;\n};\n\nconst addLabelActionToField = (field: EditFieldLayout) => {\n  const isFieldLocalized = doesFieldHaveI18nPluginOpt(field.attribute.pluginOptions)\n    ? field.attribute.pluginOptions.i18n.localized\n    : true || ['uid', 'relation'].includes(field.attribute.type);\n\n  const labelActionProps = {\n    title: {\n      id: isFieldLocalized\n        ? getTranslation('Field.localized')\n        : getTranslation('Field.not-localized'),\n      defaultMessage: isFieldLocalized\n        ? 'This value is unique for the selected locale'\n        : 'This value is the same across all locales',\n    },\n    icon: isFieldLocalized ? <Earth /> : null,\n  };\n\n  return {\n    ...field,\n    labelAction: isFieldLocalized ? <LabelAction {...labelActionProps} /> : null,\n  };\n};\n\nconst doesFieldHaveI18nPluginOpt = (\n  pluginOpts?: object\n): pluginOpts is { i18n: { localized: boolean } } => {\n  if (!pluginOpts) {\n    return false;\n  }\n\n  return (\n    'i18n' in pluginOpts &&\n    typeof pluginOpts.i18n === 'object' &&\n    pluginOpts.i18n !== null &&\n    'localized' in pluginOpts.i18n\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * LabelAction\n * -----------------------------------------------------------------------------------------------*/\n\ninterface LabelActionProps {\n  title: MessageDescriptor;\n  icon: React.ReactNode;\n}\n\nconst LabelAction = ({ title, icon }: LabelActionProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Span tag=\"span\">\n      <VisuallyHidden tag=\"span\">{formatMessage(title)}</VisuallyHidden>\n      {React.cloneElement(icon as React.ReactElement, {\n        'aria-hidden': true,\n        focusable: false, // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable\n      })}\n    </Span>\n  );\n};\n\nconst Span = styled(Flex)`\n  svg {\n    width: 12px;\n    height: 12px;\n\n    fill: ${({ theme }) => theme.colors.neutral500};\n\n    path {\n      fill: ${({ theme }) => theme.colors.neutral500};\n    }\n  }\n`;\n\nexport { mutateEditViewHook };\n"],"names":["mutateEditViewHook","layout","options","i18n","localized","components","Object","entries","reduce","acc","key","componentLayout","map","row","addLabelActionToField","panel","field","isFieldLocalized","doesFieldHaveI18nPluginOpt","attribute","pluginOptions","labelActionProps","title","id","getTranslation","defaultMessage","icon","_jsx","Earth","labelAction","LabelAction","pluginOpts","formatMessage","useIntl","_jsxs","Span","tag","VisuallyHidden","React","cloneElement","focusable","styled","Flex","theme","colors","neutral500"],"mappings":"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"}
+{"version":3,"file":"editView.js","sources":["../../../admin/src/contentManagerHooks/editView.tsx"],"sourcesContent":["/* eslint-disable check-file/filename-naming-convention */\nimport * as React from 'react';\n\nimport { Flex, Tooltip, VisuallyHidden } from '@strapi/design-system';\nimport { Earth, EarthStriked } from '@strapi/icons';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { getTranslation } from '../utils/getTranslation';\n\nimport type { EditFieldLayout, EditLayout } from '@strapi/content-manager/strapi-admin';\n\ninterface MutateEditViewArgs {\n  layout: EditLayout;\n}\n\nconst mutateEditViewHook = ({ layout }: MutateEditViewArgs): MutateEditViewArgs => {\n  // If i18n isn't explicitly enabled on the content type, then no field can be localized\n  if (\n    !('i18n' in layout.options) ||\n    (typeof layout.options.i18n === 'object' &&\n      layout.options.i18n !== null &&\n      'localized' in layout.options.i18n &&\n      !layout.options.i18n.localized)\n  ) {\n    return { layout };\n  }\n\n  const components = Object.entries(layout.components).reduce<EditLayout['components']>(\n    (acc, [key, componentLayout]) => {\n      return {\n        ...acc,\n        [key]: {\n          ...componentLayout,\n          layout: componentLayout.layout.map((row) => row.map(addLabelActionToField)),\n        },\n      };\n    },\n    {}\n  );\n\n  return {\n    layout: {\n      ...layout,\n      components,\n      layout: layout.layout.map((panel) => panel.map((row) => row.map(addLabelActionToField))),\n    },\n  } satisfies Pick<MutateEditViewArgs, 'layout'>;\n};\n\nconst addLabelActionToField = (field: EditFieldLayout) => {\n  const isFieldLocalized = doesFieldHaveI18nPluginOpt(field.attribute.pluginOptions)\n    ? field.attribute.pluginOptions.i18n.localized\n    : true || ['uid', 'relation'].includes(field.attribute.type);\n\n  const labelActionProps = {\n    title: {\n      id: isFieldLocalized\n        ? getTranslation('Field.localized')\n        : getTranslation('Field.not-localized'),\n      defaultMessage: isFieldLocalized\n        ? 'This value is unique for the selected locale'\n        : 'This value is the same across all locales',\n    },\n    icon: isFieldLocalized ? <Earth /> : null,\n  };\n\n  return {\n    ...field,\n    labelAction: isFieldLocalized ? <LabelAction {...labelActionProps} /> : null,\n  };\n};\n\nconst doesFieldHaveI18nPluginOpt = (\n  pluginOpts?: object\n): pluginOpts is { i18n: { localized: boolean } } => {\n  if (!pluginOpts) {\n    return false;\n  }\n\n  return (\n    'i18n' in pluginOpts &&\n    typeof pluginOpts.i18n === 'object' &&\n    pluginOpts.i18n !== null &&\n    'localized' in pluginOpts.i18n\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * LabelAction\n * -----------------------------------------------------------------------------------------------*/\n\ninterface LabelActionProps {\n  title: MessageDescriptor;\n  icon: React.ReactNode;\n}\n\nconst LabelAction = ({ title, icon }: LabelActionProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Span tag=\"span\">\n      <VisuallyHidden tag=\"span\">{formatMessage(title)}</VisuallyHidden>\n      <Tooltip label={formatMessage(title)}>\n        {React.cloneElement(icon as React.ReactElement, {\n          'aria-hidden': true,\n          focusable: false, // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable\n        })}\n      </Tooltip>\n    </Span>\n  );\n};\n\nconst Span = styled(Flex)`\n  svg {\n    width: 12px;\n    height: 12px;\n\n    fill: ${({ theme }) => theme.colors.neutral500};\n\n    path {\n      fill: ${({ theme }) => theme.colors.neutral500};\n    }\n  }\n`;\n\nexport { mutateEditViewHook };\n"],"names":["mutateEditViewHook","layout","options","i18n","localized","components","Object","entries","reduce","acc","key","componentLayout","map","row","addLabelActionToField","panel","field","isFieldLocalized","doesFieldHaveI18nPluginOpt","attribute","pluginOptions","labelActionProps","title","id","getTranslation","defaultMessage","icon","_jsx","Earth","labelAction","LabelAction","pluginOpts","formatMessage","useIntl","_jsxs","Span","tag","VisuallyHidden","Tooltip","label","React","cloneElement","focusable","styled","Flex","theme","colors","neutral500"],"mappings":"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"}