@wix/patterns-fields 1.0.0

package/dist/esm/components/media-gallery/media-gallery-dialog/add-link-modal.js

@@ -0,0 +1,74 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Modal, CustomModalLayout, BounceAnimation, Box, FormField, Input, RadioGroup, } from '@wix/design-system';
+import { useTranslations } from '../../../hooks';
+var LinkTarget;
+(function (LinkTarget) {
+    LinkTarget["newTab"] = "_blank";
+    LinkTarget["currentTab"] = "_self";
+})(LinkTarget || (LinkTarget = {}));
+export const AddLinkModal = ({ isOpen, onClose, link, onSave, mediaType, }) => {
+    const { t } = useTranslations();
+    const [url, setUrl] = useState(link?.url ?? '');
+    const [target, setTarget] = useState(link?.target ?? '_blank');
+    const [error, setError] = useState(false);
+    const [animateUrlError, setAnimateUrlError] = useState(false);
+    useEffect(() => {
+        setUrl(link?.url ?? '');
+        setTarget(link?.target ?? '_blank');
+        setError(false);
+        setAnimateUrlError(false);
+    }, [link, isOpen]);
+    const handleOnSave = useCallback(() => {
+        const normalizedUrl = normalizeUrl(url);
+        if (normalizedUrl && !isValidUrl(normalizedUrl)) {
+            setError(true);
+            setAnimateUrlError(true);
+            return;
+        }
+        onSave(normalizedUrl
+            ? {
+                url: normalizedUrl,
+                text: normalizedUrl,
+                target: target,
+            }
+            : undefined);
+        onClose();
+    }, [url, target, onSave, onClose]);
+    const onEndAnimateUrlError = useCallback(() => setAnimateUrlError(false), []);
+    return (React.createElement(Modal, { isOpen: isOpen, onRequestClose: onClose, screen: "desktop" },
+        React.createElement(CustomModalLayout, { title: mediaType === 'Video'
+                ? t('CMS.mediaGallery.addLink.titleVideo')
+                : t('CMS.mediaGallery.addLink.titleImage'), subtitle: mediaType === 'Video'
+                ? t('CMS.mediaGallery.addLink.subtitleVideo')
+                : t('CMS.mediaGallery.addLink.subtitleImage'), onCloseButtonClick: onClose, primaryButtonText: t('CMS.mediaGallery.addLink.save'), primaryButtonOnClick: handleOnSave, secondaryButtonText: t('CMS.mediaGallery.addLink.cancel'), secondaryButtonOnClick: onClose, width: "600px", content: React.createElement(Box, { direction: "vertical", gap: "SP2" },
+                React.createElement(BounceAnimation, { active: animateUrlError, onEnd: onEndAnimateUrlError },
+                    React.createElement(FormField, { required: true, label: t('CMS.mediaGallery.addLink.urlLabel'), status: error ? 'error' : undefined, statusMessage: error ? t('CMS.mediaGallery.addLink.invalidUrl') : undefined },
+                        React.createElement(Input, { value: url, onChange: (e) => {
+                                setUrl(e.target.value);
+                                setError(false);
+                            }, placeholder: "https://" }))),
+                React.createElement(FormField, { label: t('CMS.mediaGallery.addLink.targetLabel') },
+                    React.createElement(RadioGroup, { value: target, onChange: (value) => setTarget(value) },
+                        React.createElement(RadioGroup.Radio, { value: LinkTarget.newTab }, t('CMS.mediaGallery.addLink.newTab')),
+                        React.createElement(RadioGroup.Radio, { value: LinkTarget.currentTab }, t('CMS.mediaGallery.addLink.currentTab'))))) })));
+};
+function normalizeUrl(url) {
+    const trimmed = url.trim();
+    if (!trimmed) {
+        return '';
+    }
+    if (/^https?:\/\//i.test(trimmed)) {
+        return trimmed;
+    }
+    return `https://${trimmed}`;
+}
+function isValidUrl(url) {
+    try {
+        new URL(url);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+//# sourceMappingURL=add-link-modal.js.map

package/dist/esm/components/media-gallery/media-gallery-dialog/add-link-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-link-modal.js","sourceRoot":"","sources":["../../../../../src/components/media-gallery/media-gallery-dialog/add-link-modal.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/media-gallery/media-gallery-dialog/add-media-button.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Button, Loader } from '@wix/design-system';
+import { Add as AddIcon } from '@wix/wix-ui-icons-common';
+import { useTranslations } from '../../../hooks';
+import { useAddMediaControl } from './hooks';
+export const AddMediaButton = ({ onAddMedia, }) => {
+    const { t } = useTranslations();
+    const { onOpen, isLoading } = useAddMediaControl(onAddMedia);
+    return (React.createElement(Button, { prefixIcon: isLoading ? undefined : React.createElement(AddIcon, null), onClick: onOpen, dataHook: "media-gallery-add-media-button" }, isLoading ? React.createElement(Loader, { size: "tiny" }) : t('CMS.mediaGallery.addMedia')));
+};
+//# sourceMappingURL=add-media-button.js.map

package/dist/esm/components/media-gallery/media-gallery-dialog/add-media-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-media-button.js","sourceRoot":"","sources":["../../../../../src/components/media-gallery/media-gallery-dialog/add-media-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,GAAG,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAO7C,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,UAAU,GACX,EAAE,EAAE;IACH,MAAM,EAAE,CAAC,EAAE,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAE7D,OAAO,CACL,oBAAC,MAAM,IACL,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAC,OAAO,OAAG,EAC/C,OAAO,EAAE,MAAM,EACf,QAAQ,EAAC,gCAAgC,IAExC,SAAS,CAAC,CAAC,CAAC,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAC7D,CACV,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/media-gallery/media-gallery-dialog/content-keys.js

@@ -0,0 +1,40 @@
+export default {
+    emptySearchResultsTitle: 'CMS.mediaGallery.dialog.emptySearchResultsTitle',
+    emptySearchResultsSubtitle: 'CMS.mediaGallery.dialog.emptySearchResultsSubtitle',
+    modalDone: 'CMS.mediaGallery.dialog.modalDone',
+    modalTitle: 'CMS.mediaGallery.dialog.modalTitle',
+    selectionSelectAll: 'CMS.mediaGallery.dialog.selectionSelectAll',
+    selectionDeselectAll: 'CMS.mediaGallery.dialog.selectionDeselectAll',
+    selectionDelete: 'CMS.mediaGallery.dialog.selectionDelete',
+    selectionSelected: 'CMS.mediaGallery.dialog.selectionSelected',
+    sortLabel: 'CMS.mediaGallery.dialog.sortLabel',
+    sortByTitleAsc: 'CMS.mediaGallery.dialog.sortByTitleAsc',
+    sortByTitleDesc: 'CMS.mediaGallery.dialog.sortByTitleDesc',
+    sortByFilenameAsc: 'CMS.mediaGallery.dialog.sortByFilenameAsc',
+    sortByFilenameDesc: 'CMS.mediaGallery.dialog.sortByFilenameDesc',
+    searchPlaceholder: 'CMS.mediaGallery.dialog.searchPlaceholder',
+    settingsTitle: 'CMS.mediaGallery.dialog.settingsTitle',
+    settingsNewItemsDirectionLabel: 'CMS.mediaGallery.dialog.settingsNewItemsDirectionLabel',
+    settingsNewItemsDirectionStart: 'CMS.mediaGallery.dialog.settingsNewItemsDirectionStart',
+    settingsNewItemsDirectionEnd: 'CMS.mediaGallery.dialog.settingsNewItemsDirectionEnd',
+    settingsNewItemsTitleLabel: 'CMS.mediaGallery.dialog.settingsNewItemsTitleLabel',
+    settingsNewItemsTitleEmpty: 'CMS.mediaGallery.dialog.settingsNewItemsTitleEmpty',
+    settingsNewItemsTitleFilename: 'CMS.mediaGallery.dialog.settingsNewItemsTitleFilename',
+    itemTitleLabel: 'CMS.mediaGallery.dialog.itemTitleLabel',
+    itemTitlePlaceholder: 'CMS.mediaGallery.dialog.itemTitlePlaceholder',
+    itemDescriptionLabel: 'CMS.mediaGallery.dialog.itemDescriptionLabel',
+    itemDescriptionPlaceholder: 'CMS.mediaGallery.dialog.itemDescriptionPlaceholder',
+    itemAltLabel: 'CMS.mediaGallery.dialog.itemAltLabel',
+    itemAltTooltip: 'CMS.mediaGallery.dialog.itemAltTooltip',
+    itemAltPlaceholder: 'CMS.mediaGallery.dialog.itemAltPlaceholder',
+    itemDeleteTooltip: 'CMS.mediaGallery.dialog.itemDeleteTooltip',
+    itemFocalPointTooltip: 'CMS.mediaGallery.dialog.itemFocalPointTooltip',
+    masonryLayoutTooltip: 'CMS.mediaGallery.dialog.masonryLayoutTooltip',
+    gridLayoutTooltip: 'CMS.mediaGallery.dialog.gridLayoutTooltip',
+    modalDoneEmpty: 'CMS.mediaGallery.dialog.modalDoneEmpty',
+    externalLinkLabel: 'CMS.mediaGallery.dialog.externalLinkLabel',
+    externalLinkButtonEdit: 'CMS.mediaGallery.dialog.externalLinkButtonEdit',
+    externalLinkButtonAdd: 'CMS.mediaGallery.dialog.externalLinkButtonAdd',
+    externalLinkTextPlaceholder: 'CMS.mediaGallery.dialog.externalLinkTextPlaceholder',
+};
+//# sourceMappingURL=content-keys.js.map

package/dist/esm/components/media-gallery/media-gallery-dialog/content-keys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-keys.js","sourceRoot":"","sources":["../../../../../src/components/media-gallery/media-gallery-dialog/content-keys.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,uBAAuB,EAAE,iDAAiD;IAC1E,0BAA0B,EACxB,oDAAoD;IACtD,SAAS,EAAE,mCAAmC;IAC9C,UAAU,EAAE,oCAAoC;IAChD,kBAAkB,EAAE,4CAA4C;IAChE,oBAAoB,EAAE,8CAA8C;IACpE,eAAe,EAAE,yCAAyC;IAC1D,iBAAiB,EAAE,2CAA2C;IAC9D,SAAS,EAAE,mCAAmC;IAC9C,cAAc,EAAE,wCAAwC;IACxD,eAAe,EAAE,yCAAyC;IAC1D,iBAAiB,EAAE,2CAA2C;IAC9D,kBAAkB,EAAE,4CAA4C;IAChE,iBAAiB,EAAE,2CAA2C;IAC9D,aAAa,EAAE,uCAAuC;IACtD,8BAA8B,EAC5B,wDAAwD;IAC1D,8BAA8B,EAC5B,wDAAwD;IAC1D,4BAA4B,EAC1B,sDAAsD;IACxD,0BAA0B,EACxB,oDAAoD;IACtD,0BAA0B,EACxB,oDAAoD;IACtD,6BAA6B,EAC3B,uDAAuD;IACzD,cAAc,EAAE,wCAAwC;IACxD,oBAAoB,EAAE,8CAA8C;IACpE,oBAAoB,EAAE,8CAA8C;IACpE,0BAA0B,EACxB,oDAAoD;IACtD,YAAY,EAAE,sCAAsC;IACpD,cAAc,EAAE,wCAAwC;IACxD,kBAAkB,EAAE,4CAA4C;IAChE,iBAAiB,EAAE,2CAA2C;IAC9D,qBAAqB,EAAE,+CAA+C;IACtE,oBAAoB,EAAE,8CAA8C;IACpE,iBAAiB,EAAE,2CAA2C;IAC9D,cAAc,EAAE,wCAAwC;IACxD,iBAAiB,EAAE,2CAA2C;IAC9D,sBAAsB,EAAE,gDAAgD;IACxE,qBAAqB,EAAE,+CAA+C;IACtE,2BAA2B,EACzB,qDAAqD;CACxD,CAAC"}

package/dist/esm/components/media-gallery/media-gallery-dialog/hooks.js

@@ -0,0 +1,69 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useMediaControl } from '../../media-control';
+import { MEDIA_TYPES } from '../../../utils/media-utils';
+import { convertMediaControlItemToOrganizeMediaItem } from './utils';
+import contentKeys from './content-keys';
+export const useMediaGalleryDialog = ({ initialOpen, items, ...rest }) => {
+    const [isOpen, setIsOpen] = useState(Boolean(initialOpen));
+    const openMediaGalleryDialog = useCallback(() => setIsOpen(true), []);
+    const mediaGalleryDialogItems = useMemo(() => items || [], [items]);
+    const onMediaGalleryDialogClose = useCallback(() => {
+        setIsOpen(false);
+        rest.onClose?.();
+    }, [rest.onClose]);
+    return {
+        openMediaGalleryDialog,
+        isOpen,
+        onClose: onMediaGalleryDialogClose,
+        items: mediaGalleryDialogItems,
+        ...rest,
+    };
+};
+/**
+ * Opens media manager (multi-select) to add new items to the gallery.
+ *
+ * Note: In cms-web, defaultNewItemName flows from Redux into this hook.
+ * In patterns-fields, we don't have Redux for preferences, so the conversion
+ * always uses mediaId for `name`. The dialog's `onAddMedia` callback
+ * handles the EMPTY case by calling `setItemsEmptyTitles`.
+ */
+export const useAddMediaControl = (onAddMedia) => {
+    const onChange = useCallback((value) => {
+        onAddMedia?.(value
+            .map((val) => convertMediaControlItemToOrganizeMediaItem(val))
+            .filter(Boolean));
+    }, [onAddMedia]);
+    const { callMedia, loading } = useMediaControl({
+        multiSelect: true,
+        mediaType: MEDIA_TYPES.GALLERY,
+        onChange,
+    });
+    return {
+        onOpen: useCallback(() => callMedia(), [callMedia]),
+        isLoading: loading,
+    };
+};
+/** Opens media manager (single-select) to replace one item */
+export const useReplaceMediaControl = (onMediaReplaced) => {
+    const onChange = useCallback((value) => {
+        const newItem = convertMediaControlItemToOrganizeMediaItem(value);
+        if (newItem) {
+            onMediaReplaced?.(newItem);
+        }
+    }, [onMediaReplaced]);
+    const { callMedia, loading } = useMediaControl({
+        multiSelect: false,
+        mediaType: MEDIA_TYPES.ALL_MEDIA,
+        onChange,
+    });
+    return {
+        onOpen: useCallback(() => callMedia(), [callMedia]),
+        isLoading: loading,
+    };
+};
+/** Product requirement: show different text on Done button if there are no items yet */
+export const useContentKeys = (items) => useMemo(() => ({
+    ...contentKeys,
+    modalDone: items.length === 0 ? contentKeys.modalDoneEmpty : contentKeys.modalDone,
+}), [items]);
+//# sourceMappingURL=hooks.js.map

