@kws3/ui 4.2.5 → 4.3.0

package/CHANGELOG.mdx

@@ -1,3 +1,7 @@
+## 4.3.0
+  - `StickyColumnsTableWrapper` now includes a box shadow to compensate for the inner table's drop shadow being hidden due to overflow clipping. 
+  - **[BREAKING]** `GridView` component now transitions each `GridCell` independently, previously used to transition each `GridRow`. This means all content in `GridCell` no includes an additional wrapper element for handling the transitions. This matches the behaviour in `TileView`.
+
 ## 4.2.5
   - Fix z-index for sticky columns
   - Allow `inner_class` in `InfiniteList` component

package/datagrid/GridView/GridCell.svelte

@@ -11,11 +11,14 @@
 -->
 
 <td class={classNames(column, row)} style={styles(column, row)}>
-  <!--  eslint-disable-next-line svelte/no-at-html-tags -->
-  {@html transforms(column, row)}
+  <Transition {transition} x={20} delay={20 * row_index}>
+    <!--  eslint-disable-next-line svelte/no-at-html-tags -->
+    {@html transforms(column, row)}
+  </Transition>
 </td>
 
 <script>
+  import { Transition } from "@kws3/ui";
   /**
    * Name of the column in the DB
    */
@@ -38,5 +41,7 @@
      * Finds CSS styles for the column
      * @type {object}
      */
-    styles = {};
+    styles = {},
+    row_index = 0,
+    transition = false;
 </script>

package/datagrid/GridView/GridRow.svelte

@@ -28,7 +28,6 @@
 -->
 {#if transition}
   <tr
-    in:fly|global={{ x: 20, delay: 25 * row_index }}
     on:click|stopPropagation={rowClick}
     class:is-selected={activated && visualActivationOnClick}
     class:is-checked={checked}>
@@ -38,13 +37,15 @@
         on:click={(e) => {
           clickableRows && e.stopImmediatePropagation();
         }}>
-        <Checkbox
-          size={selectCheckboxSize}
-          color={selectCheckboxColor}
-          style="margin:0;"
-          inverted={false}
-          bind:checked
-          on:change={changed} />
+        <div in:fly|global={{ x: 20, delay: 25 * row_index }}>
+          <Checkbox
+            size={selectCheckboxSize}
+            color={selectCheckboxColor}
+            style="margin:0;"
+            inverted={false}
+            bind:checked
+            on:change={changed} />
+        </div>
       </td>
     {/if}
     {#each column_keys as column}
@@ -56,7 +57,9 @@
           {row}
           {transforms}
           {classNames}
-          {styles} />
+          {styles}
+          {row_index}
+          {transition} />
       {/if}
     {/each}
   </tr>
@@ -67,13 +70,15 @@
     class:is-checked={checked}>
     {#if bulk_actions}
       <td style="vertical-align:middle;">
-        <Checkbox
-          size={selectCheckboxSize}
-          color={selectCheckboxColor}
-          style="margin:0;"
-          inverted={false}
-          bind:checked
-          on:change={changed} />
+        <div>
+          <Checkbox
+            size={selectCheckboxSize}
+            color={selectCheckboxColor}
+            style="margin:0;"
+            inverted={false}
+            bind:checked
+            on:change={changed} />
+        </div>
       </td>
     {/if}
     {#each column_keys as column}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kws3/ui",
-  "version": "4.2.5",
+  "version": "4.3.0",
   "description": "UI components for use with Svelte v3 applications.",
   "main": "index.js",
   "svelte": "index.js",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "typescript": "^5.2.2"
   },
-  "gitHead": "7d10812e05c4c494448396ff158fb3b70512cca8"
+  "gitHead": "be0c7f1fb751590c95f9aad9ff240292e34d5386"
 }

package/styles/Grid.scss

@@ -86,6 +86,7 @@ $kws-gridview-even-row-hover-background-color: $table-striped-row-even-hover-bac
 }
 .kws-sticky-columns-table-wrapper {
   position: relative;
+  box-shadow: $kws-gridview-box-shadow;
 
   .data-table {
     margin-bottom: 1.5rem;
@@ -137,6 +138,7 @@ $kws-gridview-even-row-hover-background-color: $table-striped-row-even-hover-bac
     }
     td,
     th {
+      overflow: hidden;
       &.is-sticky-column {
         position: sticky;
         z-index: 2;