From ec75091771bcfccaed7e23a2adbc0911dc284896 Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Fri, 16 Aug 2024 09:09:56 +1000 Subject: [PATCH] Translations for TagGroup (#6890) * Translations for TagGroup * add number of tags * Revert " fix/bug useTablist #5996 (#6023)" This reverts commit c4a783e893eca8043a386283ff7074db46c5fefc. * Revert "Extract `ToggleStateProps` type to use only what is needed in `useToggleState` (#3836)" This reverts commit 81e380437c63adb98b0ce73e3eaa08918d06c8bc. --------- Co-authored-by: Daniel Lu --- .../selection/src/useSelectableCollection.ts | 44 +++++++------------ .../tabs/src/TabsKeyboardDelegate.ts | 23 +++------- packages/@react-spectrum/s2/intl/ar-AE.json | 5 ++- packages/@react-spectrum/s2/intl/bg-BG.json | 5 ++- packages/@react-spectrum/s2/intl/cs-CZ.json | 5 ++- packages/@react-spectrum/s2/intl/da-DK.json | 5 ++- packages/@react-spectrum/s2/intl/de-DE.json | 5 ++- packages/@react-spectrum/s2/intl/el-GR.json | 5 ++- packages/@react-spectrum/s2/intl/en-US.json | 3 ++ packages/@react-spectrum/s2/intl/es-ES.json | 5 ++- packages/@react-spectrum/s2/intl/et-EE.json | 5 ++- packages/@react-spectrum/s2/intl/fi-FI.json | 5 ++- packages/@react-spectrum/s2/intl/fr-FR.json | 5 ++- packages/@react-spectrum/s2/intl/he-IL.json | 5 ++- packages/@react-spectrum/s2/intl/hr-HR.json | 5 ++- packages/@react-spectrum/s2/intl/hu-HU.json | 5 ++- packages/@react-spectrum/s2/intl/it-IT.json | 5 ++- packages/@react-spectrum/s2/intl/ja-JP.json | 5 ++- packages/@react-spectrum/s2/intl/ko-KR.json | 5 ++- packages/@react-spectrum/s2/intl/lt-LT.json | 5 ++- packages/@react-spectrum/s2/intl/lv-LV.json | 5 ++- packages/@react-spectrum/s2/intl/nb-NO.json | 5 ++- packages/@react-spectrum/s2/intl/nl-NL.json | 5 ++- packages/@react-spectrum/s2/intl/pl-PL.json | 5 ++- packages/@react-spectrum/s2/intl/pt-BR.json | 5 ++- packages/@react-spectrum/s2/intl/pt-PT.json | 5 ++- packages/@react-spectrum/s2/intl/ro-RO.json | 5 ++- packages/@react-spectrum/s2/intl/ru-RU.json | 5 ++- packages/@react-spectrum/s2/intl/sk-SK.json | 5 ++- packages/@react-spectrum/s2/intl/sl-SI.json | 5 ++- packages/@react-spectrum/s2/intl/sr-SP.json | 5 ++- packages/@react-spectrum/s2/intl/sv-SE.json | 5 ++- packages/@react-spectrum/s2/intl/tr-TR.json | 5 ++- packages/@react-spectrum/s2/intl/uk-UA.json | 5 ++- packages/@react-spectrum/s2/intl/zh-CN.json | 5 ++- packages/@react-spectrum/s2/intl/zh-TW.json | 5 ++- packages/@react-spectrum/s2/src/TagGroup.tsx | 11 ++++- .../@react-spectrum/tabs/test/Tabs.test.js | 23 ++++------ .../toggle/src/useToggleState.ts | 4 +- packages/@react-types/checkbox/src/index.d.ts | 15 +++---- scripts/migrateIntl.mjs | 3 ++ 41 files changed, 186 insertions(+), 105 deletions(-) diff --git a/packages/@react-aria/selection/src/useSelectableCollection.ts b/packages/@react-aria/selection/src/useSelectableCollection.ts index 4bb27efd2e4..912ffc04099 100644 --- a/packages/@react-aria/selection/src/useSelectableCollection.ts +++ b/packages/@react-aria/selection/src/useSelectableCollection.ts @@ -164,57 +164,49 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions switch (e.key) { case 'ArrowDown': { if (delegate.getKeyBelow) { + e.preventDefault(); let nextKey = manager.focusedKey != null - ? delegate.getKeyBelow?.(manager.focusedKey) + ? delegate.getKeyBelow(manager.focusedKey) : delegate.getFirstKey?.(); if (nextKey == null && shouldFocusWrap) { nextKey = delegate.getFirstKey?.(manager.focusedKey); } - if (nextKey != null) { - e.preventDefault(); - navigateToKey(nextKey); - } + navigateToKey(nextKey); } break; } case 'ArrowUp': { if (delegate.getKeyAbove) { + e.preventDefault(); let nextKey = manager.focusedKey != null - ? delegate.getKeyAbove?.(manager.focusedKey) + ? delegate.getKeyAbove(manager.focusedKey) : delegate.getLastKey?.(); if (nextKey == null && shouldFocusWrap) { nextKey = delegate.getLastKey?.(manager.focusedKey); } - if (nextKey != null) { - e.preventDefault(); - navigateToKey(nextKey); - } + navigateToKey(nextKey); } break; } case 'ArrowLeft': { if (delegate.getKeyLeftOf) { - let nextKey = delegate.getKeyLeftOf?.(manager.focusedKey); + e.preventDefault(); + let nextKey = delegate.getKeyLeftOf(manager.focusedKey); if (nextKey == null && shouldFocusWrap) { nextKey = direction === 'rtl' ? delegate.getFirstKey?.(manager.focusedKey) : delegate.getLastKey?.(manager.focusedKey); } - if (nextKey != null) { - e.preventDefault(); - navigateToKey(nextKey, direction === 'rtl' ? 'first' : 'last'); - } + navigateToKey(nextKey, direction === 'rtl' ? 'first' : 'last'); } break; } case 'ArrowRight': { if (delegate.getKeyRightOf) { - let nextKey = delegate.getKeyRightOf?.(manager.focusedKey); + e.preventDefault(); + let nextKey = delegate.getKeyRightOf(manager.focusedKey); if (nextKey == null && shouldFocusWrap) { nextKey = direction === 'rtl' ? delegate.getLastKey?.(manager.focusedKey) : delegate.getFirstKey?.(manager.focusedKey); } - if (nextKey != null) { - e.preventDefault(); - navigateToKey(nextKey, direction === 'rtl' ? 'last' : 'first'); - } + navigateToKey(nextKey, direction === 'rtl' ? 'last' : 'first'); } break; } @@ -244,20 +236,16 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions break; case 'PageDown': if (delegate.getKeyPageBelow) { + e.preventDefault(); let nextKey = delegate.getKeyPageBelow(manager.focusedKey); - if (nextKey != null) { - e.preventDefault(); - navigateToKey(nextKey); - } + navigateToKey(nextKey); } break; case 'PageUp': if (delegate.getKeyPageAbove) { + e.preventDefault(); let nextKey = delegate.getKeyPageAbove(manager.focusedKey); - if (nextKey != null) { - e.preventDefault(); - navigateToKey(nextKey); - } + navigateToKey(nextKey); } break; case 'a': diff --git a/packages/@react-aria/tabs/src/TabsKeyboardDelegate.ts b/packages/@react-aria/tabs/src/TabsKeyboardDelegate.ts index 463bad748f5..6ce58947848 100644 --- a/packages/@react-aria/tabs/src/TabsKeyboardDelegate.ts +++ b/packages/@react-aria/tabs/src/TabsKeyboardDelegate.ts @@ -16,13 +16,11 @@ export class TabsKeyboardDelegate implements KeyboardDelegate { private collection: Collection>; private flipDirection: boolean; private disabledKeys: Set; - private tabDirection: boolean; constructor(collection: Collection>, direction: Direction, orientation: Orientation, disabledKeys: Set = new Set()) { this.collection = collection; this.flipDirection = direction === 'rtl' && orientation === 'horizontal'; this.disabledKeys = disabledKeys; - this.tabDirection = orientation === 'horizontal'; } getKeyLeftOf(key: Key) { @@ -39,6 +37,13 @@ export class TabsKeyboardDelegate implements KeyboardDelegate { return this.getNextKey(key); } + getKeyAbove(key: Key) { + return this.getPreviousKey(key); + } + + getKeyBelow(key: Key) { + return this.getNextKey(key); + } private isDisabled(key: Key) { return this.disabledKeys.has(key) || !!this.collection.getItem(key)?.props?.isDisabled; @@ -59,20 +64,6 @@ export class TabsKeyboardDelegate implements KeyboardDelegate { } return key; } - - getKeyAbove(key: Key) { - if (this.tabDirection) { - return null; - } - return this.getPreviousKey(key); - } - - getKeyBelow(key: Key) { - if (this.tabDirection) { - return null; - } - return this.getNextKey(key); - } getNextKey(key) { do { diff --git a/packages/@react-spectrum/s2/intl/ar-AE.json b/packages/@react-spectrum/s2/intl/ar-AE.json index 70ac99a5526..3cec174cd28 100644 --- a/packages/@react-spectrum/s2/intl/ar-AE.json +++ b/packages/@react-spectrum/s2/intl/ar-AE.json @@ -14,5 +14,8 @@ "picker.placeholder": "حدد خيارًا...", "slider.maximum": "أقصى", "slider.minimum": "أدنى", - "tag.noTags": "بدون" + "tag.actions": "الإجراءات", + "tag.hideButtonLabel": "إظهار أقل", + "tag.noTags": "بدون", + "tag.showAllButtonLabel": "عرض الكل ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/bg-BG.json b/packages/@react-spectrum/s2/intl/bg-BG.json index 421687c68d6..4f4a38e8b60 100644 --- a/packages/@react-spectrum/s2/intl/bg-BG.json +++ b/packages/@react-spectrum/s2/intl/bg-BG.json @@ -14,5 +14,8 @@ "picker.placeholder": "Изберете опция", "slider.maximum": "Максимум", "slider.minimum": "Минимум", - "tag.noTags": "Нито един" + "tag.actions": "Действия", + "tag.hideButtonLabel": "Показване на по-малко", + "tag.noTags": "Нито един", + "tag.showAllButtonLabel": "Показване на всички ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/cs-CZ.json b/packages/@react-spectrum/s2/intl/cs-CZ.json index 5291e51d26c..4b27c040160 100644 --- a/packages/@react-spectrum/s2/intl/cs-CZ.json +++ b/packages/@react-spectrum/s2/intl/cs-CZ.json @@ -14,5 +14,8 @@ "picker.placeholder": "Vyberte vhodnou možnost...", "slider.maximum": "Maximum", "slider.minimum": "Minimum", - "tag.noTags": "Žádný" + "tag.actions": "Akce", + "tag.hideButtonLabel": "Zobrazit méně", + "tag.noTags": "Žádný", + "tag.showAllButtonLabel": "Zobrazit vše ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/da-DK.json b/packages/@react-spectrum/s2/intl/da-DK.json index 2e8f01f1c69..75b6c04a7f7 100644 --- a/packages/@react-spectrum/s2/intl/da-DK.json +++ b/packages/@react-spectrum/s2/intl/da-DK.json @@ -14,5 +14,8 @@ "picker.placeholder": "Vælg en mulighed ...", "slider.maximum": "Maksimum", "slider.minimum": "Minimum", - "tag.noTags": "Ingen" + "tag.actions": "Handlinger", + "tag.hideButtonLabel": "Vis mindre", + "tag.noTags": "Ingen", + "tag.showAllButtonLabel": "Vis alle ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/de-DE.json b/packages/@react-spectrum/s2/intl/de-DE.json index 414fa5f7e2d..3341d224c19 100644 --- a/packages/@react-spectrum/s2/intl/de-DE.json +++ b/packages/@react-spectrum/s2/intl/de-DE.json @@ -14,5 +14,8 @@ "picker.placeholder": "Option auswählen...", "slider.maximum": "Maximum", "slider.minimum": "Minimum", - "tag.noTags": "Keine" + "tag.actions": "Aktionen", + "tag.hideButtonLabel": "Weniger zeigen", + "tag.noTags": "Keine", + "tag.showAllButtonLabel": "Alle anzeigen ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/el-GR.json b/packages/@react-spectrum/s2/intl/el-GR.json index f42c93085e4..e2228e21689 100644 --- a/packages/@react-spectrum/s2/intl/el-GR.json +++ b/packages/@react-spectrum/s2/intl/el-GR.json @@ -14,5 +14,8 @@ "picker.placeholder": "Επιλέξτε…", "slider.maximum": "Μέγιστο", "slider.minimum": "Ελάχιστο", - "tag.noTags": "Κανένα" + "tag.actions": "Ενέργειες", + "tag.hideButtonLabel": "Εμφάνιση λιγότερων", + "tag.noTags": "Κανένα", + "tag.showAllButtonLabel": "Εμφάνιση όλων ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/en-US.json b/packages/@react-spectrum/s2/intl/en-US.json index 02bf5f6a675..dfe95eeb4a1 100644 --- a/packages/@react-spectrum/s2/intl/en-US.json +++ b/packages/@react-spectrum/s2/intl/en-US.json @@ -14,5 +14,8 @@ "picker.placeholder": "Select…", "slider.minimum": "Minimum", "slider.maximum": "Maximum", + "tag.showAllButtonLabel": "Show all ({tagCount, number})", + "tag.hideButtonLabel": "Show less", + "tag.actions": "Actions", "tag.noTags": "None" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/es-ES.json b/packages/@react-spectrum/s2/intl/es-ES.json index 2bdb2d52c4c..a8f500adade 100644 --- a/packages/@react-spectrum/s2/intl/es-ES.json +++ b/packages/@react-spectrum/s2/intl/es-ES.json @@ -14,5 +14,8 @@ "picker.placeholder": "Seleccione una opción…", "slider.maximum": "Máximo", "slider.minimum": "Mínimo", - "tag.noTags": "Ninguno" + "tag.actions": "Acciones", + "tag.hideButtonLabel": "Mostrar menos", + "tag.noTags": "Ninguno", + "tag.showAllButtonLabel": "Mostrar todo ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/et-EE.json b/packages/@react-spectrum/s2/intl/et-EE.json index 5ebf618bc89..da18bfe4286 100644 --- a/packages/@react-spectrum/s2/intl/et-EE.json +++ b/packages/@react-spectrum/s2/intl/et-EE.json @@ -14,5 +14,8 @@ "picker.placeholder": "Valige valikuline...", "slider.maximum": "Maksimaalne", "slider.minimum": "Minimaalne", - "tag.noTags": "Puudub" + "tag.actions": "Toimingud", + "tag.hideButtonLabel": "Kuva vähem", + "tag.noTags": "Puudub", + "tag.showAllButtonLabel": "Kuva kõik ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/fi-FI.json b/packages/@react-spectrum/s2/intl/fi-FI.json index 7b620bef047..9de3af4b627 100644 --- a/packages/@react-spectrum/s2/intl/fi-FI.json +++ b/packages/@react-spectrum/s2/intl/fi-FI.json @@ -14,5 +14,8 @@ "picker.placeholder": "Valitse vaihtoehto...", "slider.maximum": "Maksimi", "slider.minimum": "Minimi", - "tag.noTags": "Ei mitään" + "tag.actions": "Toiminnot", + "tag.hideButtonLabel": "Näytä vähemmän", + "tag.noTags": "Ei mitään", + "tag.showAllButtonLabel": "Näytä kaikki ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/fr-FR.json b/packages/@react-spectrum/s2/intl/fr-FR.json index 1939a14e207..8f92a05a259 100644 --- a/packages/@react-spectrum/s2/intl/fr-FR.json +++ b/packages/@react-spectrum/s2/intl/fr-FR.json @@ -14,5 +14,8 @@ "picker.placeholder": "Sélectionnez une option...", "slider.maximum": "Maximum", "slider.minimum": "Minimum", - "tag.noTags": "Aucun" + "tag.actions": "Actions", + "tag.hideButtonLabel": "Afficher moins", + "tag.noTags": "Aucun", + "tag.showAllButtonLabel": "Tout afficher ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/he-IL.json b/packages/@react-spectrum/s2/intl/he-IL.json index 047b7561378..18fad82e754 100644 --- a/packages/@react-spectrum/s2/intl/he-IL.json +++ b/packages/@react-spectrum/s2/intl/he-IL.json @@ -14,5 +14,8 @@ "picker.placeholder": "בחר אפשרות...", "slider.maximum": "מקסימום", "slider.minimum": "מינימום", - "tag.noTags": "ללא" + "tag.actions": "פעולות", + "tag.hideButtonLabel": "הצג פחות", + "tag.noTags": "ללא", + "tag.showAllButtonLabel": "הצג הכל ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/hr-HR.json b/packages/@react-spectrum/s2/intl/hr-HR.json index f9a14198153..e7a52b2aecd 100644 --- a/packages/@react-spectrum/s2/intl/hr-HR.json +++ b/packages/@react-spectrum/s2/intl/hr-HR.json @@ -14,5 +14,8 @@ "picker.placeholder": "Odaberite opciju", "slider.maximum": "Najviše", "slider.minimum": "Najmanje", - "tag.noTags": "Nema" + "tag.actions": "Radnje", + "tag.hideButtonLabel": "Prikaži manje", + "tag.noTags": "Nema", + "tag.showAllButtonLabel": "Prikaži sve ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/hu-HU.json b/packages/@react-spectrum/s2/intl/hu-HU.json index 80a970a1716..a25fc093fd9 100644 --- a/packages/@react-spectrum/s2/intl/hu-HU.json +++ b/packages/@react-spectrum/s2/intl/hu-HU.json @@ -14,5 +14,8 @@ "picker.placeholder": "Válasszon egy opciót…", "slider.maximum": "Maximum", "slider.minimum": "Minimum", - "tag.noTags": "Egyik sem" + "tag.actions": "Műveletek", + "tag.hideButtonLabel": "Mutass kevesebbet", + "tag.noTags": "Egyik sem", + "tag.showAllButtonLabel": "Az összes megjelenítése ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/it-IT.json b/packages/@react-spectrum/s2/intl/it-IT.json index a01654478b7..09f2bd4e477 100644 --- a/packages/@react-spectrum/s2/intl/it-IT.json +++ b/packages/@react-spectrum/s2/intl/it-IT.json @@ -14,5 +14,8 @@ "picker.placeholder": "Seleziona un’opzione...", "slider.maximum": "Massimo", "slider.minimum": "Minimo", - "tag.noTags": "Nessuno" + "tag.actions": "Azioni", + "tag.hideButtonLabel": "Mostra meno", + "tag.noTags": "Nessuno", + "tag.showAllButtonLabel": "Mostra tutto ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/ja-JP.json b/packages/@react-spectrum/s2/intl/ja-JP.json index cc087bf0e5e..dd0c12e3507 100644 --- a/packages/@react-spectrum/s2/intl/ja-JP.json +++ b/packages/@react-spectrum/s2/intl/ja-JP.json @@ -14,5 +14,8 @@ "picker.placeholder": "オプションを選択...", "slider.maximum": "最大", "slider.minimum": "最小", - "tag.noTags": "なし" + "tag.actions": "アクション", + "tag.hideButtonLabel": "表示を減らす", + "tag.noTags": "なし", + "tag.showAllButtonLabel": "すべての ({tagCount, number}) を表示" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/ko-KR.json b/packages/@react-spectrum/s2/intl/ko-KR.json index 2b0b03092c3..aa53b7ad523 100644 --- a/packages/@react-spectrum/s2/intl/ko-KR.json +++ b/packages/@react-spectrum/s2/intl/ko-KR.json @@ -14,5 +14,8 @@ "picker.placeholder": "선택 사항 선택", "slider.maximum": "최대", "slider.minimum": "최소", - "tag.noTags": "없음" + "tag.actions": "액션", + "tag.hideButtonLabel": "간단히 표시", + "tag.noTags": "없음", + "tag.showAllButtonLabel": "모두 표시 ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/lt-LT.json b/packages/@react-spectrum/s2/intl/lt-LT.json index c6e12d1f918..161911a8dc5 100644 --- a/packages/@react-spectrum/s2/intl/lt-LT.json +++ b/packages/@react-spectrum/s2/intl/lt-LT.json @@ -14,5 +14,8 @@ "picker.placeholder": "Pasirinkite parinktį...", "slider.maximum": "Daugiausia", "slider.minimum": "Mažiausia", - "tag.noTags": "Nėra" + "tag.actions": "Veiksmai", + "tag.hideButtonLabel": "Rodyti mažiau", + "tag.noTags": "Nėra", + "tag.showAllButtonLabel": "Rodyti viską ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/lv-LV.json b/packages/@react-spectrum/s2/intl/lv-LV.json index 4a83bd8f2c3..cff522d2104 100644 --- a/packages/@react-spectrum/s2/intl/lv-LV.json +++ b/packages/@react-spectrum/s2/intl/lv-LV.json @@ -14,5 +14,8 @@ "picker.placeholder": "Atlasiet opciju...", "slider.maximum": "Maksimālā vērtība", "slider.minimum": "Minimālā vērtība", - "tag.noTags": "Nav" + "tag.actions": "Darbības", + "tag.hideButtonLabel": "Rādīt mazāk", + "tag.noTags": "Nav", + "tag.showAllButtonLabel": "Rādīt visu ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/nb-NO.json b/packages/@react-spectrum/s2/intl/nb-NO.json index 4f3c0af7220..d119fae4b60 100644 --- a/packages/@react-spectrum/s2/intl/nb-NO.json +++ b/packages/@react-spectrum/s2/intl/nb-NO.json @@ -14,5 +14,8 @@ "picker.placeholder": "Velg et alternativ...", "slider.maximum": "Maksimum", "slider.minimum": "Minimum", - "tag.noTags": "Ingen" + "tag.actions": "Handlinger", + "tag.hideButtonLabel": "Vis mindre", + "tag.noTags": "Ingen", + "tag.showAllButtonLabel": "Vis alle ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/nl-NL.json b/packages/@react-spectrum/s2/intl/nl-NL.json index 9026ac1a44c..a939246d939 100644 --- a/packages/@react-spectrum/s2/intl/nl-NL.json +++ b/packages/@react-spectrum/s2/intl/nl-NL.json @@ -14,5 +14,8 @@ "picker.placeholder": "Optie selecteren...", "slider.maximum": "Maximum", "slider.minimum": "Minimum", - "tag.noTags": "Geen" + "tag.actions": "Acties", + "tag.hideButtonLabel": "Minder weergeven", + "tag.noTags": "Geen", + "tag.showAllButtonLabel": "Alles tonen ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/pl-PL.json b/packages/@react-spectrum/s2/intl/pl-PL.json index 895dcfae02c..d3f5a76619b 100644 --- a/packages/@react-spectrum/s2/intl/pl-PL.json +++ b/packages/@react-spectrum/s2/intl/pl-PL.json @@ -14,5 +14,8 @@ "picker.placeholder": "Wybierz opcję...", "slider.maximum": "Maksimum", "slider.minimum": "Minimum", - "tag.noTags": "Brak" + "tag.actions": "Działania", + "tag.hideButtonLabel": "Wyświetl mniej", + "tag.noTags": "Brak", + "tag.showAllButtonLabel": "Pokaż wszystko ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/pt-BR.json b/packages/@react-spectrum/s2/intl/pt-BR.json index 5eb4933a743..5ce61a8d2f9 100644 --- a/packages/@react-spectrum/s2/intl/pt-BR.json +++ b/packages/@react-spectrum/s2/intl/pt-BR.json @@ -14,5 +14,8 @@ "picker.placeholder": "Selecione uma opção...", "slider.maximum": "Máximo", "slider.minimum": "Mínimo", - "tag.noTags": "Nenhum" + "tag.actions": "Ações", + "tag.hideButtonLabel": "Mostrar menos", + "tag.noTags": "Nenhum", + "tag.showAllButtonLabel": "Mostrar tudo ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/pt-PT.json b/packages/@react-spectrum/s2/intl/pt-PT.json index edcb14add51..91a7bf758dd 100644 --- a/packages/@react-spectrum/s2/intl/pt-PT.json +++ b/packages/@react-spectrum/s2/intl/pt-PT.json @@ -14,5 +14,8 @@ "picker.placeholder": "Selecionar uma opção...", "slider.maximum": "Máximo", "slider.minimum": "Mínimo", - "tag.noTags": "Nenhum" + "tag.actions": "Ações", + "tag.hideButtonLabel": "Mostrar menos", + "tag.noTags": "Nenhum", + "tag.showAllButtonLabel": "Mostrar tudo ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/ro-RO.json b/packages/@react-spectrum/s2/intl/ro-RO.json index 61c28beaa47..c686f693d3a 100644 --- a/packages/@react-spectrum/s2/intl/ro-RO.json +++ b/packages/@react-spectrum/s2/intl/ro-RO.json @@ -14,5 +14,8 @@ "picker.placeholder": "Selectați o opțiune", "slider.maximum": "Maximum", "slider.minimum": "Minimum", - "tag.noTags": "Niciuna" + "tag.actions": "Acțiuni", + "tag.hideButtonLabel": "Se afișează mai puțin", + "tag.noTags": "Niciuna", + "tag.showAllButtonLabel": "Se afișează tot ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/ru-RU.json b/packages/@react-spectrum/s2/intl/ru-RU.json index 97bf628d7a9..2a4a73f9841 100644 --- a/packages/@react-spectrum/s2/intl/ru-RU.json +++ b/packages/@react-spectrum/s2/intl/ru-RU.json @@ -14,5 +14,8 @@ "picker.placeholder": "Выбрать параметр...", "slider.maximum": "Максимум", "slider.minimum": "Минимум", - "tag.noTags": "Нет" + "tag.actions": "Действия", + "tag.hideButtonLabel": "Показать меньше", + "tag.noTags": "Нет", + "tag.showAllButtonLabel": "Показать все ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/sk-SK.json b/packages/@react-spectrum/s2/intl/sk-SK.json index eb877545033..ea3a205ca17 100644 --- a/packages/@react-spectrum/s2/intl/sk-SK.json +++ b/packages/@react-spectrum/s2/intl/sk-SK.json @@ -14,5 +14,8 @@ "picker.placeholder": "Vyberte možnosť...", "slider.maximum": "Maximum", "slider.minimum": "Minimum", - "tag.noTags": "Žiadne" + "tag.actions": "Akcie", + "tag.hideButtonLabel": "Zobraziť menej", + "tag.noTags": "Žiadne", + "tag.showAllButtonLabel": "Zobraziť všetko ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/sl-SI.json b/packages/@react-spectrum/s2/intl/sl-SI.json index c9e6129d215..b0bf48b2710 100644 --- a/packages/@react-spectrum/s2/intl/sl-SI.json +++ b/packages/@react-spectrum/s2/intl/sl-SI.json @@ -14,5 +14,8 @@ "picker.placeholder": "Izberite možnost", "slider.maximum": "Največji", "slider.minimum": "Najmanj", - "tag.noTags": "Nič" + "tag.actions": "Dejanja", + "tag.hideButtonLabel": "Prikaži manj", + "tag.noTags": "Nič", + "tag.showAllButtonLabel": "Prikaž vse ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/sr-SP.json b/packages/@react-spectrum/s2/intl/sr-SP.json index 5ed7b1d752d..e8415d64da8 100644 --- a/packages/@react-spectrum/s2/intl/sr-SP.json +++ b/packages/@react-spectrum/s2/intl/sr-SP.json @@ -14,5 +14,8 @@ "picker.placeholder": "Izaberite opciju", "slider.maximum": "Najviše", "slider.minimum": "Najmanje", - "tag.noTags": "Ne postoji" + "tag.actions": "Radnje", + "tag.hideButtonLabel": "Prikaži manje", + "tag.noTags": "Ne postoji", + "tag.showAllButtonLabel": "Prikaži sve ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/sv-SE.json b/packages/@react-spectrum/s2/intl/sv-SE.json index 551a1c55bb2..f519e51a167 100644 --- a/packages/@react-spectrum/s2/intl/sv-SE.json +++ b/packages/@react-spectrum/s2/intl/sv-SE.json @@ -14,5 +14,8 @@ "picker.placeholder": "Välj ett alternativ...", "slider.maximum": "Maximum", "slider.minimum": "Minimum", - "tag.noTags": "Ingen" + "tag.actions": "Åtgärder", + "tag.hideButtonLabel": "Visa mindre", + "tag.noTags": "Ingen", + "tag.showAllButtonLabel": "Visa alla ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/tr-TR.json b/packages/@react-spectrum/s2/intl/tr-TR.json index eb0594936e5..44c58b7e27e 100644 --- a/packages/@react-spectrum/s2/intl/tr-TR.json +++ b/packages/@react-spectrum/s2/intl/tr-TR.json @@ -14,5 +14,8 @@ "picker.placeholder": "Bir seçim yapın…", "slider.maximum": "Maksimum", "slider.minimum": "Minimum", - "tag.noTags": "Hiçbiri" + "tag.actions": "Eylemler", + "tag.hideButtonLabel": "Daha az göster", + "tag.noTags": "Hiçbiri", + "tag.showAllButtonLabel": "Tümünü göster ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/uk-UA.json b/packages/@react-spectrum/s2/intl/uk-UA.json index 0f93309d26e..66164bfe48e 100644 --- a/packages/@react-spectrum/s2/intl/uk-UA.json +++ b/packages/@react-spectrum/s2/intl/uk-UA.json @@ -14,5 +14,8 @@ "picker.placeholder": "Виберіть опцію...", "slider.maximum": "Максимум", "slider.minimum": "Мінімум", - "tag.noTags": "Немає" + "tag.actions": "Дії", + "tag.hideButtonLabel": "Показувати менше", + "tag.noTags": "Немає", + "tag.showAllButtonLabel": "Показати всі ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/zh-CN.json b/packages/@react-spectrum/s2/intl/zh-CN.json index db2cf5c14ca..c48795c6d74 100644 --- a/packages/@react-spectrum/s2/intl/zh-CN.json +++ b/packages/@react-spectrum/s2/intl/zh-CN.json @@ -14,5 +14,8 @@ "picker.placeholder": "选择一个选项...", "slider.maximum": "最大", "slider.minimum": "最小", - "tag.noTags": "无" + "tag.actions": "操作", + "tag.hideButtonLabel": "显示更少", + "tag.noTags": "无", + "tag.showAllButtonLabel": "全部显示 ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/intl/zh-TW.json b/packages/@react-spectrum/s2/intl/zh-TW.json index 6ceaf04e3ab..f2494e26ba3 100644 --- a/packages/@react-spectrum/s2/intl/zh-TW.json +++ b/packages/@react-spectrum/s2/intl/zh-TW.json @@ -14,5 +14,8 @@ "picker.placeholder": "選取一個選項", "slider.maximum": "最大值", "slider.minimum": "最小值", - "tag.noTags": "無" + "tag.actions": "動作", + "tag.hideButtonLabel": "顯示較少", + "tag.noTags": "無", + "tag.showAllButtonLabel": "顯示全部 ({tagCount, number})" } \ No newline at end of file diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx index f41c311bf80..5bd09b0a2fc 100644 --- a/packages/@react-spectrum/s2/src/TagGroup.tsx +++ b/packages/@react-spectrum/s2/src/TagGroup.tsx @@ -364,6 +364,7 @@ function TagGroupInner({ {!isEmpty && (showCollapseToggleButton || groupActionLabel) && ({ } function ActionGroup(props) { + let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2'); let { actionsRef, tagState, @@ -391,6 +393,7 @@ function ActionGroup(props) { handlePressCollapse, onGroupAction, groupActionLabel, + collection, // directly use aria-labelling from the TagGroup because we can't use the id from the TagList // and we can't supply an id to the TagList because it'll cause an issue where all the tag ids flip back // and forth with their prefix in an infinite loop @@ -399,12 +402,14 @@ function ActionGroup(props) { } = props; let actionsId = useId(); + // might need to localize the aria-label which concatenates with this label + let actionGroupLabel = stringFormatter.format('tag.actions'); return (
- {isCollapsed ? 'Show all' : 'Collapse'} + {isCollapsed ? + stringFormatter.format('tag.showAllButtonLabel', {tagCount: collection.size}) : + stringFormatter.format('tag.hideButtonLabel')} } {groupActionLabel && onGroupAction && diff --git a/packages/@react-spectrum/tabs/test/Tabs.test.js b/packages/@react-spectrum/tabs/test/Tabs.test.js index 7a411b22046..e402a0995ad 100644 --- a/packages/@react-spectrum/tabs/test/Tabs.test.js +++ b/packages/@react-spectrum/tabs/test/Tabs.test.js @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {act, createEvent, fireEvent, mockImplementation, pointerMap, render, waitFor, within} from '@react-spectrum/test-utils-internal'; +import {act, fireEvent, mockImplementation, pointerMap, render, waitFor, within} from '@react-spectrum/test-utils-internal'; import {Item, TabList, TabPanels, Tabs} from '../src'; import {Links as LinksExample} from '../stories/Tabs.stories'; import {Provider} from '@react-spectrum/provider'; @@ -113,25 +113,18 @@ describe('Tabs', function () { expect(selectedItem).toHaveAttribute('aria-selected', 'true'); act(() => {selectedItem.focus();}); - let arrowRight = createEvent.keyDown(selectedItem, {key: 'ArrowRight', code: 39, charCode: 39}); - fireEvent(selectedItem, arrowRight); + fireEvent.keyDown(selectedItem, {key: 'ArrowRight', code: 39, charCode: 39}); let nextSelectedItem = tabs[1]; expect(nextSelectedItem).toHaveAttribute('aria-selected', 'true'); - expect(arrowRight.defaultPrevented).toBe(true); - let arrowLeft = createEvent.keyDown(nextSelectedItem, {key: 'ArrowLeft', code: 37, charCode: 37}); - fireEvent(nextSelectedItem, arrowLeft); + fireEvent.keyDown(nextSelectedItem, {key: 'ArrowLeft', code: 37, charCode: 37}); expect(selectedItem).toHaveAttribute('aria-selected', 'true'); - expect(arrowLeft.defaultPrevented).toBe(true); - /** prevent changing tabs for horizontal orientations in aria-selected */ - let arrowUp = createEvent.keyDown(selectedItem, {key: 'ArrowUp', code: 38, charCode: 38}); - fireEvent(selectedItem, arrowUp); - expect(selectedItem).toHaveAttribute('aria-selected', 'true'); - expect(arrowUp.defaultPrevented).toBe(false); - let arrowDown = createEvent.keyDown(selectedItem, {key: 'ArrowDown', code: 40, charCode: 40}); - fireEvent(selectedItem, arrowDown); + /** Changes selection regardless if it's horizontal tabs. */ + fireEvent.keyDown(selectedItem, {key: 'ArrowUp', code: 38, charCode: 38}); + nextSelectedItem = tabs[2]; + expect(nextSelectedItem).toHaveAttribute('aria-selected', 'true'); + fireEvent.keyDown(selectedItem, {key: 'ArrowDown', code: 40, charCode: 40}); expect(selectedItem).toHaveAttribute('aria-selected', 'true'); - expect(arrowDown.defaultPrevented).toBe(false); }); it('allows user to change tab item select via arrow keys with vertical tabs', function () { diff --git a/packages/@react-stately/toggle/src/useToggleState.ts b/packages/@react-stately/toggle/src/useToggleState.ts index c3a6ca0a06a..38fd3b71a3e 100644 --- a/packages/@react-stately/toggle/src/useToggleState.ts +++ b/packages/@react-stately/toggle/src/useToggleState.ts @@ -10,10 +10,10 @@ * governing permissions and limitations under the License. */ -import {ToggleStateOptions} from '@react-types/checkbox'; +import {ToggleProps} from '@react-types/checkbox'; import {useControlledState} from '@react-stately/utils'; -export type {ToggleStateOptions}; +export interface ToggleStateOptions extends Omit {} export interface ToggleState { /** Whether the toggle is selected. */ diff --git a/packages/@react-types/checkbox/src/index.d.ts b/packages/@react-types/checkbox/src/index.d.ts index ef61aaf24cb..656e867df1d 100644 --- a/packages/@react-types/checkbox/src/index.d.ts +++ b/packages/@react-types/checkbox/src/index.d.ts @@ -30,7 +30,11 @@ import { } from '@react-types/shared'; import {ReactElement, ReactNode} from 'react'; -export interface ToggleStateOptions extends InputBase { +export interface ToggleProps extends InputBase, Validation, FocusableProps { + /** + * The label for the element. + */ + children?: ReactNode, /** * Whether the element should be selected (uncontrolled). */ @@ -42,14 +46,7 @@ export interface ToggleStateOptions extends InputBase { /** * Handler that is called when the element's selection state changes. */ - onChange?: (isSelected: boolean) => void -} - -export interface ToggleProps extends ToggleStateOptions, Validation, FocusableProps { - /** - * The label for the element. - */ - children?: ReactNode, + onChange?: (isSelected: boolean) => void, /** * The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). */ diff --git a/scripts/migrateIntl.mjs b/scripts/migrateIntl.mjs index c1994e966c4..6ac2fd7121c 100644 --- a/scripts/migrateIntl.mjs +++ b/scripts/migrateIntl.mjs @@ -26,6 +26,9 @@ let stringsToAllow = new Set([ 'picker.placeholder', 'slider.minimum', 'slider.maximum', + 'tag.actions', + 'tag.showAllButtonLabel', + 'tag.hideButtonLabel', 'tag.noTags' ]);