@elliemae/ds-date-picker 2.3.0-next.0 → 3.0.0-alpha.0

package/dist/esm/components/DatePickerRange/DatePickerRange.js

@@ -0,0 +1,81 @@
+import * as React from "react";
+import React2, { useState, useRef } from "react";
+import { DayPickerRangeController } from "react-dates";
+import moment from "moment";
+import { aggregatedClasses, convertPropToCssClassName } from "@elliemae/ds-classnames";
+import { ChevronLeft } from "@elliemae/ds-icons";
+import { DatePickerDay } from "../DatePickerDay/DatePickerDay";
+import { DatePickerNavigation } from "../DatePickerNavigation/DatePickerNavigation";
+import { DatePickerRangeHeader } from "../DatePickerRangeHeader/DatePickerRangeHeader";
+const blockname = "date-range";
+const Wrapper = aggregatedClasses("div")(blockname, "wrapper");
+const { classNameElement, classNameBlock } = convertPropToCssClassName("datepicker");
+const START_DATE = "startDate";
+const END_DATE = "endDate";
+const DatePickerRangeDate = ({ dateStart, dateEnd, displayFormatDay = "D", showHeader = true, otherProps }) => {
+  const [selectedDateStart, setSelectedDateStart] = useState(dateStart);
+  const [selectedDateEnd, setSelectedDateEnd] = useState(dateEnd);
+  const [focusedInput, setFocusedInput] = useState(START_DATE);
+  const datePickerRef = useRef();
+  const handleFocusChange = () => {
+    setFocusedInput(focusedInput === START_DATE ? END_DATE : START_DATE);
+  };
+  const handleDatesChange = ({ startDate, endDate }) => {
+    setSelectedDateStart(startDate);
+    setSelectedDateEnd(endDate);
+  };
+  const handleStartInputChange = (newDate) => {
+    setSelectedDateStart(newDate);
+  };
+  const handleEndInputChange = (newDate) => {
+    setSelectedDateEnd(newDate);
+  };
+  const getSafeDateStartValue = () => {
+    if (selectedDateStart) {
+      return moment(selectedDateStart);
+    }
+  };
+  const getSafeDateEndValue = () => {
+    if (selectedDateEnd) {
+      return moment(selectedDateEnd);
+    }
+  };
+  const safeStartDate = getSafeDateStartValue();
+  const safeEndDate = getSafeDateEndValue();
+  return /* @__PURE__ */ React2.createElement(Wrapper, null, showHeader && /* @__PURE__ */ React2.createElement(DatePickerRangeHeader, {
+    onEndInputChange: handleEndInputChange,
+    onStartInputChange: handleStartInputChange,
+    selectedEndDate: safeEndDate,
+    selectedStartDate: safeStartDate
+  }), /* @__PURE__ */ React2.createElement("div", {
+    ref: datePickerRef,
+    className: classNameBlock("wrapper-day-picker-single-date-controller")
+  }, /* @__PURE__ */ React2.createElement(DayPickerRangeController, {
+    ...otherProps,
+    enableOutsideDays: true,
+    endDate: safeEndDate,
+    focused: true,
+    focusedInput,
+    hideKeyboardShortcutsPanel: true,
+    navNext: /* @__PURE__ */ React2.createElement(DatePickerNavigation, {
+      className: classNameElement("navigation-next")
+    }),
+    navPrev: /* @__PURE__ */ React2.createElement(DatePickerNavigation, {
+      className: classNameElement("navigation-prev"),
+      icon: ChevronLeft
+    }),
+    onDatesChange: handleDatesChange,
+    onFocusChange: handleFocusChange,
+    renderDayContents: (date) => /* @__PURE__ */ React2.createElement(DatePickerDay, {
+      className: classNameElement("day-contents"),
+      date: date.format(displayFormatDay)
+    }),
+    startDate: safeStartDate
+  })));
+};
+var DatePickerRange_default = DatePickerRangeDate;
+export {
+  DatePickerRangeDate,
+  DatePickerRange_default as default
+};
+//# sourceMappingURL=DatePickerRange.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/DatePickerRange/DatePickerRange.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable consistent-return */\nimport React, { useState, useRef } from 'react';\nimport { DayPickerRangeController } from 'react-dates';\nimport moment from 'moment';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport { DatePickerDay } from '../DatePickerDay/DatePickerDay';\nimport { DatePickerNavigation } from '../DatePickerNavigation/DatePickerNavigation';\nimport { DatePickerRangeHeader } from '../DatePickerRangeHeader/DatePickerRangeHeader';\n\nconst blockname = 'date-range';\nconst Wrapper = aggregatedClasses('div')(blockname, 'wrapper');\n\nconst { classNameElement, classNameBlock } = convertPropToCssClassName('datepicker');\n\nconst START_DATE = 'startDate';\nconst END_DATE = 'endDate';\n\nconst DatePickerRangeDate = ({ dateStart, dateEnd, displayFormatDay = 'D', showHeader = true, otherProps }) => {\n  const [selectedDateStart, setSelectedDateStart] = useState(dateStart);\n  const [selectedDateEnd, setSelectedDateEnd] = useState(dateEnd);\n  const [focusedInput, setFocusedInput] = useState(START_DATE);\n  const datePickerRef = useRef();\n\n  const handleFocusChange = () => {\n    setFocusedInput(focusedInput === START_DATE ? END_DATE : START_DATE);\n  };\n\n  const handleDatesChange = ({ startDate, endDate }) => {\n    setSelectedDateStart(startDate);\n    setSelectedDateEnd(endDate);\n  };\n\n  const handleStartInputChange = (newDate) => {\n    setSelectedDateStart(newDate);\n  };\n\n  const handleEndInputChange = (newDate) => {\n    setSelectedDateEnd(newDate);\n  };\n\n  const getSafeDateStartValue = () => {\n    if (selectedDateStart) {\n      return moment(selectedDateStart);\n    }\n  };\n\n  const getSafeDateEndValue = () => {\n    if (selectedDateEnd) {\n      return moment(selectedDateEnd);\n    }\n  };\n\n  const safeStartDate = getSafeDateStartValue();\n  const safeEndDate = getSafeDateEndValue();\n\n  return (\n    <Wrapper>\n      {showHeader && (\n        <DatePickerRangeHeader\n          onEndInputChange={handleEndInputChange}\n          onStartInputChange={handleStartInputChange}\n          selectedEndDate={safeEndDate}\n          selectedStartDate={safeStartDate}\n        />\n      )}\n      <div ref={datePickerRef} className={classNameBlock('wrapper-day-picker-single-date-controller')}>\n        <DayPickerRangeController\n          {...otherProps}\n          enableOutsideDays\n          endDate={safeEndDate}\n          focused\n          focusedInput={focusedInput}\n          hideKeyboardShortcutsPanel\n          navNext={<DatePickerNavigation className={classNameElement('navigation-next')} />}\n          navPrev={<DatePickerNavigation className={classNameElement('navigation-prev')} icon={ChevronLeft} />}\n          onDatesChange={handleDatesChange}\n          onFocusChange={handleFocusChange}\n          renderDayContents={(date) => (\n            <DatePickerDay className={classNameElement('day-contents')} date={date.format(displayFormatDay)} />\n          )}\n          startDate={safeStartDate}\n        />\n      </div>\n    </Wrapper>\n  );\n};\n\nexport { DatePickerRangeDate };\nexport default DatePickerRangeDate;\n"],
+  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAClB,MAAM,UAAU,kBAAkB,OAAO,WAAW;AAEpD,MAAM,EAAE,kBAAkB,mBAAmB,0BAA0B;AAEvE,MAAM,aAAa;AACnB,MAAM,WAAW;AAEjB,MAAM,sBAAsB,CAAC,EAAE,WAAW,SAAS,mBAAmB,KAAK,aAAa,MAAM,iBAAiB;AAC7G,QAAM,CAAC,mBAAmB,wBAAwB,SAAS;AAC3D,QAAM,CAAC,iBAAiB,sBAAsB,SAAS;AACvD,QAAM,CAAC,cAAc,mBAAmB,SAAS;AACjD,QAAM,gBAAgB;AAEtB,QAAM,oBAAoB,MAAM;AAC9B,oBAAgB,iBAAiB,aAAa,WAAW;AAAA;AAG3D,QAAM,oBAAoB,CAAC,EAAE,WAAW,cAAc;AACpD,yBAAqB;AACrB,uBAAmB;AAAA;AAGrB,QAAM,yBAAyB,CAAC,YAAY;AAC1C,yBAAqB;AAAA;AAGvB,QAAM,uBAAuB,CAAC,YAAY;AACxC,uBAAmB;AAAA;AAGrB,QAAM,wBAAwB,MAAM;AAClC,QAAI,mBAAmB;AACrB,aAAO,OAAO;AAAA;AAAA;AAIlB,QAAM,sBAAsB,MAAM;AAChC,QAAI,iBAAiB;AACnB,aAAO,OAAO;AAAA;AAAA;AAIlB,QAAM,gBAAgB;AACtB,QAAM,cAAc;AAEpB,SACE,qCAAC,SAAD,MACG,cACC,qCAAC,uBAAD;AAAA,IACE,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,MAGvB,qCAAC,OAAD;AAAA,IAAK,KAAK;AAAA,IAAe,WAAW,eAAe;AAAA,KACjD,qCAAC,0BAAD;AAAA,OACM;AAAA,IACJ,mBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,SAAO;AAAA,IACP;AAAA,IACA,4BAA0B;AAAA,IAC1B,SAAS,qCAAC,sBAAD;AAAA,MAAsB,WAAW,iBAAiB;AAAA;AAAA,IAC3D,SAAS,qCAAC,sBAAD;AAAA,MAAsB,WAAW,iBAAiB;AAAA,MAAoB,MAAM;AAAA;AAAA,IACrF,eAAe;AAAA,IACf,eAAe;AAAA,IACf,mBAAmB,CAAC,SAClB,qCAAC,eAAD;AAAA,MAAe,WAAW,iBAAiB;AAAA,MAAiB,MAAM,KAAK,OAAO;AAAA;AAAA,IAEhF,WAAW;AAAA;AAAA;AAQrB,IAAO,0BAAQ;",
+  "names": []
+}

