@descope/web-components-ui 1.104.0 → 1.106.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.104.0",
+  "version": "1.106.0",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -82,14 +82,14 @@
     "@descope-ui/descope-icon": "0.0.14",
     "@descope-ui/descope-text": "0.0.17",
     "@descope-ui/descope-avatar": "0.0.17",
-    "@descope-ui/descope-combo-box": "0.1.6",
-    "@descope-ui/descope-autocomplete-field": "0.0.19",
-    "@descope-ui/descope-address-field": "0.0.18",
-    "@descope-ui/descope-timer": "0.0.13",
-    "@descope-ui/descope-timer-button": "0.0.15",
-    "@descope-ui/descope-password-strength": "0.0.10",
-    "@descope-ui/descope-collapsible-container": "0.0.14",
-    "@descope-ui/descope-recovery-codes": "0.0.3"
+    "@descope-ui/descope-combo-box": "0.1.7",
+    "@descope-ui/descope-autocomplete-field": "0.0.20",
+    "@descope-ui/descope-address-field": "0.0.19",
+    "@descope-ui/descope-timer": "0.0.14",
+    "@descope-ui/descope-timer-button": "0.0.16",
+    "@descope-ui/descope-password-strength": "0.0.11",
+    "@descope-ui/descope-collapsible-container": "0.0.15",
+    "@descope-ui/descope-recovery-codes": "0.0.4"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

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

@@ -17,10 +17,18 @@ import {
 } from './helpers';
 import { formats } from './formats';
 import { calendarIcon } from './icons';
-import { counterConfig, DEFAULT_FORMAT, DIVIDER, NATIVE_FORMAT, valRange } from './consts';
+import {
+  counterConfig,
+  DEFAULT_FORMAT,
+  DIVIDER,
+  MOBILE_DEVICE_INTERACTION_TIMEOUT_MS,
+  NATIVE_FORMAT,
+  valRange,
+} from './consts';
 import { DateCounter } from './DateCounterClass';
 import { TextFieldClass } from '../descope-text-field/TextFieldClass';
 import { injectStyle } from '@descope-ui/common/components-helpers';
+import { parseDateString } from './helpers';
 
 export const componentName = getComponentName('date-field');
 
@@ -40,8 +48,6 @@ class RawDateFieldClass extends BaseInputClass {
 
   selectedCounterIdx = 0;
 
-  #focused = false;
-
   updateCountersDisplay() {
     this.inputElement.value = this.countersValue;
   }
@@ -215,6 +221,11 @@ class RawDateFieldClass extends BaseInputClass {
     return this.getAttribute('disable-calendar') === 'true';
   }
 
+  get isSelectAll() {
+    const inputEle = this.inputElement.baseElement.inputElement;
+    return inputEle.value.length === inputEle.selectionStart + inputEle.selectionEnd;
+  }
+
   reportValidity() {
     this.inputElement.reportValidity();
   }
@@ -249,24 +260,10 @@ 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.handleArrowKeys.bind(this));
+    this.inputElement.addEventListener('keydown', this.handleKeyboard.bind(this));
     this.inputElement.addEventListener('beforeinput', this.handleInput.bind(this));
