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

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

@@ -97,6 +97,36 @@
   }
 }
 
+/* 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-filters-container {
   display: flex;
   flex-direction: row;
@@ -104,6 +134,30 @@
   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-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%;
+  }
+}
+
 .df-columns-renderer-container {
   display: flex;
   gap: var(--size-4);