package/dist/esm/components/DatePickerRangeHeader/DatePickerRangeHeader.js

@@ -0,0 +1,109 @@
+import * as React from "react";
+import React2, { useState, useEffect, useRef } 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 blockname = "date-range-picker";
+const DATE_FORMAT = "MMDDYYYY";
+const MAGIC_NUMBER = 999;
+const Header = aggregatedClasses("div")(blockname, "header", ({ invalidDate }) => ({ invalidDate }));
+const DatePickerRangeHeader = ({
+  onStartInputChange = () => null,
+  onEndInputChange = () => null,
+  onFocusChange = () => null,
+  selectedStartDate,
+  selectedEndDate,
+  handleDatesChange,
+  autoJumpOnEdit = true
+}) => {
+  const [startValue, setStartValue] = useState(selectedStartDate);
+  const [endValue, setEndValue] = useState(selectedEndDate);
+  const startInputRef = useRef();
+  const endInputRef = useRef();
+  useEffect(() => {
+    if (selectedStartDate) {
+      setStartValue(selectedStartDate.format(DATE_FORMAT));
+    }
+    if (selectedEndDate) {
+      setEndValue(selectedEndDate.format(DATE_FORMAT));
+    }
+  }, [selectedStartDate, selectedEndDate]);
+  const isValidRangeDate = (start, end) => {
+    let isValidRange = false;
+    if (start && end) {
+      const momentStart = moment(start, DATE_FORMAT);
+      const momentEnd = moment(end, DATE_FORMAT);
+      isValidRange = momentStart.isBefore(momentEnd);
+    }
+    return isValidRange;
+  };
+  const handleOnFocus = (inputType) => onFocusChange(inputType);
+  const handleOnChangeStart = (newStartValue) => {
+    const y = newStartValue.substring(4);
+    const momentValue = moment(newStartValue, DATE_FORMAT);
+    if (newStartValue && newStartValue.length === DATE_FORMAT.length) {
+      onStartInputChange(momentValue);
+    }
+    setStartValue(newStartValue);
+    if (autoJumpOnEdit && parseInt(y, 10) > MAGIC_NUMBER && endInputRef?.current?.firstChild?.focus) {
+      endInputRef.current.firstChild.focus();
+    }
+  };
+  const handleOnChangeEnd = (newEndValue) => {
+    const momentValue = moment(newEndValue, DATE_FORMAT);
+    if (isValidRangeDate(startValue, newEndValue) && newEndValue && newEndValue.length === DATE_FORMAT.length) {
+      onEndInputChange(momentValue);
+    }
+    setEndValue(newEndValue);
+  };
+  const handleOnKeyDownStart = (e) => {
+    const isValid = isValidRangeDate(startValue, endValue);
+    const momentStart = moment(startValue, DATE_FORMAT);
+    const momentEnd = moment(endValue, DATE_FORMAT);
+    if (e.key === "Enter" && startValue) {
+      onStartInputChange(momentStart);
+      if (isValid)
+        handleDatesChange({ startDate: momentStart, endDate: momentEnd });
+    }
+  };
+  const handleOnKeyDownEnd = (e) => {
+    const isValid = isValidRangeDate(startValue, endValue);
+    const momentStart = moment(startValue, DATE_FORMAT);
+    const momentEnd = moment(endValue, DATE_FORMAT);
+    if (e.key === "Enter" && isValid) {
+      handleDatesChange({ startDate: momentStart, endDate: momentEnd });
+      onEndInputChange(momentEnd);
+    }
+  };
+  return /* @__PURE__ */ React2.createElement(Header, null, /* @__PURE__ */ React2.createElement(DSInputGroup, null, /* @__PURE__ */ React2.createElement(DSDateInputV2, {
+    containerProps: { "data-testid": "start-date" },
+    innerRef: startInputRef,
+    onChange: handleOnChangeStart,
+    onFocus: () => handleOnFocus("startDate"),
+    onKeyDown: handleOnKeyDownStart,
+    value: startValue
+  }), /* @__PURE__ */ React2.createElement(DSDateInputV2, {
+    containerProps: { "data-testid": "end-date" },
+    innerRef: endInputRef,
+    onChange: handleOnChangeEnd,
+    onFocus: () => handleOnFocus("endDate"),
+    onKeyDown: handleOnKeyDownEnd,
+    value: endValue
+  })));
+};
+DatePickerRangeHeader.propTypes = {
+  onStartInputChange: PropTypes.func,
+  onEndInputChange: PropTypes.func,
+  onFocusChange: PropTypes.func,
+  selectedStartDate: PropTypes.any,
+  selectedEndDate: PropTypes.any,
+  handleDatesChange: PropTypes.func,
+  autoJumpOnEdit: PropTypes.bool
+};
+var DatePickerRangeHeader_default = DatePickerRangeHeader;
+export {
+  DatePickerRangeHeader,
+  DatePickerRangeHeader_default as default
+};
+//# sourceMappingURL=DatePickerRangeHeader.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/DatePickerRangeHeader/DatePickerRangeHeader.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable consistent-return */\n/* eslint-disable no-unused-expressions */\nimport React, { useState, useEffect, useRef } 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 blockname = 'date-range-picker';\n\nconst DATE_FORMAT = 'MMDDYYYY';\n\n// When year is greater than 999 it means the user finished writing\n// the year for the range, because they must type 4 numbers for the year\n// to be higher than 999\nconst MAGIC_NUMBER = 999;\n\nconst Header = aggregatedClasses('div')(blockname, 'header', ({ invalidDate }) => ({ invalidDate }));\n\nconst DatePickerRangeHeader = ({\n  onStartInputChange = () => null,\n  onEndInputChange = () => null,\n  onFocusChange = () => null,\n  selectedStartDate,\n  selectedEndDate,\n  handleDatesChange,\n  autoJumpOnEdit = true,\n}) => {\n  const [startValue, setStartValue] = useState(selectedStartDate);\n  const [endValue, setEndValue] = useState(selectedEndDate);\n  const startInputRef = useRef();\n  const endInputRef = useRef();\n\n  useEffect(() => {\n    if (selectedStartDate) {\n      setStartValue(selectedStartDate.format(DATE_FORMAT));\n    }\n    if (selectedEndDate) {\n      setEndValue(selectedEndDate.format(DATE_FORMAT));\n    }\n  }, [selectedStartDate, selectedEndDate]);\n\n  const isValidRangeDate = (start, end) => {\n    let isValidRange = false;\n    if (start && end) {\n      const momentStart = moment(start, DATE_FORMAT);\n      const momentEnd = moment(end, DATE_FORMAT);\n      isValidRange = momentStart.isBefore(momentEnd);\n    }\n    return isValidRange;\n  };\n\n  const handleOnFocus = (inputType) => onFocusChange(inputType);\n\n  const handleOnChangeStart = (newStartValue) => {\n    const y = newStartValue.substring(4);\n    const momentValue = moment(newStartValue, DATE_FORMAT);\n    if (newStartValue && newStartValue.length === DATE_FORMAT.length) {\n      onStartInputChange(momentValue);\n    }\n\n    setStartValue(newStartValue);\n    if (autoJumpOnEdit && parseInt(y, 10) > MAGIC_NUMBER && endInputRef?.current?.firstChild?.focus) {\n      endInputRef.current.firstChild.focus();\n    }\n  };\n\n  const handleOnChangeEnd = (newEndValue) => {\n    const momentValue = moment(newEndValue, DATE_FORMAT);\n    if (isValidRangeDate(startValue, newEndValue) && newEndValue && newEndValue.length === DATE_FORMAT.length) {\n      onEndInputChange(momentValue);\n    }\n    setEndValue(newEndValue);\n  };\n\n  const handleOnKeyDownStart = (e) => {\n    const isValid = isValidRangeDate(startValue, endValue);\n    const momentStart = moment(startValue, DATE_FORMAT);\n    const momentEnd = moment(endValue, DATE_FORMAT);\n    if (e.key === 'Enter' && startValue) {\n      onStartInputChange(momentStart);\n      if (isValid) handleDatesChange({ startDate: momentStart, endDate: momentEnd });\n    }\n  };\n\n  const handleOnKeyDownEnd = (e) => {\n    const isValid = isValidRangeDate(startValue, endValue);\n    const momentStart = moment(startValue, DATE_FORMAT);\n    const momentEnd = moment(endValue, DATE_FORMAT);\n    if (e.key === 'Enter' && isValid) {\n      handleDatesChange({ startDate: momentStart, endDate: momentEnd });\n      onEndInputChange(momentEnd);\n    }\n  };\n\n  return (\n    <Header>\n      <DSInputGroup>\n        <DSDateInputV2\n          containerProps={{ 'data-testid': 'start-date' }}\n          innerRef={startInputRef}\n          onChange={handleOnChangeStart}\n          onFocus={() => handleOnFocus('startDate')}\n          onKeyDown={handleOnKeyDownStart}\n          value={startValue}\n        />\n        <DSDateInputV2\n          containerProps={{ 'data-testid': 'end-date' }}\n          innerRef={endInputRef}\n          onChange={handleOnChangeEnd}\n          onFocus={() => handleOnFocus('endDate')}\n          onKeyDown={handleOnKeyDownEnd}\n          value={endValue}\n        />\n      </DSInputGroup>\n    </Header>\n  );\n};\n\nDatePickerRangeHeader.propTypes = {\n  onStartInputChange: PropTypes.func,\n  onEndInputChange: PropTypes.func,\n  onFocusChange: PropTypes.func,\n  selectedStartDate: PropTypes.any,\n  selectedEndDate: PropTypes.any,\n  handleDatesChange: PropTypes.func,\n  autoJumpOnEdit: PropTypes.bool,\n};\n\nexport { DatePickerRangeHeader };\nexport default DatePickerRangeHeader;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/components/DatePickerRenderMonth/DatePickerRenderMonth.js