package/dist/esm/components/media-gallery/media-gallery-dialog/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../../../src/components/media-gallery/media-gallery-dialog/hooks.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/media-gallery/media-gallery-dialog/item-actions.js

@@ -0,0 +1,14 @@
+import React, { useCallback } from 'react';
+import { Box, Button, Loader } from '@wix/design-system';
+import { useTranslations } from '../../../hooks';
+import { useReplaceMediaControl } from './hooks';
+export const ItemActions = ({ item, onReplace, }) => {
+    const { t } = useTranslations();
+    const onMediaReplaced = useCallback((newItem) => {
+        onReplace({ itemId: item.id ?? '', data: newItem });
+    }, [item.id, onReplace]);
+    const { onOpen, isLoading } = useReplaceMediaControl(onMediaReplaced);
+    return (React.createElement(Box, { align: "center", verticalAlign: "middle", gap: "SP1", paddingRight: "SP1" },
+        React.createElement(Button, { priority: "secondary", size: "small", onClick: onOpen, dataHook: "media-gallery-replace-item" }, isLoading ? React.createElement(Loader, { size: "tiny" }) : t('CMS.mediaGallery.replaceItem'))));
+};
+//# sourceMappingURL=item-actions.js.map

package/dist/esm/components/media-gallery/media-gallery-dialog/item-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-actions.js","sourceRoot":"","sources":["../../../../../src/components/media-gallery/media-gallery-dialog/item-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAQjD,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EACtD,IAAI,EACJ,SAAS,GACV,EAAE,EAAE;IACH,MAAM,EAAE,CAAC,EAAE,GAAG,eAAe,EAAE,CAAC;IAEhC,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,OAA0B,EAAE,EAAE;QAC7B,SAAS,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;IACtD,CAAC,EACD,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,CACrB,CAAC;IAEF,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,sBAAsB,CAAC,eAAe,CAAC,CAAC;IAEtE,OAAO,CACL,oBAAC,GAAG,IAAC,KAAK,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAC,YAAY,EAAC,KAAK;QACrE,oBAAC,MAAM,IACL,QAAQ,EAAC,WAAW,EACpB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,MAAM,EACf,QAAQ,EAAC,4BAA4B,IAEpC,SAAS,CAAC,CAAC,CAAC,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAChE,CACL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/media-gallery/media-gallery-dialog/media-gallery-dialog.js

