@budibase/bbui 2.1.40-alpha.4 → 2.1.40-alpha.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.1.40-alpha.4",
+  "version": "2.1.40-alpha.6",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.2.1",
-    "@budibase/string-templates": "2.1.40-alpha.4",
+    "@budibase/string-templates": "2.1.40-alpha.6",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",
@@ -88,5 +88,5 @@
   "resolutions": {
     "loader-utils": "1.4.1"
   },
-  "gitHead": "5c318f9d9f9f4b4377c8a6d3345321a50692ac14"
+  "gitHead": "bd527a02929f9749d7cfd085cdeaf7a0c3d6d427"
 }

package/src/Actions/click_outside.js

@@ -1,18 +1,53 @@
-export default function clickOutside(element, callbackFunction) {
-  function onClick(event) {
-    if (!element.contains(event.target)) {
-      callbackFunction(event)
+const ignoredClasses = [".flatpickr-calendar", ".modal-container"]
+let clickHandlers = []
+
+/**
+ * Handle a body click event
+ */
+const handleClick = event => {
+  // Ignore click if needed
+  for (let className of ignoredClasses) {
+    if (event.target.closest(className)) {
+      return
+    }
+  }
+
+  // Process handlers
+  clickHandlers.forEach(handler => {
+    if (!handler.element.contains(event.target)) {
+      handler.callback?.(event)
     }
+  })
+}
+document.documentElement.addEventListener("click", handleClick, true)
+
+/**
+ * Adds or updates a click handler
+ */
+const updateHandler = (id, element, callback) => {
+  let existingHandler = clickHandlers.find(x => x.id === id)
+  if (!existingHandler) {
+    clickHandlers.push({ id, element, callback })
+  } else {
+    existingHandler.callback = callback
   }
+}
 
-  document.body.addEventListener("click", onClick, true)
+/**
+ * Removes a click handler
+ */
+const removeHandler = id => {
+  clickHandlers = clickHandlers.filter(x => x.id !== id)
+}
 
+/**
+ * Svelte action to apply a click outside handler for a certain element
+ */
+export default (element, callback) => {
+  const id = Math.random()
+  updateHandler(id, element, callback)
   return {
-    update(newCallbackFunction) {
-      callbackFunction = newCallbackFunction
-    },
-    destroy() {
-      document.body.removeEventListener("click", onClick, true)
-    },
+    update: newCallback => updateHandler(id, element, newCallback),
+    destroy: () => removeHandler(id),
   }
 }

package/src/DetailSummary/DetailSummary.svelte

@@ -19,13 +19,19 @@
 </script>
 
 <div class="property-group-container">
-  <div class="property-group-name" on:click={onHeaderClick}>
-    <div class="name">{name}</div>
-    {#if collapsible}
-      <Icon size="S" name={show ? "Remove" : "Add"} />
-    {/if}
-  </div>
-  <div class="property-panel" class:show={show || !collapsible}>
+  {#if name}
+    <div class="property-group-name" on:click={onHeaderClick}>
+      <div class="name">{name}</div>
+      {#if collapsible}
+        <Icon size="S" name={show ? "Remove" : "Add"} />
+      {/if}
+    </div>
+  {/if}
+  <div
+    class="property-panel"
+    class:show={show || !collapsible}
+    class:no-title={!name}
+  >
     <slot />
   </div>
 </div>
@@ -72,6 +78,9 @@
     padding: var(--spacing-s) var(--spacing-xl) var(--spacing-xl)
       var(--spacing-xl);
   }
+  .property-panel.no-title {
+    padding: var(--spacing-xl);
+  }
 
   .show {
     display: flex;

package/src/Form/Core/DatePicker.svelte

@@ -23,6 +23,15 @@
   let open = false
   let flatpickr, flatpickrOptions
 
+  // Another classic flatpickr issue. Errors were randomly being thrown due to
+  // flatpickr internal code. Making sure that "destroy" is a valid function
+  // fixes it. The sooner we remove flatpickr the better.
+  $: {
+    if (flatpickr && !flatpickr.destroy) {
+      flatpickr.destroy = () => {}
+    }
+  }
+
   const resolveTimeStamp = timestamp => {
     let maskedDate = new Date(`0-${timestamp}`)
 
@@ -252,6 +261,7 @@
     width: 100vw;
     height: 100vh;
     z-index: 999;
+    max-height: 100%;
   }
   :global(.flatpickr-calendar) {
     font-family: "Source Sans Pro", sans-serif;

package/src/Icon/Icon.svelte

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

package/src/Table/Table.svelte

@@ -275,157 +275,159 @@
   }
 </script>
 
-<div
-  class="wrapper"
-  class:wrapper--quiet={quiet}
-  class:wrapper--compact={compact}
-  bind:offsetHeight={height}
-  style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
->
-  {#if loading}
-    <div class="loading" style={heightStyle}>
-      <slot name="loadingIndicator">
-        <ProgressCircle />
-      </slot>
-    </div>
-  {:else}
-    <div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
-      {#if fields.length}
-        <div class="spectrum-Table-head">
-          {#if showEditColumn}
-            <div
-              class:noBorderHeader={!showHeaderBorder}
-              class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
-            >
-              {#if allowSelectRows}
-                <Checkbox
-                  bind:value={checkboxStatus}
-                  on:change={toggleSelectAll}
-                />
-              {:else}
-                Edit
-              {/if}
-            </div>
-          {/if}
-          {#each fields as field}
-            <div
-              class="spectrum-Table-headCell"
-              class:noBorderHeader={!showHeaderBorder}
-              class:spectrum-Table-headCell--alignCenter={schema[field]
-                .align === "Center"}
-              class:spectrum-Table-headCell--alignRight={schema[field].align ===
-                "Right"}
-              class:is-sortable={schema[field].sortable !== false}
-              class:is-sorted-desc={sortColumn === field &&
-                sortOrder === "Descending"}
-              class:is-sorted-asc={sortColumn === field &&
-                sortOrder === "Ascending"}
-              on:click={() => sortBy(schema[field])}
-            >
-              <div class="title">{getDisplayName(schema[field])}</div>
-              {#if schema[field]?.autocolumn}
-                <svg
-                  class="spectrum-Icon spectrum-Table-autoIcon"
-                  focusable="false"
-                >
-                  <use xlink:href="#spectrum-icon-18-MagicWand" />
-                </svg>
-              {/if}
-              {#if sortColumn === field}
-                <svg
-                  class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
-                  focusable="false"
-                  aria-hidden="true"
-                >
-                  <use xlink:href="#spectrum-css-icon-Arrow100" />
-                </svg>
-              {/if}
-              {#if allowEditColumns && schema[field]?.editable !== false}
-                <svg
-                  class="spectrum-Icon spectrum-Table-editIcon"
-                  focusable="false"
-                  on:click={e => editColumn(e, field)}
-                >
-                  <use xlink:href="#spectrum-icon-18-Edit" />
-                </svg>
-              {/if}
-            </div>
-          {/each}
-        </div>
-      {/if}
-      {#if sortedRows?.length}
-        {#each sortedRows as row, idx}
-          <div class="spectrum-Table-row">
+{#key fields?.length}
+  <div
+    class="wrapper"
+    class:wrapper--quiet={quiet}
+    class:wrapper--compact={compact}
+    bind:offsetHeight={height}
+    style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
+  >
+    {#if loading}
+      <div class="loading" style={heightStyle}>
+        <slot name="loadingIndicator">
+          <ProgressCircle />
+        </slot>
+      </div>
+    {:else}
+      <div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
+        {#if fields.length}
+          <div class="spectrum-Table-head">
             {#if showEditColumn}
               <div
-                class:noBorderCheckbox={!showHeaderBorder}
-                class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
-                on:click={e => {
-                  toggleSelectRow(row)
-                  e.stopPropagation()
-                }}
+                class:noBorderHeader={!showHeaderBorder}
+                class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
               >
-                <SelectEditRenderer
-                  data={row}
-                  selected={selectedRows.findIndex(
-                    selectedRow => selectedRow._id === row._id
-                  ) !== -1}
-                  onEdit={e => editRow(e, row)}
-                  {allowSelectRows}
-                  {allowEditRows}
-                />
+                {#if allowSelectRows}
+                  <Checkbox
+                    bind:value={checkboxStatus}
+                    on:change={toggleSelectAll}
+                  />
+                {:else}
+                  Edit
+                {/if}
               </div>
             {/if}
             {#each fields as field}
               <div
-                class="spectrum-Table-cell"
-                class:spectrum-Table-cell--divider={!!schema[field].divider}
-                style={cellStyles[field]}
-                on:click={() => {
-                  if (!schema[field]?.preventSelectRow) {
-                    dispatch("click", row)
-                    toggleSelectRow(row)
-                  }
-                }}
+                class="spectrum-Table-headCell"
+                class:noBorderHeader={!showHeaderBorder}
+                class:spectrum-Table-headCell--alignCenter={schema[field]
+                  .align === "Center"}
+                class:spectrum-Table-headCell--alignRight={schema[field]
+                  .align === "Right"}
+                class:is-sortable={schema[field].sortable !== false}
+                class:is-sorted-desc={sortColumn === field &&
+                  sortOrder === "Descending"}
+                class:is-sorted-asc={sortColumn === field &&
+                  sortOrder === "Ascending"}
+                on:click={() => sortBy(schema[field])}
               >
-                <CellRenderer
-                  {customRenderers}
-                  {row}
-                  schema={schema[field]}
-                  value={deepGet(row, field)}
-                  on:clickrelationship
-                  on:buttonclick
-                >
-                  <slot />
-                </CellRenderer>
+                <div class="title">{getDisplayName(schema[field])}</div>
+                {#if schema[field]?.autocolumn}
+                  <svg
+                    class="spectrum-Icon spectrum-Table-autoIcon"
+                    focusable="false"
+                  >
+                    <use xlink:href="#spectrum-icon-18-MagicWand" />
+                  </svg>
+                {/if}
+                {#if sortColumn === field}
+                  <svg
+                    class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
+                    focusable="false"
+                    aria-hidden="true"
+                  >
+                    <use xlink:href="#spectrum-css-icon-Arrow100" />
+                  </svg>
+                {/if}
+                {#if allowEditColumns && schema[field]?.editable !== false}
+                  <svg
+                    class="spectrum-Icon spectrum-Table-editIcon"
+                    focusable="false"
+                    on:click={e => editColumn(e, field)}
+                  >
+                    <use xlink:href="#spectrum-icon-18-Edit" />
+                  </svg>
+                {/if}
               </div>
             {/each}
           </div>
-        {/each}
-      {:else}
-        <div
-          class="placeholder"
-          class:placeholder--custom={customPlaceholder}
-          class:placeholder--no-fields={!fields?.length}
-        >
-          {#if customPlaceholder}
-            <slot name="placeholder" />
-          {:else}
-            <div class="placeholder-content">
-              <svg
-                class="spectrum-Icon spectrum-Icon--sizeXXL"
-                focusable="false"
-              >
-                <use xlink:href="#spectrum-icon-18-Table" />
-              </svg>
-              <div>{placeholderText}</div>
+        {/if}
+        {#if sortedRows?.length}
+          {#each sortedRows as row, idx}
+            <div class="spectrum-Table-row">
+              {#if showEditColumn}
+                <div
+                  class:noBorderCheckbox={!showHeaderBorder}
+                  class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
+                  on:click={e => {
+                    toggleSelectRow(row)
+                    e.stopPropagation()
+                  }}
+                >
+                  <SelectEditRenderer
+                    data={row}
+                    selected={selectedRows.findIndex(
+                      selectedRow => selectedRow._id === row._id
+                    ) !== -1}
+                    onEdit={e => editRow(e, row)}
+                    {allowSelectRows}
+                    {allowEditRows}
+                  />
+                </div>
+              {/if}
+              {#each fields as field}
+                <div
+                  class="spectrum-Table-cell"
+                  class:spectrum-Table-cell--divider={!!schema[field].divider}
+                  style={cellStyles[field]}
+                  on:click={() => {
+                    if (!schema[field]?.preventSelectRow) {
+                      dispatch("click", row)
+                      toggleSelectRow(row)
+                    }
+                  }}
+                >
+                  <CellRenderer
+                    {customRenderers}
+                    {row}
+                    schema={schema[field]}
+                    value={deepGet(row, field)}
+                    on:clickrelationship
+                    on:buttonclick
+                  >
+                    <slot />
+                  </CellRenderer>
+                </div>
+              {/each}
             </div>
-          {/if}
-        </div>
-      {/if}
-    </div>
-  {/if}
-</div>
+          {/each}
+        {:else}
+          <div
+            class="placeholder"
+            class:placeholder--custom={customPlaceholder}
+            class:placeholder--no-fields={!fields?.length}
+          >
+            {#if customPlaceholder}
+              <slot name="placeholder" />
+            {:else}
+              <div class="placeholder-content">
+                <svg
+                  class="spectrum-Icon spectrum-Icon--sizeXXL"
+                  focusable="false"
+                >
+                  <use xlink:href="#spectrum-icon-18-Table" />
+                </svg>
+                <div>{placeholderText}</div>
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
+{/key}
 
 <style>
   /* Wrapper */