From 4ae9b3223e9049c26118dbeb81f0bce58725ca8d Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Thu, 22 Dec 2022 13:13:13 +0300
Subject: [PATCH 01/13] WDS-78 remove unused variable

---
 .../ui/src/components/DatePicker/SDatePickerTableDate.vue    | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/ui/src/components/DatePicker/SDatePickerTableDate.vue b/packages/ui/src/components/DatePicker/SDatePickerTableDate.vue
index c94bf671..4c7bb63a 100644
--- a/packages/ui/src/components/DatePicker/SDatePickerTableDate.vue
+++ b/packages/ui/src/components/DatePicker/SDatePickerTableDate.vue
@@ -205,8 +205,6 @@ const getCellClasses = (cell: types.DateTableCell) => {
   return classes.join(' ')
 }
 
-const lastField = ref('')
-
 const handleMouseMove = (event: any) => {
   if (!props.stateStore.rangeState.selecting) return
   let target = event.target
@@ -240,7 +238,6 @@ const handleClick = (ev: any) => {
         selecting: true,
         selectedField: 'startDate',
       })
-      lastField.value = 'startDate'
     } else {
       const dat = props.stateStore.rangeState.startDate || props.stateStore.rangeState.endDate
       if (dat && newDate >= dat) {
@@ -250,7 +247,6 @@ const handleClick = (ev: any) => {
           selecting: false,
           selectedField: 'endDate',
         })
-        lastField.value = 'endDate'
       } else {
         emit('pick', {
           startDate: newDate,
@@ -258,7 +254,6 @@ const handleClick = (ev: any) => {
           selecting: false,
           selectedField: 'startDate',
         })
-        lastField.value = 'startDate'
       }
     }
   } else if (state.type === 'day') {

From c7dd50adf3a0049fbc88c819b5508cf60a63749d Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Thu, 22 Dec 2022 15:49:56 +0300
Subject: [PATCH 02/13] WDS-78 make value change on every date pick

---
 packages/ui/src/components/DatePicker/SDatePicker.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/DatePicker/SDatePicker.vue b/packages/ui/src/components/DatePicker/SDatePicker.vue
index d64bf4a0..57270056 100644
--- a/packages/ui/src/components/DatePicker/SDatePicker.vue
+++ b/packages/ui/src/components/DatePicker/SDatePicker.vue
@@ -83,10 +83,16 @@ const init = () => {
 const updateModelValue = () => {
   if (props.type === 'day') {
     innerModelValue.value = dayState.value
+    save()
   } else if (props.type === 'pick') {
     innerModelValue.value = pickState.value
+    save()
   } else {
     innerModelValue.value = [rangeState.startDate as Date, rangeState.endDate as Date]
+
+    if (rangeState.endDate) {
+      save()
+    }
   }
 }
 
@@ -324,6 +330,9 @@ const updateShow = () => {
 
 const save = () => {
   emit('update:modelValue', innerModelValue.value)
+}
+const saveAndClose = () => {
+  save()
   togglePopper(false)
 }
 
@@ -395,7 +404,7 @@ else updateModelValue()
               :format-date="formatDate"
               :format-pattern="formatPattern"
               @update:custom-input="updateCustomInput"
-              @click:done="save"
+              @click:done="saveAndClose"
             />
           </div>
         </SPopoverWrappedTransition>

From 4e0bd1ca0cccf9bf7464d3e1e35966311596ea26 Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Fri, 23 Dec 2022 09:13:48 +0300
Subject: [PATCH 03/13] WDS-78 make month navigation arrows visible for both
 calendars when range

---
 .../ui/src/components/DatePicker/SDatePickerPanelCalendars.vue   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ui/src/components/DatePicker/SDatePickerPanelCalendars.vue b/packages/ui/src/components/DatePicker/SDatePickerPanelCalendars.vue
index 0cf1efc4..07dc3d70 100644
--- a/packages/ui/src/components/DatePicker/SDatePickerPanelCalendars.vue
+++ b/packages/ui/src/components/DatePicker/SDatePickerPanelCalendars.vue
@@ -107,7 +107,6 @@ const updateHoveredDate = (date: Date) => {
         :show-state="nextMonthShowState"
         :value="calendarToModelValue"
         :state-store="stateStore"
-        :hide-arrows="true"
         :hovered-date="hoveredDate"
         @change-view="changeView"
         @update:showed-state="updateShowedState"

From a8ad623a927dd97e520509f5238005d49ad1a57b Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Fri, 23 Dec 2022 09:31:30 +0300
Subject: [PATCH 04/13] WDS-78 fix styles

---
 .../DatePicker/SDatePickerPanelCustom.vue     | 113 ++++++++----------
 1 file changed, 53 insertions(+), 60 deletions(-)

diff --git a/packages/ui/src/components/DatePicker/SDatePickerPanelCustom.vue b/packages/ui/src/components/DatePicker/SDatePickerPanelCustom.vue
index 14fb6f6d..1fea6f86 100644
--- a/packages/ui/src/components/DatePicker/SDatePickerPanelCustom.vue
+++ b/packages/ui/src/components/DatePicker/SDatePickerPanelCustom.vue
@@ -124,62 +124,60 @@ const onDoneClick = () => {
 </script>
 
 <template>
-  <div class="s-date-picker-custom-panel">
-    <div>
-      <div
-        v-if="showInputs"
-        class="flex justify-center items-center"
-      >
-        <template v-if="state.type === 'range'">
-          <input
-            :maxlength="customInputLength"
-            class="s-date-picker-custom-panel__input"
-            :class="customInputCssClass"
-            :value="customInputValueStartDate"
-            @input="handleInput"
-            @change="updateCustomInput($event, 'startDate')"
-          >
-          <div class="mx-2">
-            -
-          </div>
-          <input
-            :maxlength="customInputLength"
-            class="s-date-picker-custom-panel__input"
-            :class="customInputCssClass"
-            :value="customInputValueEndDate"
-            @input="handleInput"
-            @change="updateCustomInput($event, 'endDate')"
-          >
-        </template>
-        <template v-if="state.type === 'day'">
-          <input
-            :maxlength="customInputLength"
-            class="s-date-picker-custom-panel__input"
-            :class="customInputCssClass"
-            :value="customInputValueDay"
-            @input="handleInput"
-            @change="updateCustomInputDay($event)"
-          >
-        </template>
-        <template v-if="state.type === 'pick' && pickState.length > 0">
-          <input
-            :maxlength="customInputLength"
-            class="s-date-picker-custom-panel__input"
-            :class="customInputCssClass"
-            :value="customInputValuePick"
-            @input="handleInput"
-            @change="updateCustomInputPick($event)"
-          >
-        </template>
-      </div>
-      <button
-        class="s-date-picker-custom-panel__save-button"
-        data-testid="date-picker-done-button"
-        @click="onDoneClick"
-      >
-        Done
-      </button>
+  <div class="s-date-picker-custom-panel flex items-center relative px-16px">
+    <div
+      v-if="showInputs"
+      class="flex justify-center items-center"
+    >
+      <template v-if="state.type === 'range'">
+        <input
+          :maxlength="customInputLength"
+          class="s-date-picker-custom-panel__input"
+          :class="customInputCssClass"
+          :value="customInputValueStartDate"
+          @input="handleInput"
+          @change="updateCustomInput($event, 'startDate')"
+        >
+        <div class="mx-2">
+          -
+        </div>
+        <input
+          :maxlength="customInputLength"
+          class="s-date-picker-custom-panel__input"
+          :class="customInputCssClass"
+          :value="customInputValueEndDate"
+          @input="handleInput"
+          @change="updateCustomInput($event, 'endDate')"
+        >
+      </template>
+      <template v-if="state.type === 'day'">
+        <input
+          :maxlength="customInputLength"
+          class="s-date-picker-custom-panel__input"
+          :class="customInputCssClass"
+          :value="customInputValueDay"
+          @input="handleInput"
+          @change="updateCustomInputDay($event)"
+        >
+      </template>
+      <template v-if="state.type === 'pick' && pickState.length > 0">
+        <input
+          :maxlength="customInputLength"
+          class="s-date-picker-custom-panel__input"
+          :class="customInputCssClass"
+          :value="customInputValuePick"
+          @input="handleInput"
+          @change="updateCustomInputPick($event)"
+        >
+      </template>
     </div>
+    <button
+      class="s-date-picker-custom-panel__save-button ml-auto"
+      data-testid="date-picker-done-button"
+      @click="onDoneClick"
+    >
+      Done
+    </button>
   </div>
 </template>
 
@@ -187,7 +185,6 @@ const onDoneClick = () => {
 @use '@/theme';
 
 .s-date-picker-custom-panel {
-  @apply flex justify-center items-center relative;
   grid-area: custom;
   border-top: 1px solid theme.token-as-var('sys.color.border-primary');
   height: 52px;
@@ -210,10 +207,6 @@ const onDoneClick = () => {
     font-size: 10px;
     width: 44px;
     height: 24px;
-    position: absolute;
-    top: 50%;
-    right: 16px;
-    transform: translateY(-50%);
     background: theme.token-as-var('sys.color.primary');
     border-radius: 2px;
     color: theme.token-as-var('sys.color.util.surface');

From 9c8f96763b80de3e66ee2f2f12c2f14e42795610 Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Fri, 23 Dec 2022 15:06:36 +0300
Subject: [PATCH 05/13] WDS-78 add using shortcut name in trigger if one
 selected

---
 packages/ui/src/components/DatePicker/SDatePicker.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/ui/src/components/DatePicker/SDatePicker.vue b/packages/ui/src/components/DatePicker/SDatePicker.vue
index 57270056..a0fae2b2 100644
--- a/packages/ui/src/components/DatePicker/SDatePicker.vue
+++ b/packages/ui/src/components/DatePicker/SDatePicker.vue
@@ -182,6 +182,10 @@ const changeView = (viewName: string) => {
 }
 
 const headTitle = computed(() => {
+  if (menuState.value !== 'Custom') {
+    return menuState.value
+  }
+
   try {
     switch (props.type) {
       case 'day':

From 011ee81a1b6ba86d90c029a00478ecb665689632 Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Fri, 23 Dec 2022 15:07:06 +0300
Subject: [PATCH 06/13] WDS-78 add custom trigger support

---
 .../src/components/DatePicker/SDatePicker.vue | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/components/DatePicker/SDatePicker.vue b/packages/ui/src/components/DatePicker/SDatePicker.vue
index a0fae2b2..397ed641 100644
--- a/packages/ui/src/components/DatePicker/SDatePicker.vue
+++ b/packages/ui/src/components/DatePicker/SDatePicker.vue
@@ -358,19 +358,30 @@ else updateModelValue()
       @click-outside="togglePopper(false)"
     >
       <template #trigger>
-        <div
-          class="s-date-picker__header p-2 sora-tpg-ch2 relative pr-6"
-          :class="disabled ? 'cursor-default' : 'cursor-pointer'"
-          @keydown="updateShow"
-          @click="updateShow"
-        >
-          {{ headTitle || 'Date' }}
-          <div
-            class="arrow"
-            :class="arrowState"
+        <div>
+          <slot
+            v-bind="{
+              disabled,
+              updateShow,
+              'isPopperShown': showPopper,
+              'label': headTitle
+            }"
           >
-            <IconArrowsChevronBottom24 />
-          </div>
+            <div
+              class="s-date-picker__header p-2 sora-tpg-ch2 relative pr-6"
+              :class="disabled ? 'cursor-default' : 'cursor-pointer'"
+              @keydown="updateShow"
+              @click="updateShow"
+            >
+              {{ headTitle || 'Date' }}
+              <div
+                class="arrow"
+                :class="arrowState"
+              >
+                <IconArrowsChevronBottom24 />
+              </div>
+            </div>
+          </slot>
         </div>
       </template>
       <template #popper>

From 091660065ba8e0c3952e3509d448c59920dc9306 Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Fri, 23 Dec 2022 15:46:47 +0300
Subject: [PATCH 07/13] WDS-78 fix lint

---
 packages/ui/src/components/DatePicker/SDatePicker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/DatePicker/SDatePicker.vue b/packages/ui/src/components/DatePicker/SDatePicker.vue
index 397ed641..b2e5d152 100644
--- a/packages/ui/src/components/DatePicker/SDatePicker.vue
+++ b/packages/ui/src/components/DatePicker/SDatePicker.vue
@@ -364,7 +364,7 @@ else updateModelValue()
               disabled,
               updateShow,
               'isPopperShown': showPopper,
-              'label': headTitle
+              'label': headTitle,
             }"
           >
             <div

From abf0604a22ed3b61e424f30275106380dc232616 Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Fri, 23 Dec 2022 16:05:42 +0300
Subject: [PATCH 08/13] WDS-78 update changesets

---
 .changeset/dry-weeks-compare.md   | 5 +++++
 .changeset/eleven-steaks-call.md  | 5 +++++
 .changeset/sharp-ligers-cross.md  | 5 +++++
 .changeset/weak-rivers-confess.md | 5 +++++
 4 files changed, 20 insertions(+)
 create mode 100644 .changeset/dry-weeks-compare.md
 create mode 100644 .changeset/eleven-steaks-call.md
 create mode 100644 .changeset/sharp-ligers-cross.md
 create mode 100644 .changeset/weak-rivers-confess.md

diff --git a/.changeset/dry-weeks-compare.md b/.changeset/dry-weeks-compare.md
new file mode 100644
index 00000000..998b2f71
--- /dev/null
+++ b/.changeset/dry-weeks-compare.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SDatePicker`): add custom trigger support
diff --git a/.changeset/eleven-steaks-call.md b/.changeset/eleven-steaks-call.md
new file mode 100644
index 00000000..07a6c577
--- /dev/null
+++ b/.changeset/eleven-steaks-call.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SDatePicker`): add model value change on every pick
diff --git a/.changeset/sharp-ligers-cross.md b/.changeset/sharp-ligers-cross.md
new file mode 100644
index 00000000..95fd62b4
--- /dev/null
+++ b/.changeset/sharp-ligers-cross.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SDatePicker`): add using shortcut title when selected one
diff --git a/.changeset/weak-rivers-confess.md b/.changeset/weak-rivers-confess.md
new file mode 100644
index 00000000..db3a3b35
--- /dev/null
+++ b/.changeset/weak-rivers-confess.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SDatePicker`): fix styles

From e3746d58709573db55c254ec16de05f5720d8825 Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Fri, 23 Dec 2022 18:01:45 +0300
Subject: [PATCH 09/13] WDS-78 add support for custom shortcuts

---
 .changeset/neat-squids-pretend.md             |   5 +
 packages/ui/etc/api/ui.api.md                 |   6 +-
 .../src/components/DatePicker/SDatePicker.vue |  20 +++-
 .../DatePicker/SDatePickerOptionsWrapper.vue  | 107 ------------------
 .../DatePicker/SDatePickerPanelOptions.vue    |  44 +++----
 .../ui/src/components/DatePicker/consts.ts    | 103 +++++++++++++++++
 .../ui/src/components/DatePicker/types.ts     |  10 +-
 7 files changed, 161 insertions(+), 134 deletions(-)
 create mode 100644 .changeset/neat-squids-pretend.md
 delete mode 100644 packages/ui/src/components/DatePicker/SDatePickerOptionsWrapper.vue

diff --git a/.changeset/neat-squids-pretend.md b/.changeset/neat-squids-pretend.md
new file mode 100644
index 00000000..399983f6
--- /dev/null
+++ b/.changeset/neat-squids-pretend.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SDatePicker`): add support for custom shortcuts
diff --git a/packages/ui/etc/api/ui.api.md b/packages/ui/etc/api/ui.api.md
index b0101a36..e564bcbf 100644
--- a/packages/ui/etc/api/ui.api.md
+++ b/packages/ui/etc/api/ui.api.md
@@ -447,16 +447,19 @@ export const SDatePicker: DefineComponent<__VLS_WithDefaults_14<__VLS_TypePropsT
 type: string;
 time: boolean;
 disabled: boolean;
+shortcuts: () => Options;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_14<__VLS_TypePropsToRuntimeProps_17<Props_7>, {
 type: string;
 time: boolean;
 disabled: boolean;
+shortcuts: () => Options;
 }>>> & {
 "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
 type: DatePickerType;
 disabled: boolean;
 time: boolean;
+shortcuts: Options;
 }>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
@@ -1962,7 +1965,8 @@ export function useTabsPanelApi(): TabsPanelApi;
 
 // Warnings were encountered during analysis:
 //
-// dist-ts/components/DatePicker/SDatePicker.vue.d.ts:19:5 - (ae-forgotten-export) The symbol "DatePickerType" needs to be exported by the entry point lib.d.ts
+// dist-ts/components/DatePicker/SDatePicker.vue.d.ts:13:5 - (ae-forgotten-export) The symbol "Options" needs to be exported by the entry point lib.d.ts
+// dist-ts/components/DatePicker/SDatePicker.vue.d.ts:22:5 - (ae-forgotten-export) The symbol "DatePickerType" needs to be exported by the entry point lib.d.ts
 // dist-ts/components/Table/STable.vue.d.ts:61:5 - (ae-forgotten-export) The symbol "CSSObject" needs to be exported by the entry point lib.d.ts
 // dist-ts/components/Table/STable.vue.d.ts:150:5 - (ae-forgotten-export) The symbol "manualClearSelection" needs to be exported by the entry point lib.d.ts
 // dist-ts/components/Table/STable.vue.d.ts:155:5 - (ae-forgotten-export) The symbol "manualToggleRowSelection" needs to be exported by the entry point lib.d.ts
diff --git a/packages/ui/src/components/DatePicker/SDatePicker.vue b/packages/ui/src/components/DatePicker/SDatePicker.vue
index b2e5d152..9c393f5e 100644
--- a/packages/ui/src/components/DatePicker/SDatePicker.vue
+++ b/packages/ui/src/components/DatePicker/SDatePicker.vue
@@ -18,19 +18,23 @@ import {
   ShowState,
   RangeOptionValue,
   ModelValueType,
+  Options,
 } from './types'
 import { DatePickerApi, DATE_PICKER_API_KEY } from './api'
+import { DEFAULT_SHORTCUTS } from './consts'
 
 interface Props {
   modelValue: ModelValueType
   type?: DatePickerType
   time?: boolean
   disabled?: boolean
+  shortcuts?: Options
 }
 const props = withDefaults(defineProps<Props>(), {
   type: 'day',
   time: false,
   disabled: false,
+  shortcuts: () => DEFAULT_SHORTCUTS,
 })
 
 const innerModelValue = ref<ModelValueType>(props.modelValue)
@@ -156,8 +160,19 @@ const showStateView = computed(() => {
 // #endregion
 
 // #region OPTIONS_PANEL
-const onMenuClick = (data: Date | RangeOptionValue, label: string) => {
-  onDatePick(data)
+const onMenuClick = (data: Date | [Date, Date] | Date[], label: string) => {
+  let processedData: RangeOptionValue | Date | Date[] = data
+
+  if (Array.isArray(data) && data.length === 2) {
+    processedData = {
+      startDate: data[0],
+      endDate: data[1],
+      selecting: false,
+      selectedField: 'endDate',
+    }
+  }
+
+  onDatePick(processedData)
   updateShowedMonths()
   menuState.value = label
 }
@@ -397,6 +412,7 @@ else updateModelValue()
             <OptionsPanel
               :type="type"
               :menu-state="menuState"
+              :options="shortcuts"
               @click:option="onMenuClick"
             />
             <CalendarsPanel
diff --git a/packages/ui/src/components/DatePicker/SDatePickerOptionsWrapper.vue b/packages/ui/src/components/DatePicker/SDatePickerOptionsWrapper.vue
deleted file mode 100644
index 5f67ac22..00000000
--- a/packages/ui/src/components/DatePicker/SDatePickerOptionsWrapper.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<script lang="ts">
-import {
-  addDays,
-  addMonths,
-  addYears,
-  startOfDay,
-  startOfMonth,
-  endOfMonth,
-  startOfToday,
-  startOfTomorrow,
-  startOfYear,
-  endOfYear,
-  startOfYesterday,
-  startOfWeek,
-  endOfWeek,
-} from 'date-fns'
-import { Options } from './types'
-
-export default /* @__PURE__ */ defineComponent({
-  setup(props, { slots }) {
-    function getDate(deltaDay = 0, deltaMonth = 0, deltaYear = 0) {
-      let date = startOfToday()
-      if (deltaDay) date = addDays(date, deltaDay)
-      if (deltaMonth) date = addMonths(date, deltaMonth)
-      if (deltaYear) date = addYears(date, deltaYear)
-      return date
-    }
-
-    function getRange(dateFrom: Date, dateTo: Date) {
-      return {
-        startDate: dateFrom,
-        endDate: dateTo,
-        selecting: false,
-        selectedField: 'endDate',
-      }
-    }
-
-    const options: Options = {
-      day: [
-        {
-          label: 'Today',
-          value: getDate(),
-        },
-        {
-          label: 'Yesterday',
-          value: startOfYesterday(),
-        },
-        {
-          label: 'Tomorrow',
-          value: startOfTomorrow(),
-        },
-        {
-          label: 'Next week',
-          value: startOfDay(getDate(7)),
-        },
-        {
-          label: 'Next month',
-          value: startOfDay(getDate(0, 1)),
-        },
-        {
-          label: 'Custom',
-          value: getDate(),
-        },
-      ],
-
-      range: [
-        {
-          label: 'This week',
-          value: getRange(startOfWeek(getDate(), { weekStartsOn: 1 }), endOfWeek(getDate(), { weekStartsOn: 1 })),
-        },
-        {
-          label: 'Last week',
-          value: getRange(startOfWeek(getDate(-7), { weekStartsOn: 1 }), endOfWeek(getDate(-7), { weekStartsOn: 1 })),
-        },
-        {
-          label: 'Next week',
-          value: getRange(startOfWeek(getDate(7), { weekStartsOn: 1 }), endOfWeek(getDate(7), { weekStartsOn: 1 })),
-        },
-        {
-          label: 'This month',
-          value: getRange(startOfMonth(getDate()), endOfMonth(getDate())),
-        },
-        {
-          label: 'Last month',
-          value: getRange(startOfMonth(getDate(0, -1)), endOfMonth(getDate(0, -1))),
-        },
-        {
-          label: 'Next month',
-          value: getRange(startOfMonth(getDate(0, 1)), endOfMonth(getDate(0, 1))),
-        },
-        {
-          label: 'This year',
-          value: getRange(startOfYear(getDate()), endOfYear(getDate())),
-        },
-        {
-          label: 'Custom',
-          value: getRange(startOfWeek(getDate()), endOfWeek(getDate())),
-        },
-      ],
-    }
-    return () =>
-      slots.default?.({
-        options: options,
-      })
-  },
-})
-</script>
diff --git a/packages/ui/src/components/DatePicker/SDatePickerPanelOptions.vue b/packages/ui/src/components/DatePicker/SDatePickerPanelOptions.vue
index b760ae27..889dbb1f 100644
--- a/packages/ui/src/components/DatePicker/SDatePickerPanelOptions.vue
+++ b/packages/ui/src/components/DatePicker/SDatePickerPanelOptions.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { RangeOptionValue } from './types'
+import { Options } from './types'
 import { IconBasicCheckMark24 } from '@/components/icons'
-import OptionsWrapper from './SDatePickerOptionsWrapper.vue'
 import { DatePickerApi, useDatePickerApi } from './api'
 
 interface Props {
   menuState: string
+  options: Options
 }
 
 const props = defineProps<Props>()
@@ -14,9 +14,17 @@ const emit = defineEmits(['click:option'])
 
 const state: DatePickerApi = useDatePickerApi()
 
-const onMenuClick = (data: Date | RangeOptionValue, label: string) => {
+const onMenuClick = (data: Date | [Date, Date] | Date[], label: string) => {
   emit('click:option', data, label)
 }
+
+const finalOptions = computed((): Required<Options> => {
+  return {
+    day: props.options.day ?? [],
+    range: props.options.range ?? [],
+    pick: props.options.pick ?? [],
+  }
+})
 </script>
 
 <template>
@@ -24,22 +32,20 @@ const onMenuClick = (data: Date | RangeOptionValue, label: string) => {
     v-if="state.type !== 'pick'"
     class="s-date-picker-options-panel sora-tpg-p3"
   >
-    <OptionsWrapper v-slot="{ options }">
-      <p
-        v-for="(item, idx) in options[state.type]"
-        :key="idx"
-        class="s-date-picker-options-panel__item"
-        :class="menuState === item.label ? 'active' : ''"
-        @click="onMenuClick(item.value, item.label)"
-        @keydown="onMenuClick(item.value, item.label)"
-      >
-        {{ item.label }}
-        <span
-          v-show="menuState === item.label"
-          class="s-date-picker-options-panel__checkmark"
-        ><IconBasicCheckMark24 /></span>
-      </p>
-    </OptionsWrapper>
+    <p
+      v-for="(item, idx) in finalOptions[state.type]"
+      :key="idx"
+      class="s-date-picker-options-panel__item"
+      :class="menuState === item.label ? 'active' : ''"
+      @click="onMenuClick(item.value, item.label)"
+      @keydown="onMenuClick(item.value, item.label)"
+    >
+      {{ item.label }}
+      <span
+        v-show="menuState === item.label"
+        class="s-date-picker-options-panel__checkmark"
+      ><IconBasicCheckMark24 /></span>
+    </p>
   </div>
 </template>
 
diff --git a/packages/ui/src/components/DatePicker/consts.ts b/packages/ui/src/components/DatePicker/consts.ts
index 0f157ae9..addf8d41 100644
--- a/packages/ui/src/components/DatePicker/consts.ts
+++ b/packages/ui/src/components/DatePicker/consts.ts
@@ -1,3 +1,20 @@
+import {
+  addMonths,
+  addWeeks,
+  endOfMonth,
+  endOfWeek,
+  endOfYear,
+  startOfMonth,
+  startOfToday,
+  startOfTomorrow,
+  startOfWeek,
+  startOfYear,
+  startOfYesterday,
+  subMonths,
+  subWeeks,
+} from 'date-fns'
+import { Options } from '@/components/DatePicker/types'
+
 export const months = [
   'January',
   'February',
@@ -28,3 +45,89 @@ export const TIME_POINTS: string[] = (() => {
 
   return res
 })()
+
+export const DEFAULT_SHORTCUTS: Options = /* @__PURE__ */ (() => {
+  const START_OF_TODAY = startOfToday()
+  const START_OF_YESTERDAY = startOfYesterday()
+  const START_OF_TOMORROW = startOfTomorrow()
+
+  const START_OF_WEEK = startOfWeek(START_OF_TODAY, { weekStartsOn: 1 })
+  const END_OF_WEEK = endOfWeek(START_OF_TODAY, { weekStartsOn: 1 })
+  const START_OF_LAST_WEEK = subWeeks(START_OF_WEEK, 1)
+  const END_OF_LAST_WEEK = subWeeks(END_OF_WEEK, 1)
+  const START_OF_NEXT_WEEK = addWeeks(START_OF_WEEK, 1)
+  const END_OF_NEXT_WEEK = addWeeks(END_OF_WEEK, 1)
+
+  const START_OF_MONTH = startOfMonth(START_OF_TODAY)
+  const END_OF_MONTH = endOfMonth(START_OF_TODAY)
+  const START_OF_LAST_MONTH = subMonths(START_OF_MONTH, 1)
+  const END_OF_LAST_MONTH = subMonths(END_OF_MONTH, 1)
+  const START_OF_NEXT_MONTH = addMonths(START_OF_MONTH, 1)
+  const END_OF_NEXT_MONTH = addMonths(END_OF_MONTH, 1)
+
+  const START_OF_YEAR = startOfYear(START_OF_TODAY)
+  const END_OF_YEAR = endOfYear(START_OF_TODAY)
+
+  return {
+    day: [
+      {
+        label: 'Today',
+        value: START_OF_TODAY,
+      },
+      {
+        label: 'Yesterday',
+        value: START_OF_YESTERDAY,
+      },
+      {
+        label: 'Tomorrow',
+        value: START_OF_TOMORROW,
+      },
+      {
+        label: 'Next week',
+        value: START_OF_NEXT_WEEK,
+      },
+      {
+        label: 'Next month',
+        value: START_OF_NEXT_MONTH,
+      },
+      {
+        label: 'Custom',
+        value: START_OF_TODAY,
+      },
+    ],
+    range: [
+      {
+        label: 'This week',
+        value: [START_OF_WEEK, END_OF_WEEK],
+      },
+      {
+        label: 'Last week',
+        value: [START_OF_LAST_WEEK, END_OF_LAST_WEEK],
+      },
+      {
+        label: 'Next week',
+        value: [START_OF_NEXT_WEEK, END_OF_NEXT_WEEK],
+      },
+      {
+        label: 'This month',
+        value: [START_OF_MONTH, END_OF_MONTH],
+      },
+      {
+        label: 'Last month',
+        value: [START_OF_LAST_MONTH, END_OF_LAST_MONTH],
+      },
+      {
+        label: 'Next month',
+        value: [START_OF_NEXT_MONTH, END_OF_NEXT_MONTH],
+      },
+      {
+        label: 'This year',
+        value: [START_OF_YEAR, END_OF_YEAR],
+      },
+      {
+        label: 'Custom',
+        value: [START_OF_TODAY, START_OF_TODAY],
+      },
+    ],
+  }
+})()
diff --git a/packages/ui/src/components/DatePicker/types.ts b/packages/ui/src/components/DatePicker/types.ts
index 5decd5d0..e580f371 100644
--- a/packages/ui/src/components/DatePicker/types.ts
+++ b/packages/ui/src/components/DatePicker/types.ts
@@ -22,15 +22,15 @@ export interface StateStore {
   rangeState: RangeState
 }
 
-export interface PresetOption {
+export interface PresetOption<T> {
   label: string
-  value: RangeOptionValue | Date
+  value: T
 }
 
 export interface Options {
-  range: PresetOption[]
-  day: PresetOption[]
-  pick?: PresetOption[]
+  day?: PresetOption<Date>[]
+  range?: PresetOption<[Date, Date]>[]
+  pick?: PresetOption<Date[]>[]
 }
 
 export interface ShowState {

From 2e374df729c242604ff2dbe71ecc0a2f74b72836 Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Mon, 26 Dec 2022 08:31:12 +0300
Subject: [PATCH 10/13] WDS-78 add date picker type and shortcuts types to
 export

---
 .changeset/seven-apes-fry.md                  |  5 ++++
 packages/ui/etc/api/ui.api.md                 | 23 +++++++++++++++----
 .../src/components/DatePicker/SDatePicker.vue |  4 ++--
 .../DatePicker/SDatePickerPanelOptions.vue    |  6 ++---
 .../ui/src/components/DatePicker/consts.ts    |  4 ++--
 .../ui/src/components/DatePicker/index.ts     |  2 ++
 .../ui/src/components/DatePicker/types.ts     |  2 +-
 7 files changed, 33 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/seven-apes-fry.md

diff --git a/.changeset/seven-apes-fry.md b/.changeset/seven-apes-fry.md
new file mode 100644
index 00000000..1690949e
--- /dev/null
+++ b/.changeset/seven-apes-fry.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SDatePicker`): add some prop types export
diff --git a/packages/ui/etc/api/ui.api.md b/packages/ui/etc/api/ui.api.md
index e564bcbf..4e124933 100644
--- a/packages/ui/etc/api/ui.api.md
+++ b/packages/ui/etc/api/ui.api.md
@@ -95,6 +95,21 @@ export type ButtonType = typeof BUTTON_TYPE_VALUES[number];
 // @public (undocumented)
 export type CheckboxState = boolean | 'mixed';
 
+// @public (undocumented)
+export interface DatePickerOptions {
+    // Warning: (ae-forgotten-export) The symbol "PresetOption" needs to be exported by the entry point lib.d.ts
+    //
+    // (undocumented)
+    day?: PresetOption<Date>[];
+    // (undocumented)
+    pick?: PresetOption<Date[]>[];
+    // (undocumented)
+    range?: PresetOption<[Date, Date]>[];
+}
+
+// @public (undocumented)
+export type DatePickerType = 'day' | 'range' | 'pick';
+
 // @public (undocumented)
 export function defineToastsApi(): ToastsApi;
 
@@ -447,19 +462,19 @@ export const SDatePicker: DefineComponent<__VLS_WithDefaults_14<__VLS_TypePropsT
 type: string;
 time: boolean;
 disabled: boolean;
-shortcuts: () => Options;
+shortcuts: () => DatePickerOptions;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_14<__VLS_TypePropsToRuntimeProps_17<Props_7>, {
 type: string;
 time: boolean;
 disabled: boolean;
-shortcuts: () => Options;
+shortcuts: () => DatePickerOptions;
 }>>> & {
 "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
 type: DatePickerType;
 disabled: boolean;
 time: boolean;
-shortcuts: Options;
+shortcuts: DatePickerOptions;
 }>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
@@ -1965,8 +1980,6 @@ export function useTabsPanelApi(): TabsPanelApi;
 
 // Warnings were encountered during analysis:
 //
-// dist-ts/components/DatePicker/SDatePicker.vue.d.ts:13:5 - (ae-forgotten-export) The symbol "Options" needs to be exported by the entry point lib.d.ts
-// dist-ts/components/DatePicker/SDatePicker.vue.d.ts:22:5 - (ae-forgotten-export) The symbol "DatePickerType" needs to be exported by the entry point lib.d.ts
 // dist-ts/components/Table/STable.vue.d.ts:61:5 - (ae-forgotten-export) The symbol "CSSObject" needs to be exported by the entry point lib.d.ts
 // dist-ts/components/Table/STable.vue.d.ts:150:5 - (ae-forgotten-export) The symbol "manualClearSelection" needs to be exported by the entry point lib.d.ts
 // dist-ts/components/Table/STable.vue.d.ts:155:5 - (ae-forgotten-export) The symbol "manualToggleRowSelection" needs to be exported by the entry point lib.d.ts
diff --git a/packages/ui/src/components/DatePicker/SDatePicker.vue b/packages/ui/src/components/DatePicker/SDatePicker.vue
index 9c393f5e..d492b6b8 100644
--- a/packages/ui/src/components/DatePicker/SDatePicker.vue
+++ b/packages/ui/src/components/DatePicker/SDatePicker.vue
@@ -18,7 +18,7 @@ import {
   ShowState,
   RangeOptionValue,
   ModelValueType,
-  Options,
+  DatePickerOptions,
 } from './types'
 import { DatePickerApi, DATE_PICKER_API_KEY } from './api'
 import { DEFAULT_SHORTCUTS } from './consts'
@@ -28,7 +28,7 @@ interface Props {
   type?: DatePickerType
   time?: boolean
   disabled?: boolean
-  shortcuts?: Options
+  shortcuts?: DatePickerOptions
 }
 const props = withDefaults(defineProps<Props>(), {
   type: 'day',
diff --git a/packages/ui/src/components/DatePicker/SDatePickerPanelOptions.vue b/packages/ui/src/components/DatePicker/SDatePickerPanelOptions.vue
index 889dbb1f..cd2df781 100644
--- a/packages/ui/src/components/DatePicker/SDatePickerPanelOptions.vue
+++ b/packages/ui/src/components/DatePicker/SDatePickerPanelOptions.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { Options } from './types'
+import { DatePickerOptions } from './types'
 import { IconBasicCheckMark24 } from '@/components/icons'
 import { DatePickerApi, useDatePickerApi } from './api'
 
 interface Props {
   menuState: string
-  options: Options
+  options: DatePickerOptions
 }
 
 const props = defineProps<Props>()
@@ -18,7 +18,7 @@ const onMenuClick = (data: Date | [Date, Date] | Date[], label: string) => {
   emit('click:option', data, label)
 }
 
-const finalOptions = computed((): Required<Options> => {
+const finalOptions = computed((): Required<DatePickerOptions> => {
   return {
     day: props.options.day ?? [],
     range: props.options.range ?? [],
diff --git a/packages/ui/src/components/DatePicker/consts.ts b/packages/ui/src/components/DatePicker/consts.ts
index addf8d41..1333ff10 100644
--- a/packages/ui/src/components/DatePicker/consts.ts
+++ b/packages/ui/src/components/DatePicker/consts.ts
@@ -13,7 +13,7 @@ import {
   subMonths,
   subWeeks,
 } from 'date-fns'
-import { Options } from '@/components/DatePicker/types'
+import { DatePickerOptions } from '@/components/DatePicker/types'
 
 export const months = [
   'January',
@@ -46,7 +46,7 @@ export const TIME_POINTS: string[] = (() => {
   return res
 })()
 
-export const DEFAULT_SHORTCUTS: Options = /* @__PURE__ */ (() => {
+export const DEFAULT_SHORTCUTS: DatePickerOptions = /* @__PURE__ */ (() => {
   const START_OF_TODAY = startOfToday()
   const START_OF_YESTERDAY = startOfYesterday()
   const START_OF_TOMORROW = startOfTomorrow()
diff --git a/packages/ui/src/components/DatePicker/index.ts b/packages/ui/src/components/DatePicker/index.ts
index a3bc49de..15533ceb 100644
--- a/packages/ui/src/components/DatePicker/index.ts
+++ b/packages/ui/src/components/DatePicker/index.ts
@@ -1 +1,3 @@
 export { default as SDatePicker } from './SDatePicker.vue'
+
+export { DatePickerOptions, DatePickerType } from './types'
diff --git a/packages/ui/src/components/DatePicker/types.ts b/packages/ui/src/components/DatePicker/types.ts
index e580f371..717d45a1 100644
--- a/packages/ui/src/components/DatePicker/types.ts
+++ b/packages/ui/src/components/DatePicker/types.ts
@@ -27,7 +27,7 @@ export interface PresetOption<T> {
   value: T
 }
 
-export interface Options {
+export interface DatePickerOptions {
   day?: PresetOption<Date>[]
   range?: PresetOption<[Date, Date]>[]
   pick?: PresetOption<Date[]>[]

From 9e8503606e824eac74bceedd279affddfa8c7a9b Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Mon, 26 Dec 2022 09:23:36 +0300
Subject: [PATCH 11/13] WDS-78 add date picker types to export

---
 packages/ui/src/components/DatePicker/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/DatePicker/index.ts b/packages/ui/src/components/DatePicker/index.ts
index 15533ceb..3fad14ba 100644
--- a/packages/ui/src/components/DatePicker/index.ts
+++ b/packages/ui/src/components/DatePicker/index.ts
@@ -1,3 +1,3 @@
 export { default as SDatePicker } from './SDatePicker.vue'
 
-export { DatePickerOptions, DatePickerType } from './types'
+export * from './types'

From 317593cc385e58278e95454470b8da8b0a9ee221 Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Mon, 26 Dec 2022 09:33:53 +0300
Subject: [PATCH 12/13] WDS-78 update api

---
 packages/ui/etc/api/ui.api.md | 76 ++++++++++++++++++++++++++++++++++-
 1 file changed, 74 insertions(+), 2 deletions(-)

diff --git a/packages/ui/etc/api/ui.api.md b/packages/ui/etc/api/ui.api.md
index 4e124933..92da7b2c 100644
--- a/packages/ui/etc/api/ui.api.md
+++ b/packages/ui/etc/api/ui.api.md
@@ -97,8 +97,6 @@ export type CheckboxState = boolean | 'mixed';
 
 // @public (undocumented)
 export interface DatePickerOptions {
-    // Warning: (ae-forgotten-export) The symbol "PresetOption" needs to be exported by the entry point lib.d.ts
-    //
     // (undocumented)
     day?: PresetOption<Date>[];
     // (undocumented)
@@ -110,6 +108,32 @@ export interface DatePickerOptions {
 // @public (undocumented)
 export type DatePickerType = 'day' | 'range' | 'pick';
 
+// @public (undocumented)
+export type DateState = Date;
+
+// @public (undocumented)
+export interface DateTableCell {
+    // (undocumented)
+    day: number;
+    // (undocumented)
+    end: boolean;
+    // (undocumented)
+    inRange: boolean;
+    // (undocumented)
+    month: number;
+    // (undocumented)
+    start: boolean;
+    // (undocumented)
+    text: number;
+    // (undocumented)
+    time: string | null;
+    // (undocumented)
+    type: DateTableCellType;
+}
+
+// @public (undocumented)
+export type DateTableCellType = 'normal' | 'today' | 'prev-month' | 'next-month';
+
 // @public (undocumented)
 export function defineToastsApi(): ToastsApi;
 
@@ -143,6 +167,9 @@ export interface ModalApi {
     labelledBy: string;
 }
 
+// @public (undocumented)
+export type ModelValueType = Date[] | Date | null | undefined;
+
 // @public (undocumented)
 export const NAVIGATION_MENU_API_KEY: InjectionKey<DeepReadonly<NavigationMenuApi>>;
 
@@ -166,6 +193,9 @@ export interface NavigationSubmenuApi {
 // @public (undocumented)
 export const NOTIFICATIONS_API_KEY: InjectionKey<ToastsApi>;
 
+// @public (undocumented)
+export type PickState = Date[];
+
 // @public (undocumented)
 export function plugin(): Plugin_2;
 
@@ -180,6 +210,14 @@ export interface PopoverApi {
     show: boolean;
 }
 
+// @public (undocumented)
+export interface PresetOption<T> {
+    // (undocumented)
+    label: string;
+    // (undocumented)
+    value: T;
+}
+
 // @public (undocumented)
 export const RADIO_GROUP_API_KEY: InjectionKey<RadioGroupApi>;
 
@@ -216,6 +254,22 @@ type RadioType = typeof RADIO_TYPE_VALUES extends ReadonlyArray<infer T> ? T : n
 export { RadioType as CheckboxType }
 export { RadioType }
 
+// @public (undocumented)
+export interface RangeOptionValue extends RangeState {
+    // (undocumented)
+    selectedField: string;
+}
+
+// @public (undocumented)
+export interface RangeState {
+    // (undocumented)
+    endDate: Date | null;
+    // (undocumented)
+    selecting: boolean;
+    // (undocumented)
+    startDate: Date | null;
+}
+
 // @public (undocumented)
 export type RegisteredToast = ToastRegisterParams;
 
@@ -582,6 +636,14 @@ export interface ShowNotificationReturn {
     close: () => void;
 }
 
+// @public (undocumented)
+export interface ShowState {
+    // (undocumented)
+    month: number;
+    // (undocumented)
+    year: number;
+}
+
 // Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
 // Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
 //
@@ -1524,6 +1586,16 @@ modelValue: string;
 background: TabsPanelBackgroundType;
 }>;
 
+// @public (undocumented)
+export interface StateStore {
+    // (undocumented)
+    dayState: DateState;
+    // (undocumented)
+    pickState: PickState;
+    // (undocumented)
+    rangeState: RangeState;
+}
+
 // @public
 export const Status: {
     readonly Info: "info";

From bcc0830fb055dbd5367c1d0cc0048cfa66ce3b96 Mon Sep 17 00:00:00 2001
From: Stepan <kvantoreps@gmail.com>
Date: Tue, 17 Jan 2023 09:06:09 +0300
Subject: [PATCH 13/13] WDS-78 change changeset description

---
 .changeset/dry-weeks-compare.md   | 4 ++--
 .changeset/neat-squids-pretend.md | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.changeset/dry-weeks-compare.md b/.changeset/dry-weeks-compare.md
index 998b2f71..b6ef9195 100644
--- a/.changeset/dry-weeks-compare.md
+++ b/.changeset/dry-weeks-compare.md
@@ -1,5 +1,5 @@
 ---
-'@soramitsu-ui/ui': patch
+'@soramitsu-ui/ui': minor
 ---
 
-**fix**(`SDatePicker`): add custom trigger support
+**feat**(`SDatePicker`): add custom trigger support
diff --git a/.changeset/neat-squids-pretend.md b/.changeset/neat-squids-pretend.md
index 399983f6..1d3b5ac2 100644
--- a/.changeset/neat-squids-pretend.md
+++ b/.changeset/neat-squids-pretend.md
@@ -1,5 +1,5 @@
 ---
-'@soramitsu-ui/ui': patch
+'@soramitsu-ui/ui': minor
 ---
 
-**fix**(`SDatePicker`): add support for custom shortcuts
+**feat**(`SDatePicker`): add support for custom shortcuts