@likable-hair/svelte 3.1.23 → 3.1.24

package/dist/components/composed/forms/DatePickerTextField.svelte

@@ -11,7 +11,7 @@ import Dialog from "../../simple/dialogs/Dialog.svelte";
 let clazz = {};
 export { clazz as class };
 let dispatch = createEventDispatcher();
-export let menuOpened = false, openingId = "date-picker-text-field", pattern = "dd/MM/yyyy", selectedMonth = void 0, selectedYear = void 0, visibleMonth = void 0, visibleYear = void 0, selectedDate = void 0, placeholder = void 0, mobileDialog = true, maxYearInRange = 2100, minYearInRange = 1970, disabled = false;
+export let menuOpened = false, openingId = "date-picker-text-field", pattern = "dd/MM/yyyy", selectedMonth = void 0, selectedYear = void 0, visibleMonth = void 0, visibleYear = void 0, selectedDate = void 0, placeholder = void 0, mobileDialog = true, maxYearInRange = 2100, minYearInRange = 1970, disabled = false, flipOnOverflow = true;
 let activator, refreshPosition = false, menuElement, inputElement, mask = {
   value: void 0
 }, maskFactoryArgs = {
@@ -211,6 +211,7 @@ $:
       bind:refreshPosition
       bind:menuElement
       bind:openingId={openingId}
+      flipOnOverflow={flipOnOverflow}
     >
       <div
         style:background-color="rgb(var(--global-color-background-100))"

package/dist/components/composed/forms/DatePickerTextField.svelte.d.ts

@@ -21,6 +21,7 @@ declare const __propDef: {
         maxYearInRange?: number | undefined;
         minYearInRange?: number | undefined;
         disabled?: boolean | undefined;
+        flipOnOverflow?: boolean | undefined;
     };
     events: {
         'day-click': CustomEvent<{

package/dist/components/composed/search/FilterEditor.svelte

@@ -124,6 +124,7 @@ $:
               bind:menuOpened={calendarOpened}
               on:day-click={() => {calendarOpened = false}}
               --simple-textfield-width="100%"
+              flipOnOverflow
             >
               <svelte:fragment slot="append-inner">
                 <Icon
@@ -202,6 +203,7 @@ $:
               bind:menuOpened={calendarOpened2}
               on:day-click={() => {calendarOpened2 = false}}
               --simple-textfield-width="100%"
+              flipOnOverflow
             >
               <svelte:fragment slot="append-inner">
                 <Icon

package/dist/components/composed/search/Filters.svelte

@@ -296,7 +296,7 @@ let moreItemsActivator;
 
 <MediaQuery let:mAndDown>
   <div class="filters-wrapper" class:mobile={mAndDown} style:--filter-dot-size={activeFilters.length > 0 ? '22px' : '0px'} style:--filter-dot-content={activeFilters.length > 0 ? `"${activeFilters.length}"` : '""'}>
-    <div class="filters-container" class:mobile={mAndDown}>
+    <div class="filters-container" class:mobile={mAndDown} class:hidden={mAndDown && (!showActiveFilters || activeFilters.length == 0)}>
       {#if showActiveFilters}
         {#each activeFilters as filter}
           <div
@@ -587,6 +587,7 @@ let moreItemsActivator;
         _borderRadius="5px"
         anchor="bottom"
         openingId="select-filter"
+        flipOnOverflow
       >
         <div
           style:background-color="rgb(var(--global-color-background-200))"
@@ -917,4 +918,8 @@ let moreItemsActivator;
     grid-column: span 2;
   }
 
+  .hidden {
+    display: none;
+  }
+
 </style>

package/dist/components/simple/common/Menu.svelte

@@ -59,9 +59,9 @@ function calculateMenuPosition(params) {
       }
     }
     if (flipOnOverflow && !!params.activator) {
-      if (window.innerHeight + window.scrollY < (_top || 0) + (menuElement?.offsetHeight || 0)) {
-        let { top: activatorTop } = params.activator.getBoundingClientRect();
-        _top = activatorTop + window.scrollY - _activatorGap - (menuElement?.offsetHeight || 0);
+      let { top: activatorTopDistance } = params.activator.getBoundingClientRect();
+      if (window.innerHeight < activatorTopDistance + (menuElement?.offsetHeight || 0) + (menuElement?.offsetHeight || 0) * 0.1) {
+        _top = getTopDistance(params.activator) - _activatorGap - (menuElement?.offsetHeight || 0);
       }
       if (anchor == "right-center" && window.innerWidth + window.scrollX < (_left || 0) + (menuElement?.offsetWidth || 0)) {
         let { left: activatorLeft } = params.activator.getBoundingClientRect();
@@ -94,8 +94,38 @@ function calculateMenuPosition(params) {
     }
   }
 }
+function getTopDistance(elem) {
+  let positionedAncestor2 = getPositionedAncestor(elem);
+  if (!!positionedAncestor2) {
+    let top = parseInt(getComputedStyle(positionedAncestor2).top);
+    return (isNaN(top) ? 0 : top) + elem.offsetTop - calcScrollY(elem);
+  }
+  return window.scrollY + elem.getBoundingClientRect().top;
+}
+function calcScrollY(elem) {
+  let parent = elem.parentElement;
+  let scroll = 0;
+  while (!!parent) {
+    scroll += parent.scrollTop;
+    let parentPosition = getComputedStyle(parent).position;
+    if (parentPosition === "absolute" || parentPosition === "fixed")
+      break;
+    parent = parent.parentElement;
+  }
+  return scroll;
+}
 $:
   if (open) {
+    if (!!activator) {
+      let parent = activator.parentElement;
+      while (!!parent) {
+        let parentPosition = getComputedStyle(parent).position;
+        parent.addEventListener("scroll", refreshMenuPosition);
+        if (parentPosition == "absolute" || parentPosition == "fixed")
+          break;
+        parent = parent.parentElement;
+      }
+    }
     if (!!openingId) {
       const controllers = document.querySelectorAll(`[data-operation="close"][data-opening-id="${openingId}"]`);
       for (let k = 0; k < controllers.length; k += 1) {
@@ -251,6 +281,7 @@ $:
 ></div>
 {#if open}
   <div
+    role="presentation"
     bind:this={menuElement}
     data-menu
     data-uid={currentUid}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "3.1.23",
+  "version": "3.1.24",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",