@@ -0,0 +1,32 @@
+import * as React from "react";
+import React2 from "react";
+import { ChevronDoubleLeft, ChevronDoubleRight } from "@elliemae/ds-icons";
+import { Grid } from "@elliemae/ds-grid";
+const renderMonthElement = ({ month, onYearSelect }) => /* @__PURE__ */ React2.createElement(Grid, {
+  height: "20px",
+  cols: ["auto", 1, "auto"],
+  alignItems: "flex-end",
+  mr: "10px"
+}, /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("div", {
+  role: "button",
+  tabIndex: "0",
+  "data-testid": "date-picker-prev-year-arrow",
+  onClick: () => onYearSelect(month, month.year() - 1)
+}, /* @__PURE__ */ React2.createElement(ChevronDoubleLeft, {
+  width: 13.6,
+  height: 13.6
+}))), /* @__PURE__ */ React2.createElement(Grid, {
+  "data-testid": "date-picker-header"
+}, /* @__PURE__ */ React2.createElement("strong", null, month.format("MMMM YYYY"))), /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("div", {
+  role: "button",
+  tabIndex: "0",
+  "data-testid": "date-picker-next-year-arrow",
+  onClick: () => onYearSelect(month, month.year() + 1)
+}, /* @__PURE__ */ React2.createElement(ChevronDoubleRight, {
+  width: 13.6,
+  height: 13.6
+}))));
+export {
+  renderMonthElement
+};
+//# sourceMappingURL=DatePickerRenderMonth.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/DatePickerRenderMonth/DatePickerRenderMonth.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport React from 'react';\nimport { ChevronDoubleLeft, ChevronDoubleRight } from '@elliemae/ds-icons';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const renderMonthElement = ({ month, onYearSelect }) => (\n  <Grid height=\"20px\" cols={['auto', 1, 'auto']} alignItems=\"flex-end\" mr=\"10px\">\n    <div>\n      <div\n        role=\"button\"\n        tabIndex=\"0\"\n        data-testid=\"date-picker-prev-year-arrow\"\n        onClick={() => onYearSelect(month, month.year() - 1)}\n      >\n        <ChevronDoubleLeft width={13.6} height={13.6} />\n      </div>\n    </div>\n    <Grid data-testid=\"date-picker-header\">\n      <strong>{month.format('MMMM YYYY')}</strong>\n    </Grid>\n    <div>\n      <div\n        role=\"button\"\n        tabIndex=\"0\"\n        data-testid=\"date-picker-next-year-arrow\"\n        onClick={() => onYearSelect(month, month.year() + 1)}\n      >\n        <ChevronDoubleRight width={13.6} height={13.6} />\n      </div>\n    </div>\n  </Grid>\n);\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AAEO,MAAM,qBAAqB,CAAC,EAAE,OAAO,mBAC1C,qCAAC,MAAD;AAAA,EAAM,QAAO;AAAA,EAAO,MAAM,CAAC,QAAQ,GAAG;AAAA,EAAS,YAAW;AAAA,EAAW,IAAG;AAAA,GACtE,qCAAC,OAAD,MACE,qCAAC,OAAD;AAAA,EACE,MAAK;AAAA,EACL,UAAS;AAAA,EACT,eAAY;AAAA,EACZ,SAAS,MAAM,aAAa,OAAO,MAAM,SAAS;AAAA,GAElD,qCAAC,mBAAD;AAAA,EAAmB,OAAO;AAAA,EAAM,QAAQ;AAAA,MAG5C,qCAAC,MAAD;AAAA,EAAM,eAAY;AAAA,GAChB,qCAAC,UAAD,MAAS,MAAM,OAAO,gBAExB,qCAAC,OAAD,MACE,qCAAC,OAAD;AAAA,EACE,MAAK;AAAA,EACL,UAAS;AAAA,EACT,eAAY;AAAA,EACZ,SAAS,MAAM,aAAa,OAAO,MAAM,SAAS;AAAA,GAElD,qCAAC,oBAAD;AAAA,EAAoB,OAAO;AAAA,EAAM,QAAQ;AAAA;",
+  "names": []
+}

