@strapi/i18n 0.0.0-next.8f63e1055db761e0213cb6610f80c55658196ae1 → 0.0.0-next.913e7071c9410ff8af2e776e25f9fb1c38cb59dd

package/dist/admin/components/LocaleListCell.mjs

@@ -0,0 +1,100 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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, documentId })=>{
+    const { locale: language, formatMessage } = useIntl();
+    const { data: locales = [] } = useGetLocalesQuery();
+    const navigate = useNavigate();
+    const [{ query }] = useQueryParams();
+    const formatter = useCollator(language, {
+        sensitivity: 'base'
+    });
+    if (!Array.isArray(locales) || !localizations) {
+        return null;
+    }
+    const availableLocales = localizations.map((loc)=>loc.locale);
+    const localesForDocument = locales.reduce((acc, locale)=>{
+        const createdLocale = [
+            currentLocale,
+            ...availableLocales
+        ].find((loc)=>{
+            return loc === locale.code;
+        });
+        if (createdLocale) {
+            const name = locale.isDefault ? `${locale.name} (default)` : locale.name;
+            acc.push({
+                code: locale.code,
+                name
+            });
+        }
+        return acc;
+    }, []).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 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(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(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))
+            })
+        ]
+    });
+};
+
+export { LocaleListCell };
+//# sourceMappingURL=LocaleListCell.mjs.map

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

@@ -0,0 +1 @@
+{"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":"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"}

package/dist/admin/components/LocalePicker.js

