@jobber/components 4.67.2-JOB-84261.6 → 4.67.2-pre.25

package/dist/InputTime/index.js

@@ -2,724 +2,31 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
+var tslib_es6 = require('../tslib.es6-a575af05.js');
 var debounce = require('lodash/debounce');
 var temporal = require('@std-proposal/temporal');
-var FormField = require('../FormField-dfc061ca.js');
-require('uuid');
+var FormField = require('../FormField-18eda132.js');
+var useSafeLayoutEffect = require('../useSafeLayoutEffect-b63708b1.js');
+var ClientOnly = require('../ClientOnly-4f3e136d.js');
 require('react-hook-form');
-require('../style-inject.es-9d2f5f4e.js');
 require('classnames');
-require('../Button-163a0641.js');
+require('@jobber/hooks/useShowClear');
+require('../Button-8bde6560.js');
 require('react-router-dom');
-require('../Icon-405a216c.js');
+require('../Icon-361343e0.js');
 require('@jobber/design');
-require('../Typography-973b122e.js');
-require('../Text-4a2bc89f.js');
-require('../InputValidation-179f0926.js');
+require('../Typography-75f58b60.js');
+require('../Text-9f261dde.js');
+require('../InputValidation-fdc891af.js');
 require('framer-motion');
-require('../Spinner-9d8fc7ff.js');
+require('../Spinner-cac356ee.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-// https://stackoverflow.com/a/10199306/1611058
-function get_time_support() {
-  var input = document.createElement('input');
-  input.setAttribute('type', 'time');
-  var notValid = 'not-a-time';
-  input.setAttribute('value', notValid);
-  return input.value !== notValid;
-}
-
-var timeSupport = get_time_support();
-if (window) window.supportsTime = timeSupport;
-
-var supportsTime = timeSupport;
-
-function leading_zero(number) {
-  if (isNaN(number)) return number;
-  var purified = parseInt(number);
-  return purified < 10 ? '0' + purified : number;
-}
-
-function convert_to_24hr_time(timeString_12hr) {
-  if (/-/.test(timeString_12hr)) return '';
-  var isPM = timeString_12hr.indexOf('PM') > -1;
-  var timeResult = /^([0-9]{2})/.exec(timeString_12hr);
-  var hrs = timeResult ? parseInt(timeResult[1]) : '';
-  var newHrs;
-
-  if (hrs === 12) {
-    newHrs = isPM ? 12 : 0;
-  } else {
-    newHrs = isPM ? hrs + 12 : hrs;
-  }
-
-  var finalHrs = newHrs === 24 ? 0 : newHrs;
-  var timeRegEx = /^[0-9]{2}:([0-9]{2}) (AM|PM)/;
-  return timeString_12hr.replace(timeRegEx, leading_zero(finalHrs) + ':$1');
-}
-
-function set_data_attribute($input, timeString_12hr) {
-  var filteredString = timeString_12hr.indexOf('-') > -1 ? '' : timeString_12hr;
-  var time24hr = convert_to_24hr_time(filteredString);
-  $input.setAttribute('data-value', time24hr);
-}
-
-function create_event(eventName) {
-  var event = document.createEvent('Event');
-  event.initEvent(eventName, true, true);
-  return event;
-}
-
-var inputEvent = create_event('input');
-var changeEvent = create_event('change');
-function trigger_event($input, eventName) {
-  var event = {
-    input: inputEvent,
-    change: changeEvent
-  }[eventName];
-
-  if (can_trigger_change($input)) {
-    $input.dispatchEvent(event);
-  }
-} // Browsers only send out input and change events if the time element has a full valid value
-
-function can_trigger_change($input) {
-  return !/--/.test($input.value);
-}
-
-function trigger_both_events($input) {
-  // the event only ever fires if there is a full valid value available
-  trigger_event($input, 'input');
-  trigger_event($input, 'change');
-}
-
-// I need to keep this separate from reset so that
-// I can reset without attracting focus
-function apply_default($input) {
-  $input.value = '--:-- --';
-  set_data_attribute($input, '');
-  trigger_both_events($input);
-}
-
-function convert_number(number) {
-  return isNaN(number) ? number : parseInt(number);
-}
-
-function convert_hours_to_12hr_time(hours) {
-  return hours <= 12 ? hours === 0 ? 12 : hours : hours - 12;
-}
-
-function convert_to_12hr_time(timeString_24hr) {
-  if (timeString_24hr === '') return '--:-- --';
-  var twentyFour_regex = /([0-9]{2})\:([0-9]{2})/;
-  var result = twentyFour_regex.exec(timeString_24hr);
-  var hrs_24 = convert_number(result[1]);
-  var min = result[2];
-  var hrs_12 = convert_hours_to_12hr_time(hrs_24);
-  var isPM = hrs_24 >= 12;
-  var mode = isPM ? 'PM' : 'AM';
-  return [leading_zero(hrs_12), ':', min, ' ', mode].join('');
-}
-
-function set_time($input, time_string_24hr) {
-  var twelveHr = convert_to_12hr_time(time_string_24hr);
-  $input.value = twelveHr;
-  set_data_attribute($input, time_string_24hr);
-}
-
-function update_time($input) {
-  set_time($input, $input.value);
-  return $input;
-}
-
-// IE11 doesn't support Object.values()
-function values(obj) {
-  var key_values = [];
-
-  for (var key in obj) {
-    key_values.push(obj[key]);
-  }
-
-  return key_values;
-}
-
-function select_segment($input, segment) {
-  set_input_type();
-  var actions = {
-    hrs: select(0, 2),
-    min: select(3, 5),
-    mode: select(6, 8)
-  };
-  actions[segment]($input);
-
-  function set_input_type() {
-    var type = segment === 'mode' ? 'text' : 'tel';
-    $input.setAttribute('type', type);
-  }
-
-  function select(start, end) {
-    return function () {
-      $input.setSelectionRange(start, end);
-    };
-  }
-}
-
-var ranges = {
-  hrs: {
-    start: 0,
-    end: 2
-  },
-  min: {
-    start: 3,
-    end: 5
-  },
-  mode: {
-    start: 6,
-    end: 8
-  }
-};
-
-function get_selected_range($input) {
-  return {
-    start: $input.selectionStart,
-    end: $input.selectionEnd
-  };
-}
-
-function get_current_segment($input) {
-  var selection = get_selected_range($input);
-
-  for (var segment in ranges) {
-    var range = ranges[segment];
-    var aboveMin = range.start <= selection.start;
-    var belowMax = range.end >= selection.end;
-
-    if (aboveMin && belowMax) {
-      return segment;
-    }
-  }
-
-  return 'hrs';
-}
-
-var manual_entry_log = [];
-
-function clear() {
-  manual_entry_log = [];
-}
-
-function add(entry) {
-  manual_entry_log.push(entry);
-}
-
-function items() {
-  return manual_entry_log;
-}
-
-var manual_entry_log$1 = {
-  items: items,
-  clear: clear,
-  add: add
-};
-
-var segments = Object.keys(ranges);
-
-function get_values($input, timeString) {
-  var value = timeString ? timeString : $input.value;
-  var regEx = /([0-9-]{1,2})\:([0-9-]{1,2})\s?(AM|PM|\-\-)?/;
-  var result = regEx.exec(value);
-  return {
-    hrs: convert_number(result[1]),
-    min: convert_number(result[2]),
-    mode: result[3]
-  };
-}
-
-function update_a11y($input, announcementArray) {
-  // Timeout helps ensure that the input has stabilized
-  setTimeout(function () {
-    var current_segment = get_current_segment($input);
-    var values = get_values($input);
-    var value = values[current_segment];
-    var finalValue = value == '--' ? 'blank' : value;
-    var segmentName = {
-      hrs: 'Hours',
-      min: 'Minutes',
-      mode: 'AM/PM'
-    }[current_segment];
-    var announcements = {
-      initial: '$label grouping $fullValue.',
-      select: '$segmentName spin button $segmentValue.',
-      update: '$segmentValue.'
-    };
-    var textArray = announcementArray.map(function (providedString) {
-      if (announcements[providedString]) {
-        return announcements[providedString];
-      }
-
-      return providedString;
-    });
-    var fullValue = $input.value.replace(/--/g, 'blank');
-    var html = '<p>' + textArray.join('</p><p>') + '</p>';
-    html = html.replace(/\$label/g, $input.polyfill.label);
-    html = html.replace(/\$segmentName/g, segmentName);
-    html = html.replace(/\$segmentValue/g, finalValue);
-    html = html.replace(/\$fullValue/g, fullValue);
-    $input.polyfill.$a11y.innerHTML = html;
-  }, 1);
-}
-
-function traverse($input, direction) {
-  var segment = get_current_segment($input);
-  var modifier = direction === 'next' ? 1 : -1;
-  var next_segment_index = segments.indexOf(segment) + modifier;
-  var next_segment = {
-    next: segments[next_segment_index] || 'mode',
-    prev: next_segment_index < 0 ? 'hrs' : segments[next_segment_index]
-  }[direction];
-  select_segment($input, next_segment);
-  manual_entry_log$1.clear();
-  update_a11y($input, ['select']);
-}
-
-function next_segment($input) {
-  traverse($input, 'next');
-}
-
-function prev_segment($input) {
-  traverse($input, 'prev');
-}
-
-function select_cursor_segment($input) {
-  var current_segment = get_current_segment($input);
-  select_segment($input, current_segment);
-}
-
-function reset($input) {
-  apply_default($input);
-  select_segment($input, 'hrs');
-}
-
-function set_segment($input, segment, value) {
-  var values = get_values($input);
-  values[segment] = value;
-  var newInputVal = [leading_zero(values.hrs), ':', leading_zero(values.min), ' ', values.mode].join('');
-  $input.value = newInputVal;
-  select_segment($input, segment);
-  set_data_attribute($input, newInputVal);
-  trigger_both_events($input);
-}
-
-/*eslint indent: 0 */
-// prettier-ignore
-var all_number_keys = [// 0,  1,  2,  3,  4,  5,  6,  7,  8,  9
-48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105];
-
-var sorted_number_keys = {}; // sorted_number_keys = { 48: 0, 49: 1, 96: 0, 97: 1, ... };
-
-all_number_keys.forEach(function (key, index) {
-  var number_val = index > 9 ? index - 10 : index;
-  sorted_number_keys[key] = number_val;
-});
-
-function manual_number_entry($input, key) {
-  var key_value = sorted_number_keys[key];
-  var segment = get_current_segment($input);
-
-  if (segment !== 'mode') {
-    var entry_count = manual_entry_log$1.items().length;
-    var upper_limits = {
-      hrs: [1, 2],
-      min: [5, 9]
-    };
-    var limit = upper_limits[segment][entry_count];
-
-    if (entry_count < 2) {
-      manual_entry_log$1.add(key_value);
-    }
-
-    var full_limit = parseInt(upper_limits[segment].join(''));
-    var full_entry = parseInt(manual_entry_log$1.items().join(''));
-
-    if (full_limit >= full_entry) {
-      set_segment($input, segment, full_entry);
-    }
-
-    var at_limit = key_value > limit || manual_entry_log$1.items().length === 2;
-
-    if (at_limit) {
-      next_segment($input);
-    }
-  }
-}
-
-function clear_segment($input, segment) {
-  set_segment($input, segment, '--');
-  update_a11y($input, ['update']);
-}
-
-function switch_mode($input, default_mode) {
-  default_mode = default_mode || 'AM';
-  var current_mode = get_values($input).mode;
-  var new_mode = {
-    '--': default_mode,
-    AM: 'PM',
-    PM: 'AM'
-  }[current_mode];
-  set_segment($input, 'mode', new_mode);
-}
-
-function nudge_time_segment($input, segment, direction) {
-  var current_values = get_values($input);
-  var time;
-  var modifier = direction === 'up' ? 1 : -1;
-
-  if (current_values[segment] === '--') {
-    var current_time = new Date();
-    time = {
-      hrs: convert_hours_to_12hr_time(current_time.getHours()),
-      min: current_time.getMinutes()
-    };
-  } else {
-    var minutes = {
-      up: current_values.min < 59 ? current_values.min + modifier : 0,
-      down: current_values.min === 0 ? 59 : current_values.min + modifier
-    };
-    time = {
-      hrs: convert_hours_to_12hr_time(current_values.hrs + modifier),
-      min: minutes[direction]
-    };
-  }
-
-  set_segment($input, segment, leading_zero(time[segment]));
-}
-
-function increment($input, segment) {
-  if (segment === 'mode') {
-    switch_mode($input, 'AM');
-  } else {
-    nudge_time_segment($input, segment, 'up');
-  }
-
-  update_a11y($input, ['update']);
-}
-
-function increment_current_segment($input) {
-  var current_segment = get_current_segment($input);
-  increment($input, current_segment);
-}
-
-function decrement($input, segment) {
-  if (segment === 'mode') {
-    switch_mode($input, 'PM');
-  } else {
-    nudge_time_segment($input, segment, 'down');
-  }
-
-  update_a11y($input, ['update']);
-}
-
-function decrement_current_segment($input) {
-  var current_segment = get_current_segment($input);
-  decrement($input, current_segment);
-}
-
-function set_mode($input, type) {
-  var segment = get_current_segment($input);
-
-  if (segment === 'mode') {
-    set_segment($input, segment, type);
-  }
-}
-
-var switch_to_data_value = function ($input) {
-  var replacementVal = $input.dataset.value;
-  $input.value = replacementVal;
-};
-
-function switch_times($input, format) {
-  var is12hr = /\s/.test($input.value);
-
-  if (format != 12 && format != 24) {
-    format = is12hr ? 24 : 12;
-  }
-
-  var actions = {
-    12: function _() {
-      if (!is12hr) {
-        set_time($input, $input.dataset.value);
-      }
-    },
-    24: function _() {
-      if (is12hr) {
-        switch_to_data_value($input);
-      }
-    }
-  };
-  actions[format]();
-}
-
-function handle_tab($input, e) {
-  var current_segment = get_current_segment($input);
-  var backwards_and_first = e.shiftKey && current_segment === 'hrs';
-  var forwards_and_last = !e.shiftKey && current_segment === 'mode';
-
-  if (!backwards_and_first && !forwards_and_last) {
-    e.preventDefault();
-
-    if (e.shiftKey) {
-      prev_segment($input);
-    } else {
-      next_segment($input);
-    }
-  }
-}
-
-var named_keys = {
-  ArrowDown: 40,
-  ArrowRight: 39,
-  ArrowUp: 38,
-  ArrowLeft: 37,
-  Backspace: 8,
-  Delete: 46,
-  Tab: 9,
-  Shift: 16,
-  Escape: 27,
-  a: 65,
-  p: 80
-};
-
-function bind_events($input) {
-  var shiftKey = false;
-  document.addEventListener('keydown', function (e) {
-    shiftKey = e.shiftKey;
-  });
-  document.addEventListener('keyup', function (e) {
-    shiftKey = e.shiftKey;
-  });
-
-  if ($input.form) {
-    $input.form.addEventListener('submit', function () {
-      auto_swap($input);
-    });
-  }
-
-  var focused_via_click = false;
-  $input.addEventListener('mousedown', function () {
-    focused_via_click = true;
-  }); // Turns the IE clear button into a reset button
-
-  $input.addEventListener('mouseup', function () {
-    setTimeout(function () {
-      if ($input.value === '') reset($input);
-    }, 1);
-  });
-  $input.addEventListener('click', function (e) {
-    select_cursor_segment($input);
-  });
-  $input.addEventListener('blur', function () {
-    focused_via_click = false;
-  });
-  $input.addEventListener('focus', function (e) {
-    if (!focused_via_click) {
-      e.preventDefault();
-      var segment = shiftKey ? 'mode' : 'hrs';
-      select_segment($input, segment);
-    }
-
-    update_a11y($input, ['initial', 'select']);
-  });
-  $input.addEventListener('keydown', function (e) {
-    var is_enter_key = e.which === 13;
-    if (is_enter_key) return true;
-    var is_number_key = all_number_keys.indexOf(e.which) > -1;
-    var is_named_key = values(named_keys).indexOf(e.which) > -1;
-    var is_arrow_key = [named_keys.ArrowDown, named_keys.ArrowRight, named_keys.ArrowUp, named_keys.ArrowLeft].indexOf(e.which) > -1;
-    var is_mode_key = [named_keys.a, named_keys.p].indexOf(e.which) > -1;
-    var is_delete_key = [named_keys.Delete, named_keys.Backspace].indexOf(e.which) > -1;
-
-    if (!is_named_key || is_arrow_key || is_number_key || is_mode_key || is_delete_key) {
-      e.preventDefault();
-    }
-
-    if (is_number_key) {
-      manual_number_entry($input, e.which);
-    }
-
-    if (is_delete_key) {
-      var segment = get_current_segment($input);
-      clear_segment($input, segment);
-    }
-
-    switch (e.which) {
-      case named_keys.ArrowRight:
-        next_segment($input);
-        break;
-
-      case named_keys.ArrowLeft:
-        prev_segment($input);
-        break;
-
-      case named_keys.ArrowUp:
-        increment_current_segment($input);
-        break;
-
-      case named_keys.ArrowDown:
-        decrement_current_segment($input);
-        break;
-
-      case named_keys.Escape:
-        reset($input);
-        break;
-
-      case named_keys.a:
-        set_mode($input, 'AM');
-        break;
-
-      case named_keys.p:
-        set_mode($input, 'PM');
-        break;
-
-      case named_keys.Tab:
-        handle_tab($input, e);
-        break;
-    }
-  });
-}
-
-function auto_swap($input) {
-  if ($input.polyfill.autoSwap) {
-    switch_times($input, 24);
-    setTimeout(function () {
-      switch_times($input, 12);
-    }, 1);
-  }
-}
-
-// selector is optional, it allows for an early exit
-var get_ancestors = function ($input, selectorString) {
-  var $elem = $input; // https://stackoverflow.com/a/8729274/1611058
-
-  var ancestors = [];
-
-  while ($elem) {
-    ancestors.push($elem);
-    var matchesSelector = $elem.msMatchesSelector ? $elem.msMatchesSelector(selectorString) : $elem.matches(selectorString);
-
-    if (matchesSelector) {
-      return ancestors;
-    }
-
-    $elem = $elem.parentElement;
-  }
-
-  return ancestors;
-};
-
-function get_label($input) {
-  var labelText = aria_labelledby($input) || aria_label($input) || for_attribute($input) || label_wrapper_element($input) || title_attribute($input);
-  if (labelText) return labelText;
-  console.error('Label text for input not found.', $input);
-  throw new Error('Cannot polyfill time input due to a missing label.');
-}
-
-function aria_labelledby($input) {
-  var ariaLabelByID = $input.getAttribute('aria-labelledby');
-
-  if (ariaLabelByID) {
-    var $ariaLabelBy = document.getElementById(ariaLabelByID);
-    if ($ariaLabelBy) return $ariaLabelBy.textContent;
-  }
-
-  return false;
-}
-
-function aria_label($input) {
-  var ariaLabel = $input.getAttribute('aria-label');
-  if (ariaLabel) return ariaLabel;
-  return false;
-}
-
-function for_attribute($input) {
-  if ($input.id) {
-    var $forLabel = document.querySelector('label[for="' + $input.id + '"]');
-    if ($forLabel) return $forLabel.textContent;
-  }
-
-  return false;
-}
-
-function label_wrapper_element($input) {
-  var ancestors = get_ancestors($input, 'label');
-  var $parentLabel = ancestors[ancestors.length - 1];
-  if ($parentLabel.nodeName == 'LABEL') return $parentLabel.textContent;
-  return false;
-}
-
-function title_attribute($input) {
-  var titleLabel = $input.getAttribute('title');
-  if (titleLabel) return titleLabel;
-  return false;
-}
-
-function create_accessibility_block() {
-  var $block = document.createElement('div');
-  $block.setAttribute('aria-live', 'assertive');
-  $block.setAttribute('style', 'position: absolute; opacity: 0; height: 0; width: 0; overflow: hidden; pointer-events: none;');
-  $block.classList.add('time-input-polyfill-accessibility-block');
-  document.querySelector('body').appendChild($block);
-  return $block;
-}
-
-var accessibility_block_created = false;
-var $a11y;
-
-function TimePolyfill($input, $label) {
-  $input.setAttribute('autocomplete', 'off'); // Prevent screen reader from announcing the default stuff
-
-  $input.setAttribute('aria-hidden', true);
-
-  if (!accessibility_block_created) {
-    $a11y = create_accessibility_block();
-    accessibility_block_created = true;
-  }
-
-  var label = $label ? $label.textContent : get_label($input);
-  $input.polyfill = {
-    $a11y: $a11y,
-    label: label,
-    autoSwap: true,
-    update: function update() {
-      update_time($input);
-    },
-    swap: function swap(forcedFormat) {
-      switch_times($input, forcedFormat);
-    }
-  };
-
-  if ($input.value === '' || /--/.test($input.value)) {
-    apply_default($input);
-    set_data_attribute($input, '');
-  } else {
-    update_time($input);
-    set_data_attribute($input, $input.value);
-  }
-
-  bind_events($input);
-}
-
-if (window) {
-  window.TimePolyfill = TimePolyfill;
-}
-
-var index_cjs = TimePolyfill;
-
 function civilTimeToHTMLTime(civilTime) {
     if (civilTime == undefined) {
         return "";
@@ -737,40 +44,50 @@ function htmlTimeToCivilTime(timeString) {
 }
 
 function InputTimeSafari(_a) {
+    var _b, _c;
     var { defaultValue, value, onChange } = _a, params = tslib_es6.__rest(_a, ["defaultValue", "value", "onChange"]);
     const inputTime = React__default["default"].createRef();
     const debouncedHandleChange = debounce__default["default"](handleChange, 1000);
     const changeHandler = generateEventHandler(debouncedHandleChange);
     const blurHandler = generateEventHandler(handleChange);
-    React.useLayoutEffect(() => {
-        const input = inputTime.current;
-        new index_cjs(input);
-        if (value) {
-            input.value = civilTimeToHTMLTime(value);
-            input.polyfill.update();
-        }
-        if (defaultValue) {
-            input.value = civilTimeToHTMLTime(defaultValue);
-            input.polyfill.update();
-        }
-        input.addEventListener("change", changeHandler);
-        input.addEventListener("blur", blurHandler);
+    useSafeLayoutEffect.useSafeLayoutEffect(() => {
+        const setupTimePolyfill = () => tslib_es6.__awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            const input = inputTime.current;
+            const { TimePolyfill } = yield Promise.resolve().then(function () { return require('../TimeInputPolyfill.client-1dfc8ab1.js'); });
+            new TimePolyfill(input);
+            if (value && input.polyfill) {
+                input.value = civilTimeToHTMLTime(value);
+                (_a = input.polyfill) === null || _a === void 0 ? void 0 : _a.update();
+            }
+            if (defaultValue && input.polyfill) {
+                input.value = civilTimeToHTMLTime(defaultValue);
+                (_b = input.polyfill) === null || _b === void 0 ? void 0 : _b.update();
+            }
+            input.addEventListener("change", changeHandler);
+            input.addEventListener("blur", blurHandler);
+        });
+        setupTimePolyfill();
         return () => {
             window.removeEventListener("change", changeHandler);
             window.removeEventListener("blur", blurHandler);
         };
-    }, []);
-    React.useLayoutEffect(() => {
+    }, [(_b = inputTime.current) === null || _b === void 0 ? void 0 : _b.polyfill]);
+    useSafeLayoutEffect.useSafeLayoutEffect(() => {
         const input = inputTime.current;
-        if (value) {
+        if (value && input.polyfill) {
             input.value = civilTimeToHTMLTime(value);
             input.polyfill.update();
         }
-        if (defaultValue) {
+        if (defaultValue && input.polyfill) {
             input.value = civilTimeToHTMLTime(defaultValue);
             input.polyfill.update();
         }
-    }, [value, defaultValue]);
+    }, [
+        value,
+        defaultValue,
+        (_c = inputTime.current) === null || _c === void 0 ? void 0 : _c.polyfill,
+    ]);
     return React__default["default"].createElement(FormField.FormField, Object.assign({ inputRef: inputTime, type: "time" }, params));
     function handleChange(newValue) {
         onChange && onChange(htmlTimeToCivilTime(newValue));
@@ -785,13 +102,21 @@ function InputTimeSafari(_a) {
     }
 }
 
-function InputTime(_a) {
+function InternalInputTime(_a) {
     var { defaultValue, value, onChange } = _a, params = tslib_es6.__rest(_a, ["defaultValue", "value", "onChange"]);
+    const [supportsTime, setSupportsTime] = React.useState(false);
     const handleChange = (newValue) => {
         onChange && onChange(htmlTimeToCivilTime(newValue));
     };
+    React.useEffect(() => {
+        const getTime = () => tslib_es6.__awaiter(this, void 0, void 0, function* () {
+            const { supportsTime: externalSupportsTime } = yield Promise.resolve().then(function () { return require('../SupportsTimePolyfill-466a30f9.js'); });
+            setSupportsTime(externalSupportsTime);
+        });
+        getTime();
+    }, []);
     if (supportsTime) {
-        const fieldProps = Object.assign(Object.assign(Object.assign({ onChange: handleChange }, (defaultValue && { defaultValue: civilTimeToHTMLTime(defaultValue) })), (!defaultValue && { value: civilTimeToHTMLTime(value) })), params);
+        const fieldProps = Object.assign(Object.assign(Object.assign({ onChange: onChange && handleChange }, (defaultValue && { defaultValue: civilTimeToHTMLTime(defaultValue) })), (!defaultValue && onChange && { value: civilTimeToHTMLTime(value) })), params);
         return React__default["default"].createElement(FormField.FormField, Object.assign({ type: "time" }, fieldProps));
     }
     else {
@@ -799,4 +124,13 @@ function InputTime(_a) {
     }
 }
 
+const canUseDom = !!(typeof window !== "undefined" &&
+    window.document &&
+    window.document.createElement);
+function InputTimeSafe(props) {
+    return (React__default["default"].createElement(ClientOnly.ClientOnly, null,
+        React__default["default"].createElement(InternalInputTime, Object.assign({}, props))));
+}
+const InputTime = canUseDom ? InputTimeSafe : () => null;
+
 exports.InputTime = InputTime;