@wix/patterns 1.413.0 → 1.415.0

package/src/components/EditableTable/cellTypes/datetime/index.ts

@@ -0,0 +1,49 @@
+import { defineCellType } from '../../types';
+import { DateTimeView } from './View';
+import { DateTimeEdit } from './Edit';
+import { DateTimeEditWrapper } from './DateTimeEditWrapper';
+import { toValidDate } from './helpers';
+
+export { DateTimeView, DateTimeEdit };
+
+/**
+ * DateTime — 2-in-1 cell type. Single `Date | null` rendered as two halves
+ * (date | time) with a vertical divider. Each half has its own focus + edit
+ * lifecycle, but only one sub-cell is in edit mode at a time.
+ *
+ * Serialized via ISO 8601 (`toISOString`) — round-trips both date and time
+ * components without timezone surprises in storage. The cell is never in a
+ * "date set, time null" state; an empty time-of-day after a date pick
+ * defaults to 00:00:00.
+ */
+export const dateTimeCellType = defineCellType<Date | null>({
+  type: 'datetime',
+  ViewComponent: DateTimeView,
+  EditComponent: DateTimeEdit,
+  EditWrapper: DateTimeEditWrapper,
+  serialize: (value) => {
+    const date = toValidDate(value);
+    return date ? date.toISOString() : '';
+  },
+  deserialize: (raw) => {
+    if (!raw) {
+      return null;
+    }
+    const date = toValidDate(raw);
+    if (!date) {
+      throw new Error(`Invalid datetime value: "${raw}"`);
+    }
+    return date;
+  },
+  validate: (value) => {
+    if (value == null) {
+      return null;
+    }
+    return toValidDate(value) ? null : 'Invalid date/time';
+  },
+  editable: true,
+  clearable: true,
+  // Forward typed character into the date half (entry default is 'date').
+  // The Edit component opens the calendar and forwards the key.
+  onTypeToEdit: () => ({}),
+});

package/src/components/EditableTable/cellTypes/datetime/mergeDateTime.ts

@@ -0,0 +1,35 @@
+import { isValidDate } from './helpers';
+
+/**
+ * Take the date-part from `newDate` and the time-of-day from `prev`. When
+ * `prev` is null/invalid the merged time-of-day defaults to midnight.
+ */
+export function mergeDate(prev: Date | null, newDate: Date): Date {
+  const next = new Date(newDate);
+  if (isValidDate(prev)) {
+    next.setHours(
+      prev.getHours(),
+      prev.getMinutes(),
+      prev.getSeconds(),
+      prev.getMilliseconds(),
+    );
+  } else {
+    next.setHours(0, 0, 0, 0);
+  }
+  return next;
+}
+
+/**
+ * Take the time-of-day from `newTime` and the date-part from `prev`. When
+ * `prev` is null/invalid the merged date-part defaults to today.
+ */
+export function mergeTime(prev: Date | null, newTime: Date): Date {
+  const base = isValidDate(prev) ? new Date(prev) : new Date();
+  base.setHours(
+    newTime.getHours(),
+    newTime.getMinutes(),
+    newTime.getSeconds(),
+    newTime.getMilliseconds(),
+  );
+  return base;
+}

package/src/components/EditableTable/cellTypes/datetime/subCellContext.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+
+export type SubCell = 'date' | 'time';
+
+interface SubCellClickTracker {
+  /** Read the last clicked sub-cell. Cleared (returns null) after read. */
+  consume: () => SubCell | null;
+  /** Record which sub-cell the user just mousedowned on. */
+  record: (sub: SubCell) => void;
+}
+
+const NOOP_TRACKER: SubCellClickTracker = {
+  consume: () => null,
+  record: () => {},
+};
+
+export const SubCellClickContext =
+  React.createContext<SubCellClickTracker>(NOOP_TRACKER);
+
+export const useSubCellClickTracker = (): SubCellClickTracker =>
+  React.useContext(SubCellClickContext);

