@budibase/bbui 3.19.0 → 3.19.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.19.0",
+  "version": "3.19.2",
   "license": "MPL-2.0",
   "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
@@ -106,5 +106,5 @@
       }
     }
   },
-  "gitHead": "72863c719173848d3128cbef9556a0af09708c20"
+  "gitHead": "6d89c268f83c9702e183b1372e6db79ed1e48e9d"
 }

package/src/Actions/{autoresize_textarea.js → autoresizeTextArea.ts}

@@ -1,10 +1,11 @@
-function resize({ target }) {
+function resize(e: Event) {
+  const target = e.target as HTMLTextAreaElement
   target.style.height = "1px"
   target.style.height = +target.scrollHeight + "px"
 }
 
-export default function text_area_resize(el) {
-  resize({ target: el })
+export default function (el: HTMLTextAreaElement) {
+  resize({ target: el } as any)
   el.style.overflow = "hidden"
   el.addEventListener("input", resize)
 

package/src/Drawer/Drawer.svelte

@@ -1,5 +1,5 @@
 <script context="module">
-  import { writable, get } from "svelte/store"
+  import { get, writable } from "svelte/store"
 
   // Observe this class name if possible in order to know how to size the
   // drawer. If this doesn't exist we'll use a fixed size.
@@ -57,12 +57,12 @@
 </script>
 
 <script>
+  import { generate } from "shortid"
+  import { createEventDispatcher, onDestroy, setContext } from "svelte"
+  import Portal from "svelte-portal"
+  import ActionButton from "../ActionButton/ActionButton.svelte"
   import Button from "../Button/Button.svelte"
   import Icon from "../Icon/Icon.svelte"
-  import ActionButton from "../ActionButton/ActionButton.svelte"
-  import Portal from "svelte-portal"
-  import { setContext, createEventDispatcher, onDestroy } from "svelte"
-  import { generate } from "shortid"
 
   export let title = ""
   export let forceModal = false
@@ -172,7 +172,7 @@
 
 {#if visible}
   <Portal target=".modal-container">
-    <!-- This class is unstyled, but needed by click_outside -->
+    <!-- This class is unstyled, but needed by clickOutside -->
     <div class="drawer-wrapper">
       <div
         class="underlay"

package/src/Form/Core/Combobox.svelte

@@ -3,15 +3,15 @@
 </script>
 
 <script lang="ts" generics="O">
-  import type { ChangeEventHandler } from "svelte/elements"
   import "@spectrum-css/inputgroup/dist/index-vars.css"
-  import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
+  import "@spectrum-css/popover/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
-  import clickOutside from "../../Actions/click_outside"
-  import Popover from "../../Popover/Popover.svelte"
+  import type { ChangeEventHandler } from "svelte/elements"
+  import clickOutside from "../../Actions/clickOutside"
   import { PopoverAlignment } from "../../constants"
   import Icon from "../../Icon/Icon.svelte"
+  import Popover from "../../Popover/Popover.svelte"
 
   export let value: string | undefined = undefined
   export let id: string | undefined = undefined

package/src/Form/Core/DatePicker/utils.ts

@@ -0,0 +1,21 @@
+interface Input {
+  max: number
+  pad: number
+  fallback: string
+}
+
+export const cleanInput = ({ max, pad, fallback }: Input) => {
+  return (e: Event) => {
+    const target = e.target as HTMLInputElement
+    if (target.value) {
+      const value = parseInt(target.value)
+      if (isNaN(value)) {
+        target.value = fallback
+      } else {
+        target.value = Math.min(max, value).toString().padStart(pad, "0")
+      }
+    } else {
+      target.value = fallback
+    }
+  }
+}

package/src/Form/Core/EnvDropdown.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher, onMount } from "svelte"
-  import clickOutside from "../../Actions/click_outside"
+  import clickOutside from "../../Actions/clickOutside"
   import Divider from "../../Divider/Divider.svelte"
-  import type { EnvDropdownType } from "../../types"
   import Icon from "../../Icon/Icon.svelte"
+  import type { EnvDropdownType } from "../../types"
 
   export let value: string | number | undefined = undefined
   export let placeholder: string | undefined = undefined

package/src/Form/Core/InputDropdown.svelte

@@ -1,10 +1,10 @@
 <script>
   import "@spectrum-css/inputgroup/dist/index-vars.css"
-  import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
-  import { fly } from "svelte/transition"
+  import "@spectrum-css/popover/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
-  import clickOutside from "../../Actions/click_outside"
+  import { fly } from "svelte/transition"
+  import clickOutside from "../../Actions/clickOutside"
   import Icon from "../../Icon/Icon.svelte"
 
   export let inputValue

package/src/Form/Core/Picker.svelte

@@ -4,20 +4,20 @@
 </script>
 
 <script lang="ts">
+  import "@spectrum-css/menu/dist/index-vars.css"
   import "@spectrum-css/picker/dist/index-vars.css"
   import "@spectrum-css/popover/dist/index-vars.css"
-  import "@spectrum-css/menu/dist/index-vars.css"
   import { createEventDispatcher, onDestroy } from "svelte"
-  import clickOutside from "../../Actions/click_outside"
-  import Search from "./Search.svelte"
+  import clickOutside from "../../Actions/clickOutside"
   import Icon from "../../Icon/Icon.svelte"
-  import StatusLight from "../../StatusLight/StatusLight.svelte"
   import Popover from "../../Popover/Popover.svelte"
-  import Tags from "../../Tags/Tags.svelte"
-  import Tag from "../../Tags/Tag.svelte"
   import ProgressCircle from "../../ProgressCircle/ProgressCircle.svelte"
+  import StatusLight from "../../StatusLight/StatusLight.svelte"
+  import Tag from "../../Tags/Tag.svelte"
+  import Tags from "../../Tags/Tags.svelte"
   import AbsTooltip from "../../Tooltip/AbsTooltip.svelte"
   import { PopoverAlignment } from "../../constants"
+  import Search from "./Search.svelte"
 
   export let id: string | undefined = undefined
   export let disabled: boolean = false

package/src/IconPicker/IconPicker.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import "@spectrum-css/popover/dist/index-vars.css"
-  import clickOutside from "../Actions/click_outside"
+  import clickOutside from "../Actions/clickOutside"
   import { fly } from "svelte/transition"
   import Icon from "../Icon/Icon.svelte"
   import { createEventDispatcher } from "svelte"

package/src/Layout/Page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { setContext } from "svelte"
-  import clickOutside from "../Actions/click_outside"
+  import clickOutside from "../Actions/clickOutside"
 
   export let wide: boolean = false
   export let narrow: boolean = false

package/src/Popover/Popover.svelte

@@ -7,16 +7,16 @@
 
 <script lang="ts">
   import "@spectrum-css/popover/dist/index-vars.css"
-  import Portal from "svelte-portal"
   import { createEventDispatcher, getContext, onDestroy } from "svelte"
+  import Portal from "svelte-portal"
+  import type { KeyboardEventHandler } from "svelte/elements"
+  import { fly } from "svelte/transition"
+  import clickOutside from "../Actions/clickOutside"
   import positionDropdown, {
     type UpdateHandler,
-  } from "../Actions/position_dropdown"
-  import clickOutside from "../Actions/click_outside"
-  import { fly } from "svelte/transition"
-  import Context from "../context"
-  import type { KeyboardEventHandler } from "svelte/elements"
+  } from "../Actions/positionDropdown"
   import { PopoverAlignment } from "../constants"
+  import Context from "../context"
 
   export let anchor: HTMLElement | undefined
   export let align: PopoverAlignment | `${PopoverAlignment}` =

package/src/{context.d.ts → context.ts}

@@ -14,5 +14,12 @@ declare module "svelte" {
   }
 }
 
-export const Modal = "bbui-modal"
-export const PopoverRoot = "bbui-popover-root"
+interface Module {
+  Modal: "bbui-modal"
+  PopoverRoot: "bbui-popover-root"
+}
+
+export default {
+  Modal: "bbui-modal",
+  PopoverRoot: "bbui-popover-root",
+} as Module

package/src/index.ts

@@ -4,25 +4,25 @@ import "./bbui.css"
 export * from "./constants"
 
 // Form components
-export { default as Input } from "./Form/Input.svelte"
-export { default as Stepper } from "./Form/Stepper.svelte"
-export { default as TextArea } from "./Form/TextArea.svelte"
-export { default as Select } from "./Form/Select.svelte"
+export { default as Checkbox } from "./Form/Checkbox.svelte"
 export { default as Combobox } from "./Form/Combobox.svelte"
-export { default as Dropzone } from "./Form/Dropzone.svelte"
 export { default as DatePicker } from "./Form/DatePicker.svelte"
 export { default as DateRangePicker } from "./Form/DateRangePicker.svelte"
-export { default as Toggle } from "./Form/Toggle.svelte"
-export { default as RadioGroup } from "./Form/RadioGroup.svelte"
-export { default as Checkbox } from "./Form/Checkbox.svelte"
-export { default as InputDropdown } from "./Form/InputDropdown.svelte"
+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 Input } from "./Form/Input.svelte"
+export { default as InputDropdown } from "./Form/InputDropdown.svelte"
 export { default as Multiselect } from "./Form/Multiselect.svelte"