-
-    // We want to handle touch events the same way we handle `click` events.
-    // Since we can't seem to block touch events (`touch-action: none` or preventing default on `touchstart`
-    // or `touchend`, we listen to `pointerdown` and in case it's of type `touch` we execute
-    // the component's logic for range selection.
-    this.inputElement.addEventListener('pointerdown', (e) => {
-      if (e.pointerType === 'touch') {
-        e.preventDefault();
-        if (!this.#focused) {
-          this.inputElement.focus();
-        }
-        setTimeout(() => {
-          this.handleMouseCaretPositionChange(e);
-        }, 250);
-      }
-    });
+    this.inputElement.addEventListener('pointerdown', this.onPointerDown.bind(this));
+    this.inputElement.addEventListener('paste', this.onPaste.bind(this));
 
     forwardAttrs(this, this.inputElement, {
       includeAttrs: [
@@ -295,6 +292,8 @@ class RawDateFieldClass extends BaseInputClass {
   handleInput(e) {
     e.preventDefault();
 
+    this.handleSelectAll();
+
     if (e.data && isNumber(e.data)) {
       this.parseDigits(e.data);
       this.updateCountersDisplay();
@@ -315,6 +314,12 @@ class RawDateFieldClass extends BaseInputClass {
     });
   }
 
+  handleSelectAll() {
+    if (this.isSelectAll) {
+      this.selectFirstCounter();
+    }
+  }
+
   #popoverPosStylesheet;
 
   #popoverRenderer(root) {
@@ -464,16 +469,19 @@ class RawDateFieldClass extends BaseInputClass {
     });
   }
 
+  // In mobile devices, there are cases were `pointerdown` is triggered
+  // instead of `click`.
+  onPointerDown(e) {
+    setTimeout(() => this.handleMouseCaretPositionChange(e), MOBILE_DEVICE_INTERACTION_TIMEOUT_MS);
+  }
+
   onFocus() {
-    if (this.isReadOnly || this.#focused) {
+    if (this.isReadOnly) {
       return;
     }
 
-    // We use this flag to support mobile logic, which calls `focus` on touch event, we want to make sure
-    // focus executes it logic only when needed.
-    this.#focused = true;
-
-    this.resetDisplay();
+    // We need to wait for focus to end before we set selection
+    setTimeout(() => this.resetDisplay());
   }
 
   resetDisplay() {
@@ -481,18 +489,13 @@ class RawDateFieldClass extends BaseInputClass {
       this.inputElement.value = this.format;
     }
 
-    // On focus select the first part of the format placeholder
-    this.selectedCounterIdx = 0;
-
-    setTimeout(() => {
-      // set selection on first counter
-      this.inputElement.setSelectionRange(0, this.sortedCounters[0].length);
-    });
+    // On focus select the first counter
+    this.selectFirstCounter();
+    // set selection on first counter
+    this.inputElement.setSelectionRange(0, this.sortedCounters[0].length);
   }
 
   onBlur() {
-    this.#focused = false;
-
     if (this.opened) {
       return;
     }
@@ -522,6 +525,8 @@ class RawDateFieldClass extends BaseInputClass {
       this.selectNextCounter();
     }
 
+    // We wait for the digit to be parsed, and only then set the selection.
+    // Failing to do so results in unexpected "jump" of the screen in mobile devices.
     this.setInputSelectionRange();
   }
 
@@ -537,10 +542,18 @@ class RawDateFieldClass extends BaseInputClass {
 
   setSelectedCounterByCaretPosition(e) {
     this.selectedCounterIdx = this.getCounterIdx(
-      e.target.selectionStart || this.inputElement.selectionStart
+      // if triggered by touch event, target might not include `selectionStart`
+      // in that case we fall back to the inputElement's `selectionStart` value.
+      // Therefore, it is recommended to run this function with setTimeout,
+      // at least for mobile events.
+      e.target?.selectionStart || this.inputElement.selectionStart
     );
   }
 
+  selectFirstCounter() {
+    this.selectedCounterIdx = 0;
+  }
+
   selectNextCounter() {
     if (this.selectedCounterIdx < this.dateCounters.length) {
       this.selectedCounterIdx = Math.min(this.selectedCounterIdx + 1, 2);
@@ -563,14 +576,18 @@ class RawDateFieldClass extends BaseInputClass {
       return;
     }
 
-    const caretStart = this.sortedCounters
-      .slice(0, this.selectedCounterIdx)
-      .reduce((acc, counter) => acc + counter.length, this.selectedCounterIdx);
+    // We wait for before setting the selection, otherwise there's an
+    // unexpected "jump" of the screen in mobile devices.
+    setTimeout(() => {
+      const caretStart = this.sortedCounters
+        .slice(0, this.selectedCounterIdx)
+        .reduce((acc, counter) => acc + counter.length, this.selectedCounterIdx);
 
-    this.inputElement.setSelectionRange(
-      caretStart,
-      caretStart + this.sortedCounters[this.selectedCounterIdx].length
-    );
+      this.inputElement.setSelectionRange(
+        caretStart,
+        caretStart + this.sortedCounters[this.selectedCounterIdx].length
+      );
+    });
   }
 
   resetDateCounters() {
@@ -596,7 +613,17 @@ class RawDateFieldClass extends BaseInputClass {
     });
   }
 
-  handleArrowKeys(e) {
+  handleKeyboard(e) {
+    if (e.metaKey || e.ctrlKey) {
+      if (e.key.toLowerCase() === 'x') {
+        this.onCut(e);
+      }
+
+      return;
+    }
+
+    this.handleSelectAll();
+
     if (e.key === 'ArrowUp') {
       this.activeCounter.inc();
     } else if (e.key === 'ArrowDown') {
@@ -607,9 +634,7 @@ class RawDateFieldClass extends BaseInputClass {
       this.selectPrevCounter();
     }
 
-    setTimeout(() => {
-      this.setInputSelectionRange();
-    });
+    this.setInputSelectionRange();
   }
 
   handleNavKeys(e) {
@@ -631,27 +656,37 @@ class RawDateFieldClass extends BaseInputClass {
   }
 
   handleBackspace() {
-    if (this.activeCounter.isEmpty) {
-      this.activeCounter.clear();
+    if (this.isSelectAll) {
+      this.resetToInitialState();
+      return;
+    }
+
+    const counter = this.activeCounter;
+
+    if (counter.isEmpty) {
       this.selectPrevCounter();
       this.setInputSelectionRange();
     } else {
-      this.activeCounter.del();
+      counter.set('');
     }
+
+    // To support keyboards like SwiftKey, we need to re-render the counters display and selection,
+    // otherwise we get an unexpected behavior, where the format is deleted.
+    setTimeout(() => {
+      this.updateCountersDisplay();
+      this.setInputSelectionRange();
+    });
   }
 
   handleMouseCaretPositionChange(e) {
     if (this.opened) {
       return;
     }
+
     e.preventDefault();
-    this.setSelectedCounterByCaretPosition(e);
 
-    // On keydown - in desktop mode - selection is sometimes not set, and instead there is a cursor.
-    // We need to wait until we can set selection range.
-    setTimeout(() => {
-      this.setInputSelectionRange();
-    });
+    this.setSelectedCounterByCaretPosition(e);
+    this.setInputSelectionRange();
   }
 
   onInitialValueChange(val) {
@@ -743,6 +778,62 @@ class RawDateFieldClass extends BaseInputClass {
 
     return ret;
   }
+
+  resetToInitialState() {
+    this.resetDateCounters();
+    this.selectFirstCounter();
+    this.resetDisplay();
+  }
+
+  onCut(e) {
+    e.preventDefault();
+
+    if (this.isSelectAll) {
+      this.#copyToClipboard(this.countersValue);
+      this.resetToInitialState();
+    } else {
+      this.#copyToClipboard(this.activeCounter.stringValue);
+      this.activeCounter.set('');
+    }
+
+    this.setInputSelectionRange();
+  }
+
+  #copyToClipboard(value) {
+    try {
+      navigator.clipboard.writeText(value);
+    } catch (err) {
+      console.error('Failed to copy date value:', err);
+    }
+  }
+
+  onPaste(e) {
+    e.preventDefault();
+
+    const clipboardData = e.clipboardData || window.clipboardData;
+    const pastedData = clipboardData.getData('Text');
+
+    // try paste entire date if valid
+    const validDate = parseDateString(pastedData, this.format);
+
+    if (validDate) {
+      this.value = validDate.getTime();
+      this.onDateCounterChange();
+
+      // select all
+      setTimeout(() => this.inputElement.setSelectionRange(0, this.inputElement.value.length));
+    } else {
+      const value = Number(pastedData);
+
+      // try paste in counter if possible
+      if (value && this.activeCounter.min <= value && this.activeCounter.max >= value) {
+        // use String to get rid of any zero padding
+        this.activeCounter.set(String(value));
+
+        setTimeout(() => this.setInputSelectionRange());
+      }
+    }
+  }
 }
 
 const textVars = TextFieldClass.cssVarList;

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

@@ -46,3 +46,5 @@ export const valRange = {
 export const BUTTON_LABEL_DONE = 'Done';
 export const BUTTON_LABEL_CANCEL = 'Cancel';
 export const CALENDAR_LABEL_TODAY = 'Today';
+
+export const MOBILE_DEVICE_INTERACTION_TIMEOUT_MS = 150;

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

@@ -1,3 +1,5 @@
+import { formats } from './formats';
+
 export const isValidTimestamp = (val) => !Number.isNaN(Number(val));
 
 export const isNumber = (val) => !!String(val || '').trim() && !Number.isNaN(Number(val));
@@ -47,3 +49,9 @@ export const overrideConstructedStylesheet = (ele) => {
   cs.insertRule(':host{display:block!important;}');
   ele?.shadowRoot?.adoptedStyleSheets?.push(cs);
 };
+
+export const parseDateString = (val, format) => {
+  const trimmed = val.trim?.();
+  if (!trimmed) return null;
+  return formats[format].getDate(trimmed);
+};