@esri/calcite-components 1.9.0-next.16 → 1.9.0-next.18

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.16
+ * v1.9.0-next.18
  */
 'use strict';
 
@@ -9117,7 +9117,7 @@ var baseFor = createBaseFor();
  * }, _.now());
  * // => Logs the number of milliseconds it took for the deferred invocation.
  */
-var now = function() {
+var now$1 = function() {
   return root.Date.now();
 };
 
@@ -9246,7 +9246,7 @@ function debounce(func, wait, options) {
   }
 
   function timerExpired() {
-    var time = now();
+    var time = now$1();
     if (shouldInvoke(time)) {
       return trailingEdge(time);
     }
@@ -9275,11 +9275,11 @@ function debounce(func, wait, options) {
   }
 
   function flush() {
-    return timerId === undefined ? result : trailingEdge(now());
+    return timerId === undefined ? result : trailingEdge(now$1());
   }
 
   function debounced() {
-    var time = now(),
+    var time = now$1(),
         isInvoking = shouldInvoke(time);
 
     lastArgs = arguments;
@@ -25530,6 +25530,7 @@ class InputDatePicker {
     this.name = undefined;
     this.numberingSystem = undefined;
     this.scale = "m";
+    this.status = "idle";
     this.placement = defaultMenuPlacement;
     this.range = false;
     this.required = false;
@@ -25727,7 +25728,7 @@ class InputDatePicker {
     };
     return (hAsync(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler }, this.localeData && (hAsync("div", { class: "input-container" }, hAsync("div", { class: "input-wrapper", onClick: this.onInputWrapperClick,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-      ref: this.setStartWrapper }, hAsync("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.startInputFocus, onFocus: this.startEndInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
+      ref: this.setStartWrapper }, hAsync("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.startInputFocus, onFocus: this.startEndInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, status: this.status, type: "text",
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setStartInput }), !this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "start"), hAsync("span", { "aria-hidden": "true", class: CSS$H.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), hAsync("div", { "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
         [CSS$H.menu]: true,
@@ -25748,7 +25749,7 @@ class InputDatePicker {
       ref: this.setEndWrapper }, hAsync("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
         input: true,
         "border-top-color-one": this.layout === "vertical" && this.range,
-      }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, onFocus: this.startEndInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
+      }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, onFocus: this.startEndInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, status: this.status, type: "text",
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setEndInput }), !this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "end"))))), hAsync(HiddenFormInputSlot, { component: this })));
   }
@@ -25932,6 +25933,7 @@ class InputDatePicker {
       "name": [513],
       "numberingSystem": [513, "numbering-system"],
       "scale": [513],
+      "status": [513],
       "placement": [513],
       "range": [516],
       "required": [516],
@@ -25948,7 +25950,7 @@ class InputDatePicker {
     },
     "$listeners$": [[0, "calciteDaySelect", "calciteDaySelectHandler"]],
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["disabled", "disabled"], ["focusTrapDisabled", "focus-trap-disabled"], ["form", "form"], ["readOnly", "read-only"], ["headingLevel", "heading-level"], ["open", "open"], ["name", "name"], ["numberingSystem", "numbering-system"], ["scale", "scale"], ["placement", "placement"], ["range", "range"], ["required", "required"], ["overlayPositioning", "overlay-positioning"], ["layout", "layout"]]
+    "$attrsToReflect$": [["disabled", "disabled"], ["focusTrapDisabled", "focus-trap-disabled"], ["form", "form"], ["readOnly", "read-only"], ["headingLevel", "heading-level"], ["open", "open"], ["name", "name"], ["numberingSystem", "numbering-system"], ["scale", "scale"], ["status", "status"], ["placement", "placement"], ["range", "range"], ["required", "required"], ["overlayPositioning", "overlay-positioning"], ["layout", "layout"]]
   }; }
 }
 
