@wix/patterns-fields 1.0.0

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

@@ -0,0 +1,61 @@
+"use strict";
+
+exports.__esModule = true;
+exports.ItemActions = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _hooks = require("../../../hooks");
+var _hooks2 = require("./hooks");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/media-gallery/media-gallery-dialog/item-actions.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ItemActions = ({
+  item,
+  onReplace
+}) => {
+  const {
+    t
+  } = (0, _hooks.useTranslations)();
+  const onMediaReplaced = (0, _react.useCallback)(newItem => {
+    onReplace({
+      itemId: item.id ?? '',
+      data: newItem
+    });
+  }, [item.id, onReplace]);
+  const {
+    onOpen,
+    isLoading
+  } = (0, _hooks2.useReplaceMediaControl)(onMediaReplaced);
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    align: "center",
+    verticalAlign: "middle",
+    gap: "SP1",
+    paddingRight: "SP1",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Button, {
+    priority: "secondary",
+    size: "small",
+    onClick: onOpen,
+    dataHook: "media-gallery-replace-item",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 29,
+      columnNumber: 7
+    }
+  }, isLoading ? /*#__PURE__*/_react.default.createElement(_designSystem.Loader, {
+    size: "tiny",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 35,
+      columnNumber: 22
+    }
+  }) : t('CMS.mediaGallery.replaceItem')));
+};
+exports.ItemActions = ItemActions;
+//# sourceMappingURL=item-actions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_hooks","_hooks2","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ItemActions","item","onReplace","useTranslations","onMediaReplaced","useCallback","newItem","itemId","id","data","onOpen","isLoading","useReplaceMediaControl","createElement","Box","align","verticalAlign","gap","paddingRight","__self","__source","fileName","lineNumber","columnNumber","Button","priority","size","onClick","dataHook","Loader","exports"],"sources":["../../../../../src/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":"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","ignoreList":[]}

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

