@budibase/bbui 2.23.12 → 2.24.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.23.12",
+  "version": "2.24.1",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -35,14 +35,15 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/shared-core": "2.23.12",
-    "@budibase/string-templates": "2.23.12",
+    "@budibase/shared-core": "2.24.1",
+    "@budibase/string-templates": "2.24.1",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
     "@spectrum-css/avatar": "3.0.2",
     "@spectrum-css/button": "3.0.1",
     "@spectrum-css/buttongroup": "3.0.2",
+    "@spectrum-css/calendar": "3.2.7",
     "@spectrum-css/checkbox": "3.0.2",
     "@spectrum-css/dialog": "3.0.1",
     "@spectrum-css/divider": "1.0.3",
@@ -82,7 +83,6 @@
     "dayjs": "^1.10.8",
     "easymde": "^2.16.1",
     "svelte-dnd-action": "^0.9.8",
-    "svelte-flatpickr": "3.2.3",
     "svelte-portal": "^1.0.0"
   },
   "resolutions": {
@@ -103,5 +103,5 @@
       }
     }
   },
-  "gitHead": "35dcb2465a0a116c4a6169a01b6154990747627a"
+  "gitHead": "5cb6ac027c7f45e174e3545a7399d425822970d8"
 }

package/src/ActionMenu/ActionMenu.svelte

@@ -38,7 +38,15 @@
 <div use:getAnchor on:click={openMenu}>
   <slot name="control" />
 </div>
-<Popover bind:this={dropdown} {anchor} {align} {portalTarget} on:open on:close>
+<Popover
+  bind:this={dropdown}
+  {anchor}
+  {align}
+  {portalTarget}
+  resizable={false}
+  on:open
+  on:close
+>
   <Menu>
     <slot />
   </Menu>

package/src/Actions/click_outside.js

@@ -1,7 +1,12 @@
 const ignoredClasses = [
-  ".flatpickr-calendar",
-  ".spectrum-Popover",
   ".download-js-link",
+  ".spectrum-Menu",
+  ".date-time-popover",
+]
+const conditionallyIgnoredClasses = [
+  ".spectrum-Underlay",
+  ".drawer-wrapper",
+  ".spectrum-Popover",
 ]
 let clickHandlers = []
 
