@empathyco/x-components 4.0.1 → 4.1.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.1.0-alpha.0](https://github.com/empathyco/x/compare/@empathyco/x-components@4.0.2-alpha.0...@empathyco/x-components@4.1.0-alpha.0) (2023-12-11)
+
+
+### Features
+
+* **query-preview:** use cached query-previews (#1360) ([2579ca4](https://github.com/empathyco/x/commit/2579ca42d52c6f6c428b9129d63dc4a0ddb4788c))
+
+
+
+## [4.0.2-alpha.0](https://github.com/empathyco/x/compare/@empathyco/x-components@4.0.1...@empathyco/x-components@4.0.2-alpha.0) (2023-11-29)
+
+**Note:** Version bump only for package @empathyco/x-components
+
+
+
+
+
 ## [4.0.1](https://github.com/empathyco/x/compare/@empathyco/x-components@4.0.1-alpha.0...@empathyco/x-components@4.0.1) (2023-11-24)
 
 **Note:** Version bump only for package @empathyco/x-components

package/design-system/deprecated-full-theme.css

@@ -1,5 +1,3 @@
-
-
 .x-uppercase {
   text-transform: uppercase;
 }
@@ -53,6 +51,7 @@
 .x-sticky {
   position: sticky !important;
 }
+
 .x-padding--00 {
   padding: 0 !important;
 }
@@ -1311,6 +1310,71 @@
   --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
     0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
 }
+
+.x-shadow--none {
+  box-shadow: none !important;
+}
+
+.x-shadow--01 {
+  box-shadow: var(--x-string-box-shadow-01) !important;
+}
+.x-shadow--bottom-01 {
+  box-shadow: var(--x-string-box-shadow-bottom-01) !important;
+}
+.x-shadow--02 {
+  box-shadow: var(--x-string-box-shadow-02) !important;
+}
+.x-shadow--bottom-02 {
+  box-shadow: var(--x-string-box-shadow-bottom-02) !important;
+}
+.x-shadow--03 {
+  box-shadow: var(--x-string-box-shadow-03) !important;
+}
+.x-shadow--bottom-03 {
+  box-shadow: var(--x-string-box-shadow-bottom-03) !important;
+}
+.x-shadow--04 {
+  box-shadow: var(--x-string-box-shadow-04) !important;
+}
+.x-shadow--bottom-04 {
+  box-shadow: var(--x-string-box-shadow-bottom-04) !important;
+}
+.x-shadow--05 {
+  box-shadow: var(--x-string-box-shadow-05) !important;
+}
+.x-shadow--bottom-05 {
+  box-shadow: var(--x-string-box-shadow-bottom-05) !important;
+}
+.x-shadow--06 {
+  box-shadow: var(--x-string-box-shadow-06) !important;
+}
+.x-shadow--bottom-06 {
+  box-shadow: var(--x-string-box-shadow-bottom-06) !important;
+}
+.x-shadow--07 {
+  box-shadow: var(--x-string-box-shadow-07) !important;
+}
+.x-shadow--bottom-07 {
+  box-shadow: var(--x-string-box-shadow-bottom-07) !important;
+}
+.x-shadow--08 {
+  box-shadow: var(--x-string-box-shadow-08) !important;
+}
+.x-shadow--bottom-08 {
+  box-shadow: var(--x-string-box-shadow-bottom-08) !important;
+}
+.x-shadow--09 {
+  box-shadow: var(--x-string-box-shadow-09) !important;
+}
+.x-shadow--bottom-09 {
+  box-shadow: var(--x-string-box-shadow-bottom-09) !important;
+}
+.x-shadow--10 {
+  box-shadow: var(--x-string-box-shadow-10) !important;
+}
+.x-shadow--bottom-10 {
+  box-shadow: var(--x-string-box-shadow-bottom-10) !important;
+}
 /* Material Elevations extracted from:
     https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
 */
@@ -1379,71 +1443,6 @@
   --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
     0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
 }