@@ -0,0 +1,91 @@
+import React, { useCallback, useEffect, useState, useRef } from 'react';
+import { usePersistedState } from '../../../hooks/usePersistedState';
+import { OrganizeMedia, ADD_ITEMS_DIRECTION, NAME_NEW_ITEMS, } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-organize-media';
+import '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-organize-media/dist/esm/index.global.css';
+import { useTranslations } from '../../../hooks';
+import isEqual from 'lodash/isEqual';
+import { applyOrganizeMediaItemsChanges, convertOrganizeMediaItemToWixCodeGalleryItem, convertWixCodeGalleryItemToOrganizeMediaItem, setItemsEmptyTitles, } from './utils';
+import { useContentKeys } from './hooks';
+import { AddMediaButton } from './add-media-button';
+import { NoItemsView } from './no-items-view';
+import { ItemActions } from './item-actions';
+import { AddLinkModal } from './add-link-modal';
+import { useAddLinkModal } from './use-add-link-modal';
+const ITEM_EDITING_OPTION = {
+    link: false,
+    title: true,
+    description: true,
+    focalPoint: true,
+    alt: true,
+    externalLink: true,
+};
+const toOrganizeMediaItems = (items) => items
+    .map(convertWixCodeGalleryItemToOrganizeMediaItem)
+    .filter(Boolean);
+const fromOrganizeMediaItems = (organizeMediaItems) => organizeMediaItems
+    .map(convertOrganizeMediaItemToWixCodeGalleryItem)
+    .filter(Boolean);
+export const MediaGalleryDialog = ({ isOpen, items, onClose, onChange, }) => {
+    const { t } = useTranslations();
+    const [organizeMediaItems, setOrganizeMediaItems] = useState(toOrganizeMediaItems(items));
+    const [imageAddDirection, setImageAddDirection] = usePersistedState('patterns-fields:media-gallery-dialog-image-add-direction', ADD_ITEMS_DIRECTION.GALLERY_END);
+    const [defaultNewItemName, setDefaultNewItemName] = usePersistedState('patterns-fields:media-gallery-dialog-default-new-item-name', NAME_NEW_ITEMS.FILE_NAME);
+    const organizeMediaContentKeys = useContentKeys(organizeMediaItems);
+    const prevItemsRef = useRef(items);
+    useEffect(() => {
+        if (!isEqual(items, prevItemsRef.current)) {
+            setOrganizeMediaItems(toOrganizeMediaItems(items));
+        }
+        prevItemsRef.current = items;
+    }, [items]);
+    const onAddMedia = useCallback((newItems) => {
+        const itemsToAdd = defaultNewItemName === NAME_NEW_ITEMS.EMPTY
+            ? setItemsEmptyTitles(newItems)
+            : newItems;
+        setOrganizeMediaItems((currentItems) => {
+            const merged = imageAddDirection === ADD_ITEMS_DIRECTION.GALLERY_START
+                ? [...itemsToAdd, ...currentItems]
+                : [...currentItems, ...itemsToAdd];
+            return merged.map((item, orderIndex) => ({
+                ...item,
+                orderIndex,
+            }));
+        });
+    }, [defaultNewItemName, imageAddDirection]);
+    const onDeleteImages = useCallback((itemIds) => {
+        setOrganizeMediaItems((currentItems) => currentItems
+            .filter(({ id }) => !itemIds.includes(id ?? ''))
+            .map((item, orderIndex) => ({ ...item, orderIndex })));
+    }, []);
+    const onItemsOrderIndexUpdated = useCallback((changes) => {
+        setOrganizeMediaItems((currentItems) => applyOrganizeMediaItemsChanges(currentItems, changes));
+    }, []);
+    const onItemUpdated = useCallback((change) => {
+        setOrganizeMediaItems((currentItems) => applyOrganizeMediaItemsChanges(currentItems, [change]));
+    }, []);
+    const onItemReplaced = useCallback(({ itemId, data }) => {
+        setOrganizeMediaItems((currentItems) => {
+            const itemToReplace = currentItems.find(({ id }) => id === itemId);
+            const orderIndex = itemToReplace?.orderIndex ?? data.orderIndex;
+            const change = { itemId, data: { ...data, orderIndex } };
+            return applyOrganizeMediaItemsChanges(currentItems, [change]);
+        });
+    }, []);
+    const onCloseOrganizeMedia = useCallback(() => {
+        onChange?.(fromOrganizeMediaItems(organizeMediaItems));
+        onClose?.();
+    }, [onChange, onClose, organizeMediaItems]);
+    // Link editing: OrganizeMedia fires onLinkButtonClicked, we show AddLinkModal
+    const onUpdateLink = useCallback((itemId, link) => {
+        setOrganizeMediaItems((currentItems) => currentItems.map((item) => item.id === itemId ? { ...item, link } : item));
+    }, []);
+    const { onLinkButtonClicked, ...addLinkModalProps } = useAddLinkModal(onUpdateLink);
+    const noItemsViewRenderer = useCallback(() => React.createElement(NoItemsView, { onAddMedia: onAddMedia }), [onAddMedia]);
+    const uploadMediaRenderer = useCallback(() => React.createElement(AddMediaButton, { onAddMedia: onAddMedia }), [onAddMedia]);
+    const itemActionsRenderer = useCallback(({ item }) => (React.createElement(ItemActions, { item: item, onReplace: onItemReplaced })), [onItemReplaced]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(OrganizeMedia, { t: t, contentKeys: organizeMediaContentKeys, isOpen: isOpen, items: organizeMediaItems, baseUrl: "", usePaging: true, shouldVerifySorting: false, shouldShowPhotoRightsNotification: false, showItemNameInSettings: false, noItemsViewRenderer: noItemsViewRenderer, uploadMediaRenderer: uploadMediaRenderer, itemActionsRenderer: itemActionsRenderer, itemEditingOption: ITEM_EDITING_OPTION, imageAddDirection: imageAddDirection, defaultNewItemName: defaultNewItemName, onImageAddDirectionChange: setImageAddDirection, onDefaultNewItemNameChange: setDefaultNewItemName, onDeleteImages: onDeleteImages, onItemUpdated: onItemUpdated, onItemsOrderIndexUpdated: onItemsOrderIndexUpdated, onClose: onCloseOrganizeMedia, onLinkButtonClicked: onLinkButtonClicked }),
+        React.createElement(AddLinkModal, { ...addLinkModalProps })));
+};
+MediaGalleryDialog.displayName = 'MediaGalleryDialog';
+//# sourceMappingURL=media-gallery-dialog.js.map