@@ -0,0 +1,181 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.MediaGalleryDialog = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _usePersistedState = require("../../../hooks/usePersistedState");
+var _patternsFieldsBundledOrganizeMedia = require("@wix/patterns-fields-utils/@wix/patterns-fields-bundled-organize-media");
+require("@wix/patterns-fields-utils/@wix/patterns-fields-bundled-organize-media/dist/esm/index.global.css");
+var _hooks = require("../../../hooks");
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _utils = require("./utils");
+var _hooks2 = require("./hooks");
+var _addMediaButton = require("./add-media-button");
+var _noItemsView = require("./no-items-view");
+var _itemActions = require("./item-actions");
+var _addLinkModal = require("./add-link-modal");
+var _useAddLinkModal = require("./use-add-link-modal");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/media-gallery/media-gallery-dialog/media-gallery-dialog.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ITEM_EDITING_OPTION = {
+  link: false,
+  title: true,
+  description: true,
+  focalPoint: true,
+  alt: true,
+  externalLink: true
+};
+const toOrganizeMediaItems = items => items.map(_utils.convertWixCodeGalleryItemToOrganizeMediaItem).filter(Boolean);
+const fromOrganizeMediaItems = organizeMediaItems => organizeMediaItems.map(_utils.convertOrganizeMediaItemToWixCodeGalleryItem).filter(Boolean);
+const MediaGalleryDialog = ({
+  isOpen,
+  items,
+  onClose,
+  onChange
+}) => {
+  const {
+    t
+  } = (0, _hooks.useTranslations)();
+  const [organizeMediaItems, setOrganizeMediaItems] = (0, _react.useState)(toOrganizeMediaItems(items));
+  const [imageAddDirection, setImageAddDirection] = (0, _usePersistedState.usePersistedState)('patterns-fields:media-gallery-dialog-image-add-direction', _patternsFieldsBundledOrganizeMedia.ADD_ITEMS_DIRECTION.GALLERY_END);
+  const [defaultNewItemName, setDefaultNewItemName] = (0, _usePersistedState.usePersistedState)('patterns-fields:media-gallery-dialog-default-new-item-name', _patternsFieldsBundledOrganizeMedia.NAME_NEW_ITEMS.FILE_NAME);
+  const organizeMediaContentKeys = (0, _hooks2.useContentKeys)(organizeMediaItems);
+  const prevItemsRef = (0, _react.useRef)(items);
+  (0, _react.useEffect)(() => {
+    if (!(0, _isEqual.default)(items, prevItemsRef.current)) {
+      setOrganizeMediaItems(toOrganizeMediaItems(items));
+    }
+    prevItemsRef.current = items;
+  }, [items]);
+  const onAddMedia = (0, _react.useCallback)(newItems => {
+    const itemsToAdd = defaultNewItemName === _patternsFieldsBundledOrganizeMedia.NAME_NEW_ITEMS.EMPTY ? (0, _utils.setItemsEmptyTitles)(newItems) : newItems;
+    setOrganizeMediaItems(currentItems => {
+      const merged = imageAddDirection === _patternsFieldsBundledOrganizeMedia.ADD_ITEMS_DIRECTION.GALLERY_START ? [...itemsToAdd, ...currentItems] : [...currentItems, ...itemsToAdd];
+      return merged.map((item, orderIndex) => ({
+        ...item,
+        orderIndex
+      }));
+    });
+  }, [defaultNewItemName, imageAddDirection]);
+  const onDeleteImages = (0, _react.useCallback)(itemIds => {
+    setOrganizeMediaItems(currentItems => currentItems.filter(({
+      id
+    }) => !itemIds.includes(id ?? '')).map((item, orderIndex) => ({
+      ...item,
+      orderIndex
+    })));
+  }, []);
+  const onItemsOrderIndexUpdated = (0, _react.useCallback)(changes => {
+    setOrganizeMediaItems(currentItems => (0, _utils.applyOrganizeMediaItemsChanges)(currentItems, changes));
+  }, []);
+  const onItemUpdated = (0, _react.useCallback)(change => {
+    setOrganizeMediaItems(currentItems => (0, _utils.applyOrganizeMediaItemsChanges)(currentItems, [change]));
+  }, []);
+  const onItemReplaced = (0, _react.useCallback)(({
+    itemId,
+    data
+  }) => {
+    setOrganizeMediaItems(currentItems => {
+      const itemToReplace = currentItems.find(({
+        id
+      }) => id === itemId);
+      const orderIndex = (itemToReplace == null ? void 0 : itemToReplace.orderIndex) ?? data.orderIndex;
+      const change = {
+        itemId,
+        data: {
+          ...data,
+          orderIndex
+        }
+      };
+      return (0, _utils.applyOrganizeMediaItemsChanges)(currentItems, [change]);
+    });
+  }, []);
+  const onCloseOrganizeMedia = (0, _react.useCallback)(() => {
+    onChange == null || onChange(fromOrganizeMediaItems(organizeMediaItems));
+    onClose == null || onClose();
+  }, [onChange, onClose, organizeMediaItems]);
+
+  // Link editing: OrganizeMedia fires onLinkButtonClicked, we show AddLinkModal
+  const onUpdateLink = (0, _react.useCallback)((itemId, link) => {
+    setOrganizeMediaItems(currentItems => currentItems.map(item => item.id === itemId ? {
+      ...item,
+      link
+    } : item));
+  }, []);
+  const {
+    onLinkButtonClicked,
+    ...addLinkModalProps
+  } = (0, _useAddLinkModal.useAddLinkModal)(onUpdateLink);
+  const noItemsViewRenderer = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement(_noItemsView.NoItemsView, {
+    onAddMedia: onAddMedia,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 158,
+      columnNumber: 11
+    }
+  }), [onAddMedia]);
+  const uploadMediaRenderer = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement(_addMediaButton.AddMediaButton, {
+    onAddMedia: onAddMedia,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 163,
+      columnNumber: 11
+    }
+  }), [onAddMedia]);
+  const itemActionsRenderer = (0, _react.useCallback)(({
+    item
+  }) => /*#__PURE__*/_react.default.createElement(_itemActions.ItemActions, {
+    item: item,
+    onReplace: onItemReplaced,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 169,
+      columnNumber: 7
+    }
+  }), [onItemReplaced]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_patternsFieldsBundledOrganizeMedia.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,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 176,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/_react.default.createElement(_addLinkModal.AddLinkModal, (0, _extends2.default)({}, addLinkModalProps, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 200,
+      columnNumber: 7
+    }
+  })));
+};
+exports.MediaGalleryDialog = MediaGalleryDialog;
+MediaGalleryDialog.displayName = 'MediaGalleryDialog';
+//# sourceMappingURL=media-gallery-dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_usePersistedState","_patternsFieldsBundledOrganizeMedia","_hooks","_isEqual","_interopRequireDefault","_utils","_hooks2","_addMediaButton","_noItemsView","_itemActions","_addLinkModal","_useAddLinkModal","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ITEM_EDITING_OPTION","link","title","description","focalPoint","alt","externalLink","toOrganizeMediaItems","items","map","convertWixCodeGalleryItemToOrganizeMediaItem","filter","Boolean","fromOrganizeMediaItems","organizeMediaItems","convertOrganizeMediaItemToWixCodeGalleryItem","MediaGalleryDialog","isOpen","onClose","onChange","useTranslations","setOrganizeMediaItems","useState","imageAddDirection","setImageAddDirection","usePersistedState","ADD_ITEMS_DIRECTION","GALLERY_END","defaultNewItemName","setDefaultNewItemName","NAME_NEW_ITEMS","FILE_NAME","organizeMediaContentKeys","useContentKeys","prevItemsRef","useRef","useEffect","isEqual","current","onAddMedia","useCallback","newItems","itemsToAdd","EMPTY","setItemsEmptyTitles","currentItems","merged","GALLERY_START","item","orderIndex","onDeleteImages","itemIds","id","includes","onItemsOrderIndexUpdated","changes","applyOrganizeMediaItemsChanges","onItemUpdated","change","onItemReplaced","itemId","data","itemToReplace","find","onCloseOrganizeMedia","onUpdateLink","onLinkButtonClicked","addLinkModalProps","useAddLinkModal","noItemsViewRenderer","createElement","NoItemsView","__self","__source","fileName","lineNumber","columnNumber","uploadMediaRenderer","AddMediaButton","itemActionsRenderer","ItemActions","onReplace","Fragment","OrganizeMedia","contentKeys","baseUrl","usePaging","shouldVerifySorting","shouldShowPhotoRightsNotification","showItemNameInSettings","itemEditingOption","onImageAddDirectionChange","onDefaultNewItemNameChange","AddLinkModal","_extends2","exports","displayName"],"sources":["../../../../../src/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/patterns-fields-utils/@wix/patterns-fields-bundled-organize-media';\nimport '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-organize-media/dist/esm/index.global.css';\nimport type { WixCodeGalleryItem } from '../../../auto-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    'patterns-fields:media-gallery-dialog-image-add-direction',\n    ADD_ITEMS_DIRECTION.GALLERY_END,\n  );\n  const [defaultNewItemName, setDefaultNewItemName] = usePersistedState(\n    'patterns-fields: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":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAD,OAAA;AACA,IAAAE,mCAAA,GAAAF,OAAA;AAKAA,OAAA;AAEA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAC,sBAAA,CAAAL,OAAA;AAQA,IAAAM,MAAA,GAAAN,OAAA;AAMA,IAAAO,OAAA,GAAAP,OAAA;AACA,IAAAQ,eAAA,GAAAR,OAAA;AACA,IAAAS,YAAA,GAAAT,OAAA;AACA,IAAAU,YAAA,GAAAV,OAAA;AACA,IAAAW,aAAA,GAAAX,OAAA;AACA,IAAAY,gBAAA,GAAAZ,OAAA;AAAuD,IAAAa,YAAA;AAAA,SAAAd,wBAAAe,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAjB,uBAAA,YAAAA,CAAAe,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEvD,MAAMkB,mBAAmB,GAAG;EAC1BC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,IAAI;EACXC,WAAW,EAAE,IAAI;EACjBC,UAAU,EAAE,IAAI;EAChBC,GAAG,EAAE,IAAI;EACTC,YAAY,EAAE;AAChB,CAAU;AAEV,MAAMC,oBAAoB,GAAIC,KAA2B,IACvDA,KAAK,CACFC,GAAG,CAACC,mDAA4C,CAAC,CACjDC,MAAM,CAACC,OAAO,CAAwB;AAE3C,MAAMC,sBAAsB,GAAIC,kBAAuC,IACrEA,kBAAkB,CACfL,GAAG,CAACM,mDAA4C,CAAC,CACjDJ,MAAM,CAACC,OAAO,CAAyB;AAErC,MAAMI,kBAAqD,GAAGA,CAAC;EACpEC,MAAM;EACNT,KAAK;EACLU,OAAO;EACPC;AACF,CAAC,KAAK;EACJ,MAAM;IAAErC;EAAE,CAAC,GAAG,IAAAsC,sBAAe,EAAC,CAAC;EAE/B,MAAM,CAACN,kBAAkB,EAAEO,qBAAqB,CAAC,GAAG,IAAAC,eAAQ,EAC1Df,oBAAoB,CAACC,KAAK,CAC5B,CAAC;EAED,MAAM,CAACe,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG,IAAAC,oCAAiB,EACjE,0DAA0D,EAC1DC,uDAAmB,CAACC,WACtB,CAAC;EACD,MAAM,CAACC,kBAAkB,EAAEC,qBAAqB,CAAC,GAAG,IAAAJ,oCAAiB,EACnE,4DAA4D,EAC5DK,kDAAc,CAACC,SACjB,CAAC;EAED,MAAMC,wBAAwB,GAAG,IAAAC,sBAAc,EAACnB,kBAAkB,CAAC;EAEnE,MAAMoB,YAAY,GAAG,IAAAC,aAAM,EAAC3B,KAAK,CAAC;EAClC,IAAA4B,gBAAS,EAAC,MAAM;IACd,IAAI,CAAC,IAAAC,gBAAO,EAAC7B,KAAK,EAAE0B,YAAY,CAACI,OAAO,CAAC,EAAE;MACzCjB,qBAAqB,CAACd,oBAAoB,CAACC,KAAK,CAAC,CAAC;IACpD;IACA0B,YAAY,CAACI,OAAO,GAAG9B,KAAK;EAC9B,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,MAAM+B,UAAU,GAAG,IAAAC,kBAAW,EAC3BC,QAA6B,IAAK;IACjC,MAAMC,UAAU,GACdd,kBAAkB,KAAKE,kDAAc,CAACa,KAAK,GACvC,IAAAC,0BAAmB,EAACH,QAAQ,CAAC,GAC7BA,QAAQ;IAEdpB,qBAAqB,CAAEwB,YAAY,IAAK;MACtC,MAAMC,MAAM,GACVvB,iBAAiB,KAAKG,uDAAmB,CAACqB,aAAa,GACnD,CAAC,GAAGL,UAAU,EAAE,GAAGG,YAAY,CAAC,GAChC,CAAC,GAAGA,YAAY,EAAE,GAAGH,UAAU,CAAC;MACtC,OAAOI,MAAM,CAACrC,GAAG,CAAC,CAACuC,IAAI,EAAEC,UAAU,MAAM;QACvC,GAAGD,IAAI;QACPC;MACF,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;EACJ,CAAC,EACD,CAACrB,kBAAkB,EAAEL,iBAAiB,CACxC,CAAC;EAED,MAAM2B,cAAc,GAAG,IAAAV,kBAAW,EAAEW,OAAiB,IAAK;IACxD9B,qBAAqB,CAAEwB,YAAY,IACjCA,YAAY,CACTlC,MAAM,CAAC,CAAC;MAAEyC;IAAG,CAAC,KAAK,CAACD,OAAO,CAACE,QAAQ,CAACD,EAAE,IAAI,EAAE,CAAC,CAAC,CAC/C3C,GAAG,CAAC,CAACuC,IAAI,EAAEC,UAAU,MAAM;MAAE,GAAGD,IAAI;MAAEC;IAAW,CAAC,CAAC,CACxD,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMK,wBAAwB,GAAG,IAAAd,kBAAW,EACzCe,OAAkC,IAAK;IACtClC,qBAAqB,CAAEwB,YAAY,IACjC,IAAAW,qCAA8B,EAACX,YAAY,EAAEU,OAAO,CACtD,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,MAAME,aAAa,GAAG,IAAAjB,kBAAW,EAAEkB,MAA+B,IAAK;IACrErC,qBAAqB,CAAEwB,YAAY,IACjC,IAAAW,qCAA8B,EAACX,YAAY,EAAE,CAACa,MAAM,CAAC,CACvD,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,cAAc,GAAG,IAAAnB,kBAAW,EAChC,CAAC;IAAEoB,MAAM;IAAEC;EAA8B,CAAC,KAAK;IAC7CxC,qBAAqB,CAAEwB,YAAY,IAAK;MACtC,MAAMiB,aAAa,GAAGjB,YAAY,CAACkB,IAAI,CAAC,CAAC;QAAEX;MAAG,CAAC,KAAKA,EAAE,KAAKQ,MAAM,CAAC;MAClE,MAAMX,UAAU,GAAG,CAAAa,aAAa,oBAAbA,aAAa,CAAEb,UAAU,KAAIY,IAAI,CAACZ,UAAU;MAC/D,MAAMS,MAAM,GAAG;QAAEE,MAAM;QAAEC,IAAI,EAAE;UAAE,GAAGA,IAAI;UAAEZ;QAAW;MAAE,CAAC;MACxD,OAAO,IAAAO,qCAA8B,EAACX,YAAY,EAAE,CAACa,MAAM,CAAC,CAAC;IAC/D,CAAC,CAAC;EACJ,CAAC,EACD,EACF,CAAC;EAED,MAAMM,oBAAoB,GAAG,IAAAxB,kBAAW,EAAC,MAAM;IAC7CrB,QAAQ,YAARA,QAAQ,CAAGN,sBAAsB,CAACC,kBAAkB,CAAC,CAAC;IACtDI,OAAO,YAAPA,OAAO,CAAG,CAAC;EACb,CAAC,EAAE,CAACC,QAAQ,EAAED,OAAO,EAAEJ,kBAAkB,CAAC,CAAC;;EAE3C;EACA,MAAMmD,YAAY,GAAG,IAAAzB,kBAAW,EAC9B,CAACoB,MAAe,EAAE3D,IAA4B,KAAK;IACjDoB,qBAAqB,CAAEwB,YAAY,IACjCA,YAAY,CAACpC,GAAG,CAAEuC,IAAI,IACpBA,IAAI,CAACI,EAAE,KAAKQ,MAAM,GAAG;MAAE,GAAGZ,IAAI;MAAE/C;IAAK,CAAC,GAAG+C,IAC3C,CACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EACD,MAAM;IAAEkB,mBAAmB;IAAE,GAAGC;EAAkB,CAAC,GACjD,IAAAC,gCAAe,EAACH,YAAY,CAAC;EAE/B,MAAMI,mBAAmB,GAAG,IAAA7B,kBAAW,EACrC,mBAAM3E,MAAA,CAAA0B,OAAA,CAAA+E,aAAA,CAAC9F,YAAA,CAAA+F,WAAW;IAAChC,UAAU,EAAEA,UAAW;IAAAiC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA9F,YAAA;MAAA+F,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAAC,EAC7C,CAACrC,UAAU,CACb,CAAC;EAED,MAAMsC,mBAAmB,GAAG,IAAArC,kBAAW,EACrC,mBAAM3E,MAAA,CAAA0B,OAAA,CAAA+E,aAAA,CAAC/F,eAAA,CAAAuG,cAAc;IAACvC,UAAU,EAAEA,UAAW;IAAAiC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA9F,YAAA;MAAA+F,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAAC,EAChD,CAACrC,UAAU,CACb,CAAC;EAED,MAAMwC,mBAAmB,GAAG,IAAAvC,kBAAW,EACrC,CAAC;IAAEQ;EAAkC,CAAC,kBACpCnF,MAAA,CAAA0B,OAAA,CAAA+E,aAAA,CAAC7F,YAAA,CAAAuG,WAAW;IAAChC,IAAI,EAAEA,IAAK;IAACiC,SAAS,EAAEtB,cAAe;IAAAa,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA9F,YAAA;MAAA+F,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CACtD,EACD,CAACjB,cAAc,CACjB,CAAC;EAED,oBACE9F,MAAA,CAAA0B,OAAA,CAAA+E,aAAA,CAAAzG,MAAA,CAAA0B,OAAA,CAAA2F,QAAA,qBACErH,MAAA,CAAA0B,OAAA,CAAA+E,aAAA,CAACrG,mCAAA,CAAAkH,aAAa;IACZrG,CAAC,EAAEA,CAAE;IACLsG,WAAW,EAAEpD,wBAAyB;IACtCf,MAAM,EAAEA,MAAO;IACfT,KAAK,EAAEM,kBAAmB;IAC1BuE,OAAO,EAAC,EAAE;IACVC,SAAS;IACTC,mBAAmB,EAAE,KAAM;IAC3BC,iCAAiC,EAAE,KAAM;IACzCC,sBAAsB,EAAE,KAAM;IAC9BpB,mBAAmB,EAAEA,mBAAoB;IACzCQ,mBAAmB,EAAEA,mBAAoB;IACzCE,mBAAmB,EAAEA,mBAAoB;IACzCW,iBAAiB,EAAE1F,mBAAoB;IACvCuB,iBAAiB,EAAEA,iBAAkB;IACrCK,kBAAkB,EAAEA,kBAAmB;IACvC+D,yBAAyB,EAAEnE,oBAAqB;IAChDoE,0BAA0B,EAAE/D,qBAAsB;IAClDqB,cAAc,EAAEA,cAAe;IAC/BO,aAAa,EAAEA,aAAc;IAC7BH,wBAAwB,EAAEA,wBAAyB;IACnDpC,OAAO,EAAE8C,oBAAqB;IAC9BE,mBAAmB,EAAEA,mBAAoB;IAAAM,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA9F,YAAA;MAAA+F,UAAA;MAAAC,YAAA;IAAA;EAAA,CAC1C,CAAC,eACF/G,MAAA,CAAA0B,OAAA,CAAA+E,aAAA,CAAC5F,aAAA,CAAAmH,YAAY,MAAAC,SAAA,CAAAvG,OAAA,MAAK4E,iBAAiB;IAAAK,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA9F,YAAA;MAAA+F,UAAA;MAAAC,YAAA;IAAA;EAAA,EAAG,CACtC,CAAC;AAEP,CAAC;AAACmB,OAAA,CAAA/E,kBAAA,GAAAA,kBAAA;AAEFA,kBAAkB,CAACgF,WAAW,GAAG,oBAAoB","ignoreList":[]}

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

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.NoItemsView = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _designSystem = require("@wix/design-system");
+var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
+var _hooks = require("../../../hooks");
+var _hooks2 = require("./hooks");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/media-gallery/media-gallery-dialog/no-items-view.tsx";
+const NoItemsView = ({
+  onAddMedia
+}) => {
+  const {
+    t
+  } = (0, _hooks.useTranslations)();
+  const {
+    onOpen,
+    isLoading
+  } = (0, _hooks2.useAddMediaControl)(onAddMedia);
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    align: "center",
+    verticalAlign: "middle",
+    padding: "SP5",
+    direction: "vertical",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.EmptyState, {
+    theme: "section",
+    title: t('CMS.mediaGallery.noItems.title'),
+    subtitle: t('CMS.mediaGallery.noItems.subtitle'),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 23,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
+    prefixIcon: isLoading ? undefined : /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Add, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 29,
+        columnNumber: 47
+      }
+    }),
+    onClick: onOpen,
+    dataHook: "media-gallery-add-media-button",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 28,
+      columnNumber: 9
+    }
+  }, isLoading ? /*#__PURE__*/_react.default.createElement(_designSystem.Loader, {
+    size: "tiny",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 34,
+      columnNumber: 13
+    }
+  }) : t('CMS.mediaGallery.noItems.addMedia'))));
+};
+exports.NoItemsView = NoItemsView;
+//# sourceMappingURL=no-items-view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_wixUiIconsCommon","_hooks","_hooks2","_jsxFileName","NoItemsView","onAddMedia","t","useTranslations","onOpen","isLoading","useAddMediaControl","default","createElement","Box","align","verticalAlign","padding","direction","__self","__source","fileName","lineNumber","columnNumber","EmptyState","theme","title","subtitle","TextButton","prefixIcon","undefined","Add","onClick","dataHook","Loader","size","exports"],"sources":["../../../../../src/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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAA6C,IAAAK,YAAA;AAOtC,MAAMC,WAAuC,GAAGA,CAAC;EAAEC;AAAW,CAAC,KAAK;EACzE,MAAM;IAAEC;EAAE,CAAC,GAAG,IAAAC,sBAAe,EAAC,CAAC;EAC/B,MAAM;IAAEC,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,0BAAkB,EAACL,UAAU,CAAC;EAE5D,oBACET,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAAc,GAAG;IACFC,KAAK,EAAC,QAAQ;IACdC,aAAa,EAAC,QAAQ;IACtBC,OAAO,EAAC,KAAK;IACbC,SAAS,EAAC,UAAU;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjB,YAAA;MAAAkB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEpB1B,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAAwB,UAAU;IACTC,KAAK,EAAC,SAAS;IACfC,KAAK,EAAEnB,CAAC,CAAC,gCAAgC,CAAE;IAC3CoB,QAAQ,EAAEpB,CAAC,CAAC,mCAAmC,CAAE;IAAAY,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjB,YAAA;MAAAkB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEjD1B,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAA4B,UAAU;IACTC,UAAU,EAAEnB,SAAS,GAAGoB,SAAS,gBAAGjC,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACZ,iBAAA,CAAA8B,GAAO;MAAAZ,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAjB,YAAA;QAAAkB,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CAAE;IAChDS,OAAO,EAAEvB,MAAO;IAChBwB,QAAQ,EAAC,gCAAgC;IAAAd,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjB,YAAA;MAAAkB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAExCb,SAAS,gBACRb,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAAkC,MAAM;IAACC,IAAI,EAAC,MAAM;IAAAhB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAjB,YAAA;MAAAkB,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAAC,GAEtBhB,CAAC,CAAC,mCAAmC,CAE7B,CACF,CACT,CAAC;AAEV,CAAC;AAAC6B,OAAA,CAAA/B,WAAA,GAAAA,WAAA","ignoreList":[]}

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

