@budibase/bbui 2.5.6-alpha.9 → 2.5.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.5.6-alpha.9",
+  "version": "2.5.7",
   "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.5.6-alpha.9",
-    "@budibase/string-templates": "2.5.6-alpha.9",
+    "@budibase/shared-core": "^2.5.7",
+    "@budibase/string-templates": "^2.5.7",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -84,11 +84,11 @@
     "@spectrum-css/vars": "3.0.1",
     "dayjs": "^1.10.4",
     "easymde": "^2.16.1",
-    "svelte-flatpickr": "^3.3.2",
+    "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
   "resolutions": {
     "loader-utils": "1.4.1"
   },
-  "gitHead": "560204d82570bd22b987e6e35f8e659e9c047425"
+  "gitHead": "6c37b6a6c69a1da43a5c0930419e743cc18b5b42"
 }

package/src/ActionButton/ActionButton.svelte

@@ -71,7 +71,7 @@
     {/if}
     {#if icon}
       <svg
-        class="spectrum-Icon spectrum-Icon--sizeS"
+        class="spectrum-Icon spectrum-Icon--size{size}"
         focusable="false"
         aria-hidden="true"
         aria-label={icon}

package/src/Actions/click_outside.js

@@ -6,9 +6,6 @@ let clickHandlers = []
  */
 const handleClick = event => {
   // Ignore click if this is an ignored class
-  if (event.target.closest('[data-ignore-click-outside="true"]')) {
-    return
-  }
   for (let className of ignoredClasses) {
     if (event.target.closest(className)) {
       return
@@ -32,7 +29,6 @@ const handleClick = event => {
   })
 }
 document.documentElement.addEventListener("click", handleClick, true)
-document.documentElement.addEventListener("contextmenu", handleClick, true)
 
 /**
  * Adds or updates a click handler

package/src/Actions/position_dropdown.js

@@ -10,14 +10,7 @@ export default function positionDropdown(element, opts) {
 
   // Updates the position of the dropdown
   const updatePosition = opts => {
-    const {
-      anchor,
-      align,
-      maxHeight,
-      maxWidth,
-      useAnchorWidth,
-      offset = 5,
-    } = opts
+    const { anchor, align, maxWidth, useAnchorWidth, offset = 5 } = opts
     if (!anchor) {
       return
     }
@@ -38,11 +31,10 @@ export default function positionDropdown(element, opts) {
       styles.top = anchorBounds.top
     } else if (window.innerHeight - anchorBounds.bottom < 100) {
       styles.top = anchorBounds.top - elementBounds.height - offset
-      styles.maxHeight = maxHeight || 240
+      styles.maxHeight = 240
     } else {
       styles.top = anchorBounds.bottom + offset
-      styles.maxHeight =
-        maxHeight || window.innerHeight - anchorBounds.bottom - 20
+      styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20
     }
 
     // Determine horizontal styles

package/src/Form/Core/Dropzone.svelte

@@ -138,7 +138,7 @@
   }
 </script>
 
-<div class="container" class:compact>
+<div class="container">
   {#if selectedImage}
     {#if gallery}
       <div class="gallery">
@@ -355,9 +355,6 @@
   input[type="file"] {
     display: none;
   }
-  .compact .spectrum-Dropzone {
-    padding: 6px 0 !important;
-  }
 
   .gallery {
     display: flex;
@@ -382,17 +379,6 @@
     object-fit: contain;
     margin: 20px 30px;
   }
-  .compact .placeholder,
-  .compact img {
-    margin: 10px 16px;
-  }
-  .compact img {
-    height: 90px;
-  }
-  .compact .gallery {
-    padding: 6px 10px;
-    margin-bottom: 8px;
-  }
   .title {
     display: flex;
     flex-direction: row;
@@ -461,13 +447,6 @@
   .disabled .spectrum-Heading--sizeL {
     color: var(--spectrum-alias-text-color-disabled);
   }
-  .compact .spectrum-Dropzone {
-    padding-top: 8px;
-    padding-bottom: 8px;
-  }
-  .compact .spectrum-IllustratedMessage-description {
-    margin: 0;
-  }
 
   .tags {
     margin-top: 20px;

package/src/Form/Core/Multiselect.svelte

@@ -20,13 +20,12 @@
 
   const dispatch = createEventDispatcher()
 
-  $: arrayValue = Array.isArray(value) ? value : [value].filter(x => !!x)
-  $: selectedLookupMap = getSelectedLookupMap(arrayValue)
+  $: selectedLookupMap = getSelectedLookupMap(value)
   $: optionLookupMap = getOptionLookupMap(options)
 
-  $: fieldText = getFieldText(arrayValue, optionLookupMap, placeholder)
+  $: fieldText = getFieldText(value, optionLookupMap, placeholder)
   $: isOptionSelected = optionValue => selectedLookupMap[optionValue] === true
-  $: toggleOption = makeToggleOption(selectedLookupMap, arrayValue)
+  $: toggleOption = makeToggleOption(selectedLookupMap, value)
 
   const getFieldText = (value, map, placeholder) => {
     if (Array.isArray(value) && value.length > 0) {
@@ -85,7 +84,7 @@
   {readonly}
   {fieldText}
   {options}
-  isPlaceholder={!arrayValue.length}
+  isPlaceholder={!value?.length}
   {autocomplete}
   bind:fetchTerm
   {useFetch}

package/src/Form/Dropzone.svelte

@@ -16,7 +16,6 @@
   export let gallery = true
   export let fileTags = []
   export let maximum = undefined
-  export let compact = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -38,7 +37,6 @@
     {gallery}
     {fileTags}
     {maximum}
-    {compact}
     on:change={onChange}
   />
 </Field>

package/src/Label/Label.svelte

@@ -9,7 +9,6 @@
 
 <TooltipWrapper {tooltip} {size}>
   <label
-    data-testid="label"
     class:muted
     for=""
     class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}

package/src/Popover/Popover.svelte

@@ -14,13 +14,11 @@
   export let align = "right"
   export let portalTarget
   export let maxWidth
-  export let maxHeight
   export let open = false
   export let useAnchorWidth = false
   export let dismissible = true
   export let offset = 5
   export let customHeight
-  export let animate = true
 
   $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
 
@@ -66,7 +64,6 @@
       use:positionDropdown={{
         anchor,
         align,
-        maxHeight,
         maxWidth,
         useAnchorWidth,
         offset,
@@ -79,7 +76,7 @@
       class="spectrum-Popover is-open"
       role="presentation"
       style="height: {customHeight}"
-      transition:fly|local={{ y: -20, duration: animate ? 200 : 0 }}
+      transition:fly|local={{ y: -20, duration: 200 }}
     >
       <slot />
     </div>

package/src/Table/ArrayRenderer.svelte

@@ -5,9 +5,8 @@
 
   const displayLimit = 5
 
-  $: arrayValue = Array.isArray(value) ? value : [value].filter(x => !!x)
-  $: badges = arrayValue.slice(0, displayLimit)
-  $: leftover = arrayValue.length - badges.length
+  $: badges = Array.isArray(value) ? value.slice(0, displayLimit) : []
+  $: leftover = (value?.length ?? 0) - badges.length
 </script>
 
 {#each badges as badge}

package/src/Table/Table.svelte

@@ -143,7 +143,7 @@
     }
     fields?.forEach(field => {
       const fieldSchema = schema[field]
-      if (fieldSchema.width && typeof fieldSchema.width === "string") {
+      if (fieldSchema.width) {
         style += ` ${fieldSchema.width}`
       } else {
         style += " minmax(auto, 1fr)"

package/src/Typography/Body.svelte

@@ -9,7 +9,6 @@
 </script>
 
 <p
-  data-testid="typography-body"
   style={`
     ${weight ? `font-weight:${weight};` : ""}
     ${textAlign ? `text-align:${textAlign};` : ""}

package/src/Typography/Heading.svelte

@@ -9,7 +9,6 @@
 </script>
 
 <h1
-  data-testid="typography-heading"
   style={textAlign ? `text-align:${textAlign}` : ``}
   class:noPadding
   class="spectrum-Heading spectrum-Heading--size{size} spectrum-Heading--{weight}"

package/src/bbui.css

@@ -97,22 +97,4 @@
 
 a {
   text-decoration: none;
-}
-
-/* Custom theme additions */
-.spectrum--darkest {
-  --drop-shadow: rgba(0, 0, 0, 0.6);
-  --spectrum-global-color-blue-100: rgb(28, 33, 43);
-}
-.spectrum--dark {
-  --drop-shadow: rgba(0, 0, 0, 0.3);
-  --spectrum-global-color-blue-100: rgb(42, 47, 57);
-}
-.spectrum--light {
-  --drop-shadow: rgba(0, 0, 0, 0.075);
-  --spectrum-global-color-blue-100: rgb(240, 245, 255);
-}
-.spectrum--lightest {
-  --drop-shadow: rgba(0, 0, 0, 0.05);
-  --spectrum-global-color-blue-100: rgb(240, 244, 255);
-}
+}