@wix/patterns 1.255.0 → 1.256.0

package/src/components/FileCard/FilePreview.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { Box, TableListItem } from '@wix/design-system';
+import { FileViewProps } from './FileProps';
+import { useDownloadFile } from './useDownloadFile';
+import { FilePreviewModal } from './FilePreviewModal';
+import { FileCard } from './FileCard';
+
+export function FilePreview({
+  file,
+  showDownloadCTA,
+  showDetails,
+}: FileViewProps) {
+  const { mediaType } = file;
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const { downloadFile } = useDownloadFile({ file });
+  const supportedPreviewTypes = ['picture', 'video'];
+
+  return (
+    <Box
+      marginBottom="SP1"
+      direction="vertical"
+      width={showDetails ? '100%' : 'fit-content'}
+    >
+      <TableListItem
+        verticalPadding="xxTiny"
+        horizontalPadding="xxTiny"
+        border
+        onClick={(e) => {
+          e.stopPropagation();
+          if (!supportedPreviewTypes.includes(mediaType)) {
+            downloadFile();
+            return;
+          }
+          setIsPreviewOpen(true);
+        }}
+        options={[
+          {
+            value: (
+              <Box
+                height={showDetails ? 48 : 36}
+                overflow="hidden"
+                dataHook={`file-upload-formatted-${file.mediaId}`}
+              >
+                <FileCard
+                  file={file}
+                  showDownloadCTA={showDownloadCTA}
+                  showDetails={showDetails}
+                />
+              </Box>
+            ),
+          },
+        ]}
+      />
+      {supportedPreviewTypes.includes(mediaType) ? (
+        <FilePreviewModal
+          file={file}
+          showDetails={showDetails}
+          isOpen={isPreviewOpen}
+          close={() => {
+            setIsPreviewOpen(false);
+          }}
+        />
+      ) : null}
+    </Box>
+  );
+}

package/src/components/FileCard/FilePreviewModal.tsx

@@ -0,0 +1,69 @@
+import React, { useMemo } from 'react';
+import {
+  CustomModalLayout,
+  Loader,
+  Modal,
+  Image,
+  Box,
+} from '@wix/design-system';
+import { resolveFileByMediaType } from './resolveFileByMediaType';
+import { useDownloadFile } from './useDownloadFile';
+import { Download } from '@wix/wix-ui-icons-common';
+import { FileViewProps } from './FileProps';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+interface FilePreviewModalProps extends FileViewProps {
+  isOpen: boolean;
+  close: () => void;
+  showDetails?: boolean;
+}
+export const FilePreviewModal = ({
+  file,
+  isOpen,
+  close,
+  showDetails,
+}: FilePreviewModalProps) => {
+  const { translate: t } = useWixPatternsContainer();
+  const { downloadFile, isDownloading } = useDownloadFile({ file });
+  const { fileUrl } = resolveFileByMediaType(file, showDetails);
+  const prefixIcon = useMemo(
+    () => (
+      <Box verticalAlign="middle">
+        {isDownloading ? <Loader size="tiny" /> : <Download size="small" />}
+      </Box>
+    ),
+    [isDownloading],
+  );
+  return (
+    <Modal isOpen={isOpen} onRequestClose={close} shouldCloseOnOverlayClick>
+      <CustomModalLayout
+        title={file.displayName}
+        onCloseButtonClick={close}
+        primaryButtonText={t('cairo.customFields.fileUpload.download.cta')}
+        primaryButtonProps={{
+          prefixIcon,
+        }}
+        primaryButtonOnClick={downloadFile}
+      >
+        {file.mediaType === 'video' ? (
+          <video
+            controls
+            style={{
+              width: '100%',
+              height: 'auto',
+              maxHeight: '70vh',
+              margin: '0 auto',
+            }}
+            src={fileUrl}
+            autoPlay={false}
+          />
+        ) : (
+          <Image
+            style={{ height: '500px', width: '500px', objectFit: 'contain' }}
+            src={fileUrl}
+          />
+        )}
+      </CustomModalLayout>
+    </Modal>
+  );
+};

