@budibase/bbui 0.9.137 → 0.9.140

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "0.9.137",
+  "version": "0.9.140",
   "license": "AGPL-3.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -81,5 +81,5 @@
     "svelte-flatpickr": "^3.1.0",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "64863fcf5eadaf14ef22698c93a863632c122d0b"
+  "gitHead": "795295aa9082a80cce744eebdab837753ed95548"
 }

package/src/ActionButton/ActionButton.svelte

@@ -12,6 +12,7 @@
   export let dataCy = null
   export let size = "M"
   export let active = false
+  export let fullWidth = false
 
   function longPress(element) {
     if (!longPressable) return
@@ -40,6 +41,7 @@
   class:spectrum-ActionButton--quiet={quiet}
   class:spectrum-ActionButton--emphasized={emphasized}
   class:is-selected={selected}
+  class:fullWidth
   class="spectrum-ActionButton spectrum-ActionButton--size{size}"
   class:active
   {disabled}
@@ -71,6 +73,9 @@
 </button>
 
 <style>
+  .fullWidth {
+    width: 100%;
+  }
   .active,
   .active svg {
     color: var(--spectrum-global-color-blue-600);

package/src/Badge/Badge.svelte

@@ -7,6 +7,7 @@
   export let orange = false
   export let yellow = false
   export let seafoam = false
+  export let green = false
   export let active = false
   export let inactive = false
 </script>
@@ -17,6 +18,7 @@
   class:spectrum-Label--large={size === "L"}
   class:spectrum-Label--grey={grey}
   class:spectrum-Label--red={red}
+  class:spectrum-Label--green={green}
   class:spectrum-Label--orange={orange}
   class:spectrum-Label--yellow={yellow}
   class:spectrum-Label--seafoam={seafoam}

package/src/Drawer/Drawer.svelte

@@ -6,9 +6,8 @@
   import Heading from "../Typography/Heading.svelte"
 
   export let title
-
+  export let fillWidth
   let visible = false
-
   export function show() {
     if (visible) {
       return
@@ -34,7 +33,7 @@
 
 {#if visible}
   <Portal>
-    <section class="drawer" transition:slide>
+    <section class:fillWidth class="drawer" transition:slide>
       <header>
         <div class="text">
           <Heading size="XS">{title}</Heading>
@@ -63,6 +62,10 @@
     z-index: 2;
   }
 
+  .fillWidth {
+    width: calc(100% - 260px) !important;
+  }
+
   header {
     display: flex;
     justify-content: space-between;

package/src/Form/Core/DatePicker.svelte

@@ -13,6 +13,7 @@
   export let enableTime = true
   export let value = null
   export let placeholder = null
+  export let appendTo = undefined
 
   const dispatch = createEventDispatcher()
   const flatpickrId = `${generateID()}-wrapper`
@@ -24,6 +25,7 @@
     altInput: true,
     altFormat: enableTime ? "F j Y, H:i" : "F j, Y",
     wrap: true,
+    appendTo,
   }
 
   const handleChange = event => {

package/src/Form/DatePicker.svelte

@@ -10,6 +10,7 @@
   export let error = null
   export let enableTime = true
   export let placeholder = null
+  export let appendTo = undefined
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -26,6 +27,7 @@
     {value}
     {placeholder}
     {enableTime}
+    {appendTo}
     on:change={onChange}
   />
 </Field>

package/src/Icon/Icon.svelte

@@ -36,7 +36,7 @@
     transition: color var(--spectrum-global-animation-duration-100, 130ms);
   }
   svg.hoverable:hover {
-    color: var(--spectrum-alias-icon-color-selected);
+    color: var(--spectrum-alias-icon-color-selected-hover);
     cursor: pointer;
   }
 

package/src/Layout/Page.svelte

@@ -21,8 +21,5 @@
   .wide {
     max-width: none;
     margin: 0;
-    padding: var(--spacing-xl) calc(var(--spacing-xl) * 2)
-      calc(var(--spacing-xl) * 2) calc(var(--spacing-xl) * 2);
-    min-height: calc(100% - var(--spacing-xl) * 3);
   }
 </style>

package/src/Modal/ModalContent.svelte

@@ -46,8 +46,10 @@
       <h1
         class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader"
         class:noDivider={!showDivider}
+        class:header-spacing={$$slots.header}
       >
         {title}
+        <slot name="header" />
       </h1>
       {#if showDivider}
         <Divider size="M" />
@@ -120,4 +122,9 @@
   .close-icon :global(svg) {
     margin-right: 0;
   }
+
+  .header-spacing {
+    display: flex;
+    justify-content: space-between;
+  }
 </style>

package/src/ProgressCircle/ProgressCircle.svelte

@@ -13,7 +13,7 @@
     }
   }
 
-  export let value = false
+  export let value = null
   export let minValue = 0
   export let maxValue = 100
 
@@ -42,7 +42,7 @@
 
 <div
   on:click
-  class:spectrum-ProgressCircle--indeterminate={!value}
+  class:spectrum-ProgressCircle--indeterminate={value == null}
   class:spectrum-ProgressCircle--overBackground={overBackground}
   class="spectrum-ProgressCircle spectrum-ProgressCircle--{convertSize(size)}"
 >

package/src/SideNavigation/Item.svelte

@@ -13,6 +13,7 @@
   class="spectrum-SideNav-item"
   class:is-selected={selected}
   class:is-disabled={disabled}
+  on:click
 >
   {#if heading}
     <h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}">

package/src/Table/Table.svelte

@@ -3,6 +3,7 @@
   import "@spectrum-css/table/dist/index-vars.css"
   import CellRenderer from "./CellRenderer.svelte"
   import SelectEditRenderer from "./SelectEditRenderer.svelte"
+  import { cloneDeep } from "lodash"
 
   /**
    * The expected schema is our normal couch schemas for our tables.
@@ -197,7 +198,7 @@
 
   const editRow = (e, row) => {
     e.stopPropagation()
-    dispatch("editrow", row)
+    dispatch("editrow", cloneDeep(row))
   }
 
   const toggleSelectRow = row => {