@elliemae/ds-date-picker 3.0.0-next.2 → 3.0.0-next.6

package/dist/esm/components/DatePickerController/DatePickerController.js

@@ -0,0 +1,308 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import * as React from "react";
+import React2 from "react";
+import { debounce } from "lodash";
+import PropTypes from "prop-types";
+import moment from "moment";
+import "react-dates/initialize";
+import { DayPickerSingleDateController } from "react-dates";
+import { convertPropToCssClassName } from "@elliemae/ds-classnames";
+import { ChevronLeft } from "@elliemae/ds-icons";
+import { SingleDatePickerPhrases } from "../../defaultPhrases";
+import { renderMonthElement } from "../DatePickerRenderMonth/DatePickerRenderMonth";
+import { DatePickerNavigation } from "../DatePickerNavigation/DatePickerNavigation";
+import { DatePickerDay } from "../DatePickerDay/DatePickerDay";
+const { classNameElement, classNameBlock } = convertPropToCssClassName("datepicker-range");
+const focusElementOnOpen = debounce((datePickerDom, firstFocusableItemDom, focusCurrentDate) => {
+  if (datePickerDom) {
+    const currentDay = Array.from(datePickerDom?.getElementsByClassName("CalendarDay__today")).filter((el) => !el.className.includes("CalendarDay__outside"))[0];
+    const [calendarDaySelected] = datePickerDom?.getElementsByClassName("CalendarDay__selected");
+    if (calendarDaySelected) {
+      calendarDaySelected?.focus?.();
+    } else if (focusCurrentDate && !calendarDaySelected)
+      currentDay.focus();
+    else {
+      const navButton = firstFocusableItemDom?.closest(".DayPickerNavigation_button>div");
+      navButton?.focus?.();
+    }
+  }
+}, 100);
+class DSDatePickerController extends React2.Component {
+  constructor(props) {
+    super(props);
+    this.handleMouseUp = () => {
+      const focusedElement = document.activeElement;
+      focusedElement?.blur?.();
+    };
+    this.handleKeyDown = (event) => {
+      const [firstDay, ...restOfDays] = document.getElementsByClassName("CalendarMonthGrid_month__horizontal")[1].getElementsByClassName("CalendarDay");
+      const [lastDay] = restOfDays.slice(-1);
+      const { onClickEscape } = this.props;
+      switch (event.key) {
+        case "Home":
+          firstDay.focus();
+          break;
+        case "End":
+          lastDay.focus();
+          break;
+        case "Escape":
+          onClickEscape();
+          break;
+        default:
+          break;
+      }
+    };
+    this.getSafeValue = () => {
+      const { value, date, defaultValue } = this.props;
+      const { selectedDate } = this.state;
+      if (value)
+        return moment(value);
+      if (date)
+        return moment(date);
+      if (defaultValue)
+        return moment(defaultValue);
+      if (selectedDate)
+        return moment(selectedDate);
+      return null;
+    };
+    this.isControlled = () => {
+      const { value, date } = this.props;
+      return Boolean(value) || Boolean(date);
+    };
+    this.handleDateChange = (date) => {
+      const { readOnly, onDateChange, onChange } = this.props;
+      if (!readOnly) {
+        if (!this.isControlled()) {
+          this.setState({ selectedDate: date });
+        }
+        onDateChange(date);
+        onChange(date);
+      }
+    };
+    this.handleChange = (dataInput) => {
+      const { onDateChange, onChange } = this.props;
+      const momentvalue = moment(dataInput.target.value);
+      this.setState({ selectedDate: momentvalue });
+      onDateChange(momentvalue);
+      onChange(momentvalue);
+    };
+    this.handleNavClick = (date, nav) => {
+      const [prev, next] = document.getElementsByClassName("DayPickerNavigation_button");
+      const { onPrevMonthClick, onNextMonthClick } = this.props;
+      if (nav === "prev") {
+        prev?.focus?.();
+        onPrevMonthClick(date);
+      } else {
+        next?.focus?.();
+        onNextMonthClick(date);
+      }
+    };
+    this.insideBlur = (event) => {
+      const { datePicker } = this.state;
+      if (!datePicker.current.contains(event.currentTarget)) {
+        this.props.onClose();
+      }
+    };
+    this.state = {
+      selectedDate: null,
+      firstFocusableItem: React2.createRef(),
+      datePicker: React2.createRef()
+    };
+  }
+  componentDidMount() {
+    const { datePicker, firstFocusableItem } = this.state;
+    datePicker.current.addEventListener("mouseup", this.handleMouseUp, false);
+    document.addEventListener("keydown", this.handleKeyDown, false);
+    setTimeout(() => {
+      focusElementOnOpen(datePicker?.current, firstFocusableItem?.current, this.props.focusCurrentDate);
+    }, 400);
+  }
+  componentWillUnmount() {
+    const { datePicker } = this.state;
+    datePicker.current.removeEventListener("mouseup", this.handleMouseUp, false);
+    document.removeEventListener("keydown", this.handleKeyDown, false);
+  }
+  render() {
+    const {
+      numberOfMonths,
+      enableOutsideDays,
+      transitionDuration,
+      initialVisibleMonth,
+      firstDayOfWeek,
+      keepOpenOnDateSelect,
+      hideKeyboardShortcutsPanel,
+      onClose,
+      phrases,
+      displayFormatDay,
+      isDayBlocked,
+      isOutsideRange,
+      isDayHighlighted,
+      onOutsideClick,
+      key,
+      calendarProps
+    } = this.props;
+    const { datePicker, firstFocusableItem } = this.state;
+    const safedate = this.getSafeValue();
+    const safeinitialMonth = safedate && safedate.isValid() ? () => safedate : () => initialVisibleMonth;
+    return /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("div", __spreadValues({
+      onBlur: this.insideBlur,
+      ref: datePicker,
+      className: classNameBlock("wrapper-day-picker-single-date-controller"),
+      "data-testid": "calendar-wrapper"
+    }, calendarProps), /* @__PURE__ */ React2.createElement(DayPickerSingleDateController, {
+      key,
+      date: safedate,
+      enableOutsideDays,
+      firstDayOfWeek,
+      focused: true,
+      hideKeyboardShortcutsPanel,
+      initialVisibleMonth: safeinitialMonth,
+      isDayBlocked,
+      isDayHighlighted,
+      isOutsideRange,
+      keepOpenOnDateSelect,
+      navNext: /* @__PURE__ */ React2.createElement(DatePickerNavigation, {
+        className: classNameElement("navigation-next")
+      }),
+      navPrev: /* @__PURE__ */ React2.createElement(DatePickerNavigation, {
+        className: classNameElement("navigation-prev"),
+        icon: ChevronLeft,
+        innerRef: firstFocusableItem
+      }),
+      renderMonthElement,
+      numberOfMonths,
+      onClose,
+      onDateChange: this.handleDateChange,
+      onNextMonthClick: this.handleNavClick("next"),
+      onOutsideClick,
+      onPrevMonthClick: this.handleNavClick("prev"),
+      phrases,
+      renderDayContents: (date) => /* @__PURE__ */ React2.createElement(DatePickerDay, {
+        className: classNameElement("day-contents"),
+        date: date.format(displayFormatDay)
+      }),
+      transitionDuration,
+      onTab: (e) => {
+        if (e.target.classList.contains("CalendarDay")) {
+          e.preventDefault();
+          onClose();
+        }
+      }
+    })));
+  }
+}
+DSDatePickerController.defaultProps = {
+  date: "",
+  value: "",
+  enableOutsideDays: false,
+  initialVisibleMonth: moment(),
+  firstDayOfWeek: 0,
+  keepOpenOnDateSelect: true,
+  hideKeyboardShortcutsPanel: true,
+  onPrevMonthClick: () => null,
+  onNextMonthClick: () => null,
+  onClose: () => null,
+  onChange: () => null,
+  onClickEscape: () => null,
+  onDateChange: () => null,
+  phrases: SingleDatePickerPhrases,
+  displayFormatDay: "D",
+  transitionDuration: 0,
+  isDayBlocked: () => false,
+  isOutsideRange: () => false,
+  isDayHighlighted: () => false,
+  numberOfMonths: 1
+};
+DSDatePickerController.propTypes = {
+  date: PropTypes.instanceOf(Date, moment),
+  value: PropTypes.oneOf(PropTypes.instanceOf(Date), PropTypes.instanceOf(moment)),
+  enableOutsideDays: PropTypes.bool,
+  initialVisibleMonth: PropTypes.instanceOf(Date, moment),
+  firstDayOfWeek: PropTypes.number,
+  keepOpenOnDateSelect: PropTypes.bool,
+  hideKeyboardShortcutsPanel: PropTypes.bool,
+  onPrevMonthClick: PropTypes.func,
+  onNextMonthClick: PropTypes.func,
+  onClose: PropTypes.func,
+  onClickEscape: PropTypes.func,
+  onChange: PropTypes.func,
+  onDateChange: PropTypes.func,
+  phrases: SingleDatePickerPhrases,
+  displayFormatDay: PropTypes.string,
+  transitionDuration: PropTypes.number,
+  isDayBlocked: PropTypes.func,
+  isOutsideRange: PropTypes.func,
+  isDayHighlighted: PropTypes.func,
+  numberOfMonths: PropTypes.number
+};
+DSDatePickerController.defaultProps = {
+  date: "",
+  value: "",
+  enableOutsideDays: false,
+  initialVisibleMonth: moment(),
+  firstDayOfWeek: 0,
+  keepOpenOnDateSelect: true,
+  hideKeyboardShortcutsPanel: true,
+  onPrevMonthClick: () => null,
+  onNextMonthClick: () => null,
+  onClose: () => null,
+  onClickEscape: () => null,
+  onChange: () => null,
+  onDateChange: () => null,
+  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
+  }),
+  displayFormatDay: "D",
+  transitionDuration: 0,
+  isDayBlocked: () => false,
+  isOutsideRange: () => false,
+  isDayHighlighted: () => false,
+  numberOfMonths: 1
+};
+export {
+  DSDatePickerController,
+  DSDatePickerController as default
+};
+//# sourceMappingURL=DatePickerController.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/DatePickerController/DatePickerController.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { debounce } from 'lodash';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport 'react-dates/initialize';\nimport { DayPickerSingleDateController } from 'react-dates';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport { SingleDatePickerPhrases } from '../../defaultPhrases';\nimport { renderMonthElement } from '../DatePickerRenderMonth/DatePickerRenderMonth';\nimport { DatePickerNavigation } from '../DatePickerNavigation/DatePickerNavigation';\nimport { DatePickerDay } from '../DatePickerDay/DatePickerDay';\n\ninterface DSDatePickerControllerStateType {\n  selectedDate: any;\n  firstFocusableItem: React.RefObject<HTMLElement>;\n  datePicker: React.RefObject<HTMLElement>;\n}\n\nconst { classNameElement, classNameBlock } = convertPropToCssClassName('datepicker-range');\n\nconst focusElementOnOpen = debounce((datePickerDom, firstFocusableItemDom, focusCurrentDate) => {\n  if (datePickerDom) {\n    const currentDay = Array.from(datePickerDom?.getElementsByClassName('CalendarDay__today')).filter(\n      (el) => !el.className.includes('CalendarDay__outside'),\n    )[0];\n    const [calendarDaySelected] = datePickerDom?.getElementsByClassName('CalendarDay__selected');\n    if (calendarDaySelected) {\n      calendarDaySelected?.focus?.();\n    } else if (focusCurrentDate && !calendarDaySelected) currentDay.focus();\n    else {\n      const navButton = firstFocusableItemDom?.closest('.DayPickerNavigation_button>div');\n      navButton?.focus?.();\n    }\n  }\n}, 100);\n\nexport default class DSDatePickerController extends React.Component<any, DSDatePickerControllerStateType> {\n  // eslint-disable-next-line react/static-property-placement\n  static defaultProps = {\n    date: '',\n    value: '',\n    enableOutsideDays: false,\n    initialVisibleMonth: moment(),\n    firstDayOfWeek: 0,\n    keepOpenOnDateSelect: true,\n    hideKeyboardShortcutsPanel: true,\n    onPrevMonthClick: () => null,\n    onNextMonthClick: () => null,\n    onClose: () => null,\n    onChange: () => null,\n    onClickEscape: () => null,\n    onDateChange: () => null,\n    phrases: SingleDatePickerPhrases,\n    // displayFormat: 'L',\n    displayFormatDay: 'D',\n    transitionDuration: 0,\n    // verticalSpacing: 0,\n    isDayBlocked: () => false,\n    isOutsideRange: () => false,\n    isDayHighlighted: () => false,\n    numberOfMonths: 1,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      selectedDate: null,\n      firstFocusableItem: React.createRef(),\n      datePicker: React.createRef(),\n    };\n  }\n\n  componentDidMount() {\n    const { datePicker, firstFocusableItem } = this.state;\n    datePicker.current.addEventListener('mouseup', this.handleMouseUp, false);\n    document.addEventListener('keydown', this.handleKeyDown, false);\n    setTimeout(() => {\n      focusElementOnOpen(datePicker?.current, firstFocusableItem?.current, this.props.focusCurrentDate);\n    }, 400);\n  }\n\n  componentWillUnmount() {\n    const { datePicker } = this.state;\n    datePicker.current.removeEventListener('mouseup', this.handleMouseUp, false);\n    document.removeEventListener('keydown', this.handleKeyDown, false);\n  }\n\n  handleMouseUp = () => {\n    const focusedElement = document.activeElement;\n\n    focusedElement?.blur?.();\n  };\n\n  handleKeyDown = (event) => {\n    const [firstDay, ...restOfDays] = document\n      .getElementsByClassName('CalendarMonthGrid_month__horizontal')[1]\n      .getElementsByClassName('CalendarDay');\n    const [lastDay] = restOfDays.slice(-1);\n    const { onClickEscape } = this.props;\n\n    switch (event.key) {\n      case 'Home':\n        firstDay.focus();\n        break;\n      case 'End':\n        lastDay.focus();\n        break;\n      case 'Escape':\n        onClickEscape();\n        break;\n      default:\n        break;\n    }\n  };\n\n  getSafeValue = () => {\n    const { value, date, defaultValue } = this.props;\n    const { selectedDate } = this.state;\n\n    if (value) return moment(value);\n    if (date) return moment(date);\n    if (defaultValue) return moment(defaultValue);\n    if (selectedDate) return moment(selectedDate);\n\n    return null;\n  };\n\n  isControlled = () => {\n    const { value, date } = this.props;\n    return Boolean(value) || Boolean(date);\n  };\n\n  handleDateChange = (date) => {\n    const { readOnly, onDateChange, onChange } = this.props;\n    if (!readOnly) {\n      if (!this.isControlled()) {\n        this.setState({ selectedDate: date });\n      }\n      onDateChange(date);\n      onChange(date);\n    }\n  };\n\n  handleChange = (dataInput) => {\n    const { onDateChange, onChange } = this.props;\n    const momentvalue = moment(dataInput.target.value);\n    this.setState({ selectedDate: momentvalue });\n    onDateChange(momentvalue);\n    onChange(momentvalue);\n  };\n\n  handleNavClick = (date, nav) => {\n    const [prev, next] = document.getElementsByClassName('DayPickerNavigation_button');\n    const { onPrevMonthClick, onNextMonthClick } = this.props;\n\n    if (nav === 'prev') {\n      prev?.focus?.();\n      onPrevMonthClick(date);\n    } else {\n      next?.focus?.();\n      onNextMonthClick(date);\n    }\n  };\n\n  insideBlur = (event) => {\n    const { datePicker } = this.state;\n    if (!datePicker.current.contains(event.currentTarget)) {\n      this.props.onClose();\n    }\n  };\n\n  render() {\n    const {\n      numberOfMonths,\n      enableOutsideDays,\n      transitionDuration,\n      initialVisibleMonth,\n      firstDayOfWeek,\n      keepOpenOnDateSelect,\n      hideKeyboardShortcutsPanel,\n      onClose,\n      phrases,\n      displayFormatDay,\n      isDayBlocked,\n      isOutsideRange,\n      isDayHighlighted,\n      onOutsideClick,\n      key,\n      calendarProps,\n    } = this.props;\n    const { datePicker, firstFocusableItem } = this.state;\n\n    const safedate = this.getSafeValue();\n    const safeinitialMonth = safedate && safedate.isValid() ? () => safedate : () => initialVisibleMonth;\n\n    return (\n      <div>\n        <div\n          onBlur={this.insideBlur}\n          ref={datePicker}\n          className={classNameBlock('wrapper-day-picker-single-date-controller')}\n          data-testid=\"calendar-wrapper\"\n          {...calendarProps}\n        >\n          <DayPickerSingleDateController\n            key={key}\n            date={safedate}\n            enableOutsideDays={enableOutsideDays}\n            firstDayOfWeek={firstDayOfWeek}\n            focused\n            hideKeyboardShortcutsPanel={hideKeyboardShortcutsPanel}\n            initialVisibleMonth={safeinitialMonth}\n            isDayBlocked={isDayBlocked}\n            isDayHighlighted={isDayHighlighted}\n            isOutsideRange={isOutsideRange}\n            keepOpenOnDateSelect={keepOpenOnDateSelect}\n            navNext={<DatePickerNavigation className={classNameElement('navigation-next')} />}\n            navPrev={\n              <DatePickerNavigation\n                className={classNameElement('navigation-prev')}\n                icon={ChevronLeft}\n                innerRef={firstFocusableItem}\n              />\n            }\n            renderMonthElement={renderMonthElement}\n            numberOfMonths={numberOfMonths}\n            onClose={onClose}\n            onDateChange={this.handleDateChange}\n            onNextMonthClick={this.handleNavClick('next')}\n            onOutsideClick={onOutsideClick}\n            onPrevMonthClick={this.handleNavClick('prev')}\n            phrases={phrases}\n            renderDayContents={(date) => (\n              <DatePickerDay className={classNameElement('day-contents')} date={date.format(displayFormatDay)} />\n            )}\n            transitionDuration={transitionDuration}\n            onTab={(e) => {\n              if (e.target.classList.contains('CalendarDay')) {\n                e.preventDefault();\n                onClose();\n              }\n            }}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n\nDSDatePickerController.propTypes = {\n  date: PropTypes.instanceOf(Date, moment),\n  value: PropTypes.oneOf(PropTypes.instanceOf(Date), PropTypes.instanceOf(moment)),\n  enableOutsideDays: PropTypes.bool,\n  initialVisibleMonth: PropTypes.instanceOf(Date, moment),\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  onClickEscape: PropTypes.func,\n  onChange: PropTypes.func,\n  onDateChange: PropTypes.func,\n  phrases: SingleDatePickerPhrases,\n  // displayFormat: PropTypes.string,\n  displayFormatDay: PropTypes.string,\n  transitionDuration: PropTypes.number,\n  // verticalSpacing: PropTypes.number,\n  isDayBlocked: PropTypes.func,\n  isOutsideRange: PropTypes.func,\n  isDayHighlighted: PropTypes.func,\n  numberOfMonths: PropTypes.number,\n};\n\nDSDatePickerController.defaultProps = {\n  date: '',\n  value: '',\n  enableOutsideDays: false,\n  initialVisibleMonth: moment(),\n  firstDayOfWeek: 0,\n  keepOpenOnDateSelect: true,\n  hideKeyboardShortcutsPanel: true,\n  onPrevMonthClick: () => null,\n  onNextMonthClick: () => null,\n  onClose: () => null,\n  onClickEscape: () => null,\n  onChange: () => null,\n  onDateChange: () => null,\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  // displayFormat: 'L',\n  displayFormatDay: 'D',\n  transitionDuration: 0,\n  // verticalSpacing: 0,\n  isDayBlocked: () => false,\n  isOutsideRange: () => false,\n  isDayHighlighted: () => false,\n  numberOfMonths: 1,\n};\n\nexport { DSDatePickerController };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/components/DatePickerDay/DatePickerDay.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import React2 from "react";
+import PropTypes from "prop-types";
+const Day = ({ className = "date-picker-content-day", date = "" }) => /* @__PURE__ */ React2.createElement("div", {
+  className,
+  "data-testid": `datepicker-day-${date}`
+}, /* @__PURE__ */ React2.createElement("div", {
+  className: `${className}-half`,
+  "data-testid": "datepicker-day"
+}, date));
+Day.propTypes = {
+  className: PropTypes.string,
+  date: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+var DatePickerDay_default = Day;
+export {
+  Day as DatePickerDay,
+  DatePickerDay_default as default
+};
+//# sourceMappingURL=DatePickerDay.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/DatePickerDay/DatePickerDay.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Day = ({ className = 'date-picker-content-day', date = '' }) => (\n  <div className={className} data-testid={`datepicker-day-${date}`}>\n    <div className={`${className}-half`} data-testid=\"datepicker-day\">\n      {date}\n    </div>\n  </div>\n);\nDay.propTypes = {\n  className: PropTypes.string,\n  date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n};\n\nexport { Day as DatePickerDay };\nexport default Day;\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEA,MAAM,MAAM,CAAC,EAAE,YAAY,2BAA2B,OAAO,SAC3D,qCAAC,OAAD;AAAA,EAAK;AAAA,EAAsB,eAAa,kBAAkB;AAAA,GACxD,qCAAC,OAAD;AAAA,EAAK,WAAW,GAAG;AAAA,EAAkB,eAAY;AAAA,GAC9C;AAIP,IAAI,YAAY;AAAA,EACd,WAAW,UAAU;AAAA,EACrB,MAAM,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA;AAIzD,IAAO,wBAAQ;",
+  "names": []
+}

