@eml-payments/ui-kit 1.8.16 → 1.8.17

package/dist/src/components/DatePicker/DatePicker.js

@@ -82,6 +82,19 @@ const applyDeletionKey = (displayChars, slotPositions, template, isBackspace, st
 const formatDate = (date, format) => {
     return date ? dayjs(date).format(format) : '';
 };
+const isSameSingleDate = (a, b) => a === b || (a instanceof Date && b instanceof Date && a.getTime() === b.getTime());
+const isSameDateValue = (a, b) => {
+    if (a === b) {
+        return true;
+    }
+    if (a instanceof Date || b instanceof Date) {
+        return isSameSingleDate(a, b);
+    }
+    if (a && b) {
+        return isSameSingleDate(a.from, b.from) && isSameSingleDate(a.to, b.to);
+    }
+    return false;
+};
 const formatRangeDisplay = (dateRange, format) => {
     if (!(dateRange === null || dateRange === void 0 ? void 0 : dateRange.from)) {
         return '';
@@ -126,17 +139,20 @@ export const DatePicker = ({ mode = 'single', placeholder, dateFormat = 'DD/MM/Y
     const [prevDateFormat, setPrevDateFormat] = useState(dateFormat);
     const [prevRangeDateFormat, setPrevRangeDateFormat] = useState(effectiveRangeDateFormat);
     const [prevMode, setPrevMode] = useState(mode);
-    if (currentDate !== prevCurrentDate ||
-        dateFormat !== prevDateFormat ||
-        effectiveRangeDateFormat !== prevRangeDateFormat ||
-        mode !== prevMode) {
+    const formatOrModeChanged = dateFormat !== prevDateFormat || effectiveRangeDateFormat !== prevRangeDateFormat || mode !== prevMode;
+    if (!isSameDateValue(currentDate, prevCurrentDate) || formatOrModeChanged) {
         setPrevCurrentDate(currentDate);
         setPrevDateFormat(dateFormat);
         setPrevRangeDateFormat(effectiveRangeDateFormat);
         setPrevMode(mode);
-        setDate(currentDate);
-        setValue(computeDisplayValue(currentDate));
-        setDefaultError('');
+        // Only rewrite the display for a genuine external change. If the prop merely
+        // caught up with what the user just did (controlled round-trip), or never
+        // updates at all (uncontrolled parent), preserve the in-progress display.
+        if (formatOrModeChanged || !isSameDateValue(currentDate, date)) {
+            setDate(currentDate);
+            setValue(computeDisplayValue(currentDate));
+            setDefaultError('');
+        }
     }
     const onUpdateDate = (selected) => {
         setDate(selected);
@@ -161,7 +177,6 @@ export const DatePicker = ({ mode = 'single', placeholder, dateFormat = 'DD/MM/Y
         if (!isComplete) {
             setDate(undefined);
             setDefaultError('');
-            setPrevCurrentDate(undefined); // absorbs change → sync block won't fire
             onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(undefined); // notify parent the value is gone
             return;
         }
@@ -170,7 +185,6 @@ export const DatePicker = ({ mode = 'single', placeholder, dateFormat = 'DD/MM/Y
             setDate(undefined);
             setDefaultError(showErrorWhenComplete ? 'Invalid date format' : '');
             if (showErrorWhenComplete) {
-                setPrevCurrentDate(undefined);
                 onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(undefined);
             }
             return;
@@ -182,7 +196,6 @@ export const DatePicker = ({ mode = 'single', placeholder, dateFormat = 'DD/MM/Y
         }
         else {
             setDate(undefined);
-            setPrevCurrentDate(undefined);
             onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(undefined);
             setDefaultError('Date is out of range');
         }

package/dist/src/components/DatePicker/DatePicker.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof DatePicker>;
 export default meta;
 type Story = StoryObj<typeof DatePicker>;
 export declare const Default: Story;
+export declare const WithDefaultValue: Story;
 export declare const WithLabel: Story;
 export declare const WithError: Story;
 export declare const WithDateRange: Story;

package/dist/src/components/DatePicker/DatePicker.stories.js

@@ -87,6 +87,19 @@ export const Default = {
         },
     },
 };
+export const WithDefaultValue = {
+    args: {
+        label: 'Date of Birth',
+        currentDate: new Date(1990, 5, 15),
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Date picker pre-populated with a default date value.',
+            },
+        },
+    },
+};
 export const WithLabel = {
     args: {
         label: 'Select Date',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "1.8.16",
+	"version": "1.8.17",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",