@acusti/dropdown 0.50.1 → 0.51.0

package/dist/Dropdown.js

@@ -128,9 +128,11 @@ const clearItemElementsState = (itemElements) => {
 const setActiveItem = ({
   dropdownElement,
   element,
+  event,
   index,
   indexAddend,
   isExactMatch,
+  onActiveItem,
   text
 }) => {
   const items = getItemElements(dropdownElement);
@@ -151,11 +153,7 @@ const setActiveItem = ({
     } else {
       nextActiveIndex += indexAddend;
     }
-    if (nextActiveIndex < 0) {
-      nextActiveIndex = 0;
-    } else if (nextActiveIndex > lastIndex) {
-      nextActiveIndex = lastIndex;
-    }
+    nextActiveIndex = Math.max(0, Math.min(nextActiveIndex, lastIndex));
   } else if (typeof text === "string") {
     if (!text) {
       clearItemElementsState(itemElements);
@@ -176,46 +174,52 @@ const setActiveItem = ({
       nextActiveIndex = itemTexts.findIndex((itemText) => itemText === bestMatch);
     }
   }
-  if (nextActiveIndex === -1 || nextActiveIndex === currentActiveIndex) return;
-  clearItemElementsState(itemElements);
   const nextActiveItem = items[nextActiveIndex];
-  if (nextActiveItem != null) {
-    nextActiveItem.setAttribute("data-ukt-active", "");
-    let {
-      parentElement
-    } = nextActiveItem;
-    let scrollableParent = null;
-    while (!scrollableParent && parentElement && parentElement !== dropdownElement) {
-      const isScrollable = parentElement.scrollHeight > parentElement.clientHeight + 15;
-      if (isScrollable) {
-        scrollableParent = parentElement;
-      } else {
-        parentElement = parentElement.parentElement;
-      }
+  if (nextActiveItem == null || nextActiveIndex === currentActiveIndex) return;
+  clearItemElementsState(itemElements);
+  nextActiveItem.setAttribute("data-ukt-active", "");
+  const label = nextActiveItem.innerText;
+  const value = nextActiveItem.dataset.uktValue ?? label;
+  onActiveItem?.({
+    element: nextActiveItem,
+    event,
+    label,
+    value
+  });
+  let {
+    parentElement
+  } = nextActiveItem;
+  let scrollableParent = null;
+  while (!scrollableParent && parentElement && parentElement !== dropdownElement) {
+    const isScrollable = parentElement.scrollHeight > parentElement.clientHeight + 15;
+    if (isScrollable) {
+      scrollableParent = parentElement;
+    } else {
+      parentElement = parentElement.parentElement;
     }
-    if (scrollableParent) {
-      const parentRect = scrollableParent.getBoundingClientRect();
-      const itemRect = nextActiveItem.getBoundingClientRect();
-      const isAboveTop = itemRect.top < parentRect.top;
-      const isBelowBottom = itemRect.bottom > parentRect.bottom;
-      if (isAboveTop || isBelowBottom) {
-        let {
-          scrollTop
-        } = scrollableParent;
-        if (isAboveTop) {
-          scrollTop -= parentRect.top - itemRect.top;
-        } else {
-          scrollTop += itemRect.bottom - parentRect.bottom;
-        }
-        scrollableParent.scrollTop = scrollTop;
+  }
+  if (scrollableParent) {
+    const parentRect = scrollableParent.getBoundingClientRect();
+    const itemRect = nextActiveItem.getBoundingClientRect();
+    const isAboveTop = itemRect.top < parentRect.top;
+    const isBelowBottom = itemRect.bottom > parentRect.bottom;
+    if (isAboveTop || isBelowBottom) {
+      let {
+        scrollTop
+      } = scrollableParent;
+      if (isAboveTop) {
+        scrollTop -= parentRect.top - itemRect.top;
+      } else {
+        scrollTop += itemRect.bottom - parentRect.bottom;
       }
+      scrollableParent.scrollTop = scrollTop;
     }
   }
 };
 const CHILDREN_ERROR = "@acusti/dropdown requires either 1 child (the dropdown body) or 2 children: the dropdown trigger and the dropdown body.";
 const TEXT_INPUT_SELECTOR = "input:not([type=radio]):not([type=checkbox]):not([type=range]),textarea";
 function Dropdown(t0) {
-  const $ = c(99);
+  const $ = c(102);
   const {
     allowCreate,
     allowEmpty: t1,
@@ -230,6 +234,7 @@ function Dropdown(t0) {
     minHeightBody: t4,
     minWidthBody: t5,
     name,
+    onActiveItem,
     onClick,
     onClose,
     onMouseDown,
@@ -428,7 +433,7 @@ function Dropdown(t0) {
   }
   const handleMouseMove = t12;
   let t13;
-  if ($[19] !== dropdownElement) {
+  if ($[19] !== dropdownElement || $[20] !== onActiveItem) {
     t13 = (event_0) => {
       if (!hasItemsRef.current) {
         return;
@@ -450,20 +455,23 @@ function Dropdown(t0) {
         if (itemElement === element_0) {
           setActiveItem({
             dropdownElement,
-            element: element_0
+            element: element_0,
+            event: event_0,
+            onActiveItem
           });
           return;
         }
       }
     };
     $[19] = dropdownElement;
-    $[20] = t13;
+    $[20] = onActiveItem;
+    $[21] = t13;
   } else {
-    t13 = $[20];
+    t13 = $[21];
   }
   const handleMouseOver = t13;
   let t14;
-  if ($[21] !== dropdownElement) {
+  if ($[22] !== dropdownElement) {
     t14 = (event_1) => {
       if (!hasItemsRef.current) {
         return;
@@ -478,14 +486,14 @@ function Dropdown(t0) {
       }
       delete activeItem.dataset.uktActive;
     };
-    $[21] = dropdownElement;
-    $[22] = t14;
+    $[22] = dropdownElement;
+    $[23] = t14;
   } else {
-    t14 = $[22];
+    t14 = $[23];
   }
   const handleMouseOut = t14;
   let t15;
-  if ($[23] !== onMouseDown) {
+  if ($[24] !== onMouseDown) {
     t15 = (event_2) => {
       if (onMouseDown) {
         onMouseDown(event_2);
@@ -504,14 +512,14 @@ function Dropdown(t0) {
         isOpeningTimerRef.current = null;
       }, 1e3);
     };
-    $[23] = onMouseDown;
-    $[24] = t15;
+    $[24] = onMouseDown;
+    $[25] = t15;
   } else {
-    t15 = $[24];
+    t15 = $[25];
   }
   const handleMouseDown = t15;
   let t16;
-  if ($[25] !== handleSubmitItem || $[26] !== onMouseUp) {
+  if ($[26] !== handleSubmitItem || $[27] !== onMouseUp) {
     t16 = (event_3) => {
       if (onMouseUp) {
         onMouseUp(event_3);
@@ -531,15 +539,15 @@ function Dropdown(t0) {
       }
       handleSubmitItem(event_3);
     };
-    $[25] = handleSubmitItem;
-    $[26] = onMouseUp;
-    $[27] = t16;
+    $[26] = handleSubmitItem;
+    $[27] = onMouseUp;
+    $[28] = t16;
   } else {
-    t16 = $[27];
+    t16 = $[28];
   }
   const handleMouseUp = t16;
   let t17;
-  if ($[28] !== dropdownElement || $[29] !== handleSubmitItem) {
+  if ($[29] !== dropdownElement || $[30] !== handleSubmitItem || $[31] !== onActiveItem) {
     t17 = (event_4) => {
       const {
         altKey,
@@ -582,7 +590,9 @@ function Dropdown(t0) {
           }
           setActiveItem({
             dropdownElement,
+            event: event_4,
             isExactMatch: allowCreateRef.current,
+            onActiveItem,
             text: enteredCharactersRef.current
           });
           if (clearEnteredCharactersTimerRef.current) {
@@ -612,12 +622,16 @@ function Dropdown(t0) {
           if (altKey || metaKey) {
             setActiveItem({
               dropdownElement,
-              index: 0
+              event: event_4,
+              index: 0,
+              onActiveItem
             });
           } else {
             setActiveItem({
               dropdownElement,
-              indexAddend: -1
+              event: event_4,
+              indexAddend: -1,
+              onActiveItem
             });
           }
           return;
@@ -627,39 +641,44 @@ function Dropdown(t0) {
           if (altKey || metaKey) {
             setActiveItem({
               dropdownElement,
-              index: -1
+              event: event_4,
+              index: -1,
+              onActiveItem
             });
           } else {
             setActiveItem({
               dropdownElement,
-              indexAddend: 1
+              event: event_4,
+              indexAddend: 1,
+              onActiveItem
             });
           }
           return;
         }
       }
     };
-    $[28] = dropdownElement;
-    $[29] = handleSubmitItem;
-    $[30] = t17;
+    $[29] = dropdownElement;
+    $[30] = handleSubmitItem;
+    $[31] = onActiveItem;
+    $[32] = t17;
   } else {
-    t17 = $[30];
+    t17 = $[32];
   }
   const handleKeyDown = t17;
   let t18;
-  if ($[31] !== handleKeyDown) {
+  if ($[33] !== handleKeyDown) {
     t18 = {
       ignoreUsedKeyboardEvents: false,
       onKeyDown: handleKeyDown
     };
-    $[31] = handleKeyDown;
-    $[32] = t18;
+    $[33] = handleKeyDown;
+    $[34] = t18;
   } else {
-    t18 = $[32];
+    t18 = $[34];
   }
   useKeyboardEvents(t18);
   let t19;
-  if ($[33] !== isOpenOnMount) {
+  if ($[35] !== isOpenOnMount || $[36] !== onActiveItem) {
     t19 = (ref) => {
       setDropdownElement(ref);
       if (!ref) {
@@ -742,7 +761,9 @@ function Dropdown(t0) {
         }
         setActiveItem({
           dropdownElement: ref,
+          event: event_5,
           isExactMatch: allowCreateRef.current,
+          onActiveItem,
           text: enteredCharactersRef.current
         });
       };
@@ -763,79 +784,80 @@ function Dropdown(t0) {
         }
       };
     };
-    $[33] = isOpenOnMount;
-    $[34] = t19;
+    $[35] = isOpenOnMount;
+    $[36] = onActiveItem;
+    $[37] = t19;
   } else {
-    t19 = $[34];
+    t19 = $[37];
   }
   const handleRef = t19;
   if (!isValidElement(trigger)) {
     if (isSearchable) {
       const t202 = value ?? "";
       let t212;
-      if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+      if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
         t212 = () => setIsOpen(true);
-        $[35] = t212;
+        $[38] = t212;
       } else {
-        t212 = $[35];
+        t212 = $[38];
       }
       let t222;
-      if ($[36] !== disabled || $[37] !== name || $[38] !== placeholder || $[39] !== t202 || $[40] !== tabIndex) {
+      if ($[39] !== disabled || $[40] !== name || $[41] !== placeholder || $[42] !== t202 || $[43] !== tabIndex) {
         t222 = /* @__PURE__ */ jsx("input", { autoComplete: "off", className: TRIGGER_CLASS_NAME, defaultValue: t202, disabled, name, onFocus: t212, placeholder, ref: inputElementRef, tabIndex, type: "text" });
-        $[36] = disabled;
-        $[37] = name;
-        $[38] = placeholder;
-        $[39] = t202;
-        $[40] = tabIndex;
-        $[41] = t222;
+        $[39] = disabled;
+        $[40] = name;
+        $[41] = placeholder;
+        $[42] = t202;
+        $[43] = tabIndex;
+        $[44] = t222;
       } else {
-        t222 = $[41];
+        t222 = $[44];
       }
       trigger = t222;
     } else {
       let t202;
-      if ($[42] !== trigger) {
-        t202 = /* @__PURE__ */ jsx("button", { className: TRIGGER_CLASS_NAME, tabIndex: 0, children: trigger });
-        $[42] = trigger;
-        $[43] = t202;
+      if ($[45] !== trigger) {
+        t202 = /* @__PURE__ */ jsx("button", { className: TRIGGER_CLASS_NAME, tabIndex: 0, type: "button", children: trigger });
+        $[45] = trigger;
+        $[46] = t202;
       } else {
-        t202 = $[43];
+        t202 = $[46];
       }
       trigger = t202;
     }
   }
   if (label) {
     let t202;
-    if ($[44] !== label) {
+    if ($[47] !== label) {
       t202 = /* @__PURE__ */ jsx("div", { className: LABEL_TEXT_CLASS_NAME, children: label });
-      $[44] = label;
-      $[45] = t202;
+      $[47] = label;
+      $[48] = t202;
     } else {
-      t202 = $[45];
+      t202 = $[48];
     }
     let t212;
-    if ($[46] !== t202 || $[47] !== trigger) {
+    if ($[49] !== t202 || $[50] !== trigger) {
       t212 = /* @__PURE__ */ jsxs("label", { className: LABEL_CLASS_NAME, children: [
         t202,
         trigger
       ] });
-      $[46] = t202;
-      $[47] = trigger;
-      $[48] = t212;
+      $[49] = t202;
+      $[50] = trigger;
+      $[51] = t212;
     } else {
-      t212 = $[48];
+      t212 = $[51];
     }
     trigger = t212;
   }
   const dropdownRect = useBoundingClientRect(dropdownElement);
   const dropdownBodyRect = useBoundingClientRect(dropdownBodyElement);
   let t20;
-  if ($[49] !== dropdownBodyElement) {
+  if ($[52] !== dropdownBodyElement) {
     t20 = getBoundingAncestor(dropdownBodyElement);
-    $[49] = dropdownBodyElement;
-    $[50] = t20;
+    $[52] = dropdownBodyElement;
+    $[53] = t20;
   } else {
-    t20 = $[50];
+    t20 = $[53];
   }
   const boundingElement = t20;
   const boundingElementRect = useBoundingClientRect(boundingElement);
@@ -845,67 +867,67 @@ function Dropdown(t0) {
     const maxHeightUp = dropdownBodyRect.bottom - boundingElementRect.top;
     const maxHeightDown = boundingElementRect.bottom - dropdownBodyRect.top;
     let t212;
-    if ($[51] !== dropdownBodyRect.top || $[52] !== dropdownRect.top || $[53] !== maxHeightDown || $[54] !== maxHeightUp) {
+    if ($[54] !== dropdownBodyRect.top || $[55] !== dropdownRect.top || $[56] !== maxHeightDown || $[57] !== maxHeightUp) {
       t212 = Math.round(dropdownBodyRect.top > dropdownRect.top ? maxHeightDown : maxHeightUp);
-      $[51] = dropdownBodyRect.top;
-      $[52] = dropdownRect.top;
-      $[53] = maxHeightDown;
-      $[54] = maxHeightUp;
-      $[55] = t212;
+      $[54] = dropdownBodyRect.top;
+      $[55] = dropdownRect.top;
+      $[56] = maxHeightDown;
+      $[57] = maxHeightUp;
+      $[58] = t212;
     } else {
-      t212 = $[55];
+      t212 = $[58];
     }
     maxHeight = t212;
     const maxWidthLeft = dropdownBodyRect.right - boundingElementRect.left;
     const maxWidthRight = boundingElementRect.right - dropdownBodyRect.left;
     let t222;
-    if ($[56] !== dropdownBodyRect.left || $[57] !== dropdownRect.left || $[58] !== maxWidthLeft || $[59] !== maxWidthRight) {
+    if ($[59] !== dropdownBodyRect.left || $[60] !== dropdownRect.left || $[61] !== maxWidthLeft || $[62] !== maxWidthRight) {
       t222 = Math.round(dropdownBodyRect.left > dropdownRect.left ? maxWidthRight : maxWidthLeft);
-      $[56] = dropdownBodyRect.left;
-      $[57] = dropdownRect.left;
-      $[58] = maxWidthLeft;
-      $[59] = maxWidthRight;
-      $[60] = t222;
+      $[59] = dropdownBodyRect.left;
+      $[60] = dropdownRect.left;
+      $[61] = maxWidthLeft;
+      $[62] = maxWidthRight;
+      $[63] = t222;
     } else {
-      t222 = $[60];
+      t222 = $[63];
     }
     maxWidth = t222;
   }
   let t21;
-  if ($[61] !== maxHeight || $[62] !== minHeightBody) {
+  if ($[64] !== maxHeight || $[65] !== minHeightBody) {
     t21 = maxHeight != null && maxHeight > minHeightBody ? {
       [BODY_MAX_HEIGHT_VAR]: `calc(${maxHeight}px - var(--uktdd-body-buffer))`
     } : null;
-    $[61] = maxHeight;
-    $[62] = minHeightBody;
-    $[63] = t21;
+    $[64] = maxHeight;
+    $[65] = minHeightBody;
+    $[66] = t21;
   } else {
-    t21 = $[63];
+    t21 = $[66];
   }
   let t22;
-  if ($[64] !== maxWidth || $[65] !== minWidthBody) {
+  if ($[67] !== maxWidth || $[68] !== minWidthBody) {
     t22 = maxWidth != null && maxWidth > minWidthBody ? {
       [BODY_MAX_WIDTH_VAR]: `calc(${maxWidth}px - var(--uktdd-body-buffer))`
     } : null;
-    $[64] = maxWidth;
-    $[65] = minWidthBody;
-    $[66] = t22;
+    $[67] = maxWidth;
+    $[68] = minWidthBody;
+    $[69] = t22;
   } else {
-    t22 = $[66];
+    t22 = $[69];
   }
   let t23;
-  if ($[67] !== styleFromProps || $[68] !== t21 || $[69] !== t22) {
+  if ($[70] !== styleFromProps || $[71] !== t21 || $[72] !== t22) {
     t23 = {
       ...styleFromProps,
       ...t21,
       ...t22
     };
-    $[67] = styleFromProps;
-    $[68] = t21;
-    $[69] = t22;
-    $[70] = t23;
+    $[70] = styleFromProps;
+    $[71] = t21;
+    $[72] = t22;
+    $[73] = t23;
   } else {
-    t23 = $[70];
+    t23 = $[73];
   }
   const style = t23;
   const anchorStyles = `[data-ukt-id="${id}"] > :first-child {
@@ -915,80 +937,80 @@ function Dropdown(t0) {
   position-anchor: --uktdd-anchor${id};
 }`;
   let t24;
-  if ($[71] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[74] === Symbol.for("react.memo_cache_sentinel")) {
     t24 = /* @__PURE__ */ jsx(Style, { href: "@acusti/dropdown/Dropdown", children: STYLES });
-    $[71] = t24;
+    $[74] = t24;
   } else {
-    t24 = $[71];
+    t24 = $[74];
   }
   const t25 = `@acusti/dropdown/Dropdown/${id}`;
   let t26;
-  if ($[72] !== anchorStyles || $[73] !== t25) {
+  if ($[75] !== anchorStyles || $[76] !== t25) {
     t26 = /* @__PURE__ */ jsx(Style, { href: t25, children: anchorStyles });
-    $[72] = anchorStyles;
-    $[73] = t25;
-    $[74] = t26;
+    $[75] = anchorStyles;
+    $[76] = t25;
+    $[77] = t26;
   } else {
-    t26 = $[74];
+    t26 = $[77];
   }
   let t27;
-  if ($[75] !== className || $[76] !== disabled || $[77] !== isOpen || $[78] !== isSearchable) {
+  if ($[78] !== className || $[79] !== disabled || $[80] !== isOpen || $[81] !== isSearchable) {
     t27 = clsx(ROOT_CLASS_NAME, className, {
       disabled,
       "is-open": isOpen,
       "is-searchable": isSearchable
     });
-    $[75] = className;
-    $[76] = disabled;
-    $[77] = isOpen;
-    $[78] = isSearchable;
-    $[79] = t27;
+    $[78] = className;
+    $[79] = disabled;
+    $[80] = isOpen;
+    $[81] = isSearchable;
+    $[82] = t27;
   } else {
-    t27 = $[79];
+    t27 = $[82];
   }
   let t28;
-  if ($[80] !== children || $[81] !== childrenCount || $[82] !== isOpen) {
+  if ($[83] !== children || $[84] !== childrenCount || $[85] !== isOpen) {
     t28 = isOpen ? /* @__PURE__ */ jsx("div", { className: BODY_CLASS_NAME, ref: setDropdownBodyElement, children: childrenCount > 1 ? children[1] : children }) : null;
-    $[80] = children;
-    $[81] = childrenCount;
-    $[82] = isOpen;
-    $[83] = t28;
+    $[83] = children;
+    $[84] = childrenCount;
+    $[85] = isOpen;
+    $[86] = t28;
   } else {
-    t28 = $[83];
+    t28 = $[86];
   }
   let t29;
-  if ($[84] !== handleMouseDown || $[85] !== handleMouseOut || $[86] !== handleMouseOver || $[87] !== handleMouseUp || $[88] !== handleRef || $[89] !== id || $[90] !== onClick || $[91] !== style || $[92] !== t27 || $[93] !== t28 || $[94] !== trigger) {
+  if ($[87] !== handleMouseDown || $[88] !== handleMouseOut || $[89] !== handleMouseOver || $[90] !== handleMouseUp || $[91] !== handleRef || $[92] !== id || $[93] !== onClick || $[94] !== style || $[95] !== t27 || $[96] !== t28 || $[97] !== trigger) {
     t29 = /* @__PURE__ */ jsxs("div", { className: t27, "data-ukt-id": id, onClick, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseOut: handleMouseOut, onMouseOver: handleMouseOver, onMouseUp: handleMouseUp, ref: handleRef, style, children: [
       trigger,
       t28
     ] });
-    $[84] = handleMouseDown;
-    $[85] = handleMouseOut;
-    $[86] = handleMouseOver;
-    $[87] = handleMouseUp;
-    $[88] = handleRef;
-    $[89] = id;
-    $[90] = onClick;
-    $[91] = style;
-    $[92] = t27;
-    $[93] = t28;
-    $[94] = trigger;
-    $[95] = t29;
+    $[87] = handleMouseDown;
+    $[88] = handleMouseOut;
+    $[89] = handleMouseOver;
+    $[90] = handleMouseUp;
+    $[91] = handleRef;
+    $[92] = id;
+    $[93] = onClick;
+    $[94] = style;
+    $[95] = t27;
+    $[96] = t28;
+    $[97] = trigger;
+    $[98] = t29;
   } else {
-    t29 = $[95];
+    t29 = $[98];
   }
   let t30;
-  if ($[96] !== t26 || $[97] !== t29) {
+  if ($[99] !== t26 || $[100] !== t29) {
     t30 = /* @__PURE__ */ jsxs(Fragment, { children: [
       t24,
       t26,
       t29
     ] });
-    $[96] = t26;
-    $[97] = t29;
-    $[98] = t30;
+    $[99] = t26;
+    $[100] = t29;
+    $[101] = t30;
   } else {
-    t30 = $[98];
+    t30 = $[101];
   }
   return t30;
 }