package/src/components/FileCard/FileProps.ts

@@ -0,0 +1,35 @@
+/**
+ * Represents a file.
+ */
+export interface File {
+  /**
+   * The unique identifier of the media in mediaManager.
+   */
+  mediaId: string;
+
+  /**
+   * The size of the file in bytes.
+   */
+  sizeInBytes: number;
+
+  /**
+   * The type of media.
+   */
+  mediaType: 'picture' | 'audio' | 'video' | 'document';
+
+  /**
+   * The display name of the file.
+   */
+  displayName: string;
+
+  /**
+   * Whether the file is private.
+   */
+  private: boolean;
+}
+
+export interface FileViewProps {
+  file: File;
+  showDownloadCTA?: boolean;
+  showDetails?: boolean;
+}

package/src/components/FileCard/Thumbnail.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Box } from '@wix/design-system';
+import { File } from './FileProps';
+import {
+  resolveFileByMediaType,
+  SMALL_THUMB_WIDTH,
+  THUMB_WIDTH,
+} from './resolveFileByMediaType';
+
+interface ThumbnailProps {
+  file: File;
+  showDetails: boolean;
+}
+
+export function Thumbnail({ file, showDetails }: ThumbnailProps) {
+  const { thumbnail } = resolveFileByMediaType(file, showDetails);
+  return (
+    <Box
+      dataHook={`file-thumbnail-${file.mediaType}-${file.mediaId}`}
+      align="center"
+      verticalAlign="middle"
+      width={showDetails ? THUMB_WIDTH : SMALL_THUMB_WIDTH}
+      height={showDetails ? THUMB_WIDTH : SMALL_THUMB_WIDTH}
+    >
+      {thumbnail}
+    </Box>
+  );
+}

package/src/components/FileCard/formatBytes.ts

@@ -0,0 +1,13 @@
+export function formatBytes(bytes: number, decimals = 2) {
+  if (!+bytes) {
+    return '0 Bytes';
+  }
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YiB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}