-
-.x-shadow--none {
-  box-shadow: none !important;
-}
-
-.x-shadow--01 {
-  box-shadow: var(--x-string-box-shadow-01) !important;
-}
-.x-shadow--bottom-01 {
-  box-shadow: var(--x-string-box-shadow-bottom-01) !important;
-}
-.x-shadow--02 {
-  box-shadow: var(--x-string-box-shadow-02) !important;
-}
-.x-shadow--bottom-02 {
-  box-shadow: var(--x-string-box-shadow-bottom-02) !important;
-}
-.x-shadow--03 {
-  box-shadow: var(--x-string-box-shadow-03) !important;
-}
-.x-shadow--bottom-03 {
-  box-shadow: var(--x-string-box-shadow-bottom-03) !important;
-}
-.x-shadow--04 {
-  box-shadow: var(--x-string-box-shadow-04) !important;
-}
-.x-shadow--bottom-04 {
-  box-shadow: var(--x-string-box-shadow-bottom-04) !important;
-}
-.x-shadow--05 {
-  box-shadow: var(--x-string-box-shadow-05) !important;
-}
-.x-shadow--bottom-05 {
-  box-shadow: var(--x-string-box-shadow-bottom-05) !important;
-}
-.x-shadow--06 {
-  box-shadow: var(--x-string-box-shadow-06) !important;
-}
-.x-shadow--bottom-06 {
-  box-shadow: var(--x-string-box-shadow-bottom-06) !important;
-}
-.x-shadow--07 {
-  box-shadow: var(--x-string-box-shadow-07) !important;
-}
-.x-shadow--bottom-07 {
-  box-shadow: var(--x-string-box-shadow-bottom-07) !important;
-}
-.x-shadow--08 {
-  box-shadow: var(--x-string-box-shadow-08) !important;
-}
-.x-shadow--bottom-08 {
-  box-shadow: var(--x-string-box-shadow-bottom-08) !important;
-}
-.x-shadow--09 {
-  box-shadow: var(--x-string-box-shadow-09) !important;
-}
-.x-shadow--bottom-09 {
-  box-shadow: var(--x-string-box-shadow-bottom-09) !important;
-}
-.x-shadow--10 {
-  box-shadow: var(--x-string-box-shadow-10) !important;
-}
-.x-shadow--bottom-10 {
-  box-shadow: var(--x-string-box-shadow-bottom-10) !important;
-}
 *[class*=x-border-width--] {
   border-width: 0;
 }
@@ -3286,49 +3285,6 @@
 [dir="rtl"] .x-border-radius--bottom-right-20 {
   border-bottom-left-radius: var(--x-size-base-20) !important;
 }
-.x-background--lead {
-  background-color: var(--x-color-base-lead) !important;
-}
-
-.x-background--auxiliary {
-  background-color: var(--x-color-base-auxiliary) !important;
-}
-
-.x-background--neutral-10 {
-  background-color: var(--x-color-base-neutral-10) !important;
-}
-
-.x-background--neutral-35 {
-  background-color: var(--x-color-base-neutral-35) !important;
-}
-
-.x-background--neutral-70 {
-  background-color: var(--x-color-base-neutral-70) !important;
-}
-
-.x-background--neutral-95 {
-  background-color: var(--x-color-base-neutral-95) !important;
-}
-
-.x-background--neutral-100 {
-  background-color: var(--x-color-base-neutral-100) !important;
-}
-
-.x-background--accent {
-  background-color: var(--x-color-base-accent) !important;
-}
-
-.x-background--enable {
-  background-color: var(--x-color-base-enable) !important;
-}
-
-.x-background--disable {
-  background-color: var(--x-color-base-disable) !important;
-}
-
-.x-background--transparent {
-  background-color: var(--x-color-base-transparent) !important;
-}
 .x-border-color--lead {
   border-color: var(--x-color-base-lead) !important;
 }
@@ -3372,6 +3328,49 @@
 .x-border-color--transparent {
   border-color: var(--x-color-base-transparent) !important;
 }
