chore(deps): bump svelty-picker from 3.6.1 to 5.0.0 (#7381)

* chore(deps): bump svelty-picker from 3.6.1 to 4.1.4 * feat: add reviewed changes * styles: add missing colors * chore: update to latest svelty-picker * chore: update svelty picker in correct package * styles: update to latest style variables * feat: improve date selection experience --------- Co-authored-by: Begoña Alvarez <[email protected]>
iotaledger · Oct 19, 2023 · f90310c · f90310c
1 parent 913c0a2
commit f90310c
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 55 deletions.
diff --git a/packages/shared/components/inputs/DateTimePicker.svelte b/packages/shared/components/inputs/DateTimePicker.svelte
@@ -1,41 +1,44 @@
 <!-- this is a wrapper component for svelty-picker -->
 <script lang="ts">
     import SveltyPicker from 'svelty-picker'
-    import { createEventDispatcher } from 'svelte'
+    import sveltyPickerTranslations from 'svelty-picker/i18n'
+    import { ComponentProps, createEventDispatcher } from 'svelte'
     import { Tooltip, Button, ButtonSize } from 'shared/components'
     import { localize } from '@core/i18n'
-    import sveltyPickerTranslations from 'svelty-picker/i18n'
     import { appSettings } from '@core/app'
 
-    export let value: Date = undefined
-    export let startDate: Date = null
+    export let value: Date | null | undefined = undefined
+    export let startDate: Date | null | undefined = undefined
     export let mode: 'auto' | 'datetime' | 'date' | 'time' = 'auto'
 
     const dispatch = createEventDispatcher()
     const sveltyPickerStartDate = convertDateToSveltyPickerFormat(startDate)
+    const translations = getSveltyPickerTranslations()
 
     let sveltyPickerDate = convertDateToSveltyPickerFormat(value) ?? sveltyPickerStartDate
-    const translations = getSveltyPickerTranslations()
     let tooltip: Tooltip
 
-    function convertDateToSveltyPickerFormat(date: Date): string {
-        return date?.toLocaleString('sv')
+    function convertDateToSveltyPickerFormat(date: Date | null | undefined): string | undefined {
+        return date?.toLocaleString('sv', {
+            dateStyle: 'short',
+            timeStyle: 'short',
+        })
     }
 
     function onCancelClick(): void {
         dispatch('cancel')
     }
 
     function onConfirmClick(): void {
-        value = new Date(sveltyPickerDate)
+        if (sveltyPickerDate) value = new Date(sveltyPickerDate)
         dispatch('confirm')
     }
 
-    function getSveltyPickerTranslations(): Record<string, unknown> {
+    function getSveltyPickerTranslations(): ComponentProps<SveltyPicker>['i18n'] {
         return sveltyPickerTranslations[getSveltyPickerLanguage($appSettings.language)] ?? sveltyPickerTranslations.en
     }
 
-    function getSveltyPickerLanguage(settingsLanguage: string): string {
+    function getSveltyPickerLanguage(settingsLanguage: string): keyof typeof sveltyPickerTranslations {
         switch (settingsLanguage) {
             case 'cs':
                 return 'cz'
@@ -67,57 +70,88 @@
                 return 'en'
         }
     }
+
+    function onInput(e: CustomEvent) {
+        if (e.detail) value = new Date(e.detail)
+    }
 </script>
 
 <Tooltip {...$$restProps} classes="flex justify-center items-center flex-col" bind:this={tooltip}>
-    <SveltyPicker
-        pickerOnly
-        autoclose
-        {mode}
-        clearBtn={false}
-        todayBtn={false}
-        startDate={sveltyPickerStartDate}
-        i18n={translations}
-        format="yyyy-mm-dd hh:ii"
-        theme="datetime-picker-colors"
-        bind:value={sveltyPickerDate}
-        on:change={tooltip?.refreshPosition}
-    />
-    <div class="flex flex-row justify-center items-center space-x-4 w-full">
-        <Button size={ButtonSize.Small} outline onClick={onCancelClick} classes="w-full"
-            >{localize('actions.cancel')}</Button
+    <datetime-picker-wrapper>
+        <SveltyPicker
+            pickerOnly
+            autocommit
+            {mode}
+            clearBtn={false}
+            todayBtn={false}
+            startDate={sveltyPickerStartDate}
+            i18n={translations}
+            format="yyyy-mm-dd hh:ii"
+            bind:value={sveltyPickerDate}
+            on:change={tooltip?.refreshPosition}
+            on:input={onInput}
         >
-        <Button size={ButtonSize.Small} onClick={onConfirmClick} classes="w-full">{localize('actions.confirm')}</Button>
-    </div>
+            <div
+                slot="action-row"
+                let:onConfirm
+                class="flex flex-row justify-center items-center space-x-4 mt-2 w-full"
+            >
+                <Button size={ButtonSize.Small} outline onClick={onCancelClick} classes="w-full"
+                    >{localize('actions.cancel')}</Button
+                >
+                <Button
+                    size={ButtonSize.Small}
+                    onClick={() => {
+                        onConfirm()
+                        onConfirmClick()
+                    }}
+                    classes="w-full">{localize('actions.confirm')}</Button
+                >
+            </div>
+        </SveltyPicker>
+    </datetime-picker-wrapper>
 </Tooltip>
 
 <style lang="scss">
     @media (prefers-color-scheme: dark) {
-        :global(.datetime-picker-colors) {
-            --sdt-primary: theme('colors.blue.500');
-            --sdt-color: theme('colors.white');
-            --sdt-bg-today: var(--sdt-primary);
-            --sdt-btn-bg-hover: theme('colors.gray.800');
-            --sdt-btn-header-bg-hover: theme('colors.gray.800');
-            --sdt-clock-bg: theme('colors.gray.800');
-            --sdt-clock-bg-minute: theme('colors.gray.800');
+        :global(datetime-picker-wrapper) {
+            :global(.std-calendar-wrap) {
+                --sdt-wrap-shadow: none;
+
+                --sdt-disabled-date: theme('colors.gray.500');
+                --sdt-color-selected: theme('colors.white');
+
+                --sdt-clock-bg: theme('colors.gray.800');
+                --sdt-header-color: theme('colors.white');
+                --sdt-color: theme('colors.white');
+                --sdt-bg-main: theme('colors.gray.900');
+                --sdt-header-btn-bg-hover: theme('colors.gray.800');
+                --sdt-table-selected-bg: theme('colors.blue.500');
+                --sdt-table-data-bg-hover: theme('colors.gray.800');
+                --sdt-clock-disabled: theme('colors.gray.600');
+                --sdt-clock-disabled-bg: none;
+                --sdt-clock-selected-bg: theme('colors.blue.500');
+            }
         }
     }
-
     @media (prefers-color-scheme: light) {
-        :global(.datetime-picker-colors) {
-            --sdt-primary: theme('colors.blue.500');
-            --sdt-color: theme('colors.gray.600');
-            --sdt-color-selected: theme('colors.white');
-            --sdt-bg-main: none;
-            --sdt-bg-today: var(--sdt-primary);
-            --sdt-today-color: theme('colors.white');
-            --sdt-btn-bg-hover: theme('colors.gray.200');
-            --sdt-btn-header-bg-hover: theme('colors.gray.200');
-            --sdt-clock-bg: theme('colors.gray.200');
-            --sdt-clock-bg-minute: theme('colors.gray.200');
-            --sdt-clock-bg-shadow: none;
-            --sdt-shadow: none;
+        :global(datetime-picker-wrapper) {
+            :global(.std-calendar-wrap) {
+                --sdt-table-selected-bg: theme('colors.blue.500');
+                --sdt-clock-disabled: theme('colors.gray.500');
+                --sdt-clock-disabled-bg: none;
+                --sdt-clock-selected-bg: theme('colors.blue.500');
+
+                --sdt-table-data-bg-hover: theme('colors.gray.200');
+                --sdt-color: theme('colors.gray.600');
+                --sdt-color-selected: theme('colors.white');
+                --sdt-header-color: theme('colors.gray.600');
+                --sdt-bg-main: none;
+                --sdt-header-btn-bg-hover: theme('colors.gray.200');
+                --sdt-clock-bg: theme('colors.gray.200');
+                --sdt-disabled-date: theme('colors.gray.500');
+                --sdt-wrap-shadow: none;
+            }
         }
     }
 </style>
diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -21,7 +21,7 @@
         "svelte": "^3.49.0",
         "svelte-i18n": "3.7.0",
         "svelte-markdown": "0.2.3",
-        "svelty-picker": "^3.5.0",
+        "svelty-picker": "^5.0.0",
         "zxcvbn": "^4.4.2"
     },
     "scripts": {

diff --git a/yarn.lock b/yarn.lock
@@ -644,6 +644,26 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.44.0.tgz#961a5903c74139390478bdc808bcde3fc45ab7af"
   integrity sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==
 
+"@floating-ui/core@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.4.1.tgz#0d633f4b76052668afb932492ac452f7ebe97f17"
+  integrity sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==
+  dependencies:
+    "@floating-ui/utils" "^0.1.1"
+
+"@floating-ui/dom@^1.4.5":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7"
+  integrity sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==
+  dependencies:
+    "@floating-ui/core" "^1.4.1"
+    "@floating-ui/utils" "^0.1.1"
+
+"@floating-ui/utils@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.1.tgz#1a5b1959a528e374e8037c4396c3e825d6cf4a83"
+  integrity sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==
+
 "@formatjs/[email protected]":
   version "1.11.4"
   resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz#b962dfc4ae84361f9f08fbce411b4e4340930eda"
@@ -8041,10 +8061,12 @@ svelte@^3.49.0:
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.59.2.tgz#a137b28e025a181292b2ae2e3dca90bf8ec73aec"
   integrity sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==
 
-svelty-picker@^3.5.0:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/svelty-picker/-/svelty-picker-3.5.2.tgz#076535d55238da21a4477266763f6f818b29a9f2"
-  integrity sha512-323YrzvOoly8DnCuAmbFUeCXaIenL1AR89BaTrNVH9gilW5V/3viqyJlcRdd1zZ9Co1rsZ1ohlHw2+Z0iDZZ+Q==
+svelty-picker@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/svelty-picker/-/svelty-picker-5.0.0.tgz#538af006f2ea75fa6844bc2a210207376ff48d98"
+  integrity sha512-WWPZK3ruDdxwhMf3pkYRAaxWThV4ZwqyXm4qk26aPCu/lq3ty1bkhCeh3E+t28vf1Udn9WPJHcihM8L/jJ6AiA==
+  dependencies:
+    "@floating-ui/dom" "^1.4.5"
 
 symbol-tree@^3.2.4:
   version "3.2.4"