@juspay/svelte-ui-components 2.84.1 → 2.86.0

package/dist/Sheet/Sheet.svelte

@@ -1,3 +1,24 @@
+<script lang="ts" module>
+  // Reference-counted so two Sheets open at once (or a Sheet nested inside
+  // another scroll-locking surface) don't have the second one's close clobber
+  // the first one's still-needed lock.
+  let scrollLockCount = 0;
+
+  function lockScroll() {
+    if (scrollLockCount === 0) {
+      document.body.style.overflow = 'hidden';
+    }
+    scrollLockCount += 1;
+  }
+
+  function unlockScroll() {
+    scrollLockCount = Math.max(0, scrollLockCount - 1);
+    if (scrollLockCount === 0) {
+      document.body.style.overflow = '';
+    }
+  }
+</script>
+
 <script lang="ts">
   import type { SheetProperties } from './properties';
   import { fly, fade } from 'svelte/transition';
@@ -9,6 +30,7 @@
     side = 'right',
     title,
     showOverlay = true,
+    dismissOnOutsideClick = showOverlay,
     showCloseButton = true,
     testId,
     content,
@@ -41,7 +63,10 @@
   }
 
   function handleOverlayClick(event: MouseEvent) {
-    if (event.target === overlayDiv) {
+    // Gate dismissal on dismissOnOutsideClick explicitly, not on the overlay's
+    // pointer-events alone: a visible-but-non-dismissible overlay still needs to
+    // catch (and swallow) the click to block the page underneath, without closing.
+    if (event.target === overlayDiv && dismissOnOutsideClick) {
       close();
     }
   }
@@ -71,14 +96,6 @@
     }
   }
 
-  function lockScroll() {
-    document.body.style.overflow = 'hidden';
-  }
-
-  function unlockScroll() {
-    document.body.style.overflow = '';
-  }
-
   function scrollLockAction(_node: HTMLElement) {
     lockScroll();
     tick().then(() => {
@@ -110,7 +127,10 @@
   <div
     bind:this={overlayDiv}
     use:scrollLockAction
-    class="sheet-overlay {showOverlay ? 'overlay-active' : 'overlay-inactive'} {classes ?? ''}"
+    class="sheet-overlay {showOverlay ? 'overlay-visible' : 'overlay-invisible'} {showOverlay ||
+    dismissOnOutsideClick
+      ? 'overlay-interactive'
+      : 'overlay-noninteractive'} {classes ?? ''}"
     onclick={handleOverlayClick}
     onkeydown={handleKeyDown}
     role="button"
@@ -170,12 +190,19 @@
     -webkit-tap-highlight-color: transparent;
   }
 
-  .overlay-active {
+  .overlay-visible {
     background-color: var(--sheet-overlay-background, #00000066);
+  }
+
+  .overlay-invisible {
+    background-color: transparent;
+  }
+
+  .overlay-interactive {
     pointer-events: auto;
   }
 
-  .overlay-inactive {
+  .overlay-noninteractive {
     pointer-events: none;
   }
 
@@ -190,39 +217,44 @@
     outline: none;
   }
 
+  /* --sheet-top/-right/-bottom/-left all default to the previous hardcoded
+     edge-to-edge values below, so an unconfigured Sheet renders unchanged.
+     Overriding one (e.g. --sheet-top to clear a fixed header, or --sheet-bottom:
+     auto to size to content) turns the panel from an edge-to-edge slide-in into
+     an anchored floating panel, without needing a different component. */
   .sheet-panel.left,
   .sheet-panel.right {
-    top: 0;
-    bottom: 0;
+    top: var(--sheet-top, 0);
+    bottom: var(--sheet-bottom, 0);
     width: var(--sheet-width, 400px);
     max-width: var(--sheet-max-width, 100vw);
   }
 
   .sheet-panel.left {
-    left: 0;
+    left: var(--sheet-left, 0);
     border-right: var(--sheet-border, none);
   }
 
   .sheet-panel.right {
-    right: 0;
+    right: var(--sheet-right, 0);
     border-left: var(--sheet-border, none);
   }
 
   .sheet-panel.top,
   .sheet-panel.bottom {
-    left: 0;
-    right: 0;
+    left: var(--sheet-left, 0);
+    right: var(--sheet-right, 0);
     height: var(--sheet-height, 300px);
     max-height: var(--sheet-max-height, 100vh);
   }
 
   .sheet-panel.top {
-    top: 0;
+    top: var(--sheet-top, 0);
     border-bottom: var(--sheet-border, none);
   }
 
   .sheet-panel.bottom {
-    bottom: 0;
+    bottom: var(--sheet-bottom, 0);
     border-top: var(--sheet-border, none);
   }
 

package/dist/Sheet/properties.d.ts

@@ -9,6 +9,14 @@ export type OptionalSheetProperties = {
     side?: SheetSide;
     title?: string;
     showOverlay?: boolean;
+    /**
+     * Whether clicking outside the panel dismisses the sheet, independent of
+     * `showOverlay`'s visual tint. Defaults to mirroring `showOverlay`, so
+     * existing behavior is unchanged unless this is set explicitly. Set this to
+     * `true` alongside `showOverlay={false}` for a dismissible sheet with no
+     * dimming backdrop — e.g. an anchored dropdown-style panel.
+     */
+    dismissOnOutsideClick?: boolean;
     showCloseButton?: boolean;
     testId?: string;
     footer?: Snippet;

package/dist/Status/Status.svelte

@@ -9,13 +9,20 @@
     statusDescription = '',
     buttonProperties,
     classes,
-    onbuttonClick
+    onbuttonClick,
+    icon
   }: StatusProperties = $props();
 </script>
 
 <div class="background {classes ?? ''}">
   <div class="order-status">
-    <div class="status-image"><Img src={statusIcon} alt="status" /></div>
+    <div class="status-image">
+      {#if icon}
+        {@render icon()}
+      {:else}
+        <Img src={statusIcon} alt="status" />
+      {/if}
+    </div>
     <div class="status-text">{statusText}</div>
     <div class="status-description">
       <!-- eslint-disable-next-line -->

package/dist/Status/properties.d.ts

@@ -1,10 +1,17 @@
+import type { Snippet } from 'svelte';
 import type { ButtonProperties } from '../Button/properties';
 export type StatusProperties = StatusEventProperties & {
-    statusIcon: string;
+    statusIcon?: string;
     statusText: string;
     statusDescription: string;
     buttonProperties?: ButtonProperties;
     classes?: string;
+    /**
+     * Custom media rendered instead of the default `statusIcon` image — e.g. a
+     * `LottiePlayer` for animated success/failure/in-progress states. Takes
+     * priority over `statusIcon` when provided.
+     */
+    icon?: Snippet;
 };
 export type StatusEventProperties = {
     onbuttonClick?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.84.1",
+  "version": "2.86.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",