@uniformdev/mesh-sdk-react 20.7.1-alpha.12 → 20.7.1-alpha.120

package/dist/index.js

@@ -920,7 +920,7 @@ var import_zod = require("@hookform/resolvers/zod");
 var import_design_system4 = require("@uniformdev/design-system");
 var import_react12 = require("react");
 var import_react_hook_form = require("react-hook-form");
-var import_zod2 = require("zod");
+var z = __toESM(require("zod"));
 
 // src/components/Variables/styles/VariableEditor.styles.ts
 var import_react11 = require("@emotion/react");
@@ -932,13 +932,13 @@ var variablesFormContainer = import_react11.css`
 
 // src/components/Variables/VariableEditor.tsx
 var import_jsx_runtime18 = require("@emotion/react/jsx-runtime");
-var schema = import_zod2.z.object({
-  name: import_zod2.z.string().nonempty("Name can't be empty").regex(/^[^${}]+$/, "$, {, and } are reserved characters and cannot be used in a variable name"),
-  default: import_zod2.z.string(),
-  displayName: import_zod2.z.string().optional(),
-  helpText: import_zod2.z.string().optional(),
-  order: import_zod2.z.number().optional(),
-  type: import_zod2.z.string().optional()
+var schema = z.object({
+  name: z.string().nonempty("Name can't be empty").regex(/^[^${}]+$/, "$, {, and } are reserved characters and cannot be used in a variable name"),
+  default: z.string(),
+  displayName: z.string().optional(),
+  helpText: z.string().optional(),
+  order: z.number().optional(),
+  type: z.string().optional()
 });
 function VariableEditor({
   variable,
@@ -1390,7 +1390,8 @@ function VariablesPlugin({
   enableEditingVariables,
   getEditorContext,
   replaceValueOnVariableInsert,
-  filterVariable
+  filterVariable,
+  disableVariableDisplayNames
 }) {
   const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
   const { variables, dispatch, isEditing, canDispatch, readOnly, knownUndefinedValues, isLoading } = useVariables(true);
@@ -1468,9 +1469,10 @@ function VariablesPlugin({
                 });
                 return;
               }
+              const initialDisplayName = disableVariableDisplayNames ? prettifyBindExpression(result.selectedVariable.name) : result.selectedVariable.displayName;
               editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
                 variable: result.selectedVariable.name,
-                initialDisplayName: result.selectedVariable.displayName,
+                initialDisplayName,
                 targetKey: sourceKey,
                 overwriteExistingValue: replaceValueOnVariableInsert
               });
@@ -1518,9 +1520,10 @@ function VariablesPlugin({
               if (result.canceled) {
                 return;
               }
+              const initialDisplayName = disableVariableDisplayNames ? prettifyBindExpression(result.selectedVariable.name) : result.selectedVariable.displayName;
               editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
                 variable: result.selectedVariable.name,
-                initialDisplayName: result.selectedVariable.displayName,
+                initialDisplayName,
                 targetKey: void 0,
                 overwriteExistingValue: replaceValueOnVariableInsert
               });
@@ -1539,8 +1542,9 @@ function VariablesPlugin({
           var _a, _b;
           if (!disableVariables) {
             const targetVariable = variablesRef.current.variables[reference];
+            const displayName = disableVariableDisplayNames ? prettifyBindExpression(reference) : initialDisplayName != null ? initialDisplayName : (targetVariable == null ? void 0 : targetVariable.displayName) || prettifyBindExpression(reference);
             const variableNode = $createVariableNode(reference, {
-              displayName: initialDisplayName != null ? initialDisplayName : (targetVariable == null ? void 0 : targetVariable.displayName) || prettifyBindExpression(reference),
+              displayName,
               hasClickEvent: canEditVariable(reference, targetVariable),
               referenceIsValid: true,
               tooltip: (_a = targetVariable == null ? void 0 : targetVariable.tooltip) != null ? _a : targetVariable == null ? void 0 : targetVariable.helpText,
@@ -1577,7 +1581,8 @@ function VariablesPlugin({
     readOnly,
     getEditorContext,
     editVariable,
-    replaceValueOnVariableInsert
+    replaceValueOnVariableInsert,
+    disableVariableDisplayNames
   ]);
   const updateExistingNodeIfChanged = (0, import_react15.useCallback)(
     (variableNode) => {
@@ -1590,9 +1595,10 @@ function VariablesPlugin({
         return;
       }
       const tooltip = (_d = (_c = (_b = (_a = targetVar == null ? void 0 : targetVar.tooltip) != null ? _a : targetVar == null ? void 0 : targetVar.helpText) != null ? _b : targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) != null ? _c : targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) != null ? _d : targetUndefinedVar == null ? void 0 : targetUndefinedVar.info;
+      const displayName = disableVariableDisplayNames ? prettifyBindExpression(variableNode.reference) : (targetVar == null ? void 0 : targetVar.displayName) || (targetUndefinedVar == null ? void 0 : targetUndefinedVar.displayName) || prettifyBindExpression(variableNode.reference);
       const newState = {
         ...currentState,
-        displayName: (targetVar == null ? void 0 : targetVar.displayName) || (targetUndefinedVar == null ? void 0 : targetUndefinedVar.displayName) || prettifyBindExpression(variableNode.reference),
+        displayName,
         isLoading: isLoadingVariables && !targetVar && !(targetUndefinedVar == null ? void 0 : targetUndefinedVar.info),
         hasClickEvent: canEditVariable(variableNode.reference, targetVar),
         referenceIsValid: (targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) ? false : (targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) ? "warning" : (targetUndefinedVar == null ? void 0 : targetUndefinedVar.info) ? "info" : isLoadingVariables ? true : Boolean(targetVar),
@@ -1603,7 +1609,7 @@ function VariablesPlugin({
         variableNode.setState(newState);
       }
     },
-    [canEditVariable]
+    [canEditVariable, disableVariableDisplayNames]
   );
   (0, import_react15.useEffect)(() => {
     let selection;
@@ -1762,6 +1768,14 @@ var VariableNode = class _VariableNode extends import_lexical5.DecoratorNode {
   updateDOM() {
     return false;
   }
+  static importDOM() {
+    return {
+      binding: () => ({
+        conversion: $convertBindingElement,
+        priority: 0
+      })
+    };
+  }
   /**
    * Render the variable node using React.
    * NOTE: this is effectively an island of React, and you may not call hooks,
@@ -1771,6 +1785,21 @@ var VariableNode = class _VariableNode extends import_lexical5.DecoratorNode {
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(VariableNodeComponent, { state: this.__state, reference: this.reference, nodeKey: this.__key });
   }
 };
+function $convertBindingElement(domNode) {
+  const element = domNode;
+  const reference = element.textContent.replace(variablePrefix, "").replace(variableSuffix, "");
+  const node = $createVariableNode(reference, {
+    displayName: prettifyBindExpression(reference),
+    hasClickEvent: true,
+    referenceIsValid: true,
+    tooltip: void 0,
+    isFresh: true,
+    isLoading: false
+  });
+  return {
+    node
+  };
+}
 function $createVariableNode(variableReference, state) {
   return new VariableNode(variableReference, state);
 }
@@ -1948,7 +1977,7 @@ var menuBtn2 = import_react18.css`
   transform: translateY(-50%);
 `;
 var input = import_react18.css`