package/src/components/FileCard/icons.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+
+export const videoIcon = (
+  <svg
+    width="36"
+    height="36"
+    viewBox="0 0 36 36"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M27.75 6V30H14.8725C14.658 30.0007 14.445 29.955 14.25 29.865C14.085 29.79 13.5 24.75 13.5 24.75C13.5 24.75 8.46001 24.165 8.38501 24C8.29524 23.8048 8.24917 23.5924 8.25001 23.3775V6H27.75Z"
+      fill="#6544F9"
+    />
+    <path
+      d="M14.2498 24V29.865C14.0848 29.79 13.9348 29.685 13.8073 29.5575L8.69227 24.4425C8.56477 24.315 8.45977 24.165 8.38477 24H14.2498Z"
+      fill="#DAC4FB"
+    />
+    <path
+      d="M15.75 19.2202C15.6515 19.2202 15.5539 19.2008 15.4628 19.1631C15.3718 19.1253 15.2891 19.07 15.2194 19.0003C15.1498 18.9306 15.0946 18.8478 15.0569 18.7567C15.0193 18.6657 14.9999 18.5681 15 18.4695V12.2805C14.9991 12.1817 15.0179 12.0838 15.0553 11.9923C15.0926 11.9009 15.1478 11.8178 15.2177 11.7479C15.2875 11.678 15.3705 11.6227 15.4619 11.5853C15.5533 11.5478 15.6513 11.5289 15.75 11.5297C15.8821 11.5304 16.0116 11.5664 16.125 11.634L21.3855 14.7285C21.4986 14.7942 21.5924 14.8885 21.6573 15.002C21.7223 15.1156 21.756 15.2442 21.7553 15.375C21.756 15.5058 21.7223 15.6344 21.6573 15.748C21.5924 15.8615 21.4986 15.9558 21.3855 16.0215L16.1258 19.116C16.0119 19.1833 15.8823 19.2192 15.75 19.2202ZM15.75 12.2805V18.4695L21.0105 15.375L15.75 12.2805Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export const docIcon = (
+  <svg
+    width="36"
+    height="36"
+    viewBox="0 0 36 36"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M27.75 6V30H14.8725C14.658 30.0007 14.445 29.955 14.25 29.865C14.085 29.79 13.5 24.75 13.5 24.75C13.5 24.75 8.46001 24.165 8.38501 24C8.29524 23.8048 8.24917 23.5924 8.25001 23.3775V6H27.75Z"
+      fill="#166AEA"
+    />
+    <path
+      d="M14.2498 24V29.865C14.0848 29.79 13.9348 29.685 13.8073 29.5575L8.69227 24.4425C8.56477 24.315 8.45977 24.165 8.38477 24H14.2498Z"
+      fill="#8CBAFF"
+    />
+    <path
+      d="M22.5 12.75H13.5V12H22.5V12.75ZM22.5 15H13.5V15.75H22.5V15ZM18.75 18H13.5V18.75H18.75V18Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export const pdfIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="36"
+    height="36"
+    viewBox="0 0 36 36"
+    fill="none"
+  >
+    <path
+      d="M27.75 6V30H14.8725C14.658 30.0007 14.445 29.955 14.25 29.865C14.085 29.79 13.5 24.75 13.5 24.75C13.5 24.75 8.46001 24.165 8.38501 24C8.29524 23.8048 8.24917 23.5924 8.25001 23.3775V6H27.75Z"
+      fill="#FA6050"
+    />
+    <path
+      d="M14.2498 24V29.865C14.0848 29.79 13.9348 29.685 13.8073 29.5575L8.69227 24.4425C8.56477 24.315 8.45977 24.165 8.38477 24H14.2498Z"
+      fill="#FCCCC2"
+    />
+    <path
+      d="M13.9605 12.9507C13.6516 12.8103 13.3149 12.7416 12.9757 12.7497H10.8555V17.9997H11.8425V15.9455H12.975C13.314 15.953 13.65 15.884 13.959 15.7445C14.226 15.6207 14.454 15.4265 14.6175 15.1812C14.7782 14.9318 14.861 14.6402 14.8552 14.3435C14.8612 14.0482 14.7783 13.7579 14.6175 13.5102C14.4539 13.267 14.2266 13.0734 13.9605 12.9507ZM13.6207 14.9067C13.4385 15.0522 13.2097 15.1242 12.9772 15.1115H11.8432V13.583H12.9757C13.2082 13.5702 13.4377 13.643 13.62 13.7877C13.6979 13.8571 13.7593 13.943 13.7998 14.0391C13.8403 14.1353 13.8588 14.2393 13.854 14.3435C13.8594 14.4489 13.8412 14.5542 13.8007 14.6516C13.7602 14.7491 13.6985 14.8362 13.62 14.9067H13.6207ZM19.2982 13.0835C18.8425 12.8534 18.3371 12.7388 17.8267 12.7497H15.9982V17.9997H17.8267C18.3382 18.0113 18.8445 17.895 19.2997 17.6615C19.7077 17.4492 20.0497 17.1275 20.2867 16.733C20.5282 16.3205 20.6512 15.8487 20.6422 15.371C20.6514 14.8929 20.5283 14.4216 20.2867 14.009C20.0501 13.6148 19.7083 13.2943 19.2997 13.0835H19.2982ZM19.3867 16.3145C19.2465 16.577 19.0335 16.793 18.7717 16.9355C18.4803 17.088 18.1548 17.1636 17.826 17.1552H16.9852V13.5942H17.8252C18.1542 13.5854 18.4801 13.66 18.7725 13.811C19.0342 13.9512 19.248 14.1657 19.3867 14.4275C19.5367 14.7192 19.611 15.0432 19.6027 15.371C19.6102 15.6987 19.5367 16.0235 19.3867 16.3145ZM22.842 13.583V14.9142H25.2472V15.7497H22.842V17.9997H21.855V12.7497H25.3867V13.583H22.842Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export const audioIcon = (
+  <svg
+    width="36"
+    height="36"
+    viewBox="0 0 36 36"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M27.75 6V30H14.8725C14.658 30.0008 14.445 29.955 14.25 29.865C14.085 29.79 13.5 24.75 13.5 24.75C13.5 24.75 8.46001 24.165 8.38501 24C8.29524 23.8048 8.24917 23.5924 8.25001 23.3775V6H27.75Z"
+      fill="#F97A44"
+    />
+    <path
+      d="M14.2498 24V29.865C14.0848 29.79 13.9348 29.685 13.8073 29.5575L8.69227 24.4425C8.56477 24.315 8.45977 24.165 8.38477 24H14.2498Z"
+      fill="#FBDEC4"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M21 12.8074L16.5 13.4502V19.5C16.5 20.3284 15.6605 21 14.625 21C13.5895 21 12.75 20.3284 12.75 19.5C12.75 18.6716 13.5895 18 14.625 18C15.0471 18 15.4366 18.1116 15.75 18.2999V12.7998L21.3438 12.0006L21.75 12V18.75C21.75 19.5784 20.9105 20.25 19.875 20.25C18.8395 20.25 18 19.5784 18 18.75C18 17.9216 18.8395 17.25 19.875 17.25C20.2942 17.25 20.6813 17.3601 20.9936 17.5461L21 12.8074ZM19.875 18C19.2215 18 18.75 18.3772 18.75 18.75C18.75 19.1228 19.2215 19.5 19.875 19.5C20.5285 19.5 21 19.125 21 18.75C21 18.375 20.4792 18 19.875 18ZM14.625 20.25C15.2785 20.25 15.75 19.8728 15.75 19.5C15.75 19.1272 15.2785 18.75 14.625 18.75C13.9715 18.75 13.5 19.1272 13.5 19.5C13.5 19.8728 13.9715 20.25 14.625 20.25Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export const defaultIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="36"
+    height="36"
+    viewBox="0 0 36 36"
+    fill="none"
+  >
+    <path
+      d="M27.75 6V30H14.8725C14.658 30.0007 14.445 29.955 14.25 29.865C14.085 29.79 13.5 24.75 13.5 24.75C13.5 24.75 8.46001 24.165 8.38501 24C8.29524 23.8048 8.24917 23.5924 8.25001 23.3775V6H27.75Z"
+      fill="#343842"
+    />
+    <path
+      d="M14.2498 24V29.865C14.0848 29.79 13.9348 29.685 13.8073 29.5575L8.69227 24.4425C8.56477 24.315 8.45977 24.165 8.38477 24H14.2498Z"
+      fill="#D0D0D0"
+    />
+    <path
+      d="M17.766 16.7933L15.891 15.2933L16.359 14.7067L17.625 15.72V12H18.375V15.72L19.641 14.7067L20.109 15.2933L18.234 16.7933C18.1676 16.8463 18.085 16.8752 18 16.8752C17.915 16.8752 17.8324 16.8463 17.766 16.7933ZM21.75 15.75V17.625C21.75 17.7245 21.7105 17.8198 21.6402 17.8902C21.5698 17.9605 21.4745 18 21.375 18H14.625C14.5255 18 14.4302 17.9605 14.3598 17.8902C14.2895 17.8198 14.25 17.7245 14.25 17.625V15.75H13.5V17.625C13.5 17.9234 13.6185 18.2095 13.8295 18.4205C14.0405 18.6315 14.3266 18.75 14.625 18.75H21.375C21.6734 18.75 21.9595 18.6315 22.1705 18.4205C22.3815 18.2095 22.5 17.9234 22.5 17.625V15.75H21.75Z"
+      fill="white"
+    />
+  </svg>
+);

