@ndla/ui 56.0.103-alpha.0 → 56.0.105-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/es/i18n/useComponentTranslations.js +15 -14
  2. package/lib/i18n/useComponentTranslations.js +15 -14
  3. package/package.json +4 -4
  4. package/src/i18n/useComponentTranslations.ts +91 -68
package/es/i18n/useComponentTranslations.js CHANGED
@@ -7,13 +7,14 @@
7
7
  */
8
8
 
9
9
  import { useTranslation } from "react-i18next";
10
+ import { useMemo } from "react";
10
11
  export const useTagsInputTranslations = translations => {
11
12
  const {
12
13
  t
13
14
  } = useTranslation("translation", {
14
15
  keyPrefix: "component.tagsInput"
15
16
  });
16
- return {
17
+ return useMemo(() => ({
17
18
  clearTriggerLabel: t("clearTriggerLabel"),
18
19
  deleteTagTriggerLabel: tag => t("deleteTagTriggerLabel", {
19
20
  tag
@@ -37,7 +38,7 @@ export const useTagsInputTranslations = translations => {
37
38
  tag
38
39
  }),
39
40
  ...translations
40
- };
41
+ }), [t, translations]);
41
42
  };
42
43
  export const useComboboxTranslations = translations => {
43
44
  const {
@@ -45,20 +46,20 @@ export const useComboboxTranslations = translations => {
45
46
  } = useTranslation("translation", {
46
47
  keyPrefix: "component.combobox"
47
48
  });
48
- return {
49
+ return useMemo(() => ({
49
50
  triggerLabel: t("triggerLabel"),
50
51
  clearTriggerLabel: t("clearTriggerLabel"),
51
52
  ...translations
52
- };
53
+ }), [t, translations]);
53
54
  };
54
55
  export const useTagSelectorTranslations = translations => {
55
56
  const tagsInputTranslations = useTagsInputTranslations();
56
57
  const comboboxTranslations = useComboboxTranslations();
57
- return {
58
+ return useMemo(() => ({
58
59
  ...comboboxTranslations,
59
60
  ...tagsInputTranslations,
60
61
  ...translations
61
- };
62
+ }), [comboboxTranslations, tagsInputTranslations, translations]);
62
63
  };
63
64
  export const usePaginationTranslations = translations => {
64
65
  const {
@@ -66,7 +67,7 @@ export const usePaginationTranslations = translations => {
66
67
  } = useTranslation("translation", {
67
68
  keyPrefix: "component.pagination"
68
69
  });
69
- return {
70
+ return useMemo(() => ({
70
71
  rootLabel: t("rootLabel"),
71
72
  prevTriggerLabel: t("prevTriggerLabel"),
72
73
  nextTriggerLabel: t("nextTriggerLabel"),
@@ -79,7 +80,7 @@ export const usePaginationTranslations = translations => {
79
80
  });
80
81
  },
81
82
  ...translations
82
- };
83
+ }), [translations, t]);
83
84
  };
84
85
 
85
86
  // TODO: Deduplicate this and place it somewhere smart. Maybe core?
@@ -97,7 +98,7 @@ export const useImageSearchTranslations = function () {
97
98
  paginationTranslations: fallbackPaginationTranslations,
98
99
  ...remaining
99
100
  } = translations;
100
- return {
101
+ return useMemo(() => ({
101
102
  searchPlaceholder: t("searchPlaceholder"),
102
103
  searchButtonTitle: t("searchButtonTitle"),
103
104
  imagePreview: {
@@ -117,7 +118,7 @@ export const useImageSearchTranslations = function () {
117
118
  ...fallbackPaginationTranslations
118
119
  },
119
120
  ...remaining
120
- };
121
+ }), [t, paginationTranslations, imagePreview, fallbackPaginationTranslations, remaining]);
121
122
  };
122
123
  export const useAudioSearchTranslations = function () {
123
124
  let translations = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -131,7 +132,7 @@ export const useAudioSearchTranslations = function () {
131
132
  paginationTranslations: fallbackPaginationTranslations,
132
133
  ...remaining
133
134
  } = translations;
134
- return {
135
+ return useMemo(() => ({
135
136
  searchPlaceholder: t("searchPlaceholder"),
136
137
  searchButtonTitle: t("searchButtonTitle"),
137
138
  useAudio: t("useAudio"),
@@ -141,7 +142,7 @@ export const useAudioSearchTranslations = function () {
141
142
  ...fallbackPaginationTranslations
142
143
  },
143
144
  ...remaining
144
- };
145
+ }), [t, paginationTranslations, fallbackPaginationTranslations, remaining]);
145
146
  };
146
147
  export const useVideoSearchTranslations = translations => {
147
148
  const {
@@ -149,7 +150,7 @@ export const useVideoSearchTranslations = translations => {
149
150
  } = useTranslation("translation", {
150
151
  keyPrefix: "component.videoSearch"
151
152
  });
152
- return {
153
+ return useMemo(() => ({
153
154
  searchPlaceholder: t("searchPlaceholder"),
154
155
  searchButtonTitle: t("searchButtonTitle"),
155
156
  loadMoreVideos: t("loadMoreVideos"),
@@ -159,5 +160,5 @@ export const useVideoSearchTranslations = translations => {
159
160
  addVideo: t("addVideo"),
160
161
  close: t("close"),
161
162
  ...translations
162
- };
163
+ }), [t, translations]);
163
164
  };
package/lib/i18n/useComponentTranslations.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.useVideoSearchTranslations = exports.useTagsInputTranslations = exports.useTagSelectorTranslations = exports.usePaginationTranslations = exports.useImageSearchTranslations = exports.useComboboxTranslations = exports.useAudioSearchTranslations = void 0;
7
7
  var _reactI18next = require("react-i18next");
8
+ var _react = require("react");
8
9
  /**
9
10
  * Copyright (c) 2024-present, NDLA.
10
11
  *
@@ -19,7 +20,7 @@ const useTagsInputTranslations = translations => {
19
20
  } = (0, _reactI18next.useTranslation)("translation", {
20
21
  keyPrefix: "component.tagsInput"
21
22
  });
22
- return {
23
+ return (0, _react.useMemo)(() => ({
23
24
  clearTriggerLabel: t("clearTriggerLabel"),
24
25
  deleteTagTriggerLabel: tag => t("deleteTagTriggerLabel", {
25
26
  tag
@@ -43,7 +44,7 @@ const useTagsInputTranslations = translations => {
43
44
  tag
44
45
  }),
45
46
  ...translations
46
- };
47
+ }), [t, translations]);
47
48
  };
48
49
  exports.useTagsInputTranslations = useTagsInputTranslations;
49
50
  const useComboboxTranslations = translations => {
@@ -52,21 +53,21 @@ const useComboboxTranslations = translations => {
52
53
  } = (0, _reactI18next.useTranslation)("translation", {
53
54
  keyPrefix: "component.combobox"
54
55
  });
55
- return {
56
+ return (0, _react.useMemo)(() => ({
56
57
  triggerLabel: t("triggerLabel"),
57
58
  clearTriggerLabel: t("clearTriggerLabel"),
58
59
  ...translations
59
- };
60
+ }), [t, translations]);
60
61
  };
61
62
  exports.useComboboxTranslations = useComboboxTranslations;
62
63
  const useTagSelectorTranslations = translations => {
63
64
  const tagsInputTranslations = useTagsInputTranslations();
64
65
  const comboboxTranslations = useComboboxTranslations();
65
- return {
66
+ return (0, _react.useMemo)(() => ({
66
67
  ...comboboxTranslations,
67
68
  ...tagsInputTranslations,
68
69
  ...translations
69
- };
70
+ }), [comboboxTranslations, tagsInputTranslations, translations]);
70
71
  };
71
72
  exports.useTagSelectorTranslations = useTagSelectorTranslations;
72
73
  const usePaginationTranslations = translations => {
@@ -75,7 +76,7 @@ const usePaginationTranslations = translations => {
75
76
  } = (0, _reactI18next.useTranslation)("translation", {
76
77
  keyPrefix: "component.pagination"
77
78
  });
78
- return {
79
+ return (0, _react.useMemo)(() => ({
79
80
  rootLabel: t("rootLabel"),
80
81
  prevTriggerLabel: t("prevTriggerLabel"),
81
82
  nextTriggerLabel: t("nextTriggerLabel"),
@@ -88,7 +89,7 @@ const usePaginationTranslations = translations => {
88
89
  });
89
90
  },
90
91
  ...translations
91
- };
92
+ }), [translations, t]);
92
93
  };
93
94
 
94
95
  // TODO: Deduplicate this and place it somewhere smart. Maybe core?
@@ -106,7 +107,7 @@ const useImageSearchTranslations = function () {
106
107
  paginationTranslations: fallbackPaginationTranslations,
107
108
  ...remaining
108
109
  } = translations;
109
- return {
110
+ return (0, _react.useMemo)(() => ({
110
111
  searchPlaceholder: t("searchPlaceholder"),
111
112
  searchButtonTitle: t("searchButtonTitle"),
112
113
  imagePreview: {
@@ -126,7 +127,7 @@ const useImageSearchTranslations = function () {
126
127
  ...fallbackPaginationTranslations
127
128
  },
128
129
  ...remaining
129
- };
130
+ }), [t, paginationTranslations, imagePreview, fallbackPaginationTranslations, remaining]);
130
131
  };
131
132
  exports.useImageSearchTranslations = useImageSearchTranslations;
132
133
  const useAudioSearchTranslations = function () {
@@ -141,7 +142,7 @@ const useAudioSearchTranslations = function () {
141
142
  paginationTranslations: fallbackPaginationTranslations,
142
143
  ...remaining
143
144
  } = translations;
144
- return {
145
+ return (0, _react.useMemo)(() => ({
145
146
  searchPlaceholder: t("searchPlaceholder"),
146
147
  searchButtonTitle: t("searchButtonTitle"),
147
148
  useAudio: t("useAudio"),
@@ -151,7 +152,7 @@ const useAudioSearchTranslations = function () {
151
152
  ...fallbackPaginationTranslations
152
153
  },
153
154
  ...remaining
154
- };
155
+ }), [t, paginationTranslations, fallbackPaginationTranslations, remaining]);
155
156
  };
156
157
  exports.useAudioSearchTranslations = useAudioSearchTranslations;
157
158
  const useVideoSearchTranslations = translations => {
@@ -160,7 +161,7 @@ const useVideoSearchTranslations = translations => {
160
161
  } = (0, _reactI18next.useTranslation)("translation", {
161
162
  keyPrefix: "component.videoSearch"
162
163
  });
163
- return {
164
+ return (0, _react.useMemo)(() => ({
164
165
  searchPlaceholder: t("searchPlaceholder"),
165
166
  searchButtonTitle: t("searchButtonTitle"),
166
167
  loadMoreVideos: t("loadMoreVideos"),
@@ -170,6 +171,6 @@ const useVideoSearchTranslations = translations => {
170
171
  addVideo: t("addVideo"),
171
172
  close: t("close"),
172
173
  ...translations
173
- };
174
+ }), [t, translations]);
174
175
  };
175
176
  exports.useVideoSearchTranslations = useVideoSearchTranslations;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndla/ui",
3
- "version": "56.0.103-alpha.0",
3
+ "version": "56.0.105-alpha.0",
4
4
  "description": "UI component library for NDLA",
5
5
  "license": "GPL-3.0",
6
6
  "main": "lib/index.js",
@@ -35,8 +35,8 @@
35
35
  "@ndla/core": "^5.0.3",
36
36
  "@ndla/icons": "^8.0.52-alpha.0",
37
37
  "@ndla/licenses": "^9.0.0",
38
- "@ndla/primitives": "^1.0.78-alpha.0",
39
- "@ndla/safelink": "^7.0.79-alpha.0",
38
+ "@ndla/primitives": "^1.0.80-alpha.0",
39
+ "@ndla/safelink": "^7.0.81-alpha.0",
40
40
  "@ndla/styled-system": "^0.0.32",
41
41
  "@ndla/util": "^5.0.5-alpha.0",
42
42
  "html-react-parser": "^5.1.19",
@@ -58,5 +58,5 @@
58
58
  "publishConfig": {
59
59
  "access": "public"
60
60
  },
61
- "gitHead": "d841c85ea6bbf6152736ec9bf7231d150b05c076"
61
+ "gitHead": "53e4047f2320059d2af1315479140bd0e49c220f"
62
62
  }
package/src/i18n/useComponentTranslations.ts CHANGED
@@ -10,6 +10,7 @@ import { useTranslation } from "react-i18next";
10
10
  import type { CollectionItem } from "@ark-ui/react";
11
11
  import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps } from "@ndla/primitives";
12
12
  import { type TagSelectorRootProps } from "../TagSelector/TagSelector";
13
+ import { useMemo } from "react";
13
14
 
14
15
  type DeepPartial<T> = {
15
16
  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
@@ -20,17 +21,20 @@ export const useTagsInputTranslations = (
20
21
  ): TagsInputRootProps["translations"] => {
21
22
  const { t } = useTranslation("translation", { keyPrefix: "component.tagsInput" });
22
23
 
23
- return {
24
- clearTriggerLabel: t("clearTriggerLabel"),
25
- deleteTagTriggerLabel: (tag) => t("deleteTagTriggerLabel", { tag }),
26
- tagAdded: (tag) => t("tagAdded", { tag }),
27
- tagsPasted: (tag) => t("tagsPasted", { length: tag.length }),
28
- tagEdited: (tag) => t("tagEdited", { tag }),
29
- tagUpdated: (tag) => t("tagUpdated", { tag }),
30
- tagDeleted: (tag) => t("tagDeleted", { tag }),
31
- tagSelected: (tag) => t("tagSelected", { tag }),
32
- ...translations,
33
- };
24
+ return useMemo(
25
+ () => ({
26
+ clearTriggerLabel: t("clearTriggerLabel"),
27
+ deleteTagTriggerLabel: (tag) => t("deleteTagTriggerLabel", { tag }),
28
+ tagAdded: (tag) => t("tagAdded", { tag }),
29
+ tagsPasted: (tag) => t("tagsPasted", { length: tag.length }),
30
+ tagEdited: (tag) => t("tagEdited", { tag }),
31
+ tagUpdated: (tag) => t("tagUpdated", { tag }),
32
+ tagDeleted: (tag) => t("tagDeleted", { tag }),
33
+ tagSelected: (tag) => t("tagSelected", { tag }),
34
+ ...translations,
35
+ }),
36
+ [t, translations],
37
+ );
34
38
  };
35
39
 
36
40
  export const useComboboxTranslations = <T extends CollectionItem>(
@@ -38,11 +42,14 @@ export const useComboboxTranslations = <T extends CollectionItem>(
38
42
  ): ComboboxRootProps<T>["translations"] => {
39
43
  const { t } = useTranslation("translation", { keyPrefix: "component.combobox" });
40
44
 
41
- return {
42
- triggerLabel: t("triggerLabel"),
43
- clearTriggerLabel: t("clearTriggerLabel"),
44
- ...translations,
45
- };
45
+ return useMemo(
46
+ () => ({
47
+ triggerLabel: t("triggerLabel"),
48
+ clearTriggerLabel: t("clearTriggerLabel"),
49
+ ...translations,
50
+ }),
51
+ [t, translations],
52
+ );
46
53
  };
47
54
 
48
55
  export const useTagSelectorTranslations = <T extends CollectionItem>(
@@ -51,11 +58,15 @@ export const useTagSelectorTranslations = <T extends CollectionItem>(
51
58
  const tagsInputTranslations = useTagsInputTranslations();
52
59
  const comboboxTranslations = useComboboxTranslations();
53
60
 
54
- return {
55
- ...comboboxTranslations,
56
- ...tagsInputTranslations,
57
- ...translations,
58
- } as TagSelectorRootProps<T>["translations"];
61
+ return useMemo(
62
+ () =>
63
+ ({
64
+ ...comboboxTranslations,
65
+ ...tagsInputTranslations,
66
+ ...translations,
67
+ }) as TagSelectorRootProps<T>["translations"],
68
+ [comboboxTranslations, tagsInputTranslations, translations],
69
+ );
59
70
  };
60
71
 
61
72
  export const usePaginationTranslations = (
@@ -63,16 +74,19 @@ export const usePaginationTranslations = (
63
74
  ): PaginationRootProps["translations"] => {
64
75
  const { t } = useTranslation("translation", { keyPrefix: "component.pagination" });
65
76
 
66
- return {
67
- rootLabel: t("rootLabel"),
68
- prevTriggerLabel: t("prevTriggerLabel"),
69
- nextTriggerLabel: t("nextTriggerLabel"),
70
- itemLabel: (details) => {
71
- const lastPage = details.totalPages > 1 && details.page === details.totalPages;
72
- return lastPage ? t("lastPage", { page: details.page }) : t("page", { page: details.page });
73
- },
74
- ...translations,
75
- };
77
+ return useMemo(
78
+ () => ({
79
+ rootLabel: t("rootLabel"),
80
+ prevTriggerLabel: t("prevTriggerLabel"),
81
+ nextTriggerLabel: t("nextTriggerLabel"),
82
+ itemLabel: (details) => {
83
+ const lastPage = details.totalPages > 1 && details.page === details.totalPages;
84
+ return lastPage ? t("lastPage", { page: details.page }) : t("page", { page: details.page });
85
+ },
86
+ ...translations,
87
+ }),
88
+ [translations, t],
89
+ );
76
90
  };
77
91
 
78
92
  // TODO: Deduplicate this and place it somewhere smart. Maybe core?
@@ -122,24 +136,27 @@ export const useImageSearchTranslations = (
122
136
 
123
137
  const { imagePreview, paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;
124
138
 
125
- return {
126
- searchPlaceholder: t("searchPlaceholder"),
127
- searchButtonTitle: t("searchButtonTitle"),
128
- imagePreview: {
129
- creatorsLabel: t("imagePreview.creatorsLabel"),
130
- license: t("imagePreview.license"),
131
- caption: t("imagePreview.caption"),
132
- altText: t("imagePreview.altText"),
133
- modelRelease: t("imagePreview.modelRelease"),
134
- tags: t("imagePreview.tags"),
135
- close: t("close"),
136
- checkboxLabel: t("imagePreview.checkboxLabel"),
137
- useImageTitle: t("imagePreview.useImageTitle"),
138
- ...imagePreview,
139
- },
140
- paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },
141
- ...remaining,
142
- };
139
+ return useMemo(
140
+ () => ({
141
+ searchPlaceholder: t("searchPlaceholder"),
142
+ searchButtonTitle: t("searchButtonTitle"),
143
+ imagePreview: {
144
+ creatorsLabel: t("imagePreview.creatorsLabel"),
145
+ license: t("imagePreview.license"),
146
+ caption: t("imagePreview.caption"),
147
+ altText: t("imagePreview.altText"),
148
+ modelRelease: t("imagePreview.modelRelease"),
149
+ tags: t("imagePreview.tags"),
150
+ close: t("close"),
151
+ checkboxLabel: t("imagePreview.checkboxLabel"),
152
+ useImageTitle: t("imagePreview.useImageTitle"),
153
+ ...imagePreview,
154
+ },
155
+ paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },
156
+ ...remaining,
157
+ }),
158
+ [t, paginationTranslations, imagePreview, fallbackPaginationTranslations, remaining],
159
+ );
143
160
  };
144
161
 
145
162
  export const useAudioSearchTranslations = (
@@ -150,28 +167,34 @@ export const useAudioSearchTranslations = (
150
167
 
151
168
  const { paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;
152
169
 
153
- return {
154
- searchPlaceholder: t("searchPlaceholder"),
155
- searchButtonTitle: t("searchButtonTitle"),
156
- useAudio: t("useAudio"),
157
- noResults: t("noResults"),
158
- paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },
159
- ...remaining,
160
- };
170
+ return useMemo(
171
+ () => ({
172
+ searchPlaceholder: t("searchPlaceholder"),
173
+ searchButtonTitle: t("searchButtonTitle"),
174
+ useAudio: t("useAudio"),
175
+ noResults: t("noResults"),
176
+ paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },
177
+ ...remaining,
178
+ }),
179
+ [t, paginationTranslations, fallbackPaginationTranslations, remaining],
180
+ );
161
181
  };
162
182
 
163
183
  export const useVideoSearchTranslations = (translations?: Partial<VideoTranslations>): VideoTranslations => {
164
184
  const { t } = useTranslation("translation", { keyPrefix: "component.videoSearch" });
165
185
 
166
- return {
167
- searchPlaceholder: t("searchPlaceholder"),
168
- searchButtonTitle: t("searchButtonTitle"),
169
- loadMoreVideos: t("loadMoreVideos"),
170
- noResults: t("noResults"),
171
- is360Video: t("is360Video"),
172
- previewVideo: t("previewVideo"),
173
- addVideo: t("addVideo"),
174
- close: t("close"),
175
- ...translations,
176
- };
186
+ return useMemo(
187
+ () => ({
188
+ searchPlaceholder: t("searchPlaceholder"),
189
+ searchButtonTitle: t("searchButtonTitle"),
190
+ loadMoreVideos: t("loadMoreVideos"),
191
+ noResults: t("noResults"),
192
+ is360Video: t("is360Video"),
193
+ previewVideo: t("previewVideo"),
194
+ addVideo: t("addVideo"),
195
+ close: t("close"),
196
+ ...translations,
197
+ }),
198
+ [t, translations],
199
+ );
177
200
  };