package/dist/esm/components/DatePickerDropdown.js

@@ -0,0 +1,75 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import * as React from "react";
+import React2 from "react";
+import PropTypes from "prop-types";
+import { convertPropToCssClassName } from "@elliemae/ds-classnames";
+import { DSPopper } from "@elliemae/ds-popper";
+import { DatePickerPicker, PickerPropsTypes } from "./DatePickerPicker/DatePickerPicker";
+const { classNameElement } = convertPropToCssClassName("datepicker-range");
+const noop = () => null;
+function DatePickerDropdown({
+  disabled = false,
+  readOnly,
+  onClick = noop,
+  isOpen,
+  menu,
+  zIndex = 1,
+  pickerProps,
+  pickerRef
+}) {
+  return /* @__PURE__ */ React2.createElement(DSPopper, {
+    contentComponent: menu,
+    isOpen,
+    modifiers: {
+      preventOverflow: {
+        enabled: true,
+        padding: 0,
+        boundariesElement: "window"
+      }
+    },
+    showArrow: false,
+    triggerComponent: /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(DatePickerPicker, __spreadProps(__spreadValues({
+      innerRef: pickerRef
+    }, pickerProps), {
+      className: classNameElement("picker"),
+      disabled,
+      onClick,
+      readOnly
+    }))),
+    zIndex
+  });
+}
+DatePickerDropdown.propTypes = {
+  pickerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  onClick: PropTypes.func,
+  isOpen: PropTypes.bool,
+  menu: PropTypes.element,
+  zIndex: PropTypes.number,
+  pickerProps: PropTypes.shape(PickerPropsTypes)
+};
+var DatePickerDropdown_default = DatePickerDropdown;
+export {
+  DatePickerDropdown,
+  DatePickerDropdown_default as default
+};
+//# sourceMappingURL=DatePickerDropdown.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/DatePickerDropdown.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSPopper } from '@elliemae/ds-popper';\nimport { DatePickerPicker, PickerPropsTypes } from './DatePickerPicker/DatePickerPicker';\nconst { classNameElement } = convertPropToCssClassName('datepicker-range');\n\nconst noop = () => null;\nfunction DatePickerDropdown({\n  disabled = false,\n  readOnly,\n  onClick = noop,\n  isOpen,\n  menu,\n  zIndex = 1,\n  pickerProps,\n  pickerRef,\n}) {\n  return (\n    <DSPopper\n      contentComponent={menu}\n      isOpen={isOpen}\n      modifiers={{\n        preventOverflow: {\n          enabled: true,\n          padding: 0,\n          boundariesElement: 'window',\n        },\n      }}\n      showArrow={false}\n      triggerComponent={\n        <div>\n          <DatePickerPicker\n            innerRef={pickerRef}\n            {...pickerProps}\n            className={classNameElement('picker')}\n            disabled={disabled}\n            onClick={onClick}\n            readOnly={readOnly}\n          />\n        </div>\n      }\n      zIndex={zIndex}\n    />\n  );\n}\n\nDatePickerDropdown.propTypes = {\n  pickerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n  disabled: PropTypes.bool,\n  readOnly: PropTypes.bool,\n  onClick: PropTypes.func,\n  isOpen: PropTypes.bool,\n  menu: PropTypes.element,\n  zIndex: PropTypes.number,\n  pickerProps: PropTypes.shape(PickerPropsTypes),\n};\n\nexport { DatePickerDropdown };\nexport default DatePickerDropdown;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA,MAAM,EAAE,qBAAqB,0BAA0B;AAEvD,MAAM,OAAO,MAAM;AACnB,4BAA4B;AAAA,EAC1B,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,GACC;AACD,SACE,qCAAC,UAAD;AAAA,IACE,kBAAkB;AAAA,IAClB;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB;AAAA,QACf,SAAS;AAAA,QACT,SAAS;AAAA,QACT,mBAAmB;AAAA;AAAA;AAAA,IAGvB,WAAW;AAAA,IACX,kBACE,qCAAC,OAAD,MACE,qCAAC,kBAAD;AAAA,MACE,UAAU;AAAA,OACN,cAFN;AAAA,MAGE,WAAW,iBAAiB;AAAA,MAC5B;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAIN;AAAA;AAAA;AAKN,mBAAmB,YAAY;AAAA,EAC7B,WAAW,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU;AAAA,EACrF,UAAU,UAAU;AAAA,EACpB,UAAU,UAAU;AAAA,EACpB,SAAS,UAAU;AAAA,EACnB,QAAQ,UAAU;AAAA,EAClB,MAAM,UAAU;AAAA,EAChB,QAAQ,UAAU;AAAA,EAClB,aAAa,UAAU,MAAM;AAAA;AAI/B,IAAO,6BAAQ;",
+  "names": []
+}

