@budibase/bbui 2.26.3 → 2.27.2

package/src/Tabs/Tab.svelte

@@ -1,78 +1,123 @@
 <script>
-  import { getContext, onMount, createEventDispatcher } from "svelte"
+  import { getContext, onDestroy, createEventDispatcher } from "svelte"
   import Portal from "svelte-portal"
 
   export let title
   export let icon = ""
   export let id
+  export let href = "#"
+  export let link = false
 
   const dispatch = createEventDispatcher()
   let selected = getContext("tab")
-  let tab_internal
-  let tabInfo
+  let observer
+  let ref
+
+  $: isSelected = $selected.title === title
+  $: {
+    if (isSelected && ref) {
+      observe()
+    } else {
+      stopObserving()
+    }
+  }
 
   const setTabInfo = () => {
-    // If the tabs are being rendered inside a component which uses
-    // a svelte transition to enter, then this initial getBoundingClientRect
-    // will return an incorrect position.
-    // We just need to get this off the main thread to fix this, by using
-    // a 0ms timeout.
-    setTimeout(() => {
-      tabInfo = tab_internal?.getBoundingClientRect()
-      if (tabInfo && $selected.title === title) {
-        $selected.info = tabInfo
-      }
-    }, 0)
+    const tabInfo = ref?.getBoundingClientRect()
+    if (tabInfo) {
+      $selected.info = tabInfo
+    }
   }
 
-  onMount(() => {
-    setTabInfo()
-  })
+  const onAnchorClick = e => {
+    if (e.metaKey || e.shiftKey || e.altKey || e.ctrlKey) return
 
-  //Ensure that the underline is in the correct location
-  $: {
-    if ($selected.title === title && tab_internal) {
-      if ($selected.info?.left !== tab_internal.getBoundingClientRect().left) {
-        setTabInfo()
-      }
+    e.preventDefault()
+    $selected = {
+      ...$selected,
+      title,
+      info: ref.getBoundingClientRect(),
     }
+    dispatch("click")
   }
 
   const onClick = () => {
     $selected = {
       ...$selected,
       title,
-      info: tab_internal.getBoundingClientRect(),
+      info: ref.getBoundingClientRect(),
     }
-    dispatch("click")
   }
+
+  const observe = () => {
+    if (!observer) {
+      observer = new ResizeObserver(setTabInfo)
+      observer.observe(ref)
+    }
+  }
+
+  const stopObserving = () => {
+    if (observer) {
+      observer.unobserve(ref)
+      observer = null
+    }
+  }
+
+  onDestroy(stopObserving)
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-<div
-  {id}
-  bind:this={tab_internal}
-  on:click={onClick}
-  class:is-selected={$selected.title === title}
-  class="spectrum-Tabs-item"
-  class:emphasized={$selected.title === title && $selected.emphasized}
-  tabindex="0"
->
-  {#if icon}
-    <svg
-      class="spectrum-Icon spectrum-Icon--sizeM"
-      focusable="false"
-      aria-hidden="true"
-      aria-label="Folder"
-    >
-      <use xlink:href="#spectrum-icon-18-{icon}" />
-    </svg>
-  {/if}
-  <span class="spectrum-Tabs-itemLabel">{title}</span>
-</div>
-{#if $selected.title === title}
+{#if link}
+  <a
+    {href}
+    {id}
+    bind:this={ref}
+    on:click={onAnchorClick}
+    class="spectrum-Tabs-item link"
+    class:is-selected={isSelected}
+    class:emphasized={isSelected && $selected.emphasized}
+    tabindex="0"
+  >
+    {#if icon}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM"
+        focusable="false"
+        aria-hidden="true"
+        aria-label="Folder"
+      >
+        <use xlink:href="#spectrum-icon-18-{icon}" />
+      </svg>
+    {/if}
+    <span class="spectrum-Tabs-itemLabel">{title}</span>
+  </a>
+{:else}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <div
+    {id}
+    bind:this={ref}
+    on:click={onClick}
+    on:click
+    class="spectrum-Tabs-item"
+    class:is-selected={isSelected}
+    class:emphasized={isSelected && $selected.emphasized}
+    tabindex="0"
+  >
+    {#if icon}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM"
+        focusable="false"
+        aria-hidden="true"
+        aria-label="Folder"
+      >
+        <use xlink:href="#spectrum-icon-18-{icon}" />
+      </svg>
+    {/if}
+    <span class="spectrum-Tabs-itemLabel">{title}</span>
+  </div>
+{/if}
+
+{#if isSelected}
   <Portal target=".spectrum-Tabs-content-{$selected.id}">
     <slot />
   </Portal>
@@ -89,4 +134,7 @@
   .spectrum-Tabs-item:hover {
     color: var(--spectrum-global-color-gray-900);
   }
+  .link {
+    user-select: none;
+  }
 </style>

package/src/Tooltip/Context.svelte

@@ -0,0 +1,79 @@
+<script>
+  import Portal from "svelte-portal"
+  import { getContext } from "svelte"
+  import Context from "../context"
+
+  export let anchor
+  export let visible = false
+  export let offset = 0
+
+  $: target = getContext(Context.PopoverRoot) || "#app"
+
+  let hovering = false
+  let tooltip
+  let x = 0
+  let y = 0
+
+  const updatePosition = (anchor, tooltip) => {
+    if (anchor == null || tooltip == null) {
+      return
+    }
+
+    requestAnimationFrame(() => {
+      const rect = anchor.getBoundingClientRect()
+      const windowOffset =
+        window.innerHeight - offset - (tooltip.clientHeight + rect.y)
+      const tooltipWidth = tooltip.clientWidth
+
+      x = rect.x - tooltipWidth - offset
+      y = windowOffset < 0 ? rect.y + windowOffset : rect.y
+    })
+  }
+
+  $: updatePosition(anchor, tooltip)
+
+  const handleMouseenter = () => {
+    hovering = true
+  }
+
+  const handleMouseleave = () => {
+    hovering = false
+  }
+</script>
+
+<Portal {target}>
+  <div
+    role="tooltip"
+    on:mouseenter={handleMouseenter}
+    on:mouseleave={handleMouseleave}
+    style:left={`${x}px`}
+    style:top={`${y}px`}
+    class="wrapper"
+    class:visible={visible || hovering}
+  >
+    <div bind:this={tooltip} class="tooltip">
+      <slot />
+    </div>
+  </div>
+</Portal>
+
+<style>
+  .wrapper {
+    background-color: var(--spectrum-global-color-gray-100);
+    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.42);
+    opacity: 0;
+    overflow: hidden;
+
+    border-radius: 5px;
+    box-sizing: border-box;
+    border: 1px solid var(--grey-4);
+    position: absolute;
+    pointer-events: none;
+    z-index: 1000;
+  }
+
+  .visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+</style>

package/src/helpers.js

@@ -166,7 +166,7 @@ export const stringifyDate = (
   const offsetForTimezone = (enableTime && ignoreTimezones) || timeOnly
   if (offsetForTimezone) {
     // Ensure we use the correct offset for the date
-    const referenceDate = timeOnly ? new Date() : value.toDate()
+    const referenceDate = value.toDate()
     const offset = referenceDate.getTimezoneOffset() * 60000
     return new Date(value.valueOf() - offset).toISOString().slice(0, -1)
   }

package/src/index.js

@@ -53,6 +53,7 @@ export { default as Link } from "./Link/Link.svelte"
 export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
 export { default as TempTooltip } from "./Tooltip/TempTooltip.svelte"
 export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"
+export { default as ContextTooltip } from "./Tooltip/Context.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"
 export { default as MenuSection } from "./Menu/Section.svelte"
 export { default as MenuSeparator } from "./Menu/Separator.svelte"