@telus-uds/components-web 3.3.0 → 4.0.0

package/lib/cjs/DatePicker/DatePicker.js

@@ -0,0 +1,525 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactMomentProptypes = _interopRequireDefault(require("react-moment-proptypes"));
+require("react-dates/initialize");
+var _reactDates = require("react-dates");
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _moment = _interopRequireDefault(require("moment"));
+var _lodash = require("lodash");
+var _CalendarContainer = _interopRequireDefault(require("./CalendarContainer"));
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const getResponsiveDaySize = function () {
+  let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
+  if (viewport === 'xs') {
+    return inline ? undefined : 36;
+  }
+  return inline ? 60 : 44;
+};
+const getResponsiveCircleSize = function () {
+  let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
+  if (viewport === 'xs') {
+    return 26;
+  }
+  return inline ? 44 : 26;
+};
+const MonthCenterContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "DatePicker__MonthCenterContainer",
+  componentId: "components-web__sc-mz8fi3-0"
+})({
+  display: 'flex',
+  justifyContent: 'center'
+});
+const DateInputWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "DatePicker__DateInputWrapper",
+  componentId: "components-web__sc-mz8fi3-1"
+})({
+  display: 'flex',
+  flexDirection: 'column'
+});
+const PortalPositionedContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "DatePicker__PortalPositionedContainer",
+  componentId: "components-web__sc-mz8fi3-2"
+})({
+  position: 'absolute',
+  left: _ref => {
+    let {
+      left
+    } = _ref;
+    return `${left}px`;
+  },
+  top: _ref2 => {
+    let {
+      top
+    } = _ref2;
+    return `${top}px`;
+  }
+});
+const getInitialVisibleMonth = (initialVisibleMonth, inputDate) => {
+  if (initialVisibleMonth === '' || inputDate instanceof _moment.default) {
+    return null;
+  }
+  return () => (0, _moment.default)(initialVisibleMonth);
+};
+
+/**
+ * Use DatePicker to select a date on a calendar.
+ *
+ * ## Usage Criteria
+ *
+ * - Use DatePicker to select a date on a calendar
+ * - Available in 2 formats: Overlay and Inline
+ *
+ * ### Overlay DatePicker
+ * - Use Overlay to display in a modal container
+ * - Use Overlay whenever possible as it is the most accessible solution; the input form field is type-accessible and optimized for mobile customers
+ * - Includes an input form field to allow manual key-in of dates
+ * - Opens the modal when the input form field receives focus
+ * - Width expands 100% until max-width of 340px
+ *
+ * ### Inline DatePicker
+ * - Use Inline to display the DatePicker in a larger vieweable area; allows the customer to quickly and easily date availability
+ * - Does not include an input form field
+ * - Optimized for keyboard interaction and tablet touch
+ * - Recommended for viewports greater than or equal to 576px
+ */
+const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    copy = 'en',
+    id,
+    date,
+    dateFormat = 'DD / MM / YYYY',
+    feedback,
+    inline = false,
+    isDayDisabled,
+    label,
+    onDateChange = () => {},
+    hint,
+    hintPosition = 'inline',
+    tooltip,
+    tokens,
+    variant = {},
+    validation,
+    disabled = false,
+    prevTestID = '',
+    nextTestID = '',
+    placeholder = dateFormat,
+    initialVisibleMonth = '',
+    ...rest
+  } = _ref3;
+  const [inputDate, setInputDate] = _react.default.useState(date instanceof _moment.default ? date : undefined);
+  const [inputText, setInputText] = _react.default.useState(date instanceof _moment.default ? date.format(dateFormat) : '');
+  const dateFormatWithoutSpaces = dateFormat.replace(/\s/g, '');
+  const textInputRef = _react.default.useRef();
+  const prevButtonRef = _react.default.useRef();
+  const [datePickerPosition, setDatePickerPosition] = _react.default.useState({
+    left: 0,
+    top: 0
+  });
+  const datePickerRef = _react.default.useRef(null);
+  (0, _componentsBase.useSafeLayoutEffect)(() => {
+    const updateDatePickerPosition = () => {
+      if (inline || !textInputRef?.current) return;
+      const {
+        left,
+        top
+      } = textInputRef.current.getBoundingClientRect();
+      const inputTop = top + window.scrollY;
+      const inputLeft = left + window.scrollX;
+      setDatePickerPosition({
+        top: inputTop + textInputRef.current.offsetHeight,
+        left: inputLeft
+      });
+    };
+    const throttledUpdate = (0, _lodash.throttle)(updateDatePickerPosition, 100, {
+      leading: false
+    });
+
+    // Initial call to set the position
+    throttledUpdate();
+
+    // Register event listeners
+    window.addEventListener('resize', throttledUpdate);
+    window.addEventListener('scroll', updateDatePickerPosition, {
+      capture: true
+    });
+    return () => {
+      window.removeEventListener('resize', throttledUpdate);
+      window.removeEventListener('scroll', updateDatePickerPosition, {
+        capture: true
+      });
+    };
+  }, []);
+  const [isFocused, setIsFocused] = _react.default.useState(false);
+  const [isClickedInside, setIsClickedInside] = _react.default.useState(false);
+  const getCopy = (0, _componentsBase.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  _react.default.useEffect(() => {
+    /**
+     * `date` could be passed as `null` to reset the value so explicitly
+     * checking for not being `undefined`
+     */
+    if (!(0, _lodash.isUndefined)(date) && !(0, _moment.default)(date).isSame(inputDate)) {
+      setInputDate(date);
+      setInputText(date instanceof _moment.default ? date.format(dateFormat) : '');
+    }
+  }, [date, inputDate, dateFormat]);
+  _react.default.useEffect(() => {
+    let timeoutId;
+    if (prevButtonRef.current && isFocused) {
+      timeoutId = setTimeout(() => prevButtonRef.current.focus(), 100);
+    }
+    return () => clearTimeout(timeoutId);
+  }, [isFocused]);
+  _react.default.useEffect(() => {
+    if (inputText !== '' && inputDate !== undefined) {
+      textInputRef?.current?.focus();
+    }
+  }, [inputDate, inputText]);
+  const onFocusChange = _ref4 => {
+    let {
+      focused
+    } = _ref4;
+    if (!isClickedInside) {
+      setIsFocused(focused);
+    }
+    setIsClickedInside(false);
+  };
+  const handleFocus = event => {
+    if (event.target.tagName === 'INPUT' && !disabled && inputDate === undefined && inputText === '') {
+      setIsFocused(true);
+    }
+  };
+  const handleMouseDown = event => {
+    if (!disabled) {
+      if (event.target.tagName === 'INPUT') {
+        setIsClickedInside(true);
+        setIsFocused(true);
+      } else if (event.target.tagName === 'path') {
+        // needed to handle the case where the user clicks on the tooltip icon
+        setIsClickedInside(true);
+        event.stopPropagation();
+      } else {
+        event.stopPropagation();
+      }
+    }
+  };
+  const onChange = value => {
+    setInputDate(value);
+    setInputText(value.format(dateFormat));
+    setIsFocused(false);
+    if (onDateChange) onDateChange(value);
+  };
+  const onChangeInput = value => {
+    if (value === '' || (0, _moment.default)(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()) {
+      if (value === '') {
+        setInputDate(undefined); // Set inputDate to undefined if input is empty
+        onDateChange?.(undefined);
+      } else {
+        setInputDate((0, _moment.default)(value, dateFormat));
+        onDateChange?.((0, _moment.default)(value, dateFormat));
+      }
+      setInputText(value === '' ? '' : (0, _moment.default)(value, dateFormatWithoutSpaces).format(dateFormat));
+    } else {
+      setInputText(value);
+    }
+  };
+  const handleOnKeyPress = event => {
+    if (event.key === 'Backspace' && inputText === '') {
+      setInputDate(undefined);
+      onDateChange?.(undefined);
+    }
+  };
+  const handleValidation = inputValidation => {
+    const momentDate = (0, _moment.default)(inputText, dateFormat, true);
+    const isValidDate = momentDate.isValid();
+    if (!isValidDate && inputText !== '') {
+      return 'error';
+    }
+    if (inputValidation === 'error' || inputValidation === 'success') {
+      return inputValidation;
+    }
+    return inputValidation;
+  };
+  const viewport = (0, _componentsBase.useViewport)();
+  const daySize = getResponsiveDaySize(inline, viewport);
+  const circleSize = getResponsiveCircleSize(inline, viewport);
+  const HiddenInputFieldContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+    displayName: "DatePicker__HiddenInputFieldContainer",
+    componentId: "components-web__sc-mz8fi3-3"
+  })(["height:", ";width:", ";overflow:hidden;"], props => props.height, props => props.width);
+  const {
+    hiddenInputFieldContainerHeight,
+    hiddenInputFieldContainerWidth,
+    previousIcon,
+    nextIcon,
+    ...remainingTokens
+  } = (0, _componentsBase.useThemeTokens)('DatePicker', tokens, {
+    ...variant,
+    inline
+  }, {
+    viewport
+  });
+  const defaultFontTokens = (0, _componentsBase.applyTextStyles)({
+    fontName: remainingTokens.calendarDayDefaultFontName,
+    fontWeight: remainingTokens.calendarDayDefaultFontWeight
+  });
+  const calendarMonthFontTokens = (0, _componentsBase.applyTextStyles)({
+    fontName: remainingTokens.calendarMonthCaptionFontName,
+    fontWeight: remainingTokens.calendarMonthCaptionFontWeight
+  });
+  const calendarWeekFontTokens = (0, _componentsBase.applyTextStyles)({
+    fontName: remainingTokens.dayPickerWeekHeaderFontName,
+    fontWeight: remainingTokens.dayPickerWeekHeaderFontWeight
+  });
+  const renderPrevButton = _ref5 => {
+    let {
+      onClick
+    } = _ref5;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
+      onPress: () => {
+        onClick();
+      },
+      icon: previousIcon,
+      variant: {
+        size: 'small'
+      },
+      testID: prevTestID,
+      ref: prevButtonRef
+    });
+  };
+  const renderNextButton = _ref6 => {
+    let {
+      onClick
+    } = _ref6;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
+      onPress: () => {
+        onClick();
+      },
+      icon: nextIcon,
+      variant: {
+        size: 'small'
+      },
+      testID: nextTestID
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: inline ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HiddenInputFieldContainer, {
+        height: hiddenInputFieldContainerHeight,
+        width: hiddenInputFieldContainerWidth,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          ref: ref,
+          id: id,
+          type: "text",
+          value: inputText,
+          readOnly: true
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarContainer.default, {
+        ...selectProps(rest),
+        daySize: daySize,
+        validation: validation,
+        remainingTokens: remainingTokens,
+        calendarDayDefaultHeight: circleSize,
+        calendarDayDefaultWidth: circleSize,
+        calendarMonthFontTokens: calendarMonthFontTokens,
+        calendarWeekFontTokens: calendarWeekFontTokens,
+        defaultFontTokens: defaultFontTokens,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDates.DayPickerSingleDateController, {
+          date: inputDate,
+          onDateChange: onChange,
+          focused: (inputDate ?? isFocused) || initialVisibleMonth !== '',
+          onFocusChange: onFocusChange,
+          numberOfMonths: 1,
+          hideKeyboardShortcutsPanel: true,
+          keepOpenOnDateSelect: false,
+          daySize: daySize,
+          renderNavPrevButton: renderPrevButton,
+          renderNavNextButton: renderNextButton,
+          isOutsideRange: isDayDisabled,
+          phrases: getCopy(),
+          initialVisibleMonth: getInitialVisibleMonth(initialVisibleMonth, inputDate),
+          renderMonthElement: _ref7 => {
+            let {
+              month
+            } = _ref7;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthCenterContainer, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                children: [_dictionary.default[copy] ? _dictionary.default[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
+              })
+            });
+          },
+          renderWeekHeaderElement: day => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: _dictionary.default[copy] ? _dictionary.default[copy].weekDays[day] : day
+          })
+        })
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(DateInputWrapper, {
+      onMouseDown: handleMouseDown,
+      onFocus: handleFocus,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.TextInput, {
+        copy: copy,
+        feedback: feedback,
+        hint: hint,
+        placeholder: placeholder,
+        onChange: onChangeInput,
+        onKeyPress: handleOnKeyPress,
+        tooltip: tooltip,
+        hintPosition: hintPosition,
+        label: label ?? _dictionary.default[copy]?.roleDescription,
+        value: inputText,
+        validation: handleValidation(validation),
+        inactive: disabled,
+        ref: textInputRef,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Portal, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PortalPositionedContainer, {
+            top: datePickerPosition.top,
+            left: datePickerPosition.left,
+            ref: datePickerRef,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarContainer.default, {
+              ...selectProps(rest),
+              daySize: daySize,
+              validation: validation,
+              remainingTokens: remainingTokens,
+              calendarDayDefaultHeight: circleSize,
+              calendarDayDefaultWidth: circleSize,
+              calendarMonthFontTokens: calendarMonthFontTokens,
+              calendarWeekFontTokens: calendarWeekFontTokens,
+              defaultFontTokens: defaultFontTokens,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDates.SingleDatePicker, {
+                date: inputDate,
+                disabled: disabled,
+                onDateChange: onChange,
+                focused: isFocused,
+                onFocusChange: onFocusChange,
+                numberOfMonths: 1,
+                hideKeyboardShortcutsPanel: true,
+                keepOpenOnDateSelect: true,
+                daySize: daySize,
+                ref: ref,
+                renderNavPrevButton: renderPrevButton,
+                isOutsideRange: isDayDisabled,
+                phrases: getCopy(),
+                id: id,
+                renderNavNextButton: renderNextButton,
+                initialVisibleMonth: getInitialVisibleMonth(initialVisibleMonth, inputDate),
+                renderMonthElement: _ref8 => {
+                  let {
+                    month
+                  } = _ref8;
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthCenterContainer, {
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                      children: [_dictionary.default[copy] ? _dictionary.default[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
+                    })
+                  });
+                },
+                renderWeekHeaderElement: day => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  children: _dictionary.default[copy] ? _dictionary.default[copy].weekDays[day] : day
+                })
+              })
+            })
+          })
+        })
+      })
+    })
+  });
+});
+DatePicker.displayName = 'DatePicker';
+DatePicker.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('DatePicker'),
+  /**
+   * A unique identifier.
+   */
+  id: _propTypes.default.string.isRequired,
+  /**
+   *  Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+  /**
+   * A Moment instance representing the currently selected date, i.e. `moment()`
+   */
+  date: _reactMomentProptypes.default.momentObj,
+  /**
+   * A Moment instance representing the currently selected date, i.e. `moment()`
+   */
+  dateFormat: _propTypes.default.string,
+  /**
+   * Optional date format for the date input. If not set, the default value will be `DD / MM / YYYY`
+   */
+  feedback: _propTypes.default.string,
+  /**
+   * Event triggered every time a new date is clicked on
+   * @param {Moment} date The new date that was selected
+   */
+  onDateChange: _propTypes.default.func,
+  /**
+   * A function determining whether a given date should be disabled
+   * @param {Moment} date The date to optionally disable
+   * @returns {bool}
+   */
+  isDayDisabled: _propTypes.default.func,
+  /**
+   * The field label to be displayed above the calendar
+   */
+  label: _propTypes.default.string,
+  /**
+   * A flag determining if the calendar picker is standalone or an input with overlay
+   */
+  inline: _propTypes.default.bool,
+  /**
+   * A short description of the expected input.
+   */
+  hint: _propTypes.default.string,
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+  /**
+   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: _propTypes.default.string,
+  /**
+   * Use to visually mark an input as valid or invalid.
+   */
+  validation: _propTypes.default.oneOf(['error', 'success']),
+  /**
+   * Disable the input which will not open the calendar picker
+   */
+  disabled: _propTypes.default.bool,
+  /**
+   * A unique identifier for the previous icon button located on the datepicker.
+   * This is for automation testing purposes.
+   * Will be added as a `data-testid-prev` attribute for example.
+   */
+  prevTestID: _propTypes.default.string,
+  /**
+   * A unique identifier for the next icon button located on the datepicker.
+   * This is for automation testing purposes.
+   * Will be added as a `data-testid-next` attribute for example.
+   */
+  nextTestID: _propTypes.default.string,
+  /**
+   * Optional placeholder for the date input. If not set, the default value will be equal to the `dateFormat` prop
+   */
+  placeholder: _propTypes.default.string,
+  /**
+   * The initial month to display when the calendar is opened. Expects a string in the format `YYYY-MM`
+   */
+  initialVisibleMonth: _propTypes.default.string
+};
+var _default = exports.default = DatePicker;

