@descope/web-components-ui 1.92.0 → 1.94.0

package/src/components/descope-date-field/DateFieldClass.js

@@ -11,9 +11,7 @@ import {
   newDate,
   isValidTimestamp,
   formatTimestamp,
-  isSupportedKey,
   isNumber,
-  getKeyMap,
   getCurrentTime,
   overrideConstructedStylesheet,
 } from './helpers';
@@ -70,12 +68,10 @@ class RawDateFieldClass extends BaseInputClass {
     }
   }
 
-  #yearDateCounter = new DateCounter(counterConfig.YEAR, this.onDateCounterChange.bind(this));
-
   dateCounters = [
     new DateCounter(counterConfig.MONTH, this.onDateCounterChange.bind(this)),
     new DateCounter(counterConfig.DAY, this.onDateCounterChange.bind(this)),
-    this.#yearDateCounter,
+    new DateCounter(counterConfig.YEAR, this.onDateCounterChange.bind(this)),
   ];
 
   static get observedAttributes() {
@@ -190,6 +186,9 @@ class RawDateFieldClass extends BaseInputClass {
   }
 
   get value() {
+    if (this.isInvalidDate()) {
+      return '';
+    }
     return this.timestamp;
   }
 
@@ -248,8 +247,8 @@ class RawDateFieldClass extends BaseInputClass {
     this.inputElement.addEventListener('focus', this.onFocus.bind(this));
     this.inputElement.addEventListener('blur', this.onBlur.bind(this));
     this.inputElement.addEventListener('click', this.handleMouseCaretPositionChange.bind(this));
-    this.inputElement.addEventListener('keydown', this.handleNavKeys.bind(this));
-    this.inputElement.addEventListener('keydown', this.handleDigitKeys.bind(this));
+    this.inputElement.addEventListener('keydown', this.handleArrowKeys.bind(this));
+    this.inputElement.addEventListener('beforeinput', this.handleInput.bind(this));
 
     forwardAttrs(this, this.inputElement, {
       includeAttrs: [
@@ -275,6 +274,17 @@ class RawDateFieldClass extends BaseInputClass {
     });
   }
 
+  handleInput(e) {
+    e.preventDefault();
+
+    if (e.data && isNumber(e.data)) {
+      this.parseDigits(e.data);
+      this.updateCountersDisplay();
+    } else if (e.inputType) {
+      this.handleNavKeys(e);
+    }
+  }
+
   initPopover() {
     this.baseElement.trigger = ['click'];
     this.baseElement.withBackdrop = true;
@@ -443,6 +453,8 @@ class RawDateFieldClass extends BaseInputClass {
 
     if (!this.inputElement.value) {
       this.inputElement.value = this.format;
+      // If no value, on focus select the first part of the format placeholder
+      this.selectedCounterIdx = 0;
       this.setInputSelectionRange();
     }
   }
@@ -470,18 +482,14 @@ class RawDateFieldClass extends BaseInputClass {
     this.setAttribute('pattern', formats[format].pattern);
   }
 
-  handleDigitKeys(e) {
-    if (isNumber(e.key)) {
-      e.preventDefault();
-
-      this.activeCounter.add(e.key);
-
-      if (this.activeCounter.isFull) {
-        this.selectNextCounter();
-      }
+  parseDigits(value) {
+    this.activeCounter.add(value);
 
-      this.setInputSelectionRange();
+    if (this.activeCounter.isFull) {
+      this.selectNextCounter();
     }
+
+    this.setInputSelectionRange();
   }
 
   getCounterIdx(caretPos) {
@@ -553,52 +561,47 @@ class RawDateFieldClass extends BaseInputClass {
     });
   }
 
+  handleArrowKeys(e) {
+    if (e.key === 'ArrowUp') {
+      this.activeCounter.inc();
+    } else if (e.key === 'ArrowDown') {
+      this.activeCounter.dec();
+    } else if (e.key === 'ArrowRight') {
+      this.selectNextCounter();
+    } else if (e.key === 'ArrowLeft') {
+      this.selectPrevCounter();
+    }
+
+    setTimeout(() => {
+      this.setInputSelectionRange();
+    });
+  }
+
   handleNavKeys(e) {
     if (this.isReadOnly) {
       return;
     }
 
-    const { key, shiftKey, metaKey } = e;
-    const keys = getKeyMap(key, shiftKey, metaKey);
-
     if (this.opened) {
       this.closePopover();
     }
 
-    e.preventDefault();
-
-    if (isSupportedKey(key)) {
-      const counter = this.activeCounter;
-
-      if (!counter) return;
+    if (!this.activeCounter) return;
 
-      const counterData = Object.values(counterConfig).find((config) => config.id === counter.id);
-      const { count, shiftCount } = counterData;
-
-      if (keys.backspace) this.handleBackspace();
-      else if (keys.arrowUp) counter.inc();
-      else if (keys.arrowDown) counter.dec();
-      else if (keys.shiftArrowUp) counter.inc(count);
-      else if (keys.shiftArrowDown) counter.dec(count);
-      else if (keys.pageUp) counter.inc(count);
-      else if (keys.pageDown) counter.dec(count);
-      else if (keys.shiftPageUp) counter.inc(shiftCount);
-      else if (keys.shiftPageDown) counter.dec(shiftCount);
-      else if (keys.arrowRight) this.selectNextCounter();
-      else if (keys.arrowLeft) this.selectPrevCounter();
-
-      this.setInputSelectionRange();
+    if (e.inputType === 'deleteContentBackward') {
+      this.handleBackspace();
     }
+
+    this.setInputSelectionRange();
   }
 
   handleBackspace() {
-    const counter = this.activeCounter;
-
-    if (counter.isEmpty) {
+    if (this.activeCounter.isEmpty) {
+      this.activeCounter.clear();
       this.selectPrevCounter();
       this.setInputSelectionRange();
     } else {
-      counter.del();
+      this.activeCounter.del();
     }
   }
 
@@ -625,8 +628,9 @@ class RawDateFieldClass extends BaseInputClass {
     if (!val) return;
     const [min, max] = val.split?.('-');
     if (min && max) {
-      this.#yearDateCounter.setMin(min);
-      this.#yearDateCounter.setMax(max);
+      const counter = this.getCounterById('year');
+      counter.setMin(min);
+      counter.setMax(max);
     }
   }
 
@@ -665,17 +669,45 @@ class RawDateFieldClass extends BaseInputClass {
     }
   }
 
+  // we want to validate the date supplied actually exists. For example: Feb 31 is not an actual date,
+  // but in JS when create a `new Date('1999-02-31') we get March 2nd 1999.
+  // To prevent this error from being submitted, we evaluate the
+  // date parts against their generated Date value.
+  isInvalidDate() {
+    return Object.entries(this.getDateVals()).some(
+      ([key, val]) => !val || this.getCounterById(key).numberValue !== val
+    );
+  }
+
   getValidity() {
     if (this.isRequired && this.isCountersEmpty) {
       return { valueMissing: true };
     }
 
-    if (this.isCountersOutOfRange) {
+    if (this.isCountersOutOfRange || this.isInvalidDate()) {
       return { patternMismatch: true };
     }
 
     return {};
   }
+
+  getDateVals() {
+    const ret = {
+      day: '',
+      month: '',
+      year: '',
+    };
+
+    try {
+      const date = newDate(this.timestamp);
+
+      ret.month = date.getMonth() + 1;
+      ret.day = date.getDate();
+      ret.year = date.getFullYear();
+    } catch (e) {}
+
+    return ret;
+  }
 }
 
 const textVars = TextFieldClass.cssVarList;

package/src/components/descope-date-field/consts.js

@@ -8,18 +8,6 @@ export const YEARS_RANGE = 100;
 
 export const DIVIDER = '/';
 
-export const COUNTER_SUPPORTED_KEYS = [
-  'Backspace',
-  'ArrowLeft',
-  'ArrowRight',
-  'ArrowDown',
-  'ArrowUp',
-  'PageUp',
-  'PageDown',
-  'Meta',
-  'Enter',
-];
-
 export const months = [
   'January',
   'February',

package/src/components/descope-date-field/helpers.js

@@ -1,8 +1,6 @@
-import { COUNTER_SUPPORTED_KEYS } from './consts';
-
 export const isValidTimestamp = (val) => !Number.isNaN(Number(val));
 
-export const isNumber = (val) => !Number.isNaN(Number(val));
+export const isNumber = (val) => !!String(val || '').trim() && !Number.isNaN(Number(val));
 
 export const getTimestampParts = (timestamp) => {
   const date = newDate(timestamp);
@@ -35,28 +33,6 @@ export const newDate = (date) => {
   return new Date();
 };
 
-export const isSupportedKey = (key) => COUNTER_SUPPORTED_KEYS.includes(key);
-
-export const getKeyMap = (key, shiftKey, metaKey) => {
-  return {
-    refresh: metaKey && key.toLowerCase() === 'r',
-    tab: key === 'Tab',
-    shiftTab: shiftKey && key === 'Tab',
-    backspace: key === 'Backspace',
-    arrowUp: !shiftKey && key === 'ArrowUp',
-    arrowDown: !shiftKey && key === 'ArrowDown',
-    arrowLeft: !shiftKey && key === 'ArrowLeft',
-    arrowRight: !shiftKey && key === 'ArrowRight',
-    pageUp: !shiftKey && key === 'PageUp',
-    pageDown: !shiftKey && key === 'PageDown',
-    shiftArrowUp: shiftKey && key === 'ArrowUp',
-    shiftArrowDown: shiftKey && key === 'ArrowDown',
-    shiftPageUp: shiftKey && key === 'PageUp',
-    shiftPageDown: shiftKey && key === 'PageDown',
-    enter: key === 'Enter',
-  };
-};
-
 export const getCurrentTime = () => newDate().getTime();
 export const getFullYear = (timestamp) => newDate(timestamp).getFullYear().toString();
 export const getMonth = (timestamp) => (newDate(timestamp).getMonth() + 1).toString();