@wix/auto-patterns 1.49.0 → 1.51.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useState","Modal","CustomModalLayout","BounceAnimation","Box","FormField","Input","RadioGroup","useTranslations","LinkTarget","AddLinkModal","_ref","isOpen","onClose","link","onSave","mediaType","t","url","setUrl","target","setTarget","error","setError","animateUrlError","setAnimateUrlError","handleOnSave","normalizedUrl","normalizeUrl","isValidUrl","text","undefined","onEndAnimateUrlError","createElement","onRequestClose","screen","title","subtitle","onCloseButtonClick","primaryButtonText","primaryButtonOnClick","secondaryButtonText","secondaryButtonOnClick","width","content","direction","gap","active","onEnd","required","label","status","statusMessage","value","onChange","e","placeholder","Radio","newTab","currentTab","trimmed","trim","test","URL"],"sources":["../../../../../../src/cms-fields/components/media-gallery/media-gallery-dialog/add-link-modal.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport {\n  Modal,\n  CustomModalLayout,\n  BounceAnimation,\n  Box,\n  FormField,\n  Input,\n  RadioGroup,\n} from '@wix/design-system';\nimport { useTranslations } from '../../../hooks';\nimport type { OrganizeMediaItem, OrganizeMediaItemLink } from './types';\n\nenum LinkTarget {\n  newTab = '_blank',\n  currentTab = '_self',\n}\n\nexport interface AddLinkModalProps {\n  mediaType?: OrganizeMediaItem['dataType'];\n  link?: OrganizeMediaItemLink;\n  onSave: (link?: OrganizeMediaItemLink) => void;\n  isOpen: boolean;\n  onClose: () => void;\n}\n\nexport const AddLinkModal: React.FC<AddLinkModalProps> = ({\n  isOpen,\n  onClose,\n  link,\n  onSave,\n  mediaType,\n}) => {\n  const { t } = useTranslations();\n\n  const [url, setUrl] = useState(link?.url ?? '');\n  const [target, setTarget] = useState<string>(link?.target ?? '_blank');\n  const [error, setError] = useState(false);\n  const [animateUrlError, setAnimateUrlError] = useState(false);\n\n  useEffect(() => {\n    setUrl(link?.url ?? '');\n    setTarget(link?.target ?? '_blank');\n    setError(false);\n    setAnimateUrlError(false);\n  }, [link, isOpen]);\n\n  const handleOnSave = useCallback(() => {\n    const normalizedUrl = normalizeUrl(url);\n    if (normalizedUrl && !isValidUrl(normalizedUrl)) {\n      setError(true);\n      setAnimateUrlError(true);\n      return;\n    }\n    onSave(\n      normalizedUrl\n        ? {\n            url: normalizedUrl,\n            text: normalizedUrl,\n            target: target as '_blank' | '_self',\n          }\n        : undefined,\n    );\n    onClose();\n  }, [url, target, onSave, onClose]);\n\n  const onEndAnimateUrlError = useCallback(() => setAnimateUrlError(false), []);\n\n  return (\n    <Modal isOpen={isOpen} onRequestClose={onClose} screen=\"desktop\">\n      <CustomModalLayout\n        title={\n          mediaType === 'Video'\n            ? t('CMS.mediaGallery.addLink.titleVideo')\n            : t('CMS.mediaGallery.addLink.titleImage')\n        }\n        subtitle={\n          mediaType === 'Video'\n            ? t('CMS.mediaGallery.addLink.subtitleVideo')\n            : t('CMS.mediaGallery.addLink.subtitleImage')\n        }\n        onCloseButtonClick={onClose}\n        primaryButtonText={t('CMS.mediaGallery.addLink.save')}\n        primaryButtonOnClick={handleOnSave}\n        secondaryButtonText={t('CMS.mediaGallery.addLink.cancel')}\n        secondaryButtonOnClick={onClose}\n        width=\"600px\"\n        content={\n          <Box direction=\"vertical\" gap=\"SP2\">\n            <BounceAnimation\n              active={animateUrlError}\n              onEnd={onEndAnimateUrlError}\n            >\n              <FormField\n                required\n                label={t('CMS.mediaGallery.addLink.urlLabel')}\n                status={error ? 'error' : undefined}\n                statusMessage={\n                  error ? t('CMS.mediaGallery.addLink.invalidUrl') : undefined\n                }\n              >\n                <Input\n                  value={url}\n                  onChange={(e) => {\n                    setUrl(e.target.value);\n                    setError(false);\n                  }}\n                  placeholder=\"https://\"\n                />\n              </FormField>\n            </BounceAnimation>\n            <FormField label={t('CMS.mediaGallery.addLink.targetLabel')}>\n              <RadioGroup\n                value={target}\n                onChange={(value) => setTarget(value as string)}\n              >\n                <RadioGroup.Radio value={LinkTarget.newTab}>\n                  {t('CMS.mediaGallery.addLink.newTab')}\n                </RadioGroup.Radio>\n                <RadioGroup.Radio value={LinkTarget.currentTab}>\n                  {t('CMS.mediaGallery.addLink.currentTab')}\n                </RadioGroup.Radio>\n              </RadioGroup>\n            </FormField>\n          </Box>\n        }\n      />\n    </Modal>\n  );\n};\n\nfunction normalizeUrl(url: string): string {\n  const trimmed = url.trim();\n  if (!trimmed) {\n    return '';\n  }\n  if (/^https?:\\/\\//i.test(trimmed)) {\n    return trimmed;\n  }\n  return `https://${trimmed}`;\n}\n\nfunction isValidUrl(url: string): boolean {\n  try {\n    new URL(url);\n    return true;\n  } catch {\n    return false;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,25 @@
+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 = _ref => {
+  let {
+    onAddMedia
+  } = _ref;
+  const {
+    t
+  } = useTranslations();
+  const {
+    onOpen,
+    isLoading
+  } = useAddMediaControl(onAddMedia);
+  return /*#__PURE__*/React.createElement(Button, {
+    prefixIcon: isLoading ? undefined : /*#__PURE__*/React.createElement(AddIcon, null),
+    onClick: onOpen,
+    dataHook: "media-gallery-add-media-button"
+  }, isLoading ? /*#__PURE__*/React.createElement(Loader, {
+    size: "tiny"
+  }) : t('CMS.mediaGallery.addMedia'));
+};
+//# sourceMappingURL=add-media-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Button","Loader","Add","AddIcon","useTranslations","useAddMediaControl","AddMediaButton","_ref","onAddMedia","t","onOpen","isLoading","createElement","prefixIcon","undefined","onClick","dataHook","size"],"sources":["../../../../../../src/cms-fields/components/media-gallery/media-gallery-dialog/add-media-button.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, Loader } from '@wix/design-system';\nimport { Add as AddIcon } from '@wix/wix-ui-icons-common';\nimport { useTranslations } from '../../../hooks';\nimport { useAddMediaControl } from './hooks';\nimport type { OrganizeMediaItem } from './types';\n\nexport interface AddMediaButtonProps {\n  onAddMedia: (items: OrganizeMediaItem[]) => void;\n}\n\nexport const AddMediaButton: React.FC<AddMediaButtonProps> = ({\n  onAddMedia,\n}) => {\n  const { t } = useTranslations();\n  const { onOpen, isLoading } = useAddMediaControl(onAddMedia);\n\n  return (\n    <Button\n      prefixIcon={isLoading ? undefined : <AddIcon />}\n      onClick={onOpen}\n      dataHook=\"media-gallery-add-media-button\"\n    >\n      {isLoading ? <Loader size=\"tiny\" /> : t('CMS.mediaGallery.addMedia')}\n    </Button>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,EAAEC,MAAM,QAAQ,oBAAoB;AACnD,SAASC,GAAG,IAAIC,OAAO,QAAQ,0BAA0B;AACzD,SAASC,eAAe,QAAQ,gBAAgB;AAChD,SAASC,kBAAkB,QAAQ,SAAS;AAO5C,OAAO,MAAMC,cAA6C,GAAGC,IAAA,IAEvD;EAAA,IAFwD;IAC5DC;EACF,CAAC,GAAAD,IAAA;EACC,MAAM;IAAEE;EAAE,CAAC,GAAGL,eAAe,CAAC,CAAC;EAC/B,MAAM;IAAEM,MAAM;IAAEC;EAAU,CAAC,GAAGN,kBAAkB,CAACG,UAAU,CAAC;EAE5D,oBACET,KAAA,CAAAa,aAAA,CAACZ,MAAM;IACLa,UAAU,EAAEF,SAAS,GAAGG,SAAS,gBAAGf,KAAA,CAAAa,aAAA,CAACT,OAAO,MAAE,CAAE;IAChDY,OAAO,EAAEL,MAAO;IAChBM,QAAQ,EAAC;EAAgC,GAExCL,SAAS,gBAAGZ,KAAA,CAAAa,aAAA,CAACX,MAAM;IAACgB,IAAI,EAAC;EAAM,CAAE,CAAC,GAAGR,CAAC,CAAC,2BAA2B,CAC7D,CAAC;AAEb,CAAC","ignoreList":[]}

package/dist/esm/cms-fields/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/cms-fields/components/media-gallery/media-gallery-dialog/content-keys.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["emptySearchResultsTitle","emptySearchResultsSubtitle","modalDone","modalTitle","selectionSelectAll","selectionDeselectAll","selectionDelete","selectionSelected","sortLabel","sortByTitleAsc","sortByTitleDesc","sortByFilenameAsc","sortByFilenameDesc","searchPlaceholder","settingsTitle","settingsNewItemsDirectionLabel","settingsNewItemsDirectionStart","settingsNewItemsDirectionEnd","settingsNewItemsTitleLabel","settingsNewItemsTitleEmpty","settingsNewItemsTitleFilename","itemTitleLabel","itemTitlePlaceholder","itemDescriptionLabel","itemDescriptionPlaceholder","itemAltLabel","itemAltTooltip","itemAltPlaceholder","itemDeleteTooltip","itemFocalPointTooltip","masonryLayoutTooltip","gridLayoutTooltip","modalDoneEmpty","externalLinkLabel","externalLinkButtonEdit","externalLinkButtonAdd","externalLinkTextPlaceholder"],"sources":["../../../../../../src/cms-fields/components/media-gallery/media-gallery-dialog/content-keys.ts"],"sourcesContent":["export default {\n  emptySearchResultsTitle: 'CMS.mediaGallery.dialog.emptySearchResultsTitle',\n  emptySearchResultsSubtitle:\n    'CMS.mediaGallery.dialog.emptySearchResultsSubtitle',\n  modalDone: 'CMS.mediaGallery.dialog.modalDone',\n  modalTitle: 'CMS.mediaGallery.dialog.modalTitle',\n  selectionSelectAll: 'CMS.mediaGallery.dialog.selectionSelectAll',\n  selectionDeselectAll: 'CMS.mediaGallery.dialog.selectionDeselectAll',\n  selectionDelete: 'CMS.mediaGallery.dialog.selectionDelete',\n  selectionSelected: 'CMS.mediaGallery.dialog.selectionSelected',\n  sortLabel: 'CMS.mediaGallery.dialog.sortLabel',\n  sortByTitleAsc: 'CMS.mediaGallery.dialog.sortByTitleAsc',\n  sortByTitleDesc: 'CMS.mediaGallery.dialog.sortByTitleDesc',\n  sortByFilenameAsc: 'CMS.mediaGallery.dialog.sortByFilenameAsc',\n  sortByFilenameDesc: 'CMS.mediaGallery.dialog.sortByFilenameDesc',\n  searchPlaceholder: 'CMS.mediaGallery.dialog.searchPlaceholder',\n  settingsTitle: 'CMS.mediaGallery.dialog.settingsTitle',\n  settingsNewItemsDirectionLabel:\n    'CMS.mediaGallery.dialog.settingsNewItemsDirectionLabel',\n  settingsNewItemsDirectionStart:\n    'CMS.mediaGallery.dialog.settingsNewItemsDirectionStart',\n  settingsNewItemsDirectionEnd:\n    'CMS.mediaGallery.dialog.settingsNewItemsDirectionEnd',\n  settingsNewItemsTitleLabel:\n    'CMS.mediaGallery.dialog.settingsNewItemsTitleLabel',\n  settingsNewItemsTitleEmpty:\n    'CMS.mediaGallery.dialog.settingsNewItemsTitleEmpty',\n  settingsNewItemsTitleFilename:\n    'CMS.mediaGallery.dialog.settingsNewItemsTitleFilename',\n  itemTitleLabel: 'CMS.mediaGallery.dialog.itemTitleLabel',\n  itemTitlePlaceholder: 'CMS.mediaGallery.dialog.itemTitlePlaceholder',\n  itemDescriptionLabel: 'CMS.mediaGallery.dialog.itemDescriptionLabel',\n  itemDescriptionPlaceholder:\n    'CMS.mediaGallery.dialog.itemDescriptionPlaceholder',\n  itemAltLabel: 'CMS.mediaGallery.dialog.itemAltLabel',\n  itemAltTooltip: 'CMS.mediaGallery.dialog.itemAltTooltip',\n  itemAltPlaceholder: 'CMS.mediaGallery.dialog.itemAltPlaceholder',\n  itemDeleteTooltip: 'CMS.mediaGallery.dialog.itemDeleteTooltip',\n  itemFocalPointTooltip: 'CMS.mediaGallery.dialog.itemFocalPointTooltip',\n  masonryLayoutTooltip: 'CMS.mediaGallery.dialog.masonryLayoutTooltip',\n  gridLayoutTooltip: 'CMS.mediaGallery.dialog.gridLayoutTooltip',\n  modalDoneEmpty: 'CMS.mediaGallery.dialog.modalDoneEmpty',\n  externalLinkLabel: 'CMS.mediaGallery.dialog.externalLinkLabel',\n  externalLinkButtonEdit: 'CMS.mediaGallery.dialog.externalLinkButtonEdit',\n  externalLinkButtonAdd: 'CMS.mediaGallery.dialog.externalLinkButtonAdd',\n  externalLinkTextPlaceholder:\n    'CMS.mediaGallery.dialog.externalLinkTextPlaceholder',\n};\n"],"mappings":"AAAA,eAAe;EACbA,uBAAuB,EAAE,iDAAiD;EAC1EC,0BAA0B,EACxB,oDAAoD;EACtDC,SAAS,EAAE,mCAAmC;EAC9CC,UAAU,EAAE,oCAAoC;EAChDC,kBAAkB,EAAE,4CAA4C;EAChEC,oBAAoB,EAAE,8CAA8C;EACpEC,eAAe,EAAE,yCAAyC;EAC1DC,iBAAiB,EAAE,2CAA2C;EAC9DC,SAAS,EAAE,mCAAmC;EAC9CC,cAAc,EAAE,wCAAwC;EACxDC,eAAe,EAAE,yCAAyC;EAC1DC,iBAAiB,EAAE,2CAA2C;EAC9DC,kBAAkB,EAAE,4CAA4C;EAChEC,iBAAiB,EAAE,2CAA2C;EAC9DC,aAAa,EAAE,uCAAuC;EACtDC,8BAA8B,EAC5B,wDAAwD;EAC1DC,8BAA8B,EAC5B,wDAAwD;EAC1DC,4BAA4B,EAC1B,sDAAsD;EACxDC,0BAA0B,EACxB,oDAAoD;EACtDC,0BAA0B,EACxB,oDAAoD;EACtDC,6BAA6B,EAC3B,uDAAuD;EACzDC,cAAc,EAAE,wCAAwC;EACxDC,oBAAoB,EAAE,8CAA8C;EACpEC,oBAAoB,EAAE,8CAA8C;EACpEC,0BAA0B,EACxB,oDAAoD;EACtDC,YAAY,EAAE,sCAAsC;EACpDC,cAAc,EAAE,wCAAwC;EACxDC,kBAAkB,EAAE,4CAA4C;EAChEC,iBAAiB,EAAE,2CAA2C;EAC9DC,qBAAqB,EAAE,+CAA+C;EACtEC,oBAAoB,EAAE,8CAA8C;EACpEC,iBAAiB,EAAE,2CAA2C;EAC9DC,cAAc,EAAE,wCAAwC;EACxDC,iBAAiB,EAAE,2CAA2C;EAC9DC,sBAAsB,EAAE,gDAAgD;EACxEC,qBAAqB,EAAE,+CAA+C;EACtEC,2BAA2B,EACzB;AACJ,CAAC","ignoreList":[]}

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

@@ -0,0 +1,81 @@
+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 = _ref => {
+  let {
+    initialOpen,
+    items,
+    ...rest
+  } = _ref;
+  const [isOpen, setIsOpen] = useState(Boolean(initialOpen));
+  const openMediaGalleryDialog = useCallback(() => setIsOpen(true), []);
+  const mediaGalleryDialogItems = useMemo(() => items || [], [items]);
+  const onMediaGalleryDialogClose = useCallback(() => {
+    setIsOpen(false);
+    rest.onClose == null || 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 auto-cairo, 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 == null || 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 == null || 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/cms-fields/components/media-gallery/media-gallery-dialog/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useMemo","useState","useMediaControl","MEDIA_TYPES","convertMediaControlItemToOrganizeMediaItem","contentKeys","useMediaGalleryDialog","_ref","initialOpen","items","rest","isOpen","setIsOpen","Boolean","openMediaGalleryDialog","mediaGalleryDialogItems","onMediaGalleryDialogClose","onClose","useAddMediaControl","onAddMedia","onChange","value","map","val","filter","callMedia","loading","multiSelect","mediaType","GALLERY","onOpen","isLoading","useReplaceMediaControl","onMediaReplaced","newItem","ALL_MEDIA","useContentKeys","modalDone","length","modalDoneEmpty"],"sources":["../../../../../../src/cms-fields/components/media-gallery/media-gallery-dialog/hooks.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport { useMediaControl } from '../../media-control';\nimport { MEDIA_TYPES } from '../../../utils/media-utils';\nimport { convertMediaControlItemToOrganizeMediaItem } from './utils';\nimport type { MediaGalleryDialogProps, OrganizeMediaItem } from './types';\nimport contentKeys from './content-keys';\n\nexport type MediaGalleryDialogHookParams = Partial<\n  Omit<MediaGalleryDialogProps, 'isOpen'> & { initialOpen: boolean }\n>;\n\nexport type MediaGalleryDialogHookPayload = MediaGalleryDialogProps & {\n  openMediaGalleryDialog: () => void;\n};\n\nexport const useMediaGalleryDialog = ({\n  initialOpen,\n  items,\n  ...rest\n}: MediaGalleryDialogHookParams): MediaGalleryDialogHookPayload => {\n  const [isOpen, setIsOpen] = useState(Boolean(initialOpen));\n\n  const openMediaGalleryDialog = useCallback(() => setIsOpen(true), []);\n  const mediaGalleryDialogItems = useMemo(() => items || [], [items]);\n  const onMediaGalleryDialogClose = useCallback(() => {\n    setIsOpen(false);\n    rest.onClose?.();\n  }, [rest.onClose]);\n\n  return {\n    openMediaGalleryDialog,\n    isOpen,\n    onClose: onMediaGalleryDialogClose,\n    items: mediaGalleryDialogItems,\n    ...rest,\n  };\n};\n\n/**\n * Opens media manager (multi-select) to add new items to the gallery.\n *\n * Note: In cms-web, defaultNewItemName flows from Redux into this hook.\n * In auto-cairo, we don't have Redux for preferences, so the conversion\n * always uses mediaId for `name`. The dialog's `onAddMedia` callback\n * handles the EMPTY case by calling `setItemsEmptyTitles`.\n */\nexport const useAddMediaControl = (\n  onAddMedia?: (newItems: OrganizeMediaItem[]) => void,\n) => {\n  const onChange = useCallback(\n    (value: string[]) => {\n      onAddMedia?.(\n        value\n          .map((val) => convertMediaControlItemToOrganizeMediaItem(val))\n          .filter(Boolean) as OrganizeMediaItem[],\n      );\n    },\n    [onAddMedia],\n  );\n\n  const { callMedia, loading } = useMediaControl({\n    multiSelect: true,\n    mediaType: MEDIA_TYPES.GALLERY,\n    onChange,\n  });\n\n  return {\n    onOpen: useCallback(() => callMedia(), [callMedia]),\n    isLoading: loading,\n  };\n};\n\n/** Opens media manager (single-select) to replace one item */\nexport const useReplaceMediaControl = (\n  onMediaReplaced?: (newItem: OrganizeMediaItem) => void,\n) => {\n  const onChange = useCallback(\n    (value: string) => {\n      const newItem = convertMediaControlItemToOrganizeMediaItem(value);\n      if (newItem) {\n        onMediaReplaced?.(newItem);\n      }\n    },\n    [onMediaReplaced],\n  );\n\n  const { callMedia, loading } = useMediaControl({\n    multiSelect: false,\n    mediaType: MEDIA_TYPES.ALL_MEDIA,\n    onChange,\n  });\n\n  return {\n    onOpen: useCallback(() => callMedia(), [callMedia]),\n    isLoading: loading,\n  };\n};\n\n/** Product requirement: show different text on Done button if there are no items yet */\nexport const useContentKeys = (items: OrganizeMediaItem[]) =>\n  useMemo(\n    () => ({\n      ...contentKeys,\n      modalDone:\n        items.length === 0 ? contentKeys.modalDoneEmpty : contentKeys.modalDone,\n    }),\n    [items],\n  );\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","Box","Button","Loader","useTranslations","useReplaceMediaControl","ItemActions","_ref","item","onReplace","t","onMediaReplaced","newItem","itemId","id","data","onOpen","isLoading","createElement","align","verticalAlign","gap","paddingRight","priority","size","onClick","dataHook"],"sources":["../../../../../../src/cms-fields/components/media-gallery/media-gallery-dialog/item-actions.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { Box, Button, Loader } from '@wix/design-system';\nimport { useTranslations } from '../../../hooks';\nimport { useReplaceMediaControl } from './hooks';\nimport type { OrganizeMediaItem, OrganizeMediaItemChange } from './types';\n\nexport interface ItemActionsProps {\n  item: OrganizeMediaItem;\n  onReplace: (change: OrganizeMediaItemChange) => void;\n}\n\nexport const ItemActions: React.FC<ItemActionsProps> = ({\n  item,\n  onReplace,\n}) => {\n  const { t } = useTranslations();\n\n  const onMediaReplaced = useCallback(\n    (newItem: OrganizeMediaItem) => {\n      onReplace({ itemId: item.id ?? '', data: newItem });\n    },\n    [item.id, onReplace],\n  );\n\n  const { onOpen, isLoading } = useReplaceMediaControl(onMediaReplaced);\n\n  return (\n    <Box align=\"center\" verticalAlign=\"middle\" gap=\"SP1\" paddingRight=\"SP1\">\n      <Button\n        priority=\"secondary\"\n        size=\"small\"\n        onClick={onOpen}\n        dataHook=\"media-gallery-replace-item\"\n      >\n        {isLoading ? <Loader size=\"tiny\" /> : t('CMS.mediaGallery.replaceItem')}\n      </Button>\n    </Box>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,GAAG,EAAEC,MAAM,EAAEC,MAAM,QAAQ,oBAAoB;AACxD,SAASC,eAAe,QAAQ,gBAAgB;AAChD,SAASC,sBAAsB,QAAQ,SAAS;AAQhD,OAAO,MAAMC,WAAuC,GAAGC,IAAA,IAGjD;EAAA,IAHkD;IACtDC,IAAI;IACJC;EACF,CAAC,GAAAF,IAAA;EACC,MAAM;IAAEG;EAAE,CAAC,GAAGN,eAAe,CAAC,CAAC;EAE/B,MAAMO,eAAe,GAAGX,WAAW,CAChCY,OAA0B,IAAK;IAC9BH,SAAS,CAAC;MAAEI,MAAM,EAAEL,IAAI,CAACM,EAAE,IAAI,EAAE;MAAEC,IAAI,EAAEH;IAAQ,CAAC,CAAC;EACrD,CAAC,EACD,CAACJ,IAAI,CAACM,EAAE,EAAEL,SAAS,CACrB,CAAC;EAED,MAAM;IAAEO,MAAM;IAAEC;EAAU,CAAC,GAAGZ,sBAAsB,CAACM,eAAe,CAAC;EAErE,oBACEZ,KAAA,CAAAmB,aAAA,CAACjB,GAAG;IAACkB,KAAK,EAAC,QAAQ;IAACC,aAAa,EAAC,QAAQ;IAACC,GAAG,EAAC,KAAK;IAACC,YAAY,EAAC;EAAK,gBACrEvB,KAAA,CAAAmB,aAAA,CAAChB,MAAM;IACLqB,QAAQ,EAAC,WAAW;IACpBC,IAAI,EAAC,OAAO;IACZC,OAAO,EAAET,MAAO;IAChBU,QAAQ,EAAC;EAA4B,GAEpCT,SAAS,gBAAGlB,KAAA,CAAAmB,aAAA,CAACf,MAAM;IAACqB,IAAI,EAAC;EAAM,CAAE,CAAC,GAAGd,CAAC,CAAC,8BAA8B,CAChE,CACL,CAAC;AAEV,CAAC","ignoreList":[]}

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

@@ -0,0 +1,152 @@
+import React, { useCallback, useEffect, useState, useRef } from 'react';
+import { usePersistedState } from '../../../../hooks/usePersistedState';
+import { OrganizeMedia, ADD_ITEMS_DIRECTION, NAME_NEW_ITEMS } from '@wix/auto-patterns-utils/@wix/auto-patterns-bundled-organize-media';
+import '@wix/auto-patterns-utils/@wix/auto-patterns-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 = _ref => {
+  let {
+    isOpen,
+    items,
+    onClose,
+    onChange
+  } = _ref;
+  const {
+    t
+  } = useTranslations();
+  const [organizeMediaItems, setOrganizeMediaItems] = useState(toOrganizeMediaItems(items));
+  const [imageAddDirection, setImageAddDirection] = usePersistedState('auto-cairo:media-gallery-dialog-image-add-direction', ADD_ITEMS_DIRECTION.GALLERY_END);
+  const [defaultNewItemName, setDefaultNewItemName] = usePersistedState('auto-cairo: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(_ref2 => {
+      let {
+        id
+      } = _ref2;
+      return !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(_ref3 => {
+    let {
+      itemId,
+      data
+    } = _ref3;
+    setOrganizeMediaItems(currentItems => {
+      const itemToReplace = currentItems.find(_ref4 => {
+        let {
+          id
+        } = _ref4;
+        return id === itemId;
+      });
+      const orderIndex = (itemToReplace == null ? void 0 : itemToReplace.orderIndex) ?? data.orderIndex;
+      const change = {
+        itemId,
+        data: {
+          ...data,
+          orderIndex
+        }
+      };
+      return applyOrganizeMediaItemsChanges(currentItems, [change]);
+    });
+  }, []);
+  const onCloseOrganizeMedia = useCallback(() => {
+    onChange == null || onChange(fromOrganizeMediaItems(organizeMediaItems));
+    onClose == null || 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(() => /*#__PURE__*/React.createElement(NoItemsView, {
+    onAddMedia: onAddMedia
+  }), [onAddMedia]);
+  const uploadMediaRenderer = useCallback(() => /*#__PURE__*/React.createElement(AddMediaButton, {
+    onAddMedia: onAddMedia
+  }), [onAddMedia]);
+  const itemActionsRenderer = useCallback(_ref5 => {
+    let {
+      item
+    } = _ref5;
+    return /*#__PURE__*/React.createElement(ItemActions, {
+      item: item,
+      onReplace: onItemReplaced
+    });
+  }, [onItemReplaced]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/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
+  }), /*#__PURE__*/React.createElement(AddLinkModal, addLinkModalProps));
+};
+MediaGalleryDialog.displayName = 'MediaGalleryDialog';
+//# sourceMappingURL=media-gallery-dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useState","useRef","usePersistedState","OrganizeMedia","ADD_ITEMS_DIRECTION","NAME_NEW_ITEMS","useTranslations","isEqual","applyOrganizeMediaItemsChanges","convertOrganizeMediaItemToWixCodeGalleryItem","convertWixCodeGalleryItemToOrganizeMediaItem","setItemsEmptyTitles","useContentKeys","AddMediaButton","NoItemsView","ItemActions","AddLinkModal","useAddLinkModal","ITEM_EDITING_OPTION","link","title","description","focalPoint","alt","externalLink","toOrganizeMediaItems","items","map","filter","Boolean","fromOrganizeMediaItems","organizeMediaItems","MediaGalleryDialog","_ref","isOpen","onClose","onChange","t","setOrganizeMediaItems","imageAddDirection","setImageAddDirection","GALLERY_END","defaultNewItemName","setDefaultNewItemName","FILE_NAME","organizeMediaContentKeys","prevItemsRef","current","onAddMedia","newItems","itemsToAdd","EMPTY","currentItems","merged","GALLERY_START","item","orderIndex","onDeleteImages","itemIds","_ref2","id","includes","onItemsOrderIndexUpdated","changes","onItemUpdated","change","onItemReplaced","_ref3","itemId","data","itemToReplace","find","_ref4","onCloseOrganizeMedia","onUpdateLink","onLinkButtonClicked","addLinkModalProps","noItemsViewRenderer","createElement","uploadMediaRenderer","itemActionsRenderer","_ref5","onReplace","Fragment","contentKeys","baseUrl","usePaging","shouldVerifySorting","shouldShowPhotoRightsNotification","showItemNameInSettings","itemEditingOption","onImageAddDirectionChange","onDefaultNewItemNameChange","displayName"],"sources":["../../../../../../src/cms-fields/components/media-gallery/media-gallery-dialog/media-gallery-dialog.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState, useRef } from 'react';\nimport { usePersistedState } from '../../../../hooks/usePersistedState';\nimport {\n  OrganizeMedia,\n  ADD_ITEMS_DIRECTION,\n  NAME_NEW_ITEMS,\n} from '@wix/auto-patterns-utils/@wix/auto-patterns-bundled-organize-media';\nimport '@wix/auto-patterns-utils/@wix/auto-patterns-bundled-organize-media/dist/esm/index.global.css';\nimport type { WixCodeGalleryItem } from '../../../auto-cms-field-types';\nimport { useTranslations } from '../../../hooks';\nimport isEqual from 'lodash/isEqual';\n\nimport type {\n  MediaGalleryDialogProps,\n  OrganizeMediaItem,\n  OrganizeMediaItemChange,\n  OrganizeMediaItemLink,\n} from './types';\nimport {\n  applyOrganizeMediaItemsChanges,\n  convertOrganizeMediaItemToWixCodeGalleryItem,\n  convertWixCodeGalleryItemToOrganizeMediaItem,\n  setItemsEmptyTitles,\n} from './utils';\nimport { useContentKeys } from './hooks';\nimport { AddMediaButton } from './add-media-button';\nimport { NoItemsView } from './no-items-view';\nimport { ItemActions } from './item-actions';\nimport { AddLinkModal } from './add-link-modal';\nimport { useAddLinkModal } from './use-add-link-modal';\n\nconst ITEM_EDITING_OPTION = {\n  link: false,\n  title: true,\n  description: true,\n  focalPoint: true,\n  alt: true,\n  externalLink: true,\n} as const;\n\nconst toOrganizeMediaItems = (items: WixCodeGalleryItem[]) =>\n  items\n    .map(convertWixCodeGalleryItemToOrganizeMediaItem)\n    .filter(Boolean) as OrganizeMediaItem[];\n\nconst fromOrganizeMediaItems = (organizeMediaItems: OrganizeMediaItem[]) =>\n  organizeMediaItems\n    .map(convertOrganizeMediaItemToWixCodeGalleryItem)\n    .filter(Boolean) as WixCodeGalleryItem[];\n\nexport const MediaGalleryDialog: React.FC<MediaGalleryDialogProps> = ({\n  isOpen,\n  items,\n  onClose,\n  onChange,\n}) => {\n  const { t } = useTranslations();\n\n  const [organizeMediaItems, setOrganizeMediaItems] = useState(\n    toOrganizeMediaItems(items),\n  );\n\n  const [imageAddDirection, setImageAddDirection] = usePersistedState(\n    'auto-cairo:media-gallery-dialog-image-add-direction',\n    ADD_ITEMS_DIRECTION.GALLERY_END,\n  );\n  const [defaultNewItemName, setDefaultNewItemName] = usePersistedState(\n    'auto-cairo:media-gallery-dialog-default-new-item-name',\n    NAME_NEW_ITEMS.FILE_NAME,\n  );\n\n  const organizeMediaContentKeys = useContentKeys(organizeMediaItems);\n\n  const prevItemsRef = useRef(items);\n  useEffect(() => {\n    if (!isEqual(items, prevItemsRef.current)) {\n      setOrganizeMediaItems(toOrganizeMediaItems(items));\n    }\n    prevItemsRef.current = items;\n  }, [items]);\n\n  const onAddMedia = useCallback(\n    (newItems: OrganizeMediaItem[]) => {\n      const itemsToAdd =\n        defaultNewItemName === NAME_NEW_ITEMS.EMPTY\n          ? setItemsEmptyTitles(newItems)\n          : newItems;\n\n      setOrganizeMediaItems((currentItems) => {\n        const merged =\n          imageAddDirection === ADD_ITEMS_DIRECTION.GALLERY_START\n            ? [...itemsToAdd, ...currentItems]\n            : [...currentItems, ...itemsToAdd];\n        return merged.map((item, orderIndex) => ({\n          ...item,\n          orderIndex,\n        }));\n      });\n    },\n    [defaultNewItemName, imageAddDirection],\n  );\n\n  const onDeleteImages = useCallback((itemIds: string[]) => {\n    setOrganizeMediaItems((currentItems) =>\n      currentItems\n        .filter(({ id }) => !itemIds.includes(id ?? ''))\n        .map((item, orderIndex) => ({ ...item, orderIndex })),\n    );\n  }, []);\n\n  const onItemsOrderIndexUpdated = useCallback(\n    (changes: OrganizeMediaItemChange[]) => {\n      setOrganizeMediaItems((currentItems) =>\n        applyOrganizeMediaItemsChanges(currentItems, changes),\n      );\n    },\n    [],\n  );\n\n  const onItemUpdated = useCallback((change: OrganizeMediaItemChange) => {\n    setOrganizeMediaItems((currentItems) =>\n      applyOrganizeMediaItemsChanges(currentItems, [change]),\n    );\n  }, []);\n\n  const onItemReplaced = useCallback(\n    ({ itemId, data }: OrganizeMediaItemChange) => {\n      setOrganizeMediaItems((currentItems) => {\n        const itemToReplace = currentItems.find(({ id }) => id === itemId);\n        const orderIndex = itemToReplace?.orderIndex ?? data.orderIndex;\n        const change = { itemId, data: { ...data, orderIndex } };\n        return applyOrganizeMediaItemsChanges(currentItems, [change]);\n      });\n    },\n    [],\n  );\n\n  const onCloseOrganizeMedia = useCallback(() => {\n    onChange?.(fromOrganizeMediaItems(organizeMediaItems));\n    onClose?.();\n  }, [onChange, onClose, organizeMediaItems]);\n\n  // Link editing: OrganizeMedia fires onLinkButtonClicked, we show AddLinkModal\n  const onUpdateLink = useCallback(\n    (itemId?: string, link?: OrganizeMediaItemLink) => {\n      setOrganizeMediaItems((currentItems) =>\n        currentItems.map((item) =>\n          item.id === itemId ? { ...item, link } : item,\n        ),\n      );\n    },\n    [],\n  );\n  const { onLinkButtonClicked, ...addLinkModalProps } =\n    useAddLinkModal(onUpdateLink);\n\n  const noItemsViewRenderer = useCallback(\n    () => <NoItemsView onAddMedia={onAddMedia} />,\n    [onAddMedia],\n  );\n\n  const uploadMediaRenderer = useCallback(\n    () => <AddMediaButton onAddMedia={onAddMedia} />,\n    [onAddMedia],\n  );\n\n  const itemActionsRenderer = useCallback(\n    ({ item }: { item: OrganizeMediaItem }) => (\n      <ItemActions item={item} onReplace={onItemReplaced} />\n    ),\n    [onItemReplaced],\n  );\n\n  return (\n    <>\n      <OrganizeMedia\n        t={t}\n        contentKeys={organizeMediaContentKeys}\n        isOpen={isOpen}\n        items={organizeMediaItems}\n        baseUrl=\"\"\n        usePaging\n        shouldVerifySorting={false}\n        shouldShowPhotoRightsNotification={false}\n        showItemNameInSettings={false}\n        noItemsViewRenderer={noItemsViewRenderer}\n        uploadMediaRenderer={uploadMediaRenderer}\n        itemActionsRenderer={itemActionsRenderer}\n        itemEditingOption={ITEM_EDITING_OPTION}\n        imageAddDirection={imageAddDirection}\n        defaultNewItemName={defaultNewItemName}\n        onImageAddDirectionChange={setImageAddDirection}\n        onDefaultNewItemNameChange={setDefaultNewItemName}\n        onDeleteImages={onDeleteImages}\n        onItemUpdated={onItemUpdated}\n        onItemsOrderIndexUpdated={onItemsOrderIndexUpdated}\n        onClose={onCloseOrganizeMedia}\n        onLinkButtonClicked={onLinkButtonClicked}\n      />\n      <AddLinkModal {...addLinkModalProps} />\n    </>\n  );\n};\n\nMediaGalleryDialog.displayName = 'MediaGalleryDialog';\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,34 @@
+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 = _ref => {
+  let {
+    onAddMedia
+  } = _ref;
+  const {
+    t
+  } = useTranslations();
+  const {
+    onOpen,
+    isLoading
+  } = useAddMediaControl(onAddMedia);
+  return /*#__PURE__*/React.createElement(Box, {
+    align: "center",
+    verticalAlign: "middle",
+    padding: "SP5",
+    direction: "vertical"
+  }, /*#__PURE__*/React.createElement(EmptyState, {
+    theme: "section",
+    title: t('CMS.mediaGallery.noItems.title'),
+    subtitle: t('CMS.mediaGallery.noItems.subtitle')
+  }, /*#__PURE__*/React.createElement(TextButton, {
+    prefixIcon: isLoading ? undefined : /*#__PURE__*/React.createElement(AddIcon, null),
+    onClick: onOpen,
+    dataHook: "media-gallery-add-media-button"
+  }, isLoading ? /*#__PURE__*/React.createElement(Loader, {
+    size: "tiny"
+  }) : t('CMS.mediaGallery.noItems.addMedia'))));
+};
+//# sourceMappingURL=no-items-view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","EmptyState","Box","TextButton","Loader","Add","AddIcon","useTranslations","useAddMediaControl","NoItemsView","_ref","onAddMedia","t","onOpen","isLoading","createElement","align","verticalAlign","padding","direction","theme","title","subtitle","prefixIcon","undefined","onClick","dataHook","size"],"sources":["../../../../../../src/cms-fields/components/media-gallery/media-gallery-dialog/no-items-view.tsx"],"sourcesContent":["import React from 'react';\nimport { EmptyState, Box, TextButton, Loader } from '@wix/design-system';\nimport { Add as AddIcon } from '@wix/wix-ui-icons-common';\nimport { useTranslations } from '../../../hooks';\nimport { useAddMediaControl } from './hooks';\nimport type { OrganizeMediaItem } from './types';\n\nexport interface NoItemsViewProps {\n  onAddMedia: (items: OrganizeMediaItem[]) => void;\n}\n\nexport const NoItemsView: React.FC<NoItemsViewProps> = ({ onAddMedia }) => {\n  const { t } = useTranslations();\n  const { onOpen, isLoading } = useAddMediaControl(onAddMedia);\n\n  return (\n    <Box\n      align=\"center\"\n      verticalAlign=\"middle\"\n      padding=\"SP5\"\n      direction=\"vertical\"\n    >\n      <EmptyState\n        theme=\"section\"\n        title={t('CMS.mediaGallery.noItems.title')}\n        subtitle={t('CMS.mediaGallery.noItems.subtitle')}\n      >\n        <TextButton\n          prefixIcon={isLoading ? undefined : <AddIcon />}\n          onClick={onOpen}\n          dataHook=\"media-gallery-add-media-button\"\n        >\n          {isLoading ? (\n            <Loader size=\"tiny\" />\n          ) : (\n            t('CMS.mediaGallery.noItems.addMedia')\n          )}\n        </TextButton>\n      </EmptyState>\n    </Box>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,GAAG,EAAEC,UAAU,EAAEC,MAAM,QAAQ,oBAAoB;AACxE,SAASC,GAAG,IAAIC,OAAO,QAAQ,0BAA0B;AACzD,SAASC,eAAe,QAAQ,gBAAgB;AAChD,SAASC,kBAAkB,QAAQ,SAAS;AAO5C,OAAO,MAAMC,WAAuC,GAAGC,IAAA,IAAoB;EAAA,IAAnB;IAAEC;EAAW,CAAC,GAAAD,IAAA;EACpE,MAAM;IAAEE;EAAE,CAAC,GAAGL,eAAe,CAAC,CAAC;EAC/B,MAAM;IAAEM,MAAM;IAAEC;EAAU,CAAC,GAAGN,kBAAkB,CAACG,UAAU,CAAC;EAE5D,oBACEX,KAAA,CAAAe,aAAA,CAACb,GAAG;IACFc,KAAK,EAAC,QAAQ;IACdC,aAAa,EAAC,QAAQ;IACtBC,OAAO,EAAC,KAAK;IACbC,SAAS,EAAC;EAAU,gBAEpBnB,KAAA,CAAAe,aAAA,CAACd,UAAU;IACTmB,KAAK,EAAC,SAAS;IACfC,KAAK,EAAET,CAAC,CAAC,gCAAgC,CAAE;IAC3CU,QAAQ,EAAEV,CAAC,CAAC,mCAAmC;EAAE,gBAEjDZ,KAAA,CAAAe,aAAA,CAACZ,UAAU;IACToB,UAAU,EAAET,SAAS,GAAGU,SAAS,gBAAGxB,KAAA,CAAAe,aAAA,CAACT,OAAO,MAAE,CAAE;IAChDmB,OAAO,EAAEZ,MAAO;IAChBa,QAAQ,EAAC;EAAgC,GAExCZ,SAAS,gBACRd,KAAA,CAAAe,aAAA,CAACX,MAAM;IAACuB,IAAI,EAAC;EAAM,CAAE,CAAC,GAEtBf,CAAC,CAAC,mCAAmC,CAE7B,CACF,CACT,CAAC;AAEV,CAAC","ignoreList":[]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../../src/cms-fields/components/media-gallery/media-gallery-dialog/types.ts"],"sourcesContent":["import type { WixCodeGalleryItem } from '../../../auto-cms-field-types';\n\nexport interface MediaGalleryDialogProps {\n  isOpen: boolean;\n  items: WixCodeGalleryItem[];\n  onClose?: () => void;\n  onChange?: (items: WixCodeGalleryItem[]) => void;\n}\n\nexport interface OrganizeMediaItemFocalPoint {\n  x: number;\n  y: number;\n}\n\nexport interface OrganizeMediaItemPhotoMetadata {\n  width: number;\n  height: number;\n  focalPoint?: OrganizeMediaItemFocalPoint;\n}\n\nexport interface OrganizeMediaItemLink {\n  url: string;\n  text?: string;\n  target: '_blank' | '_self';\n}\n\nexport interface OrganizeMediaItemMetadata {\n  title?: string;\n  description?: string;\n  link?: OrganizeMediaItemLink;\n  height?: number;\n  width?: number;\n  fileName?: string;\n  name?: string;\n}\n\nexport interface OrganizeMediaItemPhoto {\n  dataType: 'Photo';\n  id?: string;\n  mediaUrl?: string;\n  fileName?: string;\n  name?: string;\n  orderIndex?: number;\n  sortOrder?: number;\n  isSecure?: boolean;\n  photoMetadata?: OrganizeMediaItemPhotoMetadata;\n  title?: string;\n  description?: string;\n  token?: string;\n  alt?: string;\n  link?: OrganizeMediaItemLink;\n  metaData?: OrganizeMediaItemMetadata;\n}\n\nexport interface OrganizeMediaItemVideoPoster {\n  url: string;\n  width?: number;\n  height?: number;\n}\n\nexport interface OrganizeMediaItemVideoMetadata {\n  width: number;\n  height: number;\n  duration: number;\n  posters: OrganizeMediaItemVideoPoster[];\n  focalPoint?: OrganizeMediaItemFocalPoint;\n}\n\nexport interface OrganizeMediaItemVideo {\n  dataType: 'Video';\n  id?: string;\n  mediaUrl?: string;\n  fileName?: string;\n  name?: string;\n  orderIndex?: number;\n  sortOrder?: number;\n  thumbnail?: string;\n  videoMetadata?: OrganizeMediaItemVideoMetadata;\n  title?: string;\n  description?: string;\n  alt?: string;\n  link?: OrganizeMediaItemLink;\n  metaData?: OrganizeMediaItemMetadata;\n}\n\nexport type OrganizeMediaItem = OrganizeMediaItemPhoto | OrganizeMediaItemVideo;\n\nexport interface OrganizeMediaItemChange {\n  itemId: string;\n  data: Partial<Omit<OrganizeMediaItem, 'id'>>;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/esm/cms-fields/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 == null ? void 0 : mediaItem.id, link);
+    onClose();
+  }, [mediaItem == null ? void 0 : mediaItem.id, onUpdateLink, onClose]);
+  return {
+    onLinkButtonClicked,
+    mediaType: mediaItem == null ? void 0 : mediaItem.dataType,
+    link: mediaItem == null ? void 0 : mediaItem.link,
+    isOpen: Boolean(mediaItem),
+    onClose,
+    onSave
+  };
+};
+//# sourceMappingURL=use-add-link-modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useState","useAddLinkModal","onUpdateLink","mediaItem","setMediaItem","onClose","undefined","onLinkButtonClicked","item","onSave","link","id","mediaType","dataType","isOpen","Boolean"],"sources":["../../../../../../src/cms-fields/components/media-gallery/media-gallery-dialog/use-add-link-modal.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport type { OrganizeMediaItem, OrganizeMediaItemLink } from './types';\n\nexport const useAddLinkModal = (\n  onUpdateLink: (itemId?: string, link?: OrganizeMediaItemLink) => void,\n) => {\n  const [mediaItem, setMediaItem] = useState<OrganizeMediaItem>();\n  const onClose = useCallback(() => setMediaItem(undefined), []);\n\n  const onLinkButtonClicked = useCallback(\n    (item: OrganizeMediaItem) => setMediaItem(item),\n    [],\n  );\n\n  const onSave = useCallback(\n    (link?: OrganizeMediaItemLink) => {\n      onUpdateLink(mediaItem?.id, link);\n      onClose();\n    },\n    [mediaItem?.id, onUpdateLink, onClose],\n  );\n\n  return {\n    onLinkButtonClicked,\n    mediaType: mediaItem?.dataType,\n    link: mediaItem?.link,\n    isOpen: Boolean(mediaItem),\n    onClose,\n    onSave,\n  };\n};\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AAG7C,OAAO,MAAMC,eAAe,GAC1BC,YAAqE,IAClE;EACH,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGJ,QAAQ,CAAoB,CAAC;EAC/D,MAAMK,OAAO,GAAGN,WAAW,CAAC,MAAMK,YAAY,CAACE,SAAS,CAAC,EAAE,EAAE,CAAC;EAE9D,MAAMC,mBAAmB,GAAGR,WAAW,CACpCS,IAAuB,IAAKJ,YAAY,CAACI,IAAI,CAAC,EAC/C,EACF,CAAC;EAED,MAAMC,MAAM,GAAGV,WAAW,CACvBW,IAA4B,IAAK;IAChCR,YAAY,CAACC,SAAS,oBAATA,SAAS,CAAEQ,EAAE,EAAED,IAAI,CAAC;IACjCL,OAAO,CAAC,CAAC;EACX,CAAC,EACD,CAACF,SAAS,oBAATA,SAAS,CAAEQ,EAAE,EAAET,YAAY,EAAEG,OAAO,CACvC,CAAC;EAED,OAAO;IACLE,mBAAmB;IACnBK,SAAS,EAAET,SAAS,oBAATA,SAAS,CAAEU,QAAQ;IAC9BH,IAAI,EAAEP,SAAS,oBAATA,SAAS,CAAEO,IAAI;IACrBI,MAAM,EAAEC,OAAO,CAACZ,SAAS,CAAC;IAC1BE,OAAO;IACPI;EACF,CAAC;AACH,CAAC","ignoreList":[]}