package/dist/esm/components/media-gallery/media-gallery-dialog/media-gallery-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-gallery-dialog.js","sourceRoot":"","sources":["../../../../../src/components/media-gallery/media-gallery-dialog/media-gallery-dialog.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/media-gallery/media-gallery-dialog/no-items-view.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { EmptyState, Box, TextButton, Loader } from '@wix/design-system';
+import { Add as AddIcon } from '@wix/wix-ui-icons-common';
+import { useTranslations } from '../../../hooks';
+import { useAddMediaControl } from './hooks';
+export const NoItemsView = ({ onAddMedia }) => {
+    const { t } = useTranslations();
+    const { onOpen, isLoading } = useAddMediaControl(onAddMedia);
+    return (React.createElement(Box, { align: "center", verticalAlign: "middle", padding: "SP5", direction: "vertical" },
+        React.createElement(EmptyState, { theme: "section", title: t('CMS.mediaGallery.noItems.title'), subtitle: t('CMS.mediaGallery.noItems.subtitle') },
+            React.createElement(TextButton, { prefixIcon: isLoading ? undefined : React.createElement(AddIcon, null), onClick: onOpen, dataHook: "media-gallery-add-media-button" }, isLoading ? (React.createElement(Loader, { size: "tiny" })) : (t('CMS.mediaGallery.noItems.addMedia'))))));
+};
+//# sourceMappingURL=no-items-view.js.map

