flowbite-svelte 0.27.5 → 0.27.8

package/utils/Popper.svelte

@@ -60,7 +60,7 @@ function init(node, _triggerEl) {
             {
                 name: 'offset',
                 options: {
-                    offset: ({ placement, reference, popper }) => {
+                    offset: ({ reference, popper }) => {
                         // for full screen mega menu
                         return [yOnly ? popper.width / 2 - reference.width / 2 - reference.x : 0, offset];
                     }
@@ -112,25 +112,28 @@ onMount(() => {
         });
     };
 });
+function optional(pred, func) {
+    return pred && func;
+}
 </script>
 
 {#if !triggerEl}
-	<div id="empty" bind:this={contentEl} />
+  <div bind:this={contentEl} />
 {/if}
 
 {#if open && triggerEl}
-	<Frame
-		use={init}
-		options={triggerEl}
-		role="tooltip"
-		tabIndex={activeContent ? -1 : undefined}
-		on:focusin={activeContent ? showHandler : undefined}
-		on:focusout={activeContent ? hideHandler : undefined}
-		on:mouseenter={activeContent && !clickable ? showHandler : undefined}
-		on:mouseleave={activeContent && !clickable ? hideHandler : undefined}
-		{...$$restProps}
-		class={classNames('z-10 outline-none', $$props.class)}>
-		<slot />
-		{#if arrow}<div data-popper-arrow class="tooltip-arrow"/>{/if}
-	</Frame>
+  <Frame
+    use={init}
+    options={triggerEl}
+    role="tooltip"
+    tabIndex={activeContent ? -1 : undefined}
+    on:focusin={optional(activeContent, showHandler)}
+    on:focusout={optional(activeContent, hideHandler)}
+    on:mouseenter={optional(activeContent && !clickable, showHandler)}
+    on:mouseleave={optional(activeContent && !clickable, hideHandler)}
+    {...$$restProps}
+    class={classNames('z-10 outline-none', $$props.class)}>
+    <slot />
+    {#if arrow}<div data-popper-arrow class="tooltip-arrow border dark:border-gray-100" />{/if}
+  </Frame>
 {/if}

package/utils/focusTrap.js

@@ -1,18 +1,17 @@
 //
-// Focus trap copied from https://uxdesign.cc/how-to-trap-focus-inside-modal-to-make-it-ada-compliant-6a50f9a70700
+// Taken from github.com/carbon-design-system/carbon/packages/react/src/internal/keyboard/navigation.js
 //
 
 // add all the elements inside modal which you want to make focusable
-const focusableElements =
-  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-
-function getFocusable(node) {
-  const focusableContent = node.querySelectorAll(focusableElements);
-  return [focusableContent[0], focusableContent[focusableContent.length - 1]];
-}
+const selectorTabbable = `
+  a[href], area[href], input:not([disabled]):not([tabindex='-1']),
+  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
+  textarea:not([disabled]):not([tabindex='-1']),
+  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]
+`;
 
 export default function focusTrap(node) {
-  let firstFocusableElement, lastFocusableElement; // first and last element to be focused inside modal
+  const tabbable = Array.from(node.querySelectorAll(selectorTabbable));
 
   function handleFocusTrap(e) {
     let isTabPressed = e.key === 'Tab' || e.keyCode === 9;
@@ -21,23 +20,15 @@ export default function focusTrap(node) {
       return;
     }
 
-    if (e.shiftKey) {
-      // if shift key pressed for shift + tab combination
-      if (document.activeElement === firstFocusableElement) {
-        lastFocusableElement.focus(); // add focus for the last focusable element
-        e.preventDefault();
-      }
-    } else {
-      // if tab key is pressed
-      if (document.activeElement === lastFocusableElement) {
-        // if focused has reached to last focusable element then focus first focusable element after pressing tab
-        firstFocusableElement.focus(); // add focus for the first focusable element
-        e.preventDefault();
-      }
-    }
+    let index = tabbable.indexOf(document.activeElement);
+    if (index === -1 && e.shiftKey) index = 0;
+    index += tabbable.length + (e.shiftKey ? -1 : 1);
+    index %= tabbable.length;
+    tabbable[index].focus();
+
+    e.preventDefault();
   }
 
-  [firstFocusableElement, lastFocusableElement] = getFocusable(node);
   document.addEventListener('keydown', handleFocusTrap, true);
 
   return {

package/tabs/TabContentItem.svelte

@@ -1,10 +0,0 @@
-<script>export let activeTabValue;
-export let id;
-export let contentDivClass = 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800';
-</script>
-
-{#if activeTabValue === id}
-	<div class={contentDivClass} id="{id}-tabitem" role="tabpanel" aria-labelledby="{id}-tab">
-		<slot />
-	</div>
-{/if}

package/tabs/TabContentItem.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        activeTabValue: number;
-        id: number;
-        contentDivClass?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type TabContentItemProps = typeof __propDef.props;
-export declare type TabContentItemEvents = typeof __propDef.events;
-export declare type TabContentItemSlots = typeof __propDef.slots;
-export default class TabContentItem extends SvelteComponentTyped<TabContentItemProps, TabContentItemEvents, TabContentItemSlots> {
-}
-export {};

package/tabs/TabWrapper.svelte

@@ -1,8 +0,0 @@
-<script>import classNames from 'classnames';
-export let divClass = 'w-full';
-export let tabStyle = 'default';
-</script>
-
-<div class={classNames(divClass, $$props.class)}>
-  <slot {tabStyle} />
-</div>

package/tabs/TabWrapper.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        divClass?: string | undefined;
-        tabStyle?: "default" | "icon" | "custom" | "pill" | "underline" | "full" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            tabStyle: "default" | "icon" | "custom" | "pill" | "underline" | "full";
-        };
-    };
-};
-export declare type TabWrapperProps = typeof __propDef.props;
-export declare type TabWrapperEvents = typeof __propDef.events;
-export declare type TabWrapperSlots = typeof __propDef.slots;
-export default class TabWrapper extends SvelteComponentTyped<TabWrapperProps, TabWrapperEvents, TabWrapperSlots> {
-}
-export {};