-  --input-padding: 12px var(--spacing-base) 12px var(--spacing-sm);
+  --input-padding: 12px var(--spacing-lg) 12px var(--spacing-sm);
   appearance: none;
   background-color: var(--white);
   border: 1px solid var(--gray-300);
@@ -2085,6 +2114,7 @@ var input2 = import_react19.css`
   &:disabled,
   &:disabled::placeholder,
   &:disabled:hover {
+    border-color: var(--gray-200);
     border-radius: var(--rounded-sm);
     cursor: not-allowed;
     color: var(--gray-400);
@@ -2094,6 +2124,7 @@ var input2 = import_react19.css`
   &[contenteditable='false'] {
     cursor: not-allowed;
     color: var(--gray-400);
+    border-color: var(--gray-200);
   }
 
   > p {
@@ -2588,7 +2619,8 @@ function InputVariables(props) {
     styleVariant = "default",
     renderMenuInPortal,
     disableDismissEditorOnChange,
-    singleTokenMode
+    singleTokenMode,
+    disableVariableDisplayNames
   } = props;
   const [finalId] = (0, import_react28.useState)(id != null ? id : () => (0, import_uuid.v4)());
   const { dispatch, canDispatch, isEditing } = useVariables(true);
@@ -2611,7 +2643,7 @@ function InputVariables(props) {
             gap: "xs",
             css: import_react27.css`
           position: relative;
-          & > div:first-child {
+          & > div:first-of-type {
             flex-grow: 1;
           }
         `,
@@ -2697,6 +2729,7 @@ function InputVariables(props) {
       replaceValueOnVariableInsert: useInputWithNoVariables,
       autoFocus,
       filterVariable,
+      disableVariableDisplayNames,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PasteTransformerPlugin, { transformPaste }),
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ControlledValuePlugin, { value, enabled: singleTokenMode || useInputWithNoVariables }),
@@ -3065,6 +3098,8 @@ var variableValue = import_react34.css`
 
 // src/components/Variables/VariablesList.tsx
 var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
+var DroppableHack = import_react_beautiful_dnd2.Droppable;
+var DraggableHack = import_react_beautiful_dnd2.Draggable;
 function VariablesList() {
   const { variables, dispatch, readOnly } = useVariables();
   const sorted = variablesToList(variables).filter((variable) => !variable.system);
@@ -3086,7 +3121,7 @@ function VariablesList() {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_beautiful_dnd2.Droppable, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_design_system13.Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DroppableHack, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_design_system13.Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system13.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_design_system13.TableRow, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system13.TableCellHead, { children: "Name" }),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system13.TableCellHead, { children: "Default Value" }),
@@ -3097,7 +3132,7 @@ function VariablesList() {
           const text = displayName != null ? displayName : name2;
           const textValue = variableDefaultTextValue(defaultValue);
           return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-            import_react_beautiful_dnd2.Draggable,
+            DraggableHack,
             {
               draggableId: name2,
               index,
@@ -3692,8 +3727,8 @@ function urlEncodeRequestParameter(parameter, varValues) {
     value: decodeVariablesInUrlEncodedString(encodeURIComponent(parameter.value), varValues)
   };
 }
-function decodeVariablesInUrlEncodedString(string, varValues) {
-  return string.replace(/(\$|%24)%7B(.*?)%7D/g, (_all, _money, body) => {
+function decodeVariablesInUrlEncodedString(string2, varValues) {
+  return string2.replace(/(\$|%24)%7B(.*?)%7D/g, (_all, _money, body) => {
     var _a;
     const varName = decodeURIComponent(body);
     return ((_a = varValues == null ? void 0 : varValues[varName]) == null ? void 0 : _a.default) ? variableDefaultTextValue(varValues[varName].default) : `\${${varName}}`;
@@ -4026,7 +4061,7 @@ var DataRefreshButton = ({
   onRefreshData,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_design_system20.Button, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_design_system20.Button, { buttonType: "ghost", onClick: onRefreshData, disabled: isLoading, ...props, children: [
     !isLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       import_design_system20.LoadingIndicator,
       {
@@ -4293,7 +4328,7 @@ var ObjectSearchListItem = ({
         ),
         /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { css: ObjectListItemInfoContainer, children: [
           selected ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system22.Chip, { text: "selected", size: "xs" }) : null,
-          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system22.Popover, { ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
+          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_design_system22.Popover, { ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
         !children ? null : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { css: ObjectListItemUnControlledContent, children })
       ]
@@ -4323,7 +4358,6 @@ var ObjectSearchContainer = ({
       role: "list",
       css: import_react45.css`
         > div {
-          transition: max-height var(--duration-slow) var(--timing-ease-out);
           max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
         }
       `,
@@ -4601,6 +4635,11 @@ var ObjectSearchResultItemTimeStamp = import_react49.css`
   color: var(--gray-500);
   font-size: var(--fs-xs);
 `;
+var ObjectSearchResultItemTitleLink = import_react49.css`
+  text-decoration: none;
+  color: var(--primary-action-default);
+  font-size: var(--fs-sm);
+`;
 var ObjectSearchAuthorStateGroup = import_react49.css`
   align-items: center;
   display: flex;
@@ -4635,7 +4674,8 @@ var ObjectSearchResultItem = ({
   publishedAt,
   hideRemoveButton = false,
   disableDnD = false,
-  children
+  children,
+  onClick
 }) => {
   const { onSelectItem } = useObjectSearchContext();
   const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
@@ -4658,7 +4698,19 @@ var ObjectSearchResultItem = ({
       /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { css: ObjectSearchResultItemSubtitle, "data-testid": "sub-title", children: formatedContentType }),
         /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { role: "heading", css: ObjectSearchResultItemTitle, "data-testid": "title", children: [
-          title != null ? title : name,
+          onClick ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            import_design_system26.Link,
+            {
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onClick();
+              },
+              href: editLink,
+              text: title != null ? title : name,
+              css: ObjectSearchResultItemTitleLink
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: title != null ? title : name }),
           !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_design_system26.Popover, { ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
         !createdAt && !publishStatus ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
@@ -4729,6 +4781,8 @@ var ObjectSearchResultListTitle = import_react50.css`
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
 var import_jsx_runtime55 = require("@emotion/react/jsx-runtime");
+var DroppableHack2 = import_react_beautiful_dnd3.Droppable;
+var DraggableHack2 = import_react_beautiful_dnd3.Draggable;
 function ObjectSearchResultList({
   resultLabelText = "Selected",
   removeButtonText = "Remove all",
@@ -4800,7 +4854,7 @@ function ObjectSearchResultList({
       ] })
     ] }),
     !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-      import_react_beautiful_dnd3.Droppable,
+      DroppableHack2,
       {
         droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select",
         renderClone: getContainerForDnDReparenting ? getDraggableItem : void 0,
@@ -4808,7 +4862,7 @@ function ObjectSearchResultList({
         children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
           selectedListItems.map((item, i) => {
             return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-              import_react_beautiful_dnd3.Draggable,
+              DraggableHack2,
               {
                 draggableId: item.id,
                 index: i,
@@ -5258,18 +5312,6 @@ var DATE_TIME_OPERATORS = [
     value: "sys-date-gte",
     editorType: "date",
     expectedValueType: "single"
-  },
-  {
-    label: "is empty",
-    value: "ndef",
-    editorType: "empty",
-    expectedValueType: "false"
-  },
-  {
-    label: "is not empty",
-    value: "def",
-    editorType: "empty",
-    expectedValueType: "true"
   }
 ];
 var RICHTEXT_OPERATORS = [
@@ -6287,8 +6329,6 @@ var SearchAndFilterOptionsContainer = import_react63.css`
   gap: var(--spacing-sm);
   padding: var(--spacing-md) 0 var(--spacing-base);
   will-change: height;
-  position: relative;
-  z-index: 2;
 `;
 var SearchAndFilterOptionsInnerContainer = import_react63.css`
   display: flex;
@@ -6307,8 +6347,6 @@ var SearchAndFilterAdditionalContainer = import_react63.css`
   flex-wrap: nowrap;
   gap: var(--spacing-base);
   padding: var(--spacing-base) var(--spacing-md) 0;
-  position: relative;
-  z-index: 0;
 `;
 
 // src/components/SearchAndFilter/FilterButton.tsx
@@ -6387,6 +6425,7 @@ function withInputVariables(WrappedComponent, noSwapping = false) {
     return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       InputVariables,
       {
+        "data-testid": "filter-value",
         disableInlineMenu: true,
         showMenuPosition: "inline-right",
         onChange: (newValue) => props.onChange(newValue != null ? newValue : ""),
@@ -6407,6 +6446,7 @@ function withInputVariablesForMultiValue(WrappedComponent) {
     return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       InputVariables,
       {
+        "data-testid": "filter-value",
         disableInlineMenu: true,
         showMenuPosition: "inline-right",
         onChange: (newValue) => props.onChange(newValue ? [newValue] : []),
@@ -6459,6 +6499,7 @@ var SearchAndFilterProvider = ({
   onSearchChange,
   onChange,
   resetFilterValues = [{ field: "", operator: "", value: "" }],
+  onResetFilterValues,
   totalResults,
   filterMapper: filterMapper2 = filterMapper,
   children,
@@ -6487,9 +6528,12 @@ var SearchAndFilterProvider = ({
     onChange([...filters, { field: "", operator: "", value: "" }]);
   }, [filters, onChange]);
   const handleResetFilters = (0, import_react64.useCallback)(() => {
+    if (onResetFilterValues) {
+      return onResetFilterValues();
+    }
     onSearchChange == null ? void 0 : onSearchChange("");
     onChange(resetFilterValues);
-  }, [onChange, resetFilterValues, onSearchChange]);
+  }, [onChange, resetFilterValues, onSearchChange, onResetFilterValues]);
   const handleDeleteFilter = (0, import_react64.useCallback)(
     (index) => {
       const remainingFilters = filters.filter((_, i) => i !== index);
@@ -6561,17 +6605,17 @@ var FilterControls = ({
   const editorRef = (0, import_react65.useRef)(null);
   const variableRefernceCountInSearchTerm = (0, import_canvas10.hasReferencedVariables)(searchTerm);
   const [idToResetInputVariables, setIdToResetInputVariables] = (0, import_react65.useState)("data-resource-search-term-input");
-  const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react65.useState)(searchTerm);
+  const [localSearchTerm, setLocalSearchTerm] = (0, import_react65.useState)(searchTerm);
   (0, import_react_use7.useDebounce)(
     () => {
-      setSearchTerm(localeSearchTerm);
+      setSearchTerm(localSearchTerm);
     },
     300,
-    [localeSearchTerm]
+    [localSearchTerm]
   );
   (0, import_react65.useEffect)(() => {
     if (searchTerm === "") {
-      setLocaleSearchTerm("");
+      setLocalSearchTerm("");
       setIdToResetInputVariables(`data-resource-search-term-input-${(0, import_uuid2.v4)()}`);
     }
   }, [searchTerm]);
@@ -6589,7 +6633,7 @@ var FilterControls = ({
         dataTestId: "filters-button"
       }
     ),
-    hideSearchInput ? null : /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { css: BindableKeywordSearchInputStyles, children: [
+    hideSearchInput ? null : /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { css: BindableKeywordSearchInputStyles, "data-testid": "search-container", children: [
       /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
         InputVariables,
         {
@@ -6597,18 +6641,24 @@ var FilterControls = ({
           id: idToResetInputVariables,
           showMenuPosition: "inline-right",
           editorRef,
-          value: localeSearchTerm,
-          onChange: (value) => setLocaleSearchTerm(value != null ? value : ""),
+          value: localSearchTerm,
+          onChange: (value) => setLocalSearchTerm(value != null ? value : ""),
           disableVariables: !allowBindingSearchTerm,
           inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
             import_design_system44.InputKeywordSearch,
             {
               placeholder: "Search...",
-              onSearchTextChanged: (e) => setLocaleSearchTerm(e),
-              value: localeSearchTerm,
+              onSearchTextChanged: (e) => setLocalSearchTerm(e),
+              value: localSearchTerm,
               compact: true,
               rounded: true,
-              css: SearchInput
+              css: SearchInput,
+              onKeyPress: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }
+              }
             }
           )
         }
@@ -6618,7 +6668,7 @@ var FilterControls = ({
         {
           css: ClearSearchButtonStyles,
           onClick: () => {
-            setLocaleSearchTerm("");
+            setLocalSearchTerm("");
             if (editorRef.current) {
               if (editorRef.current.getRootElement() !== document.activeElement) {
                 editorRef.current.dispatchCommand(import_lexical11.CLEAR_EDITOR_COMMAND, void 0);
@@ -7055,15 +7105,36 @@ var SearchAndFilterResultContainer = ({
   hideClearButton
 }) => {
   const { searchTerm, totalResults, filters, handleResetFilters, setSearchTerm } = useSearchAndFilter();
-  const automateCalloutTitle = () => {
-    if (searchTerm && !filters.length) {
-      return "No search results found";
+  const emptyFilters = filters.length === 0 || filters.every((filter) => !filter.value);
+  const getTextValue = ({
+    defaultPropText,
+    searchText,
+    filterText,
+    fallbackText
+  }) => {
+    if (defaultPropText) {
+      return defaultPropText;
+    }
+    if (searchTerm && emptyFilters) {
+      return searchText;
     }
-    if (filters.length && !searchTerm) {
-      return "No results match the selected filters";
+    if (!emptyFilters && !searchTerm) {
+      return filterText;
     }
-    return "No matching results found";
+    return fallbackText;
   };
+  const clearButtonText = getTextValue({
+    defaultPropText: buttonText,
+    searchText: "Clear search",
+    filterText: "Clear filters",
+    fallbackText: "Clear results"
+  });
+  const automateCalloutTitle = getTextValue({
+    defaultPropText: calloutTitle,
+    searchText: "No search results found",
+    filterText: "No results match the selected filters",
+    fallbackText: "No matching results found"
+  });
   if (totalResults && totalResults > 0) {
     return null;
   }
@@ -7084,7 +7155,7 @@ var SearchAndFilterResultContainer = ({
       ] }),
       !searchTerm || hideClearButton ? null : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_design_system48.Button, { buttonType: "ghostDestructive", size: "zero", onClick: handleClearSearch, children: clearButtonLabel })
     ] }),
-    totalResults === 0 ? /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_design_system48.Callout, { title: calloutTitle != null ? calloutTitle : automateCalloutTitle(), type: "note", children: [
+    totalResults === 0 ? /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_design_system48.Callout, { title: automateCalloutTitle, type: "note", children: [
       calloutText ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_design_system48.Paragraph, { children: calloutText }) : null,
       hideClearButton ? null : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
         import_design_system48.Button,
@@ -7093,7 +7164,7 @@ var SearchAndFilterResultContainer = ({
           size: "xs",
           onClick: handleClearSearch,
           "data-testid": "clear-search",
-          children: buttonText != null ? buttonText : "Clear search"
+          children: clearButtonText
         }
       )
     ] }) : null
@@ -7116,7 +7187,8 @@ var SearchAndFilter = ({
   onSearchChange,
   totalResults,
   allowBindingSearchTerm = false,
-  resetFilterValues = []
+  resetFilterValues = [],
+  onResetFilterValues
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     SearchAndFilterProvider,
@@ -7131,6 +7203,7 @@ var SearchAndFilter = ({
       resetFilterValues,
       filterMapper: filterMapper2,
       allowBindingSearchTerm,
+      onResetFilterValues,
       children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_design_system49.VerticalRhythm, { "data-testid": "search-and-filter", children: [
         /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
           /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(