@hashrytech/quick-components-kit 0.8.4 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hashrytech/quick-components-kit
 
+## 0.9.0
+
+### Minor Changes
+
+- feat: Adding new disable scroll and onkeyboard actions along with updates to Modal, Drawer and Overlay
+
+## 0.8.5
+
+### Patch Changes
+
+- fix: scroll disable fix for overlay component
+
 ## 0.8.4
 
 ### Patch Changes

package/dist/actions/disable-scroll.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Svelte action to disable page scroll while preserving scrollbar to avoid layout shift.
+ * Now supports toggling scroll lock on update.
+ */
+export declare function disableScroll(node: HTMLElement, disableBodyScroll?: boolean): {
+    update(newValue: boolean): void;
+    destroy(): void;
+};

package/dist/actions/disable-scroll.js

@@ -0,0 +1,37 @@
+/**
+ * Svelte action to disable page scroll while preserving scrollbar to avoid layout shift.
+ * Now supports toggling scroll lock on update.
+ */
+export function disableScroll(node, disableBodyScroll = true) {
+    const scrollTop = window.scrollY;
+    const originalBodyPosition = document.body.style.position;
+    const originalBodyWidth = document.body.style.width;
+    const originalTop = document.body.style.top;
+    const originalOverflow = document.documentElement.style.overflowY;
+    function applyLock() {
+        document.body.style.top = `-${scrollTop}px`;
+        document.documentElement.style.overflowY = 'scroll';
+        document.body.style.position = 'fixed';
+        document.body.style.width = '100%';
+    }
+    function removeLock() {
+        document.body.style.position = originalBodyPosition;
+        document.body.style.width = originalBodyWidth;
+        document.body.style.top = originalTop;
+        document.documentElement.style.overflowY = originalOverflow;
+        window.scrollTo(0, scrollTop);
+    }
+    if (node && disableBodyScroll)
+        applyLock();
+    return {
+        update(newValue) {
+            if (newValue)
+                applyLock();
+            else
+                removeLock();
+        },
+        destroy() {
+            removeLock();
+        }
+    };
+}

package/dist/actions/on-keydown.d.ts

@@ -0,0 +1,11 @@
+export type KeyHandler = {
+    key: string;
+    callback: (event: KeyboardEvent) => void;
+};
+/**
+ * Action to call a function callback when a specific key is pressed.
+ */
+export declare function onKeydown(node: HTMLElement, { key, callback }: KeyHandler): {
+    update(newParams: KeyHandler): void;
+    destroy(): void;
+} | undefined;

package/dist/actions/on-keydown.js

@@ -0,0 +1,24 @@
+/**
+ * Action to call a function callback when a specific key is pressed.
+ */
+export function onKeydown(node, { key, callback }) {
+    if (typeof window === 'undefined' || !node)
+        return;
+    const handle = (event) => {
+        if (event.key === key) {
+            callback(event);
+        }
+    };
+    window.addEventListener('keydown', handle);
+    return {
+        update(newParams) {
+            window.removeEventListener('keydown', handle);
+            key = newParams.key;
+            callback = newParams.callback;
+            window.addEventListener('keydown', handle);
+        },
+        destroy() {
+            window.removeEventListener('keydown', handle);
+        }
+    };
+}

package/dist/drawer/Drawer.svelte

@@ -1,9 +1,10 @@
 <script lang="ts" module>    
-	  import { onDestroy, onMount, type Snippet } from 'svelte';
+	  import { type Snippet } from 'svelte';
     import type { ClassNameValue } from 'tailwind-merge';
-    import { fade, fly } from 'svelte/transition';
+    import { fly } from 'svelte/transition';
     import {twMerge} from 'tailwind-merge';
-	  import { browser } from '$app/environment';
+    import Overlay from '../overlay/Overlay.svelte';
+    import { onKeydown } from '../actions/on-keydown.js';
     
     export type DrawerProps = {
       open?: boolean;
@@ -36,46 +37,26 @@
     bottom: "bottom-0 left-0 right-0 h-60",
   };
 
