@elliemae/ds-date-time-picker 2.2.0 → 2.3.0-alpha.3

package/esm/components/DateTimePickerImpl.js

@@ -1,178 +1,133 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import { useState, useRef, useEffect, useMemo } from 'react';
-import moment from 'moment';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
-import { DatePickerDropdown, DSDatePickerController, SingleDatePickerPhrases } from '@elliemae/ds-date-picker';
-import { DSInputGroup, DSInput, DateInputsV2Impl, TimeInputImpl } from '@elliemae/ds-form';
-import { getVisibleTimeByFormat } from '@elliemae/ds-utilities';
-import { DSTimePickerMenu, convertTimeString } from '@elliemae/ds-time-picker';
-import { updateDateAndTime } from '../utils.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-const _excluded = ["onChange"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const blockName = 'date-time-picker';
-const DateTimePickerWrapper = aggregatedClasses('div')(blockName, 'wrapper');
-const TimePicker = aggregatedClasses(DSTimePickerMenu)(blockName, 'time-picker');
-const TimePickerWrapper = aggregatedClasses('div')(blockName, 'time-picker-wrapper'); // const DateInput = aggregatedClasses(DateInputsV2Impl)(blockName, 'date-input');
-
-const formatDate = 'MMDDYYYY';
-
-const DSDateTimePickerImpl = _ref => {
-  let {
-    onBlur = () => null,
-    placeholder,
-    date,
-    clearable,
-    datePickerProps: {
-      disabled = false,
-      numberOfMonths = 1,
-      readOnly = false,
-      enableOutsideDays = false,
-      transitionDuration = 0,
-      firstDayOfWeek = 0,
-      keepOpenOnDateSelect = true,
-      hideKeyboardShortcutsPanel = true,
-      onPrevMonthClick = () => null,
-      onNextMonthClick = () => null,
-      onClose = () => null,
-      onChange: onDatePickerChange = () => null,
-      onDateChange = () => null,
-      onError: onErrorDate = () => null,
-      phrases = SingleDatePickerPhrases,
-      displayFormatDay = 'D',
-      isDayBlocked = () => false,
-      isOutsideRange = () => false,
-      isDayHighlighted = () => false,
-      zIndex = 11
-    },
-    timePickerProps: {
-      format = 'hh:mm A',
-      onChange: onChangeTimePicker = () => null,
-      disabledTimes = undefined,
-      onError: onErrorTime = () => null,
-      minutesInterval = 1
-    },
-    dateInputProps: {
-      onDateInputDateChange = () => null
-    }
-  } = _ref;
-  const [selectedDate, setSelectedDate] = useState(undefined);
-  const [incompleteInput, setIncompleteInput] = useState(undefined);
+import * as React from "react";
+import React2, { useState, useEffect, useMemo, useRef } from "react";
+import moment from "moment";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+import { DSDatePickerController, DatePickerDropdown, SingleDatePickerPhrases } from "@elliemae/ds-date-picker";
+import { DSInput, DSInputGroup, DateInputsV2Impl, TimeInputImpl } from "@elliemae/ds-form";
+import { getVisibleTimeByFormat } from "@elliemae/ds-utilities";
+import { DSTimePickerMenu, convertTimeString } from "@elliemae/ds-time-picker";
+import { updateDateAndTime } from "../utils";
+const blockName = "date-time-picker";
+const DateTimePickerWrapper = aggregatedClasses("div")(blockName, "wrapper");
+const TimePicker = aggregatedClasses(DSTimePickerMenu)(blockName, "time-picker");
+const TimePickerWrapper = aggregatedClasses("div")(blockName, "time-picker-wrapper");
+const formatDate = "MMDDYYYY";
+const DSDateTimePickerImpl = ({
+  onBlur = () => null,
+  placeholder,
+  date,
+  clearable,
+  datePickerProps: {
+    disabled = false,
+    numberOfMonths = 1,
+    readOnly = false,
+    enableOutsideDays = false,
+    transitionDuration = 0,
+    firstDayOfWeek = 0,
+    keepOpenOnDateSelect = true,
+    hideKeyboardShortcutsPanel = true,
+    onPrevMonthClick = () => null,
+    onNextMonthClick = () => null,
+    onClose = () => null,
+    onChange: onDatePickerChange = () => null,
+    onDateChange = () => null,
+    onError: onErrorDate = () => null,
+    phrases = SingleDatePickerPhrases,
+    displayFormatDay = "D",
+    isDayBlocked = () => false,
+    isOutsideRange = () => false,
+    isDayHighlighted = () => false,
+    zIndex = 11
+  },
+  timePickerProps: {
+    format = "hh:mm A",
+    onChange: onChangeTimePicker = () => null,
+    disabledTimes = void 0,
+    onError: onErrorTime = () => null,
+    minutesInterval = 1
+  },
+  dateInputProps: { onDateInputDateChange = () => null }
+}) => {
+  const [selectedDate, setSelectedDate] = useState(void 0);
+  const [incompleteInput, setIncompleteInput] = useState(void 0);
   const [isOpen, setIsOpen] = useState(false);
   const disabledTimeRange = disabledTimes && {
     from: convertTimeString(disabledTimes.from),
     to: convertTimeString(disabledTimes.to)
   };
   const dateTimePickerWrapperRef = useRef();
-  const fullFormat = "".concat(formatDate, " ").concat(format);
+  const fullFormat = `${formatDate} ${format}`;
   useEffect(() => {
     if (date) {
       setSelectedDate(moment(date));
-    } else if (date === null) setSelectedDate(undefined);
+    } else if (date === null)
+      setSelectedDate(void 0);
   }, [date]);
   const visiblePanels = useMemo(() => getVisibleTimeByFormat(format), []);
   const currentYear = moment().year();
-
-  const handleDatePickerChange = dateSelected => {
+  const handleDatePickerChange = (dateSelected) => {
     const splittedDate = updateDateAndTime(dateSelected, selectedDate);
-
     if (!readOnly) {
       setSelectedDate(splittedDate);
       onDateChange(splittedDate);
     }
   };
-
-  const onTimeChange = pickerTime => {
+  const onTimeChange = (pickerTime) => {
     const splittedDate = updateDateAndTime(selectedDate, pickerTime);
     onChangeTimePicker(splittedDate);
     setSelectedDate(splittedDate);
   };
-
   const handleInputChange = (inputValue, type) => {
     onDatePickerChange(inputValue);
     let timeBlocked = false;
     const inputMoment = moment(inputValue, fullFormat);
     setIncompleteInput(inputValue);
-
-    if (type === 'date') {
+    if (type === "date") {
       const splittedDate = updateDateAndTime(inputMoment, selectedDate);
-
       if (inputValue.length < 8) {
-        onErrorDate({
-          message: 'date incomplete',
-          inputValue
-        });
-        if (clearable) onDateChange('error');
+        onErrorDate({ message: "date incomplete", inputValue });
+        if (clearable)
+          onDateChange("error");
         return;
       }
-
       if (inputValue.length === 8 && inputMoment.isValid()) {
         setSelectedDate(splittedDate);
         onChangeTimePicker(splittedDate);
       }
-
       onDateChange(splittedDate);
       return;
     }
-
     if (disabledTimeRange) {
       const hour = inputValue.hour();
       const min = inputValue.minutes();
-      const {
-        from,
-        to
-      } = disabledTimeRange;
-
+      const { from, to } = disabledTimeRange;
       if (hour > from.hour && hour < to.hour || hour === to.hour && min < to.min) {
         timeBlocked = true;
       }
     }
-
-    if (timeBlocked) onErrorTime({
-      message: 'time blocked',
-      inputValue
-    });
+    if (timeBlocked)
+      onErrorTime({ message: "time blocked", inputValue });
     const dateBlocked = isDayBlocked(inputMoment);
-    if (dateBlocked) onErrorDate({
-      message: 'date blocked',
-      inputValue
-    });
-
+    if (dateBlocked)
+      onErrorDate({ message: "date blocked", inputValue });
     if (!timeBlocked && !dateBlocked) {
       onDateChange(inputValue);
     }
   };
-
-  const handleOutsideClick = event => {
+  const handleOutsideClick = (event) => {
     if (!dateTimePickerWrapperRef.current.contains(event.target)) {
       setIsOpen(false);
     }
   };
-
   const handleClickEscape = () => setIsOpen(false);
-
   const handleOpen = () => setIsOpen(true);
-
-  const handleContainerBlur = event => {
+  const handleContainerBlur = (event) => {
     if (!isOpen && !event.currentTarget.contains(event.relatedTarget)) {
-      onBlur(event, selectedDate !== null && selectedDate !== void 0 && selectedDate.isValid() ? selectedDate : {
+      onBlur(event, selectedDate?.isValid() ? selectedDate : {
         error: true,
-        message: 'incomplete input',
+        message: "incomplete input",
         input: incompleteInput
       });
-
       if (clearable && !selectedDate && !!incompleteInput) {
         const inputMoment = moment(incompleteInput, fullFormat);
         const splittedDate = updateDateAndTime(inputMoment, selectedDate);
@@ -181,96 +136,90 @@ const DSDateTimePickerImpl = _ref => {
       }
     }
   };
-
   useEffect(() => {
-    if (!isOpen) onBlur({}, selectedDate !== null && selectedDate !== void 0 && selectedDate.isValid() ? selectedDate : {
-      error: true,
-      message: 'incomplete input',
-      input: incompleteInput
-    });
+    if (!isOpen)
+      onBlur({}, selectedDate?.isValid() ? selectedDate : {
+        error: true,
+        message: "incomplete input",
+        input: incompleteInput
+      });
   }, [isOpen]);
   const hasSelectedDate = !!selectedDate;
-  return /*#__PURE__*/_jsx(DSInputGroup, {
+  return /* @__PURE__ */ React2.createElement(DSInputGroup, {
     containerProps: {
       onBlur: handleContainerBlur
     },
-    rightAddon: /*#__PURE__*/_jsx(DatePickerDropdown, {
-      disabled: disabled,
-      isOpen: isOpen,
-      zIndex: zIndex,
-      menu: /*#__PURE__*/jsxs(DateTimePickerWrapper, {
+    rightAddon: /* @__PURE__ */ React2.createElement(DatePickerDropdown, {
+      disabled,
+      isOpen,
+      zIndex,
+      menu: /* @__PURE__ */ React2.createElement(DateTimePickerWrapper, {
         ref: dateTimePickerWrapperRef,
-        "data-testid": "date-time-picker",
-        children: [/*#__PURE__*/_jsx("div", {
-          className: hasSelectedDate ? 'has-selected-date' : 'without-selected-date',
-          "data-testid": "date-time-picker-portal-wrapper"
-        }, void 0, /*#__PURE__*/_jsx(DSDatePickerController, {
-          date: selectedDate,
-          displayFormatDay: displayFormatDay,
-          enableOutsideDays: enableOutsideDays,
-          firstDayOfWeek: firstDayOfWeek,
-          hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel,
-          isDayBlocked: isDayBlocked,
-          isDayHighlighted: isDayHighlighted,
-          isOutsideRange: isOutsideRange,
-          keepOpenOnDateSelect: keepOpenOnDateSelect,
-          numberOfMonths: numberOfMonths,
-          onClickEscape: handleClickEscape,
-          onClose: onClose,
-          onDateChange: handleDatePickerChange,
-          onNextMonthClick: onNextMonthClick,
-          onOutsideClick: event => handleOutsideClick(event),
-          onPrevMonthClick: onPrevMonthClick,
-          phrases: phrases,
-          transitionDuration: transitionDuration
-        })), /*#__PURE__*/_jsx(TimePickerWrapper, {}, void 0, /*#__PURE__*/jsx(TimePicker, _objectSpread({
-          disabled: disabled,
-          disabledTimes: disabledTimeRange,
-          format: format,
-          hasHeader: true,
-          hasHeaderDisplay: true,
-          onTimeChange: onTimeChange,
-          showSeconds: false,
-          minutesInterval: minutesInterval,
-          time: selectedDate
-        }, visiblePanels)))]
-      }),
+        "data-testid": "date-time-picker"
+      }, /* @__PURE__ */ React2.createElement("div", {
+        className: hasSelectedDate ? "has-selected-date" : "without-selected-date",
+        "data-testid": "date-time-picker-portal-wrapper"
+      }, /* @__PURE__ */ React2.createElement(DSDatePickerController, {
+        date: selectedDate,
+        displayFormatDay,
+        enableOutsideDays,
+        firstDayOfWeek,
+        hideKeyboardShortcutsPanel,
+        isDayBlocked,
+        isDayHighlighted,
+        isOutsideRange,
+        keepOpenOnDateSelect,
+        numberOfMonths,
+        onClickEscape: handleClickEscape,
+        onClose,
+        onDateChange: handleDatePickerChange,
+        onNextMonthClick,
+        onOutsideClick: (event) => handleOutsideClick(event),
+        onPrevMonthClick,
+        phrases,
+        transitionDuration
+      })), /* @__PURE__ */ React2.createElement(TimePickerWrapper, null, /* @__PURE__ */ React2.createElement(TimePicker, {
+        disabled,
+        disabledTimes: disabledTimeRange,
+        format,
+        hasHeader: true,
+        hasHeaderDisplay: true,
+        onTimeChange,
+        showSeconds: false,
+        minutesInterval,
+        time: selectedDate,
+        ...visiblePanels
+      }))),
       onClick: handleOpen,
-      readOnly: readOnly
+      readOnly
     })
-  }, void 0, /*#__PURE__*/_jsx(DSInput, {
-    customInputType: _ref2 => {
-      let {
-        onChange: handleChange
-      } = _ref2,
-          restInputProps = _objectWithoutProperties(_ref2, _excluded);
-
-      return /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/_jsx("div", {
-          style: {
-            display: 'flex'
-          }
-        }, void 0, /*#__PURE__*/jsx(DateInputsV2Impl, _objectSpread(_objectSpread({
-          disabled: disabled,
-          onChange: input => handleChange(input, 'date')
-        }, restInputProps), {}, {
-          onDateChange: onDateInputDateChange,
-          yearMaxRange: currentYear + 100,
-          yearMinRange: currentYear - 100,
-          time: restInputProps.value && restInputProps.value.hour && restInputProps.value.isValid() ? restInputProps.value.format(formatDate) : restInputProps.value
-        }))), /*#__PURE__*/jsx(TimeInputImpl, _objectSpread({
-          disabled: disabled,
-          format: format,
-          onChange: time => handleChange(time, 'time')
-        }, restInputProps))]
-      });
-    },
+  }, /* @__PURE__ */ React2.createElement(DSInput, {
+    customInputType: ({ onChange: handleChange, ...restInputProps }) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", {
+      style: { display: "flex" }
+    }, /* @__PURE__ */ React2.createElement(DateInputsV2Impl, {
+      disabled,
+      onChange: (input) => handleChange(input, "date"),
+      ...restInputProps,
+      onDateChange: onDateInputDateChange,
+      yearMaxRange: currentYear + 100,
+      yearMinRange: currentYear - 100,
+      time: restInputProps.value && restInputProps.value.hour && restInputProps.value.isValid() ? restInputProps.value.format(formatDate) : restInputProps.value
+    })), /* @__PURE__ */ React2.createElement(TimeInputImpl, {
+      disabled,
+      format,
+      onChange: (time) => handleChange(time, "time"),
+      ...restInputProps
+    })),
     isShowElipsisActive: false,
-    disabled: disabled,
+    disabled,
     onChange: handleInputChange,
-    placeholder: placeholder,
+    placeholder,
     value: selectedDate
   }));
 };
-
-export { DSDateTimePickerImpl as default };
+var DateTimePickerImpl_default = DSDateTimePickerImpl;
+export {
+  DSDateTimePickerImpl,
+  DateTimePickerImpl_default as default
+};
+//# sourceMappingURL=DateTimePickerImpl.js.map

package/esm/components/DateTimePickerImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/DateTimePickerImpl.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\n/* eslint-disable no-empty-pattern */\n/* eslint-disable import/no-unresolved */\n/* eslint-disable max-lines */\n/* eslint-disable react/prop-types */\nimport React, { useState, useEffect, useMemo, useRef } from 'react';\nimport moment from 'moment';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DSDatePickerController, DatePickerDropdown, SingleDatePickerPhrases } from '@elliemae/ds-date-picker';\nimport { DSInput, DSInputGroup, DateInputsV2Impl, TimeInputImpl } from '@elliemae/ds-form';\nimport { getVisibleTimeByFormat } from '@elliemae/ds-utilities';\nimport { DSTimePickerMenu, convertTimeString } from '@elliemae/ds-time-picker';\nimport { updateDateAndTime } from '../utils';\n\nconst blockName = 'date-time-picker';\n\nconst DateTimePickerWrapper = aggregatedClasses('div')(blockName, 'wrapper');\nconst TimePicker = aggregatedClasses(DSTimePickerMenu)(blockName, 'time-picker');\nconst TimePickerWrapper = aggregatedClasses('div')(blockName, 'time-picker-wrapper');\n// const DateInput = aggregatedClasses(DateInputsV2Impl)(blockName, 'date-input');\nconst formatDate = 'MMDDYYYY';\n\nconst DSDateTimePickerImpl = ({\n  onBlur = () => null,\n  placeholder,\n  date,\n  clearable,\n  datePickerProps: {\n    disabled = false,\n    numberOfMonths = 1,\n    readOnly = false,\n    enableOutsideDays = false,\n    transitionDuration = 0,\n    firstDayOfWeek = 0,\n    keepOpenOnDateSelect = true,\n    hideKeyboardShortcutsPanel = true,\n    onPrevMonthClick = () => null,\n    onNextMonthClick = () => null,\n    onClose = () => null,\n    onChange: onDatePickerChange = () => null,\n    onDateChange = () => null,\n    onError: onErrorDate = () => null,\n    phrases = SingleDatePickerPhrases,\n    displayFormatDay = 'D',\n    isDayBlocked = () => false,\n    isOutsideRange = () => false,\n    isDayHighlighted = () => false,\n    zIndex = 11,\n  },\n  timePickerProps: {\n    format = 'hh:mm A',\n    onChange: onChangeTimePicker = () => null,\n    disabledTimes = undefined,\n    onError: onErrorTime = () => null,\n    minutesInterval = 1,\n  },\n  dateInputProps: { onDateInputDateChange = () => null },\n}) => {\n  const [selectedDate, setSelectedDate] = useState(undefined);\n  const [incompleteInput, setIncompleteInput] = useState(undefined);\n  const [isOpen, setIsOpen] = useState(false);\n\n  const disabledTimeRange = disabledTimes && {\n    from: convertTimeString(disabledTimes.from),\n    to: convertTimeString(disabledTimes.to),\n  };\n\n  const dateTimePickerWrapperRef = useRef();\n  const fullFormat = `${formatDate} ${format}`;\n\n  useEffect(() => {\n    if (date) {\n      setSelectedDate(moment(date));\n    } else if (date === null) setSelectedDate(undefined);\n  }, [date]);\n\n  const visiblePanels = useMemo(() => getVisibleTimeByFormat(format), []);\n\n  const currentYear = moment().year();\n\n  const handleDatePickerChange = (dateSelected) => {\n    const splittedDate = updateDateAndTime(dateSelected, selectedDate);\n    if (!readOnly) {\n      setSelectedDate(splittedDate);\n      onDateChange(splittedDate);\n    }\n  };\n\n  const onTimeChange = (pickerTime) => {\n    const splittedDate = updateDateAndTime(selectedDate, pickerTime);\n    onChangeTimePicker(splittedDate);\n    setSelectedDate(splittedDate);\n  };\n\n  const handleInputChange = (inputValue, type) => {\n    onDatePickerChange(inputValue);\n    let timeBlocked = false;\n    const inputMoment = moment(inputValue, fullFormat);\n    setIncompleteInput(inputValue);\n    if (type === 'date') {\n      const splittedDate = updateDateAndTime(inputMoment, selectedDate);\n      if (inputValue.length < 8) {\n        onErrorDate({ message: 'date incomplete', inputValue });\n        if (clearable) onDateChange('error');\n        return;\n      }\n      if (inputValue.length === 8 && inputMoment.isValid()) {\n        setSelectedDate(splittedDate);\n        onChangeTimePicker(splittedDate);\n      }\n      onDateChange(splittedDate);\n      return;\n    }\n\n    if (disabledTimeRange) {\n      const hour = inputValue.hour();\n      const min = inputValue.minutes();\n      const { from, to } = disabledTimeRange;\n\n      if ((hour > from.hour && hour < to.hour) || (hour === to.hour && min < to.min)) {\n        timeBlocked = true;\n      }\n    }\n    if (timeBlocked) onErrorTime({ message: 'time blocked', inputValue });\n    const dateBlocked = isDayBlocked(inputMoment);\n    if (dateBlocked) onErrorDate({ message: 'date blocked', inputValue });\n    if (!timeBlocked && !dateBlocked) {\n      onDateChange(inputValue);\n    }\n  };\n\n  const handleOutsideClick = (event) => {\n    if (!dateTimePickerWrapperRef.current.contains(event.target)) {\n      setIsOpen(false);\n    }\n  };\n\n  const handleClickEscape = () => setIsOpen(false);\n  const handleOpen = () => setIsOpen(true);\n\n  const handleContainerBlur = (event) => {\n    if (!isOpen && !event.currentTarget.contains(event.relatedTarget)) {\n      onBlur(\n        event,\n        selectedDate?.isValid()\n          ? selectedDate\n          : {\n              error: true,\n              message: 'incomplete input',\n              input: incompleteInput,\n            },\n      );\n      if (clearable && !selectedDate && !!incompleteInput) {\n        const inputMoment = moment(incompleteInput, fullFormat);\n        const splittedDate = updateDateAndTime(inputMoment, selectedDate);\n\n        setSelectedDate(splittedDate);\n        onDateChange(splittedDate);\n      }\n    }\n  };\n\n  useEffect(() => {\n    if (!isOpen)\n      onBlur(\n        {},\n        selectedDate?.isValid()\n          ? selectedDate\n          : {\n              error: true,\n              message: 'incomplete input',\n              input: incompleteInput,\n            },\n      );\n  }, [isOpen]);\n\n  const hasSelectedDate = !!selectedDate;\n  return (\n    <DSInputGroup\n      containerProps={{\n        onBlur: handleContainerBlur,\n      }}\n      rightAddon={\n        <DatePickerDropdown\n          disabled={disabled}\n          isOpen={isOpen}\n          zIndex={zIndex}\n          menu={\n            <DateTimePickerWrapper ref={dateTimePickerWrapperRef} data-testid=\"date-time-picker\">\n              <div\n                className={hasSelectedDate ? 'has-selected-date' : 'without-selected-date'}\n                data-testid=\"date-time-picker-portal-wrapper\"\n              >\n                <DSDatePickerController\n                  date={selectedDate}\n                  displayFormatDay={displayFormatDay}\n                  enableOutsideDays={enableOutsideDays}\n                  firstDayOfWeek={firstDayOfWeek}\n                  hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}\n                  isDayBlocked={isDayBlocked}\n                  isDayHighlighted={isDayHighlighted}\n                  isOutsideRange={isOutsideRange}\n                  keepOpenOnDateSelect={keepOpenOnDateSelect}\n                  numberOfMonths={numberOfMonths}\n                  onClickEscape={handleClickEscape}\n                  onClose={onClose}\n                  onDateChange={handleDatePickerChange}\n                  onNextMonthClick={onNextMonthClick}\n                  onOutsideClick={(event) => handleOutsideClick(event)}\n                  onPrevMonthClick={onPrevMonthClick}\n                  phrases={phrases}\n                  transitionDuration={transitionDuration}\n                />\n              </div>\n              <TimePickerWrapper>\n                <TimePicker\n                  disabled={disabled}\n                  disabledTimes={disabledTimeRange}\n                  format={format}\n                  hasHeader\n                  hasHeaderDisplay\n                  onTimeChange={onTimeChange}\n                  showSeconds={false}\n                  minutesInterval={minutesInterval}\n                  time={selectedDate}\n                  {...visiblePanels}\n                />\n              </TimePickerWrapper>\n            </DateTimePickerWrapper>\n          }\n          onClick={handleOpen}\n          readOnly={readOnly}\n        />\n      }\n    >\n      <DSInput\n        customInputType={({ onChange: handleChange, ...restInputProps }) => (\n          <>\n            <div style={{ display: 'flex' }}>\n              <DateInputsV2Impl\n                disabled={disabled}\n                onChange={(input) => handleChange(input, 'date')}\n                {...restInputProps}\n                onDateChange={onDateInputDateChange}\n                yearMaxRange={currentYear + 100}\n                yearMinRange={currentYear - 100}\n                time={\n                  restInputProps.value && restInputProps.value.hour && restInputProps.value.isValid()\n                    ? restInputProps.value.format(formatDate)\n                    : restInputProps.value\n                }\n              />\n            </div>\n            <TimeInputImpl\n              disabled={disabled}\n              format={format}\n              onChange={(time) => handleChange(time, 'time')}\n              {...restInputProps}\n            />\n          </>\n        )}\n        isShowElipsisActive={false}\n        disabled={disabled}\n        onChange={handleInputChange}\n        placeholder={placeholder}\n        value={selectedDate}\n      />\n    </DSInputGroup>\n  );\n};\n\nexport { DSDateTimePickerImpl };\nexport default DSDateTimePickerImpl;\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/index.js

@@ -1 +1,8 @@
-export { DateTimePickerWithSchema, default } from './DSDateTimePicker.js';
+import * as React from "react";
+import { default as default2, DSDateTimePicker, DateTimePickerWithSchema } from "./DSDateTimePicker";
+export {
+  DSDateTimePicker,
+  DateTimePickerWithSchema,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default, DSDateTimePicker, DateTimePickerWithSchema } from './DSDateTimePicker';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

package/esm/lang/english.js

@@ -1,7 +1,10 @@
-var english = {
-  placeholder: 'Select date and time',
-  className: '',
-  id: ''
+import * as React from "react";
+var english_default = {
+  placeholder: "Select date and time",
+  className: "",
+  id: ""
 };
-
-export { english as default };
+export {
+  english_default as default
+};
+//# sourceMappingURL=english.js.map

package/esm/lang/english.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/lang/english.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export default {\n  placeholder: 'Select date and time',\n  className: '',\n  id: '',\n};\n"],
+  "mappings": "AAAA;ACAA,IAAO,kBAAQ;AAAA,EACb,aAAa;AAAA,EACb,WAAW;AAAA,EACX,IAAI;AAAA;",
+  "names": []
+}

package/esm/tests/utils.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+import React2 from "react";
+import { ThemeProvider } from "styled-components";
+import { DSTheme } from "@elliemae/ds-system";
+const themeProviderHOC = (Component) => (props) => /* @__PURE__ */ React2.createElement(ThemeProvider, {
+  theme: DSTheme
+}, /* @__PURE__ */ React2.createElement(Component, {
+  ...props
+}));
+export {
+  themeProviderHOC
+};
+//# sourceMappingURL=utils.js.map

package/esm/tests/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/tests/utils.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport { DSTheme } from '@elliemae/ds-system';\n\nexport const themeProviderHOC = (Component) => (props) => (\n  <ThemeProvider theme={DSTheme}>\n    <Component {...props} />\n  </ThemeProvider>\n);\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,mBAAmB,CAAC,cAAc,CAAC,UAC9C,qCAAC,eAAD;AAAA,EAAe,OAAO;AAAA,GACpB,qCAAC,WAAD;AAAA,KAAe;AAAA;",
+  "names": []
+}

package/esm/utils.js

@@ -1,14 +1,16 @@
-import moment from 'moment';
-
+import * as React from "react";
+import moment from "moment";
 const updateDateAndTime = (date, time) => {
   const splittedDate = moment();
-  splittedDate.month(date === null || date === void 0 ? void 0 : date.get('month'));
-  splittedDate.year(date === null || date === void 0 ? void 0 : date.get('year'));
-  splittedDate.date(date === null || date === void 0 ? void 0 : date.get('date'));
-  splittedDate.hour(time === null || time === void 0 ? void 0 : time.get('hour'));
-  splittedDate.minute(time === null || time === void 0 ? void 0 : time.get('minute'));
-  splittedDate.second(time === null || time === void 0 ? void 0 : time.get('second'));
+  splittedDate.month(date?.get("month"));
+  splittedDate.year(date?.get("year"));
+  splittedDate.date(date?.get("date"));
+  splittedDate.hour(time?.get("hour"));
+  splittedDate.minute(time?.get("minute"));
+  splittedDate.second(time?.get("second"));
   return splittedDate;
 };
-
-export { updateDateAndTime };
+export {
+  updateDateAndTime
+};
+//# sourceMappingURL=utils.js.map

package/esm/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/utils.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import moment from 'moment';\n\nexport const updateDateAndTime = (date, time) => {\n  const splittedDate = moment();\n  splittedDate.month(date?.get('month'));\n  splittedDate.year(date?.get('year'));\n  splittedDate.date(date?.get('date'));\n  splittedDate.hour(time?.get('hour'));\n  splittedDate.minute(time?.get('minute'));\n  splittedDate.second(time?.get('second'));\n\n  return splittedDate;\n};\n"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,oBAAoB,CAAC,MAAM,SAAS;AAC/C,QAAM,eAAe;AACrB,eAAa,MAAM,MAAM,IAAI;AAC7B,eAAa,KAAK,MAAM,IAAI;AAC5B,eAAa,KAAK,MAAM,IAAI;AAC5B,eAAa,KAAK,MAAM,IAAI;AAC5B,eAAa,OAAO,MAAM,IAAI;AAC9B,eAAa,OAAO,MAAM,IAAI;AAE9B,SAAO;AAAA;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-date-time-picker",
-  "version": "2.2.0",
+  "version": "2.3.0-alpha.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Date Time Picker",
   "module": "./esm/index.js",
@@ -52,12 +52,12 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-classnames": "2.2.0",
-    "@elliemae/ds-date-picker": "2.2.0",
-    "@elliemae/ds-form": "2.2.0",
-    "@elliemae/ds-system": "2.2.0",
-    "@elliemae/ds-time-picker": "2.2.0",
-    "@elliemae/ds-utilities": "2.2.0",
+    "@elliemae/ds-classnames": "2.3.0-alpha.3",
+    "@elliemae/ds-date-picker": "2.3.0-alpha.3",
+    "@elliemae/ds-form": "2.3.0-alpha.3",
+    "@elliemae/ds-system": "2.3.0-alpha.3",
+    "@elliemae/ds-time-picker": "2.3.0-alpha.3",
+    "@elliemae/ds-utilities": "2.3.0-alpha.3",
     "lodash": "~4.17.21",
     "moment": "~2.29.1",
     "prop-types": "~15.7.2",

package/types/DSDateTimePicker.d.ts

@@ -161,5 +161,5 @@ declare const DateTimePickerWithSchema: {
     propTypes: unknown;
     toTypescript: () => import("react-desc").TypescriptSchema;
 };
-export { DateTimePickerWithSchema };
+export { DateTimePickerWithSchema, DSDateTimePicker };
 export default DSDateTimePicker;

package/types/components/DateTimePickerImpl.d.ts

@@ -72,4 +72,5 @@ declare const DSDateTimePickerImpl: ({ onBlur, placeholder, date, clearable, dat
         onDateInputDateChange?: (() => null) | undefined;
     };
 }) => JSX.Element;
+export { DSDateTimePickerImpl };
 export default DSDateTimePickerImpl;

package/types/index.d.ts

@@ -1 +1 @@
-export { default, DateTimePickerWithSchema } from './DSDateTimePicker';
+export { default, DSDateTimePicker, DateTimePickerWithSchema } from './DSDateTimePicker';