@snack-uikit/locale 0.13.0 → 0.13.1-preview-3df2b4f3.0

package/README.md

@@ -49,20 +49,72 @@ const lang = 'en_GB'; // or 'ru_RU' or 'custom_LANG'
 
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
-
 ## LocaleProvider
-
 ### Props
-
-| name    | type                                                                                                                                                                                                                                                                                                                              | default value | description |
-| ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ----------- |
-| lang\*  | `string`                                                                                                                                                                                                                                                                                                                          | -             |             |
-| locales | `PartialObjectDeep<Record<string, { Table: { searchPlaceholder: string; noData: { title: string; }; noResults: { title: string; description: string; }; errorData: { title: string; description: string; }; rowsOptionsLabel: string; export: string; groupSelectButton: { ...; }; }; ... 7 more ...; ToastUpload: { ...; }; }>>` | -             |             |
-
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| lang* | "en_GB" \| "ru_RU" | - |  |
 ## useLocale
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| __@iterator@787* | `() => IterableIterator<string>` | - | Iterator |
+| toWellFormed* | `() => string` | - | Returns a string where all lone or out-of-order surrogates have been replaced by the Unicode replacement character (U+FFFD). |
+| isWellFormed* | `() => boolean` | - | Returns true if all leading surrogates and trailing surrogates appear paired and in order. |
+| at* | `(index: number) => string` | - | Returns a new String consisting of the single UTF-16 code unit located at the specified index. @param index The zero-based index of the desired code unit. A negative index will count back from the last item. |
+| replaceAll* | `{ (searchValue: string \| RegExp, replaceValue: string): string; (searchValue: string \| RegExp, replacer: (substring: string, ...args: any[]) => string): string; }` | - | Replace all instances of a substring in a string, using a regular expression or search string. @param searchValue A string to search for. @param replaceValue A string containing the text to replace for every successful match of searchValue in this string. @param searchValue A string to search for. @param replacer A function that returns the replacement text. |
+| matchAll* | `(regexp: RegExp) => IterableIterator<RegExpExecArray>` | - | Matches a string with a regular expression, and returns an iterable of matches containing the results of that search. @param regexp A variable name or string literal containing the regular expression pattern and flags. |
+| trimRight* | `() => string` | - | Removes the trailing white space and line terminator characters from a string. @deprecated A legacy feature for browser compatibility. Use `trimEnd` instead |
+| trimLeft* | `() => string` | - | Removes the leading white space and line terminator characters from a string. @deprecated A legacy feature for browser compatibility. Use `trimStart` instead |
+| trimStart* | `() => string` | - | Removes the leading white space and line terminator characters from a string. |
+| trimEnd* | `() => string` | - | Removes the trailing white space and line terminator characters from a string. |
+| padEnd* | `(maxLength: number, fillString?: string) => string` | - | Pads the current string with a given string (possibly repeated) so that the resulting string reaches a given length. The padding is applied from the end (right) of the current string. @param maxLength The length of the resulting string once the current string has been padded. If this parameter is smaller than the current string's length, the current string will be returned as it is. @param fillString The string to pad the current string with. If this string is too long, it will be truncated and the left-most part will be applied. The default value for this parameter is " " (U+0020). |
+| padStart* | `(maxLength: number, fillString?: string) => string` | - | Pads the current string with a given string (possibly repeated) so that the resulting string reaches a given length. The padding is applied from the start (left) of the current string. @param maxLength The length of the resulting string once the current string has been padded. If this parameter is smaller than the current string's length, the current string will be returned as it is. @param fillString The string to pad the current string with. If this string is too long, it will be truncated and the left-most part will be applied. The default value for this parameter is " " (U+0020). |
+| sup* | `() => string` | - | Returns a `<sup>` HTML element @deprecated A legacy feature for browser compatibility |
+| sub* | `() => string` | - | Returns a `<sub>` HTML element @deprecated A legacy feature for browser compatibility |
+| strike* | `() => string` | - | Returns a `<strike>` HTML element @deprecated A legacy feature for browser compatibility |
+| small* | `() => string` | - | Returns a `<small>` HTML element @deprecated A legacy feature for browser compatibility |
+| link* | `(url: string) => string` | - | Returns an `<a>` HTML element and sets the href attribute value @deprecated A legacy feature for browser compatibility |
+| italics* | `() => string` | - | Returns an `<i>` HTML element @deprecated A legacy feature for browser compatibility |
+| fontsize* | `{ (size: number): string; (size: string): string; }` | - | Returns a `<font>` HTML element and sets the size attribute value @deprecated A legacy feature for browser compatibility @deprecated A legacy feature for browser compatibility |
+| fontcolor* | `(color: string) => string` | - | Returns a `<font>` HTML element and sets the color attribute value @deprecated A legacy feature for browser compatibility |
+| fixed* | `() => string` | - | Returns a `<tt>` HTML element @deprecated A legacy feature for browser compatibility |
+| bold* | `() => string` | - | Returns a `<b>` HTML element @deprecated A legacy feature for browser compatibility |
+| blink* | `() => string` | - | Returns a `<blink>` HTML element @deprecated A legacy feature for browser compatibility |
+| big* | `() => string` | - | Returns a `<big>` HTML element @deprecated A legacy feature for browser compatibility |
+| anchor* | `(name: string) => string` | - | Returns an `<a>` HTML anchor element and sets the name attribute to the text value @deprecated A legacy feature for browser compatibility @param name |
+| startsWith* | `(searchString: string, position?: number) => boolean` | - | Returns true if the sequence of elements of searchString converted to a String is the same as the corresponding elements of this object (converted to a String) starting at position. Otherwise returns false. |
+| repeat* | `(count: number) => string` | - | Returns a String value that is made from count copies appended together. If count is 0, the empty string is returned. @param count number of copies to append |
+| normalize* | `{ (form: "NFC" \| "NFD" \| "NFKC" \| "NFKD"): string; (form?: string): string; }` | - | Returns the String value result of normalizing the string into the normalization form named by form as specified in Unicode Standard Annex #15, Unicode Normalization Forms. @param form Applicable values: "NFC", "NFD", "NFKC", or "NFKD", If not specified default is "NFC" @param form Applicable values: "NFC", "NFD", "NFKC", or "NFKD", If not specified default is "NFC" |
+| endsWith* | `(searchString: string, endPosition?: number) => boolean` | - | Returns true if the sequence of elements of searchString converted to a String is the same as the corresponding elements of this object (converted to a String) starting at endPosition – length(this). Otherwise returns false. |
+| includes* | `(searchString: string, position?: number) => boolean` | - | Returns true if searchString appears as a substring of the result of converting this object to a String, at one or more positions that are greater than or equal to position; otherwise, returns false. @param searchString search string @param position If position is undefined, 0 is assumed, so as to search all of the String. |
+| codePointAt* | `(pos: number) => number` | - | Returns a nonnegative integer Number less than 1114112 (0x110000) that is the code point value of the UTF-16 encoded code point starting at the string element at position pos in the String resulting from converting this object to a String. If there is no element at that position, the result is undefined. If a valid UTF-16 surrogate pair does not begin at pos, the result is the code unit at pos. |
+| substr* | `(from: number, length?: number) => string` | - | Gets a substring beginning at the specified location and having the specified length. @deprecated A legacy feature for browser compatibility @param from The starting position of the desired substring. The index of the first character in the string is zero. @param length The number of characters to include in the returned substring. |
+| length* | `number` | - | Returns the length of a String object. |
+| trim* | `() => string` | - | Removes the leading and trailing white space and line terminator characters from a string. |
+| toLocaleUpperCase* | `{ (locales?: string \| string[]): string; (locales?: LocalesArgument): string; }` | - | Returns a string where all alphabetic characters have been converted to uppercase, taking into account the host environment's current locale. |
+| toUpperCase* | `() => string` | - | Converts all the alphabetic characters in a string to uppercase. |
+| toLocaleLowerCase* | `{ (locales?: string \| string[]): string; (locales?: LocalesArgument): string; }` | - | Converts all alphabetic characters to lowercase, taking into account the host environment's current locale. |
+| toLowerCase* | `() => string` | - | Converts all the alphabetic characters in a string to lowercase. |
+| substring* | `(start: number, end?: number) => string` | - | Returns the substring at the specified location within a String object. @param start The zero-based index number indicating the beginning of the substring. @param end Zero-based index number indicating the end of the substring. The substring includes the characters up to, but not including, the character indicated by end. If end is omitted, the characters from start through the end of the original string are returned. |
+| split* | `{ (separator: string \| RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }` | - | Split a string into substrings using the specified separator and return them as an array. @param separator A string that identifies character or characters to use in separating the string. If omitted, a single-element array containing the entire string is returned. @param limit A value used to limit the number of elements returned in the array. @param splitter An object that can split a string. @param limit A value used to limit the number of elements returned in the array. |
+| slice* | `(start?: number, end?: number) => string` | - | Returns a section of a string. @param start The index to the beginning of the specified portion of stringObj. @param end The index to the end of the specified portion of stringObj. The substring includes the characters up to, but not including, the character indicated by end. If this value is not specified, the substring continues to the end of stringObj. |
+| search* | `{ (regexp: string \| RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }` | - | Finds the first substring match in a regular expression search. @param regexp The regular expression pattern and applicable flags. @param searcher An object which supports searching within a string. |
+| replace* | `{ (searchValue: string \| RegExp, replaceValue: string): string; (searchValue: string \| RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { ...; }, replaceValue: string): string; (searchValue: { ...; }, replacer: (substring: string, ...args: any[]) => string): string; }` | - | Replaces text in a string, using a regular expression or search string. Passes a string and {@linkcode replaceValue} to the `[Symbol.replace]` method on {@linkcode searchValue}. This method is expected to implement its own replacement algorithm. Replaces text in a string, using an object that supports replacement within a string. @param searchValue A string or regular expression to search for. @param replaceValue A string containing the text to replace. When the {@linkcode searchValue } is a `RegExp`, all matches are replaced if the `g` flag is set (or only those matches at the beginning, if the `y` flag is also present). Otherwise, only the first match of {@linkcode searchValue } is replaced. @param searchValue A string to search for. @param replacer A function that returns the replacement text. @param searchValue An object that supports searching for and replacing matches within a string. @param replaceValue The replacement text. @param searchValue A object can search for and replace matches within a string. @param replacer A function that returns the replacement text. |
+| match* | `{ (regexp: string \| RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }` | - | Matches a string with a regular expression, and returns an array containing the results of that search. Matches a string or an object that supports being matched against, and returns an array containing the results of that search, or null if no matches are found. @param regexp A variable name or string literal containing the regular expression pattern and flags. @param matcher An object that supports being matched against. |
+| localeCompare* | `{ (that: string): number; (that: string, locales?: string \| string[], options?: CollatorOptions): number; (that: string, locales?: LocalesArgument, options?: CollatorOptions): number; }` | - | Determines whether two strings are equivalent in the current locale. Determines whether two strings are equivalent in the current or specified locale. @param that String to compare to target string @param that String to compare to target string @param locales A locale string or array of locale strings that contain one or more language or locale tags. If you include more than one locale string, list them in descending order of priority so that the first entry is the preferred locale. If you omit this parameter, the default locale of the JavaScript runtime is used. This parameter must conform to BCP 47 standards; see the Intl.Collator object for details. @param options An object that contains one or more properties that specify comparison options. see the Intl.Collator object for details. @param that String to compare to target string @param locales A locale string or array of locale strings that contain one or more language or locale tags. If you include more than one locale string, list them in descending order of priority so that the first entry is the preferred locale. If you omit this parameter, the default locale of the JavaScript runtime is used. This parameter must conform to BCP 47 standards; see the Intl.Collator object for details. @param options An object that contains one or more properties that specify comparison options. see the Intl.Collator object for details. |
+| lastIndexOf* | `(searchString: string, position?: number) => number` | - | Returns the last occurrence of a substring in the string. @param searchString The substring to search for. @param position The index at which to begin searching. If omitted, the search begins at the end of the string. |
+| indexOf* | `(searchString: string, position?: number) => number` | - | Returns the position of the first occurrence of a substring. @param searchString The substring to search for in the string @param position The index at which to begin searching the String object. If omitted, search starts at the beginning of the string. |
+| concat* | `(...strings: string[]) => string` | - | Returns a string that contains the concatenation of two or more strings. @param strings The strings to append to the end of the string. |
+| charCodeAt* | `(index: number) => number` | - | Returns the Unicode value of the character at the specified location. @param index The zero-based index of the desired character. If there is no character at the specified index, NaN is returned. |
+| charAt* | `(pos: number) => string` | - | Returns the character at the specified index. @param pos The zero-based index of the desired character. |
+| toString | `() => string` | function toString() { [native code] } | Returns a string representation of a string. |
+| valueOf | `() => string` | function valueOf() { [native code] } | Returns the primitive value of the specified object. |
+## createLocaleContext
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| extendedDictionary | `ExtendedDictionary<D>` | - |  |
 