+.x-background--lead {
+  background-color: var(--x-color-base-lead) !important;
+}
+
+.x-background--auxiliary {
+  background-color: var(--x-color-base-auxiliary) !important;
+}
+
+.x-background--neutral-10 {
+  background-color: var(--x-color-base-neutral-10) !important;
+}
+
+.x-background--neutral-35 {
+  background-color: var(--x-color-base-neutral-35) !important;
+}
+
+.x-background--neutral-70 {
+  background-color: var(--x-color-base-neutral-70) !important;
+}
+
+.x-background--neutral-95 {
+  background-color: var(--x-color-base-neutral-95) !important;
+}
+
+.x-background--neutral-100 {
+  background-color: var(--x-color-base-neutral-100) !important;
+}
+
+.x-background--accent {
+  background-color: var(--x-color-base-accent) !important;
+}
+
+.x-background--enable {
+  background-color: var(--x-color-base-enable) !important;
+}
+
+.x-background--disable {
+  background-color: var(--x-color-base-disable) !important;
+}
+
+.x-background--transparent {
+  background-color: var(--x-color-base-transparent) !important;
+}
 .x-text--stroke.x-text {
   --x-string-text-decoration: line-through;
 }
@@ -4567,6 +4566,28 @@
   --x-size-gap-row-19: var(--x-size-base-19);
   --x-size-gap-row-20: var(--x-size-base-20);
 }
+:root {
+  --x-size-gap-row-01: var(--x-size-base-01);
+  --x-size-gap-row-02: var(--x-size-base-02);
+  --x-size-gap-row-03: var(--x-size-base-03);
+  --x-size-gap-row-04: var(--x-size-base-04);
+  --x-size-gap-row-05: var(--x-size-base-05);
+  --x-size-gap-row-06: var(--x-size-base-06);
+  --x-size-gap-row-07: var(--x-size-base-07);
+  --x-size-gap-row-08: var(--x-size-base-08);
+  --x-size-gap-row-09: var(--x-size-base-09);
+  --x-size-gap-row-10: var(--x-size-base-10);
+  --x-size-gap-row-11: var(--x-size-base-11);
+  --x-size-gap-row-12: var(--x-size-base-12);
+  --x-size-gap-row-13: var(--x-size-base-13);
+  --x-size-gap-row-14: var(--x-size-base-14);
+  --x-size-gap-row-15: var(--x-size-base-15);
+  --x-size-gap-row-16: var(--x-size-base-16);
+  --x-size-gap-row-17: var(--x-size-base-17);
+  --x-size-gap-row-18: var(--x-size-base-18);
+  --x-size-gap-row-19: var(--x-size-base-19);
+  --x-size-gap-row-20: var(--x-size-base-20);
+}
 
 .x-row--gap-01 {
   --x-size-gap-row: var(--x-size-gap-row-01);
@@ -5071,21 +5092,6 @@
   --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
   --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
 }
-:root {
-  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
-}
-
-.x-picture--card.x-picture {
-  --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
-  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
-  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
-  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
-  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
-}
 :root {
   --x-color-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -5166,6 +5172,21 @@
   --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
   --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
 }
