@capillarytech/blaze-ui 5.2.2 → 5.2.4

package/CapDateTimePicker/README.md

@@ -0,0 +1,136 @@
+# CapDateTimePicker
+
+A wrapper around Ant Design's DatePicker with `showTime` support, timezone-aware date parsing, and a consistent API for datetime selection in Capillary applications.
+
+## Migration from Ant Design v3 to v6
+
+### Breaking Changes
+
+#### 1. API Changes
+
+| v3 API | v6 API | Status | Migration Guide |
+|--------|--------|--------|-----------------|
+| `dateRender` | `cellRender` | Deprecated | Replace `dateRender` with `cellRender`. Backward compatibility maintained. |
+| `dropdownClassName` | `popupClassName` | Deprecated | Replace `dropdownClassName` with `popupClassName`. Backward compatibility maintained. |
+| `dropdownStyle` | `popupStyle` | Deprecated | Replace `dropdownStyle` with `popupStyle`. Backward compatibility maintained. |
+| `getCalendarContainer` | `getPopupContainer` | Deprecated | Replace `getCalendarContainer` with `getPopupContainer`. Backward compatibility maintained. |
+| `open` | `popupOpen` | Deprecated | Replace `open` with `popupOpen`. Backward compatibility maintained. |
+| `onOpenChange` | `onPopupOpenChange` | Deprecated | Replace `onOpenChange` with `onPopupOpenChange`. Backward compatibility maintained. |
+| `showToday` | N/A | Deprecated | This prop is deprecated. Today button behavior is now handled internally by Ant Design. Backward compatibility maintained but discouraged. |
+| `renderExtraFooter` | Custom Panel | Deprecated | This prop is discouraged. Consider using custom panel components instead. Backward compatibility maintained but discouraged. |
+
+#### 2. Date Library Migration
+
+The component continues to support both Moment.js and Day.js objects for backward compatibility:
+
+- **Props accepting dates**: `value` now accepts `Dayjs | Moment | string | null`
+- **Callbacks returning dates**: `onChange` returns the same type as the input (`Dayjs` if `Dayjs` was passed, `Moment` if `Moment` was passed)
+
+**Migration Path for Consumers:**
+```javascript
+// Before (moment) - still works
+import moment from 'moment-timezone';
+<CapDateTimePicker
+  value={moment('2024-01-15 10:30')}
+  onChange={(momentObj) => console.log(momentObj.format())}
+/>
+
+// After (dayjs) - preferred
+import dayjs from '@dayjs';
+<CapDateTimePicker
+  value={dayjs('2024-01-15 10:30')}
+  onChange={(dayjsObj) => console.log(dayjsObj.format())}
+/>
+```
+
+### Backward Compatibility
+
+All deprecated props still work but log a warning in development:
+
+- **`dateRender`**: Still works but mapped to `cellRender` internally. Use `cellRender` instead.
+- **`dropdownClassName`**: Still works. Use `popupClassName` instead.
+- **`dropdownStyle`**: Still works. Use `popupStyle` instead.
+- **`getCalendarContainer`**: Still works. Use `getPopupContainer` instead.
+- **`open`**: Still works. Use `popupOpen` instead.
+- **`onOpenChange`**: Still works. Use `onPopupOpenChange` instead.
+- **`showToday`**: Still works but is deprecated.
+- **`renderExtraFooter`**: Still works but is discouraged.
+
+### Style Changes
+
+The SCSS file (`styles.scss`) targets v3 class names (`.ant-calendar-*`) and is preserved as-is in this migration pass. Full SCSS migration to v6 class names (`.ant-picker-*`) will be done in a subsequent pass.
+
+**Theme config**: `DatePicker.cellHoverBg` added to `getCapThemeConfig.ts` to control date cell hover background color.
+
+### Code Improvements
+
+1. **Removed PropTypes**: Replaced with TypeScript interfaces in `types.ts`
+2. **Removed defaultProps**: Default values moved to function argument destructuring
+3. **Using deprecation warning utility**: `logDeprecationWarning` for consistent warnings
+4. **Type safety**: Full TypeScript support with proper Dayjs/Moment union types
+5. **Backward compatibility**: All deprecated props mapped using nullish coalescing (`??`)
+
+### What Stayed the Same
+
+- `injectIntl` HOC pattern for i18n (no consumer-facing change)
+- Timezone-aware date parsing logic
+- Internal open/close state management for OK button behavior
+- `showTime` config with timezone-aware `defaultValue`
+- Calendar icon suffix
+- `okText` from i18n messages
+
+### What Changed
+
+- **Updated**: Import from `antd-v5` (v6 compatible)
+- **Removed**: `import 'antd/lib/date-picker/style/css'`
+- **Removed**: PropTypes dependency
+- **Removed**: `defaultProps` assignment
+- **Updated**: Multiple deprecated props migrated to v6 API (with backward compatibility)
+- **Added**: `cellRender` support (v6 replacement for `dateRender`)
+- **Added**: `popupClassName`, `popupStyle`, `getPopupContainer`, `popupOpen`, `onPopupOpenChange`
+
+## Usage
+
+```tsx
+import CapDateTimePicker from '@capillarytech/blaze-ui/components/CapDateTimePicker';
+import dayjs from '@dayjs';
+
+function MyComponent() {
+  const [date, setDate] = useState(null);
+
+  return (
+    <CapDateTimePicker
+      value={date}
+      onChange={(newDate) => setDate(newDate)}
+      timezone="Asia/Kolkata"
+      showTime={{ format: 'HH:mm' }}
+      format="DD-MM-YYYY | HH:mm"
+      popupClassName="my-custom-popup"
+    />
+  );
+}
+```
+
+## Props
+
+See `types.ts` for complete prop definitions. Key props:
+
+- `value`: `Dayjs | Moment | string | null`
+- `onChange`: `(value: Dayjs | Moment | null, dateString: string) => void`
+- `timezone`: Timezone string (default: `'Asia/Kolkata'`)
+- `showTime`: `boolean | { format?: string }` (default: `{ format: 'HH:mm' }`)
+- `format`: Date format string (default: `'DD-MM-YYYY | HH:mm'`)
+- `cellRender`: Custom cell renderer (v6 API)
+- `popupClassName`: Custom class for popup (v6 API)
+- `popupStyle`: Custom style for popup (v6 API)
+- `getPopupContainer`: Container for popup (v6 API)
+- `popupOpen`: Whether popup is open (v6 API)
+- `onPopupOpenChange`: Callback when popup open state changes (v6 API)
+- `dateRender`: Deprecated — use `cellRender` instead
+- `dropdownClassName`: Deprecated — use `popupClassName` instead
+- `dropdownStyle`: Deprecated — use `popupStyle` instead
+- `getCalendarContainer`: Deprecated — use `getPopupContainer` instead
+- `open`: Deprecated — use `popupOpen` instead
+- `onOpenChange`: Deprecated — use `onPopupOpenChange` instead
+- `showToday`: Deprecated — handled internally by Ant Design
+- `renderExtraFooter`: Deprecated — consider custom panel components

