@budibase/bbui 2.21.8 → 2.22.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.21.8",
+  "version": "2.22.0",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -35,8 +35,8 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/shared-core": "2.21.8",
-    "@budibase/string-templates": "2.21.8",
+    "@budibase/shared-core": "2.22.0",
+    "@budibase/string-templates": "2.22.0",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -103,5 +103,5 @@
       }
     }
   },
-  "gitHead": "f2541bd150fcb84cd403e29a759843b2952563a4"
+  "gitHead": "45f438318a63b0f60cbee8cef5115ca7947f356b"
 }

package/src/ActionMenu/ActionMenu.svelte

@@ -38,7 +38,7 @@
 <div use:getAnchor on:click={openMenu}>
   <slot name="control" />
 </div>
-<Popover bind:this={dropdown} {anchor} {align} {portalTarget}>
+<Popover bind:this={dropdown} {anchor} {align} {portalTarget} on:open on:close>
   <Menu>
     <slot />
   </Menu>

package/src/Actions/click_outside.js

@@ -32,6 +32,13 @@ const handleClick = event => {
       return
     }
 
+    // Ignore clicks for drawers, unless the handler is registered from a drawer
+    const sourceInDrawer = handler.anchor.closest(".drawer-wrapper") != null
+    const clickInDrawer = event.target.closest(".drawer-wrapper") != null
+    if (clickInDrawer && !sourceInDrawer) {
+      return
+    }
+
     handler.callback?.(event)
   })
 }

package/src/Actions/position_dropdown.js