+:root {
+  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-right-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
+}
+
+.x-picture--card.x-picture {
+  --x-size-border-radius-picture-default: var(--x-size-border-radius-picture-card);
+  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-top-picture-card);
+  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-right-picture-card);
+  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-bottom-picture-card);
+  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-left-picture-card);
+}
 :root {
   --x-color-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -6695,6 +6716,7 @@
 .x-list > .x-list__item--12 {
   flex: 12 1 auto;
 }
+
 :root {
   --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
   --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
@@ -6775,15 +6797,11 @@
 }
 [dir="ltr"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="ltr"] 
 .x-input-group--line.x-input-group > .x-input-group__action {
-  margin-left: calc(
-      var(--x-size-border-width-inline-input-group-line) * -1
-    ) !important;
+  margin-left: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
 }
 [dir="rtl"] .x-input-group--line .x-input-group > .x-input-group__action,[dir="rtl"] 
 .x-input-group--line.x-input-group > .x-input-group__action {
-  margin-right: calc(
-      var(--x-size-border-width-inline-input-group-line) * -1
-    ) !important;
+  margin-right: calc(var(--x-size-border-width-inline-input-group-line) * -1) !important;
 }
 .x-input-group--line .x-input-group > .x-input-group__action,
 .x-input-group--line.x-input-group > .x-input-group__action {
@@ -7961,6 +7979,9 @@
   --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
   --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
 }
+:root {
+  --x-size-width-dropdown-l: 202px;
+}
 :root {
   --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
   --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -8027,9 +8048,6 @@
 :root {
   --x-size-width-dropdown-l: 202px;
 }
-:root {
-  --x-size-width-dropdown-l: 202px;
-}
 
 .x-dropdown.x-dropdown--l {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
@@ -8701,6 +8719,16 @@
   --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
   --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
 }
+:root {
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
+}
 :root {
   --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
@@ -8733,16 +8761,6 @@
   --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
   --x-size-font-badge-default: var(--x-size-font-base-xs);
 }
-:root {
-  --x-color-background-badge-default: var(--x-color-base-neutral-10);
-  --x-color-text-badge-default: var(--x-color-base-neutral-100);
-  --x-color-border-badge-default: var(--x-color-base-neutral-10);
-  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
-  --x-size-border-width-badge-default: 0;
-  --x-size-width-badge-default: 1.5em;
-  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
-  --x-size-font-badge-default: var(--x-size-font-base-xs);
-}
 
 [dir="ltr"] .x-badge {
   right: calc(var(--x-size-width-badge-default) / 4);
@@ -8823,26 +8841,4 @@
   --x-size-border-radius-base-m: var(--x-size-base-06);
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
-}
-:root {
-  --x-size-gap-row-01: var(--x-size-base-01);
-  --x-size-gap-row-02: var(--x-size-base-02);
-  --x-size-gap-row-03: var(--x-size-base-03);
-  --x-size-gap-row-04: var(--x-size-base-04);
-  --x-size-gap-row-05: var(--x-size-base-05);
-  --x-size-gap-row-06: var(--x-size-base-06);
-  --x-size-gap-row-07: var(--x-size-base-07);
-  --x-size-gap-row-08: var(--x-size-base-08);
-  --x-size-gap-row-09: var(--x-size-base-09);
-  --x-size-gap-row-10: var(--x-size-base-10);
-  --x-size-gap-row-11: var(--x-size-base-11);
-  --x-size-gap-row-12: var(--x-size-base-12);
-  --x-size-gap-row-13: var(--x-size-base-13);
-  --x-size-gap-row-14: var(--x-size-base-14);
-  --x-size-gap-row-15: var(--x-size-base-15);
-  --x-size-gap-row-16: var(--x-size-base-16);
-  --x-size-gap-row-17: var(--x-size-base-17);
-  --x-size-gap-row-18: var(--x-size-base-18);
-  --x-size-gap-row-19: var(--x-size-base-19);
-  --x-size-gap-row-20: var(--x-size-base-20);
 }

package/docs/API-reference/api/x-components.queriespreviewxevents.md

@@ -16,8 +16,8 @@ export interface QueriesPreviewXEvents
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
+|  [NonCacheableQueryPreviewUnmounted](./x-components.queriespreviewxevents.noncacheablequerypreviewunmounted.md) |  | string | The component that shows a Query preview has been unmounted. Payload: The query whose preview has been removed. |
 |  [QueryPreviewRequestUpdated](./x-components.queriespreviewxevents.querypreviewrequestupdated.md) |  | SearchRequest | Any property of the queries preview request has changed. Payload: The new [request](./x-types.searchrequest.md)<!-- -->. |
-|  [QueryPreviewUnmountedHook](./x-components.queriespreviewxevents.querypreviewunmountedhook.md) |  | string | The component that shows a Query preview has been unmounted. Payload: The query whose preview has been removed. |
 |  [QueryPreviewUnselected](./x-components.queriespreviewxevents.querypreviewunselected.md) |  | Dictionary&lt;unknown&gt; | The query preview has been unselected. Payload: The extra params to be restored in the modules affected by the query preview selection. |
 |  [UserAcceptedAQueryPreview](./x-components.queriespreviewxevents.useracceptedaquerypreview.md) |  | [QueryPreviewInfo](./x-components.querypreviewinfo.md) | User has clicked on a query preview. Payload: The [query preview info](./x-components.querypreviewinfo.md) of the selected [item](./x-components.querypreviewitem.md)<!-- -->. |
 

package/docs/API-reference/api/{x-components.queriespreviewxevents.querypreviewunmountedhook.md → x-components.queriespreviewxevents.noncacheablequerypreviewunmounted.md}

@@ -1,13 +1,13 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueriesPreviewXEvents](./x-components.queriespreviewxevents.md) &gt; [QueryPreviewUnmountedHook](./x-components.queriespreviewxevents.querypreviewunmountedhook.md)
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueriesPreviewXEvents](./x-components.queriespreviewxevents.md) &gt; [NonCacheableQueryPreviewUnmounted](./x-components.queriespreviewxevents.noncacheablequerypreviewunmounted.md)
 
