@budibase/bbui 2.1.43-alpha.2 → 2.1.43

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.1.43-alpha.2",
+  "version": "2.1.43",
   "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.43-alpha.2",
+    "@budibase/string-templates": "^2.1.43",
     "@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": "9967b1962b7ddcbe4fac08fd06b1967e3ce94e01"
+  "gitHead": "462d3be32347f58d90ea2fa98bd1e42faa3b0d9b"
 }

package/src/Actions/click_outside.js

@@ -1,53 +1,18 @@
-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)
+export default function clickOutside(element, callbackFunction) {
+  function onClick(event) {
+    if (!element.contains(event.target)) {
+      callbackFunction(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
   }
-}
 
-/**
- * Removes a click handler
- */
-const removeHandler = id => {
-  clickHandlers = clickHandlers.filter(x => x.id !== id)
-}
+  document.body.addEventListener("click", onClick, true)
 
-/**
- * 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: newCallback => updateHandler(id, element, newCallback),
-    destroy: () => removeHandler(id),
+    update(newCallbackFunction) {
+      callbackFunction = newCallbackFunction
+    },
+    destroy() {
+      document.body.removeEventListener("click", onClick, true)
+    },
   }
 }

package/src/DetailSummary/DetailSummary.svelte

@@ -19,19 +19,13 @@
 </script>
 
 <div class="property-group-container">
-  {#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}
-  >
+  <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}>
     <slot />
   </div>
 </div>
@@ -78,9 +72,6 @@
     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,15 +23,6 @@
   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}`)
 
@@ -261,7 +252,6 @@
     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) !important;
+    color: var(--spectrum-alias-icon-color-selected-hover);
     cursor: pointer;
   }
 

package/src/Modal/ModalContent.svelte

@@ -28,9 +28,9 @@
   let loading = false
   $: confirmDisabled = disabled || loading
 
-  async function secondary(e) {
+  async function secondary() {
     loading = true
-    if (!secondaryAction || (await secondaryAction(e)) !== false) {
+    if (!secondaryAction || (await secondaryAction()) !== false) {
       hide()
     }
     loading = false

package/src/Notification/Notification.svelte

@@ -25,7 +25,7 @@
     </svg>
   {/if}
   <div class="spectrum-Toast-body" class:actionBody={!!action}>
-    <div class="wrap spectrum-Toast-content">{message || ""}</div>
+    <div class="spectrum-Toast-content">{message || ""}</div>
     {#if action}
       <ActionButton quiet emphasized on:click={action}>
         <div style="color: white; font-weight: 600;">{actionMessage}</div>
@@ -53,10 +53,6 @@
 </div>
 
 <style>
-  .wrap {
-    overflow-wrap: anywhere;
-  }
-
   .spectrum-Toast {
     pointer-events: all;
   }

package/src/Table/Table.svelte

@@ -71,8 +71,7 @@
     visibleRowCount,
     rowCount,
     totalRowCount,
-    rowHeight,
-    loading
+    rowHeight
   )
   $: sortedRows = sortRows(rows, sortColumn, sortOrder)
   $: gridStyle = getGridStyle(fields, schema, showEditColumn)
@@ -121,12 +120,8 @@
     visibleRowCount,
     rowCount,
     totalRowCount,
-    rowHeight,
-    loading
+    rowHeight
   ) => {
-    if (loading) {
-      return `height: ${headerHeight + visibleRowCount * rowHeight}px;`
-    }
     if (!rowCount || !visibleRowCount || totalRowCount <= rowCount) {
       return ""
     }
@@ -275,159 +270,155 @@
   }
 </script>
 
-{#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">
+<div
+  class="wrapper"
+  class:wrapper--quiet={quiet}
+  class:wrapper--compact={compact}
+  bind:offsetHeight={height}
+  style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
+>
+  {#if !loaded}
+    <div class="loading" style={heightStyle}>
+      <ProgressCircle />
+    </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">
             {#if showEditColumn}
               <div
-                class:noBorderHeader={!showHeaderBorder}
-                class="spectrum-Table-headCell spectrum-Table-headCell--divider spectrum-Table-headCell--edit"
+                class:noBorderCheckbox={!showHeaderBorder}
+                class="spectrum-Table-cell spectrum-Table-cell--divider spectrum-Table-cell--edit"
+                on:click={e => {
+                  toggleSelectRow(row)
+                  e.stopPropagation()
+                }}
               >
-                {#if allowSelectRows}
-                  <Checkbox
-                    bind:value={checkboxStatus}
-                    on:change={toggleSelectAll}
-                  />
-                {:else}
-                  Edit
-                {/if}
+                <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-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])}
+                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)
+                  }
+                }}
               >
-                <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}
+                <CellRenderer
+                  {customRenderers}
+                  {row}
+                  schema={schema[field]}
+                  value={deepGet(row, field)}
+                  on:clickrelationship
+                  on:buttonclick
+                >
+                  <slot />
+                </CellRenderer>
               </div>
             {/each}
           </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}
+        {/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>
-          {/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}
+          {/if}
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
 
 <style>
   /* Wrapper */
@@ -447,10 +438,9 @@
 
   /* Loading */
   .loading {
-    display: flex;
-    align-items: center;
+    display: grid;
+    place-items: center;
     min-height: 100px;
-    justify-content: center;
   }
 
   /* Table */

package/src/index.js

@@ -4,7 +4,6 @@ import "./bbui.css"
 import "@spectrum-css/icon/dist/index-vars.css"
 
 // Components
-export { default as Skeleton } from "./Skeleton/Skeleton.svelte"
 export { default as Input } from "./Form/Input.svelte"
 export { default as Stepper } from "./Form/Stepper.svelte"
 export { default as TextArea } from "./Form/TextArea.svelte"

package/src/Skeleton/Skeleton.svelte

@@ -1,56 +0,0 @@
-<div class="skeleton">
-  <div class="children">
-    <slot />
-  </div>
-</div>
-
-<style>
-  .skeleton {
-    height: 100%;
-    width: 100%;
-    opacity: 0;
-    background-color: var(--spectrum-global-color-gray-300) !important;
-    border-radius: 7px;
-    overflow: hidden;
-    position: relative;
-    animation: fadeIn 130ms ease 0s 1 normal forwards;
-  }
-
-  .children {
-    pointer-events: none;
-    opacity: 0;
-  }
-
-  .skeleton::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transform: translateX(-100%);
-    background-image: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0) 0,
-      rgba(255, 255, 255, 0.2) 20%,
-      rgba(255, 255, 255, 0.5) 60%,
-      rgba(255, 255, 255, 0)
-    );
-    animation: shimmer 2s infinite;
-    content: "";
-  }
-
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes shimmer {
-    100% {
-      transform: translateX(100%);
-    }
-  }
-</style>