@wix/patterns 1.358.0 → 1.359.0

package/src/components/CollectionToolbar/CollectionToolbar.tsx

@@ -51,6 +51,7 @@ export interface CollectionToolbarProps<T, F extends FiltersMap> {
     F
   >['tableGridSwitchButton'];
   exportButton?: ToolbarCollectionBaseProps<T, F>['exportButton'];
+  importButton?: ToolbarCollectionBaseProps<T, F>['importButton'];
   primaryActionButton?: ToolbarCollectionBaseProps<T, F>['primaryActionButton'];
   dragAndDropReorderModeToolbar?: ToolbarCollectionBaseProps<
     T,
@@ -75,6 +76,7 @@ function _CollectionToolbar<T, F extends FiltersMap>(
     filters: filtersProp,
     tableGridSwitchButton,
     exportButton,
+    importButton,
     dragAndDropReorderModeToolbar,
     primaryActionButton,
     secondaryActions,
@@ -267,6 +269,7 @@ function _CollectionToolbar<T, F extends FiltersMap>(
           multiLevelSorting={multiLevelSorting}
           customColumns={isMobile || isPanelLayout ? undefined : customColumns}
           exportButton={exportButton}
+          importButton={importButton}
           search={searchElement}
           showCustomColumnsOnTheLeft={showCustomColumnsOnTheLeft}
           left={left}

package/src/components/CollectionToolbar/CollectionToolbarActionsGroupProps.ts

@@ -11,6 +11,7 @@ export interface CollectionToolbarActionsGroupProps {
   customColumns?: ReactElement | null;
   multiLevelSorting?: ReactElement;
   exportButton?: ReactElement;
+  importButton?: ReactElement;
   search?: ToolbarBaseProps['search'];
   showCustomColumnsOnTheLeft?: boolean;
   hasTabs?: boolean;

package/src/components/CollectionToolbar/CollectionToolbarActionsGroupResponsiveLayout.tsx

@@ -20,6 +20,7 @@ export function CollectionToolbarActionsGroupResponsiveLayout(
     multiLevelSorting,
     customColumns,
     exportButton,
+    importButton,
     search,
     showCustomColumnsOnTheLeft,
   } = props;
@@ -65,6 +66,10 @@ export function CollectionToolbarActionsGroupResponsiveLayout(
           cloneElement(exportButton, {
             toolbarType: 'default',
           })}
+        {importButton &&
+          cloneElement(importButton, {
+            toolbarType: 'default',
+          })}
         {customColumns && !showCustomColumnsOnTheLeft && customColumns}
       </ToolbarGroupScrollWidthBox>
 

package/src/components/CollectionToolbar/CollectionToolbarActionsToolbarItemsGroup.tsx

@@ -20,6 +20,7 @@ function _CollectionToolbarActionsToolbarItemsGroup(
     multiLevelSorting,
     customColumns,
     exportButton,
+    importButton,
     search,
     showCustomColumnsOnTheLeft,
   } = props;
@@ -74,6 +75,13 @@ function _CollectionToolbarActionsToolbarItemsGroup(
               })}
             </TableToolbar.Item>
           )}
+          {importButton && (
+            <TableToolbar.Item>
+              {cloneElement(importButton, {
+                toolbarType: 'default',
+              })}
+            </TableToolbar.Item>
+          )}
           {customColumns && !showCustomColumnsOnTheLeft && (
             <TableToolbar.Item>{customColumns}</TableToolbar.Item>
           )}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter2095154025";
+var _namespace_ = "SearchOrCustomFilter1002994317";
 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":"SearchOrCustomFilter2095154025__root","search":"SearchOrCustomFilter2095154025__search","searchMobile":"SearchOrCustomFilter2095154025__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1002994317__root","search":"SearchOrCustomFilter1002994317__search","searchMobile":"SearchOrCustomFilter1002994317__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/useIsCollectionToolbarExists.tsx

