@elliemae/ds-form 2.1.0-rc.7 → 2.2.0-alpha.2

package/esm/TimeInput/TimeInputs.js

@@ -1,70 +1,76 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.some.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.some.js';
-import 'core-js/modules/esnext.async-iterator.reduce.js';
-import 'core-js/modules/esnext.iterator.reduce.js';
-import React, { useState, useEffect, createElement } from 'react';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
-import moment from 'moment';
-import { getTimeValuesFromTime, placeholderFormat, commonInputProps, formatMeridiem, setNativeValue, focusNextInput, focusPreviousInput, parseTimeNumberFromText, getValidTimeNumber, formatSeconds, formatMinutes, formatHour, shouldFocusNextInput, isArrowIncrementDecrement } from './utils.js';
-import { AM, PLACEHOLDER_TIME, ARROW_UP, ARROW_DOWN, PM, SHIFT, BACKSPACE, GENERAL_TIME_RANGE, END, HOME, ESCAPE, HOUR_RANGE_12, HOUR_RANGE_24 } from '@elliemae/ds-shared/constants';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const blockName = 'input-times-group';
-const InputTimesGroup = aggregatedClasses('div')(blockName);
-const TimeInput = aggregatedClasses('input')(blockName, 'input');
-const Divider = aggregatedClasses('span')(blockName, 'divider', _ref => {
-  let {
-    value
-  } = _ref;
-  return {
-    value
-  };
-}); // eslint-disable-next-line react/prop-types
-
-const TimeDivider = _ref2 => {
-  let {
-    content = ':',
-    value = ''
-  } = _ref2;
-  return /*#__PURE__*/_jsx(Divider, {
-    value: !!value
-  }, void 0, content);
-};
-
-const TimeInputs = _ref3 => {
-  let {
-    time,
-    format,
-    use12Hours,
-    step = 1,
-    showHours,
-    showMinutes,
-    showSeconds,
-    onChange,
-    disabled,
-    innerRef,
-    clearable,
-    'arial-label': ariaLabel,
-    'aria-label': ariaLabel2
-  } = _ref3;
-  const [meridiem, setMeridiem] = useState('');
-  const [hours, setHours] = useState('');
-  const [minutes, setMinutes] = useState('');
+import * as React from "react";
+import React2, { useEffect, useState } from "react";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+import moment from "moment";
+import {
+  commonInputProps,
+  formatHour,
+  formatMinutes,
+  formatSeconds,
+  formatMeridiem,
+  getValidTimeNumber,
+  setNativeValue,
+  parseTimeNumberFromText,
+  focusNextInput,
+  focusPreviousInput,
+  getTimeValuesFromTime,
+  isArrowIncrementDecrement,
+  shouldFocusNextInput,
+  placeholderFormat
+} from "./utils";
+import {
+  AM,
+  PM,
+  ARROW_UP,
+  ARROW_DOWN,
+  BACKSPACE,
+  ESCAPE,
+  HOME,
+  HOUR_RANGE_12,
+  HOUR_RANGE_24,
+  GENERAL_TIME_RANGE,
+  END,
+  PLACEHOLDER_TIME,
+  SHIFT
+} from "@elliemae/ds-shared/constants";
+const blockName = "input-times-group";
+const InputTimesGroup = aggregatedClasses("div")(blockName);
+const TimeInput = aggregatedClasses("input")(blockName, "input");
+const Divider = aggregatedClasses("span")(blockName, "divider", ({ value }) => ({
+  value
+}));
+const TimeDivider = ({ content = ":", value = "" }) => /* @__PURE__ */ React2.createElement(Divider, {
+  value: !!value
+}, content);
+const TimeInputs = ({
+  time,
+  format,
+  use12Hours,
+  step = 1,
+  showHours,
+  showMinutes,
+  showSeconds,
+  onChange,
+  disabled,
+  innerRef,
+  clearable,
+  "arial-label": ariaLabel,
+  "aria-label": ariaLabel2
+}) => {
+  const [meridiem, setMeridiem] = useState("");
+  const [hours, setHours] = useState("");
+  const [minutes, setMinutes] = useState("");
   const [hasInputValue, setHasInputValue] = useState(false);
-  const [seconds, setSeconds] = useState('');
-  const [currentKey, setCurrentKey] = useState('');
+  const [seconds, setSeconds] = useState("");
+  const [currentKey, setCurrentKey] = useState("");
   const [hasInputBeenTriggered, setHasInputBeenTriggered] = useState(false);
   const [lastTypedNumber, setLastTypedNumber] = useState(null);
+  const inputRefs = {
+    hours: null,
+    minutes: null,
+    seconds: null,
+    meridiem: null
+  };
   useEffect(() => {
     if (time && moment(time).isValid()) {
       const timeValues = getTimeValuesFromTime(time, format, use12Hours);
@@ -73,161 +79,131 @@ const TimeInputs = _ref3 => {
       setMinutes(timeValues.minutes);
       setSeconds(timeValues.seconds);
     } else {
-      setMeridiem('');
-      setHours('');
-      setMinutes('');
-      setSeconds('');
+      setMeridiem("");
+      setHours("");
+      setMinutes("");
+      setSeconds("");
     }
   }, [time, format, use12Hours]);
   useEffect(() => {
     const selectedTime = time || moment();
-
     if (isTimeCompletelySet() && selectedTime.hours && hasInputBeenTriggered) {
-      if (showHours && hours) selectedTime.hours(hours);
-      if (showMinutes && minutes) selectedTime.minutes(minutes);
-      if (showSeconds && seconds) selectedTime.seconds(seconds);
-
+      if (showHours && hours)
+        selectedTime.hours(hours);
+      if (showMinutes && minutes)
+        selectedTime.minutes(minutes);
+      if (showSeconds && seconds)
+        selectedTime.seconds(seconds);
       if (use12Hours && meridiem) {
         const nextHours = meridiem.toLowerCase() === AM ? hours % 12 : hours % 12 + 12;
         selectedTime.hour(nextHours);
       }
-
       onChange(selectedTime);
       setHasInputBeenTriggered(false);
     }
   }, [hours, minutes, seconds, meridiem]);
-
   const focusNextInputIfNeeded = (currentEl, max, number) => {
     if (shouldFocusNextInput(max, number, currentEl.value) && !isArrowIncrementDecrement(currentKey) && !hasInputValue) {
       focusNextInput(currentEl);
     }
   };
-
-  const getNextTimeValue = function (value) {
-    let incrementing = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  const getNextTimeValue = (value, incrementing = true) => {
     const parsedValue = parseTimeNumberFromText(value);
     return incrementing ? parsedValue + step : parsedValue - step;
   };
-
-  const onInputFocus = e => {
+  const onInputFocus = (e) => {
     e.preventDefault();
     e.stopPropagation();
     e.target.select();
   };
-
-  const onClick = e => {
+  const onClick = (e) => {
     if (e.target.value) {
       setHasInputValue(true);
     }
-  }; // eslint-disable-next-line max-statements
-
-
+  };
   const onKeyDown = (event, max) => {
-    const {
-      target
-    } = event;
-    const {
-      value
-    } = target;
+    const { target } = event;
+    const { value } = target;
     setLastTypedNumber(event.key);
-
     switch (event.key) {
-      case ARROW_UP:
-        {
-          event.preventDefault();
-          setCurrentKey(event.key);
-          const incrementedValue = getNextTimeValue(value);
-          setNativeValue(event.target, incrementedValue);
-          break;
-        }
-
-      case ARROW_DOWN:
-        {
-          event.preventDefault();
-          setCurrentKey(event.key);
-          const decrementedValue = getNextTimeValue(value, false);
-          setNativeValue(event.target, decrementedValue);
-          break;
-        }
-
-      case BACKSPACE:
-        {
-          event.preventDefault();
-
-          if (!value) {
-            focusPreviousInput(event.target);
-          } else {
-            setNativeValue(event.target, '');
-          }
-
-          break;
-        }
-
-      case ESCAPE:
-        {
-          event.preventDefault();
-          event.target.blur();
-          break;
-        }
-
-      case HOME:
-        {
-          event.preventDefault();
-          setNativeValue(event.target, String(max));
-          focusNextInput(event.target);
-          break;
-        }
-
-      case END:
-        {
-          event.preventDefault();
-          setNativeValue(event.target, '00');
-          focusNextInput(event.target);
-          break;
+      case ARROW_UP: {
+        event.preventDefault();
+        setCurrentKey(event.key);
+        const incrementedValue = getNextTimeValue(value);
+        setNativeValue(event.target, incrementedValue);
+        break;
+      }
+      case ARROW_DOWN: {
+        event.preventDefault();
+        setCurrentKey(event.key);
+        const decrementedValue = getNextTimeValue(value, false);
+        setNativeValue(event.target, decrementedValue);
+        break;
+      }
+      case BACKSPACE: {
+        event.preventDefault();
+        if (!value) {
+          focusPreviousInput(event.target);
+        } else {
+          setNativeValue(event.target, "");
         }
-
+        break;
+      }
+      case ESCAPE: {
+        event.preventDefault();
+        event.target.blur();
+        break;
+      }
+      case HOME: {
+        event.preventDefault();
+        setNativeValue(event.target, String(max));
+        focusNextInput(event.target);
+        break;
+      }
+      case END: {
+        event.preventDefault();
+        setNativeValue(event.target, "00");
+        focusNextInput(event.target);
+        break;
+      }
       case SHIFT:
         event.preventDefault();
         setCurrentKey(event.key);
         break;
+      default:
+        break;
     }
   };
-
   const isTimeCompletelySet = () => {
     let neededValues = [];
-    if (showHours) neededValues = [...neededValues, hours || null];
-    if (showMinutes) neededValues = [...neededValues, minutes || null];
-    if (showSeconds) neededValues = [...neededValues, seconds || null];
-    if (use12Hours) neededValues = [...neededValues, meridiem || null];
-    return !neededValues.some(value => !value);
+    if (showHours)
+      neededValues = [...neededValues, hours || null];
+    if (showMinutes)
+      neededValues = [...neededValues, minutes || null];
+    if (showSeconds)
+      neededValues = [...neededValues, seconds || null];
+    if (use12Hours)
+      neededValues = [...neededValues, meridiem || null];
+    return !neededValues.some((value) => !value);
   };
-
-  const handleSecondsChange = e => {
-    const {
-      value
-    } = e.target;
+  const handleSecondsChange = (e) => {
+    const { value } = e.target;
     const secondsHandled = parseTimeNumberFromText(value);
     const nextSeconds = getValidTimeNumber(GENERAL_TIME_RANGE, secondsHandled, lastTypedNumber);
     setSeconds(formatSeconds(format, nextSeconds));
     setHasInputBeenTriggered(true);
     focusNextInputIfNeeded(e.target, GENERAL_TIME_RANGE.max, value);
   };
-
-  const handleMinutesChange = e => {
-    const {
-      value
-    } = e.target;
+  const handleMinutesChange = (e) => {
+    const { value } = e.target;
     const minutesHandled = parseTimeNumberFromText(value);
     const nextMinutes = getValidTimeNumber(GENERAL_TIME_RANGE, minutesHandled, lastTypedNumber);
     setMinutes(formatMinutes(format, nextMinutes));
     setHasInputBeenTriggered(true);
     focusNextInputIfNeeded(e.target, GENERAL_TIME_RANGE.max, value);
   };
-
-  const handleHoursChange = e => {
-    const {
-      value
-    } = e.target;
+  const handleHoursChange = (e) => {
+    const { value } = e.target;
     const hour = parseTimeNumberFromText(value);
     const hoursRange = use12Hours ? HOUR_RANGE_12 : HOUR_RANGE_24;
     const nextHour = getValidTimeNumber(hoursRange, hour, lastTypedNumber);
@@ -235,129 +211,129 @@ const TimeInputs = _ref3 => {
     setHasInputBeenTriggered(true);
     focusNextInputIfNeeded(e.target, hoursRange.max, value);
   };
-
-  const handleMeridiemKeyDown = e => {
-    if (e.key === ARROW_UP || e.key === 'a') {
+  const handleMeridiemKeyDown = (e) => {
+    if (e.key === ARROW_UP || e.key === "a") {
       setMeridiem(formatMeridiem(format, AM));
-    } else if (e.key === ARROW_DOWN || e.key === 'p') {
+    } else if (e.key === ARROW_DOWN || e.key === "p") {
       setMeridiem(formatMeridiem(format, PM));
     } else if (e.key === SHIFT) {
       setCurrentKey(e.key);
     } else if (e.key === BACKSPACE) {
-      setMeridiem('');
+      setMeridiem("");
     }
-
     setHasInputBeenTriggered(true);
   };
-
-  const handleMeridiemBlur = e => {
-    const {
-      value
-    } = e.target;
-
+  const handleMeridiemBlur = (e) => {
+    const { value } = e.target;
     if (value !== AM && value !== PM) {
-      setMeridiem('');
+      setMeridiem("");
     }
   };
-
-  const handleOnBlur = event => {
+  const handleOnBlur = (event) => {
     const selectedTime = moment();
-
     if (clearable && !event.currentTarget.contains(event.relatedTarget)) {
-      if (showHours && hours) selectedTime.hours(hours);
-      if (showMinutes && minutes) selectedTime.minutes(minutes);
-      if (showSeconds && seconds) selectedTime.seconds(seconds);
-
+      if (showHours && hours)
+        selectedTime.hours(hours);
+      if (showMinutes && minutes)
+        selectedTime.minutes(minutes);
+      if (showSeconds && seconds)
+        selectedTime.seconds(seconds);
       if (use12Hours && meridiem) {
         const nextHours = meridiem.toLowerCase() === AM ? hours % 12 : hours % 12 + 12;
         selectedTime.hour(nextHours);
       }
-
       onChange(selectedTime);
     }
   };
-
   const renderSecondsInput = () => {
-    if (!showSeconds) return null;
-    return /*#__PURE__*/createElement(TimeInput, _objectSpread(_objectSpread({}, commonInputProps(e => onKeyDown(e, GENERAL_TIME_RANGE.max), onInputFocus, onClick)), {}, {
+    if (!showSeconds)
+      return null;
+    return /* @__PURE__ */ React2.createElement(TimeInput, {
+      ...commonInputProps((e) => onKeyDown(e, GENERAL_TIME_RANGE.max), onInputFocus, onClick),
       key: "seconds-input",
       "data-testid": "ds-time-input__seconds",
-      "aria-label": ariaLabel || ariaLabel2 || 'Seconds Input',
-      disabled: disabled // eslint-disable-next-line no-return-assign
-      ,
-      innerRef: node => node,
+      "aria-label": ariaLabel || ariaLabel2 || "Seconds Input",
+      disabled,
+      innerRef: (node) => inputRefs.seconds = node,
       onChange: handleSecondsChange,
       placeholder: placeholderFormat(PLACEHOLDER_TIME.seconds, format),
       value: seconds
-    }));
+    });
   };
-
   const renderMinutesInput = () => {
-    if (!showMinutes) return null;
-    return /*#__PURE__*/createElement(TimeInput, _objectSpread(_objectSpread({}, commonInputProps(e => onKeyDown(e, GENERAL_TIME_RANGE.max), onInputFocus, onClick)), {}, {
+    if (!showMinutes)
+      return null;
+    return /* @__PURE__ */ React2.createElement(TimeInput, {
+      ...commonInputProps((e) => onKeyDown(e, GENERAL_TIME_RANGE.max), onInputFocus, onClick),
       key: "minutes-input",
       "data-testid": "ds-time-input__minutes",
-      "aria-label": ariaLabel || ariaLabel2 || 'Minutes Input',
-      disabled: disabled // eslint-disable-next-line no-return-assign
-      ,
-      innerRef: node => node,
+      "aria-label": ariaLabel || ariaLabel2 || "Minutes Input",
+      disabled,
+      innerRef: (node) => inputRefs.minutes = node,
       onChange: handleMinutesChange,
       placeholder: placeholderFormat(PLACEHOLDER_TIME.minutes, format),
       value: minutes
-    }));
+    });
   };
-
   const renderHoursInput = () => {
-    if (!showHours) return null;
+    if (!showHours)
+      return null;
     const hourFormatRange = use12Hours ? HOUR_RANGE_12 : HOUR_RANGE_24;
-    return /*#__PURE__*/createElement(TimeInput, _objectSpread(_objectSpread({}, commonInputProps(e => onKeyDown(e, hourFormatRange.max), onInputFocus, onClick)), {}, {
+    return /* @__PURE__ */ React2.createElement(TimeInput, {
+      ...commonInputProps((e) => onKeyDown(e, hourFormatRange.max), onInputFocus, onClick),
       key: "hour-input",
       "data-testid": "ds-time-input__hours",
-      "aria-label": ariaLabel || ariaLabel2 || 'Hours Input',
-      disabled: disabled // eslint-disable-next-line no-return-assign
-      ,
-      innerRef: node => node,
+      "aria-label": ariaLabel || ariaLabel2 || "Hours Input",
+      disabled,
+      innerRef: (node) => inputRefs.hours = node,
       onChange: handleHoursChange,
       placeholder: placeholderFormat(PLACEHOLDER_TIME.hour, format, use12Hours),
       value: hours
-    }));
+    });
   };
-
   const renderMeridiemInput = () => {
-    if (!use12Hours) return null;
-    return /*#__PURE__*/createElement(TimeInput, _objectSpread(_objectSpread({}, commonInputProps), {}, {
+    if (!use12Hours)
+      return null;
+    return /* @__PURE__ */ React2.createElement(TimeInput, {
+      ...commonInputProps,
       key: "meridiem-input",
       "data-testid": "ds-time-input__ampm",
-      "aria-label": ariaLabel || ariaLabel2 || 'Meridiem Input',
-      disabled: disabled,
+      "aria-label": ariaLabel || ariaLabel2 || "Meridiem Input",
+      disabled,
       onBlur: handleMeridiemBlur,
       onKeyDown: handleMeridiemKeyDown,
       placeholder: placeholderFormat(PLACEHOLDER_TIME.meridiem, format),
       value: meridiem
-    }));
+    });
   };
-
   const renderTimeInputs = () => {
-    const inputs = [renderHoursInput(), renderMinutesInput(), renderSecondsInput()];
-    /* eslint-disable indent */
-
-    const inputsWithDividers = inputs.reduce((acc, input, index) => input ? acc.concat([index ? /*#__PURE__*/_jsx(TimeDivider // eslint-disable-next-line react/no-array-index-key
-    , {
-      content: ":",
-      value: input.props.value
-    }, index) : null, input]) : acc, []);
-    /* eslint-enable indent */
-
-    return [inputsWithDividers, /*#__PURE__*/React.createElement('span', {
-      key: 'span'
-    }), // hack for next/prev focus
-    renderMeridiemInput()];
+    const inputs = [
+      renderHoursInput(),
+      renderMinutesInput(),
+      renderSecondsInput()
+    ];
+    const inputsWithDividers = inputs.reduce((acc, input, index) => input ? acc.concat([
+      index ? /* @__PURE__ */ React2.createElement(TimeDivider, {
+        key: index,
+        content: ":",
+        value: input.props.value
+      }) : null,
+      input
+    ]) : acc, []);
+    return [
+      inputsWithDividers,
+      React2.createElement("span", { key: "span" }),
+      renderMeridiemInput()
+    ];
   };
-
-  return /*#__PURE__*/_jsx(InputTimesGroup, {
+  return /* @__PURE__ */ React2.createElement(InputTimesGroup, {
     onBlur: handleOnBlur,
-    innerRef: innerRef
-  }, void 0, renderTimeInputs());
+    innerRef
+  }, renderTimeInputs());
+};
+var TimeInputs_default = TimeInputs;
+export {
+  TimeInputs,
+  TimeInputs_default as default
 };
-
-export { TimeInputs as default };
+//# sourceMappingURL=TimeInputs.js.map

package/esm/TimeInput/TimeInputs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/TimeInput/TimeInputs.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React, { useEffect, useState } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport moment from 'moment';\nimport {\n  commonInputProps,\n  formatHour,\n  formatMinutes,\n  formatSeconds,\n  formatMeridiem,\n  getValidTimeNumber,\n  setNativeValue,\n  parseTimeNumberFromText,\n  focusNextInput,\n  focusPreviousInput,\n  getTimeValuesFromTime,\n  isArrowIncrementDecrement,\n  shouldFocusNextInput,\n  placeholderFormat,\n} from './utils';\nimport {\n  AM,\n  PM,\n  ARROW_UP,\n  ARROW_DOWN,\n  BACKSPACE,\n  ESCAPE,\n  HOME,\n  HOUR_RANGE_12,\n  HOUR_RANGE_24,\n  GENERAL_TIME_RANGE,\n  END,\n  PLACEHOLDER_TIME,\n  SHIFT,\n} from '@elliemae/ds-shared/constants';\n\nconst blockName = 'input-times-group';\n\nconst InputTimesGroup = aggregatedClasses('div')(blockName);\nconst TimeInput = aggregatedClasses('input')(blockName, 'input');\nconst Divider = aggregatedClasses('span')(\n  blockName,\n  'divider',\n  ({ value }) => ({\n    value,\n  }),\n);\n\n// eslint-disable-next-line react/prop-types\nconst TimeDivider = ({ content = ':', value = '' }) => (\n  <Divider value={!!value}>{content}</Divider>\n);\n\nconst TimeInputs = ({\n  time,\n  format,\n  use12Hours,\n  step = 1,\n  showHours,\n  showMinutes,\n  showSeconds,\n  onChange,\n  disabled,\n  innerRef,\n  clearable,\n  'arial-label': ariaLabel,\n  'aria-label': ariaLabel2,\n}) => {\n  const [meridiem, setMeridiem] = useState('');\n  const [hours, setHours] = useState('');\n  const [minutes, setMinutes] = useState('');\n  const [hasInputValue, setHasInputValue] = useState(false);\n  const [seconds, setSeconds] = useState('');\n  const [currentKey, setCurrentKey] = useState('');\n  const [hasInputBeenTriggered, setHasInputBeenTriggered] = useState(false);\n\n  const [lastTypedNumber, setLastTypedNumber] = useState(null);\n  const inputRefs = {\n    hours: null,\n    minutes: null,\n    seconds: null,\n    meridiem: null,\n  };\n\n  useEffect(() => {\n    if (time && moment(time).isValid()) {\n      const timeValues = getTimeValuesFromTime(time, format, use12Hours);\n\n      setMeridiem(timeValues.meridiem);\n      setHours(timeValues.hours);\n      setMinutes(timeValues.minutes);\n      setSeconds(timeValues.seconds);\n    } else {\n      setMeridiem('');\n      setHours('');\n      setMinutes('');\n      setSeconds('');\n    }\n  }, [time, format, use12Hours]);\n\n  useEffect(() => {\n    const selectedTime = time || moment();\n    if (isTimeCompletelySet() && selectedTime.hours && hasInputBeenTriggered) {\n      if (showHours && hours) selectedTime.hours(hours);\n      if (showMinutes && minutes) selectedTime.minutes(minutes);\n      if (showSeconds && seconds) selectedTime.seconds(seconds);\n      if (use12Hours && meridiem) {\n        const nextHours =\n          meridiem.toLowerCase() === AM ? hours % 12 : (hours % 12) + 12;\n        selectedTime.hour(nextHours);\n      }\n      onChange(selectedTime);\n      setHasInputBeenTriggered(false);\n    }\n  }, [hours, minutes, seconds, meridiem]);\n\n  const focusNextInputIfNeeded = (currentEl, max, number) => {\n    if (\n      shouldFocusNextInput(max, number, currentEl.value) &&\n      !isArrowIncrementDecrement(currentKey) &&\n      !hasInputValue\n    ) {\n      focusNextInput(currentEl);\n    }\n  };\n\n  const getNextTimeValue = (value, incrementing = true) => {\n    const parsedValue = parseTimeNumberFromText(value);\n    return incrementing ? parsedValue + step : parsedValue - step;\n  };\n\n  const onInputFocus = (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    e.target.select();\n  };\n\n  const onClick = (e) => {\n    if (e.target.value) {\n      setHasInputValue(true);\n    }\n  };\n\n  // eslint-disable-next-line max-statements\n  const onKeyDown = (event, max) => {\n    const { target } = event;\n    const { value } = target;\n    setLastTypedNumber(event.key);\n    switch (event.key) {\n      case ARROW_UP: {\n        event.preventDefault();\n        setCurrentKey(event.key);\n        const incrementedValue = getNextTimeValue(value);\n        setNativeValue(event.target, incrementedValue);\n        break;\n      }\n      case ARROW_DOWN: {\n        event.preventDefault();\n        setCurrentKey(event.key);\n        const decrementedValue = getNextTimeValue(value, false);\n        setNativeValue(event.target, decrementedValue);\n        break;\n      }\n      case BACKSPACE: {\n        event.preventDefault();\n        if (!value) {\n          focusPreviousInput(event.target);\n        } else {\n          setNativeValue(event.target, '');\n        }\n        break;\n      }\n      case ESCAPE: {\n        event.preventDefault();\n        event.target.blur();\n        break;\n      }\n      case HOME: {\n        event.preventDefault();\n        setNativeValue(event.target, String(max));\n        focusNextInput(event.target);\n        break;\n      }\n      case END: {\n        event.preventDefault();\n        setNativeValue(event.target, '00');\n        focusNextInput(event.target);\n        break;\n      }\n      case SHIFT:\n        event.preventDefault();\n        setCurrentKey(event.key);\n        break;\n      default:\n        break;\n    }\n  };\n\n  const isTimeCompletelySet = () => {\n    let neededValues = [];\n\n    if (showHours) neededValues = [...neededValues, hours || null];\n    if (showMinutes) neededValues = [...neededValues, minutes || null];\n    if (showSeconds) neededValues = [...neededValues, seconds || null];\n    if (use12Hours) neededValues = [...neededValues, meridiem || null];\n\n    return !neededValues.some((value) => !value);\n  };\n\n  const handleSecondsChange = (e) => {\n    const { value } = e.target;\n    const secondsHandled = parseTimeNumberFromText(value);\n\n    const nextSeconds = getValidTimeNumber(\n      GENERAL_TIME_RANGE,\n      secondsHandled,\n      lastTypedNumber,\n    );\n\n    setSeconds(formatSeconds(format, nextSeconds));\n    setHasInputBeenTriggered(true);\n    focusNextInputIfNeeded(e.target, GENERAL_TIME_RANGE.max, value);\n  };\n\n  const handleMinutesChange = (e) => {\n    const { value } = e.target;\n    const minutesHandled = parseTimeNumberFromText(value);\n    const nextMinutes = getValidTimeNumber(\n      GENERAL_TIME_RANGE,\n      minutesHandled,\n      lastTypedNumber,\n    );\n\n    setMinutes(formatMinutes(format, nextMinutes));\n    setHasInputBeenTriggered(true);\n    focusNextInputIfNeeded(e.target, GENERAL_TIME_RANGE.max, value);\n  };\n\n  const handleHoursChange = (e) => {\n    const { value } = e.target;\n    const hour = parseTimeNumberFromText(value);\n    const hoursRange = use12Hours ? HOUR_RANGE_12 : HOUR_RANGE_24;\n\n    const nextHour = getValidTimeNumber(hoursRange, hour, lastTypedNumber);\n    setHours(formatHour(format, nextHour));\n    setHasInputBeenTriggered(true);\n    focusNextInputIfNeeded(e.target, hoursRange.max, value);\n  };\n\n  const handleMeridiemKeyDown = (e) => {\n    if (e.key === ARROW_UP || e.key === 'a') {\n      setMeridiem(formatMeridiem(format, AM));\n    } else if (e.key === ARROW_DOWN || e.key === 'p') {\n      setMeridiem(formatMeridiem(format, PM));\n    } else if (e.key === SHIFT) {\n      setCurrentKey(e.key);\n    } else if (e.key === BACKSPACE) {\n      setMeridiem('');\n    }\n    setHasInputBeenTriggered(true);\n  };\n\n  const handleMeridiemBlur = (e) => {\n    const { value } = e.target;\n    if (value !== AM && value !== PM) {\n      setMeridiem('');\n    }\n  };\n\n  const handleOnBlur = (event) => {\n    const selectedTime = moment();\n    if (clearable && !event.currentTarget.contains(event.relatedTarget)) {\n      if (showHours && hours) selectedTime.hours(hours);\n      if (showMinutes && minutes) selectedTime.minutes(minutes);\n      if (showSeconds && seconds) selectedTime.seconds(seconds);\n      if (use12Hours && meridiem) {\n        const nextHours =\n          meridiem.toLowerCase() === AM ? hours % 12 : (hours % 12) + 12;\n        selectedTime.hour(nextHours);\n      }\n      onChange(selectedTime);\n    }\n  };\n\n  const renderSecondsInput = () => {\n    if (!showSeconds) return null;\n\n    return (\n      <TimeInput\n        {...commonInputProps(\n          (e) => onKeyDown(e, GENERAL_TIME_RANGE.max),\n          onInputFocus,\n          onClick,\n        )}\n        key=\"seconds-input\"\n        data-testid=\"ds-time-input__seconds\"\n        aria-label={ariaLabel || ariaLabel2 || 'Seconds Input'}\n        disabled={disabled}\n        // eslint-disable-next-line no-return-assign\n        innerRef={(node) => (inputRefs.seconds = node)}\n        onChange={handleSecondsChange}\n        placeholder={placeholderFormat(PLACEHOLDER_TIME.seconds, format)}\n        value={seconds}\n      />\n    );\n  };\n\n  const renderMinutesInput = () => {\n    if (!showMinutes) return null;\n\n    return (\n      <TimeInput\n        {...commonInputProps(\n          (e) => onKeyDown(e, GENERAL_TIME_RANGE.max),\n          onInputFocus,\n          onClick,\n        )}\n        key=\"minutes-input\"\n        data-testid=\"ds-time-input__minutes\"\n        aria-label={ariaLabel || ariaLabel2 || 'Minutes Input'}\n        disabled={disabled}\n        // eslint-disable-next-line no-return-assign\n        innerRef={(node) => (inputRefs.minutes = node)}\n        onChange={handleMinutesChange}\n        placeholder={placeholderFormat(PLACEHOLDER_TIME.minutes, format)}\n        value={minutes}\n      />\n    );\n  };\n\n  const renderHoursInput = () => {\n    if (!showHours) return null;\n    const hourFormatRange = use12Hours ? HOUR_RANGE_12 : HOUR_RANGE_24;\n\n    return (\n      <TimeInput\n        {...commonInputProps(\n          (e) => onKeyDown(e, hourFormatRange.max),\n          onInputFocus,\n          onClick,\n        )}\n        key=\"hour-input\"\n        data-testid=\"ds-time-input__hours\"\n        aria-label={ariaLabel || ariaLabel2 || 'Hours Input'}\n        disabled={disabled}\n        // eslint-disable-next-line no-return-assign\n        innerRef={(node) => (inputRefs.hours = node)}\n        onChange={handleHoursChange}\n        placeholder={placeholderFormat(\n          PLACEHOLDER_TIME.hour,\n          format,\n          use12Hours,\n        )}\n        value={hours}\n      />\n    );\n  };\n\n  const renderMeridiemInput = () => {\n    if (!use12Hours) return null;\n\n    return (\n      <TimeInput\n        {...commonInputProps}\n        key=\"meridiem-input\"\n        data-testid=\"ds-time-input__ampm\"\n        aria-label={ariaLabel || ariaLabel2 || 'Meridiem Input'}\n        disabled={disabled}\n        onBlur={handleMeridiemBlur}\n        onKeyDown={handleMeridiemKeyDown}\n        placeholder={placeholderFormat(PLACEHOLDER_TIME.meridiem, format)}\n        value={meridiem}\n      />\n    );\n  };\n\n  const renderTimeInputs = () => {\n    const inputs = [\n      renderHoursInput(),\n      renderMinutesInput(),\n      renderSecondsInput(),\n    ];\n    /* eslint-disable indent */\n    const inputsWithDividers = inputs.reduce(\n      (acc, input, index) =>\n        input\n          ? acc.concat([\n              index ? (\n                <TimeDivider\n                  // eslint-disable-next-line react/no-array-index-key\n                  key={index}\n                  content=\":\"\n                  value={input.props.value}\n                />\n              ) : null,\n              input,\n            ])\n          : acc,\n      [],\n    );\n    /* eslint-enable indent */\n\n    return [\n      inputsWithDividers,\n      React.createElement('span', { key: 'span' }), // hack for next/prev focus\n      renderMeridiemInput(),\n    ];\n  };\n\n  return (\n    <InputTimesGroup onBlur={handleOnBlur} innerRef={innerRef}>\n      {renderTimeInputs()}\n    </InputTimesGroup>\n  );\n};\n\nexport { TimeInputs };\nexport default TimeInputs;\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/TimeInput/index.js

@@ -1,2 +1,3 @@
-export { DSTimeInputWithSchema, default } from './DSTimeInput.js';
-export { default as TimeInputImpl } from './TimeInputImpl.js';
+import * as React from "react";
+export * from "./DSTimeInput";
+//# sourceMappingURL=index.js.map

package/esm/TimeInput/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/TimeInput/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSTimeInput';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}