@wix/auto-patterns 1.44.0 → 1.46.0

package/dist/cjs/cms-fields/components/media-image/media-image.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.useResetMediaImagesCacheEffect = exports.MediaImage = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _autoCmsFieldTypes = require("@wix/auto-cms-field-types");
+var _mediaImageStCss = require("./media-image.st.css.js");
+var _hooks = require("../../hooks");
+var _jsxFileName = "/home/builduser/work/8f3ab5a55e62623a/packages/auto-patterns/dist/cjs/cms-fields/components/media-image/media-image.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 MediaImage = ({
+  size = _autoCmsFieldTypes.ThumbnailSize.L,
+  fit = 'cover',
+  suspended = false,
+  overlay,
+  src,
+  onLoad,
+  onError,
+  width = '100%',
+  height = '100%',
+  borderRadius,
+  onMouseEnter,
+  onMouseLeave,
+  className,
+  dataHook,
+  ...props
+}) => {
+  const [allowLoading, setAllowLoading] = (0, _react.useState)(!suspended || isLoadedImage(src));
+  (0, _react.useEffect)(() => setAllowLoading(!suspended || isLoadedImage(src)), [src, suspended]);
+  const [loading, setLoading] = (0, _react.useState)(allowLoading);
+  const [error, setError] = (0, _react.useState)(isBrokenImage(src));
+  (0, _react.useEffect)(() => {
+    const isBroken = isBrokenImage(src);
+    setError(isBroken);
+    isBroken && (onError == null ? void 0 : onError());
+  }, [src, onError]);
+  const requestFrameCallback = (0, _hooks.useRequestIdleCallback)();
+  (0, _react.useEffect)(() => {
+    if (!allowLoading) {
+      requestFrameCallback(() => {
+        setAllowLoading(true);
+        setLoading(true);
+      });
+    }
+  }, [allowLoading, requestFrameCallback]);
+  const onImageLoad = (0, _react.useCallback)(() => {
+    if (allowLoading && src) {
+      imageLoaded(src);
+      setLoading(false);
+      setError(false);
+    }
+    onLoad == null || onLoad();
+  }, [allowLoading, onLoad, src]);
+  const onImageError = (0, _react.useCallback)(() => {
+    if (allowLoading && src) {
+      imageBroken(src);
+      setLoading(false);
+      setError(true);
+    }
+    onError == null || onError();
+  }, [allowLoading, onError, src]);
+  return /*#__PURE__*/_react.default.createElement("picture", {
+    "data-hook": dataHook,
+    style: {
+      width,
+      height,
+      borderRadius
+    },
+    className: (0, _mediaImageStCss.st)(_mediaImageStCss.classes.root, {
+      error,
+      loading
+    }, className),
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 91,
+      columnNumber: 5
+    }
+  }, !error && /*#__PURE__*/_react.default.createElement(_designSystem.Image, (0, _extends2.default)({}, props, {
+    fit: fit,
+    src: allowLoading && src ? (0, _autoCmsFieldTypes.mediaURItoImageURL)(src, size) : '',
+    width: width,
+    height: height,
+    borderRadius: borderRadius,
+    onLoad: onImageLoad,
+    dataHook: "media-image-image",
+    onError: onImageError,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 99,
+      columnNumber: 9
+    }
+  })), overlay);
+};
+exports.MediaImage = MediaImage;
+MediaImage.displayName = 'MediaImage';
+MediaImage.Size = _autoCmsFieldTypes.ThumbnailSize;
+MediaImage.loadedImages = new Set();
+MediaImage.brokenImages = new Set();
+MediaImage.resetBrokenImagesCache = () => {
+  MediaImage.brokenImages.clear();
+};
+const useResetMediaImagesCacheEffect = () => {
+  (0, _react.useEffect)(() => () => {
+    MediaImage.resetBrokenImagesCache();
+  }, []);
+};
+exports.useResetMediaImagesCacheEffect = useResetMediaImagesCacheEffect;
+function imageLoaded(src) {
+  MediaImage.loadedImages.add(src);
+  MediaImage.brokenImages.delete(src);
+}
+function isLoadedImage(src) {
+  return src ? MediaImage.loadedImages.has(src) : false;
+}
+function imageBroken(src) {
+  MediaImage.brokenImages.add(src);
+}
+function isBrokenImage(src) {
+  return src ? MediaImage.brokenImages.has(src) : false;
+}
+//# sourceMappingURL=media-image.js.map

