@codbex/harmonia 0.9.0 → 0.9.1

package/dist/harmonia.esm.js

@@ -21174,7 +21174,7 @@ function calendar_default(Alpine) {
     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");
@@ -21604,7 +21604,6 @@ function calendar_default(Alpine) {
     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, {
@@ -21830,7 +21829,19 @@ function datepicker_default(Alpine) {
       "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");
   });
@@ -25030,6 +25041,15 @@ var getSelectedTime = (rawTime, convertTo12) => {
   }
   return { hour, minute, second, period };
 };
+function scrollIntoCenter(container, element, behavior = "instant") {
+  const containerRect = container.getBoundingClientRect();
+  const elementRect = element.getBoundingClientRect();
+  const offset3 = elementRect.top - containerRect.top - container.clientHeight / 2 + element.clientHeight / 2;
+  container.scrollBy({
+    top: offset3,
+    behavior
+  });
+}
 function timepicker_default(Alpine) {
   Alpine.directive("h-time-picker", (el, { expression }, { evaluateLater, cleanup, effect, Alpine: Alpine2 }) => {
     el._h_timepicker = Alpine2.reactive({
@@ -25236,7 +25256,7 @@ function timepicker_default(Alpine) {
       "outline-none",
       "border",
       "rounded-control",
-      "fixed",
+      "absolute",
       "bg-popover",
       "text-popover-foreground",
       "data-[state=open]:flex",
@@ -25648,21 +25668,26 @@ function timepicker_default(Alpine) {
     };
     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(() => {
@@ -25670,11 +25695,12 @@ function timepicker_default(Alpine) {
       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"
@@ -26065,7 +26091,7 @@ function tree_default(Alpine) {
 }
 
 // package.json
-var version = "0.9.0";
+var version = "0.9.1";
 
 // src/utils/breakpoint-listener.js
 function getBreakpointListener(handler, breakpoint = 768) {