-`helper`
-
-Inner hook to use translations
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/cjs/components/LocaleProvider/LocaleProvider.d.ts

@@ -1,15 +1,41 @@
 import { ReactNode } from 'react';
-import { LocaleDictionary, LocaleLang, OverrideLocales } from '../../types';
+import { Dictionary, DottedTranslationKey, ExtendedDictionary, LocaleDictionary, LocaleLang } from '../../types';
 export declare const DEFAULT_LANG = "en_GB";
-export type LocaleContextType = {
+export type LocaleContextType<D extends Dictionary> = {
     lang: LocaleLang;
-    locales: OverrideLocales;
-    localesByLang: LocaleDictionary;
+    localesByLang: LocaleDictionary<D>;
 };
-export declare const LocaleContext: import("react").Context<LocaleContextType>;
 export type LocaleProviderProps = {
     lang: LocaleLang;
-    locales?: OverrideLocales;
     children: ReactNode;
 };
-export declare function LocaleProvider({ lang: langProp, locales: localesProp, children }: LocaleProviderProps): import("react/jsx-runtime").JSX.Element;
+export type ContextOptions<D extends Dictionary> = {
+    extendedDictionary?: ExtendedDictionary<D>;
+};
+type LocaleComponentName<D extends Dictionary> = keyof LocaleDictionary<D>;
+type GetLocaleText<D extends Dictionary, T extends keyof LocaleDictionary<D> | undefined = undefined> = (key: DottedTranslationKey<D, T>) => string;
+export declare function createLocaleContext<D extends Dictionary>({ extendedDictionary }: ContextOptions<D>): {
+    LocaleContext: import("react").Context<LocaleContextType<D>>;
+    LocaleProvider: ({ lang: langProp, children }: LocaleProviderProps) => import("react/jsx-runtime").JSX.Element;
+    useLocale: {
+        (): {
+            t: GetLocaleText<D>;
+            lang: LocaleLang;
+        };
+        <C extends LocaleComponentName<D> = "Table" | "List" | "Chips" | "Fields" | "SearchPrivate" | "ColorPicker" | "Calendar" | "Toolbar" | "ToastUpload" | keyof D>(componentName: C): {
+            t: GetLocaleText<D, C>;
+            lang: LocaleLang;
+        };
+    };
+};
+export declare const LocaleProvider: ({ lang: langProp, children }: LocaleProviderProps) => import("react/jsx-runtime").JSX.Element, useLocale: {
+    (): {
+        t: GetLocaleText<Dictionary>;
+        lang: LocaleLang;
+    };
+    <C extends string = string>(componentName: C): {
+        t: GetLocaleText<Dictionary, C>;
+        lang: LocaleLang;
+    };
+};
+export {};

package/dist/cjs/components/LocaleProvider/LocaleProvider.js

@@ -5,48 +5,90 @@ var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
     "default": mod
   };
 };