package/dist/cjs/cms-fields/components/media-image/media-image.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_autoCmsFieldTypes","_mediaImageStCss","_hooks","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MediaImage","size","ThumbnailSize","L","fit","suspended","overlay","src","onLoad","onError","width","height","borderRadius","onMouseEnter","onMouseLeave","className","dataHook","props","allowLoading","setAllowLoading","useState","isLoadedImage","useEffect","loading","setLoading","error","setError","isBrokenImage","isBroken","requestFrameCallback","useRequestIdleCallback","onImageLoad","useCallback","imageLoaded","onImageError","imageBroken","createElement","style","st","classes","root","__self","__source","fileName","lineNumber","columnNumber","Image","_extends2","mediaURItoImageURL","exports","displayName","Size","loadedImages","Set","brokenImages","resetBrokenImagesCache","clear","useResetMediaImagesCacheEffect","add","delete"],"sources":["../../../../../src/cms-fields/components/media-image/media-image.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\n\nimport type { ImageProps } from '@wix/design-system';\nimport { Image } from '@wix/design-system';\nimport { mediaURItoImageURL, ThumbnailSize } from '@wix/auto-cms-field-types';\n\nimport { classes, st } from './media-image.st.css.js';\nimport { useRequestIdleCallback } from '../../hooks';\n\nexport interface MediaImageProps\n  extends Omit<ImageProps, 'onLoad' | 'onError'> {\n  size?: ThumbnailSize | number;\n  suspended?: boolean;\n  overlay?: React.ReactNode;\n  onLoad?: () => void;\n  onError?: () => void;\n}\n\ntype MediaImageFC = React.FC<MediaImageProps> & {\n  Size: typeof ThumbnailSize;\n  loadedImages: Set<string>;\n  brokenImages: Set<string>;\n  resetBrokenImagesCache: () => void;\n};\n\nexport const MediaImage: MediaImageFC = ({\n  size = ThumbnailSize.L,\n  fit = 'cover',\n  suspended = false,\n  overlay,\n  src,\n  onLoad,\n  onError,\n  width = '100%',\n  height = '100%',\n  borderRadius,\n  onMouseEnter,\n  onMouseLeave,\n  className,\n  dataHook,\n  ...props\n}) => {\n  const [allowLoading, setAllowLoading] = useState(\n    !suspended || isLoadedImage(src),\n  );\n  useEffect(\n    () => setAllowLoading(!suspended || isLoadedImage(src)),\n    [src, suspended],\n  );\n\n  const [loading, setLoading] = useState(allowLoading);\n\n  const [error, setError] = useState(isBrokenImage(src));\n  useEffect(() => {\n    const isBroken = isBrokenImage(src);\n    setError(isBroken);\n    isBroken && onError?.();\n  }, [src, onError]);\n\n  const requestFrameCallback = useRequestIdleCallback();\n  useEffect(() => {\n    if (!allowLoading) {\n      requestFrameCallback(() => {\n        setAllowLoading(true);\n        setLoading(true);\n      });\n    }\n  }, [allowLoading, requestFrameCallback]);\n\n  const onImageLoad = useCallback(() => {\n    if (allowLoading && src) {\n      imageLoaded(src);\n      setLoading(false);\n      setError(false);\n    }\n\n    onLoad?.();\n  }, [allowLoading, onLoad, src]);\n\n  const onImageError = useCallback(() => {\n    if (allowLoading && src) {\n      imageBroken(src);\n      setLoading(false);\n      setError(true);\n    }\n\n    onError?.();\n  }, [allowLoading, onError, src]);\n\n  return (\n    <picture\n      data-hook={dataHook}\n      style={{ width, height, borderRadius }}\n      className={st(classes.root, { error, loading }, className)}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {!error && (\n        <Image\n          {...props}\n          fit={fit}\n          src={allowLoading && src ? mediaURItoImageURL(src, size) : ''}\n          width={width}\n          height={height}\n          borderRadius={borderRadius}\n          onLoad={onImageLoad}\n          dataHook=\"media-image-image\"\n          onError={onImageError}\n        />\n      )}\n      {overlay}\n    </picture>\n  );\n};\n\nMediaImage.displayName = 'MediaImage';\n\nMediaImage.Size = ThumbnailSize;\n\nMediaImage.loadedImages = new Set();\nMediaImage.brokenImages = new Set();\n\nMediaImage.resetBrokenImagesCache = () => {\n  MediaImage.brokenImages.clear();\n};\n\nexport const useResetMediaImagesCacheEffect = () => {\n  useEffect(\n    () => () => {\n      MediaImage.resetBrokenImagesCache();\n    },\n    [],\n  );\n};\n\nfunction imageLoaded(src: string) {\n  MediaImage.loadedImages.add(src);\n  MediaImage.brokenImages.delete(src);\n}\n\nfunction isLoadedImage(src?: string) {\n  return src ? MediaImage.loadedImages.has(src) : false;\n}\n\nfunction imageBroken(src: string) {\n  MediaImage.brokenImages.add(src);\n}\n\nfunction isBrokenImage(src?: string) {\n  return src ? MediaImage.brokenImages.has(src) : false;\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/cms-fields/components/media-image/media-image.st.css

@@ -0,0 +1,30 @@
+@property st-global(--wds-color-red-200);
+@property st-global(--wsr-color-R20);
+@property st-global(--wds-color-black-550);
+@property st-global(--wsr-color-D55);
+
+.root {
+  -st-states: error, loading;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.root:error {
+  --from: calc(50% - 0.5px);
+  --to: calc(50% + 0.5px);
+
+  background-image: linear-gradient(
+    to bottom right,
+    transparent var(--from),
+    var(--wds-color-red-200, var(--wsr-color-R20)) var(--from),
+    var(--wds-color-red-200, var(--wsr-color-R20)) var(--to),
+    transparent var(--to)
+  );
+}
+
+.root:error > * {
+  opacity: 0;
+}

package/dist/cjs/cms-fields/components/media-image/media-image.st.css.js

@@ -0,0 +1,29 @@
+"use strict";
+
+exports.__esModule = true;
+exports.vars = exports.style = exports.stVars = exports.st = exports.namespace = exports.layers = exports.keyframes = exports.cssStates = exports.containers = exports.classes = void 0;
+var _stylableEsmRuntime = require("../../../stylable-esm-runtime.js");
+// @ts-nocheck
+
+var _namespace_ = "mediaimage2553715898";
+var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
+var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
+var style = exports.style = _style_;
+var st = exports.st = _style_;
+var namespace = exports.namespace = _namespace_;
+var classes = exports.classes = {
+  "root": "mediaimage2553715898__root"
+};
+var keyframes = exports.keyframes = {};
+var layers = exports.layers = {};
+var containers = exports.containers = {};
+var stVars = exports.stVars = {};
+var vars = exports.vars = {
+  "wds-color-red-200": "--wds-color-red-200",
+  "wsr-color-R20": "--wsr-color-R20",
+  "wds-color-black-550": "--wds-color-black-550",
+  "wsr-color-D55": "--wsr-color-D55",
+  "from": "--mediaimage2553715898-from",
+  "to": "--mediaimage2553715898-to"
+};
+//# sourceMappingURL=media-image.st.css.js.map

package/dist/cjs/cms-fields/components/media-image/media-image.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/cms-fields/components/media-image/media-image.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"mediaimage2553715898\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"mediaimage2553715898__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-red-200\":\"--wds-color-red-200\",\"wsr-color-R20\":\"--wsr-color-R20\",\"wds-color-black-550\":\"--wds-color-black-550\",\"wsr-color-D55\":\"--wsr-color-D55\",\"from\":\"--mediaimage2553715898-from\",\"to\":\"--mediaimage2553715898-to\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,sBAAsB;AACxC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA4B,CAAC;AACnD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,mBAAmB,EAAC,qBAAqB;EAAC,eAAe,EAAC,iBAAiB;EAAC,qBAAqB,EAAC,uBAAuB;EAAC,eAAe,EAAC,iBAAiB;EAAC,MAAM,EAAC,6BAA6B;EAAC,IAAI,EAAC;AAA2B,CAAC","ignoreList":[]}

package/dist/cjs/cms-fields/components/multi-document/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+exports.MultiDocumentView = exports.FormMultiDocumentField = void 0;
+var _multiDocumentView = require("./multi-document-view/multi-document-view");
+exports.MultiDocumentView = _multiDocumentView.MultiDocumentView;
+var _formMultiDocumentField = require("./multi-document-input/form-multi-document-field");
+exports.FormMultiDocumentField = _formMultiDocumentField.FormMultiDocumentField;
+//# sourceMappingURL=index.js.map

package/dist/cjs/cms-fields/components/multi-document/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_multiDocumentView","require","exports","MultiDocumentView","_formMultiDocumentField","FormMultiDocumentField"],"sources":["../../../../../src/cms-fields/components/multi-document/index.ts"],"sourcesContent":["export { MultiDocumentView } from './multi-document-view/multi-document-view';\nexport { FormMultiDocumentField } from './multi-document-input/form-multi-document-field';\n"],"mappings":";;;;AAAA,IAAAA,kBAAA,GAAAC,OAAA;AAA8EC,OAAA,CAAAC,iBAAA,GAAAH,kBAAA,CAAAG,iBAAA;AAC9E,IAAAC,uBAAA,GAAAH,OAAA;AAA0FC,OAAA,CAAAG,sBAAA,GAAAD,uBAAA,CAAAC,sBAAA","ignoreList":[]}

package/dist/cjs/cms-fields/components/multi-document/multi-document-input/form-multi-document-field.js

@@ -0,0 +1,109 @@
+"use strict";
+
+exports.__esModule = true;
+exports.FormMultiDocumentField = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _mediaUtils = require("../../../utils/media-utils");
+var _mediaControl = require("../../media-control");
+var _form = require("../../document/form");
+var _hooks = require("../../../hooks");
+var _formMultiDocumentView = require("./form-multi-document-view");
+var _jsxFileName = "/home/builduser/work/8f3ab5a55e62623a/packages/auto-patterns/dist/cjs/cms-fields/components/multi-document/multi-document-input/form-multi-document-field.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 FormMultiDocumentField = ({
+  data,
+  onChange: onChangeMultiDocument,
+  onInput,
+  autoFocus,
+  readOnly,
+  invalid,
+  dataHook
+}) => {
+  const {
+    t
+  } = (0, _hooks.useTranslations)();
+  const onChange = (0, _hooks.useWithCallback)(onChangeMultiDocument, onInput);
+  const inputRef = (0, _react.useRef)(null);
+  const firstDocumentViewRef = (0, _react.useRef)(null);
+  const {
+    callMedia,
+    loading
+  } = (0, _mediaControl.useMediaControl)({
+    mediaType: _mediaUtils.MEDIA_TYPES.ALL_MEDIA,
+    value: data,
+    onChange,
+    autoFocus,
+    readOnly,
+    inputRef,
+    viewRef: firstDocumentViewRef,
+    multiSelect: true
+  });
+  const onPastedURLChange = (0, _react.useCallback)((value, indexToReplace) => {
+    if (indexToReplace !== undefined) {
+      const nextData = [...(data ?? [])];
+      nextData.splice(indexToReplace, 1, value);
+      onChange(nextData);
+    } else {
+      onChange([...(data ?? []), value]);
+    }
+  }, [data, onChange]);
+  const {
+    isOpen,
+    title,
+    onOpen,
+    onClose,
+    onSave,
+    value
+  } = (0, _mediaControl.usePasteURLForm)({
+    onChange: onPastedURLChange
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, data != null && data.length ? /*#__PURE__*/_react.default.createElement(_formMultiDocumentView.FormMultiDocumentView, {
+    dataHook: dataHook,
+    data: data,
+    readOnly: readOnly,
+    callMedia: callMedia,
+    onChange: onChange,
+    ref: firstDocumentViewRef,
+    loading: loading,
+    onOpenPasteURLForm: onOpen,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 66,
+      columnNumber: 9
+    }
+  }) : /*#__PURE__*/_react.default.createElement(_form.FormDocumentInput, {
+    dataHook: dataHook,
+    ref: inputRef,
+    theme: "dashes",
+    disabled: readOnly,
+    loading: loading,
+    error: invalid,
+    loaderBorderStyle: "dashed",
+    onAddButtonClick: callMedia,
+    onPasteURLButtonClick: onOpen({
+      title: t('CMS.document.pasteUrl.title')
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 77,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/_react.default.createElement(_mediaControl.PasteURLForm, {
+    title: title,
+    value: value,
+    show: isOpen,
+    closeModal: onClose,
+    onSave: onSave,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 91,
+      columnNumber: 7
+    }
+  }));
+};
+exports.FormMultiDocumentField = FormMultiDocumentField;
+FormMultiDocumentField.displayName = 'FormMultiDocumentField';
+//# sourceMappingURL=form-multi-document-field.js.map

package/dist/cjs/cms-fields/components/multi-document/multi-document-input/form-multi-document-field.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_mediaUtils","_mediaControl","_form","_hooks","_formMultiDocumentView","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FormMultiDocumentField","data","onChange","onChangeMultiDocument","onInput","autoFocus","readOnly","invalid","dataHook","useTranslations","useWithCallback","inputRef","useRef","firstDocumentViewRef","callMedia","loading","useMediaControl","mediaType","MEDIA_TYPES","ALL_MEDIA","value","viewRef","multiSelect","onPastedURLChange","useCallback","indexToReplace","undefined","nextData","splice","isOpen","title","onOpen","onClose","onSave","usePasteURLForm","createElement","Fragment","length","FormMultiDocumentView","ref","onOpenPasteURLForm","__self","__source","fileName","lineNumber","columnNumber","FormDocumentInput","theme","disabled","error","loaderBorderStyle","onAddButtonClick","onPasteURLButtonClick","PasteURLForm","show","closeModal","exports","displayName"],"sources":["../../../../../../src/cms-fields/components/multi-document/multi-document-input/form-multi-document-field.tsx"],"sourcesContent":["import React, { useRef, useCallback } from 'react';\n\nimport { MEDIA_TYPES } from '../../../utils/media-utils';\nimport type { AddItemActions } from '@wix/design-system';\n\nimport type { FormMediaControlProps } from '../../media-control';\nimport {\n  PasteURLForm,\n  useMediaControl,\n  usePasteURLForm,\n} from '../../media-control';\nimport { FormDocumentInput } from '../../document/form';\nimport { useTranslations, useWithCallback } from '../../../hooks';\n\nimport { FormMultiDocumentView } from './form-multi-document-view';\n\nexport const FormMultiDocumentField: React.FC<\n  FormMediaControlProps<string[]>\n> = ({\n  data,\n  onChange: onChangeMultiDocument,\n  onInput,\n  autoFocus,\n  readOnly,\n  invalid,\n  dataHook,\n}) => {\n  const { t } = useTranslations();\n\n  const onChange = useWithCallback(onChangeMultiDocument, onInput);\n\n  const inputRef = useRef<AddItemActions>(null);\n  const firstDocumentViewRef = useRef<HTMLDivElement>(null);\n\n  const { callMedia, loading } = useMediaControl({\n    mediaType: MEDIA_TYPES.ALL_MEDIA,\n    value: data,\n    onChange,\n    autoFocus,\n    readOnly,\n    inputRef,\n    viewRef: firstDocumentViewRef,\n    multiSelect: true,\n  });\n\n  const onPastedURLChange = useCallback(\n    (value: string, indexToReplace?: number) => {\n      if (indexToReplace !== undefined) {\n        const nextData = [...(data ?? [])];\n        nextData.splice(indexToReplace, 1, value);\n        onChange(nextData);\n      } else {\n        onChange([...(data ?? []), value]);\n      }\n    },\n    [data, onChange],\n  );\n\n  const { isOpen, title, onOpen, onClose, onSave, value } = usePasteURLForm({\n    onChange: onPastedURLChange,\n  });\n\n  return (\n    <>\n      {data?.length ? (\n        <FormMultiDocumentView\n          dataHook={dataHook}\n          data={data}\n          readOnly={readOnly}\n          callMedia={callMedia}\n          onChange={onChange}\n          ref={firstDocumentViewRef}\n          loading={loading}\n          onOpenPasteURLForm={onOpen}\n        />\n      ) : (\n        <FormDocumentInput\n          dataHook={dataHook}\n          ref={inputRef}\n          theme=\"dashes\"\n          disabled={readOnly}\n          loading={loading}\n          error={invalid}\n          loaderBorderStyle=\"dashed\"\n          onAddButtonClick={callMedia as () => Promise<void>}\n          onPasteURLButtonClick={onOpen({\n            title: t('CMS.document.pasteUrl.title'),\n          })}\n        />\n      )}\n      <PasteURLForm\n        title={title}\n        value={value}\n        show={isOpen}\n        closeModal={onClose}\n        onSave={onSave}\n      />\n    </>\n  );\n};\n\nFormMultiDocumentField.displayName = 'FormMultiDocumentField';\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/cms-fields/components/multi-document/multi-document-input/form-multi-document-view.js

@@ -0,0 +1,128 @@
+"use strict";
+
+exports.__esModule = true;
+exports.FormMultiDocumentView = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _form = require("../../document/form");
+var _mediaControl = require("../../media-control");
+var _deleteDialog = require("../../delete-dialog");
+var _hooks = require("../../../hooks");
+var _formMultiDocumentStCss = require("./form-multi-document.st.css.js");
+var _jsxFileName = "/home/builduser/work/8f3ab5a55e62623a/packages/auto-patterns/dist/cjs/cms-fields/components/multi-document/multi-document-input/form-multi-document-view.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 FormMultiDocumentView = exports.FormMultiDocumentView = /*#__PURE__*/_react.default.forwardRef(({
+  data,
+  readOnly,
+  onChange,
+  callMedia,
+  loading,
+  dataHook,
+  onOpenPasteURLForm
+}, ref) => {
+  const {
+    t
+  } = (0, _hooks.useTranslations)();
+  const [replacedDocumentIndex, setReplacedDocumentIndex] = (0, _react.useState)(null);
+  const {
+    isOpen,
+    onDelete,
+    onDeleteCancel,
+    onDeleteConfirm,
+    title,
+    text
+  } = (0, _mediaControl.useDocumentDelete)({
+    data,
+    onChange
+  });
+  const onReplace = (0, _react.useCallback)(index => async () => {
+    setReplacedDocumentIndex(index);
+    await callMedia(index);
+    setReplacedDocumentIndex(null);
+  }, [callMedia]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-hook": dataHook,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 58,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    direction: "vertical",
+    className: _formMultiDocumentStCss.classes.viewRoot,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 59,
+      columnNumber: 9
+    }
+  }, data.map((mediaURI, index) => /*#__PURE__*/_react.default.createElement(_form.DocumentControl, {
+    dataHook: `multi-document-field-document-${index}`,
+    key: index,
+    ref: index === 0 ? ref : undefined,
+    mediaURI: mediaURI,
+    readOnly: readOnly,
+    onReplace: onReplace(index),
+    onDelete: onDelete(index),
+    className: _formMultiDocumentStCss.classes.singleViewWrapper,
+    loading: index === replacedDocumentIndex ? loading : false,
+    loaderClassName: _formMultiDocumentStCss.classes.singleViewWrapper,
+    onOpenPasteURLForm: onOpenPasteURLForm({
+      index,
+      value: mediaURI,
+      title: t('CMS.document.replaceWithUrl.title')
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 61,
+      columnNumber: 13
+    }
+  })), /*#__PURE__*/_react.default.createElement(_form.AddDocumentButton, {
+    dataHook: "multi-document-field-add-document-button",
+    theme: "plain",
+    disabled: readOnly,
+    onClick: callMedia,
+    className: _formMultiDocumentStCss.classes.addDocumentButton,
+    loading: replacedDocumentIndex === null ? loading : false,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 79,
+      columnNumber: 11
+    }
+  })), /*#__PURE__*/_react.default.createElement(_mediaControl.PasteURLButton, {
+    title: t('CMS.document.pasteUrl.button'),
+    disabled: readOnly,
+    onClick: onOpenPasteURLForm({
+      title: t('CMS.document.pasteUrl.title')
+    }),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 88,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/_react.default.createElement(_deleteDialog.DeleteDialog, {
+    open: isOpen,
+    title: title,
+    onClose: onDeleteCancel,
+    onDelete: onDeleteConfirm,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 95,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 101,
+      columnNumber: 11
+    }
+  }, text)));
+});
+FormMultiDocumentView.displayName = 'FormMultiDocumentView';
+//# sourceMappingURL=form-multi-document-view.js.map

package/dist/cjs/cms-fields/components/multi-document/multi-document-input/form-multi-document-view.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_form","_mediaControl","_deleteDialog","_hooks","_formMultiDocumentStCss","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FormMultiDocumentView","exports","React","forwardRef","data","readOnly","onChange","callMedia","loading","dataHook","onOpenPasteURLForm","ref","useTranslations","replacedDocumentIndex","setReplacedDocumentIndex","useState","isOpen","onDelete","onDeleteCancel","onDeleteConfirm","title","text","useDocumentDelete","onReplace","useCallback","index","createElement","__self","__source","fileName","lineNumber","columnNumber","Box","direction","className","classes","viewRoot","map","mediaURI","DocumentControl","key","undefined","singleViewWrapper","loaderClassName","value","AddDocumentButton","theme","disabled","onClick","addDocumentButton","PasteURLButton","DeleteDialog","open","onClose","Text","displayName"],"sources":["../../../../../../src/cms-fields/components/multi-document/multi-document-input/form-multi-document-view.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\n\nimport { Box, Text } from '@wix/design-system';\n\nimport { DocumentControl, AddDocumentButton } from '../../document/form';\nimport type { OpenPasteURLFormParams } from '../../media-control';\nimport { PasteURLButton, useDocumentDelete } from '../../media-control';\nimport { DeleteDialog } from '../../delete-dialog';\nimport { useTranslations } from '../../../hooks';\n\nimport { classes } from './form-multi-document.st.css.js';\n\ninterface FormMultiDocumentViewProps {\n  data: string[];\n  readOnly?: boolean;\n  onChange: (value: string[]) => void;\n  callMedia: (index?: number) => Promise<void>;\n  loading: boolean;\n  dataHook?: string;\n  onOpenPasteURLForm: (params: OpenPasteURLFormParams) => () => void;\n}\n\nexport const FormMultiDocumentView = React.forwardRef<\n  HTMLDivElement,\n  FormMultiDocumentViewProps\n>(\n  (\n    {\n      data,\n      readOnly,\n      onChange,\n      callMedia,\n      loading,\n      dataHook,\n      onOpenPasteURLForm,\n    },\n    ref,\n  ) => {\n    const { t } = useTranslations();\n\n    const [replacedDocumentIndex, setReplacedDocumentIndex] = useState<\n      number | null\n    >(null);\n\n    const { isOpen, onDelete, onDeleteCancel, onDeleteConfirm, title, text } =\n      useDocumentDelete({ data, onChange });\n\n    const onReplace = useCallback(\n      (index: number) => async () => {\n        setReplacedDocumentIndex(index);\n        await callMedia(index);\n        setReplacedDocumentIndex(null);\n      },\n      [callMedia],\n    );\n\n    return (\n      <div data-hook={dataHook}>\n        <Box direction=\"vertical\" className={classes.viewRoot}>\n          {data.map((mediaURI, index) => (\n            <DocumentControl\n              dataHook={`multi-document-field-document-${index}`}\n              key={index}\n              ref={index === 0 ? ref : undefined}\n              mediaURI={mediaURI}\n              readOnly={readOnly}\n              onReplace={onReplace(index)}\n              onDelete={onDelete(index)}\n              className={classes.singleViewWrapper}\n              loading={index === replacedDocumentIndex ? loading : false}\n              loaderClassName={classes.singleViewWrapper}\n              onOpenPasteURLForm={onOpenPasteURLForm({\n                index,\n                value: mediaURI,\n                title: t('CMS.document.replaceWithUrl.title'),\n              })}\n            />\n          ))}\n          <AddDocumentButton\n            dataHook=\"multi-document-field-add-document-button\"\n            theme=\"plain\"\n            disabled={readOnly}\n            onClick={callMedia as () => Promise<void>}\n            className={classes.addDocumentButton}\n            loading={replacedDocumentIndex === null ? loading : false}\n          />\n        </Box>\n        <PasteURLButton\n          title={t('CMS.document.pasteUrl.button')}\n          disabled={readOnly}\n          onClick={onOpenPasteURLForm({\n            title: t('CMS.document.pasteUrl.title'),\n          })}\n        />\n        <DeleteDialog\n          open={isOpen}\n          title={title}\n          onClose={onDeleteCancel}\n          onDelete={onDeleteConfirm}\n        >\n          <Text>{text}</Text>\n        </DeleteDialog>\n      </div>\n    );\n  },\n);\n\nFormMultiDocumentView.displayName = 'FormMultiDocumentView';\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/cms-fields/components/multi-document/multi-document-input/form-multi-document.st.css

@@ -0,0 +1,50 @@
+@property st-global(--wds-border-radius-300);
+@property st-global(--wds-color-blue-300);
+@property st-global(--wds-color-blue-500);
+@property st-global(--wds-color-neutral-600);
+@property st-global(--wsr-color-B30);
+@property st-global(--wsr-color-B50);
+@property st-global(--wsr-color-D60);
+
+:vars {
+    BorderRadius: 2px;
+    documentViewBorderRadius: var(--wds-border-radius-300, calc(value(BorderRadius) * 3));
+}
+
+.viewRoot {
+    border-radius: value(documentViewBorderRadius);
+    border: 1px solid var(--wds-color-blue-300, var(--wsr-color-B30));
+}
+
+.singleViewWrapper {
+    border-radius: 0;
+    border-bottom: 1px solid var(--wds-color-neutral-600, var(--wsr-color-D60));
+    background-color: transparent !important;
+}
+
+.viewRoot > div:first-child .singleViewWrapper {
+    border-top-left-radius: value(documentViewBorderRadius);
+    border-top-right-radius: value(documentViewBorderRadius);
+}
+
+.singleViewWrapper:hover {
+    background-color: var(--wds-color-blue-500, var(--wsr-color-B50)) !important;
+}
+
+.singleViewWrapper:focus-visible {
+    border-bottom: 1px solid transparent;
+    position: relative;
+    z-index: 1;
+}
+
+.addDocumentButton {
+    border-bottom-left-radius: value(documentViewBorderRadius);
+    border-bottom-right-radius: value(documentViewBorderRadius);
+}
+
+.addDocumentButton:focus-within {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: value(documentViewBorderRadius);
+    border-bottom-right-radius: value(documentViewBorderRadius);
+}

package/dist/cjs/cms-fields/components/multi-document/multi-document-input/form-multi-document.st.css.js

@@ -0,0 +1,36 @@
+"use strict";
+
+exports.__esModule = true;
+exports.vars = exports.style = exports.stVars = exports.st = exports.namespace = exports.layers = exports.keyframes = exports.cssStates = exports.containers = exports.classes = void 0;
+var _stylableEsmRuntime = require("../../../../stylable-esm-runtime.js");
+// @ts-nocheck
+
+var _namespace_ = "formmultidocument853548620";
+var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
+var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
+var style = exports.style = _style_;
+var st = exports.st = _style_;
+var namespace = exports.namespace = _namespace_;
+var classes = exports.classes = {
+  "root": "formmultidocument853548620__root",
+  "viewRoot": "formmultidocument853548620__viewRoot",
+  "singleViewWrapper": "formmultidocument853548620__singleViewWrapper",
+  "addDocumentButton": "formmultidocument853548620__addDocumentButton"
+};
+var keyframes = exports.keyframes = {};
+var layers = exports.layers = {};
+var containers = exports.containers = {};
+var stVars = exports.stVars = {
+  "BorderRadius": "2px",
+  "documentViewBorderRadius": "var(--wds-border-radius-300, calc(2px * 3))"
+};
+var vars = exports.vars = {
+  "wds-border-radius-300": "--wds-border-radius-300",
+  "wds-color-blue-300": "--wds-color-blue-300",
+  "wds-color-blue-500": "--wds-color-blue-500",
+  "wds-color-neutral-600": "--wds-color-neutral-600",
+  "wsr-color-B30": "--wsr-color-B30",
+  "wsr-color-B50": "--wsr-color-B50",
+  "wsr-color-D60": "--wsr-color-D60"
+};
+//# sourceMappingURL=form-multi-document.st.css.js.map

package/dist/cjs/cms-fields/components/multi-document/multi-document-input/form-multi-document.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../../src/cms-fields/components/multi-document/multi-document-input/form-multi-document.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"formmultidocument853548620\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"formmultidocument853548620__root\",\"viewRoot\":\"formmultidocument853548620__viewRoot\",\"singleViewWrapper\":\"formmultidocument853548620__singleViewWrapper\",\"addDocumentButton\":\"formmultidocument853548620__addDocumentButton\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {\"BorderRadius\":\"2px\",\"documentViewBorderRadius\":\"var(--wds-border-radius-300, calc(2px * 3))\"}; \nexport var vars = {\"wds-border-radius-300\":\"--wds-border-radius-300\",\"wds-color-blue-300\":\"--wds-color-blue-300\",\"wds-color-blue-500\":\"--wds-color-blue-500\",\"wds-color-neutral-600\":\"--wds-color-neutral-600\",\"wsr-color-B30\":\"--wsr-color-B30\",\"wsr-color-B50\":\"--wsr-color-B50\",\"wsr-color-D60\":\"--wsr-color-D60\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,4BAA4B;AAC9C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,kCAAkC;EAAC,UAAU,EAAC,sCAAsC;EAAC,mBAAmB,EAAC,+CAA+C;EAAC,mBAAmB,EAAC;AAA+C,CAAC;AACnP,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG;EAAC,cAAc,EAAC,KAAK;EAAC,0BAA0B,EAAC;AAA6C,CAAC;AAC5G,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

package/dist/cjs/cms-fields/components/multi-document/multi-document-view/multi-document-tags.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.MultiDocumentTags = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _designSystem = require("@wix/design-system");
+var _document = require("../../document");
+var _jsxFileName = "/home/builduser/work/8f3ab5a55e62623a/packages/auto-patterns/dist/cjs/cms-fields/components/multi-document/multi-document-view/multi-document-tags.tsx";
+const MultiDocumentTags = ({
+  documents,
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, (0, _extends2.default)({
+    width: "100%",
+    gap: "SP1",
+    verticalAlign: "top"
+  }, props, {
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 15,
+      columnNumber: 5
+    }
+  }), documents == null ? void 0 : documents.map((document, index) => /*#__PURE__*/_react.default.createElement(_document.DocumentView, {
+    data: document,
+    key: `${index}_${document}`,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 9
+    }
+  })));
+};
+exports.MultiDocumentTags = MultiDocumentTags;
+MultiDocumentTags.displayName = 'MultiDocumentTags';
+//# sourceMappingURL=multi-document-tags.js.map