@@ -18,6 +18,7 @@ export const useIsCollectionToolbarExists = <T, F extends FiltersMap>(
     filters,
     tableGridSwitchButton,
     exportButton,
+    importButton,
     primaryActionButton,
     secondaryActions,
     moreActions,
@@ -31,6 +32,7 @@ export const useIsCollectionToolbarExists = <T, F extends FiltersMap>(
     customColumns ||
     multiLevelSorting ||
     exportButton ||
+    importButton ||
     primaryActionButton ||
     secondaryActions ||
     moreActions ||

package/src/components/CollectionToolbars/CollectionToolbars.tsx

@@ -35,6 +35,7 @@ export interface CollectionToolbarsProps<T, F extends FiltersMap>
     | 'summaryBar'
     | 'tableGridSwitchButton'
     | 'exportButton'
+    | 'importButton'
     | 'primaryActionButton'
     | 'secondaryActions'
     | 'moreActions'

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

package/src/components/CustomDrawerLayout.tsx

@@ -11,6 +11,7 @@ export interface CustomDrawerLayoutProps {
   primaryButtonProps?: Partial<Omit<ButtonProps, 'as'>>;
   primaryButtonOnClick?: () => void;
   secondaryButtonOnClick?: () => void;
+  removeContentPadding?: boolean;
 }
 
 export function CustomDrawerLayout(props: CustomDrawerLayoutProps) {
@@ -24,21 +25,21 @@ export function CustomDrawerLayout(props: CustomDrawerLayoutProps) {
     primaryButtonProps,
     primaryButtonOnClick,
     secondaryButtonOnClick,
+    removeContentPadding,
   } = props;
 
   return (
     <Box
       dataHook={dataHook}
       direction="vertical"
-      padding="SP3"
+      padding="SP3 0"
       backgroundColor="white"
       borderRadius="12px"
     >
       {title && (
         <Box
           direction="vertical"
-          paddingTop="SP1"
-          paddingBottom="SP1"
+          padding="SP1 SP3"
           marginBottom="SP4"
           align="center"
         >
@@ -48,11 +49,15 @@ export function CustomDrawerLayout(props: CustomDrawerLayoutProps) {
         </Box>
       )}
 
-      <Box flex={1} marginBottom="SP4">
+      <Box
+        flex={1}
+        marginBottom="SP4"
+        padding={removeContentPadding ? undefined : '0 SP3'}
+      >
         {children}
       </Box>
 
-      <Box direction="vertical" gap="SP4">
+      <Box direction="vertical" gap="SP4" padding="0 SP3">
         {primaryButtonText && (
           <Button
             dataHook="baseModalLayout-primary-button"

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle3887572879";
+var _namespace_ = "DragHandle2342184303";
 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":"DragHandle3887572879__root"};
+export var classes = {"root":"DragHandle2342184303__root"};
 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_ = "EntityPagePlain673223306";
+var _namespace_ = "EntityPagePlain1608197167";
 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":"EntityPagePlain673223306__root"};
+export var classes = {"root":"EntityPagePlain1608197167__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_ = "Fade4075889701";
+var _namespace_ = "Fade1887979394";
 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":"Fade4075889701__root"};
+export var classes = {"root":"Fade1887979394__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Grid/Grid.tsx

@@ -93,6 +93,7 @@ function _Grid<T, F extends FiltersMap = FiltersMap>(props: GridProps<T, F>) {
     cardProps,
     dataHook,
     exportModal,
+    importModal,
     sections,
   } = props;
 
@@ -145,6 +146,7 @@ function _Grid<T, F extends FiltersMap = FiltersMap>(props: GridProps<T, F>) {
         </GridPlaceholderStates>
       </ToolbarCollection>
       {exportModal ?? toolbar.featuredComponents.exportModal.value}
+      {importModal ?? toolbar.featuredComponents.importModal.value}
     </CollectionCard>
   );
 }

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

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

package/src/components/ImportButton/ImportButton.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from 'react';
+import { FiltersMap, ModalState } from '@wix/bex-core';
+import { Button, Drawer, Modal } from '@wix/design-system';
+import { DownloadImport } from '@wix/wix-ui-icons-common';
+import { observer, Observer } from 'mobx-react-lite';
+import { ImportButtonModalLayout } from './ImportButtonModalLayout';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
+import { ImportButtonProps } from './ImportProps';
+import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
+import { useIsMobile } from '../../hooks/useIsMobile';
+
+function _ImportButton<T, F extends FiltersMap>(props: ImportButtonProps) {
+  const {
+    toolbarType = 'default',
+    fields,
+    bulkUploadItems,
+    backup,
+    batchSize,
+  } = props;
+
+  const table = useToolbarCollectionContext<T, F>();
+  const {
+    toolbar: { responsive },
+  } = table;
+
+  const { translate: t } = useWixPatternsContainer();
+  const [state] = useState(() => (table.importState ??= new ModalState()));
+  const isMobile = useIsMobile();
+
+  useEffect(() => {
+    table.featuredComponents.importModal.set(
+      <Observer>
+        {() => {
+          const child = (
+            <ImportButtonModalLayout
+              importModalState={state}
+              fields={fields}
+              bulkUploadItems={bulkUploadItems}
+              backup={backup}
+              batchSize={batchSize}
+            />
+          );
+
+          if (isMobile) {
+            return (
+              <Drawer
+                dataHook="import-modal"
+                open={state.isOpen}
+                onClose={state.requestClose}
+              >
+                {child}
+              </Drawer>
+            );
+          }
+
+          return (
+            <Modal
+              onRequestClose={state.requestClose}
+              isOpen={state.isOpen}
+              dataHook="import-modal"
+            >
+              {child}
+            </Modal>
+          );
+        }}
+      </Observer>,
+    );
+
+    return () => {
+      table.featuredComponents.importModal.set(null);
+    };
+  }, []);
+
+  return (
+    <div data-hook="import-container">
+      {toolbarType === 'default' ? (
+        <ResponsiveButton
+          state={responsive.actions}
+          dataHook="import-button"
+          onClick={state.open}
+          icon={<DownloadImport />}
+        >
+          {t('cairo.import.import')}
+        </ResponsiveButton>
+      ) : (
+        <Button
+          skin="standard"
+          priority="secondary"
+          size="small"
+          ellipsis
+          prefixIcon={<DownloadImport />}
+          dataHook="import-button"
+          onClick={state.open}
+        >
+          {t('cairo.import.import')}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export const ImportButton = observer(_ImportButton);

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

@@ -0,0 +1,18 @@
+import { ButtonUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import ImportModalUniDriver from './ImportModal.uni.driver';
+
+export function ImportButtonUniDriver(base: UniDriver, body: UniDriver) {
+  const getButton = () => ButtonUniDriver(base, body);
+  const importModal = ImportModalUniDriver(base, body);
+
+  return {
+    ...importModal,
+    /** Clicks the button to open import modal */
+    click: () => getButton().click(),
+    /** Indicates whether import button exists in the table toolbar */
+    exists: () => getButton().exists(),
+  };
+}
+
+export default ImportButtonUniDriver;

package/src/components/ImportButton/ImportButtonModalLayout.tsx

@@ -0,0 +1,94 @@
+import { Box, CustomModalLayout } from '@wix/design-system';
+import { getImportModalStepProps } from './getImportModalStepProps';
+import React, { useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useCreateImport } from '@wix/bex-core';
+import { ImportButtonModalLayoutProps } from './ImportProps';
+import { addEventListener } from '@wix/bex-core/util';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import { CustomDrawerLayout } from '../CustomDrawerLayout';
+import { ImportStepper } from './ImportStepper';
+
+function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
+  const {
+    fields,
+    bulkUploadItems,
+    backup,
+    batchSize,
+    importModalState,
+    ...rest
+  } = props;
+
+  const isMobile = useIsMobile();
+
+  const createImport = useCreateImport({
+    fields,
+    bulkUploadItems,
+    backup,
+    batchSize,
+    importModalState,
+  });
+
+  const [state] = useState(() => createImport());
+
+  const {
+    onRequestClose,
+    children,
+    removeContentPadding,
+    ...customModalLayoutProps
+  } = getImportModalStepProps({
+    state,
+  });
+
+  const wrappedChildren =
+    state.currentStep !== 'progress' ? (
+      <Box direction="vertical" gap="SP3" width="100%">
+        <ImportStepper
+          state={state}
+          removeContentPadding={!removeContentPadding}
+        />
+        {children}
+      </Box>
+    ) : (
+      children
+    );
+
+  useEffect(() => {
+    if (onRequestClose) {
+      return addEventListener(
+        importModalState.events,
+        'requestClose',
+        onRequestClose,
+      );
+    }
+
+    return undefined;
+  }, [onRequestClose]);
+
+  useEffect(() => state.init(), []);
+
+  if (isMobile) {
+    return (
+      <CustomDrawerLayout
+        dataHook="import-modal-layout"
+        removeContentPadding={removeContentPadding}
+        {...rest}
+        {...customModalLayoutProps}
+        children={wrappedChildren}
+      />
+    );
+  }
+
+  return (
+    <CustomModalLayout
+      width="600px"
+      dataHook="import-modal-layout"
+      removeContentPadding={removeContentPadding}
+      {...rest}
+      {...customModalLayoutProps}
+      children={wrappedChildren}
+    />
+  );
+}
+
+export const ImportButtonModalLayout = observer(_ImportButtonModalLayout);

package/src/components/ImportButton/ImportModal.tsx

@@ -0,0 +1,46 @@
+import { Drawer, Modal } from '@wix/design-system';
+import React, { useState } from 'react';
+import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
+import { FiltersMap, ModalState } from '@wix/bex-core';
+import { ImportButtonModalLayout } from './ImportButtonModalLayout';
+import { observer } from 'mobx-react-lite';
+import { ImportModalProps } from './ImportProps';
+import { useIsMobile } from '../../hooks/useIsMobile';
+
+function _ImportModal<T, F extends FiltersMap>(props: ImportModalProps) {
+  const table = useToolbarCollectionContext<T, F>();
+
+  const [importModalState] = useState(
+    () => (table.importState ??= new ModalState()),
+  );
+
+  const isMobile = useIsMobile();
+
+  const child = (
+    <ImportButtonModalLayout {...props} importModalState={importModalState} />
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer
+        dataHook="import-modal"
+        open={importModalState.isOpen}
+        onClose={importModalState.close}
+      >
+        {child}
+      </Drawer>
+    );
+  }
+
+  return (
+    <Modal
+      onRequestClose={importModalState.close}
+      isOpen={importModalState.isOpen}
+      dataHook="import-modal"
+    >
+      {child}
+    </Modal>
+  );
+}
+
+export const ImportModal = observer(_ImportModal);

package/src/components/ImportButton/ImportModal.uni.driver.ts

@@ -0,0 +1,108 @@
+import { UniDriver, waitFor } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+import {
+  CounterBadgeUniDriver,
+  CustomModalLayoutUniDriver,
+  DropdownUniDriver,
+  ModalUniDriver,
+  TextUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+export function ImportModalUniDriver(base: UniDriver, body: UniDriver) {
+  const modalBase = () => body.$('.portal-import-modal');
+  const modalLayoutBase = () => body.$('[data-hook="import-modal-layout"]');
+  const footerBase = () =>
+    modalLayoutBase().$('[data-hook="import-modal-footer-text"]');
+
+  const getModal = () => ModalUniDriver(modalBase(), modalBase());
+
+  const getModalLayout = () =>
+    CustomModalLayoutUniDriver(modalLayoutBase(), body);
+
+  const getFooterText = async () =>
+    (await TextUniDriver(footerBase(), body)).getText();
+
+  const footerExists = () => footerBase().exists();
+
+  const fileInputBase = () =>
+    modalLayoutBase().$('[data-hook="import-file-input"]');
+  const configurationStepBase = () =>
+    modalLayoutBase().$('[data-hook="import-mapping-step"]');
+  const summaryStepBase = () =>
+    modalLayoutBase().$('[data-hook="import-summary-step"]');
+  const progressLabelBase = () =>
+    modalLayoutBase().$('[data-hook="import-progress-label"]');
+
+  return {
+    wait: (timeout?: number) => base.wait(timeout),
+    ...baseUniDriverFactory(base),
+    getModal,
+    getModalLayout,
+    waitModalClosed: (timeout?: number) =>
+      waitFor(async () => !(await getModalLayout().exists()), timeout),
+    clickPrimaryAction: async () =>
+      (await getModalLayout().getPrimaryButtonDriver()).click(),
+    getPrimaryActionText: async () =>
+      (await getModalLayout().getPrimaryButtonDriver()).getButtonTextContent(),
+    isPrimaryButtonDisabled: async () =>
+      (await getModalLayout().getPrimaryButtonDriver()).isButtonDisabled(),
+    getSecondaryButtonText: async () =>
+      (
+        await getModalLayout().getSecondaryButtonDriver()
+      ).getButtonTextContent(),
+    clickSecondaryAction: async () =>
+      (await getModalLayout().getSecondaryButtonDriver()).click(),
+    clickCloseButton: () => getModalLayout().clickCloseButton(),
+    getModalTitle: () => getModalLayout().getTitleText(),
+    getSubtitleText: () => getModalLayout().getSubtitleText(),
+    getFooterText,
+    footerExists,
+
+    isUploadStepVisible: () => fileInputBase().exists(),
+    isConfigurationStepVisible: () => configurationStepBase().exists(),
+    isSummaryStepVisible: () => summaryStepBase().exists(),
+
+    /** Simulates selecting a file in the upload step */
+    uploadFile: async (file: File) => {
+      const nativeInput: HTMLInputElement = await fileInputBase()
+        .$('input[type="file"]')
+        .getNative();
+      Object.defineProperty(nativeInput, 'files', { value: [file] });
+      nativeInput.dispatchEvent(new Event('change', { bubbles: true }));
+    },
+
+    getUploadError: () =>
+      modalLayoutBase().$('[data-hook="import-upload-error"]').text(),
+    uploadErrorExists: () =>
+      modalLayoutBase().$('[data-hook="import-upload-error"]').exists(),
+
+    getProgressLabel: () => progressLabelBase().text(),
+    progressLabelExists: () => progressLabelBase().exists(),
+
+    getPartialErrorText: () =>
+      modalLayoutBase().$('[data-hook="import-partial-error"]').text(),
+    partialErrorExists: () =>
+      modalLayoutBase().$('[data-hook="import-partial-error"]').exists(),
+
+    getErrorMessageText: () =>
+      modalLayoutBase().$('[data-hook="import-error-message"]').text(),
+    errorMessageExists: () =>
+      modalLayoutBase().$('[data-hook="import-error-message"]').exists(),
+
+    /** Get the CounterBadge driver for the columns found counter */
+    getColumnsFoundCounter: () =>
+      CounterBadgeUniDriver(
+        modalLayoutBase().$('[data-hook="import-columns-found-counter"]'),
+        body,
+      ),
+
+    /** Get the Dropdown driver for a specific CSV header mapping */
+    getMappingDropdown: (header: string) =>
+      DropdownUniDriver(
+        modalLayoutBase().$(`[data-hook="import-mapping-${header}"]`),
+        body,
+      ),
+  };
+}
+
+export default ImportModalUniDriver;