@elliemae/ds-date-time-picker 2.3.0-alpha.8 → 2.3.0-next.2

package/dist/esm/DSDateTimePicker.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSDateTimePicker.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport moment from 'moment';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { SingleDatePickerPhrases } from '@elliemae/ds-date-picker';\nimport { DSDateTimePickerImpl } from './components/DateTimePickerImpl';\nimport english from './lang/english';\n\nconst {\n  placeholder: placeholderDefault,\n  className: classNameDefault,\n  id: idDefault,\n} = english;\n\nconst DSDateTimePicker = ({\n  containerProps = {},\n  className = classNameDefault,\n  id = idDefault,\n  placeholder = placeholderDefault,\n  date,\n  clearable = false,\n  onBlur = () => null,\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: () => null,\n    onDateChange: () => 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: () => null,\n    disabledTimes: undefined,\n    minutesInterval: 1,\n  },\n  dateInputProps = {\n    onDateInputDateChange: () => null,\n  },\n}) => {\n  const { cssClassName } = convertPropToCssClassName(\n    'datetimepicker',\n    className,\n    {\n      id,\n    },\n  );\n  return (\n    <div className={cssClassName} {...containerProps}>\n      <DSDateTimePickerImpl\n        clearable={clearable}\n        date={date}\n        datePickerProps={datePickerProps}\n        onBlur={onBlur}\n        placeholder={placeholder}\n        timePickerProps={timePickerProps}\n        dateInputProps={dateInputProps}\n      />\n    </div>\n  );\n};\n\nconst dateTimePickerProps = {\n  containerProps: PropTypes.object.description(\n    'Set of Properties attached to the main container',\n  ),\n  className: PropTypes.string.description('html class attribute'),\n  id: PropTypes.string.description('components id'),\n  /**\n   * on blur callback\n   */\n  onBlur: PropTypes.func.description('on blur callback'),\n  /**\n   * Initial date, by default current date\n   */\n  date: PropTypes.instanceOf(Date, moment).description(\n    'Initial date, by default current date',\n  ),\n  /**\n   * Flag to trigger onDateChange on error\n   */\n  clearable: PropTypes.bool.description(\n    'Flag to trigger onDateChange on error',\n  ),\n  /**\n   * DatePicker properties\n   */\n  datePickerProps: PropTypes.shape({\n    disabled: PropTypes.bool,\n    numberOfMonths: PropTypes.number,\n    readOnly: PropTypes.bool,\n    enableOutsideDays: PropTypes.bool,\n    transitionDuration: PropTypes.number,\n    firstDayOfWeek: PropTypes.number,\n    keepOpenOnDateSelect: PropTypes.bool,\n    hideKeyboardShortcutsPanel: PropTypes.bool,\n    onPrevMonthClick: PropTypes.func,\n    onNextMonthClick: PropTypes.func,\n    onClose: PropTypes.func,\n    onDateChange: PropTypes.func,\n    phrases: PropTypes.shape({\n      calendarLabel: PropTypes.string,\n      closeDatePicker: PropTypes.string,\n      clearDates: PropTypes.string,\n      focusStartDate: PropTypes.string,\n      jumpToPrevMonth: PropTypes.string,\n      jumpToNextMonth: PropTypes.string,\n      keyboardShortcuts: PropTypes.string,\n      showKeyboardShortcutsPanel: PropTypes.string,\n      hideKeyboardShortcutsPanel: PropTypes.string,\n      openThisPanel: PropTypes.string,\n      enterKey: PropTypes.string,\n      leftArrowRightArrow: PropTypes.string,\n      upArrowDownArrow: PropTypes.string,\n      pageUpPageDown: PropTypes.string,\n      homeEnd: PropTypes.string,\n      escape: PropTypes.string,\n      questionMark: PropTypes.string,\n      selectFocusedDate: PropTypes.string,\n      moveFocusByOneDay: PropTypes.string,\n      moveFocusByOneWeek: PropTypes.string,\n      moveFocusByOneMonth: PropTypes.string,\n      moveFocustoStartAndEndOfWeek: PropTypes.string,\n      returnFocusToInput: PropTypes.string,\n      keyboardNavigationInstructions: PropTypes.string,\n      chooseAvailableStartDate: PropTypes.func,\n      chooseAvailableEndDate: PropTypes.func,\n      dateIsUnavailable: PropTypes.func,\n      dateIsSelected: PropTypes.func,\n      /**\n       * ZIndex for the picker popup\n       */\n      zIndex: PropTypes.number,\n    }),\n    displayFormatDay: PropTypes.string,\n    isDayBlocked: PropTypes.func,\n    isOutsideRange: PropTypes.func,\n    isDayHighlighted: PropTypes.func,\n  }).description('DatePicker properties'),\n  /**\n   * Input placeholder\n   */\n  placeholder: PropTypes.string.description('Input placeholder'),\n  /**\n   * TimePicker properties\n   */\n  timePickerProps: PropTypes.shape({\n    format: PropTypes.string,\n    onChange: PropTypes.func,\n  }).description('TimePicker properties'),\n  dateInputProps: PropTypes.shape({\n    onDateInputDateChange: PropTypes.func,\n  }).description('DateInputProperties'),\n};\n\nDSDateTimePicker.propTypes = dateTimePickerProps;\nconst DateTimePickerWithSchema = describe(DSDateTimePicker);\nDateTimePickerWithSchema.propTypes = dateTimePickerProps;\n\nexport { DateTimePickerWithSchema, DSDateTimePicker };\nexport default DSDateTimePicker;\n"],
-  "mappings": "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",
-  "names": []
-}

