@jobber/components 4.76.1 → 4.77.0

package/dist/DataList/DataList.types.d.ts

@@ -35,6 +35,7 @@ export interface DataListSorting extends SortableOptions {
     readonly key: string;
 }
 export interface SortableOptions {
+    readonly id: string;
     readonly label: string;
     readonly order: "asc" | "desc";
 }

package/dist/DataList/index.js

@@ -310,7 +310,7 @@ function DataListSortingOptions({ options, selectedOption, onSelectChange, onClo
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [optionsListRef, dataListHeaderTileRef, onClose]);
-    return (React__default["default"].createElement("ul", { className: styles$8.optionsList, ref: optionsListRef }, options.map((option, index) => (React__default["default"].createElement("li", { className: styles$8.option, key: index, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0 },
+    return (React__default["default"].createElement("ul", { className: styles$8.optionsList, ref: optionsListRef }, options.map((option, index) => (React__default["default"].createElement("li", { className: styles$8.option, key: index, onClick: () => onSelectChange(option), onKeyDown: event => handleKeyDown(event, option), tabIndex: 0, "data-value": option.id },
         option.label,
         option.label === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && (React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" })))))));
     function handleKeyDown(event, option) {
@@ -333,20 +333,20 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
     useRefocusOnActivator.useRefocusOnActivator(visible);
     const { sorting } = useDataListContext();
     const [isDropDownOpen, setIsDropDownOpen] = React__default["default"].useState(false);
-    const [selectedSortOption, setSelectedSortOption] = React__default["default"].useState(null);
     const optionsListRef = useFocusTrap.useFocusTrap(isDropDownOpen);
     const dataListHeaderTileRef = React__default["default"].useRef(null);
     const sortableItem = sorting === null || sorting === void 0 ? void 0 : sorting.sortable.find(item => item.key === headerKey);
     const isSortable = Boolean(sortableItem);
     const sortingState = sorting === null || sorting === void 0 ? void 0 : sorting.state;
     const Tag = isSortable ? "button" : "div";
+    const selectedOption = (sorting === null || sorting === void 0 ? void 0 : sorting.state) || null;
     return (React__default["default"].createElement(Tag, { className: classnames__default["default"](styles$a.headerLabel, {
             [styles$a.sortable]: isSortable,
         }), onClick: handleOnClick, ref: dataListHeaderTileRef },
         React__default["default"].createElement(Text.Text, { maxLines: "single" }, headers[headerKey]),
-        isSortable && (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) && isDropDownOpen && (React__default["default"].createElement(DataListSortingOptions, { options: sortableItem.options, selectedOption: selectedSortOption, onSelectChange: handleSelectChange, onClose: () => setIsDropDownOpen(false), optionsListRef: optionsListRef, dataListHeaderTileRef: dataListHeaderTileRef })),
+        isSortable && (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) && isDropDownOpen && (React__default["default"].createElement(DataListSortingOptions, { options: sortableItem.options, selectedOption: selectedOption, onSelectChange: handleSelectChange, onClose: () => setIsDropDownOpen(false), optionsListRef: optionsListRef, dataListHeaderTileRef: dataListHeaderTileRef })),
         (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) === headerKey ? (React__default["default"].createElement(DataListSortingArrows, { order: sortingState.order })) : (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key) !== headerKey && isSortable ? (React__default["default"].createElement(DataListSortingArrows, { order: "none" })) : null));
-    function toggleSorting(sortingKey, label, order) {
+    function toggleSorting(id, sortingKey, label, order) {
         const isSameKey = (sortingState === null || sortingState === void 0 ? void 0 : sortingState.label) === label && sortingKey === (sortingState === null || sortingState === void 0 ? void 0 : sortingState.key);
         const isDescending = (sortingState === null || sortingState === void 0 ? void 0 : sortingState.order) === "desc";
         if (isSameKey && isDescending && order !== "asc") {
@@ -357,12 +357,14 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
         }
         const sortingOrder = order || (isSameKey && !isDescending ? "desc" : "asc");
         sorting === null || sorting === void 0 ? void 0 : sorting.onSort({
+            id,
             key: sortingKey,
             label,
             order: sortingOrder,
         });
     }
     function handleOnClick() {
+        var _a, _b;
         if (!isSortable)
             return;
         if (sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) {
@@ -370,16 +372,16 @@ function DataListHeaderTile({ headers, headerKey, visible = false, }) {
         }
         else {
             const headerValue = headers[headerKey];
+            const id = ((_b = (_a = sortableItem === null || sortableItem === void 0 ? void 0 : sortableItem.options) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id) || headerKey;
             if (headerValue !== undefined) {
-                toggleSorting(headerKey, headerValue);
+                toggleSorting(id, headerKey, headerValue);
             }
         }
     }
-    function handleSelectChange(selectedOption) {
+    function handleSelectChange(newSortOption) {
         if (sortableItem) {
-            toggleSorting(sortableItem.key, selectedOption.label, selectedOption.order);
+            toggleSorting(newSortOption.id, sortableItem.key, newSortOption.label, newSortOption.order);
         }
-        setSelectedSortOption(selectedOption);
         setIsDropDownOpen(true);
     }
 }
@@ -890,7 +892,7 @@ function DataListSort() {
     const sortByOptions = getSortByOptions();
     return (React__default["default"].createElement(Combobox.Combobox, { onSelect: selection => handleKeyChange(selection[0].id.toString()), selected: [
             {
-                id: `${state === null || state === void 0 ? void 0 : state.key},${state === null || state === void 0 ? void 0 : state.order},${state === null || state === void 0 ? void 0 : state.label}`,
+                id: getSelectedSortID(),
                 label: (state === null || state === void 0 ? void 0 : state.order) || "",
             },
         ] },
@@ -908,18 +910,33 @@ function DataListSort() {
                 customOptions.forEach(option => {
                     acc.push({
                         label: option.label || "",
-                        value: `${sort.key},${option.order},${option.label}`,
+                        value: JSON.stringify({
+                            key: sort.key,
+                            order: option.order,
+                            label: option.label,
+                            id: option.id,
+                        }),
                     });
                 });
                 return acc;
             }
             acc.push({
                 label: `${label} (A-Z)`,
-                value: `${sort.key},asc,${label}`,
+                value: JSON.stringify({
+                    key: sort.key,
+                    order: "asc",
+                    label: label,
+                    id: sort.key,
+                }),
             });
             acc.push({
                 label: `${label} (Z-A)`,
-                value: `${sort.key},desc,${label}`,
+                value: JSON.stringify({
+                    key: sort.key,
+                    order: "desc",
+                    label: label,
+                    id: sort.key,
+                }),
             });
             return acc;
         }, []);
@@ -928,17 +945,26 @@ function DataListSort() {
         return options;
     }
     function getButtonLabel() {
-        const selectedOption = sortByOptions.find(option => option.value === `${state === null || state === void 0 ? void 0 : state.key},${state === null || state === void 0 ? void 0 : state.order},${state === null || state === void 0 ? void 0 : state.label}`);
+        const selectedOption = sortByOptions.find(option => option.value === getSelectedSortID());
         return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || "";
     }
     function handleKeyChange(value) {
         if (value && value !== "none") {
-            const [key, order, label] = value.split(",");
-            onSort({ key, order: order, label });
+            const { key, order, label, id } = JSON.parse(value);
+            onSort({ key, order: order, label, id });
             return;
         }
         onSort(undefined);
     }
+    function getSelectedSortID() {
+        const selectedSortID = {
+            key: state === null || state === void 0 ? void 0 : state.key,
+            order: state === null || state === void 0 ? void 0 : state.order,
+            label: state === null || state === void 0 ? void 0 : state.label,
+            id: state === null || state === void 0 ? void 0 : state.id,
+        };
+        return JSON.stringify(selectedSortID);
+    }
 }
 
 function useShowHeader() {

package/dist/InputTime/index.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
-var debounce = require('lodash/debounce');
 var temporal = require('@std-proposal/temporal');
+var debounce = require('lodash/debounce');
 var FormField = require('../FormField-b0e74d32.js');
 require('uuid');
 require('react-hook-form');
@@ -27,700 +27,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 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,55 +43,6 @@ function htmlTimeToCivilTime(timeString) {
     }
 }
 
-function InputTimeSafari(_a) {
-    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);
-        return () => {
-            window.removeEventListener("change", changeHandler);
-            window.removeEventListener("blur", blurHandler);
-        };
-    }, []);
-    React.useLayoutEffect(() => {
-        const input = inputTime.current;
-        if (value) {
-            input.value = civilTimeToHTMLTime(value);
-            input.polyfill.update();
-        }
-        if (defaultValue) {
-            input.value = civilTimeToHTMLTime(defaultValue);
-            input.polyfill.update();
-        }
-    }, [value, defaultValue]);
-    return React__default["default"].createElement(FormField.FormField, Object.assign({ inputRef: inputTime, type: "time" }, params));
-    function handleChange(newValue) {
-        onChange && onChange(htmlTimeToCivilTime(newValue));
-    }
-    function generateEventHandler(handler) {
-        return (event) => {
-            const newValue = event.currentTarget.dataset.value;
-            if (newValue != undefined) {
-                handler(newValue);
-            }
-        };
-    }
-}
-
 const DEBOUNCE_TIME = 300;
 function useTimePredict({ value, handleChange }) {
     const IS_12_HOUR_FORMAT = React.useRef(Intl.DateTimeFormat(navigator.language, {
@@ -928,17 +185,12 @@ function InputTime(_a) {
     var { defaultValue, value, onChange } = _a, params = tslib_es6.__rest(_a, ["defaultValue", "value", "onChange"]);
     const ref = React.useRef(null);
     const { setTypedTime } = useTimePredict({ value, handleChange });
-    if (supportsTime) {
-        const fieldProps = Object.assign(Object.assign(Object.assign({ onChange: handleChange }, (defaultValue && { defaultValue: civilTimeToHTMLTime(defaultValue) })), (!defaultValue && { value: civilTimeToHTMLTime(value) })), params);
-        return (React__default["default"].createElement(FormField.FormField, Object.assign({ inputRef: ref, type: "time" }, fieldProps, { onBlur: handleBlur, onKeyUp: e => {
-                var _a;
-                (_a = fieldProps.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(fieldProps, e);
-                !isNaN(parseInt(e.key, 10)) && setTypedTime(prev => prev + e.key);
-            } })));
-    }
-    else {
-        return (React__default["default"].createElement(InputTimeSafari, Object.assign({ defaultValue: defaultValue, value: value, onChange: onChange }, params)));
-    }
+    const fieldProps = Object.assign(Object.assign(Object.assign({ onChange: handleChange }, (defaultValue && { defaultValue: civilTimeToHTMLTime(defaultValue) })), (!defaultValue && { value: civilTimeToHTMLTime(value) })), params);
+    return (React__default["default"].createElement(FormField.FormField, Object.assign({ inputRef: ref, type: "time" }, fieldProps, { onBlur: handleBlur, onKeyUp: e => {
+            var _a;
+            (_a = fieldProps.onKeyUp) === null || _a === void 0 ? void 0 : _a.call(fieldProps, e);
+            !isNaN(parseInt(e.key, 10)) && setTypedTime(prev => prev + e.key);
+        } })));
     function handleChange(newValue) {
         onChange === null || onChange === void 0 ? void 0 : onChange(htmlTimeToCivilTime(newValue));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.76.1",
+  "version": "4.77.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "e7eba7281a8a52782f23a7efc8658583244a77e7"
+  "gitHead": "41fd9d0c9fc9bce73e562660c180a3e3b4a7b5dc"
 }

package/dist/InputTime/InputTimeSafari.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { InputTimeProps } from "./InputTimeProps";
-export declare function InputTimeSafari({ defaultValue, value, onChange, ...params }: InputTimeProps): JSX.Element;