@nectary/components 5.6.5 → 5.6.7

package/bundle.js

@@ -3427,7 +3427,7 @@ const getPopOrientation$1 = (orientation) => {
   }
   return orientation;
 };
-const templateHTML$Q = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px;filter:drop-shadow(var(--sinch-comp-tooltip-shadow))}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;background-color:var(--sinch-local-color-background);border-radius:var(--sinch-comp-tooltip-shape-radius);pointer-events:none;opacity:0;--sinch-local-color-background:var(--sinch-comp-tooltip-color-background);--sinch-global-color-text:var(--sinch-comp-tooltip-color-text)}#text{word-break:break-word;pointer-events:none;--sinch-comp-text-font:var(--sinch-comp-tooltip-font-body)}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-local-color-background);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}:host([text-align=right]) #text{--sinch-comp-text-align:right}:host([text-align=center]) #text{--sinch-comp-text-align:center}:host([text-align=left]) #text{--sinch-comp-text-align:left}</style><sinch-pop id="pop" allow-scroll><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
+const templateHTML$Q = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px;filter:drop-shadow(var(--sinch-comp-tooltip-shadow))}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;background-color:var(--sinch-local-color-background);border-radius:var(--sinch-comp-tooltip-shape-radius);pointer-events:none;opacity:0;--sinch-local-color-background:var(--sinch-comp-tooltip-color-background);--sinch-global-color-text:var(--sinch-comp-tooltip-color-text)}#text{word-break:break-word;pointer-events:none;--sinch-comp-text-font:var(--sinch-comp-tooltip-font-body)}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-local-color-background);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}:host([text-align=right]) #text{--sinch-comp-text-align:right}:host([text-align=center]) #text{--sinch-comp-text-align:center}:host([text-align=left]) #text{--sinch-comp-text-align:left}</style><sinch-pop id="pop"><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
 const TIP_SIZE$1 = 8;
 const SHOW_DELAY_SLOW = 1e3;
 const SHOW_DELAY_FAST = 250;
@@ -3497,7 +3497,8 @@ class Tooltip extends NectaryElement {
       "type",
       "aria-label",
       "aria-description",
-      "show-outside-viewport"
+      "show-outside-viewport",
+      "allow-scroll"
     ];
   }
   attributeChangedCallback(name, _, newVal) {
@@ -3544,6 +3545,11 @@ class Tooltip extends NectaryElement {
           updateBooleanAttribute(this.#$pop, "disable-backdrop-close", false);
           this.#tooltipState.hide();
         }
+        break;
+      }
+      case "allow-scroll": {
+        updateAttribute(this.#$pop, "allow-scroll", newVal);
+        break;
       }
     }
   }
@@ -3650,6 +3656,10 @@ class Tooltip extends NectaryElement {
   }
   #updateTipOrientation = () => {
     const orient = this.orientation;
+    if (!("footprintRect" in this.#$pop)) {
+      requestAnimationFrame(this.#updateTipOrientation);
+      return;
+    }
     const targetRect = this.#$pop.footprintRect;
     const contentRect = this.#$content.getBoundingClientRect();
     const diffX = targetRect.x - contentRect.x;
@@ -4154,19 +4164,69 @@ const clampMaxDate = (date, max) => {
   }
 };
 const incMonth = (date, max) => {
-  date.setUTCMonth(date.getUTCMonth() + 1);
+  const currentDay = date.getUTCDate();
+  const currentMonth = date.getUTCMonth();
+  const currentYear = date.getUTCFullYear();
+  let nextMonth = currentMonth + 1;
+  let nextYear = currentYear;
+  if (nextMonth > 11) {
+    nextMonth = 0;
+    nextYear++;
+  }
+  const nextMonthLastDay = new Date(Date.UTC(nextYear, nextMonth + 1, 0));
+  const maxDayInNextMonth = nextMonthLastDay.getUTCDate();
+  const targetDay = Math.min(currentDay, maxDayInNextMonth);
+  date.setUTCFullYear(nextYear, nextMonth, targetDay);
   clampMaxDate(date, max);
 };
 const decMonth = (date, min) => {
-  date.setUTCMonth(date.getUTCMonth() - 1);
+  const currentDay = date.getUTCDate();
+  const currentMonth = date.getUTCMonth();
+  const currentYear = date.getUTCFullYear();
+  let prevMonth = currentMonth - 1;
+  let prevYear = currentYear;
+  if (prevMonth < 0) {
+    prevMonth = 11;
+    prevYear--;
+  }
+  const prevMonthLastDay = new Date(Date.UTC(prevYear, prevMonth + 1, 0));
+  const maxDayInPrevMonth = prevMonthLastDay.getUTCDate();
+  const targetDay = Math.min(currentDay, maxDayInPrevMonth);
+  date.setUTCFullYear(prevYear, prevMonth, targetDay);
   clampMinDate(date, min);
 };
 const incYear = (date, max) => {
-  date.setUTCFullYear(date.getUTCFullYear() + 1);
+  const currentDay = date.getUTCDate();
+  const currentMonth = date.getUTCMonth();
+  const currentYear = date.getUTCFullYear();
+  const nextYear = currentYear + 1;
+  if (currentMonth === 1 && currentDay === 29) {
+    const isNextYearLeap = new Date(Date.UTC(nextYear, 1, 29)).getUTCDate() === 29;
+    if (!isNextYearLeap) {
+      date.setUTCFullYear(nextYear, currentMonth, 28);
+    } else {
+      date.setUTCFullYear(nextYear, currentMonth, currentDay);
+    }
+  } else {
+    date.setUTCFullYear(nextYear, currentMonth, currentDay);
+  }
   clampMaxDate(date, max);
 };
 const decYear = (date, min) => {
-  date.setUTCFullYear(date.getUTCFullYear() - 1);
+  const currentDay = date.getUTCDate();
+  const currentMonth = date.getUTCMonth();
+  const currentYear = date.getUTCFullYear();
+  const prevYear = currentYear - 1;
+  if (currentMonth === 1 && currentDay === 29) {
+    const isPrevYearLeap = new Date(Date.UTC(prevYear, 1, 29)).getUTCDate() === 29;
+    if (!isPrevYearLeap) {
+      date.setUTCFullYear(prevYear, currentMonth, 28);
+    } else {
+      date.setUTCFullYear(prevYear, currentMonth, currentDay);
+    }
+  } else {
+    date.setUTCFullYear(prevYear, currentMonth, currentDay);
+  }
   clampMinDate(date, min);
 };
 const canGoPrevMonth = (date, min) => {

package/date-picker/utils.js

@@ -72,19 +72,69 @@ const clampMaxDate = (date, max) => {
   }
 };
 const incMonth = (date, max) => {
-  date.setUTCMonth(date.getUTCMonth() + 1);
+  const currentDay = date.getUTCDate();
+  const currentMonth = date.getUTCMonth();
+  const currentYear = date.getUTCFullYear();
+  let nextMonth = currentMonth + 1;
+  let nextYear = currentYear;
+  if (nextMonth > 11) {
+    nextMonth = 0;
+    nextYear++;
+  }
+  const nextMonthLastDay = new Date(Date.UTC(nextYear, nextMonth + 1, 0));
+  const maxDayInNextMonth = nextMonthLastDay.getUTCDate();
+  const targetDay = Math.min(currentDay, maxDayInNextMonth);
+  date.setUTCFullYear(nextYear, nextMonth, targetDay);
   clampMaxDate(date, max);
 };
 const decMonth = (date, min) => {
-  date.setUTCMonth(date.getUTCMonth() - 1);
+  const currentDay = date.getUTCDate();
+  const currentMonth = date.getUTCMonth();
+  const currentYear = date.getUTCFullYear();
+  let prevMonth = currentMonth - 1;
+  let prevYear = currentYear;
+  if (prevMonth < 0) {
+    prevMonth = 11;
+    prevYear--;
+  }
+  const prevMonthLastDay = new Date(Date.UTC(prevYear, prevMonth + 1, 0));
+  const maxDayInPrevMonth = prevMonthLastDay.getUTCDate();
+  const targetDay = Math.min(currentDay, maxDayInPrevMonth);
+  date.setUTCFullYear(prevYear, prevMonth, targetDay);
   clampMinDate(date, min);
 };
 const incYear = (date, max) => {
-  date.setUTCFullYear(date.getUTCFullYear() + 1);
+  const currentDay = date.getUTCDate();
+  const currentMonth = date.getUTCMonth();
+  const currentYear = date.getUTCFullYear();
+  const nextYear = currentYear + 1;
+  if (currentMonth === 1 && currentDay === 29) {
+    const isNextYearLeap = new Date(Date.UTC(nextYear, 1, 29)).getUTCDate() === 29;
+    if (!isNextYearLeap) {
+      date.setUTCFullYear(nextYear, currentMonth, 28);
+    } else {
+      date.setUTCFullYear(nextYear, currentMonth, currentDay);
+    }
+  } else {
+    date.setUTCFullYear(nextYear, currentMonth, currentDay);
+  }
   clampMaxDate(date, max);
 };
 const decYear = (date, min) => {
-  date.setUTCFullYear(date.getUTCFullYear() - 1);
+  const currentDay = date.getUTCDate();
+  const currentMonth = date.getUTCMonth();
+  const currentYear = date.getUTCFullYear();
+  const prevYear = currentYear - 1;
+  if (currentMonth === 1 && currentDay === 29) {
+    const isPrevYearLeap = new Date(Date.UTC(prevYear, 1, 29)).getUTCDate() === 29;
+    if (!isPrevYearLeap) {
+      date.setUTCFullYear(prevYear, currentMonth, 28);
+    } else {
+      date.setUTCFullYear(prevYear, currentMonth, currentDay);
+    }
+  } else {
+    date.setUTCFullYear(prevYear, currentMonth, currentDay);
+  }
   clampMinDate(date, min);
 };
 const canGoPrevMonth = (date, min) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.6.5",
+  "version": "5.6.7",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "3.3.0"
+    "@nectary/assets": "3.3.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",
@@ -40,6 +40,6 @@
     "vite": "^7.0.6"
   },
   "peerDependencies": {
-    "@nectary/theme-base": "1.7.0"
+    "@nectary/theme-base": "1.7.1"
   }
 }

package/tooltip/index.js

@@ -6,7 +6,7 @@ import { rectOverlap } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { TooltipState } from "./tooltip-state.js";
 import { getPopOrientation, orientationValues, textAlignValues, typeValues } from "./utils.js";
-const templateHTML = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px;filter:drop-shadow(var(--sinch-comp-tooltip-shadow))}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;background-color:var(--sinch-local-color-background);border-radius:var(--sinch-comp-tooltip-shape-radius);pointer-events:none;opacity:0;--sinch-local-color-background:var(--sinch-comp-tooltip-color-background);--sinch-global-color-text:var(--sinch-comp-tooltip-color-text)}#text{word-break:break-word;pointer-events:none;--sinch-comp-text-font:var(--sinch-comp-tooltip-font-body)}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-local-color-background);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}:host([text-align=right]) #text{--sinch-comp-text-align:right}:host([text-align=center]) #text{--sinch-comp-text-align:center}:host([text-align=left]) #text{--sinch-comp-text-align:left}</style><sinch-pop id="pop" allow-scroll><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
+const templateHTML = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px;filter:drop-shadow(var(--sinch-comp-tooltip-shadow))}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;background-color:var(--sinch-local-color-background);border-radius:var(--sinch-comp-tooltip-shape-radius);pointer-events:none;opacity:0;--sinch-local-color-background:var(--sinch-comp-tooltip-color-background);--sinch-global-color-text:var(--sinch-comp-tooltip-color-text)}#text{word-break:break-word;pointer-events:none;--sinch-comp-text-font:var(--sinch-comp-tooltip-font-body)}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-local-color-background);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}:host([text-align=right]) #text{--sinch-comp-text-align:right}:host([text-align=center]) #text{--sinch-comp-text-align:center}:host([text-align=left]) #text{--sinch-comp-text-align:left}</style><sinch-pop id="pop"><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
 const TIP_SIZE = 8;
 const SHOW_DELAY_SLOW = 1e3;
 const SHOW_DELAY_FAST = 250;
@@ -76,7 +76,8 @@ class Tooltip extends NectaryElement {
       "type",
       "aria-label",
       "aria-description",
-      "show-outside-viewport"
+      "show-outside-viewport",
+      "allow-scroll"
     ];
   }
   attributeChangedCallback(name, _, newVal) {
@@ -123,6 +124,11 @@ class Tooltip extends NectaryElement {
           updateBooleanAttribute(this.#$pop, "disable-backdrop-close", false);
           this.#tooltipState.hide();
         }
+        break;
+      }
+      case "allow-scroll": {
+        updateAttribute(this.#$pop, "allow-scroll", newVal);
+        break;
       }
     }
   }
@@ -229,6 +235,10 @@ class Tooltip extends NectaryElement {
   }
   #updateTipOrientation = () => {
     const orient = this.orientation;
+    if (!("footprintRect" in this.#$pop)) {
+      requestAnimationFrame(this.#updateTipOrientation);
+      return;
+    }
     const targetRect = this.#$pop.footprintRect;
     const contentRect = this.#$content.getBoundingClientRect();
     const diffX = targetRect.x - contentRect.x;

package/tooltip/types.d.ts

@@ -15,6 +15,11 @@ export type TSinchTooltipProps = {
     'show-outside-viewport'?: boolean;
     readonly footprintRect?: TRect;
     readonly tooltipRect?: TRect;
+    /**
+     * Whether or not the tooltip allows scrolling, blocks by default, setting it
+     * to true can have unexpected behavior in dialogs
+     */
+    'allow-scroll'?: boolean;
 };
 export type TSinchTooltipEvents = {
     /** Show event handler */