@budibase/bbui 3.24.0 → 3.24.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.24.0",
+  "version": "3.24.1",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -107,5 +107,5 @@
       }
     }
   },
-  "gitHead": "7cfa950d39730aa88a1c26c60f8094d6f0b0606d"
+  "gitHead": "6838c955ce1adef31581d699de2c9a6c81d37de5"
 }

package/src/Form/CollapsibleSearch.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import { createEventDispatcher, tick } from "svelte"
+  import Icon from "../Icon/Icon.svelte"
+  import Search from "./Search.svelte"
+
+  export let value: string | undefined = undefined
+  export let placeholder: string | undefined = undefined
+  export let disabled = false
+  export let quiet = false
+  export let updateOnChange = true
+  export let width: string = "220px"
+  export let open = false
+  export let collapseOnBlur = true
+  export let inputRef: HTMLInputElement | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+
+  const handleChange = (event: CustomEvent<string>) => {
+    value = event.detail
+    dispatch("change", event.detail)
+  }
+
+  const handleClear = () => {
+    open = false
+    dispatch("clear")
+  }
+
+  const openSearch = async () => {
+    if (disabled) {
+      return
+    }
+    open = true
+    await tick()
+    inputRef?.focus()
+  }
+
+  const handleBlur = (event: FocusEvent) => {
+    if (collapseOnBlur) {
+      const inputValue = (event.target as HTMLInputElement | null)?.value || ""
+      if (!inputValue.trim()) {
+        open = false
+      }
+    }
+    dispatch("blur", event)
+  }
+
+  const forwardEvent = (event: Event) => {
+    dispatch(event.type, event)
+  }
+</script>
+
+<div class="collapsible-search" style={`--collapsible-search-width: ${width}`}>
+  {#if !open}
+    <button
+      class="search-toggle"
+      type="button"
+      on:click={openSearch}
+      aria-label="Open search"
+    >
+      <Icon name="magnifying-glass" size="S" />
+    </button>
+  {/if}
+  <div class="collapsible-search-input" class:open>
+    <Search
+      {updateOnChange}
+      {disabled}
+      {placeholder}
+      {quiet}
+      {value}
+      bind:inputRef
+      on:change={handleChange}
+      on:clear={handleClear}
+      on:blur={handleBlur}
+      on:focus={forwardEvent}
+      on:input={forwardEvent}
+      on:click={forwardEvent}
+    />
+  </div>
+</div>
+
+<style>
+  .collapsible-search {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+
+  .collapsible-search-input {
+    width: 0;
+    opacity: 0;
+    overflow: hidden;
+    pointer-events: none;
+    visibility: hidden;
+    transition:
+      width 200ms ease,
+      opacity 200ms ease;
+  }
+
+  .collapsible-search-input.open {
+    width: var(--collapsible-search-width);
+    opacity: 1;
+    overflow: visible;
+    pointer-events: auto;
+    visibility: visible;
+  }
+
+  .search-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    border: 1px solid var(--spectrum-global-color-gray-200);
+    background-color: var(--spectrum-global-color-gray-100);
+    color: var(--spectrum-global-color-gray-800);
+    cursor: pointer;
+  }
+
+  .search-toggle:hover {
+    background-color: var(--spectrum-global-color-gray-300);
+  }
+
+  .search-toggle:focus {
+    outline: 2px solid var(--spectrum-global-color-blue-400);
+    outline-offset: 2px;
+  }
+</style>

package/src/Form/Core/Picker.svelte

@@ -22,6 +22,7 @@
   import type { PickerIconInput, ResolvedIcon } from "../../types/Picker"
 
   export let id: string | undefined = undefined
+  export let size: "S" | "M" | "L" = "M"
   export let disabled: boolean = false
   export let fieldText: string = ""
   export let fieldIcon: PickerIconInput = undefined
@@ -223,7 +224,7 @@
 
 <button
   {id}
-  class="spectrum-Picker spectrum-Picker--sizeM"
+  class="spectrum-Picker spectrum-Picker--size{size}"
   class:spectrum-Picker--quiet={quiet}
   {disabled}
   class:is-open={open}
@@ -419,6 +420,8 @@
   .spectrum-Picker {
     width: 100%;
     box-shadow: none;
+    border: 1px solid var(--spectrum-global-color-gray-200);
+    border-radius: 6px;
   }
   .spectrum-Picker-label.auto-width {
     margin-right: var(--spacing-xs);

package/src/Form/Core/Search.svelte

@@ -11,13 +11,23 @@
   export let quiet = false
   export let inputRef: HTMLElement | undefined = undefined
 
-  const dispatch = createEventDispatcher()
+  interface SearchEvents {
+    change: any
+    clear: void
+  }
+
+  const dispatch = createEventDispatcher<SearchEvents>()
   let focus = false
 
   const updateValue = (value: any) => {
     dispatch("change", value)
   }
 
+  const clearValue = () => {
+    updateValue("")
+    dispatch("clear")
+  }
+
   const onFocus = () => {
     focus = true
   }
@@ -71,7 +81,7 @@
     />
   </div>
   <button
-    on:click={() => updateValue("")}
+    on:click={clearValue}
     type="reset"
     class="spectrum-ClearButton spectrum-Search-clearButton"
   >

package/src/Form/Core/Select.svelte

@@ -30,6 +30,7 @@
     | ((_option: O, _index?: number) => string)
     | undefined = undefined
   export let readonly: boolean = false
+  export let size: "S" | "M" | "L" = "M"
   export let quiet: boolean = false
   export let autoWidth: boolean = false
   export let autocomplete: boolean = false
@@ -98,6 +99,7 @@
   bind:open
   bind:searchTerm
   on:loadMore
+  {size}
   {quiet}
   {id}
   {disabled}

package/src/Form/Search.svelte

@@ -30,6 +30,7 @@
     {quiet}
     bind:inputRef
     on:change={onChange}
+    on:clear
     on:click
     on:input
     on:focus

package/src/Form/Select.svelte

@@ -28,6 +28,7 @@
     | ((_option: O, _index?: number) => boolean)
     | undefined = undefined
   export let quiet: boolean = false
+  export let size: "S" | "M" | "L" = "M"
   export let autoWidth: boolean = false
   export let sort: boolean = false
   export let tooltip: string | undefined = undefined
@@ -62,6 +63,7 @@
 
 <Field {helpText} {label} {labelPosition} {error} {tooltip}>
   <Select
+    {size}
     {quiet}
     {loading}
     {disabled}

package/src/Typography/Body.svelte

@@ -24,7 +24,6 @@
 <style>
   p {
     text-wrap: pretty;
-    letter-spacing: -0.01em !important;
     text-rendering: optimizelegibility;
   }
 </style>

package/src/index.ts

@@ -12,6 +12,7 @@ export { default as Dropzone } from "./Form/Dropzone.svelte"
 export { default as EnvDropdown } from "./Form/EnvDropdown.svelte"
 export { default as FieldLabel } from "./Form/FieldLabel.svelte"
 export { default as File } from "./Form/File.svelte"
+export { default as CollapsibleSearch } from "./Form/CollapsibleSearch.svelte"
 export { default as Input } from "./Form/Input.svelte"
 export { default as InputDropdown } from "./Form/InputDropdown.svelte"
 export { default as Multiselect } from "./Form/Multiselect.svelte"