@@ -9,6 +14,9 @@ let clickHandlers = []
  * Handle a body click event
  */
 const handleClick = event => {
+  // Treat right clicks (context menu events) as normal clicks
+  const eventType = event.type === "contextmenu" ? "click" : event.type
+
   // Ignore click if this is an ignored class
   if (event.target.closest('[data-ignore-click-outside="true"]')) {
     return
@@ -21,26 +29,23 @@ const handleClick = event => {
 
   // Process handlers
   clickHandlers.forEach(handler => {
-    if (handler.element.contains(event.target)) {
+    // Check that we're the right kind of click event
+    if (handler.allowedType && eventType !== handler.allowedType) {
       return
     }
 
-    // Ignore clicks for modals, unless the handler is registered from a modal
-    const sourceInModal = handler.anchor.closest(".spectrum-Underlay") != null
-    const clickInModal = event.target.closest(".spectrum-Underlay") != null
-    if (clickInModal && !sourceInModal) {
-      return
-    }
-
-    // Ignore clicks for drawers, unless the handler is registered from a drawer
-    const sourceInDrawer = handler.anchor.closest(".drawer-wrapper") != null
-    const clickInDrawer = event.target.closest(".drawer-wrapper") != null
-    if (clickInDrawer && !sourceInDrawer) {
+    // Check that the click isn't inside the target
+    if (handler.element.contains(event.target)) {
       return
     }
 
-    if (handler.allowedType && event.type !== handler.allowedType) {
-      return
+    // Ignore clicks for certain classes unless we're nested inside them
+    for (let className of conditionallyIgnoredClasses) {
+      const sourceInside = handler.anchor.closest(className) != null
+      const clickInside = event.target.closest(className) != null
+      if (clickInside && !sourceInside) {
+        return
+      }
     }
 
     handler.callback?.(event)
@@ -48,6 +53,7 @@ const handleClick = event => {
 }
 document.documentElement.addEventListener("click", handleClick, true)
 document.documentElement.addEventListener("mousedown", handleClick, true)
+document.documentElement.addEventListener("contextmenu", handleClick, true)
 
 /**
  * Adds or updates a click handler

package/src/Actions/position_dropdown.js

@@ -1,3 +1,22 @@
+/**
+ * Valid alignment options are
+ * - left
+ * - right
+ * - left-outside
+ * - right-outside
+ **/
+
+// Strategies are defined as [Popover]To[Anchor].
+// They can apply for both horizontal and vertical alignment.
+const Strategies = {
+  StartToStart: "StartToStart", // e.g. left alignment
+  EndToEnd: "EndToEnd", // e.g. right alignment
+  StartToEnd: "StartToEnd", // e.g. right-outside alignment
+  EndToStart: "EndToStart", // e.g. left-outside alignment
+  MidPoint: "MidPoint", // centers relative to midpoints
+  ScreenEdge: "ScreenEdge", // locks to screen edge
+}
+
 export default function positionDropdown(element, opts) {
   let resizeObserver
   let latestOpts = opts
@@ -19,6 +38,8 @@ export default function positionDropdown(element, opts) {
       useAnchorWidth,
       offset = 5,
       customUpdate,
+      resizable,
+      wrap,
     } = opts
     if (!anchor) {
       return
@@ -27,56 +48,159 @@ export default function positionDropdown(element, opts) {
     // Compute bounds
     const anchorBounds = anchor.getBoundingClientRect()
     const elementBounds = element.getBoundingClientRect()
+    const winWidth = window.innerWidth
+    const winHeight = window.innerHeight
+    const screenOffset = 8
     let styles = {
-      maxHeight: null,
-      minWidth,
-      maxWidth,
+      maxHeight,
+      minWidth: useAnchorWidth ? anchorBounds.width : minWidth,
+      maxWidth: useAnchorWidth ? anchorBounds.width : maxWidth,
       left: null,
       top: null,
     }
 
+    // Ignore all our logic for custom logic
     if (typeof customUpdate === "function") {
       styles = customUpdate(anchorBounds, elementBounds, {
         ...styles,
         offset: opts.offset,
       })
-    } else {
-      // Determine vertical styles
-      if (align === "right-outside" || align === "left-outside") {
-        styles.top =
-          anchorBounds.top + anchorBounds.height / 2 - elementBounds.height / 2
-        styles.maxHeight = maxHeight
-        if (styles.top + elementBounds.height > window.innerHeight) {
-          styles.top = window.innerHeight - elementBounds.height
+    }
+
+    // Otherwise position ourselves as normal
+    else {
+      // Checks if we overflow off the screen. We only report that we overflow
+      // when the alternative dimension is larger than the one we are checking.
+      const doesXOverflow = () => {
+        const overflows = styles.left + elementBounds.width > winWidth
+        return overflows && anchorBounds.left > winWidth - anchorBounds.right
+      }
+      const doesYOverflow = () => {
+        const overflows = styles.top + elementBounds.height > winHeight
+        return overflows && anchorBounds.top > winHeight - anchorBounds.bottom
+      }
+
+      // Applies a dynamic max height constraint if appropriate
+      const applyMaxHeight = height => {
+        if (!styles.maxHeight && resizable) {
+          styles.maxHeight = height
         }
-      } else if (
-        window.innerHeight - anchorBounds.bottom <
-        (maxHeight || 100)
-      ) {
-        styles.top = anchorBounds.top - elementBounds.height - offset
-        styles.maxHeight = maxHeight || 240
-      } else {
-        styles.top = anchorBounds.bottom + offset
-        styles.maxHeight =
-          maxHeight || window.innerHeight - anchorBounds.bottom - 20
       }
 
-      // Determine horizontal styles
-      if (!maxWidth && useAnchorWidth) {
-        styles.maxWidth = anchorBounds.width
+      // Applies the X strategy to our styles
+      const applyXStrategy = strategy => {
+        switch (strategy) {
+          case Strategies.StartToStart:
+          default:
+            styles.left = anchorBounds.left
+            break
+          case Strategies.EndToEnd:
+            styles.left = anchorBounds.right - elementBounds.width
+            break
+          case Strategies.StartToEnd:
+            styles.left = anchorBounds.right + offset
+            break
+          case Strategies.EndToStart:
+            styles.left = anchorBounds.left - elementBounds.width - offset
+            break
+          case Strategies.MidPoint:
+            styles.left =
+              anchorBounds.left +
+              anchorBounds.width / 2 -
+              elementBounds.width / 2
+            break
+          case Strategies.ScreenEdge:
+            styles.left = winWidth - elementBounds.width - screenOffset
+            break
+        }
       }
-      if (useAnchorWidth) {
-        styles.minWidth = anchorBounds.width
+
+      // Applies the Y strategy to our styles
+      const applyYStrategy = strategy => {
+        switch (strategy) {
+          case Strategies.StartToStart:
+            styles.top = anchorBounds.top
+            applyMaxHeight(winHeight - anchorBounds.top - screenOffset)
+            break
+          case Strategies.EndToEnd:
+            styles.top = anchorBounds.bottom - elementBounds.height
+            applyMaxHeight(anchorBounds.bottom - screenOffset)
+            break
+          case Strategies.StartToEnd:
+          default:
+            styles.top = anchorBounds.bottom + offset
+            applyMaxHeight(winHeight - anchorBounds.bottom - screenOffset)
+            break
+          case Strategies.EndToStart:
+            styles.top = anchorBounds.top - elementBounds.height - offset
+            applyMaxHeight(anchorBounds.top - screenOffset)
+            break
+          case Strategies.MidPoint:
+            styles.top =
+              anchorBounds.top +
+              anchorBounds.height / 2 -
+              elementBounds.height / 2
+            break
+          case Strategies.ScreenEdge:
+            styles.top = winHeight - elementBounds.height - screenOffset
+            applyMaxHeight(winHeight - 2 * screenOffset)
+            break
+        }
       }
+
+      // Determine X strategy
       if (align === "right") {
-        styles.left =
-          anchorBounds.left + anchorBounds.width - elementBounds.width
+        applyXStrategy(Strategies.EndToEnd)
       } else if (align === "right-outside") {
-        styles.left = anchorBounds.right + offset
+        applyXStrategy(Strategies.StartToEnd)
       } else if (align === "left-outside") {
-        styles.left = anchorBounds.left - elementBounds.width - offset
+        applyXStrategy(Strategies.EndToStart)
+      } else {
+        applyXStrategy(Strategies.StartToStart)
+      }
+
+      // Determine Y strategy
+      if (align === "right-outside" || align === "left-outside") {
+        applyYStrategy(Strategies.MidPoint)
       } else {
-        styles.left = anchorBounds.left
+        applyYStrategy(Strategies.StartToEnd)
+      }
+
+      // Handle screen overflow
+      if (doesXOverflow()) {
+        // Swap left to right
+        if (align === "left") {
+          applyXStrategy(Strategies.EndToEnd)
+        }
+        // Swap right-outside to left-outside
+        else if (align === "right-outside") {
+          applyXStrategy(Strategies.EndToStart)
+        }
+      }
+      if (doesYOverflow()) {
+        // If wrapping, lock to the bottom of the screen and also reposition to
+        // the side to not block the anchor
+        if (wrap) {
+          applyYStrategy(Strategies.MidPoint)
+          if (doesYOverflow()) {
+            applyYStrategy(Strategies.ScreenEdge)
+          }
+          applyXStrategy(Strategies.StartToEnd)
+          if (doesXOverflow()) {
+            applyXStrategy(Strategies.EndToStart)
+          }
+        }
+        // Othewise invert as normal
+        else {
+          // If using an outside strategy then lock to the bottom of the screen
+          if (align === "left-outside" || align === "right-outside") {
+            applyYStrategy(Strategies.ScreenEdge)
+          }
+          // Otherwise flip above
+          else {
+            applyYStrategy(Strategies.EndToStart)
+          }
+        }
       }
     }
 

package/src/Form/Core/DatePicker/Calendar.svelte

@@ -0,0 +1,252 @@
+<script>
+  import { cleanInput } from "./utils"
+  import Select from "../../Select.svelte"
+  import dayjs from "dayjs"
+  import NumberInput from "./NumberInput.svelte"
+  import { createEventDispatcher } from "svelte"
+  import isoWeek from "dayjs/plugin/isoWeek"
+
+  dayjs.extend(isoWeek)
+
+  export let value
+
+  const dispatch = createEventDispatcher()
+  const DaysOfWeek = [
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+    "Sunday",
+  ]
+  const MonthsOfYear = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ]
+
+  const now = dayjs()
+  let calendarDate
+
+  $: calendarDate = dayjs(value || dayjs()).startOf("month")
+  $: mondays = getMondays(calendarDate)
+
+  const getMondays = monthStart => {
+    if (!monthStart?.isValid()) {
+      return []
+    }
+    let monthEnd = monthStart.endOf("month")
+    let calendarStart = monthStart.startOf("isoWeek")
+    const numWeeks = Math.ceil((monthEnd.diff(calendarStart, "day") + 1) / 7)
+
+    let mondays = []
+    for (let i = 0; i < numWeeks; i++) {
+      mondays.push(calendarStart.add(i, "weeks"))
+    }
+    return mondays
+  }
+
+  const handleCalendarYearChange = e => {
+    calendarDate = calendarDate.year(parseInt(e.target.value))
+  }
+
+  const handleDateChange = date => {
+    const base = value || now
+    dispatch(
+      "change",
+      base.year(date.year()).month(date.month()).date(date.date())
+    )
+  }
+
+  export const setDate = date => {
+    calendarDate = date
+  }
+
+  const cleanYear = cleanInput({ max: 9999, pad: 0, fallback: now.year() })
+</script>
+
+<div class="spectrum-Calendar">
+  <div class="spectrum-Calendar-header">
+    <div
+      class="spectrum-Calendar-title"
+      aria-live="assertive"
+      aria-atomic="true"
+    >
+      <div class="month-selector">
+        <Select
+          autoWidth
+          placeholder={null}
+          options={MonthsOfYear.map((m, idx) => ({ label: m, value: idx }))}
+          value={calendarDate.month()}
+          on:change={e => (calendarDate = calendarDate.month(e.detail))}
+        />
+      </div>
+      <NumberInput
+        value={calendarDate.year()}
+        min={0}
+        max={9999}
+        width={64}
+        on:change={handleCalendarYearChange}
+        on:input={cleanYear}
+      />
+    </div>
+    <button
+      aria-label="Previous"
+      title="Previous"
+      class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-prevMonth"
+      on:click={() => (calendarDate = calendarDate.subtract(1, "month"))}
+    >
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-ChevronLeft100"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-css-icon-Chevron100" />
+      </svg>
+    </button>
+    <button
+      aria-label="Next"
+      title="Next"
+      class="spectrum-ActionButton spectrum-ActionButton--quiet spectrum-Calendar-nextMonth"
+      on:click={() => (calendarDate = calendarDate.add(1, "month"))}
+    >
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-ChevronRight100"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-css-icon-Chevron100" />
+      </svg>
+    </button>
+  </div>
+  <div
+    class="spectrum-Calendar-body"
+    aria-readonly="true"
+    aria-disabled="false"
+  >
+    <table role="presentation" class="spectrum-Calendar-table">
+      <thead role="presentation">
+        <tr>
+          {#each DaysOfWeek as day}
+            <th scope="col" class="spectrum-Calendar-tableCell">
+              <abbr class="spectrum-Calendar-dayOfWeek" title={day}>
+                {day[0]}
+              </abbr>
+            </th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody role="presentation">
+        {#each mondays as monday}
+          <tr>
+            {#each [0, 1, 2, 3, 4, 5, 6] as dayOffset}
+              {@const date = monday.add(dayOffset, "days")}
+              {@const outsideMonth = date.month() !== calendarDate.month()}
+              <td
+                class="spectrum-Calendar-tableCell"
+                aria-disabled="true"
+                aria-selected="false"
+                aria-invalid="false"
+                title={date.format("dddd, MMMM D, YYYY")}
+                on:click={() => handleDateChange(date)}
+              >
+                <span
+                  role="presentation"
+                  class="spectrum-Calendar-date"
+                  class:is-outsideMonth={outsideMonth}
+                  class:is-today={!outsideMonth && date.isSame(now, "day")}
+                  class:is-selected={date.isSame(value, "day")}
+                >
+                  {date.date()}
+                </span>
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<style>
+  /* Calendar overrides */
+  .spectrum-Calendar {
+    width: auto;
+  }
+  .spectrum-Calendar-header {
+    width: auto;
+  }
+  .spectrum-Calendar-title {
+    display: flex;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex: 1 1 auto;
+  }
+  .spectrum-Calendar-header button {
+    border-radius: 4px;
+  }
+  .spectrum-Calendar-date.is-outsideMonth {
+    visibility: visible;
+    color: var(--spectrum-global-color-gray-400);
+  }
+  .spectrum-Calendar-date.is-today,
+  .spectrum-Calendar-date.is-today::before {
+    border-color: var(--spectrum-global-color-gray-400);
+  }
+  .spectrum-Calendar-date.is-today.is-selected,
+  .spectrum-Calendar-date.is-today.is-selected::before {
+    border-color: var(
+      --primaryColorHover,
+      var(--spectrum-global-color-blue-700)
+    );
+  }
+  .spectrum-Calendar-date.is-selected:not(.is-range-selection) {
+    background: var(--primaryColor, var(--spectrum-global-color-blue-400));
+  }
+  .spectrum-Calendar tr {
+    box-sizing: content-box;
+    height: 40px;
+  }
+  .spectrum-Calendar-tableCell {
+    box-sizing: content-box;
+  }
+  .spectrum-Calendar-nextMonth,
+  .spectrum-Calendar-prevMonth {
+    order: 1;
+    padding: 4px;
+  }
+  .spectrum-Calendar-date {
+    color: var(--spectrum-alias-text-color);
+  }
+  .spectrum-Calendar-date.is-selected {
+    color: white;
+  }
+  .spectrum-Calendar-dayOfWeek {
+    color: var(--spectrum-global-color-gray-600);
+  }
+
+  /* Style select */
+  .month-selector :global(.spectrum-Picker) {
+    background: none;
+    border: none;
+    padding: 4px 6px;
+  }
+  .month-selector :global(.spectrum-Picker:hover),
+  .month-selector :global(.spectrum-Picker.is-open) {
+    background: var(--spectrum-global-color-gray-200);
+  }
+  .month-selector :global(.spectrum-Picker-label) {
+    font-size: 18px;
+    font-weight: bold;
+  }
+</style>

package/src/Form/Core/DatePicker/DateInput.svelte

@@ -0,0 +1,94 @@
+<script>
+  import Icon from "../../../Icon/Icon.svelte"
+  import { getDateDisplayValue } from "../../../helpers"
+
+  export let anchor
+  export let disabled
+  export let readonly
+  export let error
+  export let focused
+  export let placeholder
+  export let id
+  export let value
+  export let icon
+  export let enableTime
+  export let timeOnly
+
+  $: displayValue = getDateDisplayValue(value, { enableTime, timeOnly })
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  bind:this={anchor}
+  class:is-disabled={disabled || readonly}
+  class:is-invalid={!!error}
+  class:is-focused={focused}
+  class="spectrum-InputGroup spectrum-Datepicker"
+  aria-readonly={readonly}
+  aria-required="false"
+  aria-haspopup="true"
+  on:click
+>
+  <div
+    class="spectrum-Textfield spectrum-InputGroup-textfield"
+    class:is-disabled={disabled}
+    class:is-invalid={!!error}
+  >
+    {#if !!error}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-icon-18-Alert" />
+      </svg>
+    {/if}
+    <input
+      {disabled}
+      {readonly}
+      data-input
+      type="text"
+      class="spectrum-Textfield-input spectrum-InputGroup-input"
+      class:is-disabled={disabled}
+      {placeholder}
+      {id}
+      value={displayValue}
+    />
+  </div>
+  {#if !disabled && !readonly}
+    <button
+      type="button"
+      class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
+      tabindex="-1"
+      class:is-invalid={!!error}
+    >
+      <Icon name={icon} />
+    </button>
+  {/if}
+</div>
+
+<style>
+  /* Date label overrides */
+  .spectrum-Textfield-input {
+    pointer-events: none;
+  }
+  .spectrum-Textfield:not(.is-disabled):hover {
+    cursor: pointer;
+  }
+  .spectrum-Datepicker {
+    width: 100%;
+    overflow: hidden;
+  }
+  .spectrum-Datepicker .spectrum-Textfield {
+    width: 100%;
+  }
+  .is-disabled {
+    pointer-events: none !important;
+  }
+  input:read-only {
+    border-right-width: 1px;
+    border-top-right-radius: var(--spectrum-textfield-border-radius);
+    border-bottom-right-radius: var(--spectrum-textfield-border-radius);
+  }
+</style>