@warp-ds/elements 2.10.0-next.13 → 2.10.0-next.14

package/dist/packages/datepicker/datepicker.test.js

@@ -1,6 +1,6 @@
-import { server, userEvent } from 'vitest/browser';
 import { html } from 'lit';
 import { expect, test, vi } from 'vitest';
+import { server, userEvent } from 'vitest/browser';
 import { render } from 'vitest-browser-lit';
 import '../button/button.js';
 import './datepicker.js';

package/dist/packages/datepicker/utils.d.ts

@@ -11,3 +11,6 @@
  * @throws {Error} if string is not a valid ISO-8601 date
  */
 export declare function fromISOToDate(isoString: string): Date | null;
+export declare function getDateInputType(userAgent?: string): 'date' | 'text';
+export declare function getDateInputPlaceholder(locale: string): string;
+export declare function getDateInputDisplayValue(value: string, locale: string): string;

package/dist/packages/datepicker/utils.js

@@ -26,3 +26,36 @@ export function fromISOToDate(isoString) {
     }
     return new Date(timestamp);
 }
+export function getDateInputType(userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : '') {
+    const isIOS = /iP(hone|od|ad)/.test(userAgent);
+    const isSafari = /Safari/.test(userAgent) && !/(Chrome|Chromium|CriOS|FxiOS|Edg|OPR|Android)/.test(userAgent);
+    return isIOS || isSafari ? 'text' : 'date';
+}
+export function getDateInputPlaceholder(locale) {
+    const placeholderLocale = locale === 'en' ? 'en-GB' : locale;
+    const parts = new Intl.DateTimeFormat(placeholderLocale, {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        timeZone: 'UTC',
+    }).formatToParts(new Date(Date.UTC(2006, 0, 2)));
+    return parts
+        .map((part) => {
+        if (part.type === 'day')
+            return 'dd';
+        if (part.type === 'month')
+            return 'mm';
+        if (part.type === 'year')
+            return 'yyyy';
+        return part.value;
+    })
+        .join('');
+}
+export function getDateInputDisplayValue(value, locale) {
+    const match = dateOnlyRe.exec(value);
+    if (!match) {
+        return value;
+    }
+    const [year, month, day] = value.split('-');
+    return getDateInputPlaceholder(locale).replace('yyyy', year).replace('mm', month).replace('dd', day);
+}

package/dist/packages/datepicker/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/datepicker/utils.test.js

@@ -0,0 +1,29 @@
+import { describe, expect, test } from 'vitest';
+import { getDateInputDisplayValue, getDateInputPlaceholder, getDateInputType } from './utils.js';
+describe('getDateInputType', () => {
+    test('uses text input for Safari to avoid Safari showing a concrete empty-state date', () => {
+        expect(getDateInputType('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Safari/605.1.15')).toBe('text');
+    });
+    test('uses text input for iOS browsers', () => {
+        expect(getDateInputType('Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/120.0.0.0 Mobile/15E148 Safari/604.1')).toBe('text');
+    });
+    test('keeps date input for Chrome on desktop', () => {
+        expect(getDateInputType('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36')).toBe('date');
+    });
+});
+describe('getDateInputPlaceholder', () => {
+    test('returns a locale-shaped date format hint', () => {
+        expect(getDateInputPlaceholder('en')).toBe('dd/mm/yyyy');
+        expect(getDateInputPlaceholder('en-GB')).toBe('dd/mm/yyyy');
+        expect(getDateInputPlaceholder('nb')).toBe('dd.mm.yyyy');
+    });
+});
+describe('getDateInputDisplayValue', () => {
+    test('formats ISO dates using the locale-shaped date format hint', () => {
+        expect(getDateInputDisplayValue('2026-03-25', 'en')).toBe('25/03/2026');
+        expect(getDateInputDisplayValue('2026-03-25', 'nb')).toBe('25.03.2026');
+    });
+    test('keeps non-ISO values unchanged', () => {
+        expect(getDateInputDisplayValue('25/03/2026', 'en')).toBe('25/03/2026');
+    });
+});

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.10.0-next.12",
+  "version": "2.10.0-next.13",
   "description-markup": "markdown",
   "contributions": {
     "html": {