package/src/components/EditableTable/cellTypes/email/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2995109127";
+var _namespace_ = "Edit551041898";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit2995109127__root","emailInput":"Edit2995109127__emailInput"};
+export var classes = {"root":"Edit551041898__root","emailInput":"Edit551041898__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1765699111";
+var _namespace_ = "View1120631057";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View1765699111__root"};
+export var classes = {"root":"View1120631057__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/index.ts

@@ -4,6 +4,7 @@ import { numberCellType } from './number';
 import { booleanCellType } from './boolean';
 import { dateCellType } from './date';
 import { timeCellType } from './time';
+import { dateTimeCellType } from './datetime';
 import { urlCellType } from './url';
 import { emailCellType } from './email';
 import { colorCellType } from './color';
@@ -25,6 +26,7 @@ export {
   booleanCellType,
   dateCellType,
   timeCellType,
+  dateTimeCellType,
   urlCellType,
   emailCellType,
   colorCellType,
@@ -48,6 +50,7 @@ export const builtInCellTypes: CellType[] = [
   booleanCellType,
   dateCellType,
   timeCellType,
+  dateTimeCellType,
   urlCellType,
   emailCellType,
   colorCellType,

package/src/components/EditableTable/cellTypes/number/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit82474354";
+var _namespace_ = "Edit3997170827";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit82474354__root","numberInput":"Edit82474354__numberInput"};
+export var classes = {"root":"Edit3997170827__root","numberInput":"Edit3997170827__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2867133405";
+var _namespace_ = "View3717091114";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View2867133405__root","textView":"View2867133405__textView"};
+export var classes = {"root":"View3717091114__root","textView":"View3717091114__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit418534881";
+var _namespace_ = "Edit1884076868";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit418534881__root","jsonInput":"Edit418534881__jsonInput"};
+export var classes = {"root":"Edit1884076868__root","jsonInput":"Edit1884076868__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2561215068";
+var _namespace_ = "View4108766999";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View2561215068__root"};
+export var classes = {"root":"View4108766999__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/select/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3098003061";
+var _namespace_ = "Edit1063584883";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3098003061__root","selectInput":"Edit3098003061__selectInput"};
+export var classes = {"root":"Edit1063584883__root","selectInput":"Edit1063584883__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1280511382";
+var _namespace_ = "Edit2539786971";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit1280511382__root","editWrapper":"Edit1280511382__editWrapper","inputArea":"Edit1280511382__inputArea"};
+export var classes = {"root":"Edit2539786971__root","editWrapper":"Edit2539786971__editWrapper","inputArea":"Edit2539786971__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2005723083";
+var _namespace_ = "View109019798";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View2005723083__root"};
+export var classes = {"root":"View109019798__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/time/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit260042110";
+var _namespace_ = "Edit3891897524";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit260042110__root","wrapper":"Edit260042110__wrapper","overlay":"Edit260042110__overlay"};
+export var classes = {"root":"Edit3891897524__root","wrapper":"Edit3891897524__wrapper","overlay":"Edit3891897524__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/time/Edit.tsx

@@ -48,7 +48,11 @@ export const TimeEdit: React.FC<CellEditProps<Time | null>> = ({
         value={value}
         onChange={onChange}
         onCommit={onCommit}
-        inputRef={inputRef}
+        inputRef={
+          inputRef as React.MutableRefObject<
+            HTMLInputElement | null | undefined
+          >
+        }
         dataHook="time-edit"
       />
       {maskInitialEmpty && value != null && (

package/src/components/EditableTable/cellTypes/url/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1268113439";
+var _namespace_ = "Edit3618082279";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit1268113439__root","urlInput":"Edit1268113439__urlInput"};
+export var classes = {"root":"Edit3618082279__root","urlInput":"Edit3618082279__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3467375880";
+var _namespace_ = "View1464552216";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View3467375880__root","textView":"View3467375880__textView","urlText":"View3467375880__urlText","suffix":"View3467375880__suffix"};
+export var classes = {"root":"View1464552216__root","textView":"View1464552216__textView","urlText":"View1464552216__urlText","suffix":"View1464552216__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EntityPage/EntityPagePlain.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EntityPagePlain45724782";
+var _namespace_ = "EntityPagePlain583315663";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EntityPagePlain45724782__root"};
+export var classes = {"root":"EntityPagePlain583315663__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Fade/Fade.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Fade3247150327";
+var _namespace_ = "Fade68256681";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Fade3247150327__root"};
+export var classes = {"root":"Fade68256681__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/FiltersPanel/FiltersPanel.tsx

@@ -1,4 +1,10 @@
-import { Accordion, SidePanel, SidePanelProps, WixStyleReactDefaultsOverrideProvider } from '@wix/design-system';
+import {
+  Accordion,
+  Box,
+  SidePanel,
+  SidePanelProps,
+  WixStyleReactDefaultsOverrideProvider,
+} from '@wix/design-system';
 import React, { useState } from 'react';
 import { FiltersMap } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
@@ -6,11 +12,15 @@ import { useBuildAccordionItems } from '../../hooks/useBuildAccordionItems';
 import { FiltersPanelFooter } from './FiltersPanelFooter';
 import { FilterRenderingContextProvider } from '../FilterRenderingContext';
 import { FiltersPanelState } from './FiltersPanelState';
+import { FiltersPanelSearch } from './FiltersPanelSearch';
+import { FiltersPanelSearchNoResults } from './FiltersPanelSearchNoResults';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useRafRender } from '../../hooks/useRafRender';
 import { CollectionToolbarFiltersState } from '../CollectionToolbarFilters/CollectionToolbarFiltersState';
 import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
 
+const FILTER_SEARCH_THRESHOLD = 7;
+
 export interface FiltersPanelProps<T, F extends FiltersMap>
   extends Partial<SidePanelProps> {
   state: CollectionToolbarFiltersState<T, F>;
@@ -26,8 +36,6 @@ function _FiltersPanel<T, F extends FiltersMap>(
     totalInlineFilters: { value: totalInlineFilters },
   } = state;
 
-  const accordionItems = useBuildAccordionItems(state);
-
   const entered = useRafRender();
 
   const { translate: t } = useWixPatternsContainer();
@@ -39,6 +47,17 @@ function _FiltersPanel<T, F extends FiltersMap>(
       }),
   );
 
+  const showSearch = state.panelFilterElements.length > FILTER_SEARCH_THRESHOLD;
+
+  const accordionItems = useBuildAccordionItems(
+    state,
+    showSearch ? filtersPanelState.searchValue : '',
+  );
+
+  const hasActiveSearch =
+    showSearch && filtersPanelState.searchValue.trim().length > 0;
+  const noResults = hasActiveSearch && accordionItems.length === 0;
+
   const [filterRenderingContext] = useState(() => ({
     location: 'panel' as const,
   }));
@@ -75,19 +94,29 @@ function _FiltersPanel<T, F extends FiltersMap>(
               })
             : undefined)
         }
-      />
+      >
+        {showSearch && (
+          <Box padding="0 SP2 SP2 SP2">
+            <FiltersPanelSearch state={filtersPanelState} />
+          </Box>
+        )}
+      </SidePanel.Header>
 
       <div
         data-hook="filters-panel-scroll-container"
         style={{ overflowY: 'auto' }}
       >
-        <Accordion
-          dataHook="filters-panel-accordion"
-          skin="light"
-          hideShadow
-          multiple
-          items={accordionItems}
-        />
+        {noResults ? (
+          <FiltersPanelSearchNoResults state={filtersPanelState} />
+        ) : (
+          <Accordion
+            dataHook="filters-panel-accordion"
+            skin="light"
+            hideShadow
+            multiple
+            items={accordionItems}
+          />
+        )}
       </div>
       <SidePanel.Footer noPadding>
         <FiltersPanelFooter

package/src/components/FiltersPanel/FiltersPanel.uni.driver.ts

@@ -10,6 +10,7 @@ import {
   InputWithOptionsUniDriver,
   MessageModalLayoutUniDriver,
   MultiSelectUniDriver,
+  SearchUniDriver,
   SidePanelUniDriver,
   TextButtonUniDriver,
   TextUniDriver,
@@ -260,6 +261,18 @@ export const FiltersPanelUniDriver = (base: UniDriver, body: UniDriver) => {
     return accordionBase.$$(':scope > div').count();
   };
 
+  const filterSearchBase = base.$('[data-hook="filters-panel-search"]');
+  const filterSearch = () => SearchUniDriver(filterSearchBase, body);
+  const noResultsBase = base.$('[data-hook="filters-panel-search-no-results"]');
+  const noResultsTitle = base.$(
+    '[data-hook="filters-panel-search-no-results-title"]',
+  );
+  const clearSearchButton = () =>
+    TextButtonUniDriver(
+      base.$('[data-hook="filters-panel-search-clear-button"]'),
+      body,
+    );
+
   return {
     isOpen: slidingModal.isOpen,
     clickCloseButton: async () => {
@@ -344,7 +357,9 @@ export const FiltersPanelUniDriver = (base: UniDriver, body: UniDriver) => {
 
       const getOperatorDropdown = () =>
         DropdownBaseUniDriver(
-          getOperatorPicker().$('[data-hook="operator-picker-operator-dropdown"]'),
+          getOperatorPicker().$(
+            '[data-hook="operator-picker-operator-dropdown"]',
+          ),
           body,
         );
 
@@ -399,5 +414,14 @@ export const FiltersPanelUniDriver = (base: UniDriver, body: UniDriver) => {
         .$$(`[data-hook="accordion-item-title-${filterName}"]`)
         .get(index),
     _getInlineCheckboxFilter: getInlineCheckboxFilter,
+
+    isFilterSearchVisible: () => filterSearchBase.exists(),
+    enterFilterSearch: (term: string) =>
+      filterSearch().inputDriver.enterText(term),
+    clearFilterSearchInput: () => filterSearch().inputDriver.clearText(),
+    getFilterSearchValue: () => filterSearch().inputDriver.getText(),
+    isNoFiltersMatchVisible: () => noResultsBase.exists(),
+    getNoFiltersMatchText: () => TextUniDriver(noResultsTitle, body).getText(),
+    clickClearSearchButton: () => clearSearchButton().click(),
   };
 };

package/src/components/FiltersPanel/FiltersPanelSearch.tsx

@@ -0,0 +1,29 @@
+import { Search } from '@wix/design-system';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { FiltersMap } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { FiltersPanelState } from './FiltersPanelState';
+
+export interface FiltersPanelSearchProps<T, F extends FiltersMap> {
+  state: FiltersPanelState<T, F>;
+}
+
+function _FiltersPanelSearch<T, F extends FiltersMap>({
+  state,
+}: FiltersPanelSearchProps<T, F>) {
+  const { translate: t } = useWixPatternsContainer();
+
+  return (
+    <Search
+      dataHook="filters-panel-search"
+      size="small"
+      value={state.searchValue}
+      onChange={(e) => state.setSearchValue(e.target.value)}
+      onClear={() => state.clearSearch()}
+      placeholder={t('cairo.filtersPanel.search.placeholder')}
+    />
+  );
+}
+
+export const FiltersPanelSearch = observer(_FiltersPanelSearch);

package/src/components/FiltersPanel/FiltersPanelSearchNoResults.tsx

@@ -0,0 +1,48 @@
+import { Box, Text, TextButton } from '@wix/design-system';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { FiltersMap } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { FiltersPanelState } from './FiltersPanelState';
+
+export interface FiltersPanelSearchNoResultsProps<T, F extends FiltersMap> {
+  state: FiltersPanelState<T, F>;
+}
+
+function _FiltersPanelSearchNoResults<T, F extends FiltersMap>({
+  state,
+}: FiltersPanelSearchNoResultsProps<T, F>) {
+  const { translate: t } = useWixPatternsContainer();
+
+  return (
+    <Box
+      dataHook="filters-panel-search-no-results"
+      direction="vertical"
+      align="center"
+      verticalAlign="middle"
+      gap="SP2"
+      padding="SP6 SP3"
+    >
+      <Text
+        dataHook="filters-panel-search-no-results-title"
+        size="small"
+        secondary
+      >
+        {t('cairo.filtersPanel.search.noResults.title', {
+          term: state.searchValue.trim(),
+        })}
+      </Text>
+      <TextButton
+        dataHook="filters-panel-search-clear-button"
+        size="small"
+        onClick={() => state.clearSearch()}
+      >
+        {t('cairo.filtersPanel.search.clearButton')}
+      </TextButton>
+    </Box>
+  );
+}
+
+export const FiltersPanelSearchNoResults = observer(
+  _FiltersPanelSearchNoResults,
+);