@cnamts/synapse 1.0.17 → 1.0.18

package/src/components/DataListGroup/Accessibilite.stories.ts

@@ -1,191 +1,12 @@
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import { VIcon } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
-import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
-import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
-
+import { mdiCheckboxMarkedCircle } from '@mdi/js'
 const checkIcon = mdiCheckboxMarkedCircle
-const iconEye = mdiEye
-const linkICon = mdiLink
 
 export default {
 	title: 'Composants/Données/DataListGroup/Accessibilité',
 }
 
-export const AccessibilitePanel: StoryObj = {
-
-	render: () => {
-		return {
-			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
-
-			setup() {
-				const icon = checkIcon
-
-				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
-			},
-			template: `
-				<div class="accessibiliteItems" style="display:flex; max-width: none !important;">
-					<v-col cols="6">
-						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
-							<h5>{{ AccessibiliteItemsIndeterminate.length }} critères à prendre en charge par le projet</h5>
-							<div style="display: flex; align-items: center;">
-								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
-									   rounded>Tanaguru
-								</v-btn>
-							</div>
-						</div>
-
-						<v-expansion-panels value="opened" multiple>
-							<v-expansion-panel v-for="(item, index) in AccessibiliteItemsIndeterminate" :key="index" style="background-color: rgba(42, 96, 158, 0.1); margin-bottom: 10px;">
-								<v-expansion-panel-title>
-									<VIcon :icon="iconEye" style="margin-right: 5px; color:#5778b7;"/>
-									{{ item.title }}
-								</v-expansion-panel-title>
-								<v-expansion-panel-text>
-									<v-expansion-panels>
-									<div v-if="item.items2 && item.items2.length > 0 ">
-									<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
-											<v-expansion-panel-title
-												style="font-weight: bold; font-size: 13px; line-height: 16px;">
-												{{ i.subtitle}}
-											</v-expansion-panel-title>
-											<v-expansion-panel-text>
-												<div>
-													<p style="font-size: 13px;line-height: 16px;">
-														{{ i.precision }}
-													</p>
-													<div v-for="(value, index) in i.solution"
-														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
-														<p style="font-weight: bold;">Méthodologie du test : <a
-															href="{{i.link}}" target="blank">
-															<VIcon :icon="linkICon"/>
-														</a></p>
-
-														<p>{{ value.info1 }}</p>
-														<p>{{ value.info2 }}</p>
-														<p>{{ value.info3 }}</p>
-
-													</div>
-													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
-												</div>
-											</v-expansion-panel-text>
-										</v-expansion-panel>
-										</div>
-										<v-expansion-panel v-else>
-											<v-expansion-panel-title
-												style="font-weight: bold; font-size: 13px; line-height: 16px;">
-												{{ item.subtitle }}
-											</v-expansion-panel-title>
-											<v-expansion-panel-text>
-												<div v-for="(value, i) in item.items" :key="i">
-													<p style="font-size: 13px;line-height: 16px;">
-														{{ value.precision }}
-													</p>
-													<div v-for="element in value.solution"
-														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
-														<p style="font-weight: bold;">Méthodologie du test : <a
-															href="value.link" target="blank">
-															<VIcon :icon="linkICon"/>
-														</a></p>
-
-														<p>{{ element.info1 }}</p>
-														<p>{{ element.info2 }}</p>
-														<p>{{ element.info3 }}</p>
-
-													</div>
-													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
-												</div>
-											</v-expansion-panel-text>
-										</v-expansion-panel>
-									</v-expansion-panels>
-								</v-expansion-panel-text>
-							</v-expansion-panel>
-						</v-expansion-panels>
-					</v-col>
-					<v-col cols="6">
-						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
-							<h5>{{ AccessibiliteItemsValidated.length }} critères pris en charge par l'équipe Design System</h5>
-							<div style="display: flex; align-items: center;">
-								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
-									   rounded>Tanaguru
-								</v-btn>
-							</div>
-						</div>
-						<v-expansion-panels value="opened" multiple>
-							<v-expansion-panel
-								v-for="(item, index) in AccessibiliteItemsValidated"
-								:key="index" style="background-color: rgba(53,135,0,0.1); margin-bottom: 10px;">
-								<v-expansion-panel-title>
-									<VIcon color="green" :icon="icon" style="margin-right: 5px;"/>
-									{{ item.title }}
-								</v-expansion-panel-title>
-								<v-expansion-panel-text>
-									<v-expansion-panels>
-									
-									<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
-											<v-expansion-panel-title
-												style="font-weight: bold; font-size: 13px; line-height: 16px;">
-												{{ i.subtitle}}
-											</v-expansion-panel-title>
-											<v-expansion-panel-text>
-												<div>
-													<p style="font-size: 13px;line-height: 16px;">
-														{{ i.precision }}
-													</p>
-													<div v-for="(value, index) in i.solution"
-														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
-														<p style="font-weight: bold;">Méthodologie du test : <a
-															href="{{i.link}}" target="blank">
-															<VIcon :icon="linkICon"/>
-														</a></p>
-
-														<p>{{ value.info1 }}</p>
-														<p>{{ value.info2 }}</p>
-														<p>{{ value.info3 }}</p>
-
-													</div>
-													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
-												</div>
-											</v-expansion-panel-text>
-										</v-expansion-panel>
-									
-										<v-expansion-panel >
-											<v-expansion-panel-title
-												style="font-weight: bold; font-size: 13px; line-height: 16px;">
-												{{ item.subtitle }}
-											</v-expansion-panel-title>
-											<v-expansion-panel-text>
-												<div v-for="(value, i) in item.items" :key="i">
-													<p style="font-size: 13px;line-height: 16px;">
-														{{ value.precision }}
-													</p>
-													<div v-for="element in value.solution"
-														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
-														<p style="font-weight: bold;">Méthodologie du test : <a
-															href="value.link" target="blank">
-															<VIcon :icon="linkICon"/>
-														</a></p>
-
-														<p>{{ element.info1 }}</p>
-														<p>{{ element.info2 }}</p>
-														<p>{{ element.info3 }}</p>
-
-													</div>
-													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
-												</div>
-											</v-expansion-panel-text>
-										</v-expansion-panel>
-									</v-expansion-panels>
-								</v-expansion-panel-text>
-							</v-expansion-panel>
-						</v-expansion-panels>
-					</v-col>
-				</div>
-			`,
-		}
-	},
-	tags: ['!dev'],
-}
-
 export const Legende: StoryObj = {
 	args: {
 		icon: checkIcon,
@@ -196,28 +17,7 @@ export const Legende: StoryObj = {
 			setup() {
 				return { args }
 			},
-			template: `
-			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
-			  <div>
-				<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
-				<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
-				  l'accessibilité du site.</p>
-				<div style="font-size: 14px">
-				  <p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
-				  <div>
-					<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
-					  Audit
-					</v-btn>
-					Problèmes relevés par le projet
-				  </div>
-				  <div>
-					<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
-					  Tanaguru
-					</v-btn>
-					Problèmes relevés par Tanaguru
-				  </div>
-				</div>
-			  </div>
+			template: `   
 			<div class="mt-4">
 				  <p>Rapport d’audit manuel : <a href="/audits/DataListGroup.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
 				  <p style="color: grey; font-size: 14px">Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/651" target="_blank" style="color:#0C41BD;">issue #651</a>)</p>

package/src/components/DataListGroup/DataListGroup.stories.ts

@@ -440,7 +440,7 @@ export const ActionBtn: Story = {
 			components: { DataListGroup },
 			setup() {
 				const updateBirthdate = (eventValue: { dataListIndex: number, itemIndex: number }) => {
-					args.items[eventValue.dataListIndex].items[eventValue.itemIndex].value = '25/09/1970'
+					args.items[eventValue.dataListIndex]!.items[eventValue.itemIndex]!.value = '25/09/1970'
 				}
 				return { args, updateBirthdate }
 			},

package/src/components/DatePicker/Accessibilite.mdx

@@ -6,13 +6,9 @@ import '../../stories/styles/shared.css';
 
 <div className="header">
   <h1>Accessibilité</h1>
-  <p>Informations sur l'accessibilité du composant</p>
+  <p>Cette page sera bientôt disponible</p>
 </div>
 
 <Story of={AccessStories.Legende} />
 <br />
 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
-
-<Story of={AccessStories.AccessibilitePanel} />
-<br />

package/src/components/DatePicker/Accessibilite.stories.ts

@@ -1,157 +1,12 @@
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import { VIcon } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
-import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
-import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
-
+import { mdiCheckboxMarkedCircle } from '@mdi/js'
 const checkIcon = mdiCheckboxMarkedCircle
-const iconEye = mdiEye
-const linkICon = mdiLink
 
 export default {
 	title: 'Composants/Formulaires/DatePicker/Accessibilité',
 }
 
-export const AccessibilitePanel: StoryObj = {
-
-	render: () => {
-		return {
-			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
-
-			setup() {
-				const icon = checkIcon
-
-				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
-			},
-			template: `
-				<div class="accessibiliteItems" style="display:flex; max-width: none !important;">
-					<v-col cols="6">
-						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
-							<h5>{{ AccessibiliteItemsIndeterminate.length }} critères à prendre en charge par le projet</h5>
-							<div style="display: flex; align-items: center;">
-								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
-									   rounded>Tanaguru
-								</v-btn>
-							</div>
-						</div>
-
-						<v-expansion-panels value="opened" multiple>
-							<v-expansion-panel v-for="(item, index) in AccessibiliteItemsIndeterminate" :key="index" style="background-color: rgba(42, 96, 158, 0.1); margin-bottom: 10px;">
-								<v-expansion-panel-title>
-									<VIcon :icon="iconEye" style="margin-right: 5px; color:#5778b7;"/>
-									{{ item.title }}
-								</v-expansion-panel-title>
-								<v-expansion-panel-text>
-									<v-expansion-panels>
-									<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
-											<v-expansion-panel-title
-												style="font-weight: bold; font-size: 13px; line-height: 16px;">
-												{{ i.subtitle}}
-											</v-expansion-panel-title>
-											<v-expansion-panel-text>
-												<div>
-													<p style="font-size: 13px;line-height: 16px;">
-														{{ i.precision }}
-													</p>
-													<div v-for="(value, index) in i.solution"
-														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
-														<p style="font-weight: bold;">Méthodologie du test : <a
-															href="{{i.link}}" target="blank">
-															<VIcon :icon="linkICon"/>
-														</a></p>
-														<p>{{ value.info1 }}</p>
-														<p>{{ value.info2 }}</p>
-														<p>{{ value.info3 }}</p>
-														<p>{{ value.info4 }}</p>
-
-													</div>
-													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
-												</div>
-											</v-expansion-panel-text>
-										</v-expansion-panel>
-										<v-expansion-panel >
-											<v-expansion-panel-title
-												style="font-weight: bold; font-size: 13px; line-height: 16px;">
-												{{ item.subtitle }}
-											</v-expansion-panel-title>
-											<v-expansion-panel-text>
-												<div v-for="(value, i) in item.items" :key="i">
-													<p style="font-size: 13px;line-height: 16px;">
-														{{ value.precision }}
-													</p>
-													<div v-for="element in value.solution"
-														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
-														<p style="font-weight: bold;">Méthodologie du test : <a
-															href="value.link" target="blank">
-															<VIcon :icon="linkICon"/>
-														</a></p>
-														<p>{{ element.info1 }}</p>
-														<p>{{ element.info2 }}</p>
-														<p>{{ element.info3 }}</p>
-													</div>
-													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
-												</div>
-											</v-expansion-panel-text>
-										</v-expansion-panel>
-									</v-expansion-panels>
-								</v-expansion-panel-text>
-							</v-expansion-panel>
-						</v-expansion-panels>
-					</v-col>
-					<v-col cols="6">
-						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
-							<h5>{{ AccessibiliteItemsValidated.length }} critères pris en charge par l'équipe Design System</h5>
-							<div style="display: flex; align-items: center;">
-								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
-									   rounded>Tanaguru
-								</v-btn>
-							</div>
-						</div>
-						<v-expansion-panels v-if="AccessibiliteItemsValidated.length > 0" value="opened" multiple>
-							<v-expansion-panel 
-								v-for="(item, index) in AccessibiliteItemsValidated"
-								:key="index" style="background-color: rgba(53,135,0,0.1); margin-bottom: 10px;">
-								<v-expansion-panel-title>
-									<VIcon color="green" :icon="icon" style="margin-right: 5px;"/>
-									{{ item.title }}
-								</v-expansion-panel-title>
-								<v-expansion-panel-text>
-									<v-expansion-panels>
-										<v-expansion-panel>
-											<v-expansion-panel-title style="font-weight: bold;font-size: 13px; line-height: 16px;">
-												{{ item.subtitle }}
-											</v-expansion-panel-title>
-											<v-expansion-panel-text>
-												<div v-for="(value, i) in item.items" :key="i">
-													<p style="font-size: 13px;line-height: 16px;">
-														{{ value.precision }}
-													</p>
-													<div v-for="element in value.solution"
-														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
-														<p style="font-weight: bold;">Méthodologie du test : <a
-															href="value.link" target="blank">
-															<VIcon :icon="linkICon"/>
-														</a></p>
-														<p>{{ element.info1 }}</p>
-														<p>{{ element.info2 }}</p>
-														<p>{{ element.info3 }}</p>
-													</div>
-													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
-												</div>
-											</v-expansion-panel-text>
-										</v-expansion-panel>
-									</v-expansion-panels>
-								</v-expansion-panel-text>
-							</v-expansion-panel>
-						</v-expansion-panels>
-						<div v-else style="display: flex;justify-content: center;"><span style="text-align:center;"  >Pas de critère d'accessibilité bloquant</span></div>
-					</v-col>
-				</div>
-			`,
-		}
-	},
-	tags: ['!dev'],
-}
-
 export const Legende: StoryObj = {
 	args: {
 		icon: checkIcon,
@@ -162,28 +17,7 @@ export const Legende: StoryObj = {
 			setup() {
 				return { args }
 			},
-			template: `
-			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
-			  <div>
-				<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
-				<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
-				  l'accessibilité du site.</p>
-				<div style="font-size: 14px">
-				  <p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
-				  <div>
-					<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
-					  Audit
-					</v-btn>
-					Problèmes relevés par le projet
-				  </div>
-				  <div>
-					<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
-					  Tanaguru
-					</v-btn>
-					Problèmes relevés par Tanaguru
-				  </div>
-				</div>
-			  </div>
+			template: `   
             `,
 		}
 	},

package/src/components/DatePicker/CalendarMode/DatePicker.stories.ts

@@ -4,6 +4,10 @@ import SyAlert from '@/components/SyAlert/SyAlert.vue'
 import { ref, watch, computed } from 'vue'
 import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
 import { fn } from '@storybook/test'
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
 
 const meta = {
 	title: 'Composants/Formulaires/DatePicker/CalendarMode',
@@ -1382,6 +1386,157 @@ export const WithDayjsFormat: Story = {
 	},
 }
 
+export const UTC: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div>
+						<DatePicker
+							v-model="dateString"
+							placeholder="Sélectionner une date"
+							format="DD/MM/YYYY"
+						/>
+
+						<p class="mt-4" style="font-family: monospace;">timezone sélectionné : {{ selectedTimeZone }}</p>
+						<p style="font-family: monospace;">v-model (DD/MM/YYYY) : {{ dateString }}</p>
+						<p style="font-family: monospace;">Date ISO (UTC) : {{ utcIso }}</p>
+						<p style="font-family: monospace;">Date affichée dans le timezone sélectionné : {{ dateInSelectedTimeZone }}</p>
+						<p style="font-family: monospace;">Date affichée dans Europe/Paris : {{ dateInParis }}</p>
+					</div>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { computed, ref } from 'vue'
+					import { DatePicker } from '@cnamts/synapse'
+					import dayjs from 'dayjs'
+					import customParseFormat from 'dayjs/plugin/customParseFormat'
+					import utc from 'dayjs/plugin/utc'
+					import timezone from 'dayjs/plugin/timezone'
+					
+					dayjs.extend(customParseFormat)
+					dayjs.extend(utc)
+					dayjs.extend(timezone)
+
+					const DISPLAY_FORMAT = 'DD/MM/YYYY'
+					const selectedTimeZone = ref<'America/Guadeloupe'>('America/Guadeloupe')
+					const utcIso = ref('2023-01-15T00:00:00.000Z')
+					
+					// Un seul computed avec getter/setter pour gérer l'intégration timezone:
+					// - getter: ISO UTC -> DD/MM/YYYY en timezone
+					// - setter: DD/MM/YYYY en timezone -> ISO UTC
+					const dateString = computed({
+						get() {
+							return dayjs.utc(utcIso.value).tz(selectedTimeZone.value).format(DISPLAY_FORMAT)
+						},
+						set(v: string) {
+							const parsed = dayjs.tz(v, DISPLAY_FORMAT, selectedTimeZone.value)
+							if (!parsed.isValid() || parsed.format(DISPLAY_FORMAT) !== v) return
+							utcIso.value = parsed.utc().toISOString()
+						},
+					})
+					
+					const dateInSelectedTimeZone = computed(() => {
+						return dayjs.utc(utcIso.value)
+							.tz(selectedTimeZone.value)
+							.format('DD/MM/YYYY')
+					})
+
+					const dateInParis = computed(() => {
+						return dayjs.utc(utcIso.value)
+							.tz('Europe/Paris')
+							.format('DD/MM/YYYY')
+					})
+					
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		'placeholder': 'Sélectionner une date',
+		'format': 'DD/MM/YYYY',
+		'dateFormatReturn': '',
+		'isBirthDate': false,
+		'showWeekNumber': false,
+		'required': false,
+		'displayRange': false,
+		'displayIcon': true,
+		'displayAppendIcon': false,
+		'disabled': false,
+		'noIcon': false,
+		'noCalendar': false,
+		'onUpdate:modelValue': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
+		'onClosed': fn(),
+	},
+	render(args) {
+		return {
+			components: { DatePicker, SyAlert },
+			setup() {
+				dayjs.extend(customParseFormat)
+				dayjs.extend(utc)
+				dayjs.extend(timezone)
+
+				const DISPLAY_FORMAT = computed(() => args.format ?? 'DD/MM/YYYY')
+				const selectedTimeZone = ref<'America/Guadeloupe'>('America/Guadeloupe')
+				const utcIso = ref('2023-01-15T00:00:00.000Z')
+
+				const dateString = computed({
+					get() {
+						return dayjs.utc(utcIso.value).tz(selectedTimeZone.value).format(DISPLAY_FORMAT.value)
+					},
+					set(v: string) {
+						const parsed = dayjs.tz(v, DISPLAY_FORMAT.value, selectedTimeZone.value)
+						if (!parsed.isValid() || parsed.format(DISPLAY_FORMAT.value) !== v) return
+						utcIso.value = parsed.utc().toISOString()
+						args['onUpdate:modelValue']?.(v)
+					},
+				})
+
+				const dateInSelectedTimeZone = computed(() => {
+					return dayjs.utc(utcIso.value)
+						.tz(selectedTimeZone.value)
+						.format('DD/MM/YYYY')
+				})
+
+				const dateInParis = computed(() => {
+					return dayjs.utc(utcIso.value)
+						.tz('Europe/Paris')
+						.format('DD/MM/YYYY')
+				})
+
+				return { args, dateString, utcIso, selectedTimeZone, dateInSelectedTimeZone, dateInParis }
+			},
+			template: `
+				<div class="d-flex flex-column gap-4 pa-4">
+					<SyAlert type="info" variant="tonal" class="mb-6">
+						Selon le timezone, une même date UTC peut correspondre à un jour différent en local.
+					</SyAlert>
+					<DatePicker v-model="dateString" v-bind="args" />
+					<div class="mt-4" style="font-family: monospace;">
+						<div>timezone sélectionné : {{ selectedTimeZone }}</div>
+						<div>v-model (DD/MM/YYYY) : {{ dateString }}</div>
+						<div>Date ISO (UTC) : {{ utcIso }}</div>
+						<div>Date affichée dans le timezone sélectionné : {{ dateInSelectedTimeZone }}</div>
+						<div>Date affichée dans Europe/Paris : {{ dateInParis }}</div>
+					</div>
+				</div>
+			`,
+		}
+	},
+}
+
 export const BidirectionalValidation: Story = {
 	parameters: {
 		a11y: {

package/src/components/DatePicker/CalendarMode/tests/DatePicker.events.spec.ts

@@ -72,7 +72,7 @@ describe('CalendarMode.vue - Events', () => {
 		// Vérifier que l'événement update:modelValue est émis même avec disablePickerInteraction
 		const emitted = wrapperWithDisabledPicker.emitted('update:modelValue')
 		expect(emitted).toBeTruthy()
-		expect(emitted && emitted[0][0]).toBe('01/01/2023')
+		expect(emitted && emitted[0]?.[0]).toBe('01/01/2023')
 	})
 
 	it('synchronise textInputValue et selectedDates', async () => {
@@ -130,7 +130,7 @@ describe('CalendarMode.vue - Events', () => {
 		// Vérifier que l'événement update:modelValue est émis avec le bon format
 		const emitted = wrapperWithDashFormat.emitted('update:modelValue')
 		expect(emitted).toBeTruthy()
-		expect(emitted && emitted[0][0]).toBe('2023-01-01')
+		expect(emitted && emitted[0]?.[0]).toBe('2023-01-01')
 	})
 
 	it('accepte les plages de dates en entrée', async () => {

package/src/components/DatePicker/CalendarMode/tests/DatePicker.spec.ts

@@ -32,7 +32,7 @@ describe('DatePicker', () => {
 
 		const emitted = wrapper.emitted('update:modelValue')
 		expect(emitted).toBeTruthy()
-		expect(emitted && emitted[0][0]).toBe('01/01/2023')
+		expect(emitted && emitted[0]?.[0]).toBe('01/01/2023')
 	})
 
 	it('handles invalid typed date input gracefully', async () => {
@@ -66,8 +66,8 @@ describe('DatePicker', () => {
 		expect(result.length).toBe(2)
 		expect(result[0]).toBeInstanceOf(Date)
 		expect(result[1]).toBeInstanceOf(Date)
-		expect(result[0].toISOString().split('T')[0]).toBe('2023-01-01')
-		expect(result[1].toISOString().split('T')[0]).toBe('2023-01-05')
+		expect(result[0]?.toISOString().split('T')[0]).toBe('2023-01-01')
+		expect(result[1]?.toISOString().split('T')[0]).toBe('2023-01-05')
 	})
 
 	it('initializeSelectedDates returns an empty array for invalid range inputs', () => {