@wix/patterns 1.308.0 → 1.317.0

package/src/components/ArchivedItemsPanel/ArchivedItemsPanel.tsx

@@ -1,4 +1,4 @@
-import { SidePanel, Text } from '@wix/design-system';
+import { SidePanel } from '@wix/design-system';
 import React, {
   CSSProperties,
   useMemo,
@@ -11,7 +11,6 @@ import { ScrollableContent } from '../ScrollableContent';
 import { ArchivedItemsList } from './ArchivedItemsList';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { DataExtensionState } from '@wix/bex-core';
-import { MessageActionModal } from '../ActionModal/MessageActionModal';
 import type { ArchivedItem } from './types';
 
 export interface ArchivedItemsPanelProps {
@@ -39,7 +38,7 @@ function _ArchivedItemsPanel({
   const closeIfEmpty = () => {
     const remainingItems = dataExtension.archivedItems;
     if (remainingItems.length === 0) {
-      onCloseButtonClick();
+      handleBack();
     }
   };
 
@@ -55,53 +54,29 @@ function _ArchivedItemsPanel({
     closeIfEmpty();
   };
 
-  const handleDelete = useCallback((item: ArchivedItem) => {
-    dataExtension.openDeleteConfirmModal({
-      id: item.id,
-      origin: 'Archived items panel',
-    });
-  }, []);
-
-  const handleConfirmDelete = async () => {
-    const { id, origin } = dataExtension.deleteConfirmModal.value || {};
-    if (!id) {
-      return;
-    }
-
-    await dataExtension.deleteField({
-      id,
-      origin: origin || 'Archived items panel',
-      reportBi: dataExtension.container.createBILogger({
-        componentType: 'ArchivedItemsPanel',
-      }),
-    });
-
-    closeIfEmpty();
-  };
-
-  const style = useMemo<CSSProperties>(
-    () => ({
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      zIndex: 10000,
-      display: 'flex',
-      justifyContent: 'flex-end',
-    }),
-    [],
+  const handleDelete = useCallback(
+    (item: ArchivedItem) => {
+      dataExtension.deleteFieldModal?.modal.open({
+        id: item.id,
+        origin: 'Archived items panel',
+      });
+    },
+    [dataExtension],
   );
 
   const slideStyle = useMemo<CSSProperties>(
     () => ({
+      position: 'absolute',
+      top: 0,
+      right: isVisible ? 0 : '-600px',
+      bottom: 0,
       width: '100%',
       maxWidth: '600px',
       backgroundColor: 'white',
-      transform: isVisible ? 'translateX(0)' : 'translateX(100%)',
-      transition: 'transform 0.3s ease-out',
+      transition: 'right 0.3s ease-out',
       display: 'flex',
       flexDirection: 'column',
+      zIndex: 1,
     }),
     [isVisible],
   );
@@ -122,26 +97,34 @@ function _ArchivedItemsPanel({
     onCloseButtonClick();
   }, [onCloseButtonClick]);
 
+  const tooltipKey = useMemo(() => {
+    return dataHook === 'custom-columns'
+      ? 'cairo.archivedFields.back.custom-columns.tooltip'
+      : 'cairo.archivedFields.back.manage-custom-fields.tooltip';
+  }, [dataHook]);
+
   return (
     <div
-      style={style}
-      onClick={handleClose}
       data-hook={`${dataHook}-archived-items-panel-container`}
+      style={slideStyle}
+      onClick={(e) => e.stopPropagation()}
     >
-      <div style={slideStyle} onClick={(e) => e.stopPropagation()}>
-        <SidePanel // PatternsSidePanel is overriding the back button to close the panel
-          dataHook={`${dataHook}-archived-items-panel`}
-          width="100%"
-          closeButtonProps={{ onClick: handleClose }}
-          onBackButtonClick={handleBack}
-          backButtonProps={{
-            description: t('cairo.archivedFields.back.custom-columns.tooltip'),
-          }}
-        >
-          <SidePanel.Header
-            title={t('cairo.archivedFields.title')}
-            subtitle={t('cairo.archivedFields.subtitle')}
-          />
+      <SidePanel // PatternsSidePanel is overriding the back button to close the panel
+        dataHook={`${dataHook}-archived-items-panel`}
+        width="100%"
+        closeButtonProps={{ onClick: handleClose }}
+        onBackButtonClick={handleBack}
+        backButtonProps={{
+          description: t(tooltipKey),
+          tooltipProps: {
+            moveArrowTo: 80,
+          },
+        }}
+      >
+        <SidePanel.Header
+          title={t('cairo.archivedFields.title')}
+          subtitle={t('cairo.archivedFields.subtitle')}
+        />
         <ScrollableContent
           overflowY
           dataHook={`${dataHook}-archived-items-panel-scroll-container`}
@@ -153,34 +136,7 @@ function _ArchivedItemsPanel({
             dataHook={dataHook}
           />
         </ScrollableContent>
-        </SidePanel>
-      </div>
-      {dataExtension.deleteConfirmModal.value && (
-        <MessageActionModal
-          dataHook={`${dataHook}-archived-items-delete-confirm-modal`}
-          state={dataExtension.deleteConfirmModal}
-          theme="destructive"
-          title={t('cairo.customFields.delete.modal.title', {
-            selectedField:
-              dataExtension.extractFieldValuesFromSchema(
-                dataExtension.deleteConfirmModal.value.id,
-              )?.name || '',
-          })}
-          content={
-            <Text>
-              {t('cairo.customFields.delete.modal.description', {
-                selectedField:
-                  dataExtension.extractFieldValuesFromSchema(
-                    dataExtension.deleteConfirmModal.value.id,
-                  )?.name || '',
-              })}
-            </Text>
-          }
-          primaryButtonText={t('cairo.customFields.delete.modal.delete.CTA')}
-          secondaryButtonText={t('cairo.customFields.delete.modal.cancel.CTA')}
-          primaryButtonOnClick={handleConfirmDelete}
-        />
-      )}
+      </SidePanel>
     </div>
   );
 }

package/src/components/ArchivedItemsPanel/DeleteFieldModal.tsx

@@ -0,0 +1,50 @@
+import { Text } from '@wix/design-system';
+import React from 'react';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { MessageActionModal } from '../ActionModal';
+import { observer } from 'mobx-react-lite';
+import { DeleteFieldModalState } from '@wix/bex-core';
+import { Trans } from '../Trans';
+
+export const _DeleteFieldModal = ({
+  state,
+}: {
+  state: DeleteFieldModalState;
+}) => {
+  const container = useWixPatternsContainer();
+  const { translate: t } = container;
+  const { dataExtension, modal } = state;
+
+  return (
+    <MessageActionModal
+      dataHook="archived-items-delete-confirm-modal"
+      state={modal}
+      skin="destructive"
+      title={t('cairo.customFields.delete.modal.title', {
+        selectedField:
+          dataExtension.extractFieldValuesFromSchema(modal.value?.id || '')
+            ?.name || '',
+      })}
+      content={
+        <Text>
+          <Trans
+            i18nKey="cairo.customFields.delete.modal.description"
+            values={{
+              selectedField:
+                dataExtension.extractFieldValuesFromSchema(
+                  modal.value?.id || '',
+                )?.name || '',
+            }}
+            components={{
+              bold: <Text weight="bold" />,
+            }}
+          />
+        </Text>
+      }
+      primaryButtonText={t('cairo.customFields.delete.modal.delete.CTA')}
+      secondaryButtonText={t('cairo.customFields.delete.modal.cancel.CTA')}
+    />
+  );
+};
+
+export const DeleteFieldModal = observer(_DeleteFieldModal);

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer1393832148";
+var _namespace_ = "CardContainer3682847078";
 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":"CardContainer1393832148__root"};
+export var classes = {"root":"CardContainer3682847078__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse3981266577";
+var _namespace_ = "Collapse1742912586";
 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":"Collapse3981266577__root","exit":"Collapse3981266577__exit"};
+export var classes = {"root":"Collapse1742912586__root","exit":"Collapse1742912586__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionCard/CollectionCard.tsx

@@ -16,6 +16,7 @@ import { ErrorState } from '../ErrorState';
 import type { TagsElement } from '../Tags';
 import { WixPatternsPanelModalsContainer } from '../WixPatternsPanelModalsContainer';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { DeleteFieldModal } from '../ArchivedItemsPanel/DeleteFieldModal';
 
 export interface CollectionCardProps<T, F extends FiltersMap>
   extends CardProps {
@@ -103,6 +104,11 @@ function _CollectionCard<T, F extends FiltersMap>({
                 collectionDataExtension.customFieldsPanel.archiveFieldModal
               }
             />
+            {collectionDataExtension.dataExtension.deleteFieldModal && (
+              <DeleteFieldModal
+                state={collectionDataExtension.dataExtension.deleteFieldModal}
+              />
+            )}
           </>
         )}
 

package/src/components/CollectionErrorState/CollectionErrorState.tsx

@@ -11,7 +11,7 @@ const RequestId = React.lazy(() =>
 
 export interface CollectionErrorStateProps extends ErrorCardProps {
   /**
-   * requestId to display in the error state.
+   * The `requestId` to display in the error state.
    */
   requestId?: string;
 }

package/src/components/CollectionPageHeaderNew/CollectionPageHeader.tsx

@@ -33,17 +33,17 @@ export interface CollectionPageHeaderProps {
   subtitle?: PageSubTitleProps;
 
   /**
-   * A [`PrimaryActions`](./?path=/story/wip-primaryactions--primaryactions) component to be rendered on the header.
+   * A [`PrimaryActions`](./?path=/story/features-actions-primary-actions--primary-actions) component to be rendered on the header.
    * A primary button w/o PopoverMenu component to be rendered in the header.
-   * @overrideType [PrimaryActions](./?path=/story/wip-primaryactions--primaryactions)
+   * @overrideType [PrimaryActions](./?path=/story/features-actions-primary-actions--primary-actions)
    * @external
    */
   primaryAction?: PrimaryActionsElement;
 
   /**
-   * A [`SecondaryActions`](./?path=/story/wip-secondaryactions--secondaryactions) component to be rendered on the header.
+   * A [`SecondaryActions`](./?path=/story/features-actions-secondary-actions--secondary-actions) component to be rendered on the header.
    * A Secondary button w/o PopoverMenu component to be rendered on the header
-   * @overrideType [SecondaryActions](./?path=/story/wip-secondaryactions--secondaryactions)
+   * @overrideType [SecondaryActions](./?path=/story/features-actions-secondary-actions--secondary-actions)
    * @external
    */
   secondaryActions?: SecondaryActionsElement;

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage359188730";
+var _namespace_ = "CollectionPage2205670101";
 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":"CollectionPage359188730__root"};
+export var classes = {"root":"CollectionPage2205670101__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTable2907796976";
+var _namespace_ = "CollectionTable469532719";
 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":"CollectionTable2907796976__root"};
+export var classes = {"root":"CollectionTable469532719__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar1834786979";
+var _namespace_ = "CollectionToolbar48805195";
 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":"CollectionToolbar1834786979__root","left":"CollectionToolbar1834786979__left","right":"CollectionToolbar1834786979__right","fullWidth":"CollectionToolbar1834786979__fullWidth"};
+export var classes = {"root":"CollectionToolbar48805195__root","left":"CollectionToolbar48805195__left","right":"CollectionToolbar48805195__right","fullWidth":"CollectionToolbar48805195__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.tsx

@@ -82,6 +82,7 @@ function _CollectionToolbar<T, F extends FiltersMap>(
 
   const hasOtherToolbarFeatures = useIsCollectionToolbarExists(props, {
     excludeSearch: true,
+    isMobile,
   });
   const searchIsExpandable = isMobile ? hasOtherToolbarFeatures : undefined;
 
@@ -206,9 +207,10 @@ function _CollectionToolbar<T, F extends FiltersMap>(
       'specs.cairo.ImmidiatelyInteractWithToolbars',
     );
 
-  const CollectionToolbarActionsGroup = responsive.responsiveDisabled
-    ? CollectionToolbarActionsToolbarItemsGroup
-    : CollectionToolbarActionsGroupResponsiveLayout;
+  const CollectionToolbarActionsGroup =
+    isMobile || responsive.responsiveDisabled
+      ? CollectionToolbarActionsToolbarItemsGroup
+      : CollectionToolbarActionsGroupResponsiveLayout;
 
   const toolbarElement = (
     <>
@@ -246,6 +248,7 @@ function _CollectionToolbar<T, F extends FiltersMap>(
         )}
       >
         <CollectionToolbarActionsGroup
+          state={state}
           viewsToolbarItem={viewsToolbarItem}
           filtersElement={filtersElement}
           MoreFiltersButton={MoreFiltersButton}

package/src/components/CollectionToolbar/CollectionToolbarActionsGroupProps.ts

@@ -1,7 +1,9 @@
 import { FunctionComponent, ReactElement } from 'react';
 import { ToolbarBaseProps } from '../ToolbarCollection';
+import { ToolbarCollectionState } from '../../state';
 
 export interface CollectionToolbarActionsGroupProps {
+  state: ToolbarCollectionState<any, any>;
   left?: ReactElement;
   viewsToolbarItem?: ReactElement;
   filtersElement?: ReactElement;

package/src/components/CollectionToolbar/CollectionToolbarActionsGroupResponsiveLayout.tsx

@@ -13,6 +13,7 @@ export function CollectionToolbarActionsGroupResponsiveLayout(
   props: CollectionToolbarActionsGroupProps,
 ) {
   const {
+    state,
     left,
     viewsToolbarItem,
     filtersElement,
@@ -68,7 +69,7 @@ export function CollectionToolbarActionsGroupResponsiveLayout(
         {customColumns && !showCustomColumnsOnTheLeft && customColumns}
       </ToolbarGroupScrollWidthBox>
 
-      {search && <SearchOrCustomFilter search={search} />}
+      {search && <SearchOrCustomFilter state={state} search={search} />}
     </Fragment>
   );
 

package/src/components/CollectionToolbar/CollectionToolbarActionsToolbarItemsGroup.tsx

@@ -5,11 +5,14 @@ import { CollectionToolbarActionsGroupProps } from './CollectionToolbarActionsGr
 import { InitialLoadingConditional } from '../InitialLoadingConditional';
 import { CollectionToolbarSkeletonItem } from './CollectionToolbarSkeletonItem';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
+import { observer } from 'mobx-react-lite';
+import { useIsMobile } from '../../hooks/useIsMobile';
 
-export function CollectionToolbarActionsToolbarItemsGroup(
+function _CollectionToolbarActionsToolbarItemsGroup(
   props: CollectionToolbarActionsGroupProps,
 ) {
   const {
+    state,
     left,
     viewsToolbarItem,
     filtersElement,
@@ -23,51 +26,65 @@ export function CollectionToolbarActionsToolbarItemsGroup(
 
   const toolbarState = useToolbarCollectionContext();
 
+  const searchChild = search && (
+    <SearchOrCustomFilter state={state} search={search} />
+  );
+
+  const isMobile = useIsMobile();
+
   return (
     <Fragment>
-      {left ? (
-        <>
-          {viewsToolbarItem && (
-            <InitialLoadingConditional
-              state={toolbarState}
-              loadingElement={
-                <CollectionToolbarSkeletonItem
-                  dataHook="toolbar-views-skeleton"
-                  width="100px"
-                />
-              }
-            >
-              {viewsToolbarItem}
-            </InitialLoadingConditional>
+      {(!isMobile || !state._searchExpanded) && (
+        <Fragment>
+          {left ? (
+            <>
+              {viewsToolbarItem && (
+                <InitialLoadingConditional
+                  state={toolbarState}
+                  loadingElement={
+                    <CollectionToolbarSkeletonItem
+                      dataHook="toolbar-views-skeleton"
+                      width="100px"
+                    />
+                  }
+                >
+                  {viewsToolbarItem}
+                </InitialLoadingConditional>
+              )}
+              {filtersElement}
+            </>
+          ) : viewsToolbarItem ? (
+            filtersElement
+          ) : undefined}
+          {MoreFiltersButton && (
+            <TableToolbar.Item>
+              <MoreFiltersButton />
+            </TableToolbar.Item>
           )}
-          {filtersElement}
-        </>
-      ) : viewsToolbarItem ? (
-        filtersElement
-      ) : undefined}
-      {MoreFiltersButton && (
-        <TableToolbar.Item>
-          <MoreFiltersButton />
-        </TableToolbar.Item>
-      )}
-      {customColumns && showCustomColumnsOnTheLeft && (
-        <TableToolbar.Item>{customColumns}</TableToolbar.Item>
-      )}
-      {multiLevelSorting && (
-        <TableToolbar.Item>{multiLevelSorting}</TableToolbar.Item>
-      )}
-      {exportButton && (
-        <TableToolbar.Item>
-          {cloneElement(exportButton, {
-            toolbarType: 'default',
-          })}
-        </TableToolbar.Item>
-      )}
-      {customColumns && !showCustomColumnsOnTheLeft && (
-        <TableToolbar.Item>{customColumns}</TableToolbar.Item>
+          {customColumns && showCustomColumnsOnTheLeft && (
+            <TableToolbar.Item>{customColumns}</TableToolbar.Item>
+          )}
+          {multiLevelSorting && (
+            <TableToolbar.Item>{multiLevelSorting}</TableToolbar.Item>
+          )}
+          {exportButton && (
+            <TableToolbar.Item>
+              {cloneElement(exportButton, {
+                toolbarType: 'default',
+              })}
+            </TableToolbar.Item>
+          )}
+          {customColumns && !showCustomColumnsOnTheLeft && (
+            <TableToolbar.Item>{customColumns}</TableToolbar.Item>
+          )}
+        </Fragment>
       )}
 
-      {search && <SearchOrCustomFilter search={search} />}
+      {searchChild}
     </Fragment>
   );
 }
+
+export const CollectionToolbarActionsToolbarItemsGroup = observer(
+  _CollectionToolbarActionsToolbarItemsGroup,
+);

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css

@@ -7,16 +7,15 @@
 .searchMobile {
   -st-states: expandable, expanded;
   justify-content: flex-end;
-  position: absolute;
-  left: 18px;
-  right: 18px;
 }
 
-.searchMobile:expandable {
-  left: unset;
+.searchMobile:not(:expandable) {
+  width: 100%;
 }
 
 .searchMobile:expandable:expanded {
+  position: absolute;
+  right: 18px;
   left: 18px;
 }
 

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter1027938767";
+var _namespace_ = "SearchOrCustomFilter1385992637";
 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":"SearchOrCustomFilter1027938767__root","search":"SearchOrCustomFilter1027938767__search","searchMobile":"SearchOrCustomFilter1027938767__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1385992637__root","search":"SearchOrCustomFilter1385992637__search","searchMobile":"SearchOrCustomFilter1385992637__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.tsx

@@ -1,23 +1,22 @@
 import { Box, TableToolbar } from '@wix/design-system';
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import { classes, st } from './SearchOrCustomFilter.st.css.js';
 import { ToolbarBaseProps } from '../ToolbarCollection';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { observer } from 'mobx-react-lite';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import { CollectionSearchElement } from '../assertComponentType.js';
+import { runInAction } from 'mobx';
 
 export interface SearchOrCustomFilterProps {
   search: ToolbarBaseProps['search'];
+  state: {
+    _searchExpanded: boolean;
+  };
 }
 
 function _SearchOrCustomFilter(props: SearchOrCustomFilterProps) {
-  const { search: _search } = props;
-  const [isSearchExpanded, setIsSearchExpanded] = useState(false);
-
-  const handleExpandChange = useCallback((isExpanded: boolean) => {
-    setIsSearchExpanded(isExpanded);
-  }, []);
+  const { search: _search, state } = props;
 
   const {
     toolbar: { responsive },
@@ -30,15 +29,23 @@ function _SearchOrCustomFilter(props: SearchOrCustomFilterProps) {
 
   const isMobile = useIsMobile();
 
+  const isSearchExpanded = state._searchExpanded;
+
+  const onSearchExpandChange = (expanded: boolean) => {
+    runInAction(() => {
+      state._searchExpanded = expanded;
+    });
+  };
+
   const [search, isExpandable] = useMemo(() => {
     if (!React.isValidElement(_search)) {
       return [_search, false];
     }
     const element = React.cloneElement(_search as CollectionSearchElement, {
-      onExpandChange: handleExpandChange,
+      onExpandChange: onSearchExpandChange,
     });
     return [element, element.props.expandable];
-  }, [_search, handleExpandChange]);
+  }, [_search, onSearchExpandChange]);
 
   if (responsiveDisabled || isMobile) {
     return (