@@ -0,0 +1,105 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var useI18n = require('../hooks/useI18n.js');
+var locales = require('../services/locales.js');
+var getTranslation = require('../utils/getTranslation.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const LocalePicker = ()=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const [{ query }, setQuery] = strapiAdmin.useQueryParams();
+    const { hasI18n, canRead, canCreate } = useI18n.useI18n();
+    const { data: locales$1 = [] } = locales.useGetLocalesQuery(undefined, {
+        skip: !hasI18n
+    });
+    const handleChange = React__namespace.useCallback((code, replace = false)=>{
+        setQuery({
+            page: 1,
+            plugins: {
+                ...query.plugins,
+                i18n: {
+                    locale: code
+                }
+            }
+        }, 'push', replace);
+    }, [
+        query.plugins,
+        setQuery
+    ]);
+    React__namespace.useEffect(()=>{
+        if (!Array.isArray(locales$1) || !hasI18n) {
+            return;
+        }
+        /**
+     * Handle the case where the current locale query param doesn't exist
+     * in the list of available locales, so we redirect to the default locale.
+     */ const currentDesiredLocale = query.plugins?.i18n?.locale;
+        const doesLocaleExist = locales$1.find((loc)=>loc.code === currentDesiredLocale);
+        const defaultLocale = locales$1.find((locale)=>locale.isDefault);
+        if (!doesLocaleExist && defaultLocale?.code) {
+            handleChange(defaultLocale.code, true);
+        }
+    }, [
+        hasI18n,
+        handleChange,
+        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;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelect, {
+        size: "S",
+        "aria-label": formatMessage({
+            id: getTranslation.getTranslation('actions.select-locale'),
+            defaultMessage: 'Select locale'
+        }),
+        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: sortedLocaleOptions
+    });
+};
+
+exports.LocalePicker = LocalePicker;
+//# sourceMappingURL=LocalePicker.js.map

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

@@ -0,0 +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  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

@@ -0,0 +1,84 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useQueryParams } from '@strapi/admin/strapi-admin';
+import { SingleSelectOption, SingleSelect } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { useI18n } from '../hooks/useI18n.mjs';
+import { useGetLocalesQuery } from '../services/locales.mjs';
+import { getTranslation } from '../utils/getTranslation.mjs';
+
+const LocalePicker = ()=>{
+    const { formatMessage } = useIntl();
+    const [{ query }, setQuery] = useQueryParams();
+    const { hasI18n, canRead, canCreate } = useI18n();
+    const { data: locales = [] } = useGetLocalesQuery(undefined, {
+        skip: !hasI18n
+    });
+    const handleChange = React.useCallback((code, replace = false)=>{
+        setQuery({
+            page: 1,
+            plugins: {
+                ...query.plugins,
+                i18n: {
+                    locale: code
+                }
+            }
+        }, 'push', replace);
+    }, [
+        query.plugins,
+        setQuery
+    ]);
+    React.useEffect(()=>{
+        if (!Array.isArray(locales) || !hasI18n) {
+            return;
+        }
+        /**
+     * Handle the case where the current locale query param doesn't exist
+     * in the list of available locales, so we redirect to the default locale.
+     */ const currentDesiredLocale = query.plugins?.i18n?.locale;
+        const doesLocaleExist = locales.find((loc)=>loc.code === currentDesiredLocale);
+        const defaultLocale = locales.find((locale)=>locale.isDefault);
+        if (!doesLocaleExist && defaultLocale?.code) {
+            handleChange(defaultLocale.code, true);
+        }
+    }, [
+        hasI18n,
+        handleChange,
+        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;
+    }
+    return /*#__PURE__*/ jsx(SingleSelect, {
+        size: "S",
+        "aria-label": formatMessage({
+            id: getTranslation('actions.select-locale'),
+            defaultMessage: 'Select locale'
+        }),
+        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: sortedLocaleOptions
+    });
+};
+
+export { LocalePicker };
+//# sourceMappingURL=LocalePicker.mjs.map

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

@@ -0,0 +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  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/LocaleTable.js

@@ -0,0 +1,143 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var getTranslation = require('../utils/getTranslation.js');
+var DeleteLocale = require('./DeleteLocale.js');
+var EditLocale = require('./EditLocale.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const LocaleTable = ({ locales = [], canDelete, canUpdate })=>{
+    const [editLocaleId, setEditLocaleId] = React__namespace.useState();
+    const { formatMessage } = reactIntl.useIntl();
+    const handleClick = (localeId)=>()=>{
+            if (canUpdate) {
+                setEditLocaleId(localeId);
+            }
+        };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Table, {
+        colCount: 4,
+        rowCount: locales.length + 1,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Thead, {
+                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Tr, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Th, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                variant: "sigma",
+                                textColor: "neutral600",
+                                children: formatMessage({
+                                    id: getTranslation.getTranslation('Settings.locales.row.id'),
+                                    defaultMessage: 'ID'
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Th, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                variant: "sigma",
+                                textColor: "neutral600",
+                                children: formatMessage({
+                                    id: getTranslation.getTranslation('Settings.locales.row.displayName'),
+                                    defaultMessage: 'Display name'
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Th, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                variant: "sigma",
+                                textColor: "neutral600",
+                                children: formatMessage({
+                                    id: getTranslation.getTranslation('Settings.locales.row.default-locale'),
+                                    defaultMessage: 'Default locale'
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Th, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                                children: "Actions"
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tbody, {
+                children: locales.map((locale)=>/*#__PURE__*/ jsxRuntime.jsxs(React__namespace.Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Tr, {
+                                onClick: handleClick(locale.id),
+                                style: {
+                                    cursor: canUpdate ? 'pointer' : 'default'
+                                },
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                            textColor: "neutral800",
+                                            children: locale.id
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                            textColor: "neutral800",
+                                            children: locale.name
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                            textColor: "neutral800",
+                                            children: locale.isDefault ? formatMessage({
+                                                id: getTranslation.getTranslation('Settings.locales.default'),
+                                                defaultMessage: 'Default'
+                                            }) : null
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Td, {
+                                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                            gap: 1,
+                                            justifyContent: "flex-end",
+                                            onClick: (e)=>e.stopPropagation(),
+                                            children: [
+                                                canUpdate && /*#__PURE__*/ jsxRuntime.jsx(EditLocale.EditLocale, {
+                                                    ...locale
+                                                }),
+                                                canDelete && !locale.isDefault && /*#__PURE__*/ jsxRuntime.jsx(DeleteLocale.DeleteLocale, {
+                                                    ...locale
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(EditLocale.EditModal, {
+                                ...locale,
+                                onOpenChange: ()=>setEditLocaleId(undefined),
+                                open: editLocaleId === locale.id
+                            })
+                        ]
+                    }, locale.id))
+            })
+        ]
+    });
+};
+
+exports.LocaleTable = LocaleTable;
+//# sourceMappingURL=LocaleTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LocaleTable.js","sources":["../../../admin/src/components/LocaleTable.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Flex,\n  Table,\n  Tbody,\n  Td,\n  Th,\n  Thead,\n  Tr,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslation } from '../utils/getTranslation';\n\nimport { DeleteLocale } from './DeleteLocale';\nimport { EditLocale, EditModal } from './EditLocale';\n\nimport type { Locale } from '../../../shared/contracts/locales';\n\n/* -------------------------------------------------------------------------------------------------\n * LocaleTable\n * -----------------------------------------------------------------------------------------------*/\n\ntype LocaleTableProps = {\n  locales?: Locale[];\n  canDelete?: boolean;\n  canUpdate?: boolean;\n  onDeleteLocale?: (locale: Locale) => void;\n  onEditLocale?: (locale: Locale) => void;\n};\n\nconst LocaleTable = ({ locales = [], canDelete, canUpdate }: LocaleTableProps) => {\n  const [editLocaleId, setEditLocaleId] = React.useState<Locale['id']>();\n  const { formatMessage } = useIntl();\n\n  const handleClick = (localeId: Locale['id']) => () => {\n    if (canUpdate) {\n      setEditLocaleId(localeId);\n    }\n  };\n\n  return (\n    <Table colCount={4} rowCount={locales.length + 1}>\n      <Thead>\n        <Tr>\n          <Th>\n            <Typography variant=\"sigma\" textColor=\"neutral600\">\n              {formatMessage({\n                id: getTranslation('Settings.locales.row.id'),\n                defaultMessage: 'ID',\n              })}\n            </Typography>\n          </Th>\n          <Th>\n            <Typography variant=\"sigma\" textColor=\"neutral600\">\n              {formatMessage({\n                id: getTranslation('Settings.locales.row.displayName'),\n                defaultMessage: 'Display name',\n              })}\n            </Typography>\n          </Th>\n          <Th>\n            <Typography variant=\"sigma\" textColor=\"neutral600\">\n              {formatMessage({\n                id: getTranslation('Settings.locales.row.default-locale'),\n                defaultMessage: 'Default locale',\n              })}\n            </Typography>\n          </Th>\n          <Th>\n            <VisuallyHidden>Actions</VisuallyHidden>\n          </Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {locales.map((locale) => (\n          <React.Fragment key={locale.id}>\n            <Tr\n              onClick={handleClick(locale.id)}\n              style={{ cursor: canUpdate ? 'pointer' : 'default' }}\n            >\n              <Td>\n                <Typography textColor=\"neutral800\">{locale.id}</Typography>\n              </Td>\n              <Td>\n                <Typography textColor=\"neutral800\">{locale.name}</Typography>\n              </Td>\n              <Td>\n                <Typography textColor=\"neutral800\">\n                  {locale.isDefault\n                    ? formatMessage({\n                        id: getTranslation('Settings.locales.default'),\n                        defaultMessage: 'Default',\n                      })\n                    : null}\n                </Typography>\n              </Td>\n              <Td>\n                <Flex gap={1} justifyContent=\"flex-end\" onClick={(e) => e.stopPropagation()}>\n                  {canUpdate && <EditLocale {...locale} />}\n                  {canDelete && !locale.isDefault && <DeleteLocale {...locale} />}\n                </Flex>\n              </Td>\n            </Tr>\n            <EditModal\n              {...locale}\n              onOpenChange={() => setEditLocaleId(undefined)}\n              open={editLocaleId === locale.id}\n            />\n          </React.Fragment>\n        ))}\n      </Tbody>\n    </Table>\n  );\n};\n\nexport { LocaleTable };\nexport type { LocaleTableProps };\n"],"names":["LocaleTable","locales","canDelete","canUpdate","editLocaleId","setEditLocaleId","React","useState","formatMessage","useIntl","handleClick","localeId","_jsxs","Table","colCount","rowCount","length","_jsx","Thead","Tr","Th","Typography","variant","textColor","id","getTranslation","defaultMessage","VisuallyHidden","Tbody","map","locale","Fragment","onClick","style","cursor","Td","name","isDefault","Flex","gap","justifyContent","e","stopPropagation","EditLocale","DeleteLocale","EditModal","onOpenChange","undefined","open"],"mappings":"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"}

package/dist/admin/components/LocaleTable.mjs

@@ -0,0 +1,122 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Table, Thead, Tr, Th, Typography, VisuallyHidden, Tbody, Td, Flex } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { getTranslation } from '../utils/getTranslation.mjs';
+import { DeleteLocale } from './DeleteLocale.mjs';
+import { EditLocale, EditModal } from './EditLocale.mjs';
+
+const LocaleTable = ({ locales = [], canDelete, canUpdate })=>{
+    const [editLocaleId, setEditLocaleId] = React.useState();
+    const { formatMessage } = useIntl();
+    const handleClick = (localeId)=>()=>{
+            if (canUpdate) {
+                setEditLocaleId(localeId);
+            }
+        };
+    return /*#__PURE__*/ jsxs(Table, {
+        colCount: 4,
+        rowCount: locales.length + 1,
+        children: [
+            /*#__PURE__*/ jsx(Thead, {
+                children: /*#__PURE__*/ jsxs(Tr, {
+                    children: [
+                        /*#__PURE__*/ jsx(Th, {
+                            children: /*#__PURE__*/ jsx(Typography, {
+                                variant: "sigma",
+                                textColor: "neutral600",
+                                children: formatMessage({
+                                    id: getTranslation('Settings.locales.row.id'),
+                                    defaultMessage: 'ID'
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Th, {
+                            children: /*#__PURE__*/ jsx(Typography, {
+                                variant: "sigma",
+                                textColor: "neutral600",
+                                children: formatMessage({
+                                    id: getTranslation('Settings.locales.row.displayName'),
+                                    defaultMessage: 'Display name'
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Th, {
+                            children: /*#__PURE__*/ jsx(Typography, {
+                                variant: "sigma",
+                                textColor: "neutral600",
+                                children: formatMessage({
+                                    id: getTranslation('Settings.locales.row.default-locale'),
+                                    defaultMessage: 'Default locale'
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Th, {
+                            children: /*#__PURE__*/ jsx(VisuallyHidden, {
+                                children: "Actions"
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(Tbody, {
+                children: locales.map((locale)=>/*#__PURE__*/ jsxs(React.Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsxs(Tr, {
+                                onClick: handleClick(locale.id),
+                                style: {
+                                    cursor: canUpdate ? 'pointer' : 'default'
+                                },
+                                children: [
+                                    /*#__PURE__*/ jsx(Td, {
+                                        children: /*#__PURE__*/ jsx(Typography, {
+                                            textColor: "neutral800",
+                                            children: locale.id
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Td, {
+                                        children: /*#__PURE__*/ jsx(Typography, {
+                                            textColor: "neutral800",
+                                            children: locale.name
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Td, {
+                                        children: /*#__PURE__*/ jsx(Typography, {
+                                            textColor: "neutral800",
+                                            children: locale.isDefault ? formatMessage({
+                                                id: getTranslation('Settings.locales.default'),
+                                                defaultMessage: 'Default'
+                                            }) : null
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Td, {
+                                        children: /*#__PURE__*/ jsxs(Flex, {
+                                            gap: 1,
+                                            justifyContent: "flex-end",
+                                            onClick: (e)=>e.stopPropagation(),
+                                            children: [
+                                                canUpdate && /*#__PURE__*/ jsx(EditLocale, {
+                                                    ...locale
+                                                }),
+                                                canDelete && !locale.isDefault && /*#__PURE__*/ jsx(DeleteLocale, {
+                                                    ...locale
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(EditModal, {
+                                ...locale,
+                                onOpenChange: ()=>setEditLocaleId(undefined),
+                                open: editLocaleId === locale.id
+                            })
+                        ]
+                    }, locale.id))
+            })
+        ]
+    });
+};
+
+export { LocaleTable };
+//# sourceMappingURL=LocaleTable.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LocaleTable.mjs","sources":["../../../admin/src/components/LocaleTable.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Flex,\n  Table,\n  Tbody,\n  Td,\n  Th,\n  Thead,\n  Tr,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTranslation } from '../utils/getTranslation';\n\nimport { DeleteLocale } from './DeleteLocale';\nimport { EditLocale, EditModal } from './EditLocale';\n\nimport type { Locale } from '../../../shared/contracts/locales';\n\n/* -------------------------------------------------------------------------------------------------\n * LocaleTable\n * -----------------------------------------------------------------------------------------------*/\n\ntype LocaleTableProps = {\n  locales?: Locale[];\n  canDelete?: boolean;\n  canUpdate?: boolean;\n  onDeleteLocale?: (locale: Locale) => void;\n  onEditLocale?: (locale: Locale) => void;\n};\n\nconst LocaleTable = ({ locales = [], canDelete, canUpdate }: LocaleTableProps) => {\n  const [editLocaleId, setEditLocaleId] = React.useState<Locale['id']>();\n  const { formatMessage } = useIntl();\n\n  const handleClick = (localeId: Locale['id']) => () => {\n    if (canUpdate) {\n      setEditLocaleId(localeId);\n    }\n  };\n\n  return (\n    <Table colCount={4} rowCount={locales.length + 1}>\n      <Thead>\n        <Tr>\n          <Th>\n            <Typography variant=\"sigma\" textColor=\"neutral600\">\n              {formatMessage({\n                id: getTranslation('Settings.locales.row.id'),\n                defaultMessage: 'ID',\n              })}\n            </Typography>\n          </Th>\n          <Th>\n            <Typography variant=\"sigma\" textColor=\"neutral600\">\n              {formatMessage({\n                id: getTranslation('Settings.locales.row.displayName'),\n                defaultMessage: 'Display name',\n              })}\n            </Typography>\n          </Th>\n          <Th>\n            <Typography variant=\"sigma\" textColor=\"neutral600\">\n              {formatMessage({\n                id: getTranslation('Settings.locales.row.default-locale'),\n                defaultMessage: 'Default locale',\n              })}\n            </Typography>\n          </Th>\n          <Th>\n            <VisuallyHidden>Actions</VisuallyHidden>\n          </Th>\n        </Tr>\n      </Thead>\n      <Tbody>\n        {locales.map((locale) => (\n          <React.Fragment key={locale.id}>\n            <Tr\n              onClick={handleClick(locale.id)}\n              style={{ cursor: canUpdate ? 'pointer' : 'default' }}\n            >\n              <Td>\n                <Typography textColor=\"neutral800\">{locale.id}</Typography>\n              </Td>\n              <Td>\n                <Typography textColor=\"neutral800\">{locale.name}</Typography>\n              </Td>\n              <Td>\n                <Typography textColor=\"neutral800\">\n                  {locale.isDefault\n                    ? formatMessage({\n                        id: getTranslation('Settings.locales.default'),\n                        defaultMessage: 'Default',\n                      })\n                    : null}\n                </Typography>\n              </Td>\n              <Td>\n                <Flex gap={1} justifyContent=\"flex-end\" onClick={(e) => e.stopPropagation()}>\n                  {canUpdate && <EditLocale {...locale} />}\n                  {canDelete && !locale.isDefault && <DeleteLocale {...locale} />}\n                </Flex>\n              </Td>\n            </Tr>\n            <EditModal\n              {...locale}\n              onOpenChange={() => setEditLocaleId(undefined)}\n              open={editLocaleId === locale.id}\n            />\n          </React.Fragment>\n        ))}\n      </Tbody>\n    </Table>\n  );\n};\n\nexport { LocaleTable };\nexport type { LocaleTableProps };\n"],"names":["LocaleTable","locales","canDelete","canUpdate","editLocaleId","setEditLocaleId","React","useState","formatMessage","useIntl","handleClick","localeId","_jsxs","Table","colCount","rowCount","length","_jsx","Thead","Tr","Th","Typography","variant","textColor","id","getTranslation","defaultMessage","VisuallyHidden","Tbody","map","locale","Fragment","onClick","style","cursor","Td","name","isDefault","Flex","gap","justifyContent","e","stopPropagation","EditLocale","DeleteLocale","EditModal","onOpenChange","undefined","open"],"mappings":"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"}