@digitransit-component/digitransit-component-datetimepicker 7.1.0 → 8.0.0

package/lib/index.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 import { useTranslation, I18nextProvider } from 'react-i18next';
 import { DateTime, Settings } from 'luxon';
 import debounce from 'lodash/debounce';
@@ -7,6 +7,7 @@ import uniqueId from 'lodash/uniqueId';
 import Icon from '@digitransit-component/digitransit-component-icon';
 import Select from 'react-select';
 import cx from 'classnames';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import Modal from 'react-modal';
 import { useSelect } from 'downshift';
 import { createInstance } from 'i18next';
@@ -260,144 +261,146 @@ function DesktopDatetimepicker({
     return isValidHour ? option.label.split(':')[0] === comp.split(':')[0] : true;
   };
   const ariaError = t('invalid-input', translationSettings);
-  return /*#__PURE__*/React.createElement("label", {
+  return /*#__PURE__*/jsxs("label", {
     className: styles['combobox-container'],
-    htmlFor: inputId
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles['sr-only'],
-    id: labelId
-  }, label, " ", displayValue), icon, /*#__PURE__*/React.createElement(Select, {
-    "aria-labelledby": labelId,
-    ariaLiveMessages: {
-      guidance: context => {
-        // When user types invalid value, isDisabled becomes undefined instead of false
-        if (context.isDisabled === undefined && invalidInput) {
-          return ariaError;
+    htmlFor: inputId,
+    children: [/*#__PURE__*/jsxs("span", {
+      className: styles['sr-only'],
+      id: labelId,
+      children: [label, " ", displayValue]
+    }), icon, /*#__PURE__*/jsx(Select, {
+      "aria-labelledby": labelId,
+      ariaLiveMessages: {
+        guidance: context => {
+          // When user types invalid value, isDisabled becomes undefined instead of false
+          if (context.isDisabled === undefined && invalidInput) {
+            return ariaError;
+          }
+          return '.'; // this can't be empty for some reason
+        },
+        onChange: () => {
+          return '';
+        },
+        onFilter: () => {
+          return '';
+        },
+        onFocus: ({
+          context,
+          label: itemLabel
+        }) => {
+          if (context === 'menu') {
+            return itemLabel;
+          }
+          return '';
         }
-        return '.'; // this can't be empty for some reason
       },
-      onChange: () => {
-        return '';
+      options: options,
+      inputId: inputId,
+      onChange: time => {
+        const currentTime = DateTime.fromMillis(value).toFormat('HH:mm');
+        const ts = getTs(displayValue, value);
+        if (typing) {
+          if (ts !== null) {
+            if (currentTime !== displayValue && time.value === value) {
+              handleTimestamp(ts);
+            } else {
+              handleTimestamp(time.value);
+            }
+            setTyping(false);
+          } else {
+            if (time.value !== value) {
+              handleTimestamp(time.value);
+            } else {
+              // reset value
+              changeDisplayValue(getDisplay(value));
+            }
+            setTyping(false);
+          }
+          if (!datePicker) {
+            setinvalidInput(false);
+          }
+          return;
+        }
+        if (!datePicker) {
+          setinvalidInput(false);
+        }
+        handleTimestamp(time.value);
       },
-      onFilter: () => {
+      components: {
+        IndicatorsContainer: () => null
+      },
+      className: cx(styles['datetimepicker-select-container'], invalidInput && 'datetimepicker-invalid-input'),
+      classNamePrefix: "datetimepicker-select",
+      onInputChange: onInputChange,
+      inputValue: !disableTyping && displayValue,
+      value: closestOption,
+      noOptionsMessage: () => {
         return '';
       },
-      onFocus: ({
-        context,
-        label: itemLabel
-      }) => {
-        if (context === 'menu') {
-          return itemLabel;
+      filterOption: (option, input) => {
+        if (datePicker) {
+          return true;
         }
-        return '';
-      }
-    },
-    options: options,
-    inputId: inputId,
-    onChange: time => {
-      const currentTime = DateTime.fromMillis(value).toFormat('HH:mm');
-      const ts = getTs(displayValue, value);
-      if (typing) {
-        if (ts !== null) {
-          if (currentTime !== displayValue && time.value === value) {
-            handleTimestamp(ts);
-          } else {
-            handleTimestamp(time.value);
+        const completeInput = input.length === 5 || input.length === 4 && input.split(':')[0].length === 1;
+        const isMod15 = option.label.split(':')[1] % 15 === 0;
+        const minuteInput = input.split(':')[1]?.length === 1;
+        if (showAllOptions && isMod15) {
+          return true;
+        }
+        if (minuteInput) {
+          const inputH = input.split(':')[0].length === 1 ? '0'.concat(input.split(':')[0]) : input.split(':')[0];
+          const inputM = input.split(':')[1];
+          const optH = option.label.split(':')[0];
+          const optM = option.label.split(':')[1];
+          if (inputH === optH) {
+            const time = Number(inputM) * 10;
+            const total = Number(optM) - time;
+            if (total >= 0 && total <= 9) {
+              return true;
+            }
+            return false;
           }
-          setTyping(false);
-        } else {
-          if (time.value !== value) {
-            handleTimestamp(time.value);
+        }
+        if (completeInput && !showAllOptions) {
+          return input.length === 4 ? '0'.concat(input) === option.label : input === option.label;
+        }
+        if (isMod15) {
+          return filterOptions(option, input);
+        }
+        return false;
+      },
+      controlShouldRenderValue: disableTyping,
+      tabSelectsValue: false,
+      placeholder: "",
+      onFocus: e => {
+        if (!disableTyping) {
+          e.target.select();
+        }
+      },
+      onBlur: () => {
+        // removing focus also locks in value
+        if (typing) {
+          const validated = getTs(displayValue, value);
+          if (validated !== null) {
+            handleTimestamp(validated);
+            setTyping(false);
           } else {
-            // reset value
             changeDisplayValue(getDisplay(value));
+            setTyping(false);
           }
-          setTyping(false);
         }
         if (!datePicker) {
           setinvalidInput(false);
         }
-        return;
-      }
-      if (!datePicker) {
-        setinvalidInput(false);
-      }
-      handleTimestamp(time.value);
-    },
-    components: {
-      IndicatorsContainer: () => null
-    },
-    className: cx(styles['datetimepicker-select-container'], invalidInput && 'datetimepicker-invalid-input'),
-    classNamePrefix: "datetimepicker-select",
-    onInputChange: onInputChange,
-    inputValue: !disableTyping && displayValue,
-    value: closestOption,
-    noOptionsMessage: () => {
-      return '';
-    },
-    filterOption: (option, input) => {
-      if (datePicker) {
-        return true;
-      }
-      const completeInput = input.length === 5 || input.length === 4 && input.split(':')[0].length === 1;
-      const isMod15 = option.label.split(':')[1] % 15 === 0;
-      const minuteInput = input.split(':')[1]?.length === 1;
-      if (showAllOptions && isMod15) {
-        return true;
-      }
-      if (minuteInput) {
-        const inputH = input.split(':')[0].length === 1 ? '0'.concat(input.split(':')[0]) : input.split(':')[0];
-        const inputM = input.split(':')[1];
-        const optH = option.label.split(':')[0];
-        const optM = option.label.split(':')[1];
-        if (inputH === optH) {
-          const time = Number(inputM) * 10;
-          const total = Number(optM) - time;
-          if (total >= 0 && total <= 9) {
-            return true;
-          }
-          return false;
-        }
-      }
-      if (completeInput && !showAllOptions) {
-        return input.length === 4 ? '0'.concat(input) === option.label : input === option.label;
-      }
-      if (isMod15) {
-        return filterOptions(option, input);
-      }
-      return false;
-    },
-    controlShouldRenderValue: disableTyping,
-    tabSelectsValue: false,
-    placeholder: "",
-    onFocus: e => {
-      if (!disableTyping) {
-        e.target.select();
-      }
-    },
-    onBlur: () => {
-      // removing focus also locks in value
-      if (typing) {
-        const validated = getTs(displayValue, value);
-        if (validated !== null) {
-          handleTimestamp(validated);
-          setTyping(false);
-        } else {
-          changeDisplayValue(getDisplay(value));
+      },
+      onKeyDown: e => {
+        if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
           setTyping(false);
         }
-      }
-      if (!datePicker) {
-        setinvalidInput(false);
-      }
-    },
-    onKeyDown: e => {
-      if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
-        setTyping(false);
-      }
-    },
-    isSearchable: !disableTyping
-  }));
+      },
+      isSearchable: !disableTyping
+    })]
+  });
 }
 process.env.NODE_ENV !== "production" ? DesktopDatetimepicker.propTypes = {
   value: PropTypes.number.isRequired,
@@ -455,6 +458,43 @@ function dateTimeInputIsSupported() {
   return true;
 }
 
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
+function toPrimitive(t, r) {
+  if ("object" != _typeof(t) || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != _typeof(i)) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+
+function toPropertyKey(t) {
+  var i = toPrimitive(t, "string");
+  return "symbol" == _typeof(i) ? i : i + "";
+}
+
+function _defineProperty(e, r, t) {
+  return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const AndroidSelect = ({
   value,
   dateChoices,
@@ -488,21 +528,31 @@ const AndroidSelect = ({
     },
     id
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.container
-  }, /*#__PURE__*/React.createElement("div", getToggleButtonProps({
-    'aria-labelledby': labelId,
-    id: inputId
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.input
-  }, selectedItem.label)), /*#__PURE__*/React.createElement("div", {
-    className: cx(styles.suggestionsContainerOpen, !isOpen && 'hidden')
-  }, /*#__PURE__*/React.createElement("ul", getMenuProps(), isOpen && items.map((option, index) => /*#__PURE__*/React.createElement("li", Object.assign({
-    key: option.value,
-    className: cx(styles.suggestion, index === highlightedIndex && styles.suggestionHighlighted)
-  }, getItemProps({
-    index
-  })), /*#__PURE__*/React.createElement("span", null, option.label))))));
+  return /*#__PURE__*/jsxs("div", {
+    className: styles.container,
+    children: [/*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, getToggleButtonProps({
+      'aria-labelledby': labelId,
+      id: inputId
+    })), {}, {
+      children: /*#__PURE__*/jsx("div", {
+        className: styles.input,
+        children: selectedItem.label
+      })
+    })), /*#__PURE__*/jsx("div", {
+      className: cx(styles.suggestionsContainerOpen, !isOpen && 'hidden'),
+      children: /*#__PURE__*/jsx("ul", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
+        children: isOpen && items.map((option, index) => /*#__PURE__*/jsx("li", _objectSpread(_objectSpread({
+          className: cx(styles.suggestion, index === highlightedIndex && styles.suggestionHighlighted)
+        }, getItemProps({
+          index
+        })), {}, {
+          children: /*#__PURE__*/jsx("span", {
+            children: option.label
+          })
+        }), option.value))
+      }))
+    })]
+  });
 };
 process.env.NODE_ENV !== "production" ? AndroidSelect.propTypes = {
   value: PropTypes.number.isRequired,
@@ -535,31 +585,36 @@ function MobileDatepicker({
   const nativeInput = !isAndroid();
   const labelId = `${id}-label`;
   const inputId = `${id}-input`;
-  return /*#__PURE__*/React.createElement("label", {
+  return /*#__PURE__*/jsxs("label", {
     className: styles['input-container'],
-    htmlFor: inputId
-  }, /*#__PURE__*/React.createElement("span", null, icon), /*#__PURE__*/React.createElement("span", {
-    className: styles['sr-only'],
-    id: labelId
-  }, label), nativeInput ? /*#__PURE__*/React.createElement("select", {
-    id: inputId,
-    className: styles['mobile-input-display'],
-    onChange: e => onChange(Number(e.target.value)),
-    value: value
-  }, dateChoices.map(date => {
-    return /*#__PURE__*/React.createElement("option", {
-      key: date,
-      value: date
-    }, getDisplay(date));
-  })) : /*#__PURE__*/React.createElement(AndroidSelect, {
-    value,
-    dateChoices,
-    id,
-    getDisplay,
-    onChange,
-    labelId,
-    inputId
-  }));
+    htmlFor: inputId,
+    children: [/*#__PURE__*/jsx("span", {
+      children: icon
+    }), /*#__PURE__*/jsx("span", {
+      className: styles['sr-only'],
+      id: labelId,
+      children: label
+    }), nativeInput ? /*#__PURE__*/jsx("select", {
+      id: inputId,
+      className: styles['mobile-input-display'],
+      onChange: e => onChange(Number(e.target.value)),
+      value: value,
+      children: dateChoices.map(date => {
+        return /*#__PURE__*/jsx("option", {
+          value: date,
+          children: getDisplay(date)
+        }, date);
+      })
+    }) : /*#__PURE__*/jsx(AndroidSelect, {
+      value,
+      dateChoices,
+      id,
+      getDisplay,
+      onChange,
+      labelId,
+      inputId
+    })]
+  });
 }
 process.env.NODE_ENV !== "production" ? MobileDatepicker.propTypes = {
   value: PropTypes.number.isRequired,
@@ -573,9 +628,6 @@ process.env.NODE_ENV !== "production" ? MobileDatepicker.propTypes = {
   timeZone: PropTypes.string
 } : void 0;
 
-/**
- * Component to display a time input on mobile
- */
 function MobileTimepicker({
   value,
   getDisplay,
@@ -591,42 +643,46 @@ function MobileTimepicker({
   const inputId = `${id}-input`;
   const labelId = `${id}-label`;
   const showError = !isValidInput;
-  return /*#__PURE__*/React.createElement("label", {
+  return /*#__PURE__*/jsxs("label", {
     className: styles['input-container'],
-    htmlFor: inputId
-  }, /*#__PURE__*/React.createElement("span", null, icon), /*#__PURE__*/React.createElement("span", {
-    className: styles['sr-only'],
-    id: labelId
-  }, label), /*#__PURE__*/React.createElement("input", {
-    id: inputId,
-    inputMode: "numeric",
-    type: "text",
-    maxLength: "6",
-    className: cx(styles['time-input-mobile'], showError && 'mobile-datetimepicker-invalid-input'),
-    value: inputValue,
-    onFocus: e => {
-      e.target.setSelectionRange(0, 0); // set caret to start of input
-    },
-    onChange: event => {
-      let newValue = event.target.value.replace('.', ':');
-      const valid = validateInput(newValue);
-      setValidInput(valid);
-      if (
-      // number typed as first char => clear rest of the input
-      newValue.match(/[0-9]{3}:[0-9]{2}/) && newValue.slice(1) === inputValue) {
-        newValue = newValue.charAt(0);
-      }
-      if (newValue.length > 5) {
-        return;
-      }
-      const actual = parseTypedTime(newValue);
-      changeInputValue(actual);
-      const timestamp = getTs(actual, value);
-      if (timestamp) {
-        onChange(timestamp);
+    htmlFor: inputId,
+    children: [/*#__PURE__*/jsx("span", {
+      children: icon
+    }), /*#__PURE__*/jsx("span", {
+      className: styles['sr-only'],
+      id: labelId,
+      children: label
+    }), /*#__PURE__*/jsx("input", {
+      id: inputId,
+      inputMode: "numeric",
+      type: "text",
+      maxLength: "6",
+      className: cx(styles['time-input-mobile'], showError && 'mobile-datetimepicker-invalid-input'),
+      value: inputValue,
+      onFocus: e => {
+        e.target.setSelectionRange(0, 0); // set caret to start of input
+      },
+      onChange: event => {
+        let newValue = event.target.value.replace('.', ':');
+        const valid = validateInput(newValue);
+        setValidInput(valid);
+        if (
+        // number typed as first char => clear rest of the input
+        newValue.match(/[0-9]{3}:[0-9]{2}/) && newValue.slice(1) === inputValue) {
+          newValue = newValue.charAt(0);
+        }
+        if (newValue.length > 5) {
+          return;
+        }
+        const actual = parseTypedTime(newValue);
+        changeInputValue(actual);
+        const timestamp = getTs(actual, value);
+        if (timestamp) {
+          onChange(timestamp);
+        }
       }
-    }
-  }));
+    })]
+  });
 }
 process.env.NODE_ENV !== "production" ? MobileTimepicker.propTypes = {
   value: PropTypes.number.isRequired,
@@ -689,96 +745,110 @@ function MobilePickerModal({
     hour: DateTime.fromMillis(displayTimestamp).hour,
     minute: DateTime.fromMillis(displayTimestamp).minute
   }).toMillis();
-  return /*#__PURE__*/React.createElement(Modal, {
+  return /*#__PURE__*/jsx(Modal, {
     appElement: document ? document.querySelector('#app') : undefined,
     isOpen: true,
     className: styles['mobile-modal-content'],
     overlayClassName: styles['mobile-modal-overlay'],
-    onAfterClose: onAfterClose
-  }, /*#__PURE__*/React.createElement("div", {
-    id: "digitransit-mobile-datetime",
-    style: {
-      '--color': `${color}`
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles['top-row']
-  }, /*#__PURE__*/React.createElement("h3", {
-    className: styles['modal-title']
-  }, t('choose-time', translationSettings)), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: styles['departure-now-button'],
-    onClick: onNowClick
-  }, t('departure-now', translationSettings))), /*#__PURE__*/React.createElement("div", {
-    className: styles['tab-row']
-  }, /*#__PURE__*/React.createElement("label", {
-    htmlFor: `${htmlId}-modal-departure`,
-    className: `${styles['radio-tab-label']}
-                ${styles[departureOrArrivalCurrent === 'departure' ? 'active' : undefined]}`
-  }, t('departure', translationSettings), /*#__PURE__*/React.createElement("input", {
-    id: `${htmlId}-modal-departure`,
-    name: "departureOrArrival",
-    type: "radio",
-    value: "departure",
-    className: styles['radio-textbutton'],
-    onChange: () => {
-      onDepartureClick();
-    },
-    checked: departureOrArrivalCurrent === 'departure'
-  })), /*#__PURE__*/React.createElement("label", {
-    htmlFor: `${htmlId}-modal-arrival`,
-    className: `${styles['radio-tab-label']}
-                ${styles[departureOrArrivalCurrent === 'arrival' ? 'active' : undefined]}`
-  }, t('arrival', translationSettings), /*#__PURE__*/React.createElement("input", {
-    id: `${htmlId}-modal-arrival`,
-    name: "departureOrArrival",
-    type: "radio",
-    value: "arrival",
-    className: styles['radio-textbutton'],
-    onChange: () => {
-      onArrivalClick();
-    },
-    checked: departureOrArrivalCurrent === 'arrival'
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: styles['input-row']
-  }, /*#__PURE__*/React.createElement(MobileDatepicker, {
-    value: displayTimestamp,
-    getDisplay: getDateDisplay,
-    onChange: changeTimestamp,
-    itemCount: dateSelectItemCount,
-    startTime: dateSelectStartTime,
-    id: `${htmlId}-date`,
-    label: t('date', translationSettings),
-    icon: /*#__PURE__*/React.createElement("span", {
-      className: `${styles['combobox-icon']} ${styles['date-input-icon']}`
-    }, /*#__PURE__*/React.createElement(Icon, {
-      img: "calendar",
-      color: color
-    })),
-    timeZone: timeZone
-  }), /*#__PURE__*/React.createElement(MobileTimepicker, {
-    value: displayTimestamp,
-    getDisplay: getTimeDisplay,
-    onChange: changeTimestamp,
-    id: `${htmlId}-time`,
-    label: t('time', translationSettings),
-    icon: /*#__PURE__*/React.createElement("span", {
-      className: `${styles['combobox-icon']} ${styles['time-input-icon']}`
-    }, /*#__PURE__*/React.createElement(Icon, {
-      img: "time",
-      color: color
-    })),
-    timeZone: timeZone
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles['buttons-row']
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: styles['ready-button'],
-    onClick: () => onSubmit(displayTimestamp, departureOrArrivalCurrent)
-  }, t('ready', translationSettings)), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: styles['cancel-button'],
-    onClick: onCancel
-  }, t('cancel', translationSettings)))));
+    onAfterClose: onAfterClose,
+    children: /*#__PURE__*/jsxs("div", {
+      id: "digitransit-mobile-datetime",
+      style: {
+        '--color': `${color}`
+      },
+      children: [/*#__PURE__*/jsxs("div", {
+        className: styles['top-row'],
+        children: [/*#__PURE__*/jsx("h3", {
+          className: styles['modal-title'],
+          children: t('choose-time', translationSettings)
+        }), /*#__PURE__*/jsx("button", {
+          type: "button",
+          className: styles['departure-now-button'],
+          onClick: onNowClick,
+          children: t('departure-now', translationSettings)
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: styles['tab-row'],
+        children: [/*#__PURE__*/jsxs("label", {
+          htmlFor: `${htmlId}-modal-departure`,
+          className: `${styles['radio-tab-label']}
+                ${styles[departureOrArrivalCurrent === 'departure' ? 'active' : undefined]}`,
+          children: [t('departure', translationSettings), /*#__PURE__*/jsx("input", {
+            id: `${htmlId}-modal-departure`,
+            name: "departureOrArrival",
+            type: "radio",
+            value: "departure",
+            className: styles['radio-textbutton'],
+            onChange: () => {
+              onDepartureClick();
+            },
+            checked: departureOrArrivalCurrent === 'departure'
+          })]
+        }), /*#__PURE__*/jsxs("label", {
+          htmlFor: `${htmlId}-modal-arrival`,
+          className: `${styles['radio-tab-label']}
+                ${styles[departureOrArrivalCurrent === 'arrival' ? 'active' : undefined]}`,
+          children: [t('arrival', translationSettings), /*#__PURE__*/jsx("input", {
+            id: `${htmlId}-modal-arrival`,
+            name: "departureOrArrival",
+            type: "radio",
+            value: "arrival",
+            className: styles['radio-textbutton'],
+            onChange: () => {
+              onArrivalClick();
+            },
+            checked: departureOrArrivalCurrent === 'arrival'
+          })]
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: styles['input-row'],
+        children: [/*#__PURE__*/jsx(MobileDatepicker, {
+          value: displayTimestamp,
+          getDisplay: getDateDisplay,
+          onChange: changeTimestamp,
+          itemCount: dateSelectItemCount,
+          startTime: dateSelectStartTime,
+          id: `${htmlId}-date`,
+          label: t('date', translationSettings),
+          icon: /*#__PURE__*/jsx("span", {
+            className: `${styles['combobox-icon']} ${styles['date-input-icon']}`,
+            children: /*#__PURE__*/jsx(Icon, {
+              img: "calendar",
+              color: color
+            })
+          }),
+          timeZone: timeZone
+        }), /*#__PURE__*/jsx(MobileTimepicker, {
+          value: displayTimestamp,
+          getDisplay: getTimeDisplay,
+          onChange: changeTimestamp,
+          id: `${htmlId}-time`,
+          label: t('time', translationSettings),
+          icon: /*#__PURE__*/jsx("span", {
+            className: `${styles['combobox-icon']} ${styles['time-input-icon']}`,
+            children: /*#__PURE__*/jsx(Icon, {
+              img: "time",
+              color: color
+            })
+          }),
+          timeZone: timeZone
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: styles['buttons-row'],
+        children: [/*#__PURE__*/jsx("button", {
+          type: "button",
+          className: styles['ready-button'],
+          onClick: () => onSubmit(displayTimestamp, departureOrArrivalCurrent),
+          children: t('ready', translationSettings)
+        }), /*#__PURE__*/jsx("button", {
+          type: "button",
+          className: styles['cancel-button'],
+          onClick: onCancel,
+          children: t('cancel', translationSettings)
+        })]
+      })]
+    })
+  });
 }
 process.env.NODE_ENV !== "production" ? MobilePickerModal.propTypes = {
   timeZone: PropTypes.string,
@@ -1005,7 +1075,7 @@ function Datetimepicker({
   };
   function renderOpen() {
     if (useMobileInputs) {
-      return isOpen && /*#__PURE__*/React.createElement(MobilePickerModal, {
+      return isOpen && /*#__PURE__*/jsx(MobilePickerModal, {
         departureOrArrival: departureOrArrival,
         onNowClick: handleNowClick,
         lang: lang,
@@ -1027,114 +1097,134 @@ function Datetimepicker({
         getDisplay: getTimeDisplay
       });
     }
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: `${styles['datetimepicker-open-container']} ${!isOpen ? styles.hidden : ''}`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: isOpen ? `${styles['top-row-container']} datetimepicker-top-row` : `${styles.hidden} datetimepicker-top-row`
-    }, ' ', /*#__PURE__*/React.createElement("span", {
-      role: "alert",
-      className: styles['sr-only'],
-      ref: alertRef
-    }), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", {
-      className: styles['departure-or-arrival-container']
-    }, /*#__PURE__*/React.createElement("label", {
-      htmlFor: `${htmlId}-departure`,
-      className: `${styles['radio-textbutton-label']}
-                ${styles[departureOrArrival === 'departure' ? 'active' : undefined]}`
-    }, t('departure', translationSettings), /*#__PURE__*/React.createElement("input", {
-      id: `${htmlId}-departure`,
-      name: "departureOrArrival",
-      type: "radio",
-      value: "departure",
-      className: styles['radio-textbutton'],
-      onChange: () => {
-        onDepartureClick();
-      },
-      checked: departureOrArrival === 'departure'
-    })), /*#__PURE__*/React.createElement("label", {
-      htmlFor: `${htmlId}-arrival`,
-      className: `${styles['radio-textbutton-label']}
-                ${styles[departureOrArrival === 'arrival' ? 'active' : undefined]}`
-    }, t('arrival', translationSettings), /*#__PURE__*/React.createElement("input", {
-      id: `${htmlId}-arrival`,
-      name: "departureOrArrival",
-      type: "radio",
-      value: "arrival",
-      className: styles['radio-textbutton'],
-      onChange: () => {
-        onArrivalClick();
-      },
-      checked: departureOrArrival === 'arrival'
-    }))), /*#__PURE__*/React.createElement("button", {
-      id: `${htmlId}-now`,
-      type: "button",
-      className: styles['departure-now-button'],
-      onClick: handleNowClick,
-      ref: inputRef
-    }, t('departure-now', translationSettings)), /*#__PURE__*/React.createElement("span", {
-      className: styles['right-edge']
-    }, /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: styles['close-button'],
-      "aria-controls": `${htmlId}-root`,
-      "aria-expanded": "true",
-      onClick: handleClose
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles['close-icon']
-    }, /*#__PURE__*/React.createElement(Icon, {
-      img: "close",
-      color: color
-    })), /*#__PURE__*/React.createElement("span", {
-      className: styles['sr-only']
-    }, t('accessible-close', translationSettings))))), /*#__PURE__*/React.createElement("div", {
-      className: isOpen ? `${styles['picker-container']}` : `${styles.hidden} datetimepicker-top-row`
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles['combobox-left']
-    }, /*#__PURE__*/React.createElement(DesktopDatetimepicker, {
-      value: displayTimestamp,
-      onChange: newValue => {
-        onDateChange(newValue);
-      },
-      getDisplay: getDateDisplay,
-      timeChoices: dateChoices,
-      validate: () => null,
-      icon: /*#__PURE__*/React.createElement("span", {
-        className: `${styles['combobox-icon']} ${styles['date-input-icon']}`
-      }, /*#__PURE__*/React.createElement(Icon, {
-        img: "calendar",
-        color: color
-      })),
-      id: `${htmlId}-date`,
-      label: t('date', translationSettings),
-      disableTyping: true,
-      timeZone: timeZone,
-      datePicker: true
-    })), /*#__PURE__*/React.createElement("span", {
-      className: styles['combobox-right']
-    }, /*#__PURE__*/React.createElement(DesktopDatetimepicker, {
-      value: displayTimestamp,
-      onChange: newValue => {
-        onTimeChange(newValue);
-      },
-      getDisplay: getTimeDisplay,
-      timeChoices: timeChoices,
-      icon: /*#__PURE__*/React.createElement("span", {
-        className: `${styles['combobox-icon']} ${styles['time-input-icon']}`
-      }, /*#__PURE__*/React.createElement(Icon, {
-        img: "time",
-        color: color
-      })),
-      id: `${htmlId}-time`,
-      label: t('time', translationSettings),
-      timeZone: timeZone,
-      translationSettings: translationSettings
-    })))), /*#__PURE__*/React.createElement("span", {
-      className: isOpen ? '' : styles.hidden
-    }, embedWhenOpen));
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsxs("div", {
+        className: `${styles['datetimepicker-open-container']} ${!isOpen ? styles.hidden : ''}`,
+        children: [/*#__PURE__*/jsxs("div", {
+          className: isOpen ? `${styles['top-row-container']} datetimepicker-top-row` : `${styles.hidden} datetimepicker-top-row`,
+          children: [' ', /*#__PURE__*/jsx("span", {
+            role: "alert",
+            className: styles['sr-only'],
+            ref: alertRef
+          }), /*#__PURE__*/jsx("span", {}), /*#__PURE__*/jsxs("span", {
+            className: styles['departure-or-arrival-container'],
+            children: [/*#__PURE__*/jsxs("label", {
+              htmlFor: `${htmlId}-departure`,
+              className: `${styles['radio-textbutton-label']}
+                ${styles[departureOrArrival === 'departure' ? 'active' : undefined]}`,
+              children: [t('departure', translationSettings), /*#__PURE__*/jsx("input", {
+                id: `${htmlId}-departure`,
+                name: "departureOrArrival",
+                type: "radio",
+                value: "departure",
+                className: styles['radio-textbutton'],
+                onChange: () => {
+                  onDepartureClick();
+                },
+                checked: departureOrArrival === 'departure'
+              })]
+            }), /*#__PURE__*/jsxs("label", {
+              htmlFor: `${htmlId}-arrival`,
+              className: `${styles['radio-textbutton-label']}
+                ${styles[departureOrArrival === 'arrival' ? 'active' : undefined]}`,
+              children: [t('arrival', translationSettings), /*#__PURE__*/jsx("input", {
+                id: `${htmlId}-arrival`,
+                name: "departureOrArrival",
+                type: "radio",
+                value: "arrival",
+                className: styles['radio-textbutton'],
+                onChange: () => {
+                  onArrivalClick();
+                },
+                checked: departureOrArrival === 'arrival'
+              })]
+            })]
+          }), /*#__PURE__*/jsx("button", {
+            id: `${htmlId}-now`,
+            type: "button",
+            className: styles['departure-now-button'],
+            onClick: handleNowClick,
+            ref: inputRef,
+            children: t('departure-now', translationSettings)
+          }), /*#__PURE__*/jsx("span", {
+            className: styles['right-edge'],
+            children: /*#__PURE__*/jsxs("button", {
+              type: "button",
+              className: styles['close-button'],
+              "aria-controls": `${htmlId}-root`,
+              "aria-expanded": "true",
+              onClick: handleClose,
+              children: [/*#__PURE__*/jsx("span", {
+                className: styles['close-icon'],
+                children: /*#__PURE__*/jsx(Icon, {
+                  img: "close",
+                  color: color
+                })
+              }), /*#__PURE__*/jsx("span", {
+                className: styles['sr-only'],
+                children: t('accessible-close', translationSettings)
+              })]
+            })
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: isOpen ? `${styles['picker-container']}` : `${styles.hidden} datetimepicker-top-row`,
+          children: [/*#__PURE__*/jsx("span", {
+            className: styles['combobox-left'],
+            children: /*#__PURE__*/jsx(DesktopDatetimepicker, {
+              value: displayTimestamp,
+              onChange: newValue => {
+                onDateChange(newValue);
+              },
+              getDisplay: getDateDisplay,
+              timeChoices: dateChoices,
+              validate: () => null,
+              icon: /*#__PURE__*/jsx("span", {
+                className: `${styles['combobox-icon']} ${styles['date-input-icon']}`,
+                children: /*#__PURE__*/jsx(Icon, {
+                  img: "calendar",
+                  color: color
+                })
+              }),
+              id: `${htmlId}-date`,
+              label: t('date', translationSettings),
+              disableTyping: true,
+              timeZone: timeZone,
+              datePicker: true
+            })
+          }), /*#__PURE__*/jsx("span", {
+            className: styles['combobox-right'],
+            children: /*#__PURE__*/jsx(DesktopDatetimepicker, {
+              value: displayTimestamp,
+              onChange: newValue => {
+                onTimeChange(newValue);
+              },
+              getDisplay: getTimeDisplay,
+              timeChoices: timeChoices,
+              icon: /*#__PURE__*/jsx("span", {
+                className: `${styles['combobox-icon']} ${styles['time-input-icon']}`,
+                children: /*#__PURE__*/jsx(Icon, {
+                  img: "time",
+                  color: color
+                })
+              }),
+              id: `${htmlId}-time`,
+              label: t('time', translationSettings),
+              timeZone: timeZone,
+              translationSettings: translationSettings
+            })
+          })]
+        })]
+      }), /*#__PURE__*/jsx("span", {
+        className: isOpen ? '' : styles.hidden,
+        children: embedWhenOpen
+      })]
+    });
   }
   const formatToprowSummary = () => {
     if (nowSelected && departureOrArrival === 'departure') {
-      return /*#__PURE__*/React.createElement("span", null, t('departure-now', translationSettings));
+      return /*#__PURE__*/jsx("span", {
+        children: t('departure-now', translationSettings)
+      });
     }
     const dateDisplay = getDateDisplay(displayTimestamp);
     const timeDisplay = getTimeDisplay(displayTimestamp);
@@ -1144,61 +1234,77 @@ function Datetimepicker({
       days: 1
     }).hasSame(DateTime.fromMillis(displayTimestamp), 'day');
     if (isToday) {
-      return /*#__PURE__*/React.createElement("span", null, `${summary} ${timeDisplay}`);
+      return /*#__PURE__*/jsx("span", {
+        children: `${summary} ${timeDisplay}`
+      });
     }
     if (isTomorrow) {
-      return /*#__PURE__*/React.createElement("span", null, `${summary} ${dateDisplay.toLowerCase()} ${timeDisplay}`);
+      return /*#__PURE__*/jsx("span", {
+        children: `${summary} ${dateDisplay.toLowerCase()} ${timeDisplay}`
+      });
     }
-    return /*#__PURE__*/React.createElement("span", null, `${summary} ${dateDisplay} ${timeDisplay}`);
+    return /*#__PURE__*/jsx("span", {
+      children: `${summary} ${dateDisplay} ${timeDisplay}`
+    });
   };
-  return /*#__PURE__*/React.createElement("fieldset", {
+  return /*#__PURE__*/jsxs("fieldset", {
     className: styles['dt-datetimepicker'],
     id: `${htmlId}-root`,
     style: {
       '--color': `${color}`
-    }
-  }, /*#__PURE__*/React.createElement("legend", {
-    className: styles['sr-only']
-  }, t('accessible-title', translationSettings)), /*#__PURE__*/React.createElement("span", {
-    className: styles['sr-only']
-  }, t('accessible-update-instructions', translationSettings)), /*#__PURE__*/React.createElement("div", {
-    className: !isOpen ? `${styles['top-row-container']} ${styles.closed} datetimepicker-top-row` : `${styles.hidden} datetimepicker-top-row`
-  }, /*#__PURE__*/React.createElement("label", {
-    className: styles['label-open'],
-    htmlFor: `${htmlId}-open`
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles['time-icon']
-  }, /*#__PURE__*/React.createElement(Icon, {
-    img: "time",
-    color: color
-  })), /*#__PURE__*/React.createElement("span", {
-    className: styles['sr-only']
-  }, t('accessible-open', translationSettings)), /*#__PURE__*/React.createElement("span", {
-    role: "alert",
-    className: styles['sr-only'],
-    ref: alertRef
-  }), /*#__PURE__*/React.createElement("button", {
-    id: `${htmlId}-open`,
-    type: "button",
-    className: `${styles.textbutton} ${styles.active} ${styles['open-button']}`,
-    "aria-controls": `${htmlId}-root`,
-    "aria-expanded": "false",
-    onClick: () => {
-      changeOpen(true);
-      showScreenreaderOpenAlert();
-      if (onOpen) {
-        onOpen();
-      }
     },
-    ref: openPickerRef
-  }, formatToprowSummary(), /*#__PURE__*/React.createElement("span", {
-    className: styles['dropdown-icon']
-  }, /*#__PURE__*/React.createElement(Icon, {
-    img: "arrow-dropdown",
-    color: color
-  })))), /*#__PURE__*/React.createElement("span", {
-    className: styles['right-edge']
-  }, embedWhenClosed)), /*#__PURE__*/React.createElement("div", null), renderOpen());
+    children: [/*#__PURE__*/jsx("legend", {
+      className: styles['sr-only'],
+      children: t('accessible-title', translationSettings)
+    }), /*#__PURE__*/jsx("span", {
+      className: styles['sr-only'],
+      children: t('accessible-update-instructions', translationSettings)
+    }), /*#__PURE__*/jsxs("div", {
+      className: !isOpen ? `${styles['top-row-container']} ${styles.closed} datetimepicker-top-row` : `${styles.hidden} datetimepicker-top-row`,
+      children: [/*#__PURE__*/jsxs("label", {
+        className: styles['label-open'],
+        htmlFor: `${htmlId}-open`,
+        children: [/*#__PURE__*/jsx("span", {
+          className: styles['time-icon'],
+          children: /*#__PURE__*/jsx(Icon, {
+            img: "time",
+            color: color
+          })
+        }), /*#__PURE__*/jsx("span", {
+          className: styles['sr-only'],
+          children: t('accessible-open', translationSettings)
+        }), /*#__PURE__*/jsx("span", {
+          role: "alert",
+          className: styles['sr-only'],
+          ref: alertRef
+        }), /*#__PURE__*/jsxs("button", {
+          id: `${htmlId}-open`,
+          type: "button",
+          className: `${styles.textbutton} ${styles.active} ${styles['open-button']}`,
+          "aria-controls": `${htmlId}-root`,
+          "aria-expanded": "false",
+          onClick: () => {
+            changeOpen(true);
+            showScreenreaderOpenAlert();
+            if (onOpen) {
+              onOpen();
+            }
+          },
+          ref: openPickerRef,
+          children: [formatToprowSummary(), /*#__PURE__*/jsx("span", {
+            className: styles['dropdown-icon'],
+            children: /*#__PURE__*/jsx(Icon, {
+              img: "arrow-dropdown",
+              color: color
+            })
+          })]
+        })]
+      }), /*#__PURE__*/jsx("span", {
+        className: styles['right-edge'],
+        children: embedWhenClosed
+      })]
+    }), /*#__PURE__*/jsx("div", {}), renderOpen()]
+  });
 }
 process.env.NODE_ENV !== "production" ? Datetimepicker.propTypes = {
   timestamp: PropTypes.number,
@@ -1338,43 +1444,6 @@ const i18n = createInstance({
 });
 i18n.init();
 
-/**
- * This component renders an input to choose a date and time. Renders separate input fields for date and time selection. Values for timestamp and arriveBy correspond to Digitransit query params time and arriveBy. This component will display a native date input on mobile and a custom one for desktop. Mobile detection is done by parsing user agent.
- *
- * @alias Datetimepicker
- *
- * @param {Object} props
- *
- * @param {boolean} props.realtime                  Determine if selected time should be updated in realtime when 'now' is selected.
- * @param {Number} props.initialTimestamp           Initial value for selected time. Unix timestamp in seconds. Updating this will change timepicker value but the correct value is kept in component state even if this is not updated.
- * @param {boolean} props.initialArriveBy           Initial value for arriveBy. Determines if picker is in arrival mode (true) or departure mode (false). Correct value is kept in component state even if this is not updated. Changing this will also trigger change in the component.
- * @param {function} props.onTimeChange             Called with (time, arriveBy) when time input changes. time is number timestamp in seconds, arriveBy is boolean
- * @param {function} props.onDateChange             Called with (time, arriveBy) when date input changes. time is number timestamp in seconds, arriveBy is boolean
- * @param {function} props.onNowClick               Called when "depart now" button is clicked. time is current input value in seconds
- * @param {function} props.onDepartureClick         Called with (time) when "departure" button is clicked. time is current input value in seconds
- * @param {function} props.onArrivalClick           Called with (time) when "arrival" button is clicked. time is current input value in seconds
- * @param {node} props.embedWhenClosed              JSX element to render in the corner when input is closed
- * @param {node} props.embedWhenOpen                JSX element to render when input is open
- * @param {string} props.lang                       Language selection. Default 'en'
- * @param {number} props.serviceTimeRange           Determine number of days shown in timepicker. Optional. default is 30.
- * @param {function} props.onOpen                   Determine what to do when timepicker is open. Optional. no default implementation.
- * @param {function} props.onClose                  Determine what to do when timepicker is closed. Optional. no default implementation.
- * @param {function} props.openPicker               Determine if timepicker should be open in intial render. Optional. Default is undefined.
- * @example
- * <Datetimepicker
- *   realtime={true}
- *   initialTimestamp={1590133823}
- *   initialArriveBy={false}
- *   onTimeChange={(time, arriveBy) => changeUrl(time, arriveBy)}
- *   onDateChange={(time, arriveBy) => changeUrl(time, arriveBy)}
- *   onNowClick={(time) => changeUrl(undefined, undefined)}
- *   onDepartureClick={(time) => changeUrl(time, 'true')}
- *   onArrivalClick={(time) => changeUrl(time, undefined)}
- *   embedWhenClosed={<button />}
- *   lang={'en'}
- *   serviceTimeRange={15}
- * />
- */
 function DatetimepickerStateContainer({
   realtime = false,
   initialArriveBy,
@@ -1480,27 +1549,28 @@ function DatetimepickerStateContainer({
     changeDepartureOrArrival(mode);
     onTimeChange(Math.round(time / 1000), mode === 'arrival', true);
   };
-  return /*#__PURE__*/React.createElement(I18nextProvider, {
-    i18n: i18n
-  }, /*#__PURE__*/React.createElement(Datetimepicker, {
-    timestamp: timestamp,
-    onTimeChange: timeChanged,
-    onDateChange: dateChanged,
-    departureOrArrival: departureOrArrival,
-    onNowClick: nowClicked,
-    onDepartureClick: departureClicked,
-    onArrivalClick: arrivalClicked,
-    embedWhenClosed: embedWhenClosed,
-    embedWhenOpen: embedWhenOpen,
-    lang: lang,
-    color: color,
-    timeZone: timeZone,
-    onModalSubmit: onModalSubmit,
-    serviceTimeRange: serviceTimeRange,
-    onOpen: onOpen,
-    onClose: onClose,
-    openPicker: openPicker
-  }));
+  return /*#__PURE__*/jsx(I18nextProvider, {
+    i18n: i18n,
+    children: /*#__PURE__*/jsx(Datetimepicker, {
+      timestamp: timestamp,
+      onTimeChange: timeChanged,
+      onDateChange: dateChanged,
+      departureOrArrival: departureOrArrival,
+      onNowClick: nowClicked,
+      onDepartureClick: departureClicked,
+      onArrivalClick: arrivalClicked,
+      embedWhenClosed: embedWhenClosed,
+      embedWhenOpen: embedWhenOpen,
+      lang: lang,
+      color: color,
+      timeZone: timeZone,
+      onModalSubmit: onModalSubmit,
+      serviceTimeRange: serviceTimeRange,
+      onOpen: onOpen,
+      onClose: onClose,
+      openPicker: openPicker
+    })
+  });
 }
 process.env.NODE_ENV !== "production" ? DatetimepickerStateContainer.propTypes = {
   realtime: PropTypes.bool,