@likable-hair/svelte 3.3.29 → 3.3.30

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

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

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

@@ -1,38 +1,34 @@
-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;
+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;
     };
-    z_$$bindings?: Bindings;
+    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> {
 }
-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;
+export {};

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

@@ -1,52 +1,42 @@
-<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';
-
-  export let open: boolean = false,
-    activator: HTMLElement,
-    drawerPosition: ComponentProps<Drawer>['position'] = 'bottom',
-    menuAnchor: ComponentProps<Menu>['anchor'] = 'bottom-center',
-    stayInViewport: ComponentProps<Menu>['stayInViewport'] = true,
-    flipOnOverflow: ComponentProps<Menu>['flipOnOverflow'] = false,
-    _boxShadow: string = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px",
-    _height: string = "fit-content",
-    _width: string | undefined = undefined,
-    _maxHeight: string | undefined = undefined,
-    _minWidth: string = "100px",
-    _borderRadius: string = "5px",
-    openingId: ComponentProps<Menu>['openingId'] = undefined,
-    _drawerOverflow: string | undefined = undefined;
+<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>
 
 <MediaQuery let:mAndDown>
   {#if mAndDown}
     <Drawer
       bind:open={open}
-      bind:position={drawerPosition}
+      {...finalDrawerProps}
       on:close
       on:item-click
-      _overflow={_drawerOverflow}
     >
       <slot isDrawer={true} isMenu={false}></slot>
     </Drawer>
   {:else}
     <Menu
-      bind:activator={activator}
       bind:open={open}
-      closeOnClickOutside
-      _boxShadow={_boxShadow}
-      _height={_height}
-      _maxHeight={_maxHeight}
-      _minWidth={_minWidth}
-      _borderRadius={_borderRadius}
-      _width={_width || ""}
-      anchor={menuAnchor}
-      bind:stayInViewport={stayInViewport}
-      bind:flipOnOverflow={flipOnOverflow}
-      bind:openingId
+      {...finalMenuProps}
     >
       <slot isDrawer={false} isMenu={true}></slot>
     </Menu>

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

@@ -1,57 +1,32 @@
+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';
-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;
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+        drawerProps?: Omit<ComponentProps<Drawer>, 'open'> | undefined;
+        menuProps?: Omit<ComponentProps<Menu>, 'open'> | undefined;
     };
-    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;
-    activator: HTMLElement;
-    drawerPosition?: ComponentProps<Drawer>["position"];
-    menuAnchor?: ComponentProps<Menu>["anchor"];
-    stayInViewport?: ComponentProps<Menu>["stayInViewport"];
-    flipOnOverflow?: ComponentProps<Menu>["flipOnOverflow"];
-    _boxShadow?: string;
-    _height?: string;
-    _width?: string | undefined;
-    _maxHeight?: string | undefined;
-    _minWidth?: string;
-    _borderRadius?: string;
-    openingId?: ComponentProps<Menu>["openingId"];
-    _drawerOverflow?: string | undefined;
-}, {
-    default: {
-        isDrawer: boolean;
-        isMenu: boolean;
+    events: {
+        close: CustomEvent<{}>;
+        'item-click': CustomEvent<{
+            item: import("../../simple/navigation/Navigator.svelte").Item;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
     };
-}>, {
-    close: CustomEvent<{}>;
-    'item-click': CustomEvent<{
-        item: import("../../simple/navigation/Navigator.svelte").Item;
-    }>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {
-        isDrawer: boolean;
-        isMenu: boolean;
+    slots: {
+        default: {
+            isDrawer: boolean;
+            isMenu: boolean;
+        };
     };
-}, {}, string>;
-type MenuOrDrawer = InstanceType<typeof MenuOrDrawer>;
-export default MenuOrDrawer;
+};
+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 {};

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

@@ -1,50 +1,44 @@
-<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';
-
-  export let open: boolean = false,
-    activator: HTMLElement,
-    drawerPosition: ComponentProps<Drawer>['position'] = 'bottom',
-    menuAnchor: ComponentProps<Menu>['anchor'] = 'bottom-center',
-    elements: ComponentProps<SelectableVerticalList>['elements'] = [],
-    stayInViewport: ComponentProps<MenuOrDrawer>['stayInViewport'] = true,
-    flipOnOverflow: ComponentProps<MenuOrDrawer>['flipOnOverflow'] = false,
-    _boxShadow: string = "rgb(var(--global-color-grey-900), .5) 0px 2px 4px",
-    _height: string = "300px",
-    _maxHeight: string | undefined = undefined,
-    _minWidth: string = "100px",
-    _borderRadius: string = "5px",
-    openingId: ComponentProps<MenuOrDrawer>['openingId'] = undefined;
+<script context="module"></script>
 
-  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
+<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>
 
 <MenuOrDrawer
   bind:open
-  bind:activator
-  bind:drawerPosition
-  bind:menuAnchor
-  bind:stayInViewport
-  bind:flipOnOverflow
-  {_boxShadow}
-  {_height}
-  {_maxHeight}
-  {_minWidth}
-  {_borderRadius}
+  drawerProps={finalDrawerProps}
+  menuProps={finalMenuProps}
   let:isDrawer
   --drawer-default-space={`${Math.min(elements?.length || 0, 5) * 56}px`}
-  bind:openingId
 >
   <div class="selectable-list-wrapper">
     <SelectableVerticalList

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

@@ -1,43 +1,29 @@
+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 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';
-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;
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+        elements?: ComponentProps<SelectableVerticalList>['elements'];
+        drawerProps?: Omit<ComponentProps<Drawer>, 'open'> | undefined;
+        menuProps?: Omit<ComponentProps<Menu>, 'open'> | undefined;
     };
-    z_$$bindings?: Bindings;
+    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> {
 }
-declare const MenuOrDrawerOptions: $$__sveltets_2_IsomorphicComponent<{
-    open?: boolean;
-    activator: HTMLElement;
-    drawerPosition?: ComponentProps<Drawer>["position"];
-    menuAnchor?: ComponentProps<Menu>["anchor"];
-    elements?: ComponentProps<SelectableVerticalList>["elements"];
-    stayInViewport?: ComponentProps<MenuOrDrawer>["stayInViewport"];
-    flipOnOverflow?: ComponentProps<MenuOrDrawer>["flipOnOverflow"];
-    _boxShadow?: string;
-    _height?: string;
-    _maxHeight?: string | undefined;
-    _minWidth?: string;
-    _borderRadius?: string;
-    openingId?: ComponentProps<MenuOrDrawer>["openingId"];
-}, {
-    select: CustomEvent<{
-        element: import("../../simple/lists/SelectableVerticalList.svelte").Element;
-    }>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type MenuOrDrawerOptions = InstanceType<typeof MenuOrDrawerOptions>;
-export default MenuOrDrawerOptions;
+export {};

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

@@ -1,58 +1,26 @@
-<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 context="module"></script>
 
-      if (actionsForSelectedItems.length > numberOfSplit) {
-        extraActions = actionsForSelectedItems.slice(numberOfSplit);
-        actions = actionsForSelectedItems.slice(0, numberOfSplit);
-      } else {
-        actions = actionsForSelectedItems;
-        extraActions = [];
-      }
+<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 = [];
     }
   }
+}
 </script>
 
 {#if selectedItems > 0}
@@ -174,11 +142,15 @@
   <div class="menu-or-drawer">
     <MenuOrDrawer
       bind:open={openMoreActions}
-      activator={moreActionsActivator}
-      drawerPosition={position == 'bottom' ? 'top' : 'bottom'}
-      menuAnchor='bottom-center'
-      openingId='more-actions'
-      _drawerOverflow='hidden'
+      menuProps={{
+        activator: moreActionsActivator,
+        anchor: 'bottom-center',
+        openingId: 'more-actions',
+      }}
+      drawerProps={{
+        position: position == 'bottom' ? 'top' : 'bottom',
+        _overflow: 'hidden'  
+      }}
       let:isMenu
       let:isDrawer
     >

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

@@ -1,3 +1,4 @@
+import { SvelteComponent } from "svelte";
 export type Action = {
     label: string;
     icon?: string;
@@ -10,29 +11,24 @@ export type Action = {
     }>) => void;
 };
 import './QuickActions.css';
-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;
+declare const __propDef: {
+    props: {
+        selectedItems: number;
+        disabled: boolean;
+        actionsForSelectedItems: Action[];
+        position?: "bottom" | "top" | undefined;
+        lang?: "it" | "en" | undefined;
     };
-    z_$$bindings?: Bindings;
+    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> {
 }
-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;
+export {};

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

@@ -1,41 +1,32 @@
-<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)
-
+<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);
     mouseEnterHandler = () => {
-      if(appearTimeout !== undefined) {
-        if(appearTimeoutId !== undefined) clearTimeout(appearTimeoutId)
-
+      if (appearTimeout !== void 0) {
+        if (appearTimeoutId !== void 0)
+          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 !== undefined) clearTimeout(appearTimeoutId)
-      menuOpen = false
-    }
-    activator.addEventListener('mouseleave', mouseLeaveHandler)
+      if (appearTimeoutId !== void 0)
+        clearTimeout(appearTimeoutId);
+      menuOpen = false;
+    };
+    activator.addEventListener("mouseleave", mouseLeaveHandler);
   }
-
 </script>
 
 <Menu