@codbex/harmonia 0.9.0 → 0.9.1

package/dist/harmonia.js

@@ -2181,7 +2181,7 @@
       el.classList.add("border", "rounded-control", "gap-2", "p-2");
       el.setAttribute("tabindex", "-1");
       if (datepicker) {
-        el.classList.add("fixed", "bg-popover", "text-popover-foreground", "data-[state=open]:flex", "data-[state=open]:flex-col", "data-[state=closed]:hidden", "z-50", "shadow-md");
+        el.classList.add("absolute", "bg-popover", "text-popover-foreground", "data-[state=open]:flex", "data-[state=open]:flex-col", "data-[state=closed]:hidden", "z-50", "shadow-md");
         el.setAttribute("role", "dialog");
         el.setAttribute("aria-modal", "true");
         el.setAttribute("data-slot", "date-picker-calendar");
@@ -2611,7 +2611,6 @@
       function updatePosition() {
         computePosition2(datepicker, el, {
           placement: el.getAttribute("data-align") || "bottom-start",
-          strategy: "fixed",
           middleware: [offset2(4), flip2(), shift2({ padding: 4 })]
         }).then(({ x, y }) => {
           Object.assign(el.style, {
@@ -2836,7 +2835,19 @@
         "dark:has-[input:invalid]:ring-negative/40"
       );
       el.setAttribute("data-slot", "date-picker");
-      el._h_datepicker.input.classList.add("bg-transparent", "outline-none", "flex-1", "border-0", "focus-visible:ring-0", "disabled:pointer-events-none", "disabled:cursor-not-allowed", "disabled:opacity-50", "md:text-sm", "text-base");
+      el._h_datepicker.input.classList.add(
+        "bg-transparent",
+        "outline-none",
+        "flex-1",
+        "h-full",
+        "border-0",
+        "focus-visible:ring-0",
+        "disabled:pointer-events-none",
+        "disabled:cursor-not-allowed",
+        "disabled:opacity-50",
+        "md:text-sm",
+        "text-base"
+      );
       el._h_datepicker.input.setAttribute("aria-autocomplete", "none");
       el._h_datepicker.input.setAttribute("type", "text");
     });
@@ -7893,6 +7904,15 @@
     }
     return { hour, minute, second, period };
   };
+  function scrollIntoCenter(container, element, behavior = "instant") {
+    const containerRect = container.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+    const offset4 = elementRect.top - containerRect.top - container.clientHeight / 2 + element.clientHeight / 2;
+    container.scrollBy({
+      top: offset4,
+      behavior
+    });
+  }
   function timepicker_default(Alpine) {
     Alpine.directive("h-time-picker", (el, { expression }, { evaluateLater, cleanup, effect, Alpine: Alpine2 }) => {
       el._h_timepicker = Alpine2.reactive({
@@ -8099,7 +8119,7 @@
         "outline-none",
         "border",
         "rounded-control",
-        "fixed",
+        "absolute",
         "bg-popover",
         "text-popover-foreground",
         "data-[state=open]:flex",
@@ -8511,21 +8531,26 @@
       };
       el.addEventListener("click", onClick2);
       let autoUpdateCleanup;
+      let focusFirstItem = true;
       function updatePosition() {
         computePosition2(timepicker, el, {
           placement: el.getAttribute("data-align") || "bottom-start",
-          strategy: "fixed",
           middleware: [offset2(4), flip2(), shift2({ padding: 4 })]
         }).then(({ x, y }) => {
-          if (selectedHour) {
-            selectedHour.focus();
-          } else {
-            hoursList.children[timepicker._h_timepicker.is12Hour ? 1 : 0].focus();
-          }
           Object.assign(el.style, {
             left: `${x}px`,
             top: `${y}px`
           });
+          if (focusFirstItem) {
+            focusFirstItem = false;
+            Alpine2.nextTick(() => {
+              if (selectedHour) {
+                selectedHour.focus();
+              } else {
+                hoursList.children[timepicker._h_timepicker.is12Hour ? 1 : 0].focus();
+              }
+            });
+          }
         });
       }
       effect(() => {
@@ -8533,11 +8558,12 @@
         if (timepicker._h_timepicker.expanded) {
           render();
           autoUpdateCleanup = autoUpdate(timepicker, el, updatePosition);
-          if (selectedHour) selectedHour.scrollIntoView({ block: "center" });
-          if (selectedMinute) selectedMinute.scrollIntoView({ block: "center" });
-          if (selectedSecond && timepicker._h_timepicker.seconds) selectedSecond.scrollIntoView({ block: "center" });
+          if (selectedHour) scrollIntoCenter(selectedHour.parentElement, selectedHour);
+          if (selectedMinute) scrollIntoCenter(selectedMinute.parentElement, selectedMinute);
+          if (selectedSecond && timepicker._h_timepicker.seconds) scrollIntoCenter(selectedSecond.parentElement, selectedSecond);
         } else {
           if (autoUpdateCleanup) autoUpdateCleanup();
+          focusFirstItem = true;
           Object.assign(el.style, {
             left: "0px",
             top: "0px"
@@ -9051,7 +9077,7 @@
   }
 
   // package.json
-  var version = "0.9.0";
+  var version = "0.9.1";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, version };