package/CapDateTimePicker/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ *
+ * CapDateTimePicker
+ *
+ */
+import React from 'react';
+import type { InternalProps } from './types';
+declare const _default: React.FC<import("react-intl").WithIntlProps<InternalProps>> & {
+    WrappedComponent: React.ComponentType<InternalProps>;
+};
+export default _default;
+export type { CapDateTimePickerProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/CapDateTimePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapDateTimePicker/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,KAAoC,MAAM,OAAO,CAAC;AAiBzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;;;AAkL7C,wBAA6C;AAC7C,YAAY,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC"}

package/CapDateTimePicker/index.js

@@ -2973,6 +2973,24 @@ var _default = exports["default"] = SvgCircleDollar;
 
 /***/ }),
 
+/***/ 19224:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+exports.__esModule = true;
+exports["default"] = logDeprecationWarning;
+var _isNil = _interopRequireDefault(__webpack_require__(69843));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function logDeprecationWarning(componentName, deprecatedPropName, deprecatedPropValue, replacementPropName) {
+  // @ts-ignore - process.env is provided by webpack/build tools
+  if (false) // removed by dead control flow
+{}
+}
+
+/***/ }),
+
 /***/ 19561:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
@@ -3756,7 +3774,7 @@ var _default = exports["default"] = SvgFile;
 
 
 exports.__esModule = true;
-exports.TIME_UNITS = exports.FORMAT_TOKENS = void 0;
+exports.TIME_UNITS = exports.FORMAT_TOKENS = exports.DEFAULT_TIMEZONE = void 0;
 exports.dayjsToMoment = dayjsToMoment;
 exports["default"] = void 0;
 exports.hasMomentTimezoneSupport = hasMomentTimezoneSupport;
