@likable-hair/svelte 3.3.30 → 3.3.32

package/dist/components/composed/buttons/ActivableButton.svelte

@@ -1,5 +1,9 @@
-<script>import Button from "../../simple/buttons/Button.svelte";
-export let active = false, buttonProps = {};
+<script lang="ts">
+  import Button from "../../simple/buttons/Button.svelte";
+  import type { ComponentProps } from "svelte";
+
+  export let active: boolean = false,
+    buttonProps: ComponentProps<Button> = {}
 </script>
 
 <Button

package/dist/components/composed/buttons/ActivableButton.svelte.d.ts

@@ -1,34 +1,38 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        active?: boolean | undefined;
-        buttonProps?: {
-            [x: string]: any;
-            class?: string | undefined;
-            buttonType?: "default" | "text" | "icon" | undefined;
-            type?: "submit" | "button" | undefined;
-            loading?: boolean | undefined;
-            icon?: string | undefined;
-            tabindex?: number | null | undefined;
-            disabled?: boolean | undefined;
-            buttonElement?: HTMLElement | undefined;
-        } | undefined;
+import Button from "../../simple/buttons/Button.svelte";
+import type { ComponentProps } from "svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        click: CustomEvent<{
-            nativeEvent: MouseEvent;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        append: {};
-    };
-};
-export type ActivableButtonProps = typeof __propDef.props;
-export type ActivableButtonEvents = typeof __propDef.events;
-export type ActivableButtonSlots = typeof __propDef.slots;
-export default class ActivableButton extends SvelteComponent<ActivableButtonProps, ActivableButtonEvents, ActivableButtonSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const ActivableButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    active?: boolean;
+    buttonProps?: ComponentProps<Button>;
+}, {
+    default: {};
+    append: {};
+}>, {
+    click: CustomEvent<{
+        nativeEvent: MouseEvent;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    append: {};
+}, {}, string>;
+type ActivableButton = InstanceType<typeof ActivableButton>;
+export default ActivableButton;

package/dist/components/composed/common/MenuOrDrawer.svelte

@@ -1,26 +1,33 @@
-<script>import "../../../css/main.css";
-import Drawer from "../../simple/navigation/Drawer.svelte";
-import Menu from "../../simple/common/Menu.svelte";
-import MediaQuery from "../../simple/common/MediaQuery.svelte";
-import lodash from "lodash";
-export let open = false, drawerProps = void 0, menuProps = void 0;
-const menuPropsDefaultValue = {
-  closeOnClickOutside: true,
-  _boxShadow: "rgb(var(--global-color-grey-900), .5) 0px 2px 4px",
-  _height: "fit-content",
-  _minWidth: "100px",
-  _borderRadius: "5px",
-  _width: "",
-  anchor: "bottom-center",
-  stayInViewport: true
-};
-$:
-  finalMenuProps = lodash.clone(lodash.merge(menuPropsDefaultValue, menuProps));
-const drawerPropsDefaultValue = {
-  position: "bottom"
-};
-$:
-  finalDrawerProps = lodash.clone(lodash.merge(drawerPropsDefaultValue, drawerProps));
+<script lang="ts">
+  import '../../../css/main.css'
+  import Drawer from '../../simple/navigation/Drawer.svelte';
+  import Menu from '../../simple/common/Menu.svelte';
+  import MediaQuery from '../../simple/common/MediaQuery.svelte';
+  import type { ComponentProps } from 'svelte';
+  import lodash from 'lodash'
+
+  export let open: boolean = false,
+    drawerProps: Omit<ComponentProps<Drawer>, 'open'> | undefined = undefined,
+    menuProps: Omit<ComponentProps<Menu>, 'open'> | undefined = undefined
+
+  const menuPropsDefaultValue = {
+    closeOnClickOutside: true,
+    _boxShadow: "rgb(var(--global-color-grey-900), .5) 0px 2px 4px",
+    _height: "fit-content",
+    _minWidth: "100px",
+    _borderRadius: "5px",
+    _width: "",
+    anchor: 'bottom-center',
+    stayInViewport: true
+  }
+
+  $: finalMenuProps = lodash.clone(lodash.merge(menuPropsDefaultValue, menuProps))
+
+  const drawerPropsDefaultValue = {
+    position: 'bottom'
+  }
+
+  $: finalDrawerProps = lodash.clone(lodash.merge(drawerPropsDefaultValue, drawerProps))
 </script>
 
 <MediaQuery let:mAndDown>

package/dist/components/composed/common/MenuOrDrawer.svelte.d.ts

@@ -1,32 +1,46 @@
-import { SvelteComponent } from "svelte";
 import '../../../css/main.css';
 import Drawer from '../../simple/navigation/Drawer.svelte';
 import Menu from '../../simple/common/Menu.svelte';
 import type { ComponentProps } from 'svelte';
-declare const __propDef: {
-    props: {
-        open?: boolean | undefined;
-        drawerProps?: Omit<ComponentProps<Drawer>, 'open'> | undefined;
-        menuProps?: Omit<ComponentProps<Menu>, 'open'> | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        close: CustomEvent<{}>;
-        'item-click': CustomEvent<{
-            item: import("../../simple/navigation/Navigator.svelte").Item;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const MenuOrDrawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    open?: boolean;
+    drawerProps?: Omit<ComponentProps<Drawer>, "open"> | undefined;
+    menuProps?: Omit<ComponentProps<Menu>, "open"> | undefined;
+}, {
+    default: {
+        isDrawer: boolean;
+        isMenu: boolean;
     };
-    slots: {
-        default: {
-            isDrawer: boolean;
-            isMenu: boolean;
-        };
+}>, {
+    close: CustomEvent<{}>;
+    'item-click': CustomEvent<{
+        item: import("../../simple/navigation/Navigator.svelte").Item;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        isDrawer: boolean;
+        isMenu: boolean;
     };
-};
-export type MenuOrDrawerProps = typeof __propDef.props;
-export type MenuOrDrawerEvents = typeof __propDef.events;
-export type MenuOrDrawerSlots = typeof __propDef.slots;
-export default class MenuOrDrawer extends SvelteComponent<MenuOrDrawerProps, MenuOrDrawerEvents, MenuOrDrawerSlots> {
-}
-export {};
+}, {}, string>;
+type MenuOrDrawer = InstanceType<typeof MenuOrDrawer>;
+export default MenuOrDrawer;

package/dist/components/composed/common/MenuOrDrawerOptions.svelte

@@ -1,36 +1,45 @@
-<script context="module"></script>
-
-<script>import "../../../css/main.css";
-import MenuOrDrawer from "./MenuOrDrawer.svelte";
-import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
-import lodash from "lodash";
-export let open = false, elements = [], drawerProps = void 0, menuProps = void 0;
-let selected;
-let focused;
-$:
-  if (!!selected)
-    selected = void 0;
-$:
-  if (!!focused && !open)
-    focused = void 0;
-const menuPropsDefaultValue = {
-  anchor: "bottom-center",
-  stayInViewport: true,
-  flipOnOverflow: false,
-  _boxShadow: "rgb(var(--global-color-grey-900), .5) 0px 2px 4px",
-  _height: "fit-content",
-  _maxHeight: void 0,
-  _minWidth: "100px",
-  _borderRadius: "5px",
-  openingId: void 0
-};
-$:
-  finalMenuProps = lodash.clone(lodash.merge(menuPropsDefaultValue, menuProps));
-const drawerPropsDefaultValue = {
-  position: "bottom"
-};
-$:
-  finalDrawerProps = lodash.clone(lodash.merge(drawerPropsDefaultValue, drawerProps));
+<script lang="ts" context="module">
+  export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
+</script>
+
+<script lang="ts">
+  import '../../../css/main.css'
+  import type { ComponentProps } from 'svelte';
+  import MenuOrDrawer from "./MenuOrDrawer.svelte";
+  import type Drawer from '../../simple/navigation/Drawer.svelte';
+  import type Menu from '../../simple/common/Menu.svelte';
+  import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
+  import lodash from 'lodash'
+
+  export let open: boolean = false,
+    elements: ComponentProps<SelectableVerticalList>['elements'] = [],
+    drawerProps: Omit<ComponentProps<Drawer>, 'open'> | undefined = undefined,
+    menuProps: Omit<ComponentProps<Menu>, 'open'> | undefined = undefined
+
+  let selected: ArrayElement<NonNullable<ComponentProps<SelectableVerticalList>['elements']>>['name'] | undefined
+  let focused: ArrayElement<NonNullable<ComponentProps<SelectableVerticalList>['elements']>>['name'] | undefined
+  $: if(!!selected) selected = undefined
+  $: if(!!focused && !open) focused = undefined
+
+  const menuPropsDefaultValue = {
+    anchor: 'bottom-center',
+    stayInViewport: true,
+    flipOnOverflow: false,
+    _boxShadow: "rgb(var(--global-color-grey-900), .5) 0px 2px 4px",
+    _height: 'fit-content',
+    _maxHeight: undefined,
+    _minWidth: '100px',
+    _borderRadius: '5px',
+    openingId: undefined
+  }
+
+  $: finalMenuProps = lodash.clone(lodash.merge(menuPropsDefaultValue, menuProps))
+
+  const drawerPropsDefaultValue = {
+    position: 'bottom'
+  }
+
+  $: finalDrawerProps = lodash.clone(lodash.merge(drawerPropsDefaultValue, drawerProps))
 </script>
 
 <MenuOrDrawer

package/dist/components/composed/common/MenuOrDrawerOptions.svelte.d.ts

@@ -1,29 +1,33 @@
-import { SvelteComponent } from "svelte";
 export type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
 import '../../../css/main.css';
 import type { ComponentProps } from 'svelte';
 import type Drawer from '../../simple/navigation/Drawer.svelte';
 import type Menu from '../../simple/common/Menu.svelte';
 import SelectableVerticalList from '../../simple/lists/SelectableVerticalList.svelte';
-declare const __propDef: {
-    props: {
-        open?: boolean | undefined;
-        elements?: ComponentProps<SelectableVerticalList>['elements'];
-        drawerProps?: Omit<ComponentProps<Drawer>, 'open'> | undefined;
-        menuProps?: Omit<ComponentProps<Menu>, 'open'> | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        select: CustomEvent<{
-            element: import("../../simple/lists/SelectableVerticalList.svelte").Element;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type MenuOrDrawerOptionsProps = typeof __propDef.props;
-export type MenuOrDrawerOptionsEvents = typeof __propDef.events;
-export type MenuOrDrawerOptionsSlots = typeof __propDef.slots;
-export default class MenuOrDrawerOptions extends SvelteComponent<MenuOrDrawerOptionsProps, MenuOrDrawerOptionsEvents, MenuOrDrawerOptionsSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const MenuOrDrawerOptions: $$__sveltets_2_IsomorphicComponent<{
+    open?: boolean;
+    elements?: ComponentProps<SelectableVerticalList>["elements"];
+    drawerProps?: Omit<ComponentProps<Drawer>, "open"> | undefined;
+    menuProps?: Omit<ComponentProps<Menu>, "open"> | undefined;
+}, {
+    select: CustomEvent<{
+        element: import("../../simple/lists/SelectableVerticalList.svelte").Element;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MenuOrDrawerOptions = InstanceType<typeof MenuOrDrawerOptions>;
+export default MenuOrDrawerOptions;

package/dist/components/composed/common/QuickActions.svelte

@@ -1,29 +1,93 @@
-<script context="module"></script>
+<script context="module" lang="ts">
+  export type Action = {
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    info?: string;
+    disabledInfo?: string
+    onClick: (e: CustomEvent<{ nativeEvent: MouseEvent }>) => void;
+  };
+</script>
+
+<script lang="ts">
+  import { Button, Icon, mediaQuery, ToolTip } from "../../..";
+  import { fly } from "svelte/transition";
+  import { cubicIn } from "svelte/easing";
+  import MenuOrDrawer from "./MenuOrDrawer.svelte";
+  import './QuickActions.css'
+  import { createEventDispatcher } from "svelte";
+
+  export let selectedItems: number,
+    disabled: boolean,
+    actionsForSelectedItems: Action[],
+    position: 'top' | 'bottom' = 'top',
+    lang: 'it' | 'en' = 'en'
+    
+  let actions: Action[] = [],
+    extraActions: Action[] = [],
+    slotSelectActionsContainer: HTMLElement | undefined,
+    moreActionsActivator: HTMLElement | undefined,
+    openMoreActions: boolean = false,
+    infoActivators: { [actionLabel: string]: HTMLElement } = {},
+    disabledInfoActivators: { [actionLabel: string]: HTMLElement } = {};
+
+  const dispatch = createEventDispatcher<{
+    close: {}
+  }>()
+
+  $: {
+    if (!!slotSelectActionsContainer) {
+      let numberOfSplit = $mediaQuery.xl ? 5 :
+        $mediaQuery.l ? 4 :
+        $mediaQuery.m ? 2 :
+        $mediaQuery.s ? 0 :
+        $mediaQuery.xs ? 0 : 3
 
-<script>import { Button, Icon, mediaQuery, ToolTip } from "../../..";
-import { fly } from "svelte/transition";
-import { cubicIn } from "svelte/easing";
-import MenuOrDrawer from "./MenuOrDrawer.svelte";
-import "./QuickActions.css";
-import { createEventDispatcher } from "svelte";
-export let selectedItems, disabled, actionsForSelectedItems, position = "top", lang = "en";
-let actions = [], extraActions = [], slotSelectActionsContainer, moreActionsActivator, openMoreActions = false, infoActivators = {}, disabledInfoActivators = {};
-const dispatch = createEventDispatcher();
-$: {
-  if (!!slotSelectActionsContainer) {
-    let numberOfSplit = $mediaQuery.xl ? 5 : $mediaQuery.l ? 4 : $mediaQuery.m ? 2 : $mediaQuery.s ? 0 : $mediaQuery.xs ? 0 : 3;
-    if (actionsForSelectedItems.length > numberOfSplit) {
-      extraActions = actionsForSelectedItems.slice(numberOfSplit);
-      actions = actionsForSelectedItems.slice(0, numberOfSplit);
-    } else {
-      actions = actionsForSelectedItems;
-      extraActions = [];
+      if (actionsForSelectedItems.length > numberOfSplit) {
+        extraActions = actionsForSelectedItems.slice(numberOfSplit);
+        actions = actionsForSelectedItems.slice(0, numberOfSplit);
+      } else {
+        actions = actionsForSelectedItems;
+        extraActions = [];
+      }
     }
   }
-}
 </script>
 
 {#if selectedItems > 0}
+  {#each actions as action}
+    {#if !!action.info && !action.disabled}
+      <ToolTip
+        appearTimeout={500}
+        activator={infoActivators[action.label]}
+      >
+        <div
+          style:background-color='rgb(var(--global-color-background-300), .95)'
+          style:border-radius="5px"
+          style:padding="10px"
+          style:color='rgb(var(--global-color-contrast-900))'
+        > 
+          {action.info}
+        </div>
+      </ToolTip>
+    {/if}
+    {#if !!action.disabledInfo && action.disabled}
+      <ToolTip
+        appearTimeout={300}
+        activator={disabledInfoActivators[action.label]}
+      >
+        <div
+          style:background-color='rgb(var(--global-color-background-300), .95)'
+          style:border-radius="5px"
+          style:padding="10px"
+          style:color='rgb(var(--global-color-contrast-900))'
+        > 
+          {action.disabledInfo}
+        </div>
+      </ToolTip>
+    {/if}
+  {/each}
   <div
     class="container-{position}"
     transition:fly={{ delay: 150, duration: 150, y: -10, easing: cubicIn }}
@@ -70,36 +134,8 @@ $: {
                       --icon-size="16px"
                     />
                   </div>
-                  <ToolTip
-                    appearTimeout={500}
-                    activator={infoActivators[action.label]}
-                  >
-                    <div
-                      style:background-color='rgb(var(--global-color-background-300), .95)'
-                      style:border-radius="5px"
-                      style:padding="10px"
-                      style:color='rgb(var(--global-color-contrast-900))'
-                    > 
-                      {action.info}
-                    </div>
-                  </ToolTip>
                 {/if}
                 {action.label}
-                {#if !!action.disabledInfo && action.disabled}
-                  <ToolTip
-                    appearTimeout={300}
-                    activator={disabledInfoActivators[action.label]}
-                  >
-                    <div
-                      style:background-color='rgb(var(--global-color-background-300), .95)'
-                      style:border-radius="5px"
-                      style:padding="10px"
-                      style:color='rgb(var(--global-color-contrast-900))'
-                    > 
-                      {action.disabledInfo}
-                    </div>
-                  </ToolTip>
-                {/if}
               </div>
             </Button>
           {/each}

package/dist/components/composed/common/QuickActions.svelte.d.ts

@@ -1,4 +1,3 @@
-import { SvelteComponent } from "svelte";
 export type Action = {
     label: string;
     icon?: string;
@@ -11,24 +10,29 @@ export type Action = {
     }>) => void;
 };
 import './QuickActions.css';
-declare const __propDef: {
-    props: {
-        selectedItems: number;
-        disabled: boolean;
-        actionsForSelectedItems: Action[];
-        position?: "bottom" | "top" | undefined;
-        lang?: "it" | "en" | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        close: CustomEvent<{}>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type QuickActionsProps = typeof __propDef.props;
-export type QuickActionsEvents = typeof __propDef.events;
-export type QuickActionsSlots = typeof __propDef.slots;
-export default class QuickActions extends SvelteComponent<QuickActionsProps, QuickActionsEvents, QuickActionsSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const QuickActions: $$__sveltets_2_IsomorphicComponent<{
+    selectedItems: number;
+    disabled: boolean;
+    actionsForSelectedItems: Action[];
+    position?: "top" | "bottom";
+    lang?: "it" | "en";
+}, {
+    close: CustomEvent<{}>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type QuickActions = InstanceType<typeof QuickActions>;
+export default QuickActions;

package/dist/components/composed/common/ToolTip.svelte

@@ -1,32 +1,41 @@
-<script>import "../../../css/main.css";
-import Menu from "../../simple/common/Menu.svelte";
-export let activator, menuOpen = false, menuProps = {}, appearTimeout = void 0;
-let mouseEnterHandler = void 0, mouseLeaveHandler = void 0, appearTimeoutId = void 0;
-$:
-  if (!!activator) {
-    if (!!mouseEnterHandler)
-      activator.removeEventListener("mouseenter", mouseEnterHandler);
-    if (!!mouseLeaveHandler)
-      activator.removeEventListener("mouseleave", mouseLeaveHandler);
+<script lang="ts">
+  import '../../../css/main.css'
+  import Menu from "../../simple/common/Menu.svelte";
+  import type { ComponentProps } from 'svelte';
+
+  export let activator: HTMLElement,
+    menuOpen: boolean = false,
+    menuProps: ComponentProps<Menu> = {},
+    appearTimeout: number | undefined = undefined
+
+  let mouseEnterHandler: (() => void) | undefined = undefined,
+    mouseLeaveHandler: (() => void) | undefined = undefined,
+    appearTimeoutId: NodeJS.Timeout | undefined = undefined
+
+  $: if(!!activator) {
+    if(!!mouseEnterHandler) activator.removeEventListener('mouseenter', mouseEnterHandler)
+    if(!!mouseLeaveHandler) activator.removeEventListener('mouseleave', mouseLeaveHandler)
+
     mouseEnterHandler = () => {
-      if (appearTimeout !== void 0) {
-        if (appearTimeoutId !== void 0)
-          clearTimeout(appearTimeoutId);
+      if(appearTimeout !== undefined) {
+        if(appearTimeoutId !== undefined) clearTimeout(appearTimeoutId)
+
         appearTimeoutId = setTimeout(() => {
-          menuOpen = true;
+          menuOpen = true
         }, appearTimeout);
       } else {
-        menuOpen = true;
+        menuOpen = true
       }
-    };
-    activator.addEventListener("mouseenter", mouseEnterHandler);
+    }
+    activator.addEventListener('mouseenter', mouseEnterHandler)
+
     mouseLeaveHandler = () => {
-      if (appearTimeoutId !== void 0)
-        clearTimeout(appearTimeoutId);
-      menuOpen = false;
-    };
-    activator.addEventListener("mouseleave", mouseLeaveHandler);
+      if(appearTimeoutId !== undefined) clearTimeout(appearTimeoutId)
+      menuOpen = false
+    }
+    activator.addEventListener('mouseleave', mouseLeaveHandler)
   }
+
 </script>
 
 <Menu