package/dist/esm/components/DatePickerHeader/DatePickerHeader.js

@@ -0,0 +1,45 @@
+import * as React from "react";
+import React2, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import moment from "moment";
+import { DSDateInputV2, DSInputGroup } from "@elliemae/ds-form";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+const DATE_FORMAT = "MMDDYYYY";
+const blockname = "date-picker-header";
+const Header = aggregatedClasses("div")(blockname);
+const isFn = (variable) => typeof variable === "function";
+const DatePickerHeader = ({ onInputChange = () => null, selectedDate, updateKeyDate }) => {
+  const [value, setValue] = useState(isFn(selectedDate?.format) ? selectedDate.format(DATE_FORMAT) : "");
+  useEffect(() => {
+    if (isFn(selectedDate?.format)) {
+      setValue(selectedDate?.format(DATE_FORMAT));
+    }
+  }, [selectedDate]);
+  const handleOnChange = (newDate) => {
+    setValue(newDate);
+  };
+  const handleOnKeyDown = (e) => {
+    if (e.key === "Enter" && value.length === DATE_FORMAT.length) {
+      const momentValue = moment(value, DATE_FORMAT);
+      onInputChange(momentValue);
+      updateKeyDate(momentValue);
+    }
+  };
+  return /* @__PURE__ */ React2.createElement(Header, null, /* @__PURE__ */ React2.createElement(DSInputGroup, null, /* @__PURE__ */ React2.createElement(DSDateInputV2, {
+    onChange: handleOnChange,
+    onKeyDown: handleOnKeyDown,
+    value,
+    containerProps: { "data-testid": "start-date" }
+  })));
+};
+DatePickerHeader.propTypes = {
+  onInputChange: PropTypes.func,
+  selectedDate: PropTypes.any,
+  updateKeyDate: PropTypes.any
+};
+var DatePickerHeader_default = DatePickerHeader;
+export {
+  DatePickerHeader,
+  DatePickerHeader_default as default
+};
+//# sourceMappingURL=DatePickerHeader.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/DatePickerHeader/DatePickerHeader.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-console */\nimport React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport moment from 'moment';\nimport { DSDateInputV2, DSInputGroup } from '@elliemae/ds-form';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\n\nconst DATE_FORMAT = 'MMDDYYYY';\nconst blockname = 'date-picker-header';\nconst Header = aggregatedClasses('div')(blockname);\n\nconst isFn = (variable) => typeof variable === 'function';\n\nconst DatePickerHeader = ({ onInputChange = () => null, selectedDate, updateKeyDate }) => {\n  const [value, setValue] = useState(isFn(selectedDate?.format) ? selectedDate.format(DATE_FORMAT) : '');\n\n  useEffect(() => {\n    if (isFn(selectedDate?.format)) {\n      setValue(selectedDate?.format(DATE_FORMAT));\n    }\n  }, [selectedDate]);\n\n  const handleOnChange = (newDate) => {\n    setValue(newDate);\n  };\n\n  const handleOnKeyDown = (e) => {\n    if (e.key === 'Enter' && value.length === DATE_FORMAT.length) {\n      const momentValue = moment(value, DATE_FORMAT);\n      onInputChange(momentValue);\n      updateKeyDate(momentValue);\n    }\n  };\n\n  return (\n    <Header>\n      <DSInputGroup>\n        <DSDateInputV2\n          onChange={handleOnChange}\n          onKeyDown={handleOnKeyDown}\n          value={value}\n          containerProps={{ 'data-testid': 'start-date' }}\n        />\n      </DSInputGroup>\n    </Header>\n  );\n};\n\nDatePickerHeader.propTypes = {\n  onInputChange: PropTypes.func,\n  selectedDate: PropTypes.any,\n  updateKeyDate: PropTypes.any,\n};\n\nexport { DatePickerHeader };\nexport default DatePickerHeader;\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA,MAAM,cAAc;AACpB,MAAM,YAAY;AAClB,MAAM,SAAS,kBAAkB,OAAO;AAExC,MAAM,OAAO,CAAC,aAAa,OAAO,aAAa;AAE/C,MAAM,mBAAmB,CAAC,EAAE,gBAAgB,MAAM,MAAM,cAAc,oBAAoB;AACxF,QAAM,CAAC,OAAO,YAAY,SAAS,KAAK,cAAc,UAAU,aAAa,OAAO,eAAe;AAEnG,YAAU,MAAM;AACd,QAAI,KAAK,cAAc,SAAS;AAC9B,eAAS,cAAc,OAAO;AAAA;AAAA,KAE/B,CAAC;AAEJ,QAAM,iBAAiB,CAAC,YAAY;AAClC,aAAS;AAAA;AAGX,QAAM,kBAAkB,CAAC,MAAM;AAC7B,QAAI,EAAE,QAAQ,WAAW,MAAM,WAAW,YAAY,QAAQ;AAC5D,YAAM,cAAc,OAAO,OAAO;AAClC,oBAAc;AACd,oBAAc;AAAA;AAAA;AAIlB,SACE,qCAAC,QAAD,MACE,qCAAC,cAAD,MACE,qCAAC,eAAD;AAAA,IACE,UAAU;AAAA,IACV,WAAW;AAAA,IACX;AAAA,IACA,gBAAgB,EAAE,eAAe;AAAA;AAAA;AAO3C,iBAAiB,YAAY;AAAA,EAC3B,eAAe,UAAU;AAAA,EACzB,cAAc,UAAU;AAAA,EACxB,eAAe,UAAU;AAAA;AAI3B,IAAO,2BAAQ;",
+  "names": []
+}