package/src/components/FileCard/resolveFileByMediaType.tsx

@@ -0,0 +1,86 @@
+import { Image } from '@wix/design-system';
+import { media } from '@wix/sdk';
+import React, { ReactNode } from 'react';
+import { File } from './FileProps';
+import { audioIcon, docIcon, videoIcon, defaultIcon, pdfIcon } from './icons';
+import { memoize } from 'lodash';
+
+export const THUMB_WIDTH = 48;
+export const SMALL_THUMB_WIDTH = 36;
+export const resolveFileByMediaType = memoize(
+  (
+    { mediaType, mediaId }: Pick<File, 'mediaType' | 'mediaId'>,
+    showDetails?: boolean,
+  ) => {
+    let thumbnail: ReactNode;
+    let fileUrl: string | undefined;
+
+    switch (mediaType) {
+      case 'audio': {
+        const audio = media.getAudioUrl(`wix:audio://v1/${mediaId}`);
+        fileUrl = audio.url;
+        thumbnail = audioIcon;
+        break;
+      }
+      case 'video': {
+        const video = media.getVideoUrl(`wix:video://v1/${mediaId}`);
+        fileUrl = video.url;
+        thumbnail = videoIcon;
+        break;
+      }
+      case 'picture': {
+        const image = media.getImageUrl(`wix:image://v1/${mediaId}`);
+        const thumbImage = media.getScaledToFillImageUrl(
+          image.url,
+          THUMB_WIDTH + 20,
+          THUMB_WIDTH + 20,
+          {},
+        );
+
+        fileUrl = image.url;
+        thumbnail = (
+          <Image
+            src={thumbImage}
+            style={{
+              height: showDetails
+                ? `${THUMB_WIDTH}px`
+                : `${SMALL_THUMB_WIDTH}px`,
+              width: showDetails
+                ? `${THUMB_WIDTH}px`
+                : `${SMALL_THUMB_WIDTH}px`,
+              minHeight: showDetails
+                ? `${THUMB_WIDTH}px`
+                : `${SMALL_THUMB_WIDTH}px`,
+              minWidth: showDetails
+                ? `${THUMB_WIDTH}px`
+                : `${SMALL_THUMB_WIDTH}px`,
+              maxHeight: showDetails
+                ? `${THUMB_WIDTH}px`
+                : `${SMALL_THUMB_WIDTH}px`,
+              maxWidth: showDetails
+                ? `${THUMB_WIDTH}px`
+                : `${SMALL_THUMB_WIDTH}px`,
+            }}
+            fit="cover"
+            borderRadius={5}
+          />
+        );
+        break;
+      }
+      case 'document': {
+        const document = media.getDocumentUrl(`wix:document://v1/${mediaId}`);
+        fileUrl = document.url;
+        thumbnail = fileUrl.toLowerCase().endsWith('.pdf') ? pdfIcon : docIcon;
+        break;
+      }
+      default: {
+        const document = media.getDocumentUrl(`wix:document://v1/${mediaId}`);
+        fileUrl = document.url;
+        thumbnail = defaultIcon;
+        break;
+      }
+    }
+
+    return { thumbnail, fileUrl };
+  },
+);