package/lib/cjs/DatePicker/dictionary.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// from https://github.com/airbnb/react-dates/blob/master/src/defaultPhrases.js
+const calendarLabel = 'Calendrier';
+const roleDescription = 'Sélecteur de date';
+const closeDatePicker = 'Fermer ';
+const clearDate = 'Supprimer la date';
+const jumpToPrevMonth = 'Reculer pour passer au mois précédent.';
+const jumpToNextMonth = 'Avancer pour passer au mois suivant.';
+const keyboardShortcuts = 'Raccourcis clavier ';
+const showKeyboardShortcutsPanel = 'Ouvrir le panneau de raccourcis clavier.';
+const hideKeyboardShortcutsPanel = 'Fermez le panneau de raccourcis.';
+const openThisPanel = 'Ouvrir le panneau. ';
+const enterKey = 'Touche Entrée ';
+const leftArrowRightArrow = 'Touches de direction droite et gauche';
+const upArrowDownArrow = 'Touches de direction haut et bas';
+const pageUpPageDown = 'Touches Page précédente et Page suivante';
+const homeEnd = 'Touches Accueil et Fin';
+const escape = 'Touche Échap.';
+const questionMark = `Point d'interrogation`;
+const selectFocusedDate = 'Sélectionner la date mise au point.';
+const moveFocusByOneDay = `Reculer (à gauche) et avancer (à droite) d'un jour.`;
+const moveFocusByOneWeek = `Reculer (vers le haut) et avancer (vers le bas) d'une semaine.`;
+const moveFocusByOneMonth = 'Changer de mois.';
+const moveFocustoStartAndEndOfWeek = 'Aller au premier ou au dernier jour de la semaine.';
+const returnFocusToInput = 'Revenir au champ de saisie de la date.';
+const keyboardForwardNavigationInstructions = `Naviguer vers l'avant pour interagir avec le calendrier et sélectionner une date. Appuyer sur la touche Point d'interrogation pour obtenir les raccourcis clavier permettant de modifier les dates.`;
+const keyboardBackwardNavigationInstructions = `Naviguer en arrière pour interagir avec le calendrier et sélectionner une date. Appuyer sur la touche Point d'interrogation pour obtenir les raccourcis clavier permettant de modifier les dates.`;
+const months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Julliet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
+const weekDays = {
+  Su: 'Dim',
+  Mo: 'Lun',
+  Tu: 'Mar',
+  We: 'Mer',
+  Th: 'Jeu',
+  Fr: 'Ven',
+  Sa: 'Sam'
+};
+const chooseAvailableStartDate = _ref => {
+  let {
+    date
+  } = _ref;
+  return `Choisir ${date}. Disponible.`;
+};
+const chooseAvailableEndDate = _ref2 => {
+  let {
+    date
+  } = _ref2;
+  return `Non disponible. ${date}`;
+};
+const chooseAvailableDate = _ref3 => {
+  let {
+    date
+  } = _ref3;
+  return date;
+};
+const dateIsUnavailable = _ref4 => {
+  let {
+    date
+  } = _ref4;
+  return `Not available. ${date}`;
+};
+const dateIsSelected = _ref5 => {
+  let {
+    date
+  } = _ref5;
+  return `Choisie. ${date}`;
+};
+const dateIsSelectedAsStartDate = _ref6 => {
+  let {
+    date
+  } = _ref6;
+  return `Choisie comme date de début. ${date}`;
+};
+const dateIsSelectedAsEndDate = _ref7 => {
+  let {
+    date
+  } = _ref7;
+  return `Choisie comme date de fin. ${date}`;
+};
+const dictionary = {
+  en: undefined,
+  // uses react-dates defaults
+  fr: {
+    calendarLabel,
+    roleDescription,
+    jumpToPrevMonth,
+    jumpToNextMonth,
+    keyboardShortcuts,
+    showKeyboardShortcutsPanel,
+    hideKeyboardShortcutsPanel,
+    openThisPanel,
+    enterKey,
+    leftArrowRightArrow,
+    upArrowDownArrow,
+    pageUpPageDown,
+    homeEnd,
+    escape,
+    questionMark,
+    selectFocusedDate,
+    moveFocusByOneDay,
+    moveFocusByOneWeek,
+    moveFocusByOneMonth,
+    moveFocustoStartAndEndOfWeek,
+    returnFocusToInput,
+    months,
+    weekDays,
+    chooseAvailableStartDate,
+    chooseAvailableEndDate,
+    chooseAvailableDate,
+    dateIsUnavailable,
+    dateIsSelected,
+    dateIsSelectedAsStartDate,
+    dateIsSelectedAsEndDate,
+    closeDatePicker,
+    clearDate,
+    keyboardForwardNavigationInstructions,
+    keyboardBackwardNavigationInstructions
+  }
+};
+var _default = exports.default = dictionary;

package/lib/cjs/DatePicker/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _DatePicker = _interopRequireDefault(require("./DatePicker"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _DatePicker.default;