intergalactic 15.129.0 → 15.130.0

package/dropdown/lib/esm/AbstractDropdown.mjs

@@ -1,253 +1,360 @@
-import I from "@babel/runtime/helpers/esm/classCallCheck";
-import k from "@babel/runtime/helpers/esm/createClass";
-import u from "@babel/runtime/helpers/esm/assertThisInitialized";
-import x from "@babel/runtime/helpers/esm/inherits";
-import b from "@babel/runtime/helpers/esm/createSuper";
-import c from "@babel/runtime/helpers/esm/defineProperty";
-import f from "react";
-import { Component as y } from 'intergalactic/core';
-import R from 'intergalactic/utils/lib/uniqueID';
-import A from 'intergalactic/utils/lib/enhances/i18nEnhance';
-import { localizedMessages as w } from "./translations/__intergalactic-dynamic-locales.mjs";
-import { isFocusInside as p, setFocus as m } from 'intergalactic/utils/lib/use/useFocusLock';
-import T from 'intergalactic/utils/lib/enhances/focusSourceEnhance';
-import { getAccessibleName as _ } from 'intergalactic/utils/lib/getAccessibleName';
-var F = [R(), A(w), T()], G = /* @__PURE__ */ f.createContext(0), V = /* @__PURE__ */ function(P) {
-  x(g, P);
-  var v = b(g);
-  function g() {
-    var t;
-    I(this, g);
-    for (var e = arguments.length, i = new Array(e), r = 0; r < e; r++)
-      i[r] = arguments[r];
-    return t = v.call.apply(v, [this].concat(i)), c(u(t), "role", void 0), c(u(t), "popperRef", /* @__PURE__ */ f.createRef()), c(u(t), "triggerRef", /* @__PURE__ */ f.createRef()), c(u(t), "menuRef", /* @__PURE__ */ f.createRef()), c(u(t), "itemProps", []), c(u(t), "itemRefs", []), c(u(t), "highlightedItemRef", /* @__PURE__ */ f.createRef()), c(u(t), "prevHighlightedIndex", null), c(u(t), "handleClickTrigger", function(s) {
-      var o = t.asProps, n = o.interaction, l = o.inlineActions;
-      if (n === "none" || l) return !1;
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from "react";
+import { Component } from 'intergalactic/core';
+import uniqueIDEnhancement from 'intergalactic/utils/lib/uniqueID';
+import i18nEnhance from 'intergalactic/utils/lib/enhances/i18nEnhance';
+import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
+import { isFocusInside, setFocus } from 'intergalactic/utils/lib/use/useFocusLock';
+import focusSourceEnhance from 'intergalactic/utils/lib/enhances/focusSourceEnhance';
+import { getAccessibleName } from 'intergalactic/utils/lib/getAccessibleName';
+var enhance = [uniqueIDEnhancement(), i18nEnhance(localizedMessages), focusSourceEnhance()];
+var selectedIndexContext = /* @__PURE__ */ React.createContext(0);
+var AbstractDropdown = /* @__PURE__ */ function(_Component) {
+  _inherits(AbstractDropdown2, _Component);
+  var _super = _createSuper(AbstractDropdown2);
+  function AbstractDropdown2() {
+    var _this;
+    _classCallCheck(this, AbstractDropdown2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "role", void 0);
+    _defineProperty(_assertThisInitialized(_this), "popperRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "triggerRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "menuRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "itemProps", []);
+    _defineProperty(_assertThisInitialized(_this), "itemRefs", []);
+    _defineProperty(_assertThisInitialized(_this), "highlightedItemRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "prevHighlightedIndex", null);
+    _defineProperty(_assertThisInitialized(_this), "handleClickTrigger", function(e) {
+      var _this$asProps = _this.asProps, interaction = _this$asProps.interaction, inlineActions = _this$asProps.inlineActions;
+      if (interaction === "none" || inlineActions) return false;
       setTimeout(function() {
-        var a = t.asProps, h = a.visible, d = a.inlineActions;
-        (h || d) && t.afterOpenPopper();
+        var _this$asProps2 = _this.asProps, visible = _this$asProps2.visible, inlineActions2 = _this$asProps2.inlineActions;
+        if (visible || inlineActions2) {
+          _this.afterOpenPopper();
+        }
       }, 200);
-    }), c(u(t), "afterOpenPopper", function() {
-      var s, o = (s = t.asProps.highlightedIndex) !== null && s !== void 0 ? s : 0, n = t.itemRefs[o];
-      n == null || n.focus(), t.role === "menu" && t.handlers.highlightedIndex(o);
-    }), t;
+    });
+    _defineProperty(_assertThisInitialized(_this), "afterOpenPopper", function() {
+      var _this$asProps$highlig;
+      var highlightedIndex = (_this$asProps$highlig = _this.asProps.highlightedIndex) !== null && _this$asProps$highlig !== void 0 ? _this$asProps$highlig : 0;
+      var element = _this.itemRefs[highlightedIndex];
+      element === null || element === void 0 ? void 0 : element.focus();
+      if (_this.role === "menu") {
+        _this.handlers.highlightedIndex(highlightedIndex);
+      }
+    });
+    return _this;
   }
-  return k(g, [{
+  _createClass(AbstractDropdown2, [{
     key: "uncontrolledProps",
-    value: function() {
-      var e = this;
+    value: function uncontrolledProps() {
+      var _this2 = this;
       return {
         selectedIndex: null,
-        highlightedIndex: [null, function(i) {
-          e.handlers.selectedIndex(i);
+        highlightedIndex: [null, function(index) {
+          _this2.handlers.selectedIndex(index);
         }],
         visible: null
       };
     }
   }, {
     key: "childRole",
-    get: function() {
-      if (this.role === "listbox")
+    get: function get() {
+      if (this.role === "listbox") {
         return "option";
-      var e = this.asProps, i = e.selectable, r = e.multiselect;
-      return r ? "menuitemcheckbox" : i ? "menuitemradio" : "menuitem";
+      }
+      var _this$asProps3 = this.asProps, selectable = _this$asProps3.selectable, multiselect = _this$asProps3.multiselect;
+      if (multiselect) {
+        return "menuitemcheckbox";
+      }
+      if (selectable) {
+        return "menuitemradio";
+      }
+      return "menuitem";
     }
   }, {
     key: "getTriggerProps",
-    value: function() {
-      var e = this.asProps, i = e.size, r = e.uid, s = e.disablePortal, o = e.visible, n = e.getI18nText;
+    value: function getTriggerProps() {
+      var _this$asProps4 = this.asProps, size = _this$asProps4.size, uid = _this$asProps4.uid, disablePortal = _this$asProps4.disablePortal, visible = _this$asProps4.visible, getI18nText = _this$asProps4.getI18nText;
       return {
-        size: i,
-        id: "igc-".concat(r, "-trigger"),
-        focusHint: o && !s ? n("triggerHint") : void 0,
+        size,
+        id: "igc-".concat(uid, "-trigger"),
+        focusHint: visible && !disablePortal ? getI18nText("triggerHint") : void 0,
         "aria-haspopup": "true",
-        "aria-expanded": o ? "true" : "false",
+        "aria-expanded": visible ? "true" : "false",
         onClick: this.handleClickTrigger,
         ref: this.triggerRef
       };
     }
   }, {
     key: "getListProps",
-    value: function() {
+    value: function getListProps() {
       return this.getBasicListProps();
     }
   }, {
     key: "getMenuProps",
-    value: function() {
+    value: function getMenuProps() {
       return this.getBasicListProps();
     }
   }, {
     key: "getPopperProps",
-    value: function() {
-      var e = this.asProps, i = e.uid, r = e.disablePortal, s = e.ignorePortalsStacking, o = e.interaction, n = e.highlightedIndex;
+    value: function getPopperProps() {
+      var _this$asProps5 = this.asProps, uid = _this$asProps5.uid, disablePortal = _this$asProps5.disablePortal, ignorePortalsStacking = _this$asProps5.ignorePortalsStacking, interaction = _this$asProps5.interaction, highlightedIndex = _this$asProps5.highlightedIndex;
       return {
         ref: this.popperRef,
         tabIndex: -1,
-        id: "igc-".concat(i, "-popper"),
-        disablePortal: r,
-        ignorePortalsStacking: s,
-        focusMaster: o === "click",
-        hideFocus: n !== null,
-        "use:autoFocus": !1
+        id: "igc-".concat(uid, "-popper"),
+        disablePortal,
+        ignorePortalsStacking,
+        focusMaster: interaction === "click",
+        hideFocus: highlightedIndex !== null,
+        "use:autoFocus": false
       };
     }
   }, {
     key: "getGroupProps",
-    value: function() {
-      var e = this.asProps.size;
+    value: function getGroupProps() {
+      var size = this.asProps.size;
       return {
-        size: e
+        size
       };
     }
   }, {
     key: "getItemProps",
-    value: function(e, i) {
-      var r = this, s = this.asProps, o = s.size, n = s.uid, l = this.childRole;
+    value: function getItemProps(_, index) {
+      var _this3 = this;
+      var _this$asProps6 = this.asProps, size = _this$asProps6.size, uid = _this$asProps6.uid;
+      var role = this.childRole;
       return {
-        id: "igc-".concat(n, "-option-").concat(i),
-        size: o,
-        index: i,
-        onMouseEnter: function() {
-          r.handlers.selectedIndex(i);
+        id: "igc-".concat(uid, "-option-").concat(index),
+        size,
+        index,
+        onMouseEnter: function onMouseEnter() {
+          _this3.handlers.selectedIndex(index);
         },
-        role: l,
-        isMenuItemCheckbox: l === "menuitemcheckbox",
-        "aria-checked": l === "menuitemcheckbox" || l === "menuitemradio" ? !1 : void 0
+        role,
+        isMenuItemCheckbox: role === "menuitemcheckbox",
+        "aria-checked": role === "menuitemcheckbox" || role === "menuitemradio" ? false : void 0
       };
     }
   }, {
     key: "getItemHintProps",
-    value: function() {
-      var e = this.asProps.size;
+    value: function getItemHintProps() {
+      var size = this.asProps.size;
       return {
-        size: e
+        size
       };
     }
   }, {
     key: "getItemTitleProps",
-    value: function() {
-      var e = this.asProps.size;
+    value: function getItemTitleProps() {
+      var size = this.asProps.size;
       return {
-        size: e
+        size
       };
     }
   }, {
     key: "scrollToNode",
-    value: function(e) {
-      var i = this, r = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1;
-      e && (this.highlightedItemRef.current = e), setTimeout(function() {
-        e != null && e.scrollIntoView && i.asProps.highlightedIndex !== i.prevHighlightedIndex && (i.prevHighlightedIndex = i.asProps.highlightedIndex, e.scrollIntoView({
-          block: "nearest",
-          inline: "nearest",
-          behavior: r ? "smooth" : "instant"
-        }));
+    value: function scrollToNode(node) {
+      var _this4 = this;
+      var withAnimation = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
+      if (node) {
+        this.highlightedItemRef.current = node;
+      }
+      setTimeout(function() {
+        if (node !== null && node !== void 0 && node.scrollIntoView) {
+          if (_this4.asProps.highlightedIndex !== _this4.prevHighlightedIndex) {
+            _this4.prevHighlightedIndex = _this4.asProps.highlightedIndex;
+            node.scrollIntoView({
+              block: "nearest",
+              inline: "nearest",
+              behavior: withAnimation ? "smooth" : "instant"
+            });
+          }
+        }
       }, 0);
     }
   }, {
     key: "getHighlightedIndex",
-    value: function(e) {
-      var i, r = this.asProps, s = r.highlightedIndex, o = r.itemsCount, n = (o ?? this.itemProps.length) - 1, l = this.itemProps.findIndex(function(d) {
-        return d == null ? void 0 : d.selected;
+    value: function getHighlightedIndex(amount) {
+      var _this$itemProps$newIn;
+      var _this$asProps7 = this.asProps, highlightedIndex = _this$asProps7.highlightedIndex, itemsCount = _this$asProps7.itemsCount;
+      var itemsLastIndex = (itemsCount !== null && itemsCount !== void 0 ? itemsCount : this.itemProps.length) - 1;
+      var selectedIndex = this.itemProps.findIndex(function(item) {
+        return item === null || item === void 0 ? void 0 : item.selected;
       });
-      if (n < 0) return -1;
-      var a;
-      s == null ? l !== -1 ? a = l : this.highlightedItemRef.current && this.prevHighlightedIndex !== null ? a = this.prevHighlightedIndex > n ? n : this.prevHighlightedIndex : a = e < 0 ? 0 : n : a = s > n ? n : s;
-      var h = a + e;
-      return h < 0 ? h = e + n + 1 : h > n && (h = h - n - 1), (i = this.itemProps[h]) !== null && i !== void 0 && i.disabled ? this.getHighlightedIndex(e < 0 ? e - 1 : e + 1) : this.itemProps[h] ? h : -1;
+      if (itemsLastIndex < 0) return -1;
+      var innerHighlightedIndex;
+      if (highlightedIndex == null) {
+        if (selectedIndex !== -1) {
+          innerHighlightedIndex = selectedIndex;
+        } else if (this.highlightedItemRef.current && this.prevHighlightedIndex !== null) {
+          innerHighlightedIndex = this.prevHighlightedIndex > itemsLastIndex ? itemsLastIndex : this.prevHighlightedIndex;
+        } else {
+          innerHighlightedIndex = amount < 0 ? 0 : itemsLastIndex;
+        }
+      } else {
+        innerHighlightedIndex = highlightedIndex > itemsLastIndex ? itemsLastIndex : highlightedIndex;
+      }
+      var newIndex = innerHighlightedIndex + amount;
+      if (newIndex < 0) {
+        newIndex = amount + itemsLastIndex + 1;
+      } else if (newIndex > itemsLastIndex) {
+        newIndex = newIndex - itemsLastIndex - 1;
+      }
+      if ((_this$itemProps$newIn = this.itemProps[newIndex]) !== null && _this$itemProps$newIn !== void 0 && _this$itemProps$newIn.disabled) {
+        return this.getHighlightedIndex(amount < 0 ? amount - 1 : amount + 1);
+      } else if (!this.itemProps[newIndex]) {
+        return -1;
+      } else {
+        return newIndex;
+      }
     }
   }, {
     key: "componentDidUpdate",
-    value: function(e) {
-      var i = this.asProps, r = i.visible, s = i.focusSourceRef, o = r !== e.visible;
-      o && !r && e.visible !== void 0 && (this.handlers.highlightedIndex(null), this.prevHighlightedIndex = null, this.highlightedItemRef.current = null, this.popperRef.current && this.triggerRef.current && (document.activeElement === document.body || p(this.popperRef.current)) && s.current === "keyboard" && m(this.triggerRef.current));
+    value: function componentDidUpdate(prevProps) {
+      var _this$asProps8 = this.asProps, visible = _this$asProps8.visible, focusSourceRef = _this$asProps8.focusSourceRef;
+      var visibilityChanged = visible !== prevProps.visible;
+      if (visibilityChanged && !visible && prevProps.visible !== void 0) {
+        this.handlers.highlightedIndex(null);
+        this.prevHighlightedIndex = null;
+        this.highlightedItemRef.current = null;
+        if (this.popperRef.current && this.triggerRef.current && (document.activeElement === document.body || isFocusInside(this.popperRef.current)) && focusSourceRef.current === "keyboard") {
+          setFocus(this.triggerRef.current);
+        }
+      }
     }
   }, {
     key: "itemRef",
-    value: function(e, i, r) {
-      var s;
-      r != null && (s = r.getAttribute("role")) !== null && s !== void 0 && s.startsWith(this.childRole) && (this.itemRefs[i] = r, this.itemProps[i] = e);
+    value: function itemRef(props, index, node) {
+      var _node$getAttribute;
+      if (node !== null && node !== void 0 && (_node$getAttribute = node.getAttribute("role")) !== null && _node$getAttribute !== void 0 && _node$getAttribute.startsWith(this.childRole)) {
+        this.itemRefs[index] = node;
+        this.itemProps[index] = props;
+      }
     }
   }, {
     key: "handlePreventCommonKeyDown",
-    value: function(e) {
+    value: function handlePreventCommonKeyDown(e) {
       if (e.target instanceof Element) {
-        var i = e.target.tagName;
-        if (e.key === " " && ["INPUT", "TEXTAREA"].includes(i) || e.key === "Enter" && i === "TEXTAREA") return !1;
+        var targetTagName = e.target.tagName;
+        if (e.key === " " && ["INPUT", "TEXTAREA"].includes(targetTagName)) return false;
+        if (e.key === "Enter" && targetTagName === "TEXTAREA") return false;
       }
     }
   }, {
     key: "handlePreventPopperKeyDown",
-    value: function(e) {
+    value: function handlePreventPopperKeyDown(e) {
       if (e.target instanceof Element) {
-        var i = e.target.tagName;
-        if ((e.key === " " || e.key === "Enter") && (i === "BUTTON" || i === "A")) return !1;
+        var targetTagName = e.target.tagName;
+        if ((e.key === " " || e.key === "Enter") && (targetTagName === "BUTTON" || targetTagName === "A")) return false;
       }
     }
   }, {
     key: "handleOpenKeyDown",
-    value: function(e) {
-      var i;
-      this.asProps.visible !== !0 && ["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key) && !((i = e.currentTarget.getAttribute("role")) !== null && i !== void 0 && i.startsWith(this.childRole)) && (["ArrowDown", "ArrowUp"].includes(e.key) && this.handlers.visible(!0), this.handleClickTrigger(e));
+    value: function handleOpenKeyDown(e) {
+      var _e$currentTarget$getA;
+      if (this.asProps.visible !== true && ["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key) && !((_e$currentTarget$getA = e.currentTarget.getAttribute("role")) !== null && _e$currentTarget$getA !== void 0 && _e$currentTarget$getA.startsWith(this.childRole))) {
+        if (["ArrowDown", "ArrowUp"].includes(e.key)) {
+          this.handlers.visible(true);
+        }
+        this.handleClickTrigger(e);
+      }
     }
   }, {
     key: "handleArrowKeyDown",
-    value: function(e) {
-      var i = e.shiftKey ? 5 : 1, r = this.asProps, s = r.highlightedIndex, o = r.inlineActions, n = null;
+    value: function handleArrowKeyDown(e) {
+      var amountCount = e.shiftKey ? 5 : 1;
+      var _this$asProps9 = this.asProps, highlightedIndex = _this$asProps9.highlightedIndex, inlineActions = _this$asProps9.inlineActions;
+      var amount = null;
       switch (e.key) {
         case "ArrowDown": {
-          o || (n = i);
+          if (!inlineActions) {
+            amount = amountCount;
+          }
           break;
         }
         case "ArrowUp": {
-          o || (n = -i);
+          if (!inlineActions) {
+            amount = -amountCount;
+          }
           break;
         }
         case "ArrowRight": {
-          o && (n = i);
+          if (inlineActions) {
+            amount = amountCount;
+          }
           break;
         }
         case "ArrowLeft": {
-          o && (n = -i);
+          if (inlineActions) {
+            amount = -amountCount;
+          }
           break;
         }
         case " ":
         case "Enter":
-          this.highlightedItemRef.current && s !== null && !this.itemProps[s].disabled && (e.stopPropagation(), e.preventDefault(), this.highlightedItemRef.current.click());
+          if (this.highlightedItemRef.current && highlightedIndex !== null && !this.itemProps[highlightedIndex].disabled) {
+            e.stopPropagation();
+            e.preventDefault();
+            this.highlightedItemRef.current.click();
+          }
           break;
       }
-      if (n !== null) {
-        var l = this.getHighlightedIndex(n);
-        if (this.role === "listbox" && this.triggerRef.current && !p(this.triggerRef.current) && this.focusTrigger(), l !== -1 && (this.handlers.highlightedIndex(l, e), this.role === "menu")) {
-          var a;
-          (a = this.itemRefs[l]) === null || a === void 0 || a.focus();
+      if (amount !== null) {
+        var newHighlightedIndex = this.getHighlightedIndex(amount);
+        if (this.role === "listbox" && this.triggerRef.current && !isFocusInside(this.triggerRef.current)) {
+          this.focusTrigger();
+        }
+        if (newHighlightedIndex !== -1) {
+          this.handlers.highlightedIndex(newHighlightedIndex, e);
+          if (this.role === "menu") {
+            var _this$itemRefs$newHig;
+            (_this$itemRefs$newHig = this.itemRefs[newHighlightedIndex]) === null || _this$itemRefs$newHig === void 0 ? void 0 : _this$itemRefs$newHig.focus();
+          }
         }
-        e.preventDefault(), e.stopPropagation();
+        e.preventDefault();
+        e.stopPropagation();
       }
     }
   }, {
     key: "focusTrigger",
-    value: function() {
-      var e = this.triggerRef.current;
-      e && (p(e) || m(e));
+    value: function focusTrigger() {
+      var trigger = this.triggerRef.current;
+      if (!trigger) return;
+      if (isFocusInside(trigger)) return;
+      setFocus(trigger);
     }
   }, {
     key: "getBasicListProps",
-    value: function() {
-      var e, i = this.asProps, r = i.size, s = i.uid, o = (e = this.triggerRef.current) === null || e === void 0 ? void 0 : e.id, n = o ? document.getElementById(o) : null;
+    value: function getBasicListProps() {
+      var _this$triggerRef$curr;
+      var _this$asProps10 = this.asProps, size = _this$asProps10.size, uid = _this$asProps10.uid;
+      var triggerId = (_this$triggerRef$curr = this.triggerRef.current) === null || _this$triggerRef$curr === void 0 ? void 0 : _this$triggerRef$curr.id;
+      var triggerElement = triggerId ? document.getElementById(triggerId) : null;
       return {
-        size: r,
+        size,
         index: this.asProps.highlightedIndex,
         tabIndex: -1,
         ref: this.menuRef,
-        id: "igc-".concat(s, "-list"),
+        id: "igc-".concat(uid, "-list"),
         role: this.role,
-        "aria-label": _(n)
+        "aria-label": getAccessibleName(triggerElement)
       };
     }
-  }]), g;
-}(y);
+  }]);
+  return AbstractDropdown2;
+}(Component);
 export {
-  V as AbstractDropdown,
-  F as enhance,
-  G as selectedIndexContext
+  AbstractDropdown,
+  enhance,
+  selectedIndexContext
 };