import React from 'react';
import { Loader } from '@wix/design-system';
import { defineCellType } from '../../types';
import { MediaGalleryView } from './View';
const mediaGalleryEditFactory = () => import(/* webpackChunkName: "EditableTableMediaGalleryEdit" */ './Edit');
if (typeof process !== 'undefined' && process.env.STORYBOOK_VISUAL_E2E !== 'true') {
    mediaGalleryEditFactory();
}
const LazyMediaGalleryEdit = React.lazy(mediaGalleryEditFactory);
const MediaGalleryEdit = (props) => (React.createElement(React.Suspense, { fallback: React.createElement(Loader, { size: "tiny" }) },
    React.createElement(LazyMediaGalleryEdit, { ...props })));
export const mediaGalleryCellType = defineCellType({
    type: 'mediaGallery',
    ViewComponent: MediaGalleryView,
    EditComponent: MediaGalleryEdit,
    serialize: (value) => (value ?? []).map((item) => item.src).join(', '),
    clearable: true,
    showEditWhenFocused: true,
    // Returning undefined blocks all key presses from starting type-to-edit, but
    // the presence of the function sets the :typeToEdit CSS modifier which keeps
    // the selection borders visible while the cell is in edit mode (double border).
    onTypeToEdit: () => undefined,
});
//# sourceMappingURL=index.js.map