@wise/dynamic-flow-client-internal 5.34.0-experimental-18a8b47 → 5.34.0-experimental-7a76ef5

package/build/main.css

@@ -97,6 +97,13 @@
   }
 }
 
+.df-filters-container {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
 /* collapses and expands to the filters' natural height by animating a single grid row */
 .df-filters-collapsible {
   display: grid;
@@ -127,20 +134,11 @@
   }
 }
 
-.df-filters-container {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
 .df-filter-loader .np-chip {
-  background: linear-gradient(
-    -45deg,
-    var(--color-background-neutral) 40%,
-    var(--color-background-elevated) 50%,
-    var(--color-background-neutral) 60%
-  );
+  background: linear-gradient(-45deg,
+      var(--color-background-neutral) 40%,
+      var(--color-background-elevated) 50%,
+      var(--color-background-neutral) 60%);
   background-size: 300%;
   background-position-x: 100%;
   animation: shimmer 1s infinite linear;
@@ -148,7 +146,7 @@
   border-color: var(--color-border-neutral);
 }
 
-.df-filter-loader .np-chip > * {
+.df-filter-loader .np-chip>* {
   visibility: hidden;
 }
 
@@ -158,6 +156,51 @@
   }
 }
 
+/* the hint is stacked over the input by the input group's grid, lined up with the input's text */
+.df-search-hint {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-self: center;
+  min-width: 0;
+  margin-inline: var(--size-48);
+  overflow: hidden;
+  pointer-events: none;
+  color: var(--color-content-tertiary);
+}
+
+/* the prefix can end in a space, which a grid item would otherwise trim */
+.df-search-hint-prefix {
+  white-space: pre;
+}
+
+/* the words share one clipped line, so they appear to roll past each other */
+.df-search-hint-viewport {
+  display: grid;
+  overflow: hidden;
+}
+
+/* the words still to come wait above the line, the current one sits on it, and past ones drop below */
+.df-search-hint-word {
+  grid-area: 1 / 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  opacity: 0;
+  transform: translateY(-100%);
+  transition:
+    transform 0.5s cubic-bezier(0.35, 0, 0.35, 1),
+    opacity 0.8s cubic-bezier(0.35, 0, 0.35, 1);
+}
+
+.df-search-hint-word--current {
+  opacity: 1;
+  transform: none;
+}
+
+.df-search-hint-word--past {
+  transform: translateY(100%);
+}
+
 .df-columns-renderer-container {
   display: flex;
   gap: var(--size-4);