@wise/dynamic-flow-client 5.30.0-experimental-18a8b47 → 5.30.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);

package/build/main.js

@@ -1822,7 +1822,7 @@ var toggleFilterOption = (state, filterIndex, optionIndex) => {
 // src/domain/components/collectionComponent/CollectionController.ts
 var createCollectionController = ({
   stack,
-  queryFunction,
+  collectionClient,
   trackEvent
 }) => {
   let requests = /* @__PURE__ */ new Map();
@@ -1868,7 +1868,7 @@ var createCollectionController = ({
     const { analytics, filters, search } = state;
     trackEvent(getEventName(mode, "Triggered"), analytics);
     try {
-      const response = await queryFunction({
+      const response = await collectionClient({
         searchParam: search == null ? void 0 : search.param,
         query: search == null ? void 0 : search.query,
         cursor: mode === "pagination" ? state.nextCursor : void 0,
@@ -2148,7 +2148,7 @@ var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, ma
     );
   };
   const mapState = (state) => mapCollectionSpecToDomainState(state, mapperProps, mapLayout);
-  const queryFunction = getPerformCollectionQuery(httpClient, baseRequest, mapState);
+  const collectionClient = getPerformCollectionQuery(httpClient, baseRequest, mapState);
   const stack = createCollectionStack(
     uid,
     mapState(__spreadProps(__spreadValues({}, initialState), {
@@ -2156,7 +2156,7 @@ var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, ma
     })),
     onComponentUpdate
   );
-  const controller = createCollectionController({ stack, queryFunction, trackEvent });
+  const controller = createCollectionController({ stack, collectionClient, trackEvent });
   const component = createCollectionComponent(
     {
       uid,
@@ -9141,6 +9141,7 @@ var collectionComponentToProps = (component, rendererMapperProps) => {
   const { stack } = component;
   return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "tags", "fork", "pop")), rendererMapperProps), {
     state: mapCollectionState(component, component.getActiveState(), rendererMapperProps),
+    onSearchChange: (query) => component.search(component.getActiveState(), query),
     depth: stack.length - 1
   });
 };
@@ -9160,7 +9161,6 @@ var mapCollectionState = (component, state, rendererMapperProps) => {
     afterSectionsProps,
     afterSections: afterSectionsProps.map(render),
     search: search ? __spreadProps(__spreadValues({}, pick(search, "title", "hint", "hints", "query")), {
-      onChange: (query) => component.search(component.getActiveState(), query),
       initialSections: search.initialSections ? mapSections(search.initialSections, rendererMapperProps) : void 0
     }) : void 0
   };

package/build/main.mjs

@@ -1791,7 +1791,7 @@ var toggleFilterOption = (state, filterIndex, optionIndex) => {
 // src/domain/components/collectionComponent/CollectionController.ts
 var createCollectionController = ({
   stack,
-  queryFunction,
+  collectionClient,
   trackEvent
 }) => {
   let requests = /* @__PURE__ */ new Map();
@@ -1837,7 +1837,7 @@ var createCollectionController = ({
     const { analytics, filters, search } = state;
     trackEvent(getEventName(mode, "Triggered"), analytics);
     try {
-      const response = await queryFunction({
+      const response = await collectionClient({
         searchParam: search == null ? void 0 : search.param,
         query: search == null ? void 0 : search.query,
         cursor: mode === "pagination" ? state.nextCursor : void 0,
@@ -2117,7 +2117,7 @@ var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, ma
     );
   };
   const mapState = (state) => mapCollectionSpecToDomainState(state, mapperProps, mapLayout);
-  const queryFunction = getPerformCollectionQuery(httpClient, baseRequest, mapState);
+  const collectionClient = getPerformCollectionQuery(httpClient, baseRequest, mapState);
   const stack = createCollectionStack(
     uid,
     mapState(__spreadProps(__spreadValues({}, initialState), {
@@ -2125,7 +2125,7 @@ var collectionLayoutToComponent = (uid, { analyticsId, control, initialState, ma
     })),
     onComponentUpdate
   );
-  const controller = createCollectionController({ stack, queryFunction, trackEvent });
+  const controller = createCollectionController({ stack, collectionClient, trackEvent });
   const component = createCollectionComponent(
     {
       uid,
@@ -9112,6 +9112,7 @@ var collectionComponentToProps = (component, rendererMapperProps) => {
   const { stack } = component;
   return __spreadProps(__spreadValues(__spreadValues({}, pick(component, "uid", "analyticsId", "type", "control", "margin", "tags", "fork", "pop")), rendererMapperProps), {
     state: mapCollectionState(component, component.getActiveState(), rendererMapperProps),
+    onSearchChange: (query) => component.search(component.getActiveState(), query),
     depth: stack.length - 1
   });
 };
@@ -9131,7 +9132,6 @@ var mapCollectionState = (component, state, rendererMapperProps) => {
     afterSectionsProps,
     afterSections: afterSectionsProps.map(render),
     search: search ? __spreadProps(__spreadValues({}, pick(search, "title", "hint", "hints", "query")), {
-      onChange: (query) => component.search(component.getActiveState(), query),
       initialSections: search.initialSections ? mapSections(search.initialSections, rendererMapperProps) : void 0
     }) : void 0
   };