package/dist/esm/components/DatePickerNavigation/DatePickerNavigation.js

@@ -0,0 +1,37 @@
+import * as React from "react";
+import React2 from "react";
+import PropTypes from "prop-types";
+import { ChevronRight } from "@elliemae/ds-icons";
+import { DSIconColors, DSIconSizes } from "@elliemae/ds-icon";
+import {
+  iconSizes,
+  iconColors
+} from "@elliemae/ds-shared/prop-types";
+const Navigation = ({
+  className = "date-picker-navigation",
+  icon: Icon = ChevronRight,
+  color = DSIconColors.NEUTRAL,
+  size = DSIconSizes.S,
+  innerRef
+}) => /* @__PURE__ */ React2.createElement("div", {
+  tabIndex: 0,
+  "data-testid": "date-picker-nav"
+}, /* @__PURE__ */ React2.createElement(Icon, {
+  className,
+  color,
+  innerRef,
+  size
+}));
+Navigation.propTypes = {
+  className: "date-picker-navigation",
+  icon: PropTypes.element,
+  color: PropTypes.oneOf(iconColors),
+  size: PropTypes.oneOf(iconSizes),
+  innerRef: PropTypes.any
+};
+var DatePickerNavigation_default = Navigation;
+export {
+  Navigation as DatePickerNavigation,
+  DatePickerNavigation_default as default
+};
+//# sourceMappingURL=DatePickerNavigation.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/DatePickerNavigation/DatePickerNavigation.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { ChevronRight } from '@elliemae/ds-icons';\nimport { DSIconColors, DSIconSizes } from '@elliemae/ds-icon';\nimport {\n  iconSizes,\n  iconColors,\n} from '@elliemae/ds-shared/prop-types';\n\nconst Navigation = ({\n  className = 'date-picker-navigation',\n  icon: Icon = ChevronRight,\n  color = DSIconColors.NEUTRAL,\n  size = DSIconSizes.S,\n  innerRef,\n}) => (\n  <div tabIndex={0} data-testid=\"date-picker-nav\">\n    <Icon className={className} color={color} innerRef={innerRef} size={size} />\n  </div>\n);\nNavigation.propTypes = {\n  className: 'date-picker-navigation',\n  icon: PropTypes.element,\n  color: PropTypes.oneOf(iconColors),\n  size: PropTypes.oneOf(iconSizes),\n  innerRef: PropTypes.any,\n};\n\nexport { Navigation as DatePickerNavigation };\nexport default Navigation;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAKA,MAAM,aAAa,CAAC;AAAA,EAClB,YAAY;AAAA,EACZ,MAAM,OAAO;AAAA,EACb,QAAQ,aAAa;AAAA,EACrB,OAAO,YAAY;AAAA,EACnB;AAAA,MAEA,qCAAC,OAAD;AAAA,EAAK,UAAU;AAAA,EAAG,eAAY;AAAA,GAC5B,qCAAC,MAAD;AAAA,EAAM;AAAA,EAAsB;AAAA,EAAc;AAAA,EAAoB;AAAA;AAGlE,WAAW,YAAY;AAAA,EACrB,WAAW;AAAA,EACX,MAAM,UAAU;AAAA,EAChB,OAAO,UAAU,MAAM;AAAA,EACvB,MAAM,UAAU,MAAM;AAAA,EACtB,UAAU,UAAU;AAAA;AAItB,IAAO,+BAAQ;",
+  "names": []
+}