-## QueriesPreviewXEvents.QueryPreviewUnmountedHook property
+## QueriesPreviewXEvents.NonCacheableQueryPreviewUnmounted property
 
 The component that shows a Query preview has been unmounted. Payload: The query whose preview has been removed.
 
 **Signature:**
 
 ```typescript
-QueryPreviewUnmountedHook: string;
+NonCacheableQueryPreviewUnmounted: string;
 ```

package/docs/API-reference/api/x-components.querypreview.md

@@ -17,11 +17,11 @@ export default class QueryPreview extends Vue
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
-|  [clearOnDestroy](./x-components.querypreview.clearondestroy.md) |  | boolean | Controls whether the QueryPreview should be removed from the state when the component is destroyed. |
 |  [config](./x-components.querypreview.config.md) |  | [QueriesPreviewConfig](./x-components.queriespreviewconfig.md) | As the request is handled in this component, we need the config that will be used in the request. |
 |  [debounceTimeMs](./x-components.querypreview.debouncetimems.md) |  | number | Debounce time in milliseconds for triggering the search requests. It will default to 0 to fit the most common use case (pre-search), and it would work properly with a 250 value inside empathize. |
 |  [maxItemsToRender?](./x-components.querypreview.maxitemstorender.md) | <code>protected</code> | number | _(Optional)_ Number of query preview results to be rendered. |
 |  [params](./x-components.querypreview.params.md) |  | Dictionary&lt;unknown&gt; | As the request is handled in this component, we need the extra params that will be used in the request. |
+|  [persistInCache](./x-components.querypreview.persistincache.md) |  | boolean | Controls whether the QueryPreview should be removed from the state when the component is destroyed. |
 |  [previewResults](./x-components.querypreview.previewresults.md) |  | Dictionary&lt;[QueryPreviewItem](./x-components.querypreviewitem.md)<!-- -->&gt; | The results preview of the queries preview mounted. It is a dictionary, indexed by the query preview query. |
 |  [queryFeature?](./x-components.querypreview.queryfeature.md) | <code>protected</code> | [QueryFeature](./x-components.queryfeature.md) | _(Optional)_ The origin property for the request. |
 |  [queryPreviewInfo](./x-components.querypreview.querypreviewinfo.md) | <code>protected</code> | [QueryPreviewInfo](./x-components.querypreviewinfo.md) | The information about the request of the query preview. |

package/docs/API-reference/api/{x-components.querypreview.clearondestroy.md → x-components.querypreview.persistincache.md}

@@ -1,13 +1,13 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueryPreview](./x-components.querypreview.md) &gt; [clearOnDestroy](./x-components.querypreview.clearondestroy.md)
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueryPreview](./x-components.querypreview.md) &gt; [persistInCache](./x-components.querypreview.persistincache.md)
 