-export { default as Search } from "./Form/Search.svelte"
+export { default as RadioGroup } from "./Form/RadioGroup.svelte"
 export { default as RichTextField } from "./Form/RichTextField.svelte"
-export { default as FieldLabel } from "./Form/FieldLabel.svelte"
+export { default as Search } from "./Form/Search.svelte"
+export { default as Select } from "./Form/Select.svelte"
 export { default as Slider } from "./Form/Slider.svelte"
-export { default as File } from "./Form/File.svelte"
+export { default as Stepper } from "./Form/Stepper.svelte"
+export { default as TextArea } from "./Form/TextArea.svelte"
+export { default as Toggle } from "./Form/Toggle.svelte"
 
 // Core form components to be used elsewhere (standard components)
 export * from "./Form/Core"
@@ -31,64 +31,64 @@ export * from "./Form/Core"
 export * from "./FancyForm"
 
 // Components
-export { default as Drawer } from "./Drawer/Drawer.svelte"
-export { default as DrawerContent } from "./Drawer/DrawerContent.svelte"
-export { default as Avatar } from "./Avatar/Avatar.svelte"
+export { default as Accordion } from "./Accordion/Accordion.svelte"
 export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
 export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
 export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte"
+export { default as Avatar } from "./Avatar/Avatar.svelte"
+export { default as Badge } from "./Badge/Badge.svelte"
+export { default as Banner } from "./Banner/Banner.svelte"
+export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte"
 export { default as Button } from "./Button/Button.svelte"
 export { default as ButtonGroup } from "./ButtonGroup/ButtonGroup.svelte"
 export { default as CollapsedButtonGroup } from "./ButtonGroup/CollapsedButtonGroup.svelte"
 export { default as ClearButton } from "./ClearButton/ClearButton.svelte"