@@ -0,0 +1,4 @@
+"use strict";
+
+exports.__esModule = true;
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../src/components/media-gallery/media-gallery-dialog/types.ts"],"sourcesContent":["import type { WixCodeGalleryItem } from '../../../auto-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/cjs/components/media-gallery/media-gallery-dialog/use-add-link-modal.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useAddLinkModal = void 0;
+var _react = require("react");
+const useAddLinkModal = onUpdateLink => {
+  const [mediaItem, setMediaItem] = (0, _react.useState)();
+  const onClose = (0, _react.useCallback)(() => setMediaItem(undefined), []);
+  const onLinkButtonClicked = (0, _react.useCallback)(item => setMediaItem(item), []);
+  const onSave = (0, _react.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
+  };
+};
+exports.useAddLinkModal = useAddLinkModal;
+//# sourceMappingURL=use-add-link-modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","useAddLinkModal","onUpdateLink","mediaItem","setMediaItem","useState","onClose","useCallback","undefined","onLinkButtonClicked","item","onSave","link","id","mediaType","dataType","isOpen","Boolean","exports"],"sources":["../../../../../src/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,IAAAA,MAAA,GAAAC,OAAA;AAGO,MAAMC,eAAe,GAC1BC,YAAqE,IAClE;EACH,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAC,eAAQ,EAAoB,CAAC;EAC/D,MAAMC,OAAO,GAAG,IAAAC,kBAAW,EAAC,MAAMH,YAAY,CAACI,SAAS,CAAC,EAAE,EAAE,CAAC;EAE9D,MAAMC,mBAAmB,GAAG,IAAAF,kBAAW,EACpCG,IAAuB,IAAKN,YAAY,CAACM,IAAI,CAAC,EAC/C,EACF,CAAC;EAED,MAAMC,MAAM,GAAG,IAAAJ,kBAAW,EACvBK,IAA4B,IAAK;IAChCV,YAAY,CAACC,SAAS,oBAATA,SAAS,CAAEU,EAAE,EAAED,IAAI,CAAC;IACjCN,OAAO,CAAC,CAAC;EACX,CAAC,EACD,CAACH,SAAS,oBAATA,SAAS,CAAEU,EAAE,EAAEX,YAAY,EAAEI,OAAO,CACvC,CAAC;EAED,OAAO;IACLG,mBAAmB;IACnBK,SAAS,EAAEX,SAAS,oBAATA,SAAS,CAAEY,QAAQ;IAC9BH,IAAI,EAAET,SAAS,oBAATA,SAAS,CAAES,IAAI;IACrBI,MAAM,EAAEC,OAAO,CAACd,SAAS,CAAC;IAC1BG,OAAO;IACPK;EACF,CAAC;AACH,CAAC;AAACO,OAAA,CAAAjB,eAAA,GAAAA,eAAA","ignoreList":[]}