-  const lockScroll = () => document.body.style.overflow = 'hidden';
-  const unlockScroll = () => document.body.style.overflow = '';
-
-  $effect(() => {
-		if (open && disableBodyScroll) lockScroll(); else unlockScroll();
-	});
-
-  onMount(() => {
-    if(browser){
-      window.addEventListener('keydown', handleKeydown);
-    }
-  });
-
-  onDestroy(() => {
-    if(browser){
-      window.removeEventListener('keydown', handleKeydown);
-    }
-  });
-  
-
-  export function closeDrawer() {
-    open = false;
-  };
-
   function handleKeydown (event: { key: string; }) {
-    if(open && escapeKeyClose && event.key === "Escape") {
+    if(open && escapeKeyClose) {
       closeDrawer();
     }
   };
 
+  export function closeDrawer() {
+    open = false;
+  };  
+
 </script>
 
 {#if open}
-<!-- Overlay -->
-<div transition:fade={{duration: transitionDuration}} class={twMerge("fixed inset-0 bg-overlay-primary", overlayClasses)} role="presentation" onclick={() => open = false}></div>
+<Overlay {transitionDuration} {disableBodyScroll} class={overlayClasses} onclick={() => open = false} />
 
 <div role="dialog" aria-modal="true" aria-label={ariaLabel} tabindex="{open ? 0 : -1}" aria-hidden="{!open}" 
   class={twMerge("fixed flex flex-col items-center gap-2 bg-white outline-0 focus:outline-0 active:outline-focus-primary focus:outline-focus-primary overflow-y-auto", postionClasses[position], props.class)}
   in:fly={transitionProperties}
-  out:fly={transitionProperties}>
+  out:fly={transitionProperties}
+  use:onKeydown={{key: "Escape", callback: handleKeydown}}>
   {@render children?.()}
 </div>
 {/if}

package/dist/index.d.ts

@@ -5,3 +5,5 @@ export * from './hamburger-menu/index.js';
 export * from './drawer/index.js';
 export * from './modal/index.js';
 export * from './overlay/index.js';
+export * from './actions/disable-scroll.js';
+export * from './actions/on-keydown.js';

package/dist/index.js

@@ -7,4 +7,6 @@ export * from './hamburger-menu/index.js';
 export * from './drawer/index.js';
 export * from './modal/index.js';
 export * from './overlay/index.js';
+export * from './actions/disable-scroll.js';
+export * from './actions/on-keydown.js';
 // Add more components here...

package/dist/modal/Modal.svelte

@@ -4,6 +4,8 @@
     import { fade } from 'svelte/transition';
     import {twMerge} from 'tailwind-merge';
 	  import { browser } from '$app/environment';
+	import Overlay from '../overlay/Overlay.svelte';
+	import { onKeydown } from '../actions/on-keydown.js';
     
     export type ModalProps = {
       open?: boolean;
@@ -19,27 +21,8 @@
 </script>
 
 <script lang="ts">
-  let {open=$bindable(false), escapeKeyClose=true, disableBodyScroll=true, overlayTransitionDuration=0, ariaLabel="Modal", overlayClasses="", children, ...props}: ModalProps = $props();
-
-  const lockScroll = () => document.body.style.overflow = 'hidden';
-  const unlockScroll = () => document.body.style.overflow = '';
-
-  $effect(() => {
-		if (open && disableBodyScroll) lockScroll(); else unlockScroll();
-	});
-
-  onMount(() => {
-    if(browser){
-      window.addEventListener('keydown', handleKeydown);
-    }
-  });
-
-  onDestroy(() => {
-    if(browser){
-      window.removeEventListener('keydown', handleKeydown);
-    }
-  });
-
+  let {open=$bindable(false), escapeKeyClose=true, disableBodyScroll=true, overlayTransitionDuration=100, ariaLabel="Modal", overlayClasses="", children, ...props}: ModalProps = $props();
+  
   export function closeModal() {
     open = false;
   };
@@ -53,11 +36,11 @@
 </script>
 
 {#if open}
-<!-- Overlay -->
-<div transition:fade={{duration: overlayTransitionDuration}} class={twMerge("fixed inset-0 bg-overlay-primary", overlayClasses)} role="presentation" onclick={() => open = false}></div>
+<Overlay transitionDuration={overlayTransitionDuration} {disableBodyScroll} class={overlayClasses} onclick={() => open = false} />
 
 <div role="dialog" aria-modal="true" aria-label={ariaLabel} tabindex="{open ? 0 : -1}" aria-hidden="{!open}" 
-  class={twMerge("fixed bg-white top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 outline-0 focus:outline-0 active:outline-focus-primary focus:outline-focus-primary overflow-y-auto w-full max-w-md h-96", props.class)}>
+  class={twMerge("fixed bg-white rounded top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 outline-0 focus:outline-0 active:outline-focus-primary focus:outline-focus-primary overflow-y-auto w-full max-w-md h-96", props.class)}
+  use:onKeydown={{key: "Escape", callback: handleKeydown}}>
   {@render children?.()}
 </div>
 {/if}

package/dist/modal/index.d.ts

@@ -1 +1 @@
-export { default as Modal } from './modal.svelte';
+export { default as Modal } from './Modal.svelte';

package/dist/modal/index.js

@@ -1 +1 @@
-export { default as Modal } from './modal.svelte';
+export { default as Modal } from './Modal.svelte';

package/dist/overlay/Overlay.svelte

@@ -1,8 +1,9 @@
 <script lang="ts" module>    
-	  import { type Snippet } from 'svelte';
+	  import { onDestroy, onMount, type Snippet } from 'svelte';
     import type { ClassNameValue } from 'tailwind-merge';
     import { fade } from 'svelte/transition';
     import {twMerge} from 'tailwind-merge';
+    import { disableScroll } from '../actions/disable-scroll.js';
     
     export type OverlayProps = {
       disableBodyScroll?: boolean;
@@ -16,16 +17,10 @@
 </script>
 
 <script lang="ts">
-  let {disableBodyScroll=true, transitionDuration=0, ariaLabel="Modal", onclick, children, ...props}: OverlayProps = $props();
-
-  const lockScroll = () => document.body.style.overflow = 'hidden';
-  const unlockScroll = () => document.body.style.overflow = '';
-
-  $effect(() => {
-		if (disableBodyScroll) lockScroll(); else unlockScroll();
-	});
-
+  let {disableBodyScroll=true, transitionDuration=100, ariaLabel="Overlay", onclick, children, ...props}: OverlayProps = $props();
 </script>
 
-<div transition:fade={{duration: transitionDuration}} class={twMerge("fixed top-0 left-0 right-0 bottom-0 bg-overlay-primary", props.class)} role="presentation" {onclick}></div>
+<div transition:fade={{duration: transitionDuration}} class={twMerge("fixed top-0 left-0 right-0 bottom-0 bg-overlay-primary", props.class)} role="presentation" {onclick} 
+  use:disableScroll={disableBodyScroll}>
+</div>
 

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "git+https://github.com/hashrytech/quick-components-kit.git"
   },
-  "version": "0.8.4",
+  "version": "0.9.0",
   "license": "MIT",
   "author": "Hashry Tech",
   "files": [