+export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
+export { default as Context } from "./context"
+export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
+export { default as Divider } from "./Divider/Divider.svelte"
+export { default as Drawer } from "./Drawer/Drawer.svelte"
+export { default as DrawerContent } from "./Drawer/DrawerContent.svelte"
 export { default as Icon } from "./Icon/Icon.svelte"
 export { default as IconAvatar } from "./Icon/IconAvatar.svelte"
-export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
-export { default as Popover, type PopoverAPI } from "./Popover/Popover.svelte"
-export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
-export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte"
+export { default as IconPicker } from "./IconPicker/IconPicker.svelte"
+export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
+export { default as CopyInput } from "./Input/CopyInput.svelte"
 export { default as Label } from "./Label/Label.svelte"
 export { default as Layout } from "./Layout/Layout.svelte"
 export { default as Page } from "./Layout/Page.svelte"
 export { default as Link } from "./Link/Link.svelte"
-export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
-export { default as TempTooltip } from "./Tooltip/TempTooltip.svelte"
-export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"
-export { default as ContextTooltip } from "./Tooltip/Context.svelte"
+export { default as List } from "./List/List.svelte"
+export { default as ListItem } from "./List/ListItem.svelte"
+export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
+export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
+export { default as MenuItem } from "./Menu/Item.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"
 export { default as MenuSection } from "./Menu/Section.svelte"
 export { default as MenuSeparator } from "./Menu/Separator.svelte"
