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

package/build/i18n/en.json

@@ -8,6 +8,8 @@
   "df.wise.ButtonLayout.buttonLoadingMessage": "This might take a few seconds",
   "df.wise.Collection.clearText": "Clear text",
   "df.wise.Collection.loadMoreMessage": "Load more",
+  "df.wise.Collection.showLessResultsButton": "Show less results",
+  "df.wise.Collection.showMoreResultsButton": "Show all {count} results",
   "df.wise.ControlFeedback.maxLength": "Please enter {maxLength} or fewer characters.",
   "df.wise.ControlFeedback.maximum": "Please enter a number that's {maximum} or less.",
   "df.wise.ControlFeedback.maximumDate": "Please enter a date that's on or before {maximum}.",

package/build/main.css

@@ -104,6 +104,103 @@
   flex-wrap: wrap;
 }
 
+/* collapses and expands to the filters' natural height by animating a single grid row */
+.df-filters-collapsible {
+  display: grid;
+  grid-template-rows: 1fr;
+  opacity: 1;
+  transition:
+    grid-template-rows 150ms ease-out,
+    opacity 150ms ease-out;
+}
+
+.df-filters-collapsible--hidden {
+  grid-template-rows: 0fr;
+  opacity: 0;
+}
+
+.df-filters-collapsible-content {
+  min-height: 0;
+}
+
+/* only clip while hidden, so chip focus rings aren't cut off when the filters are shown */
+.df-filters-collapsible--hidden .df-filters-collapsible-content {
+  overflow: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .df-filters-collapsible {
+    transition: none;
+  }
+}
+
+.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-size: 300%;
+  background-position-x: 100%;
+  animation: shimmer 1s infinite linear;
+  transition: background 200ms;
+  border-color: var(--color-border-neutral);
+}
+
+.df-filter-loader .np-chip>* {
+  visibility: hidden;
+}
+
+@keyframes shimmer {
+  to {
+    background-position-x: 0%;
+  }
+}
+
+/* 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);