@budibase/bbui 2.5.5 → 2.5.6-alpha.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.5.5",
+  "version": "2.5.6-alpha.10",
   "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.5",
-    "@budibase/string-templates": "^2.5.5",
+    "@budibase/shared-core": "2.5.6-alpha.10",
+    "@budibase/string-templates": "2.5.6-alpha.10",
     "@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.2.3",
+    "svelte-flatpickr": "^3.3.2",
     "svelte-portal": "^1.0.0"
   },
   "resolutions": {
     "loader-utils": "1.4.1"
   },
-  "gitHead": "ed22164a05a38f41d3327b2ad18f23ddf857a062"
+  "gitHead": "5cd18e57d5c371d2dc375e20469f123e81aaec13"
 }

package/src/ActionButton/ActionButton.svelte

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

package/src/Actions/click_outside.js

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

package/src/Form/Core/Dropzone.svelte

@@ -138,7 +138,7 @@
   }
 </script>
 
-<div class="container">
+<div class="container" class:compact>
   {#if selectedImage}
     {#if gallery}
       <div class="gallery">
@@ -355,6 +355,9 @@
   input[type="file"] {
     display: none;
   }
+  .compact .spectrum-Dropzone {
+    padding: 6px 0 !important;
+  }
 
   .gallery {
     display: flex;
@@ -379,6 +382,17 @@
     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;
@@ -447,6 +461,13 @@
   .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,12 +20,13 @@
 
   const dispatch = createEventDispatcher()
 
-  $: selectedLookupMap = getSelectedLookupMap(value)
+  $: arrayValue = Array.isArray(value) ? value : [value].filter(x => !!x)
+  $: selectedLookupMap = getSelectedLookupMap(arrayValue)
   $: optionLookupMap = getOptionLookupMap(options)
 
-  $: fieldText = getFieldText(value, optionLookupMap, placeholder)
+  $: fieldText = getFieldText(arrayValue, optionLookupMap, placeholder)
   $: isOptionSelected = optionValue => selectedLookupMap[optionValue] === true
-  $: toggleOption = makeToggleOption(selectedLookupMap, value)
+  $: toggleOption = makeToggleOption(selectedLookupMap, arrayValue)
 
   const getFieldText = (value, map, placeholder) => {
     if (Array.isArray(value) && value.length > 0) {
@@ -84,7 +85,7 @@
   {readonly}
   {fieldText}
   {options}
-  isPlaceholder={!value?.length}
+  isPlaceholder={!arrayValue.length}
   {autocomplete}
   bind:fetchTerm
   {useFetch}

package/src/Form/Dropzone.svelte

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

package/src/Label/Label.svelte

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

package/src/Popover/Popover.svelte

@@ -14,11 +14,13 @@
   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"
 
@@ -64,6 +66,7 @@
       use:positionDropdown={{
         anchor,
         align,
+        maxHeight,
         maxWidth,
         useAnchorWidth,
         offset,
@@ -76,7 +79,7 @@
       class="spectrum-Popover is-open"
       role="presentation"
       style="height: {customHeight}"
-      transition:fly|local={{ y: -20, duration: 200 }}
+      transition:fly|local={{ y: -20, duration: animate ? 200 : 0 }}
     >
       <slot />
     </div>

package/src/Table/ArrayRenderer.svelte

@@ -5,8 +5,9 @@
 
   const displayLimit = 5
 
-  $: badges = Array.isArray(value) ? value.slice(0, displayLimit) : []
-  $: leftover = (value?.length ?? 0) - badges.length
+  $: arrayValue = Array.isArray(value) ? value : [value].filter(x => !!x)
+  $: badges = arrayValue.slice(0, displayLimit)
+  $: leftover = arrayValue.length - 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) {
+      if (fieldSchema.width && typeof fieldSchema.width === "string") {
         style += ` ${fieldSchema.width}`
       } else {
         style += " minmax(auto, 1fr)"

package/src/Typography/Body.svelte

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

package/src/Typography/Heading.svelte

@@ -9,6 +9,7 @@
 </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,4 +97,22 @@
 
 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);
+}