+var _a;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LocaleContext = exports.DEFAULT_LANG = void 0;
-exports.LocaleProvider = LocaleProvider;
+exports.useLocale = exports.LocaleProvider = exports.DEFAULT_LANG = void 0;
+exports.createLocaleContext = createLocaleContext;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lodash_merge_1 = __importDefault(require("lodash.merge"));
 const react_1 = require("react");
 const locales_1 = require("../../locales");
 exports.DEFAULT_LANG = 'en_GB';
-exports.LocaleContext = (0, react_1.createContext)({
-  lang: exports.DEFAULT_LANG,
-  locales: locales_1.LOCALES,
-  localesByLang: locales_1.LOCALES.en_GB
-});
-function LocaleProvider(_ref) {
+function mergeLocaleWithExtension(extension) {
+  return (0, lodash_merge_1.default)({}, locales_1.LOCALES, extension);
+}
+function createLocaleContext(_ref) {
   let {
-    lang: langProp,
-    locales: localesProp,
-    children
+    extendedDictionary
   } = _ref;
-  const locales = (0, react_1.useMemo)(() => {
-    if (localesProp) {
-      return (0, lodash_merge_1.default)({}, locales_1.LOCALES, localesProp);
-    }
-    return locales_1.LOCALES;
-  }, [localesProp]);
-  const lang = (0, react_1.useMemo)(() => langProp.replace('-', '_'), [langProp]);
-  const localesByLang = (0, react_1.useMemo)(() => {
-    let localesObj = locales[lang];
-    if (!localesObj) {
-      console.warn(`Snack-uikit: localization for lang ${lang} was not found. Make sure you are using correct lang or passed proper locales to LocaleProvider. For now default language (${exports.DEFAULT_LANG}) will be used`);
-      localesObj = locales[exports.DEFAULT_LANG];
-    }
-    return localesObj;
-  }, [lang, locales]);
-  return (0, jsx_runtime_1.jsx)(exports.LocaleContext.Provider, {
-    value: {
-      lang,
-      locales,
-      localesByLang
-    },
-    children: children
+  const locales = mergeLocaleWithExtension(extendedDictionary);
+  const LocaleContext = (0, react_1.createContext)({
+    lang: exports.DEFAULT_LANG,
+    localesByLang: locales.en_GB
   });
-}
+  function LocaleProvider(_ref2) {
+    let {
+      lang: langProp,
+      children
+    } = _ref2;
+    const lang = (0, react_1.useMemo)(() => langProp.replace('-', '_'), [langProp]);
+    const localesByLang = (0, react_1.useMemo)(() => {
+      let localesObj = locales[lang];
+      if (!localesObj) {
+        console.warn(`Snack-uikit: localization for lang ${lang} was not found. Make sure you are using correct lang or passed proper locales to LocaleProvider. For now default language (${exports.DEFAULT_LANG}) will be used`);
+        localesObj = locales[exports.DEFAULT_LANG];
+      }
+      return localesObj;
+    }, [lang]);
+    return (0, jsx_runtime_1.jsx)(LocaleContext.Provider, {
+      value: {
+        lang,
+        localesByLang
+      },
+      children: children
+    });
+  }
+  function useLocale(componentName) {
+    const {
+      localesByLang,
+      lang
+    } = (0, react_1.useContext)(LocaleContext);
+    const locales = (0, react_1.useMemo)(() => {
+      if (!componentName) {
+        return localesByLang;
+      }
+      return localesByLang[componentName] || {};
+    }, [componentName, localesByLang]);
+    const getLocaleText = (0, react_1.useCallback)(key => {
+      let translation = '';
+      const complexKey = key.split('.');
+      if (complexKey.length === 1) {
+        translation = locales[key];
+      } else {
+        translation = complexKey.reduce((acc, cur) => {
+          if (typeof acc === 'string') {
+            return acc;
+          }
+          return acc[cur];
+        }, locales);
+      }
+      if (!(translation === null || translation === void 0 ? void 0 : translation.length)) {
+        console.warn(`Snack-uikit: the '${key}' key is not found in the current locale '${lang}'.`);
+        return key;
+      }
+      return translation;
+    }, [lang, locales]);
+    return {
+      t: getLocaleText,
+      lang
+    };
+  }
+  return {
+    LocaleContext,
+    LocaleProvider,
+    useLocale
+  };
+}
+_a = createLocaleContext({}), exports.LocaleProvider = _a.LocaleProvider, exports.useLocale = _a.useLocale;

package/dist/cjs/components/LocaleProvider/Sample.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+type SampleWrapperProps = {
+    children: ReactNode;
+};
+export declare function SampleWrapper({ children }: SampleWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function OldDictionaryItemSample(): import("react/jsx-runtime").JSX.Element;
+export declare function NewDictionarySample(): import("react/jsx-runtime").JSX.Element;
+export declare function NewDictSimpleTranslationComponent(): import("react/jsx-runtime").JSX.Element;
+export declare function NewDictDeepTranslationComponent(): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/LocaleProvider/Sample.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SampleWrapper = SampleWrapper;
+exports.OldDictionaryItemSample = OldDictionaryItemSample;
+exports.NewDictionarySample = NewDictionarySample;
+exports.NewDictSimpleTranslationComponent = NewDictSimpleTranslationComponent;
+exports.NewDictDeepTranslationComponent = NewDictDeepTranslationComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LocaleProvider_1 = require("./LocaleProvider");
+const sampleExtensionEn = {
+  Table: {
+    searchPlaceholder: 'SearchOverriden'
+  },
+  ButtonPredefined: {
+    create: 'Create',
+    cancel: 'Cancel',
+    refetch: 'Refetch'
+  },
+  Site: {
+    Section: {
+      Basic: {
+        ShowMore: 'Show More'
+      },
+      PersonalManager: {
+        title: 'More than regular support',
+        subtitle: 'Full support for solving your problems and achieving business results'
+      }
+    }
+  }
+};
+const sampleExtensionRu = {
+  Table: {
+    searchPlaceholder: 'SearchOverriden'
+  },
+  ButtonPredefined: {
+    create: 'Создать',
+    cancel: 'Отмена',
+    refetch: 'Обновить'
+  },
+  Site: {
+    Section: {
+      Basic: {
+        ShowMore: 'Показать еще'
+      },
+      PersonalManager: {
+        title: 'Больше чем просто поддержка',
+        subtitle: 'Полное сопровождение для решения ваших задач и понятный бизнес-результат'
+      }
+    }
+  }
+};
+const extension = {
+  en_GB: sampleExtensionEn,
+  ru_RU: sampleExtensionRu
+};
+const {
+  LocaleProvider,
+  useLocale
+} = (0, LocaleProvider_1.createLocaleContext)({
+  extendedDictionary: extension
+});
+function SampleWrapper(_ref) {
+  let {
+    children
+  } = _ref;
+  return (0, jsx_runtime_1.jsx)(LocaleProvider, {
+    lang: 'ru_RU',
+    children: children
+  });
+}
+function OldDictionaryItemSample() {
+  const {
+    t
+  } = useLocale('Table');
+  return (0, jsx_runtime_1.jsxs)("div", {
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      children: t('searchPlaceholder')
+    }), (0, jsx_runtime_1.jsx)("div", {
+      children: t('noResults.title')
+    })]
+  });
+}
+function NewDictionarySample() {
+  const {
+    t
+  } = useLocale();
+  return (0, jsx_runtime_1.jsxs)("div", {
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      children: t('Table.searchPlaceholder')
+    }), (0, jsx_runtime_1.jsx)("div", {
+      children: t('Table.noResults.title')
+    }), (0, jsx_runtime_1.jsx)("div", {
+      children: t('ButtonPredefined.create')
+    }), (0, jsx_runtime_1.jsx)("div", {
+      children: t('Site.Section.PersonalManager.title')
+    })]
+  });
+}
+function NewDictSimpleTranslationComponent() {
+  const {
+    t
+  } = useLocale('ButtonPredefined');
+  return (0, jsx_runtime_1.jsx)("div", {
+    children: t('create')
+  });
+}
+function NewDictDeepTranslationComponent() {
+  const {
+    t
+  } = useLocale('Site');
+  return (0, jsx_runtime_1.jsx)("div", {
+    children: t('Section.PersonalManager.title')
+  });
+}