package/dist/esm/components/DatePickerSingleDate/DatePickerSingleDate.js

@@ -0,0 +1,67 @@
+import * as React from "react";
+import React2, { useState, useRef } from "react";
+import { DayPickerSingleDateController } from "react-dates";
+import moment from "moment";
+import { aggregatedClasses, convertPropToCssClassName } from "@elliemae/ds-classnames";
+import { ChevronLeft } from "@elliemae/ds-icons";
+import { DatePickerDay } from "../DatePickerDay/DatePickerDay";
+import { DatePickerNavigation } from "../DatePickerNavigation/DatePickerNavigation";
+import { DatePickerHeader } from "../DatePickerHeader/DatePickerHeader";
+const blockname = "single-date";
+const Wrapper = aggregatedClasses("div")(blockname, "wrapper");
+const { classNameElement, classNameBlock } = convertPropToCssClassName("datepicker");
+const DatePickerSingleDate = ({
+  date,
+  displayFormatDay = "D",
+  isDayHighlighted = () => false,
+  enableOutsideDays = true,
+  showHeader = true,
+  onChange = () => null,
+  ...rest
+}) => {
+  const [selectedDate, setSelectedDate] = useState(date);
+  const [key, setKey] = useState(moment());
+  const datePickerRef = useRef();
+  const updateKeyDate = (newDate) => {
+    setKey(newDate);
+  };
+  const handleDateChange = (newDate) => {
+    setSelectedDate(newDate);
+    setTimeout(() => onChange(newDate), 500);
+  };
+  return /* @__PURE__ */ React2.createElement(Wrapper, null, showHeader && /* @__PURE__ */ React2.createElement(DatePickerHeader, {
+    onInputChange: handleDateChange,
+    selectedDate,
+    updateKeyDate
+  }), /* @__PURE__ */ React2.createElement("div", {
+    ref: datePickerRef,
+    className: classNameBlock("wrapper-day-picker-single-date-controller"),
+    "data-testid": rest["data-testid"] || "date-picker-single-date"
+  }, /* @__PURE__ */ React2.createElement(DayPickerSingleDateController, {
+    key,
+    date: selectedDate,
+    enableOutsideDays,
+    focused: true,
+    hideKeyboardShortcutsPanel: true,
+    isDayHighlighted,
+    keepOpenOnDateSelect: true,
+    navNext: /* @__PURE__ */ React2.createElement(DatePickerNavigation, {
+      className: classNameElement("navigation-next")
+    }),
+    navPrev: /* @__PURE__ */ React2.createElement(DatePickerNavigation, {
+      className: classNameElement("navigation-prev"),
+      icon: ChevronLeft
+    }),
+    onDateChange: handleDateChange,
+    renderDayContents: (givenDate) => /* @__PURE__ */ React2.createElement(DatePickerDay, {
+      className: classNameElement("day-contents"),
+      date: givenDate.format(displayFormatDay)
+    })
+  })));
+};
+var DatePickerSingleDate_default = DatePickerSingleDate;
+export {
+  DatePickerSingleDate,
+  DatePickerSingleDate_default as default
+};
+//# sourceMappingURL=DatePickerSingleDate.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/DatePickerSingleDate/DatePickerSingleDate.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-unresolved */\n/* eslint-disable react/prop-types */\n/* eslint-disable no-console */\nimport React, { useState, useRef } from 'react';\nimport { DayPickerSingleDateController } from 'react-dates';\nimport moment from 'moment';\nimport { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { ChevronLeft } from '@elliemae/ds-icons';\nimport { DatePickerDay } from '../DatePickerDay/DatePickerDay';\nimport { DatePickerNavigation } from '../DatePickerNavigation/DatePickerNavigation';\nimport { DatePickerHeader } from '../DatePickerHeader/DatePickerHeader';\n\nconst blockname = 'single-date';\nconst Wrapper = aggregatedClasses('div')(blockname, 'wrapper');\n\nconst { classNameElement, classNameBlock } = convertPropToCssClassName('datepicker');\n\nconst DatePickerSingleDate = ({\n  date,\n  displayFormatDay = 'D',\n  isDayHighlighted = () => false,\n  enableOutsideDays = true,\n  showHeader = true,\n  onChange = () => null,\n  ...rest\n}) => {\n  const [selectedDate, setSelectedDate] = useState(date);\n  const [key, setKey] = useState(moment());\n  const datePickerRef = useRef();\n\n  const updateKeyDate = (newDate) => {\n    setKey(newDate);\n  };\n\n  const handleDateChange = (newDate) => {\n    setSelectedDate(newDate);\n    setTimeout(() => onChange(newDate), 500);\n  };\n\n  return (\n    <Wrapper>\n      {showHeader && (\n        <DatePickerHeader onInputChange={handleDateChange} selectedDate={selectedDate} updateKeyDate={updateKeyDate} />\n      )}\n      <div\n        ref={datePickerRef}\n        className={classNameBlock('wrapper-day-picker-single-date-controller')}\n        data-testid={rest['data-testid'] || 'date-picker-single-date'}\n      >\n        <DayPickerSingleDateController\n          key={key}\n          date={selectedDate}\n          enableOutsideDays={enableOutsideDays}\n          focused\n          hideKeyboardShortcutsPanel\n          isDayHighlighted={isDayHighlighted}\n          keepOpenOnDateSelect\n          navNext={<DatePickerNavigation className={classNameElement('navigation-next')} />}\n          navPrev={<DatePickerNavigation className={classNameElement('navigation-prev')} icon={ChevronLeft} />}\n          onDateChange={handleDateChange}\n          renderDayContents={(givenDate) => (\n            <DatePickerDay className={classNameElement('day-contents')} date={givenDate.format(displayFormatDay)} />\n          )}\n        />\n      </div>\n    </Wrapper>\n  );\n};\n\nexport { DatePickerSingleDate };\nexport default DatePickerSingleDate;\n"],
+  "mappings": "AAAA;ACGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAClB,MAAM,UAAU,kBAAkB,OAAO,WAAW;AAEpD,MAAM,EAAE,kBAAkB,mBAAmB,0BAA0B;AAEvE,MAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA,mBAAmB;AAAA,EACnB,mBAAmB,MAAM;AAAA,EACzB,oBAAoB;AAAA,EACpB,aAAa;AAAA,EACb,WAAW,MAAM;AAAA,KACd;AAAA,MACC;AACJ,QAAM,CAAC,cAAc,mBAAmB,SAAS;AACjD,QAAM,CAAC,KAAK,UAAU,SAAS;AAC/B,QAAM,gBAAgB;AAEtB,QAAM,gBAAgB,CAAC,YAAY;AACjC,WAAO;AAAA;AAGT,QAAM,mBAAmB,CAAC,YAAY;AACpC,oBAAgB;AAChB,eAAW,MAAM,SAAS,UAAU;AAAA;AAGtC,SACE,qCAAC,SAAD,MACG,cACC,qCAAC,kBAAD;AAAA,IAAkB,eAAe;AAAA,IAAkB;AAAA,IAA4B;AAAA,MAEjF,qCAAC,OAAD;AAAA,IACE,KAAK;AAAA,IACL,WAAW,eAAe;AAAA,IAC1B,eAAa,KAAK,kBAAkB;AAAA,KAEpC,qCAAC,+BAAD;AAAA,IACE;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,SAAO;AAAA,IACP,4BAA0B;AAAA,IAC1B;AAAA,IACA,sBAAoB;AAAA,IACpB,SAAS,qCAAC,sBAAD;AAAA,MAAsB,WAAW,iBAAiB;AAAA;AAAA,IAC3D,SAAS,qCAAC,sBAAD;AAAA,MAAsB,WAAW,iBAAiB;AAAA,MAAoB,MAAM;AAAA;AAAA,IACrF,cAAc;AAAA,IACd,mBAAmB,CAAC,cAClB,qCAAC,eAAD;AAAA,MAAe,WAAW,iBAAiB;AAAA,MAAiB,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAS/F,IAAO,+BAAQ;",
+  "names": []
+}