package/dist/esm/components/media-gallery/media-gallery-dialog/no-items-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-items-view.js","sourceRoot":"","sources":["../../../../../src/components/media-gallery/media-gallery-dialog/no-items-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACzE,OAAO,EAAE,GAAG,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAO7C,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE;IACxE,MAAM,EAAE,CAAC,EAAE,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAE7D,OAAO,CACL,oBAAC,GAAG,IACF,KAAK,EAAC,QAAQ,EACd,aAAa,EAAC,QAAQ,EACtB,OAAO,EAAC,KAAK,EACb,SAAS,EAAC,UAAU;QAEpB,oBAAC,UAAU,IACT,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,CAAC,CAAC,gCAAgC,CAAC,EAC1C,QAAQ,EAAE,CAAC,CAAC,mCAAmC,CAAC;YAEhD,oBAAC,UAAU,IACT,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAC,OAAO,OAAG,EAC/C,OAAO,EAAE,MAAM,EACf,QAAQ,EAAC,gCAAgC,IAExC,SAAS,CAAC,CAAC,CAAC,CACX,oBAAC,MAAM,IAAC,IAAI,EAAC,MAAM,GAAG,CACvB,CAAC,CAAC,CAAC,CACF,CAAC,CAAC,mCAAmC,CAAC,CACvC,CACU,CACF,CACT,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/media-gallery/media-gallery-dialog/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/components/media-gallery/media-gallery-dialog/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/components/media-gallery/media-gallery-dialog/types.ts"],"names":[],"mappings":""}