-export { default as MenuItem } from "./Menu/Item.svelte"
 export { default as Modal, type ModalAPI } from "./Modal/Modal.svelte"
-export { default as ModalContent, keepOpen } from "./Modal/ModalContent.svelte"
-export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
+export { keepOpen, default as ModalContent } from "./Modal/ModalContent.svelte"
 export { default as Notification } from "./Notification/Notification.svelte"
-export { default as Context } from "./context"
+export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
+export { default as Pagination } from "./Pagination/Pagination.svelte"
+export { default as PhosphorIconPicker } from "./PhosphorIconPicker/PhosphorIconPicker.svelte"
+export { default as Popover, type PopoverAPI } from "./Popover/Popover.svelte"
+export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
+export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte"
+export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
+export { default as Switcher } from "./Switcher/Switcher.svelte"
 export { default as Table } from "./Table/Table.svelte"
-export { default as Tabs } from "./Tabs/Tabs.svelte"
 export { default as Tab } from "./Tabs/Tab.svelte"
-export { default as Tags } from "./Tags/Tags.svelte"
+export { default as Tabs } from "./Tabs/Tabs.svelte"
 export { default as Tag } from "./Tags/Tag.svelte"
-export { default as TreeView } from "./TreeView/Tree.svelte"
-export { default as TreeItem } from "./TreeView/Item.svelte"
-export { default as Divider } from "./Divider/Divider.svelte"
-export { default as Pagination } from "./Pagination/Pagination.svelte"
-export { default as Badge } from "./Badge/Badge.svelte"
-export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
-export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
-export { default as IconPicker } from "./IconPicker/IconPicker.svelte"
-export { default as PhosphorIconPicker } from "./PhosphorIconPicker/PhosphorIconPicker.svelte"
-export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
-export { default as Banner } from "./Banner/Banner.svelte"
-export { default as CopyInput } from "./Input/CopyInput.svelte"
-export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte"
-export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
-export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
-export { default as List } from "./List/List.svelte"
-export { default as ListItem } from "./List/ListItem.svelte"
-export { default as Accordion } from "./Accordion/Accordion.svelte"
+export { default as Tags } from "./Tags/Tags.svelte"
 export { default as AbsTooltip } from "./Tooltip/AbsTooltip.svelte"
-export { default as Switcher } from "./Switcher/Switcher.svelte"
+export { default as ContextTooltip } from "./Tooltip/Context.svelte"
+export { default as TempTooltip } from "./Tooltip/TempTooltip.svelte"
+export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
+export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"
+export { default as TreeItem } from "./TreeView/Item.svelte"
+export { default as TreeView } from "./TreeView/Tree.svelte"
 
 // Renderers
 export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"
@@ -97,18 +97,18 @@ export { default as InternalRenderer } from "./Table/InternalRenderer.svelte"
 
 // Typography
 export { default as Body } from "./Typography/Body.svelte"
-export { default as Heading } from "./Typography/Heading.svelte"
-export { default as Detail } from "./Typography/Detail.svelte"
 export { default as Code } from "./Typography/Code.svelte"
+export { default as Detail } from "./Typography/Detail.svelte"
+export { default as Heading } from "./Typography/Heading.svelte"
 
 // Actions
-export { default as autoResizeTextArea } from "./Actions/autoresize_textarea"
-export { default as positionDropdown } from "./Actions/position_dropdown"
-export { default as clickOutside } from "./Actions/click_outside"
+export { default as autoResizeTextArea } from "./Actions/autoresizeTextArea"
+export { default as clickOutside } from "./Actions/clickOutside"
+export { default as positionDropdown } from "./Actions/positionDropdown"
 
 // Stores