package/dist/esm/components/DateTimePickerImpl.js

@@ -1,225 +0,0 @@
-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 = `${formatDate} ${format}`;
-  useEffect(() => {
-    if (date) {
-      setSelectedDate(moment(date));
-    } else if (date === null)
-      setSelectedDate(void 0);
-  }, [date]);
-  const visiblePanels = useMemo(() => getVisibleTimeByFormat(format), []);
-  const currentYear = moment().year();
-  const handleDatePickerChange = (dateSelected) => {
-    const splittedDate = updateDateAndTime(dateSelected, selectedDate);
-    if (!readOnly) {
-      setSelectedDate(splittedDate);
-      onDateChange(splittedDate);
-    }
-  };
-  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") {
-      const splittedDate = updateDateAndTime(inputMoment, selectedDate);
-      if (inputValue.length < 8) {
-        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;
-      if (hour > from.hour && hour < to.hour || hour === to.hour && min < to.min) {
-        timeBlocked = true;
-      }
-    }
-    if (timeBlocked)
-      onErrorTime({ message: "time blocked", inputValue });
-    const dateBlocked = isDayBlocked(inputMoment);
-    if (dateBlocked)
-      onErrorDate({ message: "date blocked", inputValue });
-    if (!timeBlocked && !dateBlocked) {
-      onDateChange(inputValue);
-    }
-  };
-  const handleOutsideClick = (event) => {
-    if (!dateTimePickerWrapperRef.current.contains(event.target)) {
-      setIsOpen(false);
-    }
-  };
-  const handleClickEscape = () => setIsOpen(false);
-  const handleOpen = () => setIsOpen(true);
-  const handleContainerBlur = (event) => {
-    if (!isOpen && !event.currentTarget.contains(event.relatedTarget)) {
-      onBlur(event, selectedDate?.isValid() ? selectedDate : {
-        error: true,
-        message: "incomplete input",
-        input: incompleteInput
-      });
-      if (clearable && !selectedDate && !!incompleteInput) {
-        const inputMoment = moment(incompleteInput, fullFormat);
-        const splittedDate = updateDateAndTime(inputMoment, selectedDate);
-        setSelectedDate(splittedDate);
-        onDateChange(splittedDate);
-      }
-    }
-  };
-  useEffect(() => {
-    if (!isOpen)
-      onBlur({}, selectedDate?.isValid() ? selectedDate : {
-        error: true,
-        message: "incomplete input",
-        input: incompleteInput
-      });
-  }, [isOpen]);
-  const hasSelectedDate = !!selectedDate;
-  return /* @__PURE__ */ React2.createElement(DSInputGroup, {
-    containerProps: {
-      onBlur: handleContainerBlur
-    },
-    rightAddon: /* @__PURE__ */ React2.createElement(DatePickerDropdown, {
-      disabled,
-      isOpen,
-      zIndex,
-      menu: /* @__PURE__ */ React2.createElement(DateTimePickerWrapper, {
-        ref: dateTimePickerWrapperRef,
-        "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
-    })
-  }, /* @__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,
-    onChange: handleInputChange,
-    placeholder,
-    value: selectedDate
-  }));
-};
-var DateTimePickerImpl_default = DSDateTimePickerImpl;
-export {
-  DSDateTimePickerImpl,
-  DateTimePickerImpl_default as default
-};
-//# sourceMappingURL=DateTimePickerImpl.js.map

package/dist/esm/components/DateTimePickerImpl.js.map

@@ -1,7 +0,0 @@
-{
-  "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": "AAAA;ACOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,wBAAwB,kBAAkB,OAAO,WAAW;AAClE,MAAM,aAAa,kBAAkB,kBAAkB,WAAW;AAClE,MAAM,oBAAoB,kBAAkB,OAAO,WAAW;AAE9D,MAAM,aAAa;AAEnB,MAAM,uBAAuB,CAAC;AAAA,EAC5B,SAAS,MAAM;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,IACf,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,IACrB,iBAAiB;AAAA,IACjB,uBAAuB;AAAA,IACvB,6BAA6B;AAAA,IAC7B,mBAAmB,MAAM;AAAA,IACzB,mBAAmB,MAAM;AAAA,IACzB,UAAU,MAAM;AAAA,IAChB,UAAU,qBAAqB,MAAM;AAAA,IACrC,eAAe,MAAM;AAAA,IACrB,SAAS,cAAc,MAAM;AAAA,IAC7B,UAAU;AAAA,IACV,mBAAmB;AAAA,IACnB,eAAe,MAAM;AAAA,IACrB,iBAAiB,MAAM;AAAA,IACvB,mBAAmB,MAAM;AAAA,IACzB,SAAS;AAAA;AAAA,EAEX,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,UAAU,qBAAqB,MAAM;AAAA,IACrC,gBAAgB;AAAA,IAChB,SAAS,cAAc,MAAM;AAAA,IAC7B,kBAAkB;AAAA;AAAA,EAEpB,gBAAgB,EAAE,wBAAwB,MAAM;AAAA,MAC5C;AACJ,QAAM,CAAC,cAAc,mBAAmB,SAAS;AACjD,QAAM,CAAC,iBAAiB,sBAAsB,SAAS;AACvD,QAAM,CAAC,QAAQ,aAAa,SAAS;AAErC,QAAM,oBAAoB,iBAAiB;AAAA,IACzC,MAAM,kBAAkB,cAAc;AAAA,IACtC,IAAI,kBAAkB,cAAc;AAAA;AAGtC,QAAM,2BAA2B;AACjC,QAAM,aAAa,GAAG,cAAc;AAEpC,YAAU,MAAM;AACd,QAAI,MAAM;AACR,sBAAgB,OAAO;AAAA,eACd,SAAS;AAAM,sBAAgB;AAAA,KACzC,CAAC;AAEJ,QAAM,gBAAgB,QAAQ,MAAM,uBAAuB,SAAS;AAEpE,QAAM,cAAc,SAAS;AAE7B,QAAM,yBAAyB,CAAC,iBAAiB;AAC/C,UAAM,eAAe,kBAAkB,cAAc;AACrD,QAAI,CAAC,UAAU;AACb,sBAAgB;AAChB,mBAAa;AAAA;AAAA;AAIjB,QAAM,eAAe,CAAC,eAAe;AACnC,UAAM,eAAe,kBAAkB,cAAc;AACrD,uBAAmB;AACnB,oBAAgB;AAAA;AAGlB,QAAM,oBAAoB,CAAC,YAAY,SAAS;AAC9C,uBAAmB;AACnB,QAAI,cAAc;AAClB,UAAM,cAAc,OAAO,YAAY;AACvC,uBAAmB;AACnB,QAAI,SAAS,QAAQ;AACnB,YAAM,eAAe,kBAAkB,aAAa;AACpD,UAAI,WAAW,SAAS,GAAG;AACzB,oBAAY,EAAE,SAAS,mBAAmB;AAC1C,YAAI;AAAW,uBAAa;AAC5B;AAAA;AAEF,UAAI,WAAW,WAAW,KAAK,YAAY,WAAW;AACpD,wBAAgB;AAChB,2BAAmB;AAAA;AAErB,mBAAa;AACb;AAAA;AAGF,QAAI,mBAAmB;AACrB,YAAM,OAAO,WAAW;AACxB,YAAM,MAAM,WAAW;AACvB,YAAM,EAAE,MAAM,OAAO;AAErB,UAAK,OAAO,KAAK,QAAQ,OAAO,GAAG,QAAU,SAAS,GAAG,QAAQ,MAAM,GAAG,KAAM;AAC9E,sBAAc;AAAA;AAAA;AAGlB,QAAI;AAAa,kBAAY,EAAE,SAAS,gBAAgB;AACxD,UAAM,cAAc,aAAa;AACjC,QAAI;AAAa,kBAAY,EAAE,SAAS,gBAAgB;AACxD,QAAI,CAAC,eAAe,CAAC,aAAa;AAChC,mBAAa;AAAA;AAAA;AAIjB,QAAM,qBAAqB,CAAC,UAAU;AACpC,QAAI,CAAC,yBAAyB,QAAQ,SAAS,MAAM,SAAS;AAC5D,gBAAU;AAAA;AAAA;AAId,QAAM,oBAAoB,MAAM,UAAU;AAC1C,QAAM,aAAa,MAAM,UAAU;AAEnC,QAAM,sBAAsB,CAAC,UAAU;AACrC,QAAI,CAAC,UAAU,CAAC,MAAM,cAAc,SAAS,MAAM,gBAAgB;AACjE,aACE,OACA,cAAc,YACV,eACA;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,OAAO;AAAA;AAGf,UAAI,aAAa,CAAC,gBAAgB,CAAC,CAAC,iBAAiB;AACnD,cAAM,cAAc,OAAO,iBAAiB;AAC5C,cAAM,eAAe,kBAAkB,aAAa;AAEpD,wBAAgB;AAChB,qBAAa;AAAA;AAAA;AAAA;AAKnB,YAAU,MAAM;AACd,QAAI,CAAC;AACH,aACE,IACA,cAAc,YACV,eACA;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,OAAO;AAAA;AAAA,KAGhB,CAAC;AAEJ,QAAM,kBAAkB,CAAC,CAAC;AAC1B,SACE,qCAAC,cAAD;AAAA,IACE,gBAAgB;AAAA,MACd,QAAQ;AAAA;AAAA,IAEV,YACE,qCAAC,oBAAD;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA,MACE,qCAAC,uBAAD;AAAA,QAAuB,KAAK;AAAA,QAA0B,eAAY;AAAA,SAChE,qCAAC,OAAD;AAAA,QACE,WAAW,kBAAkB,sBAAsB;AAAA,QACnD,eAAY;AAAA,SAEZ,qCAAC,wBAAD;AAAA,QACE,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA,cAAc;AAAA,QACd;AAAA,QACA,gBAAgB,CAAC,UAAU,mBAAmB;AAAA,QAC9C;AAAA,QACA;AAAA,QACA;AAAA,WAGJ,qCAAC,mBAAD,MACE,qCAAC,YAAD;AAAA,QACE;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA,WAAS;AAAA,QACT,kBAAgB;AAAA,QAChB;AAAA,QACA,aAAa;AAAA,QACb;AAAA,QACA,MAAM;AAAA,WACF;AAAA;AAAA,MAKZ,SAAS;AAAA,MACT;AAAA;AAAA,KAIJ,qCAAC,SAAD;AAAA,IACE,iBAAiB,CAAC,EAAE,UAAU,iBAAiB,qBAC7C,4DACE,qCAAC,OAAD;AAAA,MAAK,OAAO,EAAE,SAAS;AAAA,OACrB,qCAAC,kBAAD;AAAA,MACE;AAAA,MACA,UAAU,CAAC,UAAU,aAAa,OAAO;AAAA,SACrC;AAAA,MACJ,cAAc;AAAA,MACd,cAAc,cAAc;AAAA,MAC5B,cAAc,cAAc;AAAA,MAC5B,MACE,eAAe,SAAS,eAAe,MAAM,QAAQ,eAAe,MAAM,YACtE,eAAe,MAAM,OAAO,cAC5B,eAAe;AAAA,SAIzB,qCAAC,eAAD;AAAA,MACE;AAAA,MACA;AAAA,MACA,UAAU,CAAC,SAAS,aAAa,MAAM;AAAA,SACnC;AAAA;AAAA,IAIV,qBAAqB;AAAA,IACrB;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA;AAAA;AAOf,IAAO,6BAAQ;",
-  "names": []
-}

package/dist/esm/index.js

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

package/dist/esm/index.js.map

@@ -1,7 +0,0 @@
-{
-  "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/dist/esm/lang/english.js

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

package/dist/esm/lang/english.js.map

@@ -1,7 +0,0 @@
-{
-  "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/dist/esm/tests/utils.js

@@ -1,13 +0,0 @@
-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/dist/esm/tests/utils.js.map

@@ -1,7 +0,0 @@
-{
-  "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/dist/esm/utils.js

@@ -1,16 +0,0 @@
-import * as React from "react";
-import moment from "moment";
-const updateDateAndTime = (date, time) => {
-  const splittedDate = moment();
-  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
-};
-//# sourceMappingURL=utils.js.map

package/dist/esm/utils.js.map

@@ -1,7 +0,0 @@
-{
-  "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": []
-}