package/dist/esm/components/media-gallery/media-gallery-dialog/use-add-link-modal.js

@@ -0,0 +1,19 @@
+import { useCallback, useState } from 'react';
+export const useAddLinkModal = (onUpdateLink) => {
+    const [mediaItem, setMediaItem] = useState();
+    const onClose = useCallback(() => setMediaItem(undefined), []);
+    const onLinkButtonClicked = useCallback((item) => setMediaItem(item), []);
+    const onSave = useCallback((link) => {
+        onUpdateLink(mediaItem?.id, link);
+        onClose();
+    }, [mediaItem?.id, onUpdateLink, onClose]);
+    return {
+        onLinkButtonClicked,
+        mediaType: mediaItem?.dataType,
+        link: mediaItem?.link,
+        isOpen: Boolean(mediaItem),
+        onClose,
+        onSave,
+    };
+};
+//# sourceMappingURL=use-add-link-modal.js.map

package/dist/esm/components/media-gallery/media-gallery-dialog/use-add-link-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-add-link-modal.js","sourceRoot":"","sources":["../../../../../src/components/media-gallery/media-gallery-dialog/use-add-link-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG9C,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,YAAqE,EACrE,EAAE;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAqB,CAAC;IAChE,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;IAE/D,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,IAAuB,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAC/C,EAAE,CACH,CAAC;IAEF,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,IAA4B,EAAE,EAAE;QAC/B,YAAY,CAAC,SAAS,EAAE,EAAE,EAAE,IAAI,CAAC,CAAC;QAClC,OAAO,EAAE,CAAC;IACZ,CAAC,EACD,CAAC,SAAS,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,CAAC,CACvC,CAAC;IAEF,OAAO;QACL,mBAAmB;QACnB,SAAS,EAAE,SAAS,EAAE,QAAQ;QAC9B,IAAI,EAAE,SAAS,EAAE,IAAI;QACrB,MAAM,EAAE,OAAO,CAAC,SAAS,CAAC;QAC1B,OAAO;QACP,MAAM;KACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/media-gallery/media-gallery-dialog/utils.js