-## QueryPreview.clearOnDestroy property
+## QueryPreview.persistInCache property
 
 Controls whether the QueryPreview should be removed from the state when the component is destroyed.
 
 **Signature:**
 
 ```typescript
-clearOnDestroy: boolean;
+persistInCache: boolean;
 ```

package/docs/API-reference/api/x-components.setupdevtools.md

@@ -4,7 +4,7 @@
 
 ## setupDevtools() function
 
-> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
 > 
 
 Setups a plugin for the Vue's devtools adding: - [XEvent](./x-components.xevent.md)<!-- -->s timeline. Every event is recorded in time, and its payload and metadata can be inspected. - Wiring inspector. Events and its wires can be viewed and disabled.

package/docs/API-reference/components/queries-preview/x-components.query-preview.md

@@ -12,18 +12,19 @@ results.
 
 ## Props
 
-| Name                          | Description                                                                                                                                                                                                  | Type                          | Default           |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------- | ----------------- |
-| <code>queryPreviewInfo</code> | The information about the request of the query preview.                                                                                                                                                      | <code>QueryPreviewInfo</code> | <code></code>     |
-| <code>queryFeature</code>     | The origin property for the request.                                                                                                                                                                         | <code>QueryFeature</code>     | <code></code>     |
-| <code>maxItemsToRender</code> | Number of query preview results to be rendered.                                                                                                                                                              | <code>number</code>           | <code></code>     |
-| <code>debounceTimeMs</code>   | Debounce time in milliseconds for triggering the search requests.<br />It will default to 0 to fit the most common use case (pre-search),<br />and it would work properly with a 250 value inside empathize. | <code>number</code>           | <code>0</code>    |
-| <code>clearOnDestroy</code>   | Controls whether the QueryPreview should be removed from the state<br />when the component is destroyed.                                                                                                     | <code>boolean</code>          | <code>true</code> |
+| Name                          | Description                                                                                                                                                                                                  | Type                          | Default            |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------- | ------------------ |
+| <code>queryPreviewInfo</code> | The information about the request of the query preview.                                                                                                                                                      | <code>QueryPreviewInfo</code> | <code></code>      |
+| <code>queryFeature</code>     | The origin property for the request.                                                                                                                                                                         | <code>QueryFeature</code>     | <code></code>      |
+| <code>maxItemsToRender</code> | Number of query preview results to be rendered.                                                                                                                                                              | <code>number</code>           | <code></code>      |
+| <code>debounceTimeMs</code>   | Debounce time in milliseconds for triggering the search requests.<br />It will default to 0 to fit the most common use case (pre-search),<br />and it would work properly with a 250 value inside empathize. | <code>number</code>           | <code>0</code>     |
+| <code>persistInCache</code>   | Controls whether the QueryPreview should be removed from the state<br />when the component is destroyed.                                                                                                     | <code>boolean</code>          | <code>false</code> |
 
 ## Events
 
 | Event name | Properties | Description |
 | ---------- | ---------- | ----------- |
+| load       |            |
 | error      |            |
 
 ## Slots

package/js/components/animations/animate-clip-path/animate-clip-path.style.scss.js

