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

package/esm/DSDateTimePicker.js

@@ -0,0 +1,182 @@
+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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import moment from 'moment';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { SingleDatePickerPhrases } from '@elliemae/ds-date-picker';
+import DSDateTimePickerImpl from './components/DateTimePickerImpl.js';
+import english from './lang/english.js';
+import { jsx } from 'react/jsx-runtime';
+
+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 {
+  placeholder: placeholderDefault,
+  className: classNameDefault,
+  id: idDefault
+} = english;
+
+const DSDateTimePicker = _ref => {
+  let {
+    containerProps = {},
+    className = classNameDefault,
+    id = idDefault,
+    placeholder = placeholderDefault,
+    date,
+    clearable = false,
+    onBlur = () => null,
+    datePickerProps = {
+      disabled: false,
+      numberOfMonths: 1,
+      readOnly: false,
+      enableOutsideDays: false,
+      transitionDuration: 0,
+      firstDayOfWeek: 0,
+      keepOpenOnDateSelect: true,
+      hideKeyboardShortcutsPanel: true,
+      onPrevMonthClick: () => null,
+      onNextMonthClick: () => null,
+      onClose: () => null,
+      onchange: () => null,
+      onDateChange: () => null,
+      phrases: SingleDatePickerPhrases,
+      displayFormatDay: 'D',
+      isDayBlocked: () => false,
+      isOutsideRange: () => false,
+      isDayHighlighted: () => false,
+      zIndex: 11
+    },
+    timePickerProps = {
+      format: 'hh:mm A',
+      onChange: () => null,
+      disabledTimes: undefined,
+      minutesInterval: 1
+    },
+    dateInputProps = {
+      onDateInputDateChange: () => null
+    }
+  } = _ref;
+  const {
+    cssClassName
+  } = convertPropToCssClassName('datetimepicker', className, {
+    id
+  });
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+    className: cssClassName
+  }, containerProps), {}, {
+    children: /*#__PURE__*/_jsx(DSDateTimePickerImpl, {
+      clearable: clearable,
+      date: date,
+      datePickerProps: datePickerProps,
+      onBlur: onBlur,
+      placeholder: placeholder,
+      timePickerProps: timePickerProps,
+      dateInputProps: dateInputProps
+    })
+  }));
+};
+
+const dateTimePickerProps = {
+  containerProps: PropTypes.object.description('Set of Properties attached to the main container'),
+  className: PropTypes.string.description('html class attribute'),
+  id: PropTypes.string.description('components id'),
+
+  /**
+   * on blur callback
+   */
+  onBlur: PropTypes.func.description('on blur callback'),
+
+  /**
+   * Initial date, by default current date
+   */
+  date: PropTypes.instanceOf(Date, moment).description('Initial date, by default current date'),
+
+  /**
+   * Flag to trigger onDateChange on error
+   */
+  clearable: PropTypes.bool.description('Flag to trigger onDateChange on error'),
+
+  /**
+   * DatePicker properties
+   */
+  datePickerProps: PropTypes.shape({
+    disabled: PropTypes.bool,
+    numberOfMonths: PropTypes.number,
+    readOnly: PropTypes.bool,
+    enableOutsideDays: PropTypes.bool,
+    transitionDuration: PropTypes.number,
+    firstDayOfWeek: PropTypes.number,
+    keepOpenOnDateSelect: PropTypes.bool,
+    hideKeyboardShortcutsPanel: PropTypes.bool,
+    onPrevMonthClick: PropTypes.func,
+    onNextMonthClick: PropTypes.func,
+    onClose: PropTypes.func,
+    onDateChange: PropTypes.func,
+    phrases: PropTypes.shape({
+      calendarLabel: PropTypes.string,
+      closeDatePicker: PropTypes.string,
+      clearDates: PropTypes.string,
+      focusStartDate: PropTypes.string,
+      jumpToPrevMonth: PropTypes.string,
+      jumpToNextMonth: PropTypes.string,
+      keyboardShortcuts: PropTypes.string,
+      showKeyboardShortcutsPanel: PropTypes.string,
+      hideKeyboardShortcutsPanel: PropTypes.string,
+      openThisPanel: PropTypes.string,
+      enterKey: PropTypes.string,
+      leftArrowRightArrow: PropTypes.string,
+      upArrowDownArrow: PropTypes.string,
+      pageUpPageDown: PropTypes.string,
+      homeEnd: PropTypes.string,
+      escape: PropTypes.string,
+      questionMark: PropTypes.string,
+      selectFocusedDate: PropTypes.string,
+      moveFocusByOneDay: PropTypes.string,
+      moveFocusByOneWeek: PropTypes.string,
+      moveFocusByOneMonth: PropTypes.string,
+      moveFocustoStartAndEndOfWeek: PropTypes.string,
+      returnFocusToInput: PropTypes.string,
+      keyboardNavigationInstructions: PropTypes.string,
+      chooseAvailableStartDate: PropTypes.func,
+      chooseAvailableEndDate: PropTypes.func,
+      dateIsUnavailable: PropTypes.func,
+      dateIsSelected: PropTypes.func,
+
+      /**
+       * ZIndex for the picker popup
+       */
+      zIndex: PropTypes.number
+    }),
+    displayFormatDay: PropTypes.string,
+    isDayBlocked: PropTypes.func,
+    isOutsideRange: PropTypes.func,
+    isDayHighlighted: PropTypes.func
+  }).description('DatePicker properties'),
+
+  /**
+   * Input placeholder
+   */
+  placeholder: PropTypes.string.description('Input placeholder'),
+
+  /**
+   * TimePicker properties
+   */
+  timePickerProps: PropTypes.shape({
+    format: PropTypes.string,
+    onChange: PropTypes.func
+  }).description('TimePicker properties'),
+  dateInputProps: PropTypes.shape({
+    onDateInputDateChange: PropTypes.func
+  }).description('DateInputProperties')
+};
+const DateTimePickerWithSchema = describe(DSDateTimePicker);
+DateTimePickerWithSchema.propTypes = dateTimePickerProps;
+
+export { DateTimePickerWithSchema, DSDateTimePicker as default };

package/esm/components/DateTimePickerImpl.js

@@ -0,0 +1,276 @@
+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);
+  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);
+  useEffect(() => {
+    if (date) {
+      setSelectedDate(moment(date));
+    } else if (date === null) setSelectedDate(undefined);
+  }, [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 !== null && selectedDate !== void 0 && 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 !== null && selectedDate !== void 0 && selectedDate.isValid() ? selectedDate : {
+      error: true,
+      message: 'incomplete input',
+      input: incompleteInput
+    });
+  }, [isOpen]);
+  const hasSelectedDate = !!selectedDate;
+  return /*#__PURE__*/_jsx(DSInputGroup, {
+    containerProps: {
+      onBlur: handleContainerBlur
+    },
+    rightAddon: /*#__PURE__*/_jsx(DatePickerDropdown, {
+      disabled: disabled,
+      isOpen: isOpen,
+      zIndex: zIndex,
+      menu: /*#__PURE__*/jsxs(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)))]
+      }),
+      onClick: handleOpen,
+      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))]
+      });
+    },
+    isShowElipsisActive: false,
+    disabled: disabled,
+    onChange: handleInputChange,
+    placeholder: placeholder,
+    value: selectedDate
+  }));
+};
+
+export { DSDateTimePickerImpl as default };

package/esm/index.js

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

package/esm/lang/english.js

@@ -0,0 +1,7 @@
+var english = {
+  placeholder: 'Select date and time',
+  className: '',
+  id: ''
+};
+
+export { english as default };

package/esm/utils.js

@@ -0,0 +1,14 @@
+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'));
+  return splittedDate;
+};
+
+export { updateDateAndTime };

package/package.json

@@ -1,38 +1,35 @@
 {
   "name": "@elliemae/ds-date-time-picker",
-  "version": "2.3.0-alpha.8",
+  "version": "2.3.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Date Time Picker",
-  "files": [
-    "dist"
-  ],
-  "module": "./dist/esm/index.js",
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/types/index.d.ts",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
     },
     "./utils": {
-      "import": "./dist/esm/utils.js",
-      "require": "./dist/cjs/utils.js"
+      "import": "./esm/utils.js",
+      "require": "./cjs/utils.js"
     },
     "./tests/utils": {
-      "import": "./dist/esm/tests/utils.js",
-      "require": "./dist/cjs/tests/utils.js"
+      "import": "./esm/tests/utils.js",
+      "require": "./cjs/tests/utils.js"
     },
     "./lang/english": {
-      "import": "./dist/esm/lang/english.js",
-      "require": "./dist/cjs/lang/english.js"
+      "import": "./esm/lang/english.js",
+      "require": "./cjs/lang/english.js"
     },
     "./DSDateTimePicker": {
-      "import": "./dist/esm/DSDateTimePicker.js",
-      "require": "./dist/cjs/DSDateTimePicker.js"
+      "import": "./esm/DSDateTimePicker.js",
+      "require": "./cjs/DSDateTimePicker.js"
     },
     "./components/DateTimePickerImpl": {
-      "import": "./dist/esm/components/DateTimePickerImpl.js",
-      "require": "./dist/cjs/components/DateTimePickerImpl.js"
+      "import": "./esm/components/DateTimePickerImpl.js",
+      "require": "./cjs/components/DateTimePickerImpl.js"
     }
   },
   "sideEffects": [
@@ -44,24 +41,30 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "npm": ">=7",
+    "node": ">=14"
   },
   "author": "ICE MT",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
+    "prebuild": "exit 0",
+    "predev": "exit 0",
+    "build": "node ../../scripts/build/build.js"
+  },
   "dependencies": {
-    "@elliemae/ds-classnames": "2.3.0-alpha.8",
-    "@elliemae/ds-date-picker": "2.3.0-alpha.8",
-    "@elliemae/ds-form": "2.3.0-alpha.8",
-    "@elliemae/ds-system": "2.3.0-alpha.8",
-    "@elliemae/ds-time-picker": "2.3.0-alpha.8",
-    "@elliemae/ds-utilities": "2.3.0-alpha.8",
+    "@elliemae/ds-classnames": "2.3.0-next.2",
+    "@elliemae/ds-date-picker": "2.3.0-next.2",
+    "@elliemae/ds-form": "2.3.0-next.2",
+    "@elliemae/ds-system": "2.3.0-next.1",
+    "@elliemae/ds-time-picker": "2.3.0-next.2",
+    "@elliemae/ds-utilities": "2.3.0-next.2",
     "lodash": "~4.17.21",
     "moment": "~2.29.1",
     "prop-types": "~15.7.2",
     "react-desc": "^4.1.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "~5.15.1",
+    "@testing-library/jest-dom": "~5.15.0",
     "@testing-library/react": "~12.1.2",
     "@testing-library/user-event": "~13.5.0",
     "styled-components": "~5.3.3"
@@ -74,12 +77,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": false
-  },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }