@sonic-equipment/ui 163.0.0 → 165.0.0

package/dist/shared/utils/date.d.ts

@@ -1,13 +1,2 @@
 import { CultureCode } from '../../intl/types';
-export type DateUnit = 'day' | 'week' | 'month';
-export type DateUnitObject = {
-    number: number;
-    unit: DateUnit;
-};
-export type DateThreshold = {
-    dateUnitObject: DateUnitObject;
-    numberOfDays: number;
-};
-export declare function getDateUnitObject(date: Date): DateUnitObject;
-export declare function convertDateUnitToPluralOrSingle(unit: DateUnit, number: number): 'day' | 'days' | 'week' | 'weeks' | 'month' | 'months';
-export declare function formatDateToLocaleString(date?: Date, cultureCode?: CultureCode): string;
+export declare function formatDateToLocaleString(date?: Date, cultureCode?: CultureCode, options?: Intl.DateTimeFormatOptions): string;

package/dist/shared/utils/date.js

@@ -1,68 +1,12 @@
-import { TIME } from './time.js';
-
-function getDaysDifference(date, now) {
-    const diffTime = date.getTime() - now.getTime();
-    return diffTime / TIME.DAY;
-}
-const dateThresholds = [
-    {
-        dateUnitObject: { number: 1, unit: 'week' },
-        numberOfDays: 4,
-    },
-    {
-        dateUnitObject: { number: 2, unit: 'week' },
-        numberOfDays: 11,
-    },
-    {
-        dateUnitObject: { number: 3, unit: 'week' },
-        numberOfDays: 18,
-    },
-    {
-        dateUnitObject: { number: 4, unit: 'week' },
-        numberOfDays: 27,
-    },
-    {
-        dateUnitObject: { number: 2, unit: 'month' },
-        numberOfDays: 60,
-    },
-    {
-        dateUnitObject: { number: 3, unit: 'month' },
-        numberOfDays: 90,
-    },
-];
-function getDateUnitObject(date) {
-    const fallbackDateUnitObject = { number: 6, unit: 'month' };
-    const days = getDaysDifference(date, new Date());
-    if (days <= -1)
-        return fallbackDateUnitObject;
-    for (const threshold of dateThresholds) {
-        if (days <= threshold.numberOfDays) {
-            return threshold.dateUnitObject;
-        }
-    }
-    return fallbackDateUnitObject;
-}
-function convertDateUnitToPluralOrSingle(unit, number) {
-    if (number === 1)
-        return unit;
-    switch (unit) {
-        case 'day':
-            return 'days';
-        case 'week':
-            return 'weeks';
-        case 'month':
-            return 'months';
-    }
-}
-function formatDateToLocaleString(date, cultureCode) {
+function formatDateToLocaleString(date, cultureCode, options = {
+    day: 'numeric',
+    month: 'long',
+    weekday: 'long',
+    year: 'numeric',
+}) {
     if (!date || !cultureCode)
         return '';
-    return date.toLocaleDateString(cultureCode, {
-        day: 'numeric',
-        month: 'long',
-        weekday: 'long',
-        year: 'numeric',
-    });
+    return date.toLocaleDateString(cultureCode, options);
 }
 
-export { convertDateUnitToPluralOrSingle, formatDateToLocaleString, getDateUnitObject };
+export { formatDateToLocaleString };

package/dist/shared/utils/refs.d.ts

@@ -0,0 +1,2 @@
+import { ForwardedRef, LegacyRef, MutableRefObject } from 'react';
+export declare function multiRef<T extends HTMLElement>(...refs: (ForwardedRef<T> | MutableRefObject<T | undefined>)[]): LegacyRef<T>;

package/dist/shared/utils/refs.js

@@ -0,0 +1,14 @@
+function multiRef(...refs) {
+    return function (el) {
+        for (const ref of refs) {
+            if (ref && ref instanceof Function) {
+                ref(el);
+            }
+            else if (ref) {
+                ref.current = el;
+            }
+        }
+    };
+}
+
+export { multiRef };

package/dist/sidebar/sidebar-provider.js

@@ -43,7 +43,7 @@ function SidebarProvider({ children }) {
             [styles['transition']]: transition,
             [styles['docked']]: isDocked,
             [styles['open']]: isOpen,
-        }), children: [jsx(SidebarDetectBreakpoint, {}), children, isDocked && isOpen && (jsx(BackgroundOverlay, { isOpen: isOpen, onClose: close }))] }));
+        }), children: [jsx(SidebarDetectBreakpoint, {}), children, jsx(BackgroundOverlay, { isOpen: isDocked && isOpen, onClick: close })] }));
 }
 
 export { SidebarDetectBreakpoint, SidebarProvider };

package/dist/styles.css

@@ -235,13 +235,14 @@
   --box-shadow-light: 0 0 8px 0 rgb(0 0 0 / 30%);
 }
 :root {
+  --top-actions-sticky-layer: 5;
   --carousel-layer: 10;
+  --loading-layer: 12;
+  --background-overlay-behind-header: 13;
   --header-layer: 15;
-  --loading-layer: 50;
-  --background-overlay-layer: 90;
+  --background-overlay-in-front: 90;
   --sidebar-layer: 100;
   --search-layer: 200;
-  --sticky-bottom-price: 1300;
   --modal-layer: 2000;
   --zoom-image-layer: 2100;
 }
@@ -259,6 +260,9 @@
       100% no-repeat exclude,
     linear-gradient(0deg, #000, #000);
 }
+:root {
+  scrollbar-gutter: stable;
+}
 
 .address-info-display-module-CbRth {
   font: inherit;
@@ -1685,9 +1689,8 @@
     color: var(--color-white);
   }
 
-.background-overlay-module-mGiNQ {
+.background-overlay {
   position: fixed;
-  z-index: var(--background-overlay-layer);
   -webkit-backdrop-filter: blur(4px);
           backdrop-filter: blur(4px);
   background-color: rgb(0 0 0 / 52%);
@@ -1695,15 +1698,14 @@
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease-in-out;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
 
-  .background-overlay-module-mGiNQ.background-overlay-module-5Uxcl {
+  .background-overlay.visible {
     opacity: 1;
-    pointer-events: auto;
-  }
-
-  .background-overlay-module-mGiNQ.background-overlay-module-GRInQ {
-    opacity: 0;
+    pointer-events: all;
   }
 
 .badge-module-X5Au9 {
@@ -2600,7 +2602,7 @@
 
   .category-card-module-4NUjH .category-card-module-oNTrK .category-card-module-RxWMW {
       position: relative;
-      z-index: 5;
+      z-index: 1;
       margin: auto;
       aspect-ratio: 1;
       mix-blend-mode: multiply;
@@ -2658,15 +2660,24 @@
   display: flex;
   align-items: center;
   color: var(--color-status-available);
+  font-size: var(--font-size-14);
   gap: var(--space-4);
   grid-column: span 2;
-  line-height: 1.5;
+  line-height: 1.25;
 }
 
   .delivery-time-module-fEWEl p {
     margin: 0;
   }
 
+  .delivery-time-module-fEWEl p a {
+      color: inherit;
+    }
+
+  .delivery-time-module-fEWEl .delivery-time-module-Ta7xm {
+    margin-block-start: -0.1em;
+  }
+
 /* Singular prices */
 .price-module-Qyyas {
   display: inline-grid;
@@ -2991,7 +3002,7 @@
       'image . sku price'
       'image . . price'
       'image . amount price'
-      'image . info price';
+      'image . info info';
     grid-template-columns:
       143px var(--space-8)
       1fr auto
@@ -4558,6 +4569,111 @@ button.swiper-pagination-bullet {
     line-height: 1.5;
   }
 
+.drawer-module-5ARuA {
+  --transition-timing-function: ease-in-out;
+  --transition-duration: 0.3s;
+  --transform-translate-x-from: -100%;
+  --transform-translate-x-to: 0;
+  --transform-translate-y-from: 0;
+  --transform-translate-y-to: 0;
+
+  position: fixed;
+  z-index: var(--sidebar-layer);
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-gray-200);
+  background-color: var(--color-white);
+  pointer-events: all;
+}
+
+  .drawer-module-5ARuA.drawer-module-yjFdX {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    min-width: 300px;
+  }
+
+  .drawer-module-5ARuA.drawer-module-bZLBV {
+    --transform-translate-x-from: 100%;
+    --transform-translate-x-to: 0;
+    --transform-translate-y-from: 0;
+    --transform-translate-y-to: 0;
+
+    top: 0;
+    right: 0;
+    bottom: 0;
+    min-width: 300px;
+  }
+
+  .drawer-module-5ARuA.drawer-module-KiviE {
+    --transform-translate-x-from: 0;
+    --transform-translate-x-to: 0;
+    --transform-translate-y-from: -100%;
+    --transform-translate-y-to: 0;
+
+    top: 0;
+    right: 0;
+    left: 0;
+    min-height: 300px;
+  }
+
+  .drawer-module-5ARuA.drawer-module-p-PYu {
+    right: 0;
+
+    --transform-translate-x-from: 0;
+    --transform-translate-x-to: 0;
+    --transform-translate-y-from: 100%;
+    --transform-translate-y-to: 0;
+
+    bottom: 0;
+    left: 0;
+    min-height: 300px;
+  }
+
+  .drawer-module-5ARuA.drawer-module-0jRBQ {
+    z-index: calc(var(--header-layer) - 1);
+  }
+
+  .drawer-module-5ARuA.drawer-module-0jRBQ.drawer-module-yjFdX,
+    .drawer-module-5ARuA.drawer-module-0jRBQ.drawer-module-bZLBV,
+    .drawer-module-5ARuA.drawer-module-0jRBQ.drawer-module-KiviE {
+      top: var(--header-height);
+    }
+
+  .drawer-module-5ARuA.enter {
+    transform: translate(
+      var(--transform-translate-x-from),
+      var(--transform-translate-y-from)
+    );
+  }
+
+  .drawer-module-5ARuA.enter-active {
+    transform: translate(
+      var(--transform-translate-x-to),
+      var(--transform-translate-y-to)
+    );
+  }
+
+  .drawer-module-5ARuA.exit {
+    transform: translate(
+      var(--transform-translate-x-to),
+      var(--transform-translate-y-to)
+    );
+  }
+
+  .drawer-module-5ARuA.exit-active {
+    transform: translate(
+      var(--transform-translate-x-from),
+      var(--transform-translate-y-from)
+    );
+  }
+
+  .drawer-module-5ARuA.exit-active,
+  .drawer-module-5ARuA.enter-active {
+    transition: transform var(--transition-duration)
+      var(--transition-timing-function);
+  }
+
 .footer-module-YzJ68 {
   --padding-inline: var(--space-24);
 
@@ -5064,53 +5180,6 @@ button.swiper-pagination-bullet {
     }
 }
 
-.global-search-module-T0bEf {
-  z-index: calc(var(--header-layer) - 1);
-}
-
-.global-search-module-d2g2F {
-  position: relative;
-  z-index: -1;
-  font-family: var(--font-family-sonic);
-}
-
-.global-search-module-Sx8Lx {
-  position: relative;
-}
-
-.global-search-module-Sx8Lx .global-search-module--orCF {
-    position: absolute;
-    z-index: var(--search-layer);
-    top: 0;
-    right: 0;
-    left: 0;
-    box-sizing: border-box;
-    transition: transform 0.3s ease-in-out;
-  }
-
-.global-search-module-Sx8Lx .global-search-module--orCF .global-search-module-vXnL6 {
-      position: relative;
-      z-index: calc(var(--search-layer) + 1);
-    }
-
-.global-search-module-Sx8Lx .global-search-module--orCF.global-search-module-MYwlp {
-      transform: translateY(0);
-    }
-
-.global-search-module-Sx8Lx .global-search-module--orCF.global-search-module-Jmt3c {
-      transform: translateY(0);
-    }
-
-.global-search-module-Sx8Lx .global-search-module--orCF.global-search-module-gQQfY {
-      transform: translateY(-100%);
-    }
-
-.global-search-module-Sx8Lx .global-search-module--orCF.global-search-module-AABcw {
-      opacity: 0;
-      pointer-events: none;
-      transform: translateY(-100%);
-    }
-
 .search-input-module-xCCzd {
   box-sizing: border-box;
 }
@@ -5466,6 +5535,49 @@ button.swiper-pagination-bullet {
     transform: translateY(-100%);
   }
 
+.global-search-module-d2g2F {
+  position: relative;
+  z-index: -1;
+  font-family: var(--font-family-sonic);
+}
+
+.global-search-module-Sx8Lx {
+  position: relative;
+}
+
+.global-search-module-Sx8Lx .global-search-module--orCF {
+    position: absolute;
+    z-index: var(--search-layer);
+    top: 0;
+    right: 0;
+    left: 0;
+    box-sizing: border-box;
+    transition: transform 0.3s ease-in-out;
+  }
+
+.global-search-module-Sx8Lx .global-search-module--orCF .global-search-module-vXnL6 {
+      position: relative;
+      z-index: calc(var(--search-layer) + 1);
+    }
+
+.global-search-module-Sx8Lx .global-search-module--orCF.global-search-module-MYwlp {
+      transform: translateY(0);
+    }
+
+.global-search-module-Sx8Lx .global-search-module--orCF.global-search-module-Jmt3c {
+      transform: translateY(0);
+    }
+
+.global-search-module-Sx8Lx .global-search-module--orCF.global-search-module-gQQfY {
+      transform: translateY(-100%);
+    }
+
+.global-search-module-Sx8Lx .global-search-module--orCF.global-search-module-AABcw {
+      opacity: 0;
+      pointer-events: none;
+      transform: translateY(-100%);
+    }
+
 .hamburger-button-module-xER52 {
   --width: 24px;
   --padding-inline: 2px;
@@ -5646,6 +5758,15 @@ button.swiper-pagination-bullet {
       fill: var(--color-brand-red);
     }
 
+.center-module-Cr7hx {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-height: inherit;
+  align-items: center;
+  place-content: center center;
+}
+
 .feature-list-module-cxc8U {
   display: grid;
   grid-template-columns: auto minmax(50%, 1fr);
@@ -5752,7 +5873,7 @@ button.swiper-pagination-bullet {
 
   /* scroll area */
 
-  .menu-list-module-TloB9 .menu-list-module-x3D-V {
+  .menu-list-module-TloB9.menu-list-module-AiDgG .menu-list-module-x3D-V {
     grid-area: scroll-area;
     overflow-y: auto;
     scrollbar-width: thin;
@@ -5804,7 +5925,6 @@ button.swiper-pagination-bullet {
   align-items: center;
   padding: var(--space-8) var(--ml-item-outer-spacing, 0);
   margin: 0 0 -2px;
-  background: var(--color-white);
   color: var(--color-brand-dark-gray);
   font-size: var(--text-heading-xxxs-size);
   font-style: italic;
@@ -5845,6 +5965,10 @@ button.swiper-pagination-bullet {
     box-shadow: inset var(--shadow-focus-outline);
   }
 
+.menu-list-module-S08LI:has(:focus-visible) [href] {
+      box-shadow: none;
+    }
+
 /* menu list item */
 
 .menu-list-module-4QhF4 {
@@ -5983,10 +6107,14 @@ button.swiper-pagination-bullet {
     z-index: 2;
   }
 
-.menu-list-module-4QhF4:has(:focus-visible) .menu-list-module-xFYyo::before {
-      box-shadow: inset var(--shadow-focus-outline);
+.menu-list-module-4QhF4:has(:focus-visible) .menu-list-module-xFYyo {
+      box-shadow: none;
     }
 
+.menu-list-module-4QhF4:has(:focus-visible) .menu-list-module-xFYyo::before {
+        box-shadow: inset var(--shadow-focus-outline);
+      }
+
 /* selected state */
 
 .menu-list-module-4QhF4.menu-list-module-hiMca {
@@ -6294,6 +6422,90 @@ button.swiper-pagination-bullet {
   gap: 1rem;
 }
 
+.panel-navigation-module-FnSua {
+  block-size: inherit;
+}
+
+.panel-navigation-module-torfG {
+  position: relative;
+  display: grid;
+  block-size: inherit;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.panel-navigation-module-torfG.panel-navigation-module-7K80h {
+    overflow: hidden;
+    grid-template-columns: 1fr;
+  }
+
+.panel-navigation-module-j3ZBu {
+  --transition-duration: 250ms;
+
+  z-index: 2;
+  display: grid;
+  background-color: var(--color-white);
+  block-size: inherit;
+  border-inline: 1px solid var(--color-brand-light-gray);
+  margin-inline-start: -1px;
+}
+
+/* only applies to the first panel, when more content than one menu is present, like in the mobile navigation */
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-1yGRP {
+    display: flex;
+    overflow: hidden auto;
+    flex-direction: column;
+    gap: var(--space-24);
+    scrollbar-width: thin;
+  }
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-1yGRP > * {
+      flex-shrink: 0;
+    }
+
+.panel-navigation-module-j3ZBu:last-child {
+    z-index: 1;
+  }
+
+.panel-navigation-module-j3ZBu.exit-active,
+  .panel-navigation-module-j3ZBu.enter-active {
+    transition: translate var(--transition-duration) ease-in-out;
+  }
+
+.panel-navigation-module-j3ZBu.exit-active,
+  .panel-navigation-module-j3ZBu.enter {
+    translate: -100% 0;
+  }
+
+.panel-navigation-module-j3ZBu.enter-active {
+    translate: 0 0;
+  }
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h {
+    position: absolute;
+    border: 0;
+    margin: 0;
+    inset: 0;
+  }
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.exit-active,
+    .panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.enter {
+      translate: 100% 0;
+    }
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.enter-active {
+      translate: 0 0;
+    }
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h:has(+ .panel-navigation-module-j3ZBu.panel-navigation-module-7K80h) {
+      transition: translate var(--transition-duration) ease-in-out;
+      translate: -100% 0;
+    }
+
+.panel-navigation-module-j3ZBu.panel-navigation-module-7K80h:has(+ .panel-navigation-module-j3ZBu.panel-navigation-module-7K80h.exit-active) {
+      translate: 0 0;
+    }
+
 .announcement-module-Xi0L5 {
   --text-color: var(--color-white);
   --background-color: var(--color-brand-red);
@@ -6684,7 +6896,7 @@ button.swiper-pagination-bullet {
 
   .checkout-page-layout-module-lULV3 .checkout-page-layout-module-wGAXb {
     position: fixed;
-    z-index: 5;
+    z-index: var(--top-actions-sticky-layer);
     top: var(--header-height);
     right: 0;
     left: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "163.0.0",
+  "version": "165.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {

package/dist/background-overlay/background-overlay.module.css.js

@@ -1,3 +0,0 @@
-var styles = {"background-overlay":"background-overlay-module-mGiNQ","open":"background-overlay-module-5Uxcl","close":"background-overlay-module-GRInQ"};
-
-export { styles as default };

package/dist/shared/utils/date.test.d.ts

@@ -1 +0,0 @@
-export {};