@@ -0,0 +1,235 @@
+import { mediaURItoVideoURL } from '../../../auto-field-types';
+import { parseMediaItemUri, createMediaItemUri, isMediaItemError, } from '../../../utils/media-item-utils';
+/** Convert a wix:video:// URI to a playable 480p MP4 URL for preview */
+export const convertMediaURIToPreviewVideoURL = (uri) => {
+    const videoURL = mediaURItoVideoURL(uri);
+    return videoURL.replace(/\/file$/, '/480p/mp4/file.mp4');
+};
+const generateId = () => crypto.randomUUID();
+const isEmptyString = (value) => value === undefined || value === null || value.trim() === '';
+export const applyOrganizeMediaItemsChanges = (items, changes) => items
+    .map((item) => {
+    const itemChange = changes.find(({ itemId }) => item.id === itemId);
+    return { ...item, ...itemChange?.data };
+})
+    .sort(({ orderIndex: a }, { orderIndex: b }) => Number(a) - Number(b))
+    .map(({ sortOrder, ...item }, orderIndex) => ({
+    ...item,
+    orderIndex,
+}));
+/**
+ * Converts WixCodeGalleryItem link (object or string) + target
+ * to OrganizeMediaItemLink. Handles both link formats.
+ * Ported from cms-web's convertWixCodeGalleryItemLinkToOrganizeMediaItemLink.
+ */
+export const convertWixCodeGalleryItemLinkToOrganizeMediaItemLink = (link, target) => {
+    if (link === null || link === undefined) {
+        return undefined;
+    }
+    switch (typeof link) {
+        case 'object': {
+            if (!link.url || isEmptyString(link.url)) {
+                return undefined;
+            }
+            return {
+                url: link.url,
+                text: link.url,
+                target: link.target || target || '_blank',
+            };
+        }
+        case 'string': {
+            if (isEmptyString(link)) {
+                return undefined;
+            }
+            return {
+                url: link,
+                text: link,
+                target: target || '_blank',
+            };
+        }
+        default:
+            return undefined;
+    }
+};
+export const convertWixCodeGalleryItemToOrganizeMediaItem = (item, orderIndex) => {
+    const { src, alt, description, title: itemTitle = '', fileName, settings, link: itemLink, target, } = item;
+    const parsed = parseMediaItemUri(src);
+    if (isMediaItemError(parsed)) {
+        return null;
+    }
+    const focalPoint = {
+        x: settings?.focalPoint?.[0] ?? 0.5,
+        y: settings?.focalPoint?.[1] ?? 0.5,
+    };
+    const title = itemTitle.length > 0 ? itemTitle : parsed.title || '';
+    const link = convertWixCodeGalleryItemLinkToOrganizeMediaItemLink(itemLink, target);
+    if (parsed.type === 'image') {
+        return {
+            dataType: 'Photo',
+            id: generateId(),
+            mediaUrl: parsed.mediaId,
+            fileName: parsed.mediaId,
+            name: title,
+            orderIndex,
+            isSecure: false,
+            photoMetadata: {
+                width: parsed.width,
+                height: parsed.height,
+                focalPoint,
+            },
+            title,
+            alt,
+            description,
+            link,
+            metaData: {
+                title,
+                description,
+                link,
+                height: parsed.height,
+                width: parsed.width,
+                fileName,
+                name: title,
+            },
+        };
+    }
+    if (parsed.type === 'video') {
+        return {
+            dataType: 'Video',
+            id: generateId(),
+            mediaUrl: convertMediaURIToPreviewVideoURL(src),
+            fileName: parsed.mediaId,
+            name: title,
+            orderIndex,
+            thumbnail: parsed.mediaId,
+            videoMetadata: {
+                width: parsed.width,
+                height: parsed.height,
+                duration: 0,
+                posters: parsed.posterId ? [{ url: parsed.posterId }] : [],
+                focalPoint,
+            },
+            title,
+            alt,
+            description,
+            link,
+            metaData: {
+                title,
+                description,
+                link,
+                height: parsed.height,
+                width: parsed.width,
+                fileName,
+                name: title,
+            },
+        };
+    }
+    return null;
+};
+/**
+ * Converts a media URI string (from media manager) to an OrganizeMediaItem.
+ * Always sets name to mediaId. The dialog's onAddMedia handles the EMPTY
+ * naming preference by calling setItemsEmptyTitles.
+ */
+export const convertMediaControlItemToOrganizeMediaItem = (mediaUri) => {
+    const parsed = parseMediaItemUri(mediaUri);
+    if (isMediaItemError(parsed)) {
+        return null;
+    }
+    const title = parsed.title || '';
+    if (parsed.type === 'image') {
+        return {
+            dataType: 'Photo',
+            id: generateId(),
+            mediaUrl: parsed.mediaId,
+            fileName: parsed.mediaId,
+            name: parsed.mediaId,
+            isSecure: false,
+            photoMetadata: {
+                width: parsed.width,
+                height: parsed.height,
+                focalPoint: { x: 0.5, y: 0.5 },
+            },
+            title,
+            metaData: {
+                title,
+                height: parsed.height,
+                width: parsed.width,
+                fileName: title,
+                name: title,
+            },
+        };
+    }
+    if (parsed.type === 'video') {
+        return {
+            dataType: 'Video',
+            id: generateId(),
+            mediaUrl: convertMediaURIToPreviewVideoURL(mediaUri),
+            fileName: parsed.mediaId,
+            name: parsed.mediaId,
+            thumbnail: parsed.mediaId,
+            videoMetadata: {
+                width: parsed.width,
+                height: parsed.height,
+                duration: 0,
+                posters: parsed.posterId ? [{ url: parsed.posterId }] : [],
+                focalPoint: { x: 0.5, y: 0.5 },
+            },
+            title,
+            metaData: {
+                title,
+                height: parsed.height,
+                width: parsed.width,
+                fileName: title,
+                name: title,
+            },
+        };
+    }
+    return null;
+};
+/** Reset titles to empty — used when defaultNewItemName is EMPTY.
+ *  Only clears `title`, not `name` (matches cms-web behavior). */
+export const setItemsEmptyTitles = (items) => items.map((item) => ({ ...item, title: '' }));
+export const convertOrganizeMediaItemToWixCodeGalleryItem = (item) => {
+    const { dataType, mediaUrl = '', fileName = '', title = '', description = '', alt = '', link, metaData, } = item;
+    const settings = dataType === 'Photo' ? item.photoMetadata : item.videoMetadata;
+    const createParams = dataType === 'Photo'
+        ? {
+            type: 'image',
+            mediaId: fileName,
+            title: encodeURIComponent(title),
+            width: item.photoMetadata?.width ?? 0,
+            height: item.photoMetadata?.height ?? 0,
+        }
+        : {
+            type: 'video',
+            mediaId: fileName,
+            title: encodeURIComponent(title),
+            width: item.videoMetadata?.width ?? 0,
+            height: item.videoMetadata?.height ?? 0,
+            posterId: item.videoMetadata?.posters?.[0]?.url ?? '',
+        };
+    const media = createMediaItemUri(createParams);
+    if (isMediaItemError(media)) {
+        return null;
+    }
+    return {
+        type: dataType === 'Photo' ? 'image' : 'video',
+        slug: mediaUrl,
+        src: media.item,
+        title,
+        description,
+        alt,
+        fileName: metaData?.fileName ?? '',
+        settings: {
+            ...settings,
+            focalPoint: [
+                settings?.focalPoint?.x ?? 0.5,
+                settings?.focalPoint?.y ?? 0.5,
+            ],
+        },
+        ...(link?.url && !isEmptyString(link.url)
+            ? { link: link.url, target: link.target || '_blank' }
+            : {}),
+    };
+};
+//# sourceMappingURL=utils.js.map