# Effectuez la mise à niveau du SDK d'extension de l'interface utilisateur de Stripe Effectuez la mise à niveau de votre application vers la dernière version de @stripe/ui-extension-sdk. Cette page fournit un guide complet pour vous aider à gérer les dernières modifications introduites dans chaque version majeure de [@stripe/ui-extension-sdk](https://www.npmjs.com/package/@stripe/ui-extension-sdk) et souligne les changements nécessaires pour mettre à niveau votre application. Nous recommandons de mettre à niveau le plugin CLI des applications Stripe en exécutant `stripe plugin upgrade apps` avant de mettre à jour la version @stripe/ui-extension-sdk. Cela permet de garantir une compatibilité optimale, d’intégrer les dernières fonctionnalités et d’apporter des correctifs de sécurité. ## Nouveautés de la v9 La version 9 de `@stripe/ui-extension-sdk` introduit la validation des propriétés pour tous ses composants. Cette version est plus sûre, atténue les bogues et encourage l’adhésion aux bonnes pratiques de codage. Après l’avoir installée, faites attention aux erreurs TypeScript provenant de valeurs de propriétés non valides, car elles peuvent générer des [erreurs de validation](https://docs.stripe.com/stripe-apps/component-prop-validation.md) entraînant le crash de l’application. ### Modifications des composants Nous avons effectué des mises à jour visuelles de plusieurs composants. Après avoir installé la dernière version, examinez votre application pour vérifier que les composants s’affichent comme il se doit. | Composant | Derniers changements | | --- | --- | | Bouton | - La propriété`className` a été supprimée | | DateField | - La propriété `onChange` reçoit désormais directement la valeur au lieu de l’événement de changement. | | FormFieldGroup | - Les éléments `row` et `column` ont été remplacés par `horizontal` et `vertical` pour la propriété `layout` - La propriété `invalid` a été supprimée | | Link | - La propriété`className` a été supprimée | | Onglet | - La propriété `tabKey` a été remplacée par `id` | | TabPanel | - La propriété `tabKey` a été remplacée par `id` | | TextArea | - La propriété`onKeyPress` a été supprimée | | TextField | - La signature de rappel `onChange` a changé | ### Modifications du chemin d’importation Les composants `DataTable`, `DetailPage` et `PageModule` sont stables. Importez-les depuis `@stripe/ui-extension-sdk/ui` au lieu de `@stripe/ui-extension-sdk/ui/experimental`. Leurs propriétés et leur comportement restent identiques, il vous suffit donc de mettre à jour l’importation. ```js // Before import {DataTable, DetailPage, PageModule} from '@stripe/ui-extension-sdk/ui/experimental'; // After import {DataTable, DetailPage, PageModule} from '@stripe/ui-extension-sdk/ui'; ``` ## Journal des modifications ### 9.3.0 - Ajoutez les hooks `useAllSearchParams`/`useSearchParam` à `@stripe/ui-extension-sdk/navigation` pour [lire et écrire les paramètres de recherche](https://docs.stripe.com/stripe-apps/routing.md#read-and-write-search-parameters). ### 9.2.0 - Ajoutez le composant `FullPageView` pour mettre en œuvre vos [applications pleine page](https://docs.stripe.com/stripe-apps/patterns/full-page-apps.md). - Ajoutez le point d’entrée `@stripe/ui-extension-sdk/navigation` avec des API d’acheminement pour les applications pleine page qui nécessitent plus d’une seule vue et une navigation programmatique vers les pages du Dashboard. [En savoir plus](https://docs.stripe.com/stripe-apps/routing.md). - Ajoutez le point d’entrée `@stripe/ui-extension-sdk/ui/experimental` avec `ListPage`. Les composants de ce sous-module sont encore en développement et peuvent être modifiés avant leur version stable. [En savoir plus](https://docs.stripe.com/stripe-apps/experimental-ui-components.md). - Ajoutez les onglets de nouvelle génération (`Tabs`, `Tab`) et les composants de visualisation de données (`BarChart`, `LineChart`, `SparkLineChart`, `MeterChart`) au point d’entrée `@stripe/ui-extension-sdk/ui/next`. [En savoir plus](https://docs.stripe.com/stripe-apps/next-ui-components.md). - Ajoutez les composants `OverviewPage`, `DataTable`, `DetailPage` et `PageModule`. - Ajoutez les composants `SearchField`, `DateRangePicker` et `CurrencyField`. - Acceptez [`RouteDescriptor`](https://docs.stripe.com/stripe-apps/route-descriptors.md) en tant que `href` dans les composants `Link`, `Button` et `DetailPageTable`. - Acceptez la propriété `size` sur le composant `FocusView`. - Ajout de `RoleDefinition#id` (`RoleId`) pour un [ajustement plus déterministe du contenu de l’application en fonction du rôle de l’utilisateur du Dashboard](https://docs.stripe.com/stripe-apps/using-roles-in-ui-extensions.md#tailoring-content-based-on-the-dashboard-role). ### 9.1.0 - Ajoutez la prise en charge du type de cellule de tableau de `link` dans le composant `DetailPageModule`. - Ajoutez les composants `DetailPageTable` et `DetailPagePropertyList`. ### 9.0.0 - Ajout d’un hook `useStorage`. - Ajoutez `isSandbox` à userContext. - Ajout d’un composant `OnboardingView`. - Ajoutez les composants `PropertyList` et `PropertyListItem`. - Ajoutez les composants `TaskList` et `TaskListItem`. - Ajout d’un composant `PlatformConfigurationView` pour activer la configuration des applications intégrées. - Ajout de la validation des propriétés des composants au moment de l’exécution pour améliorer la sécurité du typage. - Ajout de la propriété `pending` au composant `Button`. - Ajout d’options de format supplémentaires aux composants `BarChart` et `LineChart` : - Ajout du style de format `decimal`. - Ajout de l’option `nice` pour obtenir des limites d’axes plus agréables. - Ajout de `ticks` pour spécifier le nombre de points de repère sur un axe. - Ajout de `tickFormat` pour modifier l’affichage des graduations. - Ajout de `zero` pour contrôler la visibilité de la valeur zéro. - Ajout de l’option `fractionalDigits` aux formats de devises pour contrôler la précision des valeurs numériques. - Suppression de la propriété `tabKey` obsolète des composants `Tab` et `TabPanel`. Utilisez plutôt la propriété `id`. - Suppression de la propriété `background` obsolète de la propriété `css` des composants `Box` et `Inline`. Utiliser plutôt la propriété `backgroundColor`. - Suppression de la propriété `className` obsolète des composants `Button` et `Link`. - Suppression de la propriété `invalid` obsolète du composant `FormFieldGroup`. - Suppression de la propriété `layout` obsolète de la propriété `css` des composants `Box` et `Inline`. Utiliser plutôt la propriété `stack`. - Suppression de la propriété `onClose` obsolète du composant `FocusView`. Utilisez plutôt la propriété `setShown`. - Suppression de la propriété `onKeyPress` obsolète des composants `TextArea` et `TextField`. - La propriété `onChange` du composant `DateField` reçoit désormais directement la valeur au lieu de l’événement de changement. - Les valeurs `row` et `column` de la propriété `layout` dans le composant `FormFieldGroup` ont été remplacées par `horizontal` et `vertical`. ### 8.11.0 - Ajoutez `org_id` à userContext. ### 8.10.0 - Ajoutez `isSandbox` à userContext. ### 8.9.3 - Corrigez la définition de type pour l’argument de callback `onPress` de `SignInView` pour qu’elle corresponde à sa valeur réelle au moment de l’exécution. - Mettez à jour les dépendances `@remote-ui`. ### 8.9.2 - Correction des types de propriétés `minTileWidth` pour n’accepter que les valeurs compatibles. - Suppression du type `React.RefObject` de la propriété `trigger` du composant `Tooltip`, car il n’est pas pris en charge lors de l’exécution. - Ajout de la propriété `id` aux composants `Tab` et `TabPanel` pour remplacer `tabKey`. - Suppression de l’avis d’abandon des propriétés de couleur de bordure (`borderColor`, `borderBottomColor`, `borderLeftColor`, `borderRightColor`, `borderTopColor`) dans la propriété `css` des composants `Box` et `Inline`. - Ajout des propriétés de style et de largeur de bordure (`borderStyle`, `borderWidth`, `borderBottomStyle`, `borderBottomWidth`, `borderLeftStyle`, `borderLeftWidth`, `borderRightStyle`, `borderRightWidth`, `borderTopStyle`, `borderTopWidth`) à la propriété `css` des composants `Box` et `Inline`. - Ajout des types littéraux à la propriété `name` du composant `Icon`. ### 8.9.1 - Utilisez les versions de dépendance fixes. - Correction des méthodes de recherche du wrapper de test. ### 8.9.0 - Ajout de la propriété `value` au composant `DateField`. - Ajout d’un avis d’abandon de la propriété `background` à la propriété `css` des composants `Box` et `Inline`. Utiliser plutôt la propriété `backgroundColor`. - Ajout d’un avis d’abandon à la propriété `className` des composants `Button` et `Link`. - Ajout d’un avis d’abandon à la propriété `invalid` du composant `FormFieldGroup`. - Ajout d’un avis d’abandon de la propriété `layout` à la propriété `css` des composants `Box` et `Inline`. Utiliser plutôt la propriété `stack`. - Ajout d’un avis d’abandon à la propriété `tabKey` des composants `Tab` et `TabPanel`. - Ajout d’un avis d’abandon des propriétés de couleur de bordure (`borderColor`, `borderTopColor`, `borderRightColor`, `borderBottomColor`, `borderLeftColor`) à la propriété `css` des composants `Box` et `Inline`. Utiliser plutôt la propriété `keyline` pour définir le style des bordures. - Suppression de l’avis d’abandon pour les propriétés `value` et `checked`. ### 8.8.0 - Ajout du composant `StripeFileUploader` - Ajout de la propriété `platform` au contexte d’environnement - Ajout de `appContext` au type `ExtensionContextValue` - Ajout des types pour `AuthorizedPermission` et `AuthorizedContentSecurityPolicy` - Ajout de fonctions utilitaires pour interagir avec `appContext` - `getUserAuthorizedPermissions` : permet de recevoir la correspondance entre les autorisations accordées pour l’application et celles de l’utilisateur actuel du Dashboard. - `isPermissionAuthorized` : indique si une autorisation fait partie des autorisations accordées pour l’application. - `isSourceInAuthorizedCSP` : indique si une URL se trouve dans les sources autorisées de l’application pour les connexions ou les images. ### 8.7.0 - Ajout de `roles` au compte transmis aux extensions dans la propriété `userContext` ### 8.6.0 - Ajout de la propriété `secondaryAction` à `SignInView` - Ajout de `target` aux propriétés d’action `SignInView` - Possibilité d’utiliser `href` et `onPress` dans la propriété d’action `SignInView` ### 8.5.0 - Ajout de la propriété `constants` au contexte d’environnement ### 8.4.1 - Ajout d’un composant `SignInView` ### 8.3.0 - Suppression de la propriété `contentUses` non prise en charge dans le typage `TableCell` et `TableHeaderCell` - Mise à jour de `useToast` pour renvoyer les méthodes utilitaires `show` et `dismiss` ### 8.2.0 - `StripeAppsHttpResponse.prototype.toJSON()` renvoie désormais une promesse rejetée si le corps de la réponse HTTP est vide - Ajout de la prise en charge pour appeler `fetchStripeSignature` avec des données JSON imbriquées - Correction de `debug` pour filtrer les propriétés en fonction de l’option `all` - Ajout de `tabKey` aux composants `Tab` et `TabPanel` - Mise à niveau de la dépendance du package `stripe` vers `^9.11.0` - Ajout de `external` à `Link` - Ajout de la propriété `setShown` à `FocusView` - Ajout d’une fonction utilitaire `showToast` pour afficher les notifications toast en bas de l’écran de l’application ### 8.1.0 - Correction du typage `ExtensionContextValue` pour indiquer que les valeurs `name` et `objectContext` peuvent être `null` - Ajout de `textAlign` à la propriété `css` du composant `Box` - Option `onSave` rendue facultative pour les composants `SettingsView` - Mise à niveau vers `@remote-ui/react` 4.5.2. - Ajout d’un composant `Sparkline` ### 8.0.0 - Ajout d’un avis d’abandon à la propriété `value` des composants `TextArea`, `TextField` et `Select` - Ajout d’un avis d’abandon à la propriété `checked` des composants `Checkbox`, `Radio` et `Switch` - Suppression des propriétés `outerRef` non prises en charge lors de la saisie ### 7.1.0 - Ajout de `brandIcon` et `brandColor` à `ContextView` ### 7.0.0 - Suppression du composant `Notice` ; utiliser plutôt `Banner` - Ajout de `overflowX` et `overflowY` à la propriété `css` du composant `Box` ### 6.3.1 - Mise à jour interne, pas de changement pour l’utilisateur ### 6.3.0 - Ajout d’un composant `Banner` - Ajout d’un avertissement d’abandon pour le composant `Notice` - Ajout de `locale` à `ExtensionContextValue['oauthContext']` - Ajout de `overflowWrap` et `wordBreak` aux propriétés `css` du composant `Box` - Ajout de `textTransform` aux propriétés `css` des composants `Box` et `Inline` - Ajout des propriétés `primaryAction`, `secondaryAction` et `footerContent` à `ContextView`. - Ajout de `whiteSpace` aux propriétés `css` du composant `Box` ### 6.2.0 - Amélioration de`BarChart` et `LineChart` : - Mise en forme des axes configurable - Mise en forme des valeurs configurable - Domaines de canaux configurables - Plages de canaux configurables - Afficher/masquer les étiquettes des axes et les graduations dans les graphiques - Afficher/masquer les lignes quadrillées dans les graphiques - Afficher/masquer les infobulles dans les réglages graphiques prédéfinis - Afficher/masquer les légendes dans les réglages graphiques prédéfinis ### 6.1.0 - Ajout d’une boîte de dialogue de confirmation à `FocusView` - Ajout des composants `Chip` et `ChipList` - Mise à jour de la fonction `getDashboardUserEmail` pour retourner directement l’e-mail et rejeter la promesse en cas d’erreur - Correction des composants React qui ne sont pas acceptés dans la propriété `label` des éléments de formulaire - Affichage de `text-overflow: ellipsis` et `word-wrap: normal | break-word` dans la propriété `css` du composant `Box` - Ajout de `country` au compte transmis aux extensions dans la propriété `userContext` - Ajout de la prise en charge de l’URL `data:` pour le composant `Img`. En savoir plus sur [le composant `Img`](https://docs.stripe.com/stripe-apps/components/img.md?app-sdk-version=8#data-urls). ### 6.0.0 - Email obsolète dans le contexte de vue - Regroupement des fonctions utilitaires à l’emplacement `/utils` - Correction d’un problème lié à la dépendance react-reconciler affectant les tests unitaires ### 5.0.1 - Correction des types de propriétés pour `Switch`, `Checkbox` et `Radio` ### 5.0.0 - Ajout des composants `Accordion`, `Icon`, `Spinner` et `Tooltip` - Ajout d’infobulles à `BarChart` et `LineChart` - Correction du typage des propriétés pour `BarChart` et `LineChart` - Abandon des anciens paramètres de contexte de vue - Permet de définir la largeur par `css={{ width: .. }}` sur les composants `Select`, `TextArea`, `TextField`, `Button` et `Link` - Permet de définir l’alignement horizontal interne par `css={{ alignX: .. }}` sur les composants `Button` et `Link` - Ajout de la fonction `clipboardWriteText` - Ajout de la fonction `getDashboardUserEmail` ### 4.0.0 - Rend obsolète la propriété `slot` ### 3.2.0 - Ajout de la fonction `createOAuthState` - Ajout de `oauthContext` au type `ExtensionContextValue` ### 3.1.0 - Ajout du composant `Img` ### 3.0.0 - Ajout de la prise en charge des composants `Notice`, `Charts` et `Tabs` - Derniers changements : - `ListItem` : auparavant, le contenu transmis en tant qu’enfant était le contenu principal affiché dans le composant. Désormais, le contenu principal est transmis à la propriété `title`. La propriété `description` a également été remplacée par la propriété `secondaryTitle`. - `MenuTrigger` : ce composant a été abandonné au profit d’une propriété `trigger` dans le composant `Menu`. L’utilisation de l’API Slot a également été supprimée. - Suppression de la transmission des autorisations dans le contexte utilisateur. ### 2.2.1 - Affichage des fichiers `docs.json` dans le composant `dist` ### 2.2.0 - Ajout d’une propriété `actions` à `ContextView`. ### 2.1.0 - Introduit le composant `ButtonGroup`. - Supprime la `margin-bottom` des vérifications de formulaires. - Définit les boutons `white-space : nowrap` et `alignY : center` comme valeurs par défaut. - Les thèmes des boutons incluent désormais une propriété `min-height` pour toutes les variantes de taille. - Rétrécit les composants `Link` et `Button` pour qu’ils s’adaptent à leur contenu. - Affichage de l’attribut `defaultValue` dans `TextField` et `TextArea`. - Possibilité de masquer `error` et `description` sur les contrôles de formulaire grâce à la propriété `hiddenElements`. - Affichage des propriétés `invalid` et `size` des composants `Select` et `TextArea`. - Affichage de l’attribut `defaultChecked` dans `Radio`. - Affichage des propriétés `resizeable` and `rows` dans `TextArea.` - Correction de l’état invalide des composants de contrôle. - Correction du double déclenchement de la propriété `Chip` du composant `onDropdown`. - Correction de l’affichage du composant `Divider`. ### 2.0.3 - Renvoie une promesse de `useRefreshDashboardData` qui se résout après l’actualisation des données du Dashboard. - Ajout de la méthode `fetchStripeSignature` qui permet de spécifier une charge utile de requête supplémentaire de manière optionnelle. Une signature peut être utilisée pour effectuer une requête authentifiée au back-end de votre application. - Correction d’un problème lors duquel la méthode de vérification d’élément de test `.is` ne parvenait pas à identifier un composant. ### 2.0.2 - Correction d’un problème avec le package `testing` dans lequel les composants avec des propriétés de type fragment étaient introuvables à l’aide de la méthode `wrapper.find()`. ### 2.0.1 - Introduction d’une dépendance mise à jour qui corrige les problèmes [#55](https://github.com/stripe/stripe-apps/issues/55) et [#161](https://github.com/stripe/stripe-apps/issues/161) ### 2.0.0 - Correction d’une erreur d’affichage avec `SettingsView` - Mise à jour des types de `SettingsView` pour qu’ils correspondent aux propriétés disponibles pour ce composant - Ajout d’un assistant `getMockContextProps` pour les tests. En savoir plus sur les [propriétés de contexte](https://docs.stripe.com/stripe-apps/ui-testing.md#mock-context-props). - Le composant List accepte désormais `React.ReactNode` comme type valide pour la propriété `value`, et non plus uniquement `string`. - Ajout d’un état de survol aux composants ListItem - Mise à jour du composant ListItem de manière à ce que l’état de survol ne soit visible que lorsqu’une action est associée - Correction de l’affichage de la sélection lorsque le paramètre « multiple » est défini sur « true » - Correction du double déclenchement de la propriété Checkbox du composant onChange ### 1.1.7 - Ajout d’un module « de test », qui comprend des assistants pour créer des tests Jest pour les applications. En savoir plus sur les [tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md). - Correction de certains composants qui acceptent les nœuds React en tant que propriété : - `MenuGroup` prend désormais en charge la propriété `title` - `FocusView` prend désormais en charge la propriété `footerContent` - `SettingsView` prend désormais en charge la propriété `headerActions` - Quelques corrections typographiques et mises à jour grammaticales. ### 1.1.6 - Ajout de types pour `FocusView`, `SettingsView` et `ContextView` - Exportation d’une nouvelle constante `STRIPE_API_KEY` de http_client à utiliser lors de l’initialisation du client de l’API Stripe.