fix(Date Picker): clear incomplete range selection (#1074)

Co-authored-by: Dabiel González Ramos <[email protected]>
Endava · Jun 7, 2024 · 2b2b329 · 2b2b329
1 parent 2d46b9a
commit 2b2b329
Show file tree

Hide file tree

Showing 7 changed files with 208 additions and 134 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/beeq/package.json b/packages/beeq/package.json
@@ -16,7 +16,7 @@
     "@floating-ui/core": "^1.6.2",
     "@floating-ui/dom": "^1.6.5",
     "@stencil/core": "^4.18.3",
-    "cally": "0.6.1"
+    "cally": "0.7.1"
   },
   "repository": {
     "type": "git",

diff --git a/packages/beeq/src/components.d.ts b/packages/beeq/src/components.d.ts
@@ -383,9 +383,9 @@ export namespace Components {
          */
         "months": number;
         /**
-          * The number of months to display per page when using next/previous buttons.
+          * Specifies how the next/previous buttons should navigate the calendar. - single: The buttons will navigate by a single month at a time. - months: The buttons will navigate by the number of months displayed per view.
          */
-        "monthsPerView": number;
+        "monthsPerView": 'single' | 'months';
         /**
           * The Date picker input name.
          */
@@ -422,6 +422,10 @@ export namespace Components {
           * Defines the strategy to position the Date picker panel
          */
         "strategy"?: 'fixed' | 'absolute';
+        /**
+          * The date that is tentatively selected e.g. the start of a range selection
+         */
+        "tentative"?: string;
         /**
           * It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection
          */
@@ -2622,9 +2626,9 @@ declare namespace LocalJSX {
          */
         "months"?: number;
         /**
-          * The number of months to display per page when using next/previous buttons.
+          * Specifies how the next/previous buttons should navigate the calendar. - single: The buttons will navigate by a single month at a time. - months: The buttons will navigate by the number of months displayed per view.
          */
-        "monthsPerView"?: number;
+        "monthsPerView"?: 'single' | 'months';
         /**
           * The Date picker input name.
          */
@@ -2677,6 +2681,10 @@ declare namespace LocalJSX {
           * Defines the strategy to position the Date picker panel
          */
         "strategy"?: 'fixed' | 'absolute';
+        /**
+          * The date that is tentatively selected e.g. the start of a range selection
+         */
+        "tentative"?: string;
         /**
           * It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection
          */

diff --git a/packages/beeq/src/components/date-picker/_storybook/bq-date-picker.stories.tsx b/packages/beeq/src/components/date-picker/_storybook/bq-date-picker.stories.tsx
@@ -27,7 +27,7 @@ const meta: Meta = {
     max: { control: 'text' },
     min: { control: 'text' },
     months: { control: 'number' },
-    'months-per-view': { control: 'number' },
+    'months-per-view': { control: 'select', options: ['single', 'months'] },
     name: { control: 'text' },
     open: { control: 'boolean' },
     'panel-height': { control: 'text' },
@@ -53,6 +53,7 @@ const meta: Meta = {
     'show-outside-days': { control: 'boolean' },
     skidding: { control: 'number' },
     strategy: { control: 'select', options: ['fixed', 'absolute'] },
+    tentative: { control: 'text' },
     type: { control: 'select', options: [...DATE_PICKER_TYPE] },
     'validation-status': { control: 'select', options: [...INPUT_VALIDATION] },
     value: { control: 'text' },
@@ -85,7 +86,7 @@ const meta: Meta = {
     max: undefined,
     min: undefined,
     months: 1,
-    'months-per-view': 1,
+    'months-per-view': 'single',
     name: 'bq-date-picker',
     open: false,
     'panel-height': 'auto',
@@ -95,6 +96,7 @@ const meta: Meta = {
     'show-outside-days': false,
     skidding: 0,
     strategy: 'absolute',
+    tentative: undefined,
     type: 'single',
     'validation-status': 'none',
     value: undefined,
@@ -177,6 +179,7 @@ const Template = (args: Args) => {
       show-outside-days=${args['show-outside-days']}
       skidding=${args.skidding}
       strategy=${args.strategy}
+      tentative=${args.tentative}
       type=${args.type}
       validation-status=${args['validation-status']}
       value=${ifDefined(args.value)}