@@ -3764,6 +3782,7 @@ exports.isDayjsObject = isDayjsObject;
 exports.isMomentObject = isMomentObject;
 exports.momentToDayjs = momentToDayjs;
 exports.normalizeDateValue = normalizeDateValue;
+exports.toDayjsInTimezone = toDayjsInTimezone;
 var _dayjs = _interopRequireDefault(__webpack_require__(87695));
 var _advancedFormat = _interopRequireDefault(__webpack_require__(96833));
 var _customParseFormat = _interopRequireDefault(__webpack_require__(2825));
@@ -3875,7 +3894,23 @@ if (!tzIsCallable) {
       if (_dayjs.default.isDayjs(date)) {
         return date.tz(tzName);
       }
-      return (0, _dayjs.default)(date).tz(tzName);
+      // For strings/Dates: interpret the date/time values as being IN the target timezone
+      // (matching moment.tz(string, tz) semantics). dayjs(date).tz(tz) is wrong because
+      // dayjs(date) anchors to the system local timezone, so .tz() converts FROM local TO tz.
+      // Instead: parse as UTC to get raw date/time values, compute the target timezone's offset,
+      // then adjust the UTC timestamp so .tz() produces the intended local time.
+      try {
+        // Validate timezone is a real IANA timezone before applying the offset correction
+        Intl.DateTimeFormat(undefined, {
+          timeZone: tzName
+        });
+      } catch (_unused) {
+        // Invalid timezone — fall back to local time
+        return (0, _dayjs.default)(date);
+      }
+      const asUtc = _dayjs.default.utc(date);
+      const tzOffset = asUtc.tz(tzName).utcOffset(); // target tz offset in minutes
+      return _dayjs.default.utc(asUtc.valueOf() - tzOffset * 60000).tz(tzName);
     } catch (error) {
       // If timezone is invalid, log error and fall back to local time
       logDevError("dayjs.tz: Invalid timezone \"" + tzName + "\"", error);
@@ -3952,6 +3987,8 @@ const FORMAT_TOKENS = exports.FORMAT_TOKENS = {
   MONTH_FULL: 'MMMM',
   YEAR: 'YYYY',
   YEAR_SHORT: 'YY',
+  // Cap UI datetime picker format (DD-MM-YYYY | HH:mm)
+  DATE_TIME: 'DD-MM-YYYY | HH:mm',
   // Localized formats
   DATE_LOCALIZED_SHORT: 'l',
   DATETIME_LOCALIZED_SHORT: 'll',
@@ -3962,6 +3999,7 @@ const FORMAT_TOKENS = exports.FORMAT_TOKENS = {
   DATETIME_LOCALIZED_LONG_TIME: 'LLL',
   DATETIME_LOCALIZED_LONG_TIME_WEEKDAY: 'LLLL'
 };
+const DEFAULT_TIMEZONE = exports.DEFAULT_TIMEZONE = 'Asia/Kolkata';
 function logDevError(message, error) {
   if (false) // removed by dead control flow
 {}
@@ -4042,7 +4080,10 @@ function momentToDayjs(value) {
         const tz = value.tz();
         if (tz) {
           // Has a named timezone - preserve it
-          dayjsObj = (0, _dayjs.default)(date).tz(tz);
+          // dayjs.utc(date) is required here: dayjs(date) anchors to the system local timezone,
+          // causing .tz() to only re-label without converting hours. dayjs.utc(date) creates a
+          // UTC-mode dayjs, which .tz() correctly converts to the target timezone for display.
+          dayjsObj = _dayjs.default.utc(date).tz(tz);
 
           // WORKAROUND: dayjs-timezone-iana-plugin doesn't persist timezone name in standard way
           // Store it manually in $x for round-trip conversion fidelity
@@ -4095,6 +4136,35 @@ function momentToDayjs(value) {
   return null;
 }
 
+/**
+ * Converts any supported date value (Moment, Day.js, string, Date) to a Day.js object
+ * in the specified timezone. This is the recommended single entry point for timezone-safe
+ * date conversion — it handles moment-to-dayjs conversion and timezone application in one step,
+ * avoiding the double-offset bug in dayjs-timezone-iana-plugin.
+ *
+ * @param value - Moment, Day.js, string, Date, or null/undefined
+ * @param timezone - Target IANA timezone (e.g., 'Asia/Kolkata', 'America/New_York')
+ * @returns Day.js object in the target timezone, or null if invalid
+ *
+ * @example
+ * toDayjsInTimezone(moment.tz('2025-04-21 00:00', 'Asia/Kolkata'), 'Asia/Kolkata');
+ * // Returns dayjs representing 2025-04-21 00:00 IST
+ *
+ * @example
+ * toDayjsInTimezone(moment.tz('2025-04-21 00:00', 'UTC'), 'Asia/Kolkata');
+ * // Returns dayjs representing 2025-04-21 05:30 IST
+ */
+function toDayjsInTimezone(value, timezone) {
+  const dayjsValue = momentToDayjs(value);
+  if (!dayjsValue) return null;
+
+  // Convert via UTC to avoid the double-offset bug in dayjs-timezone-iana-plugin:
+  // calling .tz() on a dayjs that already has a non-zero utcOffset corrupts the value.
+  // Going through .toDate() → dayjs.utc() gives us a clean UTC-mode dayjs that .tz()
+  // correctly converts to the target timezone.
+  return _dayjs.default.utc(dayjsValue.toDate()).tz(timezone);
+}
+
 /**
  * Converts a Day.js object to Moment.js, preserving timezone and locale information.
  *
@@ -5342,17 +5412,17 @@ exports.scope = exports["default"] = void 0;
 var _reactIntl = __webpack_require__(46407);
 const scope = exports.scope = 'app.commonUtils.capUiLibrary.capDateTimePicker';
 var _default = exports["default"] = (0, _reactIntl.defineMessages)({
-  selectDateAndTime: {
-    id: scope + ".selectDateAndTime",
-    defaultMessage: 'Select date & time'
-  },
-  selectButton: {
-    id: scope + ".selectButton",
-    defaultMessage: 'Select'
-  },
   selectDateTimePlaceHolder: {
     id: scope + ".selectDateTimePlaceHolder",
     defaultMessage: 'Select date | time'
+  },
+  selectLabel: {
+    id: scope + ".selectLabel",
+    defaultMessage: 'Select'
+  },
+  todayLabel: {
+    id: scope + ".todayLabel",
+    defaultMessage: 'Today'
   }
 });
 
@@ -7800,24 +7870,11 @@ var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ = __webpack_require__(31601);
 var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(76314);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.cap-date-time-picker__calendar-icon{color:#091e42}.cap-date-time-picker .ant-calendar-picker-input:hover,.cap-date-time-picker .ant-calendar-picker-input:focus{border-color:#dfe2e7 !important;box-shadow:none !important}.cap-date-time-picker:hover .ant-calendar-picker-input{border-color:#dfe2e7 !important;box-shadow:none !important}.cap-date-time-picker .calendar-popup .ant-calendar-ok-btn,.calendar-popup .ant-calendar-ok-btn{order:0}.cap-date-time-picker .calendar-popup .ant-calendar-today-btn,.calendar-popup .ant-calendar-today-btn{order:1}.cap-date-time-picker .calendar-popup .ant-calendar-time-picker-btn,.calendar-popup .ant-calendar-time-picker-btn{order:2}.cap-date-time-picker .calendar-popup .ant-calendar-today .ant-calendar-date,.calendar-popup .ant-calendar-today .ant-calendar-date{border-radius:50%;color:#1890ff;border-color:#1890ff;font-weight:500}.cap-date-time-picker .calendar-popup .ant-calendar-date:hover,.calendar-popup .ant-calendar-date:hover{background:#1890ff;border-color:#1890ff;color:#fff;border-radius:50%}.cap-date-time-picker .calendar-popup .ant-calendar-selected-day .ant-calendar-date,.calendar-popup .ant-calendar-selected-day .ant-calendar-date{background:#1890ff;border-color:#1890ff;color:#fff;border-radius:50%}.cap-date-time-picker .calendar-popup .ant-calendar-selected-day.ant-calendar-today .ant-calendar-date,.calendar-popup .ant-calendar-selected-day.ant-calendar-today .ant-calendar-date{background:#1890ff !important;border-color:#1890ff !important;color:#fff !important}.cap-date-time-picker .calendar-popup .ant-calendar-footer,.calendar-popup .ant-calendar-footer{padding:.857rem 1.142rem;border-top:.063rem solid #ebecf0;min-width:0}.cap-date-time-picker .calendar-popup .ant-calendar-footer-btn,.calendar-popup .ant-calendar-footer-btn{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:1.142rem;flex-wrap:nowrap;white-space:nowrap;min-width:0}.cap-date-time-picker .calendar-popup .ant-calendar-ok-btn,.calendar-popup .ant-calendar-ok-btn{font-size:0 !important;background:#47af46;border:none;border-radius:.285rem;padding:0 2rem;height:2.285rem;line-height:2.285rem;font-weight:500;color:#fff;flex-shrink:0;white-space:nowrap}.cap-date-time-picker .calendar-popup .ant-calendar-ok-btn::after,.calendar-popup .ant-calendar-ok-btn::after{content:"Select";font-size:1rem}.cap-date-time-picker .calendar-popup .ant-calendar-ok-btn:not(.ant-calendar-ok-btn-disabled):not([disabled]):hover,.cap-date-time-picker .calendar-popup .ant-calendar-ok-btn:not(.ant-calendar-ok-btn-disabled):not([disabled]):focus,.calendar-popup .ant-calendar-ok-btn:not(.ant-calendar-ok-btn-disabled):not([disabled]):hover,.calendar-popup .ant-calendar-ok-btn:not(.ant-calendar-ok-btn-disabled):not([disabled]):focus{background:#47af46;color:#fff;box-shadow:none}.cap-date-time-picker .calendar-popup .ant-calendar-ok-btn-disabled,.cap-date-time-picker .calendar-popup .ant-calendar-ok-btn[disabled],.cap-date-time-picker .calendar-popup .ant-calendar-ok-btn-disabled:hover,.cap-date-time-picker .calendar-popup .ant-calendar-ok-btn-disabled:focus,.cap-date-time-picker .calendar-popup .ant-calendar-ok-btn[disabled]:hover,.cap-date-time-picker .calendar-popup .ant-calendar-ok-btn[disabled]:focus,.calendar-popup .ant-calendar-ok-btn-disabled,.calendar-popup .ant-calendar-ok-btn[disabled],.calendar-popup .ant-calendar-ok-btn-disabled:hover,.calendar-popup .ant-calendar-ok-btn-disabled:focus,.calendar-popup .ant-calendar-ok-btn[disabled]:hover,.calendar-popup .ant-calendar-ok-btn[disabled]:focus{background:#a1d8a0 !important;color:#fff !important;cursor:not-allowed;box-shadow:none !important}.cap-date-time-picker .calendar-popup .ant-calendar-today-btn,.cap-date-time-picker .calendar-popup .ant-calendar-time-picker-btn,.calendar-popup .ant-calendar-today-btn,.calendar-popup .ant-calendar-time-picker-btn{background:rgba(0,0,0,0);border:none;margin:0 !important;padding:0;height:2.285rem;line-height:2.285rem;display:inline-flex;align-items:center;font-size:1rem;font-weight:500;color:#2466ea;flex-shrink:0;white-space:nowrap}.cap-date-time-picker .calendar-popup .ant-calendar-time-picker-btn-disabled,.calendar-popup .ant-calendar-time-picker-btn-disabled{color:#c2c2c2 !important;cursor:not-allowed}.cap-date-time-picker .calendar-popup .ant-calendar-today-btn,.calendar-popup .ant-calendar-today-btn{font-size:0 !important}.cap-date-time-picker .calendar-popup .ant-calendar-today-btn::after,.calendar-popup .ant-calendar-today-btn::after{content:"Today";font-size:1rem}.cap-date-time-picker .calendar-popup .ant-calendar-time-picker-btn,.calendar-popup .ant-calendar-time-picker-btn{font-size:0 !important}.cap-date-time-picker .calendar-popup .ant-calendar-time-picker-btn::after,.calendar-popup .ant-calendar-time-picker-btn::after{content:"Select time";font-size:1rem}.cap-date-time-picker .calendar-popup .ant-calendar-time-picker-cell-selected,.calendar-popup .ant-calendar-time-picker-cell-selected{background:#e9f0fe;font-weight:500}`, ""]);
+___CSS_LOADER_EXPORT___.push([module.id, `.cap-date-time-picker__calendar-icon{color:#091e42}.cap-date-time-picker__calendar-popup .ant-picker-footer .ant-picker-ranges{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:1.142rem;padding:.571rem 1.142rem .857rem 1.142rem}.cap-date-time-picker__calendar-popup .ant-picker-footer .ant-picker-ranges .ant-picker-ok{order:0;margin-inline-start:0}.cap-date-time-picker__calendar-popup .ant-picker-footer .ant-picker-ranges .ant-picker-ok>button{background:#47af46;border:none;border-radius:.285rem;padding:0 2rem;height:2.285rem;line-height:2.285rem;font-weight:500;color:#fff;box-shadow:none}.cap-date-time-picker__calendar-popup .ant-picker-footer .ant-picker-ranges .ant-picker-ok>button>span{display:none}.cap-date-time-picker__calendar-popup .ant-picker-footer .ant-picker-ranges .ant-picker-ok>button::after{content:var(--cap-datetime-select-label, "Select");font-size:1rem}.cap-date-time-picker__calendar-popup .ant-picker-footer .ant-picker-ranges .ant-picker-ok>button:disabled{background:#a1d8a0;cursor:not-allowed}.cap-date-time-picker__calendar-popup .ant-picker-footer .ant-picker-ranges .ant-picker-now{order:1}.cap-date-time-picker__calendar-popup .ant-picker-footer .ant-picker-ranges .ant-picker-now>a{font-size:0;font-weight:500;color:#2466ea}.cap-date-time-picker__calendar-popup .ant-picker-footer .ant-picker-ranges .ant-picker-now>a::after{content:var(--cap-datetime-today-label, "Today");font-size:1rem;vertical-align:sub}`, ""]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"cap-date-time-picker__calendar-icon": `cap-date-time-picker__calendar-icon`,
-	"cap-date-time-picker": `cap-date-time-picker`,
-	"ant-calendar-picker-input": `ant-calendar-picker-input`,
-	"calendar-popup": `calendar-popup`,
-	"ant-calendar-ok-btn": `ant-calendar-ok-btn`,
-	"ant-calendar-today-btn": `ant-calendar-today-btn`,
-	"ant-calendar-time-picker-btn": `ant-calendar-time-picker-btn`,
-	"ant-calendar-today": `ant-calendar-today`,
-	"ant-calendar-date": `ant-calendar-date`,
-	"ant-calendar-selected-day": `ant-calendar-selected-day`,
-	"ant-calendar-footer": `ant-calendar-footer`,
-	"ant-calendar-footer-btn": `ant-calendar-footer-btn`,
-	"ant-calendar-ok-btn-disabled": `ant-calendar-ok-btn-disabled`,
-	"ant-calendar-time-picker-btn-disabled": `ant-calendar-time-picker-btn-disabled`,
-	"ant-calendar-time-picker-cell-selected": `ant-calendar-time-picker-cell-selected`
+	"cap-date-time-picker__calendar-popup": `cap-date-time-picker__calendar-popup`
 };
 module.exports = ___CSS_LOADER_EXPORT___;
 
@@ -11252,14 +11309,6 @@ var _default = exports["default"] = SvgWechatOutline;
 
 /***/ }),
 
-/***/ 61545:
-/***/ ((module) => {
-
-"use strict";
-module.exports = require("antd/lib/date-picker/style/css");
-
-/***/ }),
-
 /***/ 61779:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
@@ -11585,6 +11634,14 @@ var _default = exports["default"] = SvgDisneyHotstar;
 
 /***/ }),
 
+/***/ 64273:
+/***/ ((module) => {
+
+"use strict";
+module.exports = require("antd-v5");
+
+/***/ }),
+
 /***/ 64284:
 /***/ ((module) => {
 
@@ -16476,14 +16533,6 @@ module.exports = require("dayjs/plugin/advancedFormat");
 
 /***/ }),
 
-/***/ 97185:
-/***/ ((module) => {
-
-"use strict";
-module.exports = require("antd");
-
-/***/ }),
-
 /***/ 97849:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
@@ -16729,57 +16778,82 @@ var exports = __webpack_exports__;
 
 exports.__esModule = true;
 exports["default"] = void 0;
-var _antd = __webpack_require__(97185);
-__webpack_require__(61545);
+var _antdV = __webpack_require__(64273);
 var _classnames = _interopRequireDefault(__webpack_require__(46942));
-var _propTypes = _interopRequireDefault(__webpack_require__(43363));
 var _react = _interopRequireWildcard(__webpack_require__(9206));
 var _reactIntl = __webpack_require__(46407);
 var _dayjs = _interopRequireWildcard(__webpack_require__(25549));
 var _CapIcon = _interopRequireDefault(__webpack_require__(65124));
+var _logDeprecationWarning = _interopRequireDefault(__webpack_require__(19224));
 var _messages = _interopRequireDefault(__webpack_require__(32528));
-__webpack_require__(2580);
+var _styles = _interopRequireDefault(__webpack_require__(2580));
 var _jsxRuntime = __webpack_require__(74848);
-const _excluded = ["intl", "className", "value", "onChange", "dateRender", "showTime", "format", "placeholder", "timezone", "disabledTime", "renderExtraFooter", "showToday", "onOk", "onPanelChange"];
+const _excluded = ["intl", "className", "value", "defaultValue", "onChange", "cellRender", "dateRender", "showTime", "format", "placeholder", "timezone", "disabledTime", "renderExtraFooter", "showToday", "onOk", "onPanelChange", "popupClassName", "dropdownClassName", "popupStyle", "dropdownStyle", "getPopupContainer", "getCalendarContainer", "popupOpen", "open", "onPopupOpenChange", "onOpenChange"];
+/**
+ *
+ * CapDateTimePicker
+ *
+ */
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 const clsPrefix = 'cap-date-time-picker';
 const CapDateTimePicker = _ref => {
+  var _ref2;
   let {
       intl: {
         formatMessage
       },
-      className,
-      value,
-      onChange,
+      className = '',
+      value = null,
+      defaultValue = null,
+      onChange = () => {},
+      cellRender,
       dateRender,
-      showTime,
-      format,
-      placeholder,
-      timezone,
+      showTime = {
+        format: _dayjs.FORMAT_TOKENS.TIME_24H
+      },
+      format = _dayjs.FORMAT_TOKENS.DATE_TIME,
+      placeholder = '',
+      timezone = _dayjs.DEFAULT_TIMEZONE,
       disabledTime,
       renderExtraFooter,
       showToday,
       onOk,
-      onPanelChange
+      onPanelChange,
+      popupClassName,
+      dropdownClassName,
+      popupStyle,
+      dropdownStyle,
+      getPopupContainer,
+      getCalendarContainer,
+      popupOpen,
+      open: openProp,
+      onPopupOpenChange,
+      onOpenChange
     } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const [open, setOpen] = (0, _react.useState)(false);
+  (0, _logDeprecationWarning.default)('CapDateTimePicker', 'dateRender', dateRender, 'cellRender');
+  (0, _logDeprecationWarning.default)('CapDateTimePicker', 'dropdownClassName', dropdownClassName, 'popupClassName');
+  (0, _logDeprecationWarning.default)('CapDateTimePicker', 'dropdownStyle', dropdownStyle, 'popupStyle');
+  (0, _logDeprecationWarning.default)('CapDateTimePicker', 'getCalendarContainer', getCalendarContainer, 'getPopupContainer');
+  (0, _logDeprecationWarning.default)('CapDateTimePicker', 'open', openProp, 'popupOpen');
+  (0, _logDeprecationWarning.default)('CapDateTimePicker', 'onOpenChange', onOpenChange, 'onPopupOpenChange');
+  (0, _logDeprecationWarning.default)('CapDateTimePicker', 'showToday', showToday, 'N/A (handled internally)');
+  (0, _logDeprecationWarning.default)('CapDateTimePicker', 'renderExtraFooter', renderExtraFooter, 'custom panel components');
+  const [isPickerOpen, setIsPickerOpen] = (0, _react.useState)(false);
   const skipNextCloseRef = (0, _react.useRef)(false);
 
   // Detect if consumer is using moment
-  const isConsumerUsingMoment = (0, _dayjs.isMomentObject)(value);
+  const isConsumerUsingMoment = (0, _dayjs.isMomentObject)(value) || (0, _dayjs.isMomentObject)(defaultValue);
 
   // Parse date in timezone
   const parseDateTime = dateTime => {
     if (!dateTime) return null;
-
-    // Convert moment to dayjs
-    const dayjsDateTime = (0, _dayjs.momentToDayjs)(dateTime);
-    if (!dayjsDateTime) return null;
-    return dayjsDateTime.clone().tz(timezone);
+    const dayjsDateTimeToTimezone = (0, _dayjs.toDayjsInTimezone)(dateTime, timezone);
+    if (!dayjsDateTimeToTimezone) return null;
+    return dayjsDateTimeToTimezone;
   };
 
   // Today's date in target timezone
@@ -16801,19 +16875,24 @@ const CapDateTimePicker = _ref => {
 
   // Handle calendar change
   const handleChange = (newValue, dateString) => {
+    if (Array.isArray(newValue) || Array.isArray(dateString)) return;
     const parsedValue = parseDateTime(newValue);
 
     // Return the same type the consumer passed in
     const result = (0, _dayjs.normalizeDateValue)(isConsumerUsingMoment, parsedValue);
-    onChange(result, dateString);
+    onChange(result != null ? result : null, dateString != null ? dateString : '');
   };
   const handleOpenChange = nextOpen => {
-    setOpen(nextOpen);
+    setIsPickerOpen(nextOpen);
+    onPopupOpenChange == null || onPopupOpenChange(nextOpen);
+    onOpenChange == null || onOpenChange(nextOpen);
   };
-  const handleOk = () => {
+  const handleOk = date => {
     skipNextCloseRef.current = false;
-    setOpen(false);
-    onOk == null || onOk();
+    setIsPickerOpen(false);
+    const parsedValue = parseDateTime(date);
+    const result = (0, _dayjs.normalizeDateValue)(isConsumerUsingMoment, parsedValue);
+    onOk == null || onOk(result != null ? result : null);
   };
 
   // Get the current value in the correct timezone
@@ -16821,17 +16900,31 @@ const CapDateTimePicker = _ref => {
     if (!value) return null;
     return parseDateTime(value);
   }, [value, timezone]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.DatePicker, _extends({
+
+  // Backward compatibility: map deprecated props to new props
+  const finalPopupClassName = (0, _classnames.default)(_styles.default[clsPrefix + "__calendar-popup"], popupClassName != null ? popupClassName : dropdownClassName);
+  const labelVars = {
+    '--cap-datetime-select-label': "'" + formatMessage(_messages.default.selectLabel) + "'",
+    '--cap-datetime-today-label': "'" + formatMessage(_messages.default.todayLabel) + "'"
+  };
+  const finalPopupStyle = _extends({}, labelVars, popupStyle != null ? popupStyle : dropdownStyle);
+  const finalGetPopupContainer = getPopupContainer != null ? getPopupContainer : getCalendarContainer;
+  const finalOpen = (_ref2 = popupOpen != null ? popupOpen : openProp) != null ? _ref2 : isPickerOpen;
+
+  // Backward compatibility: map deprecated dateRender to cellRender
+  const finalCellRender = cellRender != null ? cellRender : dateRender ? current => dateRender(current, todayDate) : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antdV.DatePicker, _extends({
     className: (0, _classnames.default)(clsPrefix, className),
     showTime: showTimeConfig,
     format: format,
     placeholder: placeholder || formatMessage(_messages.default.selectDateTimePlaceHolder),
     value: currentValue,
     onChange: handleChange,
-    dateRender: dateRender,
-    okText: formatMessage(_messages.default.selectButton),
-    dropdownClassName: "calendar-popup",
-    open: open,
+    cellRender: finalCellRender,
+    popupClassName: finalPopupClassName,
+    popupStyle: finalPopupStyle,
+    getPopupContainer: finalGetPopupContainer,
+    open: finalOpen,
     onOk: handleOk,
     onOpenChange: handleOpenChange,
     onPanelChange: onPanelChange,
@@ -16842,43 +16935,10 @@ const CapDateTimePicker = _ref => {
     suffixIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
       type: "calendar",
       size: "m",
-      className: clsPrefix + "__calendar-icon"
+      className: _styles.default[clsPrefix + "__calendar-icon"]
     })
   }, rest));
 };
-
-/* ── prop types & defaults ────────────────────────────────── */
-CapDateTimePicker.propTypes = {
-  intl: _reactIntl.intlShape.isRequired,
-  className: _propTypes.default.string,
-  value: _propTypes.default.oneOfType([_propTypes.default.object,
-  // Moment or dayjs
-  _propTypes.default.string // ISO date
-  ]),
-  onChange: _propTypes.default.func,
-  dateRender: _propTypes.default.func,
-  showTime: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
-  format: _propTypes.default.string,
-  placeholder: _propTypes.default.string,
-  timezone: _propTypes.default.string,
-  disabledTime: _propTypes.default.func,
-  renderExtraFooter: _propTypes.default.func,
-  showToday: _propTypes.default.bool,
-  onOk: _propTypes.default.func,
-  onPanelChange: _propTypes.default.func
-};
-CapDateTimePicker.defaultProps = {
-  className: '',
-  value: null,
-  onChange: () => {},
-  showTime: {
-    format: 'HH:mm'
-  },
-  format: 'DD-MM-YYYY | HH:mm',
-  placeholder: '',
-  timezone: 'Asia/Kolkata',
-  showToday: true
-};
 var _default = exports["default"] = (0, _reactIntl.injectIntl)(CapDateTimePicker);
 })();