package/src/components/FileCard/useDownloadFile.ts

@@ -0,0 +1,46 @@
+import { File } from './FileProps';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useState } from 'react';
+
+export const useDownloadFile = ({ file }: { file: File }) => {
+  const {
+    httpClient,
+    window,
+    errorHandler: { withErrorHandler, showError },
+    translate: t,
+  } = useWixPatternsContainer();
+
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const downloadFile = async () => {
+    try {
+      setIsDownloading(true);
+
+      const { generateFileDownloadUrl } = await import(
+        '@wix/bex-utils/@wix/ambassador-media-site-media-v1-file-descriptor/http'
+      );
+
+      const { data } = await withErrorHandler(
+        () =>
+          httpClient.request(generateFileDownloadUrl({ fileId: file.mediaId })),
+        {
+          INVALID_ASSET_KEY: false,
+        },
+      );
+
+      const downloadableUrl = data.downloadUrls?.[0]?.url;
+
+      if (!downloadableUrl) {
+        throw new Error(t('cairo.downloadable-url.error.generic'));
+      }
+
+      window.download(downloadableUrl, file.displayName);
+    } catch (error) {
+      showError?.(error);
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return { downloadFile, isDownloading };
+};

package/src/components/FilterContext.ts

@@ -0,0 +1,12 @@
+import { Filter } from '@wix/bex-core';
+import { createContext } from '../createContext';
+import { useContext } from 'react';
+
+const { Provider, Consumer, Context } = createContext<Filter<any>>(
+  'FilterContextProvider',
+);
+
+export const FilterContext = Context;
+export const FilterContextProvider = Provider;
+export const FilterContextConsumer = Consumer;
+export const useFilterContext = <F>() => useContext(FilterContext) as Filter<F>;

package/src/components/FilterRenderingContext.tsx

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+export interface FilterRenderingContext {
+  location?: 'panel' | 'toolbar' | 'modal';
+}
+
+const context = createContext<FilterRenderingContext>({});
+
+export const filterRenderingContext = context;
+export const FilterRenderingContextProvider = context.Provider;
+export const FilterRenderingContextConsumer = context.Consumer;
+
+export const useFilterRenderingContext = () => useContext(context);

package/src/components/FiltersPanel/AddApplyFiltersButton.ts

@@ -0,0 +1,28 @@
+import { FiltersPanelSelectedFiltersSection } from './FiltersPanelSelectedFiltersSection';
+import { FiltersMap, QueryPendingState } from '@wix/bex-core';
+import { ToolbarCollectionState } from '../../state';
+import { DiscardChangesModal } from '../DiscardChangesModal';
+
+export type AddApplyFiltersButtonType = {
+  FiltersPanelSelectedFiltersSection: typeof FiltersPanelSelectedFiltersSection;
+  DiscardChangesModal: typeof DiscardChangesModal;
+  QueryPendingState: typeof QueryPendingState;
+  setStateObject: <T, F extends FiltersMap>(
+    toolbar: ToolbarCollectionState<T, F>,
+  ) => void;
+};
+
+export const AddApplyFiltersButton: AddApplyFiltersButtonType = {
+  FiltersPanelSelectedFiltersSection,
+  DiscardChangesModal,
+  QueryPendingState,
+  setStateObject: <T, F extends FiltersMap>(
+    toolbar: ToolbarCollectionState<T, F>,
+  ) => {
+    toolbar.AddApplyFiltersButton = AddApplyFiltersButton;
+    toolbar.pendingQuery ??= new QueryPendingState({
+      toolbar,
+      container: toolbar.container,
+    });
+  },
+};

package/src/components/FiltersPanel/FilterAccordionTitle.tsx

@@ -0,0 +1,33 @@
+import { Text } from '@wix/design-system';
+import React from 'react';
+import { Filter } from '@wix/bex-core';
+import { observer } from 'mobx-react-lite';
+import { FilterProps } from '../../model';
+import { FilterToolbarState } from '../../providers';
+
+export interface FilterAccordionTitleProps<V> {
+  state: FilterToolbarState;
+  filter: Filter<V>;
+  filterProps: FilterProps<V>;
+}
+
+function _FilterAccordionTitle<V>(props: FilterAccordionTitleProps<V>) {
+  const { state, filterProps } = props;
+  const { accordionItemProps } = filterProps;
+
+  const filter = state.getPendingFilter(props.filter);
+
+  return (
+    <Text
+      dataHook={`accordion-item-title-${filter.name}`}
+      ellipsis
+      weight="normal"
+    >
+      {`${accordionItemProps?.label ?? ''}${
+        filter.size > 0 ? ` (${filter.size})` : ''
+      }`}
+    </Text>
+  );
+}
+
+export const FilterAccordionTitle = observer(_FilterAccordionTitle);

package/src/components/FiltersPanel/FiltersPanel.tsx

@@ -0,0 +1,118 @@
+import {
+  Accordion,
+  SidePanel,
+  SidePanelProps,
+  WixStyleReactDefaultsOverrideProvider,
+} from '@wix/design-system';
+import React, { useState } from 'react';
+import { FiltersMap } from '@wix/bex-core';
+import { observer } from 'mobx-react-lite';
+import { useBuildAccordionItems } from '../../hooks/useBuildAccordionItems';
+import { FiltersPanelFooter } from './FiltersPanelFooter';
+import { FilterRenderingContextProvider } from '../FilterRenderingContext';
+import { FiltersPanelState } from './FiltersPanelState';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useRafRender } from '../../hooks/useRafRender';
+import { CollectionToolbarFiltersState } from '../CollectionToolbarFilters/CollectionToolbarFiltersState';
+
+export interface FiltersPanelProps<T, F extends FiltersMap>
+  extends Partial<SidePanelProps> {
+  state: CollectionToolbarFiltersState<T, F>;
+}
+
+function _FiltersPanel<T, F extends FiltersMap>(
+  props: FiltersPanelProps<T, F>,
+) {
+  const { state, children, ...rest } = props;
+
+  const {
+    toolbar,
+    totalInlineFilters: { value: totalInlineFilters },
+  } = state;
+
+  const accordionItems = useBuildAccordionItems(state);
+
+  const entered = useRafRender();
+
+  const { translate: t } = useWixPatternsContainer();
+
+  const [filtersPanelState] = useState(
+    () =>
+      new FiltersPanelState({
+        toolbar,
+      }),
+  );
+
+  const [filterRenderingContext] = useState(() => ({
+    location: 'panel' as const,
+  }));
+
+  const [wsrDefaults] = useState(() => ({
+    input: {
+      size: 'small' as const,
+    },
+    button: {
+      size: 'small' as const,
+    },
+  }));
+
+  if (!entered) {
+    return null;
+  }
+
+  let child = (
+    <SidePanel
+      dataHook="filters-side-panel"
+      onCloseButtonClick={filtersPanelState.onCloseButtonClick}
+      width="100%"
+      {...rest}
+    >
+      <SidePanel.Header
+        title={
+          state.panelTitle.value ??
+          (totalInlineFilters != null
+            ? t('cairo.filtersPanel.header', {
+                num: totalInlineFilters,
+              })
+            : undefined)
+        }
+      />
+
+      <div
+        data-hook="filters-panel-scroll-container"
+        style={{ overflowY: 'auto' }}
+      >
+        <Accordion
+          dataHook="filters-panel-accordion"
+          skin="light"
+          hideShadow
+          multiple
+          items={accordionItems}
+        />
+      </div>
+      <SidePanel.Footer noPadding>
+        <FiltersPanelFooter
+          state={toolbar}
+          onClearButtonClicked={state.onClearButtonClicked}
+        />
+      </SidePanel.Footer>
+      {children}
+    </SidePanel>
+  );
+
+  child = (
+    <FilterRenderingContextProvider value={filterRenderingContext}>
+      {child}
+    </FilterRenderingContextProvider>
+  );
+
+  child = (
+    <WixStyleReactDefaultsOverrideProvider value={wsrDefaults}>
+      {child}
+    </WixStyleReactDefaultsOverrideProvider>
+  );
+
+  return child;
+}
+
+export const FiltersPanel = observer(_FiltersPanel);