package/dist/esm/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js

@@ -0,0 +1,51 @@
+import * as React from "react";
+import React2 from "react";
+import { DSCheckbox } from "@elliemae/ds-form";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+import { DatePickerRangeHeader } from "../DatePickerRangeHeader/DatePickerRangeHeader";
+import { DatePickerHeader } from "../DatePickerHeader/DatePickerHeader";
+const blockname = "date-switcher";
+const Header = aggregatedClasses("div")(blockname, "header");
+const SingleRangeDateSwitcher = ({
+  onStartInputChange,
+  onEndInputChange,
+  onSingleInputChange,
+  onFocusChange,
+  selectedStartDate,
+  selectedEndDate,
+  selectedSingleDate,
+  isDateRange,
+  setIsDateRange,
+  handleDatesChange,
+  updateKeyDate,
+  focusedInput
+}) => {
+  const SingleDateInput = /* @__PURE__ */ React2.createElement(DatePickerHeader, {
+    onInputChange: onSingleInputChange,
+    selectedDate: selectedSingleDate,
+    updateKeyDate
+  });
+  const DateRangeInput = /* @__PURE__ */ React2.createElement(DatePickerRangeHeader, {
+    focusedInput,
+    onFocusChange,
+    onEndInputChange,
+    onStartInputChange,
+    selectedEndDate,
+    selectedStartDate,
+    handleDatesChange
+  });
+  return /* @__PURE__ */ React2.createElement(Header, {
+    "data-testid": "date-switch-header"
+  }, /* @__PURE__ */ React2.createElement(DSCheckbox, {
+    checked: isDateRange,
+    className: "switch-header__checkbox",
+    labelText: "Range",
+    onChange: setIsDateRange
+  }), isDateRange ? DateRangeInput : SingleDateInput);
+};
+var SingleRangeDateSwitcher_default = SingleRangeDateSwitcher;
+export {
+  SingleRangeDateSwitcher,
+  SingleRangeDateSwitcher_default as default
+};
+//# sourceMappingURL=SingleRangeDateSwitcher.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React from 'react';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { DatePickerRangeHeader } from '../DatePickerRangeHeader/DatePickerRangeHeader';\nimport { DatePickerHeader } from '../DatePickerHeader/DatePickerHeader';\n\nconst blockname = 'date-switcher';\nconst Header = aggregatedClasses('div')(blockname, 'header');\n\nconst SingleRangeDateSwitcher = ({\n  onStartInputChange,\n  onEndInputChange,\n  onSingleInputChange,\n  onFocusChange,\n  selectedStartDate,\n  selectedEndDate,\n  selectedSingleDate,\n  isDateRange,\n  setIsDateRange,\n  handleDatesChange,\n  updateKeyDate,\n  focusedInput,\n}) => {\n  const SingleDateInput = (\n    <DatePickerHeader\n      onInputChange={onSingleInputChange}\n      selectedDate={selectedSingleDate}\n      updateKeyDate={updateKeyDate}\n    />\n  );\n  const DateRangeInput = (\n    <DatePickerRangeHeader\n      focusedInput={focusedInput}\n      onFocusChange={onFocusChange}\n      onEndInputChange={onEndInputChange}\n      onStartInputChange={onStartInputChange}\n      selectedEndDate={selectedEndDate}\n      selectedStartDate={selectedStartDate}\n      handleDatesChange={handleDatesChange}\n    />\n  );\n\n  return (\n    <Header data-testid=\"date-switch-header\">\n      <DSCheckbox\n        checked={isDateRange}\n        className=\"switch-header__checkbox\"\n        labelText=\"Range\"\n        onChange={setIsDateRange}\n      />\n      {isDateRange ? DateRangeInput : SingleDateInput}\n    </Header>\n  );\n};\n\nexport { SingleRangeDateSwitcher };\nexport default SingleRangeDateSwitcher;\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAClB,MAAM,SAAS,kBAAkB,OAAO,WAAW;AAEnD,MAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,kBACJ,qCAAC,kBAAD;AAAA,IACE,eAAe;AAAA,IACf,cAAc;AAAA,IACd;AAAA;AAGJ,QAAM,iBACJ,qCAAC,uBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIJ,SACE,qCAAC,QAAD;AAAA,IAAQ,eAAY;AAAA,KAClB,qCAAC,YAAD;AAAA,IACE,SAAS;AAAA,IACT,WAAU;AAAA,IACV,WAAU;AAAA,IACV,UAAU;AAAA,MAEX,cAAc,iBAAiB;AAAA;AAMtC,IAAO,kCAAQ;",
+  "names": []
+}

package/dist/esm/components/index.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { default as default2 } from "./DatePickerNavigation/DatePickerNavigation";
+import { default as default3 } from "./DatePickerDay/DatePickerDay";
+import { default as default4 } from "./DatePickerPicker/DatePickerPicker";
+import { default as default5 } from "./DatePickerDropdown";
+import { default as default6 } from "./DatePickerSingleDate/DatePickerSingleDate";
+import { default as default7 } from "./DatePickerHeader/DatePickerHeader";
+import { default as default8 } from "./DatePickerRange/DatePickerRange";
+import { default as default9 } from "./DatePickerRangeHeader/DatePickerRangeHeader";
+import { default as default10 } from "./SingleRangeDateSwitcher/SingleRangeDateSwitcher";
+import { renderMonthElement } from "./DatePickerRenderMonth/DatePickerRenderMonth";
+export {
+  default3 as DatePickerDay,
+  default5 as DatePickerDropdown,
+  default7 as DatePickerHeader,
+  default2 as DatePickerNavigation,
+  default4 as DatePickerPicker,
+  default8 as DatePickerRange,
+  default9 as DatePickerRangeHeader,
+  default6 as DatePickerSingleDate,
+  default10 as SingleRangeDateSwitcher,
+  renderMonthElement
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default as DatePickerNavigation } from './DatePickerNavigation/DatePickerNavigation';\nexport { default as DatePickerDay } from './DatePickerDay/DatePickerDay';\nexport { default as DatePickerPicker } from './DatePickerPicker/DatePickerPicker';\nexport { default as DatePickerDropdown } from './DatePickerDropdown';\nexport { default as DatePickerSingleDate } from './DatePickerSingleDate/DatePickerSingleDate';\nexport { default as DatePickerHeader } from './DatePickerHeader/DatePickerHeader';\nexport { default as DatePickerRange } from './DatePickerRange/DatePickerRange';\nexport { default as DatePickerRangeHeader } from './DatePickerRangeHeader/DatePickerRangeHeader';\nexport { default as SingleRangeDateSwitcher } from './SingleRangeDateSwitcher/SingleRangeDateSwitcher';\nexport { renderMonthElement } from './DatePickerRenderMonth/DatePickerRenderMonth';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;",
+  "names": []
+}

package/{esm → dist/esm}/defaultPhrases.js

@@ -1,81 +1,39 @@
-const calendarLabel = 'Calendar';
-const roleDescription = 'datepicker';
-const closeDatePicker = 'Close';
-const focusStartDate = 'Interact with the calendar and add the check-in date for your trip.';
-const clearDate = 'Clear Date';
-const clearDates = 'Clear Dates';
-const jumpToPrevMonth = 'Move backward to switch to the previous month.';
-const jumpToNextMonth = 'Move forward to switch to the next month.';
-const keyboardShortcuts = 'Keyboard Shortcuts';
-const showKeyboardShortcutsPanel = 'Open the keyboard shortcuts panel.';
-const hideKeyboardShortcutsPanel = 'Close the shortcuts panel.';
-const openThisPanel = 'Open this panel.';
-const enterKey = 'Enter key';
-const leftArrowRightArrow = 'Right and left arrow keys';
-const upArrowDownArrow = 'up and down arrow keys';
-const pageUpPageDown = 'page up and page down keys';
-const homeEnd = 'Home and end keys';
-const escape = 'Escape key';
-const questionMark = 'Question mark';
-const selectFocusedDate = 'Select the date in focus.';
-const moveFocusByOneDay = 'Move backward (left) and forward (right) by one day.';
-const moveFocusByOneWeek = 'Move backward (up) and forward (down) by one week.';
-const moveFocusByOneMonth = 'Switch months.';
-const moveFocustoStartAndEndOfWeek = 'Go to the first or last day of a week.';
-const returnFocusToInput = 'Return to the date input field.';
-const keyboardForwardNavigationInstructions = 'Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.';
-const keyboardBackwardNavigationInstructions = 'Navigate backward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.';
-
-const chooseAvailableStartDate = _ref => {
-  let {
-    date
-  } = _ref;
-  return "Choose ".concat(date, " as your check-in date. It\u2019s available.");
-};
-
-const chooseAvailableEndDate = _ref2 => {
-  let {
-    date
-  } = _ref2;
-  return "Choose ".concat(date, " as your check-out date. It\u2019s available.");
-};
-
-const chooseAvailableDate = _ref3 => {
-  let {
-    date
-  } = _ref3;
-  return date;
-};
-
-const dateIsUnavailable = _ref4 => {
-  let {
-    date
-  } = _ref4;
-  return "Not available. ".concat(date);
-};
-
-const dateIsSelected = _ref5 => {
-  let {
-    date
-  } = _ref5;
-  return "Selected. ".concat(date);
-};
-
-const dateIsSelectedAsStartDate = _ref6 => {
-  let {
-    date
-  } = _ref6;
-  return "Selected as start date. ".concat(date);
-};
-
-const dateIsSelectedAsEndDate = _ref7 => {
-  let {
-    date
-  } = _ref7;
-  return "Selected as end date. ".concat(date);
-};
-
-var defaultPhrases = {
+import * as React from "react";
+const calendarLabel = "Calendar";
+const roleDescription = "datepicker";
+const closeDatePicker = "Close";
+const focusStartDate = "Interact with the calendar and add the check-in date for your trip.";
+const clearDate = "Clear Date";
+const clearDates = "Clear Dates";
+const jumpToPrevMonth = "Move backward to switch to the previous month.";
+const jumpToNextMonth = "Move forward to switch to the next month.";
+const keyboardShortcuts = "Keyboard Shortcuts";
+const showKeyboardShortcutsPanel = "Open the keyboard shortcuts panel.";
+const hideKeyboardShortcutsPanel = "Close the shortcuts panel.";
+const openThisPanel = "Open this panel.";
+const enterKey = "Enter key";
+const leftArrowRightArrow = "Right and left arrow keys";
+const upArrowDownArrow = "up and down arrow keys";
+const pageUpPageDown = "page up and page down keys";
+const homeEnd = "Home and end keys";
+const escape = "Escape key";
+const questionMark = "Question mark";
+const selectFocusedDate = "Select the date in focus.";
+const moveFocusByOneDay = "Move backward (left) and forward (right) by one day.";
+const moveFocusByOneWeek = "Move backward (up) and forward (down) by one week.";
+const moveFocusByOneMonth = "Switch months.";
+const moveFocustoStartAndEndOfWeek = "Go to the first or last day of a week.";
+const returnFocusToInput = "Return to the date input field.";
+const keyboardForwardNavigationInstructions = "Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.";
+const keyboardBackwardNavigationInstructions = "Navigate backward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.";
+const chooseAvailableStartDate = ({ date }) => `Choose ${date} as your check-in date. It\u2019s available.`;
+const chooseAvailableEndDate = ({ date }) => `Choose ${date} as your check-out date. It\u2019s available.`;
+const chooseAvailableDate = ({ date }) => date;
+const dateIsUnavailable = ({ date }) => `Not available. ${date}`;
+const dateIsSelected = ({ date }) => `Selected. ${date}`;
+const dateIsSelectedAsStartDate = ({ date }) => `Selected as start date. ${date}`;
+const dateIsSelectedAsEndDate = ({ date }) => `Selected as end date. ${date}`;
+var defaultPhrases_default = {
   calendarLabel,
   roleDescription,
   closeDatePicker,
@@ -245,5 +203,15 @@ const CalendarDayPhrases = {
   dateIsSelectedAsStartDate,
   dateIsSelectedAsEndDate
 };
-
-export { CalendarDayPhrases, DateRangePickerInputPhrases, DateRangePickerPhrases, DayPickerKeyboardShortcutsPhrases, DayPickerNavigationPhrases, DayPickerPhrases, SingleDatePickerInputPhrases, SingleDatePickerPhrases, defaultPhrases as default };
+export {
+  CalendarDayPhrases,
+  DateRangePickerInputPhrases,
+  DateRangePickerPhrases,
+  DayPickerKeyboardShortcutsPhrases,
+  DayPickerNavigationPhrases,
+  DayPickerPhrases,
+  SingleDatePickerInputPhrases,
+  SingleDatePickerPhrases,
+  defaultPhrases_default as default
+};
+//# sourceMappingURL=defaultPhrases.js.map

package/dist/esm/defaultPhrases.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultPhrases.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "const calendarLabel = 'Calendar';\nconst roleDescription = 'datepicker';\nconst closeDatePicker = 'Close';\nconst focusStartDate =\n  'Interact with the calendar and add the check-in date for your trip.';\nconst clearDate = 'Clear Date';\nconst clearDates = 'Clear Dates';\nconst jumpToPrevMonth = 'Move backward to switch to the previous month.';\nconst jumpToNextMonth = 'Move forward to switch to the next month.';\nconst keyboardShortcuts = 'Keyboard Shortcuts';\nconst showKeyboardShortcutsPanel = 'Open the keyboard shortcuts panel.';\nconst hideKeyboardShortcutsPanel = 'Close the shortcuts panel.';\nconst openThisPanel = 'Open this panel.';\nconst enterKey = 'Enter key';\nconst leftArrowRightArrow = 'Right and left arrow keys';\nconst upArrowDownArrow = 'up and down arrow keys';\nconst pageUpPageDown = 'page up and page down keys';\nconst homeEnd = 'Home and end keys';\nconst escape = 'Escape key';\nconst questionMark = 'Question mark';\nconst selectFocusedDate = 'Select the date in focus.';\nconst moveFocusByOneDay =\n  'Move backward (left) and forward (right) by one day.';\nconst moveFocusByOneWeek = 'Move backward (up) and forward (down) by one week.';\nconst moveFocusByOneMonth = 'Switch months.';\nconst moveFocustoStartAndEndOfWeek = 'Go to the first or last day of a week.';\nconst returnFocusToInput = 'Return to the date input field.';\nconst keyboardForwardNavigationInstructions =\n  'Navigate forward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.';\nconst keyboardBackwardNavigationInstructions =\n  'Navigate backward to interact with the calendar and select a date. Press the question mark key to get the keyboard shortcuts for changing dates.';\n\nconst chooseAvailableStartDate = ({ date }) =>\n  `Choose ${date} as your check-in date. It\u2019s available.`;\nconst chooseAvailableEndDate = ({ date }) =>\n  `Choose ${date} as your check-out date. It\u2019s available.`;\nconst chooseAvailableDate = ({ date }) => date;\nconst dateIsUnavailable = ({ date }) => `Not available. ${date}`;\nconst dateIsSelected = ({ date }) => `Selected. ${date}`;\nconst dateIsSelectedAsStartDate = ({ date }) =>\n  `Selected as start date. ${date}`;\nconst dateIsSelectedAsEndDate = ({ date }) => `Selected as end date. ${date}`;\n\nexport default {\n  calendarLabel,\n  roleDescription,\n  closeDatePicker,\n  focusStartDate,\n  clearDate,\n  clearDates,\n  jumpToPrevMonth,\n  jumpToNextMonth,\n  keyboardShortcuts,\n  showKeyboardShortcutsPanel,\n  hideKeyboardShortcutsPanel,\n  openThisPanel,\n  enterKey,\n  leftArrowRightArrow,\n  upArrowDownArrow,\n  pageUpPageDown,\n  homeEnd,\n  escape,\n  questionMark,\n  selectFocusedDate,\n  moveFocusByOneDay,\n  moveFocusByOneWeek,\n  moveFocusByOneMonth,\n  moveFocustoStartAndEndOfWeek,\n  returnFocusToInput,\n  keyboardForwardNavigationInstructions,\n  keyboardBackwardNavigationInstructions,\n\n  chooseAvailableStartDate,\n  chooseAvailableEndDate,\n  dateIsUnavailable,\n  dateIsSelected,\n  dateIsSelectedAsStartDate,\n  dateIsSelectedAsEndDate,\n};\n\nexport const DateRangePickerPhrases = {\n  calendarLabel,\n  roleDescription,\n  closeDatePicker,\n  clearDates,\n  focusStartDate,\n  jumpToPrevMonth,\n  jumpToNextMonth,\n  keyboardShortcuts,\n  showKeyboardShortcutsPanel,\n  hideKeyboardShortcutsPanel,\n  openThisPanel,\n  enterKey,\n  leftArrowRightArrow,\n  upArrowDownArrow,\n  pageUpPageDown,\n  homeEnd,\n  escape,\n  questionMark,\n  selectFocusedDate,\n  moveFocusByOneDay,\n  moveFocusByOneWeek,\n  moveFocusByOneMonth,\n  moveFocustoStartAndEndOfWeek,\n  returnFocusToInput,\n  keyboardForwardNavigationInstructions,\n  keyboardBackwardNavigationInstructions,\n  chooseAvailableStartDate,\n  chooseAvailableEndDate,\n  dateIsUnavailable,\n  dateIsSelected,\n  dateIsSelectedAsStartDate,\n  dateIsSelectedAsEndDate,\n};\n\nexport const DateRangePickerInputPhrases = {\n  focusStartDate,\n  clearDates,\n  keyboardForwardNavigationInstructions,\n  keyboardBackwardNavigationInstructions,\n};\n\nexport const SingleDatePickerPhrases = {\n  calendarLabel,\n  roleDescription,\n  closeDatePicker,\n  clearDate,\n  jumpToPrevMonth,\n  jumpToNextMonth,\n  keyboardShortcuts,\n  showKeyboardShortcutsPanel,\n  hideKeyboardShortcutsPanel,\n  openThisPanel,\n  enterKey,\n  leftArrowRightArrow,\n  upArrowDownArrow,\n  pageUpPageDown,\n  homeEnd,\n  escape,\n  questionMark,\n  selectFocusedDate,\n  moveFocusByOneDay,\n  moveFocusByOneWeek,\n  moveFocusByOneMonth,\n  moveFocustoStartAndEndOfWeek,\n  returnFocusToInput,\n  keyboardForwardNavigationInstructions,\n  keyboardBackwardNavigationInstructions,\n  chooseAvailableDate,\n  dateIsUnavailable,\n  dateIsSelected,\n};\n\nexport const SingleDatePickerInputPhrases = {\n  clearDate,\n  keyboardForwardNavigationInstructions,\n  keyboardBackwardNavigationInstructions,\n};\n\nexport const DayPickerPhrases = {\n  calendarLabel,\n  roleDescription,\n  jumpToPrevMonth,\n  jumpToNextMonth,\n  keyboardShortcuts,\n  showKeyboardShortcutsPanel,\n  hideKeyboardShortcutsPanel,\n  openThisPanel,\n  enterKey,\n  leftArrowRightArrow,\n  upArrowDownArrow,\n  pageUpPageDown,\n  homeEnd,\n  escape,\n  questionMark,\n  selectFocusedDate,\n  moveFocusByOneDay,\n  moveFocusByOneWeek,\n  moveFocusByOneMonth,\n  moveFocustoStartAndEndOfWeek,\n  returnFocusToInput,\n  chooseAvailableStartDate,\n  chooseAvailableEndDate,\n  chooseAvailableDate,\n  dateIsUnavailable,\n  dateIsSelected,\n  dateIsSelectedAsStartDate,\n  dateIsSelectedAsEndDate,\n};\n\nexport const DayPickerKeyboardShortcutsPhrases = {\n  keyboardShortcuts,\n  showKeyboardShortcutsPanel,\n  hideKeyboardShortcutsPanel,\n  openThisPanel,\n  enterKey,\n  leftArrowRightArrow,\n  upArrowDownArrow,\n  pageUpPageDown,\n  homeEnd,\n  escape,\n  questionMark,\n  selectFocusedDate,\n  moveFocusByOneDay,\n  moveFocusByOneWeek,\n  moveFocusByOneMonth,\n  moveFocustoStartAndEndOfWeek,\n  returnFocusToInput,\n};\n\nexport const DayPickerNavigationPhrases = {\n  jumpToPrevMonth,\n  jumpToNextMonth,\n};\n\nexport const CalendarDayPhrases = {\n  chooseAvailableDate,\n  dateIsUnavailable,\n  dateIsSelected,\n  dateIsSelectedAsStartDate,\n  dateIsSelectedAsEndDate,\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { default as default2 } from "./DSDatePicker";
+export * from "./DSDatePicker";
+import { SingleDatePickerPhrases } from "./defaultPhrases";
+export {
+  SingleDatePickerPhrases,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map