Fix bug with select placeholders and fix sorting loops causing endless refreshes

packages/bbui/src/Form/Core/Select.svelte

@@ -44,7 +44,10 @@
   const getFieldText = (value, options, placeholder) => {
     // Always use placeholder if no value
     if (value == null || value === "") {
-      return placeholder !== false ? "Choose an option" : ""
+      if (placeholder === false) {
+        return ""
+      }
+      return placeholder || "Choose an option"
     }
 
     return getFieldAttribute(getOptionLabel, value, options)

packages/frontend-core/src/components/sheet/StickyColumn.svelte

@@ -59,14 +59,16 @@
   class:scrolled={scrollLeft > 0}
 >
   <div class="header row">
-    <!-- Field headers -->
     <SheetCell
       width="40"
       on:click={$config.allowSelectRows && selectAll}
       center
     >
       {#if $config.allowSelectRows}
-        <Checkbox value={rowCount && selectedRowCount === rowCount} />
+        <Checkbox
+          value={rowCount && selectedRowCount === rowCount}
+          disabled={!$renderedRows.length}
+        />
       {/if}
     </SheetCell>
 

packages/frontend-core/src/components/sheet/controls/SortButton.svelte

@@ -22,6 +22,20 @@
     return [...options, ...columns.map(col => col.name)]
   }
 
+  const updateSortColumn = e => {
+    sort.update(state => ({
+      ...state,
+      column: e.detail,
+    }))
+  }
+
+  const updateSortOrder = e => {
+    sort.update(state => ({
+      ...state,
+      order: e.detail,
+    }))
+  }
+
   // Ensure we never have a sort column selected that is not visible
   const checkValidSortColumn = (sortColumn, stickyColumn, visibleColumns) => {
     if (!sortColumn) {
@@ -52,8 +66,8 @@
     quiet
     size="M"
     on:click={() => (open = !open)}
-    selected={!!$sort.column}
+    selected={open || $sort.column}
-    disabled={!$visibleColumns.length}
+    disabled={!columnOptions.length}
   >
     Sort
   </ActionButton>
@@ -61,8 +75,20 @@
 
 <Popover bind:open {anchor} align="left">
   <div class="content">
-    <Select bind:value={$sort.column} options={columnOptions} autoWidth />
+    <Select
-    <Select bind:value={$sort.order} options={orderOptions} autoWidth />
+      placeholder="Default"
+      value={$sort.column}
+      options={columnOptions}
+      autoWidth
+      on:change={updateSortColumn}
+    />
+    <Select
+      placeholder={null}
+      value={$sort.order}
+      options={orderOptions}
+      autoWidth
+      on:change={updateSortOrder}
+    />
   </div>
 </Popover>
 

packages/frontend-core/src/components/sheet/stores/rows.js

@@ -11,10 +11,11 @@ export const createRowsStore = context => {
   const filter = writable([])
   const loaded = writable(false)
   const fetch = writable(null)
-  const sort = writable({
+  const initialSortState = {
     column: null,
-    order: null,
+    order: "ascending",
-  })
+  }
+  const sort = writable(initialSortState)
 
   // Enrich rows with an index property
   const enrichedRows = derived(rows, $rows => {
@@ -44,10 +45,7 @@ export const createRowsStore = context => {
     fetch.set(null)
 
     // Reset state
-    sort.set({
+    sort.set(initialSortState)
-      column: null,
-      order: null,
-    })
     filter.set([])
 
     // Create new fetch model
@@ -59,8 +57,8 @@ export const createRowsStore = context => {
       },
       options: {
         filter: [],
-        sortColumn: null,
+        sortColumn: initialSortState.column,
-        sortOrder: null,
+        sortOrder: initialSortState.order,
         limit: 100,
         paginate: true,
       },
@@ -73,15 +71,6 @@ export const createRowsStore = context => {
           // Hydrate initial data
           rowCacheMap = {}
           rows.set([])
-
-          // Update sorting from fetch if required
-          const $sort = get(sort)
-          if (!$sort.column) {
-            sort.set({
-              column: $fetch.sortColumn,
-              order: $fetch.sortOrder,
-            })
-          }
         }
 
         // Update schema and enrich primary display into schema
@@ -180,10 +169,7 @@ export const createRowsStore = context => {
   // Refreshes all data
   const refreshData = () => {
     filter.set([])
-    sort.set({
+    sort.set(initialSortState)
-      column: null,
-      order: null,
-    })
   }
 
   // Updates a value of a row

packages/frontend-core/src/components/sheet/stores/scroll.js

@@ -1,7 +1,7 @@
 import { derived, get, writable } from "svelte/store"
 
 export const createScrollStores = context => {
-  const { rows, columns, stickyColumn, bounds, cellHeight } = context
+  const { rows, visibleColumns, stickyColumn, bounds, cellHeight } = context
   const padding = 180
   const scroll = writable({
     left: 0,
@@ -28,10 +28,10 @@ export const createScrollStores = context => {
 
   // Derive horizontal limits
   const contentWidth = derived(
-    [columns, stickyColumn],
+    [visibleColumns, stickyColumn],
-    ([$columns, $stickyColumn]) => {
+    ([$visibleColumns, $stickyColumn]) => {
       let width = 40 + padding + ($stickyColumn?.width || 0)
-      $columns.forEach(col => {
+      $visibleColumns.forEach(col => {
         width += col.width
       })
       return width