@@ -10,7 +10,7 @@ var css = ".x-animate-clip-path--enter-active, .x-animate-clip-path--leave-activ
            const useBrowserInjector =
              (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
            const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/__w/x/x/packages/x-components/src/components/animations/animate-clip-path/animate-clip-path.style.scss',{source:css});
+           injector('/home/runner/work/x/x/packages/x-components/src/components/animations/animate-clip-path/animate-clip-path.style.scss',{source:css});
 
 export { css, css as default };
 //# sourceMappingURL=animate-clip-path.style.scss.js.map

package/js/components/animations/animate-scale/animate-scale.style.scss.js

@@ -10,7 +10,7 @@ var css = ".x-animate-scale--enter-active, .x-animate-scale--leave-active, .x-an
            const useBrowserInjector =
              (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
            const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/__w/x/x/packages/x-components/src/components/animations/animate-scale/animate-scale.style.scss',{source:css});
+           injector('/home/runner/work/x/x/packages/x-components/src/components/animations/animate-scale/animate-scale.style.scss',{source:css});
 
 export { css, css as default };
 //# sourceMappingURL=animate-scale.style.scss.js.map

package/js/components/animations/animate-translate/animate-translate.style.scss.js

@@ -10,7 +10,7 @@ var css = ".x-animate-translate--enter-active, .x-animate-translate--leave-activ
            const useBrowserInjector =
              (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
            const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/__w/x/x/packages/x-components/src/components/animations/animate-translate/animate-translate.style.scss',{source:css});
+           injector('/home/runner/work/x/x/packages/x-components/src/components/animations/animate-translate/animate-translate.style.scss',{source:css});
 
 export { css, css as default };
 //# sourceMappingURL=animate-translate.style.scss.js.map

package/js/components/animations/animate-width.vue.js

@@ -30,7 +30,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-d7caf02c";
+  const __vue_scope_id__ = "data-v-5122106f";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/animations/animate-width.vue_rollup-plugin-vue_styles.0.vue.js

@@ -1,6 +1,6 @@
 import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
 
-var css = ".x-animate-width--enter-active[data-v-d7caf02c], .x-animate-width--leave-active[data-v-d7caf02c] {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n.x-animate-width--enter[data-v-d7caf02c], .x-animate-width--leave-to[data-v-d7caf02c] {\n  width: 0 !important;\n}";
+var css = ".x-animate-width--enter-active[data-v-5122106f], .x-animate-width--leave-active[data-v-5122106f] {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n.x-animate-width--enter[data-v-5122106f], .x-animate-width--leave-to[data-v-5122106f] {\n  width: 0 !important;\n}";
            const isBrowser = /*#__PURE__*/ (function () {
              return (
                 Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
@@ -10,7 +10,7 @@ var css = ".x-animate-width--enter-active[data-v-d7caf02c], .x-animate-width--le
            const useBrowserInjector =
              (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
            const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/__w/x/x/packages/x-components/src/components/animations/animate-width.vue?rollup-plugin-vue=styles.0.css',{source:css});
+           injector('/home/runner/work/x/x/packages/x-components/src/components/animations/animate-width.vue?rollup-plugin-vue=styles.0.css',{source:css});
 
 export { css, css as default };
 //# sourceMappingURL=animate-width.vue_rollup-plugin-vue_styles.0.vue.js.map

package/js/components/animations/collapse-height.vue.js

@@ -37,7 +37,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-ac8a58de";
+  const __vue_scope_id__ = "data-v-a801a3a8";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/animations/collapse-height.vue_rollup-plugin-vue_styles.0.vue.js

@@ -1,6 +1,6 @@
 import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
 
-var css = ".x-collapse-height--enter-active[data-v-ac8a58de], .x-collapse-height--leave-active[data-v-ac8a58de] {\n  transition: height 0.3s ease-out;\n  overflow: hidden;\n}";
+var css = ".x-collapse-height--enter-active[data-v-a801a3a8], .x-collapse-height--leave-active[data-v-a801a3a8] {\n  transition: height 0.3s ease-out;\n  overflow: hidden;\n}";
            const isBrowser = /*#__PURE__*/ (function () {
              return (
                 Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
@@ -10,7 +10,7 @@ var css = ".x-collapse-height--enter-active[data-v-ac8a58de], .x-collapse-height
            const useBrowserInjector =
              (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
            const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/__w/x/x/packages/x-components/src/components/animations/collapse-height.vue?rollup-plugin-vue=styles.0.css',{source:css});
+           injector('/home/runner/work/x/x/packages/x-components/src/components/animations/collapse-height.vue?rollup-plugin-vue=styles.0.css',{source:css});
 
 export { css, css as default };
 //# sourceMappingURL=collapse-height.vue_rollup-plugin-vue_styles.0.vue.js.map

package/js/components/animations/collapse-width.vue.js

@@ -37,7 +37,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-779213bb";
+  const __vue_scope_id__ = "data-v-c86c6100";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */