@budibase/bbui 2.8.12-alpha.2 → 2.8.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.8.12-alpha.2",
+  "version": "2.8.13",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,8 +38,8 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/shared-core": "2.8.12-alpha.2",
-    "@budibase/string-templates": "2.8.12-alpha.2",
+    "@budibase/shared-core": "2.8.13",
+    "@budibase/string-templates": "2.8.13",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -104,5 +104,5 @@
       }
     }
   },
-  "gitHead": "39160d1bf32c912a8fc66d46f451b4591d599e98"
+  "gitHead": "10ecc65c7cfb5dd738787ae627f990e83517e9f8"
 }

package/src/Button/Button.svelte

@@ -1,7 +1,6 @@
 <script>
   import "@spectrum-css/button/dist/index-vars.css"
-  import AbsTooltip from "../Tooltip/AbsTooltip.svelte"
-  import { createEventDispatcher } from "svelte"
+  import Tooltip from "../Tooltip/Tooltip.svelte"
 
   export let type
   export let disabled = false
@@ -18,52 +17,65 @@
   export let newStyles = true
   export let id
 
-  const dispatch = createEventDispatcher()
+  let showTooltip = false
 </script>
 
-<AbsTooltip text={tooltip}>
-  <button
-    {id}
-    {type}
-    class:spectrum-Button--cta={cta}
-    class:spectrum-Button--primary={primary}
-    class:spectrum-Button--secondary={secondary}
-    class:spectrum-Button--warning={warning}
-    class:spectrum-Button--overBackground={overBackground}
-    class:spectrum-Button--quiet={quiet}
-    class:new-styles={newStyles}
-    class:active
-    class:is-disabled={disabled}
-    class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
-    on:click|preventDefault={() => {
-      if (!disabled) {
-        dispatch("click")
-      }
-    }}
-  >
-    {#if icon}
+<button
+  {id}
+  {type}
+  class:spectrum-Button--cta={cta}
+  class:spectrum-Button--primary={primary}
+  class:spectrum-Button--secondary={secondary}
+  class:spectrum-Button--warning={warning}
+  class:spectrum-Button--overBackground={overBackground}
+  class:spectrum-Button--quiet={quiet}
+  class:new-styles={newStyles}
+  class:active
+  class:disabled
+  class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
+  {disabled}
+  on:click|preventDefault
+  on:mouseover={() => (showTooltip = true)}
+  on:focus={() => (showTooltip = true)}
+  on:mouseleave={() => (showTooltip = false)}
+>
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
+      focusable="false"
+      aria-hidden="true"
+      aria-label={icon}
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  {#if $$slots}
+    <span class="spectrum-Button-label"><slot /></span>
+  {/if}
+  {#if !disabled && tooltip}
+    <div class="tooltip-icon">
       <svg
         class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
         focusable="false"
         aria-hidden="true"
-        aria-label={icon}
+        aria-label="Info"
       >
-        <use xlink:href="#spectrum-icon-18-{icon}" />
+        <use xlink:href="#spectrum-icon-18-InfoOutline" />
       </svg>
-    {/if}
-    {#if $$slots}
-      <span class="spectrum-Button-label"><slot /></span>
-    {/if}
-  </button>
-</AbsTooltip>
+    </div>
+  {/if}
+  {#if showTooltip && tooltip}
+    <div class="tooltip">
+      <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
+    </div>
+  {/if}
+</button>
 
 <style>
   button {
     position: relative;
   }
-  button.is-disabled {
-    cursor: default;
-  }
+
   .spectrum-Button-label {
     white-space: nowrap;
     overflow: hidden;
@@ -72,6 +84,21 @@
   .active {
     color: var(--spectrum-global-color-blue-600) !important;
   }
+  .tooltip {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    z-index: 100;
+    width: 160px;
+    text-align: center;
+    transform: translateX(-50%);
+    left: 50%;
+    top: calc(100% - 3px);
+  }
+  .tooltip-icon {
+    padding-left: var(--spacing-m);
+    line-height: 0;
+  }
   .spectrum-Button--primary.new-styles {
     background: var(--spectrum-global-color-gray-800);
     border-color: transparent;
@@ -85,10 +112,10 @@
     border-color: transparent;
     color: var(--spectrum-global-color-gray-900);
   }
-  .spectrum-Button--secondary.new-styles:not(.is-disabled):hover {
+  .spectrum-Button--secondary.new-styles:not(.disabled):hover {
     background: var(--spectrum-global-color-gray-300);
   }
-  .spectrum-Button--secondary.new-styles.is-disabled {
+  .spectrum-Button--secondary.new-styles.disabled {
     color: var(--spectrum-global-color-gray-500);
   }
 </style>

package/src/FancyForm/FancyButtonRadio.svelte

@@ -15,6 +15,8 @@
 
   const dispatch = createEventDispatcher()
 
+  $: placeholder = !value
+
   const extractProperty = (value, property) => {
     if (value && typeof value === "object") {
       return value[property]

package/src/Form/Core/EnvDropdown.svelte

@@ -150,7 +150,7 @@
           </div>
         {:else if variables.length}
           <div style="max-height: 100px">
-            {#each variables as variable}
+            {#each variables as variable, idx}
               <li
                 class="spectrum-Menu-item"
                 role="option"

package/src/Link/Link.svelte

@@ -1,7 +1,6 @@
 <script>
   import "@spectrum-css/link/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
-  import Tooltip from "../Tooltip/Tooltip.svelte"
 
   export let href = "#"
   export let size = "M"
@@ -11,61 +10,18 @@
   export let overBackground = false
   export let target
   export let download
-  export let disabled = false
-  export let tooltip = null
 
   const dispatch = createEventDispatcher()
-
-  const onClick = e => {
-    if (!disabled) {
-      dispatch("click")
-      e.stopPropagation()
-    }
-  }
 </script>
 
 <a
-  on:click={onClick}
+  on:click={e => dispatch("click") && e.stopPropagation()}
   {href}
   {target}
   {download}
-  class:disabled
   class:spectrum-Link--primary={primary}
   class:spectrum-Link--secondary={secondary}
   class:spectrum-Link--overBackground={overBackground}
   class:spectrum-Link--quiet={quiet}
-  class="spectrum-Link spectrum-Link--size{size}"
+  class="spectrum-Link spectrum-Link--size{size}"><slot /></a
 >
-  <slot />
-  {#if tooltip}
-    <div class="tooltip">
-      <Tooltip textWrapping direction="bottom" text={tooltip} />
-    </div>
-  {/if}
-</a>
-
-<style>
-  a {
-    position: relative;
-  }
-  a.disabled {
-    color: var(--spectrum-global-color-gray-500);
-  }
-  a.disabled:hover {
-    text-decoration: none;
-    cursor: default;
-  }
-  .tooltip {
-    position: absolute;
-    left: 50%;
-    top: 100%;
-    transform: translateX(-50%);
-    opacity: 0;
-    transition: 130ms ease-out;
-    pointer-events: none;
-    z-index: 100;
-  }
-  a:hover .tooltip {
-    opacity: 1;
-  }
-</style>

package/src/Modal/ModalContent.svelte

@@ -1,7 +1,3 @@
-<script context="module">
-  export const keepOpen = Symbol("keepOpen")
-</script>
-
 <script>
   import "@spectrum-css/dialog/dist/index-vars.css"
   import { getContext } from "svelte"
@@ -34,7 +30,7 @@
 
   async function secondary(e) {
     loading = true
-    if (!secondaryAction || (await secondaryAction(e)) !== keepOpen) {
+    if (!secondaryAction || (await secondaryAction(e)) !== false) {
       hide()
     }
     loading = false
@@ -42,7 +38,7 @@
 
   async function confirm() {
     loading = true
-    if (!onConfirm || (await onConfirm()) !== keepOpen) {
+    if (!onConfirm || (await onConfirm()) !== false) {
       hide()
     }
     loading = false
@@ -50,7 +46,7 @@
 
   async function close() {
     loading = true
-    if (!onCancel || (await onCancel()) !== keepOpen) {
+    if (!onCancel || (await onCancel()) !== false) {
       cancel()
     }
     loading = false

package/src/Table/CellRenderer.svelte

@@ -29,6 +29,7 @@
   $: type = getType(schema)
   $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
   $: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer
+  $: width = schema?.width || "150px"
   $: cellValue = getCellValue(value, schema.template)
 
   const getType = schema => {

package/src/Table/Table.svelte

@@ -379,7 +379,7 @@
           </div>
         {/if}
         {#if sortedRows?.length}
-          {#each sortedRows as row}
+          {#each sortedRows as row, idx}
             <div class="spectrum-Table-row" class:clickable={allowClickRows}>
               {#if showEditColumn}
                 <div

package/src/index.js

@@ -36,19 +36,13 @@ export { default as Layout } from "./Layout/Layout.svelte"
 export { default as Page } from "./Layout/Page.svelte"
 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 AbsTooltip,
-  TooltipPosition,
-  TooltipType,
-} from "./Tooltip/AbsTooltip.svelte"
 export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.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"
 export { default as MenuItem } from "./Menu/Item.svelte"
 export { default as Modal } from "./Modal/Modal.svelte"
-export { default as ModalContent, keepOpen } from "./Modal/ModalContent.svelte"
+export { default as ModalContent } from "./Modal/ModalContent.svelte"
 export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
 export { default as Notification } from "./Notification/Notification.svelte"
 export { default as SideNavigation } from "./SideNavigation/Navigation.svelte"

package/src/Tooltip/AbsTooltip.svelte

@@ -1,157 +0,0 @@
-<script context="module">
-  export const TooltipPosition = {
-    Top: "top",
-    Right: "right",
-    Bottom: "bottom",
-    Left: "left",
-  }
-  export const TooltipType = {
-    Default: "default",
-    Info: "info",
-    Positive: "positive",
-    Negative: "negative",
-  }
-</script>
-
-<script>
-  import Portal from "svelte-portal"
-  import { fade } from "svelte/transition"
-  import "@spectrum-css/tooltip/dist/index-vars.css"
-  import { onDestroy } from "svelte"
-
-  export let position = TooltipPosition.Top
-  export let type = TooltipType.Default
-  export let text = ""
-  export let fixed = false
-  export let color = null
-
-  let wrapper
-  let hovered = false
-  let left
-  let top
-  let visible = false
-  let timeout
-  let interval
-
-  $: {
-    if (hovered || fixed) {
-      // Debounce showing by 200ms to avoid flashing tooltip
-      timeout = setTimeout(show, 200)
-    } else {
-      hide()
-    }
-  }
-  $: tooltipStyle = color ? `background:${color};` : null
-  $: tipStyle = color ? `border-top-color:${color};` : null
-
-  // Computes the position of the tooltip
-  const updateTooltipPosition = () => {
-    const node = wrapper?.children?.[0]
-    if (!node) {
-      left = null
-      top = null
-      return
-    }
-    const bounds = node.getBoundingClientRect()
-
-    // Determine where to render tooltip based on position prop
-    if (position === TooltipPosition.Top) {
-      left = bounds.left + bounds.width / 2
-      top = bounds.top
-    } else if (position === TooltipPosition.Right) {
-      left = bounds.left + bounds.width
-      top = bounds.top + bounds.height / 2
-    } else if (position === TooltipPosition.Bottom) {
-      left = bounds.left + bounds.width / 2
-      top = bounds.top + bounds.height
-    } else if (position === TooltipPosition.Left) {
-      left = bounds.left
-      top = bounds.top + bounds.height / 2
-    }
-  }
-
-  // Computes the position of the tooltip then shows it.
-  // We set up a poll to frequently update the position of the tooltip in case
-  // the target moves.
-  const show = () => {
-    updateTooltipPosition()
-    interval = setInterval(updateTooltipPosition, 100)
-    visible = true
-  }
-
-  // Hides the tooltip
-  const hide = () => {
-    clearTimeout(timeout)
-    clearInterval(interval)
-    visible = false
-  }
-
-  // Ensure we clean up interval and timeout
-  onDestroy(hide)
-</script>
-
-<div
-  bind:this={wrapper}
-  class="abs-tooltip"
-  on:focus={null}
-  on:mouseover={() => (hovered = true)}
-  on:mouseleave={() => (hovered = false)}
->
-  <slot />
-</div>
-
-{#if visible && text && left != null && top != null}
-  <Portal target=".spectrum">
-    <span
-      class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{position} is-open"
-      style={`left:${left}px;top:${top}px;${tooltipStyle}`}
-      transition:fade|local={{ duration: 130 }}
-    >
-      <span class="spectrum-Tooltip-label">{text}</span>
-      <span class="spectrum-Tooltip-tip" style={tipStyle} />
-    </span>
-  </Portal>
-{/if}
-
-<style>
-  .abs-tooltip {
-    display: contents;
-  }
-  .spectrum-Tooltip {
-    position: absolute;
-    z-index: 9999;
-    pointer-events: none;
-    margin: 0;
-    max-width: 280px;
-    transition: top 130ms ease-out, left 130ms ease-out;
-  }
-  .spectrum-Tooltip-label {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    font-size: 12px;
-    font-weight: 600;
-  }
-
-  /* Colour overrides for default type */
-  .spectrum-Tooltip--default {
-    background: var(--spectrum-global-color-gray-500);
-  }
-  .spectrum-Tooltip--default .spectrum-Tooltip-tip {
-    border-top-color: var(--spectrum-global-color-gray-500);
-  }
-
-  /* Position styles */
-  .spectrum-Tooltip--top {
-    transform: translateX(-50%) translateY(calc(-100% - 8px));
-  }
-  .spectrum-Tooltip--right {
-    transform: translateX(8px) translateY(-50%);
-  }
-  .spectrum-Tooltip--bottom {
-    transform: translateX(-50%) translateY(8px);
-  }
-  .spectrum-Tooltip--left {
-    transform: translateX(calc(-100% - 8px)) translateY(-50%);
-  }
-</style>

package/src/Tooltip/TempTooltip.svelte

@@ -1,39 +0,0 @@
-<script>
-  import AbsTooltip from "./AbsTooltip.svelte"
-  import { onDestroy } from "svelte"
-
-  export let text = null
-  export let condition = true
-  export let duration = 3000
-  export let position
-  export let type
-
-  let visible = false
-  let timeout
-
-  $: {
-    if (condition) {
-      showTooltip()
-    } else {
-      hideTooltip()
-    }
-  }
-
-  const showTooltip = () => {
-    visible = true
-    timeout = setTimeout(() => {
-      visible = false
-    }, duration)
-  }
-
-  const hideTooltip = () => {
-    visible = false
-    clearTimeout(timeout)
-  }
-
-  onDestroy(hideTooltip)
-</script>
-
-<AbsTooltip {position} {type} text={visible ? text : null} fixed={visible}>
-  <slot />
-</AbsTooltip>