-export { notifications, createNotificationStore } from "./Stores/notifications"
 export { banner, BANNER_TYPES } from "./Stores/banner"
+export { createNotificationStore, notifications } from "./Stores/notifications"
 
 // Helpers
 export * as Helpers from "./helpers"

package/src/Form/Core/DatePicker/utils.js

@@ -1,14 +0,0 @@
-export const cleanInput = ({ max, pad, fallback }) => {
-  return e => {
-    if (e.target.value) {
-      const value = parseInt(e.target.value)
-      if (isNaN(value)) {
-        e.target.value = fallback
-      } else {
-        e.target.value = Math.min(max, value).toString().padStart(pad, "0")
-      }
-    } else {
-      e.target.value = fallback
-    }
-  }
-}

package/src/context.js

@@ -1,4 +0,0 @@
-export default {
-  Modal: "bbui-modal",
-  PopoverRoot: "bbui-popover-root",
-}

package/src/FancyForm/{index.js → index.ts}

@@ -1,8 +1,8 @@
-export { default as FancyInput } from "./FancyInput.svelte"
-export { default as FancyCheckbox } from "./FancyCheckbox.svelte"
-export { default as FancySelect } from "./FancySelect.svelte"
+export { default as ErrorMessage } from "./ErrorMessage.svelte"
 export { default as FancyButton } from "./FancyButton.svelte"
-export { default as FancyForm } from "./FancyForm.svelte"
 export { default as FancyButtonRadio } from "./FancyButtonRadio.svelte"
+export { default as FancyCheckbox } from "./FancyCheckbox.svelte"
 export { default as FancyCheckboxGroup } from "./FancyCheckboxGroup.svelte"
-export { default as ErrorMessage } from "./ErrorMessage.svelte"
+export { default as FancyForm } from "./FancyForm.svelte"
+export { default as FancyInput } from "./FancyInput.svelte"
+export { default as FancySelect } from "./FancySelect.svelte"

package/src/Form/Core/{index.js → index.ts}

@@ -1,19 +1,19 @@
-export { default as CoreTextField } from "./TextField.svelte"
-export { default as CoreSelect } from "./Select.svelte"
-export { default as CoreMultiselect } from "./Multiselect.svelte"
 export { default as CoreCheckbox } from "./Checkbox.svelte"
-export { default as CoreRadioGroup } from "./RadioGroup.svelte"
 export { default as CoreCheckboxGroup } from "./CheckboxGroup.svelte"
-export { default as CoreTextArea } from "./TextArea.svelte"
 export { default as CoreCombobox } from "./Combobox.svelte"
-export { default as CoreSwitch } from "./Switch.svelte"
-export { default as CoreSearch } from "./Search.svelte"
 export { default as CoreDatePicker } from "./DatePicker/DatePicker.svelte"
 export { default as CoreDatePickerPopoverContents } from "./DatePicker/DatePickerPopoverContents.svelte"
 export { default as CoreDateRangePicker } from "./DateRangePicker.svelte"
 export { default as CoreDropzone } from "./Dropzone.svelte"
-export { default as CoreStepper } from "./Stepper.svelte"
-export { default as CoreRichTextField } from "./RichTextField.svelte"
-export { default as CoreSlider } from "./Slider.svelte"
 export { default as CoreFile } from "./File.svelte"
+export { default as CoreMultiselect } from "./Multiselect.svelte"
+export { default as CoreRadioGroup } from "./RadioGroup.svelte"
+export { default as CoreRichTextField } from "./RichTextField.svelte"
+export { default as CoreSearch } from "./Search.svelte"
+export { default as CoreSelect } from "./Select.svelte"
 export { default as CoreSignature } from "./Signature.svelte"
+export { default as CoreSlider } from "./Slider.svelte"
+export { default as CoreStepper } from "./Stepper.svelte"
+export { default as CoreSwitch } from "./Switch.svelte"
+export { default as CoreTextArea } from "./TextArea.svelte"
+export { default as CoreTextField } from "./TextField.svelte"