@@ -15,6 +15,7 @@ export default function positionDropdown(element, opts) {
       align,
       maxHeight,
       maxWidth,
+      minWidth,
       useAnchorWidth,
       offset = 5,
       customUpdate,
@@ -28,7 +29,7 @@ export default function positionDropdown(element, opts) {
     const elementBounds = element.getBoundingClientRect()
     let styles = {
       maxHeight: null,
-      minWidth: null,
+      minWidth,
       maxWidth,
       left: null,
       top: null,
@@ -41,8 +42,13 @@ export default function positionDropdown(element, opts) {
       })
     } else {
       // Determine vertical styles
-      if (align === "right-outside") {
-        styles.top = anchorBounds.top
+      if (align === "right-outside" || align === "left-outside") {
+        styles.top =
+          anchorBounds.top + anchorBounds.height / 2 - elementBounds.height / 2
+        styles.maxHeight = maxHeight
+        if (styles.top + elementBounds.height > window.innerHeight) {
+          styles.top = window.innerHeight - elementBounds.height
+        }
       } else if (
         window.innerHeight - anchorBounds.bottom <
         (maxHeight || 100)

package/src/Drawer/Drawer.svelte

@@ -1,28 +1,111 @@
+<script context="module">
+  import { writable, get } from "svelte/store"
+
+  // Observe this class name if possible in order to know how to size the
+  // drawer. If this doesn't exist we'll use a fixed size.
+  const drawerContainer = "drawer-container"
+
+  // Context level stores to keep drawers in sync
+  const openDrawers = writable([])
+  const modal = writable(false)
+  const resizable = writable(true)
+  const drawerLeft = writable(null)
+  const drawerWidth = writable(null)
+
+  // Resize observer to keep track of size changes
+  let observer
+
+  // Starts observing the target node to watching to size changes.
+  // Invoked when the first drawer of a chain is rendered.
+  const observe = () => {
+    const target = document.getElementsByClassName(drawerContainer)[0]
+    if (observer || !target) {
+      return
+    }
+    observer = new ResizeObserver(entries => {
+      if (!entries?.[0]) {
+        return
+      }
+      const bounds = entries[0].target.getBoundingClientRect()
+      drawerLeft.set(bounds.left)
+      drawerWidth.set(bounds.width)
+    })
+    observer.observe(target)
+
+    // Manually measure once to ensure that we have dimensions for the initial
+    // paint
+    const bounds = target.getBoundingClientRect()
+    drawerLeft.set(bounds.left)
+    drawerWidth.set(bounds.width)
+  }
+
+  // Stops observing the target node.
+  // Invoked when the last drawer of a chain is removed.
+  const unobserve = () => {
+    if (get(openDrawers).length) {
+      return
+    }
+    observer?.disconnect()
+
+    // Reset state
+    observer = null
+    modal.set(false)
+    resizable.set(true)
+    drawerLeft.set(null)
+    drawerWidth.set(null)
+  }
+</script>
+
 <script>
-  import Portal from "svelte-portal"
   import Button from "../Button/Button.svelte"
-  import Body from "../Typography/Body.svelte"
-  import Heading from "../Typography/Heading.svelte"
-  import { setContext, createEventDispatcher } from "svelte"
+  import Icon from "../Icon/Icon.svelte"
+  import ActionButton from "../ActionButton/ActionButton.svelte"
+  import Portal from "svelte-portal"
+  import { setContext, createEventDispatcher, onDestroy } from "svelte"
   import { generate } from "shortid"
 
   export let title
-  export let fillWidth
-  export let left = "314px"
-  export let width = "calc(100% - 626px)"
-  export let headless = false
+  export let forceModal = false
 
   const dispatch = createEventDispatcher()
+  const spacing = 11
 
   let visible = false
   let drawerId = generate()
 
+  $: depth = $openDrawers.length - $openDrawers.indexOf(drawerId) - 1
+  $: style = getStyle(depth, $drawerLeft, $drawerWidth, $modal)
+
+  const getStyle = (depth, left, width, modal) => {
+    let style = `
+      --scale-factor: ${getScaleFactor(depth)};
+      --spacing: ${spacing}px;
+    `
+    // Most modal styles are handled by class names
+    if (modal || left == null || width == null) {
+      return style
+    }
+
+    // Drawers observing another dom node need custom position styles
+    return `
+      ${style}
+      left: ${left + spacing}px;
+      width: ${width - 2 * spacing}px;
+    `
+  }
+
   export function show() {
     if (visible) {
       return
     }
+    if (forceModal) {
+      modal.set(true)
+      resizable.set(false)
+    }
+    observe()
     visible = true
     dispatch("drawerShow", drawerId)
+    openDrawers.update(state => [...state, drawerId])
   }
 
   export function hide() {
@@ -31,12 +114,15 @@
     }
     visible = false
     dispatch("drawerHide", drawerId)
+    openDrawers.update(state => state.filter(id => id !== drawerId))
+    unobserve()
   }
 
-  setContext("drawer-actions", {
+  setContext("drawer", {
     hide,
     show,
-    headless,
+    modal,
+    resizable,
   })
 
   const easeInOutQuad = x => {
@@ -45,66 +131,142 @@
 
   // Use a custom svelte transition here because the built-in slide
   // transition has a horrible overshoot
-  const slide = () => {
+  const drawerSlide = () => {
+    return {
+      duration: 260,
+      css: t => {
+        const f = easeInOutQuad(t)
+        const yOffset = (1 - f) * 200
+        return `
+          transform: translateY(calc(${yOffset}px - 800px * (1 - var(--scale-factor))));
+          opacity: ${f};
+        `
+      },
+    }
+  }
+
+  // Custom fade transition because the default svelte one doesn't work any more
+  // with svelte 4
+  const drawerFade = () => {
     return {
-      duration: 360,
+      duration: 260,
       css: t => {
-        const translation = 100 - Math.round(easeInOutQuad(t) * 100)
-        return `transform: translateY(${translation}%);`
+        return `opacity: ${easeInOutQuad(t)};`
       },
     }
   }
+
+  const getScaleFactor = depth => {
+    // Quadratic function approaching a limit of 1 as depth tends to infinity
+    const lim = 1 - 1 / (depth * depth + 1)
+    // Scale drawers between 1 and 0.9 as depth approaches infinity
+    return 1 - lim * 0.1
+  }
+
+  onDestroy(() => {
+    if (visible) {
+      hide()
+    }
+  })
 </script>
 
 {#if visible}
-  <Portal>
-    <section
-      class:fillWidth
-      class="drawer"
-      class:headless
-      transition:slide|local
-      style={`width: ${width}; left: ${left};`}
-    >
-      {#if !headless}
+  <Portal target=".modal-container">
+    <!-- This class is unstyled, but needed by click_outside -->
+    <div class="drawer-wrapper">
+      <div
+        class="underlay"
+        class:hidden={!$modal}
+        transition:drawerFade|local
+      />
+      <div
+        class="drawer"
+        class:stacked={depth > 0}
+        class:modal={$modal}
+        transition:drawerSlide|local
+        {style}
+      >
         <header>
-          <div class="text">
-            <Heading size="XS">{title}</Heading>
-            <Body size="S">
-              <slot name="description" />
-            </Body>
-          </div>
+          {#if $$slots.title}
+            <slot name="title" />
+          {:else}
+            <div class="text">{title || "Bindings"}</div>
+          {/if}
           <div class="buttons">
             <Button secondary quiet on:click={hide}>Cancel</Button>
             <slot name="buttons" />
+            {#if $resizable}
+              <ActionButton
+                size="M"
+                quiet
+                selected={$modal}
+                on:click={() => modal.set(!$modal)}
+              >
+                <Icon name={$modal ? "Minimize" : "Maximize"} size="S" />
+              </ActionButton>
+            {/if}
           </div>
         </header>
-      {/if}
-      <slot name="body" />
-    </section>
+        <slot name="body" />
+        <div class="overlay" class:hidden={$modal || depth === 0} />
+      </div>
+    </div>
   </Portal>
 {/if}
 
 <style>
-  .drawer.headless :global(.drawer-contents) {
-    height: calc(40vh + 75px);
-  }
-
-  .buttons {
+  .drawer {
+    position: absolute;
+    left: 25vw;
+    width: 50vw;
+    bottom: var(--spacing);
+    height: 420px;
+    background: var(--background);
+    border: var(--border-light);
+    z-index: 100;
+    border-radius: 8px;
+    overflow: hidden;
+    box-sizing: border-box;
+    transition: transform 260ms ease-out, bottom 260ms ease-out,
+      left 260ms ease-out, width 260ms ease-out, height 260ms ease-out;
     display: flex;
-    gap: var(--spacing-m);
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .drawer.modal {
+    left: 15vw;
+    width: 70vw;
+    bottom: 15vh;
+    height: 70vh;
+  }
+  .drawer.stacked {
+    transform: translateY(calc(-1 * 1024px * (1 - var(--scale-factor))))
+      scale(var(--scale-factor));
   }
 
-  .drawer {
+  .overlay,
+  .underlay {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    display: block;
+    transition: opacity 260ms ease-out;
+  }
+  .overlay {
     position: absolute;
-    bottom: 0;
     background: var(--background);
-    border-top: var(--border-light);
-    z-index: 3;
+    opacity: 0.5;
   }
-
-  .fillWidth {
-    left: 260px !important;
-    width: calc(100% - 260px) !important;
+  .underlay {
+    position: fixed;
+    background: rgba(0, 0, 0, 0.5);
+  }
+  .underlay.hidden,
+  .overlay.hidden {
+    opacity: 0 !important;
+    pointer-events: none;
   }
 
   header {
@@ -112,10 +274,9 @@
     justify-content: space-between;
     align-items: center;
     border-bottom: var(--border-light);
-    padding: var(--spacing-l) var(--spacing-xl);
+    padding: var(--spacing-m) var(--spacing-xl);
     gap: var(--spacing-xl);
   }
-
   .text {
     display: flex;
     flex-direction: column;
@@ -123,7 +284,6 @@
     align-items: flex-start;
     gap: var(--spacing-xs);
   }
-
   .buttons {
     display: flex;
     flex-direction: row;
@@ -131,4 +291,8 @@
     align-items: center;
     gap: var(--spacing-m);
   }
+  .buttons :global(.icon) {
+    width: 16px;
+    display: flex;
+  }
 </style>

package/src/Drawer/DrawerContent.svelte

@@ -1,4 +1,8 @@
-<div class="drawer-contents">
+<script>
+  export let padding = true
+</script>
+
+<div class="drawer-contents" class:padding>
   <div class:no-sidebar={!$$slots.sidebar} class="container">
     {#if $$slots.sidebar}
       <div class="sidebar">
@@ -13,8 +17,8 @@
 
 <style>
   .drawer-contents {
-    height: 40vh;
     overflow-y: auto;
+    flex: 1 1 auto;
   }
   .container {
     height: 100%;
@@ -27,14 +31,22 @@
   .sidebar {
     border-right: var(--border-light);
     overflow: auto;
-    padding: var(--spacing-xl);
     scrollbar-width: none;
   }
+  .padding .sidebar {
+    padding: var(--spacing-xl);
+  }
   .sidebar::-webkit-scrollbar {
     display: none;
   }
   .main {
+    height: 100%;
+    overflow: auto;
+    overflow-x: hidden;
+  }
+  .padding .main {
     padding: var(--spacing-xl);
+    height: calc(100% - var(--spacing-xl) * 2);
   }
   .main :global(textarea) {
     min-height: 200px;

package/src/Icon/Icon.svelte

@@ -1,58 +1,54 @@
-<script context="module">
-  export const directions = ["n", "ne", "e", "se", "s", "sw", "w", "nw"]
-</script>
-
 <script>
-  import Tooltip from "../Tooltip/Tooltip.svelte"
-  import { fade } from "svelte/transition"
+  import {
+    default as AbsTooltip,
+    TooltipPosition,
+    TooltipType,
+  } from "../Tooltip/AbsTooltip.svelte"
 
-  export let direction = "n"
   export let name = "Add"
   export let hidden = false
   export let size = "M"
   export let hoverable = false
   export let disabled = false
   export let color
+  export let hoverColor
   export let tooltip
-
-  $: rotation = getRotation(direction)
-
-  let showTooltip = false
-
-  const getRotation = direction => {
-    return directions.indexOf(direction) * 45
-  }
+  export let tooltipPosition = TooltipPosition.Bottom
+  export let tooltipType = TooltipType.Default
+  export let tooltipColor
+  export let tooltipWrap = true
+  export let newStyles = false
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div
-  class="icon"
-  on:mouseover={() => (showTooltip = true)}
-  on:focus={() => (showTooltip = true)}
-  on:mouseleave={() => (showTooltip = false)}
-  on:click={() => (showTooltip = false)}
+<AbsTooltip
+  text={tooltip}
+  type={tooltipType}
+  position={tooltipPosition}
+  color={tooltipColor}
+  noWrap={tooltipWrap}
 >
-  <svg
-    on:click
-    class:hoverable
-    class:disabled
-    class="spectrum-Icon spectrum-Icon--size{size}"
-    focusable="false"
-    aria-hidden={hidden}
-    aria-label={name}
-    style={`transform: rotate(${rotation}deg); ${
-      color ? `color: ${color};` : ""
-    }`}
-  >
-    <use style="pointer-events: none;" xlink:href="#spectrum-icon-18-{name}" />
-  </svg>
-  {#if tooltip && showTooltip}
-    <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
-      <Tooltip textWrapping direction="top" text={tooltip} />
-    </div>
-  {/if}
-</div>
+  <div class="icon" class:newStyles>
+    <svg
+      on:click
+      class:hoverable
+      class:disabled
+      class="spectrum-Icon spectrum-Icon--size{size}"
+      focusable="false"
+      aria-hidden={hidden}
+      aria-label={name}
+      style={`${color ? `color: ${color};` : ""} ${
+        hoverColor
+          ? `--hover-color: ${hoverColor}`
+          : "--hover-color: var(--spectrum-alias-icon-color-selected-hover)"
+      }`}
+    >
+      <use
+        style="pointer-events: none;"
+        xlink:href="#spectrum-icon-18-{name}"
+      />
+    </svg>
+  </div>
+</AbsTooltip>
 
 <style>
   .icon {
@@ -60,19 +56,25 @@
     display: grid;
     place-items: center;
   }
+  .newStyles {
+    color: var(--spectrum-global-color-gray-700);
+  }
 
   svg.hoverable {
     pointer-events: all;
     transition: color var(--spectrum-global-animation-duration-100, 130ms);
   }
   svg.hoverable:hover {
-    color: var(--spectrum-alias-icon-color-selected-hover) !important;
+    color: var(--hover-color) !important;
     cursor: pointer;
   }
   svg.hoverable:active {
     color: var(--spectrum-global-color-blue-400) !important;
   }
-
+  .newStyles svg.hoverable:hover,
+  .newStyles svg.hoverable:active {
+    color: var(--spectrum-global-color-gray-900) !important;
+  }
   svg.disabled {
     color: var(--spectrum-global-color-gray-500) !important;
     pointer-events: none !important;

package/src/Modal/Modal.svelte

@@ -10,6 +10,7 @@
   export let inline = false
   export let disableCancel = false
   export let autoFocus = true
+  export let zIndex = 999
 
   const dispatch = createEventDispatcher()
   let visible = fixed || inline
@@ -101,7 +102,11 @@
   <Portal target=".modal-container">
     {#if visible}
       <!-- svelte-ignore a11y-no-static-element-interactions -->
-      <div class="spectrum-Underlay is-open" on:mousedown|self={cancel}>
+      <div
+        class="spectrum-Underlay is-open"
+        on:mousedown|self={cancel}
+        style="z-index:{zIndex || 999}"
+      >
         <div
           class="background"
           in:fade={{ duration: 200 }}
@@ -132,7 +137,6 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    z-index: 999;
     overflow: auto;
     overflow-x: hidden;
     background: transparent;

package/src/Popover/Popover.svelte

@@ -12,6 +12,7 @@
   export let anchor
   export let align = "right"
   export let portalTarget
+  export let minWidth
   export let maxWidth
   export let maxHeight
   export let open = false
@@ -21,7 +22,6 @@
   export let customHeight
   export let animate = true
   export let customZindex
-
   export let handlePostionUpdate
   export let showPopover = true
   export let clickOutsideOverride = false
@@ -87,6 +87,7 @@
         align,
         maxHeight,
         maxWidth,
+        minWidth,
         useAnchorWidth,
         offset,
         customUpdate: handlePostionUpdate,
@@ -102,6 +103,8 @@
       role="presentation"
       style="height: {customHeight}; --customZindex: {customZindex};"
       transition:fly|local={{ y: -20, duration: animate ? 200 : 0 }}
+      on:mouseenter
+      on:mouseleave
     >
       <slot />
     </div>

package/src/Tooltip/AbsTooltip.svelte

@@ -24,6 +24,7 @@
   export let text = ""
   export let fixed = false
   export let color = null
+  export let noWrap = false
 
   let wrapper
   let hovered = false
@@ -105,6 +106,7 @@
   <Portal target=".spectrum">
     <span
       class="spectrum-Tooltip spectrum-Tooltip--{type} spectrum-Tooltip--{position} is-open"
+      class:noWrap
       style={`left:${left}px;top:${top}px;${tooltipStyle}`}
       transition:fade|local={{ duration: 130 }}
     >
@@ -118,6 +120,9 @@
   .abs-tooltip {
     display: contents;
   }
+  .spectrum-Tooltip.noWrap .spectrum-Tooltip-label {
+    width: max-content;
+  }
   .spectrum-Tooltip {
     position: absolute;
     z-index: 9999;