@@ -28698,6 +28700,7 @@ class InputTimePicker {
     this.numberingSystem = undefined;
     this.required = false;
     this.scale = "m";
+    this.status = "idle";
     this.overlayPositioning = "absolute";
     this.placement = "auto";
     this.step = 60;
@@ -29037,7 +29040,7 @@ class InputTimePicker {
   // --------------------------------------------------------------------------
   render() {
     const { disabled, messages, readOnly, dialogId } = this;
-    return (hAsync(Host, { onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, hAsync("div", { class: "input-wrapper", onClick: this.onInputWrapperClick }, hAsync("calcite-input", { "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, role: "combobox", scale: this.scale, step: this.step,
+    return (hAsync(Host, { onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, hAsync("div", { class: "input-wrapper", onClick: this.onInputWrapperClick }, hAsync("calcite-input", { "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, role: "combobox", scale: this.scale, status: this.status, step: this.step,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setInputAndTransitionEl }), !this.readOnly && this.renderToggleIcon(this.open)), hAsync("calcite-popover", { focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, lang: this.effectiveLocale, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, referenceElement: this.referenceElementId, triggerDisabled: true,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
@@ -29078,6 +29081,7 @@ class InputTimePicker {
       "numberingSystem": [1, "numbering-system"],
       "required": [516],
       "scale": [513],
+      "status": [513],
       "overlayPositioning": [1, "overlay-positioning"],
       "placement": [513],
       "step": [2],
@@ -29089,42 +29093,102 @@ class InputTimePicker {
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["open", "open"], ["disabled", "disabled"], ["focusTrapDisabled", "focus-trap-disabled"], ["form", "form"], ["readOnly", "read-only"], ["required", "required"], ["scale", "scale"], ["placement", "placement"]]
+    "$attrsToReflect$": [["open", "open"], ["disabled", "disabled"], ["focusTrapDisabled", "focus-trap-disabled"], ["form", "form"], ["readOnly", "read-only"], ["required", "required"], ["scale", "scale"], ["status", "status"], ["placement", "placement"]]
   }; }
 }
 
 const hourToMinutes = 60;
+function timeZoneOffsetToDecimal(shortOffsetTimeZoneName) {
+  const minusSign = "−";
+  const hyphen = "-";
+  return (shortOffsetTimeZoneName
+    .replace(":15", ".25")
+    .replace(":30", ".5")
+    .replace(":45", ".75")
+    // ensures decimal string representation is parseable
+    .replace(minusSign, hyphen));
+}
+function toOffsetValue(timeZoneName, referenceDateInMs) {
+  // we use "en-US" to allow us to reliably remove the standard time token
+  const offset = getTimeZoneShortOffset(timeZoneName, "en-US", referenceDateInMs).replace("GMT", "");
+  if (offset === "") {
+    return 0;
+  }
+  return Number(timeZoneOffsetToDecimal(offset)) * hourToMinutes;
+}
 function getUserTimeZoneOffset() {
   const localDate = new Date();
   return localDate.getTimezoneOffset() * -1;
 }
-function getFallbackTimeZoneGroups() {
-  const timeZoneOffsets = [
-    -11, -10, -9.5, -9, -8, -7, -6, -5, -4, -3, -2.5, -2, -1, 0, 1, 2, 3, 3.5, 4, 4.5, 5, 6, 6.5, 7, 8, 8.75, 9, 9.5,
-    10, 10.5, 11, 12, 12.75, 13, 14,
-  ];
-  return timeZoneOffsets.map((offset) => {
+function getUserTimeZoneName() {
+  const dateFormatter = new Intl.DateTimeFormat();
+  return dateFormatter.resolvedOptions().timeZone;
+}
+/**
+ * The lazy-loaded timezone-groups lib to be used across instances.
+ */
+let timeZoneGroups;
+async function createTimeZoneItems(locale, messages, mode, referenceDate) {
+  const referenceDateInMs = referenceDate.getTime();
+  const timeZoneNames = Intl.supportedValuesOf("timeZone");
+  if (mode === "offset") {
+    if (!timeZoneGroups) {
+      timeZoneGroups = Promise.all([
+        Promise.resolve().then(function () { return index$1; }),
+        Promise.resolve().then(function () { return index; }),
+      ]);
+    }
+    return timeZoneGroups.then(async ([{ groupTimeZones }, { DateEngine }]) => {
+      const timeZoneGroups = await groupTimeZones({
+        dateEngine: new DateEngine(),
+        groupDateRange: 1,
+        startDate: new Date(referenceDateInMs).toISOString(),
+      });
+      const listFormatter = new Intl.ListFormat(locale, { style: "long", type: "conjunction" });
+      return timeZoneGroups
+        .map(({ labelTzIndices, tzs }) => {
+        const groupRepTz = tzs[0];
+        const decimalOffset = timeZoneOffsetToDecimal(getTimeZoneShortOffset(groupRepTz, locale, referenceDateInMs));
+        const value = toOffsetValue(groupRepTz, referenceDateInMs);
+        const label = createTimeZoneOffsetLabel(messages, decimalOffset, listFormatter.format(labelTzIndices.map((index) => messages[tzs[index]])));
+        return {
+          label,
+          value,
+          filterValue: tzs.map((tz) => toUserFriendlyName(tz)),
+        };
+      })
+        .filter((group) => !!group)
+        .sort((groupA, groupB) => groupA.value - groupB.value);
+    });
+  }
+  return timeZoneNames
+    .map((timeZone) => {
+    const label = toUserFriendlyName(timeZone);
+    const value = timeZone;
     return {
-      offsetValue: offset * hourToMinutes,
-      offsetLabel: toGMTLabel(offset),
+      label,
+      value,
+      filterValue: timeZone,
     };
-  });
+  })
+    .filter((group) => !!group)
+    .sort();
 }
 /**
- * Exported for testing-purposes only
+ * Exported for testing purposes only
  *
  * @internal
  */
-function toGMTLabel(offsetInHours) {
-  return `GMT${offsetInHours === 0 ? "" : offsetInHours.toLocaleString("en", { signDisplay: "always" })}`;
+function toUserFriendlyName(timeZoneName) {
+  return timeZoneName.replace(/_/g, " ");
 }
-let timeZoneGeneration;
-async function generateTimeZoneGroups() {
-  if (timeZoneGeneration) {
-    return timeZoneGeneration;
-  }
-  timeZoneGeneration = Promise.resolve(getFallbackTimeZoneGroups());
-  return timeZoneGeneration;
+function createTimeZoneOffsetLabel(messages, offsetLabel, groupLabel) {
+  return messages.timeZoneLabel.replace("{offset}", offsetLabel).replace("{cities}", groupLabel);
+}
+function getTimeZoneShortOffset(timeZone, locale, referenceDateInMs = Date.now()) {
+  const dateTimeFormat = getDateTimeFormat(locale, { timeZone, timeZoneName: "shortOffset" });
+  const parts = dateTimeFormat.formatToParts(referenceDateInMs);
+  return parts.find(({ type }) => type === "timeZoneName").value;
 }
 
 const inputTimeZoneCss = "/*!@:host([disabled])*/[disabled].sc-calcite-input-time-zone-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-input-time-zone-h *.sc-calcite-input-time-zone,.sc-calcite-input-time-zone-h[disabled] .sc-calcite-input-time-zone-s>*{pointer-events:none}/*!@:host*/.sc-calcite-input-time-zone-h{display:block}/*!@:host([hidden])*/[hidden].sc-calcite-input-time-zone-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-input-time-zone{display:none}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-input-time-zone-h[disabled] .sc-calcite-input-time-zone-s>[calcite-hydrated][disabled],[disabled].sc-calcite-input-time-zone-h [calcite-hydrated][disabled].sc-calcite-input-time-zone{opacity:1}/*!@::slotted(input[slot=hidden-form-input])*/.sc-calcite-input-time-zone-s>input[slot=hidden-form-input]{margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
@@ -29151,13 +29215,13 @@ class InputTimeZone {
     this.onComboboxChange = (event) => {
       event.stopPropagation();
       const combobox = event.target;
-      const selected = this.timeZoneGroups.find(({ offsetValue }) => combobox.value === `${offsetValue}`);
-      const selectedValue = `${selected.offsetValue}`;
+      const selected = this.findTimeZoneItem(combobox.selectedItems[0].getAttribute("data-value"));
+      const selectedValue = `${selected.value}`;
       if (this.value === selectedValue) {
         return;
       }
       this.value = selectedValue;
-      this.selectedTimeZoneGroup = selected;
+      this.selectedTimeZoneItem = selected;
       this.calciteInputTimeZoneChange.emit();
     };
     this.onComboboxClose = (event) => {
@@ -29175,9 +29239,11 @@ class InputTimeZone {
     this.maxItems = 0;
     this.messages = undefined;
     this.messageOverrides = undefined;
+    this.mode = "offset";
     this.name = undefined;
     this.open = false;
     this.overlayPositioning = "absolute";
+    this.referenceDate = undefined;
     this.required = false;
     this.scale = "m";
     this.value = undefined;
@@ -29187,6 +29253,17 @@ class InputTimeZone {
   onMessagesChange() {
     /* wired up by t9n util */
   }
+  handleTimeZoneItemPropsChange() {
+    this.createTimeZoneItems();
+  }
+  handleValueChange(value, oldValue) {
+    const timeZoneItem = this.findTimeZoneItem(value);
+    if (!timeZoneItem) {
+      this.value = oldValue;
+      return;
+    }
+    this.selectedTimeZoneItem = timeZoneItem;
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -29207,6 +29284,20 @@ class InputTimeZone {
   onLabelClick() {
     this.setFocus();
   }
+  findTimeZoneItem(value) {
+    const valueToMatch = value;
+    return this.timeZoneItems.find(({ value }) => 
+    // intentional == to match string to number
+    value == valueToMatch);
+  }
+  async createTimeZoneItems() {
+    if (!this.effectiveLocale || !this.messages) {
+      return [];
+    }
+    return createTimeZoneItems(this.effectiveLocale, this.messages, this.mode, this.referenceDate instanceof Date
+      ? this.referenceDate
+      : new Date(this.referenceDate ?? Date.now()));
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -29227,13 +29318,14 @@ class InputTimeZone {
   async componentWillLoad() {
     setUpLoadableComponent(this);
     await setUpMessages(this);
-    const timeZoneGroups = await generateTimeZoneGroups();
-    this.timeZoneGroups = timeZoneGroups;
-    const offsetToMatch = this.value ?? getUserTimeZoneOffset();
-    this.selectedTimeZoneGroup = timeZoneGroups.find(({ offsetValue }) => 
-    // intentional == to match string to number
-    offsetValue == offsetToMatch);
-    const selectedValue = `${this.selectedTimeZoneGroup.offsetValue}`;
+    this.timeZoneItems = await this.createTimeZoneItems();
+    const fallbackValue = this.mode === "offset" ? getUserTimeZoneOffset() : getUserTimeZoneName();
+    const valueToMatch = this.value ?? fallbackValue;
+    this.selectedTimeZoneItem = this.findTimeZoneItem(valueToMatch);
+    if (!this.selectedTimeZoneItem) {
+      this.selectedTimeZoneItem = this.findTimeZoneItem(fallbackValue);
+    }
+    const selectedValue = `${this.selectedTimeZoneItem.value}`;
     afterConnectDefaultValueSet(this, selectedValue);
     this.value = selectedValue;
   }
@@ -29246,11 +29338,10 @@ class InputTimeZone {
   render() {
     return (hAsync(Host, null, hAsync("calcite-combobox", { clearDisabled: true, disabled: this.disabled, label: this.messages.chooseTimeZone, lang: this.effectiveLocale, maxItems: this.maxItems, onCalciteComboboxBeforeClose: this.onComboboxBeforeClose, onCalciteComboboxBeforeOpen: this.onComboboxBeforeOpen, onCalciteComboboxChange: this.onComboboxChange, onCalciteComboboxClose: this.onComboboxClose, onCalciteComboboxOpen: this.onComboboxOpen, open: this.open, overlayPositioning: this.overlayPositioning, scale: this.scale, selectionMode: "single-persist",
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-      ref: this.setComboboxRef }, this.timeZoneGroups.map((group) => {
-      const selected = this.selectedTimeZoneGroup === group;
-      const label = group.offsetLabel;
-      const value = group.offsetValue;
-      return (hAsync("calcite-combobox-item", { key: label, selected: selected, textLabel: label, value: `${value}` }));
+      ref: this.setComboboxRef }, this.timeZoneItems.map((group) => {
+      const selected = this.selectedTimeZoneItem === group;
+      const { label, value } = group;
+      return (hAsync("calcite-combobox-item", { "data-value": value, key: label, selected: selected, textLabel: label, value: `${group.filterValue}` }));
     })), hAsync(HiddenFormInputSlot, { component: this })));
   }
   static get delegatesFocus() { return true; }
@@ -29258,7 +29349,11 @@ class InputTimeZone {
   get el() { return getElement(this); }
   static get watchers() { return {
     "messageOverrides": ["onMessagesChange"],
-    "effectiveLocale": ["effectiveLocaleWatcher"]
+    "effectiveLocale": ["handleTimeZoneItemPropsChange", "effectiveLocaleWatcher"],
+    "messages": ["handleTimeZoneItemPropsChange"],
+    "mode": ["handleTimeZoneItemPropsChange"],
+    "referenceDate": ["handleTimeZoneItemPropsChange"],
+    "value": ["handleValueChange"]
   }; }
   static get style() { return inputTimeZoneCss; }
   static get cmpMeta() { return {
@@ -29270,9 +29365,11 @@ class InputTimeZone {
       "maxItems": [514, "max-items"],
       "messages": [1040],
       "messageOverrides": [1040],
+      "mode": [513],
       "name": [513],
       "open": [1540],
       "overlayPositioning": [513, "overlay-positioning"],
+      "referenceDate": [1, "reference-date"],
       "required": [516],
       "scale": [513],
       "value": [1025],
@@ -29282,7 +29379,7 @@ class InputTimeZone {
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["disabled", "disabled"], ["form", "form"], ["maxItems", "max-items"], ["name", "name"], ["open", "open"], ["overlayPositioning", "overlay-positioning"], ["required", "required"], ["scale", "scale"]]
+    "$attrsToReflect$": [["disabled", "disabled"], ["form", "form"], ["maxItems", "max-items"], ["mode", "mode"], ["name", "name"], ["open", "open"], ["overlayPositioning", "overlay-positioning"], ["required", "required"], ["scale", "scale"]]
   }; }
 }
 
@@ -30002,7 +30099,7 @@ function lastChild(el, selector) {
  */
 
 
-function index(el, selector) {
+function index$2(el, selector) {
   var index = 0;
 
   if (!el || !el.parentNode) {
@@ -30870,8 +30967,8 @@ Sortable.prototype =
     } // Get the index of the dragged element within its parent
 
 
-    oldIndex = index(target);
-    oldDraggableIndex = index(target, options.draggable); // Check filter
+    oldIndex = index$2(target);
+    oldDraggableIndex = index$2(target, options.draggable); // Check filter
 
     if (typeof filter === 'function') {
       if (filter.call(this, evt, target, this)) {
@@ -31450,8 +31547,8 @@ Sortable.prototype =
 
 
     function changed() {
-      newIndex = index(dragEl);
-      newDraggableIndex = index(dragEl, options.draggable);
+      newIndex = index$2(dragEl);
+      newDraggableIndex = index$2(dragEl, options.draggable);
 
       _dispatchEvent({
         sortable: _this,
@@ -31577,7 +31674,7 @@ Sortable.prototype =
 
         if (direction !== 0) {
           // Check if target is beside dragEl in respective direction (ignoring hidden elements)
-          var dragIndex = index(dragEl);
+          var dragIndex = index$2(dragEl);
 
           do {
             dragIndex -= direction;
@@ -31660,15 +31757,15 @@ Sortable.prototype =
     var el = this.el,
         options = this.options; // Get the index of the dragged element within its parent
 
-    newIndex = index(dragEl);
-    newDraggableIndex = index(dragEl, options.draggable);
+    newIndex = index$2(dragEl);
+    newDraggableIndex = index$2(dragEl, options.draggable);
     pluginEvent('drop', this, {
       evt: evt
     });
     parentEl = dragEl && dragEl.parentNode; // Get again after plugin event
 
-    newIndex = index(dragEl);
-    newDraggableIndex = index(dragEl, options.draggable);
+    newIndex = index$2(dragEl);
+    newDraggableIndex = index$2(dragEl, options.draggable);
 
     if (Sortable.eventCanceled) {
       this._nulling();
@@ -32132,7 +32229,7 @@ function _getSwapDirection(evt, target, targetRect, vertical, swapThreshold, inv
 
 
 function _getInsertDirection(target) {
-  if (index(dragEl) < index(target)) {
+  if (index$2(dragEl) < index$2(target)) {
     return 1;
   } else {
     return -1;
@@ -32200,7 +32297,7 @@ Sortable.utils = {
   closest: closest,
   toggleClass: toggleClass,
   clone: clone,
-  index: index,
+  index: index$2,
   nextTick: _nextTick,
   cancelNextTick: _cancelNextTick,
   detectDirection: _detectDirection,
@@ -48657,6 +48754,245 @@ var zhTw = /*#__PURE__*/Object.freeze({
   'default': locale
 });
 
+const supportedTimeZones = Intl.supportedValuesOf('timeZone');
+
+const now = new Date();
+const startDate = now.toISOString();
+const daysInYear = 365;
+const groupDateRange = daysInYear;
+const defaultGroupingOptions = {
+    startDate,
+    groupDateRange,
+    debug: false,
+};
+
+/* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-return */
+const continentAllowList = new Set([
+    'Europe',
+    'Asia',
+    'America',
+    'America/Argentina',
+    'Africa',
+    'Australia',
+    'Pacific',
+    'Atlantic',
+    'Antarctica',
+    'Arctic',
+    'Indian',
+]);
+const _getDates = (startDate, numberDays, dateEngine) => {
+    const dateArray = [];
+    let date = dateEngine.create(startDate);
+    for (let i = 0; i <= numberDays; i++) {
+        date = dateEngine.increase(date);
+        dateArray.push(dateEngine.formatToIsoDateString(date));
+    }
+    return dateArray;
+};
+const _extractContinent = (label) => {
+    if (label.includes('Istanbul')) {
+        return 'Europe';
+    }
+    const lastIndex = label.lastIndexOf('/');
+    return lastIndex === -1 ? label : label.slice(0, lastIndex);
+};
+const _isRegularContinent = (continent) => continentAllowList.has(continent);
+const generateTimeZoneMetadata = (timeZoneItems, startDate, numberDays, dateEngine, debug = false) => {
+    const processedDates = new Map();
+    if (debug) {
+        console.log(`Initializing data starting ${startDate} with ${numberDays} days in the future, comparing ${timeZoneItems.length} timezones`);
+    }
+    const theDates = _getDates(startDate, numberDays, dateEngine);
+    return timeZoneItems.map((tzItem) => {
+        const label = tzItem.label;
+        const continent = _extractContinent(label);
+        const dates = theDates.map((date) => {
+            const key = `${date}-${label}`;
+            let utc = processedDates.get(key);
+            if (utc) {
+                return utc;
+            }
+            utc = dateEngine.isoToTimeZone(date, label);
+            processedDates.set(key, utc);
+            return utc;
+        });
+        return {
+            ...tzItem,
+            continent,
+            isRegularContinent: _isRegularContinent(continent),
+            dates,
+        };
+    });
+};
+const compareDateArrs = (array1, array2, dateEngine) => array1.length === array2.length &&
+    array1.every((value, index) => dateEngine.same(value, array2[index]));
+const getGroupLabelTimeZoneIndices = (rawTZs, max = 5) => {
+    const shrinkedTzs = rawTZs.filter(({ label }) => _isRegularContinent(_extractContinent(label)));
+    rawTZs = shrinkedTzs.length === 0 ? [rawTZs[0]] : shrinkedTzs;
+    const uniqueLabels = [...new Set(rawTZs.map((_tz, index) => index))];
+    return equallyDistributedSampling(uniqueLabels, max);
+};
+function equallyDistributedSampling(items, maxItems = 5) {
+    const totalItems = items.length;
+    if (totalItems <= maxItems) {
+        return items;
+    }
+    const numberItemsToSelect = Math.min(totalItems - 2, maxItems - 2);
+    const stepSize = (totalItems - 1) / (numberItemsToSelect + 1);
+    return [
+        items[0],
+        ...Array.from({ length: numberItemsToSelect }, (_, i) => items[Math.round((i + 1) * stepSize)]),
+        items[totalItems - 1],
+    ];
+}
+
+async function groupTimeZones(options) {
+    const { debug, groupDateRange, hooks, startDate, dateEngine } = {
+        ...defaultGroupingOptions,
+        ...options,
+    };
+    const grouping = [];
+    if (!dateEngine) {
+        throw new Error('dateEngine is required');
+    }
+    const timeZoneItems = supportedTimeZones.map((tz) => ({ label: tz }));
+    hooks?.onBeforeTimeZoneMetadataCreate?.(timeZoneItems);
+    const timeZoneMetadata = generateTimeZoneMetadata(timeZoneItems, startDate, groupDateRange, dateEngine, debug);
+    hooks?.onTimeZoneMetadataCreate?.(timeZoneMetadata);
+    // We traverse the mappedDB and see if we find matches by comparing each set
+    // of transformed date for that specific TZ.
+    for (const tzMetadatumI of timeZoneMetadata) {
+        const { label, continent, dates } = tzMetadatumI;
+        // ignore if we visited this element already
+        if (tzMetadatumI.visited) {
+            continue;
+        }
+        // Mark element as already visited
+        tzMetadatumI.visited = true;
+        // The grouped timezone that we want as a result
+        const newGroup = {
+            labelTzIndices: undefined,
+            tzs: [{ label }],
+        };
+        hooks?.onGroupCreate?.(newGroup, tzMetadatumI);
+        for (const tzMetadatumJ of timeZoneMetadata.filter((_) => !_.visited)) {
+            const { label: labelJ, continent: continentJ, isRegularContinent: isRegularContinentJ, dates: datesJ, } = tzMetadatumJ;
+            // We define a matching TZ by:
+            // 1) if both continents match (avoid grouping Antarctica with anything else)
+            // 2) if the transformed dates match in both TZs
+            if ((continent === continentJ || !isRegularContinentJ) &&
+                compareDateArrs(dates, datesJ, dateEngine)) {
+                const tzItem = { label: labelJ };
+                newGroup.tzs.push(tzItem);
+                hooks?.onGroupTimeZoneAdd?.(newGroup, tzItem, tzMetadatumJ);
+                // Mark element as already visited
+                tzMetadatumJ.visited = true;
+            }
+        }
+        grouping.push(newGroup);
+        hooks?.onGroupAdd?.(newGroup);
+    }
+    // Now that we have a group, we want an easy way to find a fitting label for the group
+    // which is defined as the list of the most-common 7 cities, shown in alphabetical order
+    const finalGrouping = grouping
+        .map((group) => {
+        hooks?.onBeforeFinalGroupCreate?.(group);
+        const finalGrouping = {
+            labelTzIndices: getGroupLabelTimeZoneIndices(group.tzs, 7),
+            tzs: group.tzs.map((_) => _.label).sort(),
+        };
+        hooks?.onFinalGroupCreate?.(finalGrouping, group);
+        return finalGrouping;
+    })
+        .sort((a, b) => b.tzs.length - a.tzs.length);
+    if (debug) {
+        const missingTzs = supportedTimeZones
+            .map((tz) => (finalGrouping.some((y) => y.tzs.includes(tz)) ? null : tz))
+            .filter(Boolean);
+        if (missingTzs.length > 0) {
+            throw new Error(`There are ${missingTzs.length} missing timezones: ${missingTzs.toString()}`);
+        }
+    }
+    return hooks?.onFinalGroupingCreate
+        ? hooks.onFinalGroupingCreate(finalGrouping)
+        : finalGrouping;
+}
+
+var index$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  groupTimeZones: groupTimeZones
+});
+
+class NativeDateEngine {
+    _formatterCache = new Map();
+    _commonDateTimeFormatterOptions = {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        timeZoneName: 'shortOffset',
+    };
+    get name() {
+        return 'native';
+    }
+    create(date) {
+        return new Date(date);
+    }
+    increase(date) {
+        const oneDayInMs = 86400000;
+        return new Date(date.getTime() + oneDayInMs);
+    }
+    formatToIsoDateString(date) {
+        const year = date.getFullYear();
+        const month = date.getMonth() + 1;
+        const day = date.getDate();
+        return `${year}-${month.toString().padStart(2, '0')}-${day
+            .toString()
+            .padStart(2, '0')}`;
+    }
+    isoToTimeZone(isoDate, tz) {
+        const date = this._toDate(isoDate);
+        const formatter = this._getFormatter(tz);
+        const parts = formatter.formatToParts(date);
+        const [month, day, year, offset] = parts
+            .filter(({ type }) => type !== 'literal')
+            .map(({ value }) => value);
+        const tzOffset = this._getTimeZoneOffsetInMins(offset);
+        return new Date(Date.UTC(Number(year), Number(month) - 1, Number(day), 0, -tzOffset));
+    }
+    same(date1, date2) {
+        return date1.getTime() === date2.getTime();
+    }
+    _toDate(isoDate) {
+        const dateParts = isoDate.split('-');
+        const year = Number(dateParts[0]);
+        const month = Number(dateParts[1]) - 1;
+        const day = Number(dateParts[2]);
+        return new Date(year, month, day);
+    }
+    _getFormatter(tz) {
+        let formatter = this._formatterCache.get(tz);
+        if (!formatter) {
+            formatter = new Intl.DateTimeFormat('en-US', {
+                timeZone: tz,
+                ...this._commonDateTimeFormatterOptions,
+            });
+            this._formatterCache.set(tz, formatter);
+        }
+        return formatter;
+    }
+    _getTimeZoneOffsetInMins(gmtTimeZone) {
+        const [sign, ...hoursMinutes] = gmtTimeZone.slice(3);
+        const [hours, minutes] = hoursMinutes.join('').split(':');
+        const signMultiplier = sign === '+' ? 1 : -1;
+        return signMultiplier * (Number(hours) * 60 + Number(minutes || 0));
+    }
+}
+
+var index = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  DateEngine: NativeDateEngine
+});
+
 exports.hydrateApp = hydrateApp;