package/dist/esm/components/DatePickerPicker/DatePickerPicker.js

@@ -0,0 +1,84 @@
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import * as React from "react";
+import React2 from "react";
+import PropTypes from "prop-types";
+import { DSIconColors, DSIconSizes } from "@elliemae/ds-icon";
+import { DatePicker } from "@elliemae/ds-icons";
+import { DSButton, buttonTypes } from "@elliemae/ds-button";
+import { iconSizes } from "@elliemae/ds-shared/prop-types";
+const Picker = (_a) => {
+  var _b = _a, {
+    className = "date-picker-icon",
+    disabled = false,
+    icon = /* @__PURE__ */ React2.createElement(DatePicker, null),
+    size = DSIconSizes.M,
+    buttonActionType = "secondary",
+    onClick = () => null,
+    onBlur = () => null,
+    readOnly = false,
+    tabIndex = 0,
+    innerRef
+  } = _b, rest = __objRest(_b, [
+    "className",
+    "disabled",
+    "icon",
+    "size",
+    "buttonActionType",
+    "onClick",
+    "onBlur",
+    "readOnly",
+    "tabIndex",
+    "innerRef"
+  ]);
+  return /* @__PURE__ */ React2.createElement(DSButton, {
+    innerRef,
+    "aria-label": rest["aria-label"] || "Date Picker Button",
+    buttonType: buttonActionType,
+    className,
+    color: !disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL,
+    disabled,
+    icon,
+    onBlur,
+    onClick,
+    readOnly,
+    size,
+    tabIndex,
+    "data-testid": "btn-date-picker"
+  });
+};
+const PickerPropsTypes = {
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  icon: PropTypes.element,
+  size: PropTypes.oneOf(iconSizes),
+  buttonActionType: PropTypes.oneOf(buttonTypes),
+  onClick: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  readOnly: PropTypes.bool,
+  tabIndex: PropTypes.number
+};
+Picker.propTypes = PickerPropsTypes;
+var DatePickerPicker_default = Picker;
+export {
+  Picker as DatePickerPicker,
+  Picker,
+  PickerPropsTypes,
+  DatePickerPicker_default as default
+};
+//# sourceMappingURL=DatePickerPicker.js.map