package/dist/cjs/components/LocaleProvider/index.d.ts

@@ -1,2 +1 @@
-export { type LocaleProviderProps, LocaleProvider } from './LocaleProvider';
-export { useLocale } from './hooks';
+export { type LocaleProviderProps, LocaleProvider, useLocale, createLocaleContext } from './LocaleProvider';

package/dist/cjs/components/LocaleProvider/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useLocale = exports.LocaleProvider = void 0;
+exports.createLocaleContext = exports.useLocale = exports.LocaleProvider = void 0;
 var LocaleProvider_1 = require("./LocaleProvider");
 Object.defineProperty(exports, "LocaleProvider", {
   enumerable: true,
@@ -11,10 +11,15 @@ Object.defineProperty(exports, "LocaleProvider", {
     return LocaleProvider_1.LocaleProvider;
   }
 });
-var hooks_1 = require("./hooks");
 Object.defineProperty(exports, "useLocale", {
   enumerable: true,
   get: function () {
-    return hooks_1.useLocale;
+    return LocaleProvider_1.useLocale;
+  }
+});
+Object.defineProperty(exports, "createLocaleContext", {
+  enumerable: true,
+  get: function () {
+    return LocaleProvider_1.createLocaleContext;
   }
 });

package/dist/cjs/typeUtils.d.ts

@@ -1,28 +1,3 @@
-type Primitive = null | undefined | string | number | boolean | symbol | bigint;
-type BuiltIns = Primitive | void | Date | RegExp;
-export type PartialDeep<T> = T extends BuiltIns | ((...arguments_: unknown[]) => unknown) | (new (...arguments_: unknown[]) => unknown) ? T : T extends Map<infer KeyType, infer ValueType> ? PartialMapDeep<KeyType, ValueType> : T extends Set<infer ItemType> ? PartialSetDeep<ItemType> : T extends ReadonlyMap<infer KeyType, infer ValueType> ? PartialReadonlyMapDeep<KeyType, ValueType> : T extends ReadonlySet<infer ItemType> ? PartialReadonlySetDeep<ItemType> : T extends object ? PartialObjectDeep<T> : unknown;
-/**
- Same as `PartialDeep`, but accepts only `Map`s and as inputs. Internal helper for `PartialDeep`.
- */
-type PartialMapDeep<KeyType, ValueType> = unknown & Map<PartialDeep<KeyType>, PartialDeep<ValueType>>;
-/**
- Same as `PartialDeep`, but accepts only `Set`s as inputs. Internal helper for `PartialDeep`.
- */
-type PartialSetDeep<T> = unknown & Set<PartialDeep<T>>;
-/**
- Same as `PartialDeep`, but accepts only `ReadonlyMap`s as inputs. Internal helper for `PartialDeep`.
- */
-type PartialReadonlyMapDeep<KeyType, ValueType> = unknown & ReadonlyMap<PartialDeep<KeyType>, PartialDeep<ValueType>>;
-/**
- Same as `PartialDeep`, but accepts only `ReadonlySet`s as inputs. Internal helper for `PartialDeep`.
- */
-type PartialReadonlySetDeep<T> = unknown & ReadonlySet<PartialDeep<T>>;
-/**
- Same as `PartialDeep`, but accepts only `object`s as inputs. Internal helper for `PartialDeep`.
- */
-type PartialObjectDeep<ObjectType extends object> = {
-    [KeyType in keyof ObjectType]?: PartialDeep<ObjectType[KeyType]>;
-};
 /**
  * https://stackoverflow.com/a/73179989
  */

package/dist/cjs/types.d.ts

@@ -1,7 +1,11 @@
 import { LOCALES } from './locales';
-import { PartialDeep, PathsToProps } from './typeUtils';
-export type KnownLocaleLang = keyof typeof LOCALES;
-export type LocaleLang = KnownLocaleLang | string;
-export type LocaleDictionary = typeof LOCALES.en_GB;
-export type OverrideLocales = PartialDeep<Record<LocaleLang, LocaleDictionary>>;
-export type DottedTranslationKey<C extends keyof LocaleDictionary | undefined = undefined> = C extends keyof LocaleDictionary ? PathsToProps<LocaleDictionary[C], string> : PathsToProps<LocaleDictionary, string>;
+import { PathsToProps } from './typeUtils';
+export type LocaleLang = keyof typeof LOCALES;
+export type TranslatedEntity = {
+    [key: string]: string | TranslatedEntity;
+};
+export type Dictionary = Record<string, TranslatedEntity>;
+export type LocaleDictionary<D extends Dictionary> = typeof LOCALES.en_GB & D;
+export type Locales<D extends Dictionary> = Record<LocaleLang, LocaleDictionary<D>>;
+export type DottedTranslationKey<D extends Dictionary, C extends keyof LocaleDictionary<D> | undefined = undefined> = C extends keyof LocaleDictionary<D> ? PathsToProps<LocaleDictionary<D>[C], string> : PathsToProps<LocaleDictionary<D>, string>;
+export type ExtendedDictionary<D> = Record<LocaleLang, D>;

package/dist/esm/components/LocaleProvider/LocaleProvider.d.ts

@@ -1,15 +1,41 @@
 import { ReactNode } from 'react';
-import { LocaleDictionary, LocaleLang, OverrideLocales } from '../../types';
+import { Dictionary, DottedTranslationKey, ExtendedDictionary, LocaleDictionary, LocaleLang } from '../../types';
 export declare const DEFAULT_LANG = "en_GB";
-export type LocaleContextType = {
+export type LocaleContextType<D extends Dictionary> = {
     lang: LocaleLang;
-    locales: OverrideLocales;
-    localesByLang: LocaleDictionary;
+    localesByLang: LocaleDictionary<D>;
 };
-export declare const LocaleContext: import("react").Context<LocaleContextType>;
 export type LocaleProviderProps = {
     lang: LocaleLang;
-    locales?: OverrideLocales;
     children: ReactNode;
 };
-export declare function LocaleProvider({ lang: langProp, locales: localesProp, children }: LocaleProviderProps): import("react/jsx-runtime").JSX.Element;
+export type ContextOptions<D extends Dictionary> = {
+    extendedDictionary?: ExtendedDictionary<D>;
+};
+type LocaleComponentName<D extends Dictionary> = keyof LocaleDictionary<D>;
+type GetLocaleText<D extends Dictionary, T extends keyof LocaleDictionary<D> | undefined = undefined> = (key: DottedTranslationKey<D, T>) => string;
+export declare function createLocaleContext<D extends Dictionary>({ extendedDictionary }: ContextOptions<D>): {
+    LocaleContext: import("react").Context<LocaleContextType<D>>;
+    LocaleProvider: ({ lang: langProp, children }: LocaleProviderProps) => import("react/jsx-runtime").JSX.Element;
+    useLocale: {
+        (): {
+            t: GetLocaleText<D>;
+            lang: LocaleLang;
+        };
+        <C extends LocaleComponentName<D> = "Table" | "List" | "Chips" | "Fields" | "SearchPrivate" | "ColorPicker" | "Calendar" | "Toolbar" | "ToastUpload" | keyof D>(componentName: C): {
+            t: GetLocaleText<D, C>;
+            lang: LocaleLang;
+        };
+    };
+};
+export declare const LocaleProvider: ({ lang: langProp, children }: LocaleProviderProps) => import("react/jsx-runtime").JSX.Element, useLocale: {
+    (): {
+        t: GetLocaleText<Dictionary>;
+        lang: LocaleLang;
+    };
+    <C extends string = string>(componentName: C): {
+        t: GetLocaleText<Dictionary, C>;
+        lang: LocaleLang;
+    };
+};
+export {};

package/dist/esm/components/LocaleProvider/LocaleProvider.js

@@ -1,28 +1,66 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import merge from 'lodash.merge';
-import { createContext, useMemo } from 'react';
+import { createContext, useCallback, useContext, useMemo } from 'react';
 import { LOCALES } from '../../locales';
 export const DEFAULT_LANG = 'en_GB';
-export const LocaleContext = createContext({
-    lang: DEFAULT_LANG,
-    locales: LOCALES,
-    localesByLang: LOCALES.en_GB,
-});
-export function LocaleProvider({ lang: langProp, locales: localesProp, children }) {
-    const locales = useMemo(() => {
-        if (localesProp) {
-            return merge({}, LOCALES, localesProp);
-        }
-        return LOCALES;
-    }, [localesProp]);
-    const lang = useMemo(() => langProp.replace('-', '_'), [langProp]);
-    const localesByLang = useMemo(() => {
-        let localesObj = locales[lang];
-        if (!localesObj) {
-            console.warn(`Snack-uikit: localization for lang ${lang} was not found. Make sure you are using correct lang or passed proper locales to LocaleProvider. For now default language (${DEFAULT_LANG}) will be used`);
-            localesObj = locales[DEFAULT_LANG];
-        }
-        return localesObj;
-    }, [lang, locales]);
-    return _jsx(LocaleContext.Provider, { value: { lang, locales, localesByLang }, children: children });
+function mergeLocaleWithExtension(extension) {
+    return merge({}, LOCALES, extension);
 }
+export function createLocaleContext({ extendedDictionary }) {
+    const locales = mergeLocaleWithExtension(extendedDictionary);
+    const LocaleContext = createContext({
+        lang: DEFAULT_LANG,
+        localesByLang: locales.en_GB,
+    });
+    function LocaleProvider({ lang: langProp, children }) {
+        const lang = useMemo(() => langProp.replace('-', '_'), [langProp]);
+        const localesByLang = useMemo(() => {
+            let localesObj = locales[lang];
+            if (!localesObj) {
+                console.warn(`Snack-uikit: localization for lang ${lang} was not found. Make sure you are using correct lang or passed proper locales to LocaleProvider. For now default language (${DEFAULT_LANG}) will be used`);
+                localesObj = locales[DEFAULT_LANG];
+            }
+            return localesObj;
+        }, [lang]);
+        return _jsx(LocaleContext.Provider, { value: { lang, localesByLang }, children: children });
+    }
+    function useLocale(componentName) {
+        const { localesByLang, lang } = useContext(LocaleContext);
+        const locales = useMemo(() => {
+            if (!componentName) {
+                return localesByLang;
+            }
+            return (localesByLang[componentName] || {});
+        }, [componentName, localesByLang]);
+        const getLocaleText = useCallback(key => {
+            let translation = '';
+            const complexKey = key.split('.');
+            if (complexKey.length === 1) {
+                translation = locales[key];
+            }
+            else {
+                translation = complexKey.reduce((acc, cur) => {
+                    if (typeof acc === 'string') {
+                        return acc;
+                    }
+                    return acc[cur];
+                }, locales);
+            }
+            if (!(translation === null || translation === void 0 ? void 0 : translation.length)) {
+                console.warn(`Snack-uikit: the '${key}' key is not found in the current locale '${lang}'.`);
+                return key;
+            }
+            return translation;
+        }, [lang, locales]);
+        return {
+            t: getLocaleText,
+            lang,
+        };
+    }
+    return {
+        LocaleContext,
+        LocaleProvider,
+        useLocale,
+    };
+}
+export const { LocaleProvider, useLocale } = createLocaleContext({});

package/dist/esm/components/LocaleProvider/Sample.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+type SampleWrapperProps = {
+    children: ReactNode;
+};
+export declare function SampleWrapper({ children }: SampleWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function OldDictionaryItemSample(): import("react/jsx-runtime").JSX.Element;
+export declare function NewDictionarySample(): import("react/jsx-runtime").JSX.Element;
+export declare function NewDictSimpleTranslationComponent(): import("react/jsx-runtime").JSX.Element;
+export declare function NewDictDeepTranslationComponent(): import("react/jsx-runtime").JSX.Element;
+export {};