@wix/patterns-fields 1.118.0 → 1.121.0

package/dist/cjs/components/media-image-field/cell-media-image-edit.st.css.js

@@ -5,20 +5,20 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "cellmediaimageedit4241529426";
+var _namespace_ = "cellmediaimageedit1862349360";
 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": "cellmediaimageedit4241529426__root",
-  "view": "cellmediaimageedit4241529426__view",
-  "anchor": "cellmediaimageedit4241529426__anchor",
-  "anchorBox": "cellmediaimageedit4241529426__anchorBox",
-  "popoverContent": "cellmediaimageedit4241529426__popoverContent",
-  "image": "cellmediaimageedit4241529426__image",
-  "imageActions": "cellmediaimageedit4241529426__imageActions"
+  "root": "cellmediaimageedit1862349360__root",
+  "view": "cellmediaimageedit1862349360__view",
+  "anchor": "cellmediaimageedit1862349360__anchor",
+  "anchorBox": "cellmediaimageedit1862349360__anchorBox",
+  "popoverContent": "cellmediaimageedit1862349360__popoverContent",
+  "image": "cellmediaimageedit1862349360__image",
+  "imageActions": "cellmediaimageedit1862349360__imageActions"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/media-image-field/cell-media-image-edit.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/media-image-field/cell-media-image-edit.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"cellmediaimageedit4241529426\";\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\":\"cellmediaimageedit4241529426__root\",\"view\":\"cellmediaimageedit4241529426__view\",\"anchor\":\"cellmediaimageedit4241529426__anchor\",\"anchorBox\":\"cellmediaimageedit4241529426__anchorBox\",\"popoverContent\":\"cellmediaimageedit4241529426__popoverContent\",\"image\":\"cellmediaimageedit4241529426__image\",\"imageActions\":\"cellmediaimageedit4241529426__imageActions\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-fill-transparent-primary\":\"--wds-color-fill-transparent-primary\",\"wsr-color-D10\":\"--wsr-color-D10\",\"wds-image-border-radius-default\":\"--wds-image-border-radius-default\",\"wds-space-100\":\"--wds-space-100\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,8BAA8B;AAChD,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,oCAAoC;EAAC,MAAM,EAAC,oCAAoC;EAAC,QAAQ,EAAC,sCAAsC;EAAC,WAAW,EAAC,yCAAyC;EAAC,gBAAgB,EAAC,8CAA8C;EAAC,OAAO,EAAC,qCAAqC;EAAC,cAAc,EAAC;AAA4C,CAAC;AACvX,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,oCAAoC,EAAC,sCAAsC;EAAC,eAAe,EAAC,iBAAiB;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/media-image-field/cell-media-image-edit.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"cellmediaimageedit1862349360\";\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\":\"cellmediaimageedit1862349360__root\",\"view\":\"cellmediaimageedit1862349360__view\",\"anchor\":\"cellmediaimageedit1862349360__anchor\",\"anchorBox\":\"cellmediaimageedit1862349360__anchorBox\",\"popoverContent\":\"cellmediaimageedit1862349360__popoverContent\",\"image\":\"cellmediaimageedit1862349360__image\",\"imageActions\":\"cellmediaimageedit1862349360__imageActions\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-fill-transparent-primary\":\"--wds-color-fill-transparent-primary\",\"wsr-color-D10\":\"--wsr-color-D10\",\"wds-image-border-radius-default\":\"--wds-image-border-radius-default\",\"wds-space-100\":\"--wds-space-100\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,8BAA8B;AAChD,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,oCAAoC;EAAC,MAAM,EAAC,oCAAoC;EAAC,QAAQ,EAAC,sCAAsC;EAAC,WAAW,EAAC,yCAAyC;EAAC,gBAAgB,EAAC,8CAA8C;EAAC,OAAO,EAAC,qCAAqC;EAAC,cAAc,EAAC;AAA4C,CAAC;AACvX,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,oCAAoC,EAAC,sCAAsC;EAAC,eAAe,EAAC,iBAAiB;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

package/dist/cjs/components/media-image-field/media-image-view.js

@@ -7,6 +7,7 @@ var _designSystem = require("@wix/design-system");
 var _mobxReactLite = require("mobx-react-lite");
 var _PatternsFieldsContainerProvider = require("../../providers/PatternsFieldsContainerProvider");
 var _getImageSource = require("../../utils/get-image-source");
+var _mediaImageValue = require("../../utils/media-image-value");
 var _tooltip = require("../../utils/tooltip");
 var _imagePreviewPopover = require("../image/image-preview-popover");
 var _imageThumbnail = require("../image/image-thumbnail");
@@ -14,10 +15,11 @@ var _mediaImageViewStCss = require("./media-image-view.st.css.js");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/media-image-field/media-image-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); }
 function _MediaImageView({
-  value: image,
+  value,
   dataHook
 }) {
   var _usePatternsCmsFields;
+  const image = (0, _mediaImageValue.toMediaImageValue)(value);
   // Tables render this cell even with no fields container above them, which
   // legacy image cells never needed. Without one there is nothing to translate
   // the placeholder with, so it is left out instead of breaking the cell.
@@ -41,7 +43,7 @@ function _MediaImageView({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 35,
+      lineNumber: 36,
       columnNumber: 5
     }
   });
@@ -56,7 +58,7 @@ function _MediaImageView({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 47,
+      lineNumber: 48,
       columnNumber: 5
     }
   }, src ? /*#__PURE__*/_react.default.createElement(_imagePreviewPopover.ImagePreviewPopover, {
@@ -65,7 +67,7 @@ function _MediaImageView({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 57,
+      lineNumber: 58,
       columnNumber: 9
     }
   }, thumbnail) : thumbnail, src && (altText || placeholder) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -74,7 +76,7 @@ function _MediaImageView({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 65,
+      lineNumber: 66,
       columnNumber: 11
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
@@ -82,7 +84,7 @@ function _MediaImageView({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 66,
+      lineNumber: 67,
       columnNumber: 13
     }
   })), altText ? /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
@@ -93,7 +95,7 @@ function _MediaImageView({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 69,
+      lineNumber: 70,
       columnNumber: 13
     }
   }, altText) : /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
@@ -104,7 +106,7 @@ function _MediaImageView({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 78,
+      lineNumber: 79,
       columnNumber: 13
     }
   }, placeholder)));

package/dist/cjs/components/media-image-field/media-image-view.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_mobxReactLite","_PatternsFieldsContainerProvider","_getImageSource","_tooltip","_imagePreviewPopover","_imageThumbnail","_mediaImageViewStCss","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_MediaImageView","value","image","dataHook","_usePatternsCmsFields","translate","usePatternsCmsFieldsContainer","src","getImageSource","altText","placeholder","undefined","isPreviewShown","setIsPreviewShown","useState","showPreview","useCallback","hidePreview","thumbnail","createElement","ImageThumbnail","width","height","borderRadius","onMouseEnter","onMouseLeave","__self","__source","fileName","lineNumber","columnNumber","Box","className","classes","root","verticalAlign","gap","padding","ImagePreviewPopover","shown","Fragment","flexShrink","Divider","direction","Text","size","ellipsis","tooltipProps","smallTooltipCommonProps","altTextPlaceholder","MediaImageView","exports","observer","displayName"],"sources":["../../../../src/components/media-image-field/media-image-view.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Box, Divider, Text } from '@wix/design-system';\nimport { observer } from 'mobx-react-lite';\nimport type { MediaImageValue } from '../../types/media-image';\nimport { usePatternsCmsFieldsContainer } from '../../providers/PatternsFieldsContainerProvider';\nimport { getImageSource } from '../../utils/get-image-source';\nimport { smallTooltipCommonProps } from '../../utils/tooltip';\nimport { ImagePreviewPopover } from '../image/image-preview-popover';\nimport { ImageThumbnail } from '../image/image-thumbnail';\nimport { classes } from './media-image-view.st.css.js';\n\nexport interface MediaImageViewProps {\n  /** A value read with `toMediaImageValue`. */\n  value: MediaImageValue | null;\n  dataHook?: string;\n}\n\nfunction _MediaImageView({ value: image, dataHook }: MediaImageViewProps) {\n  // Tables render this cell even with no fields container above them, which\n  // legacy image cells never needed. Without one there is nothing to translate\n  // the placeholder with, so it is left out instead of breaking the cell.\n  const translate = usePatternsCmsFieldsContainer()?.translate;\n  const src = getImageSource(image);\n  const altText = image?.altText;\n  const placeholder = altText\n    ? undefined\n    : translate?.('CMS.image.altText.cellPlaceholder');\n  const [isPreviewShown, setIsPreviewShown] = useState(false);\n\n  const showPreview = useCallback(() => setIsPreviewShown(true), []);\n  const hidePreview = useCallback(() => setIsPreviewShown(false), []);\n\n  // With no src, the thumbnail renders the empty-image placeholder.\n  const thumbnail = (\n    <ImageThumbnail\n      value={image}\n      dataHook=\"media-image-view-thumbnail\"\n      width=\"36px\"\n      height=\"24px\"\n      borderRadius=\"0\"\n      onMouseEnter={src ? showPreview : undefined}\n      onMouseLeave={src ? hidePreview : undefined}\n    />\n  );\n\n  return (\n    <Box\n      dataHook={dataHook}\n      className={classes.root}\n      verticalAlign=\"middle\"\n      gap=\"8px\"\n      padding=\"0 8px\"\n      height=\"100%\"\n      width=\"100%\"\n    >\n      {src ? (\n        <ImagePreviewPopover src={src} shown={isPreviewShown}>\n          {thumbnail}\n        </ImagePreviewPopover>\n      ) : (\n        thumbnail\n      )}\n      {src && (altText || placeholder) && (\n        <>\n          <Box height=\"16px\" flexShrink={0}>\n            <Divider direction=\"vertical\" />\n          </Box>\n          {altText ? (\n            <Text\n              size=\"tiny\"\n              ellipsis\n              tooltipProps={smallTooltipCommonProps}\n              dataHook=\"media-image-view-alt-text\"\n            >\n              {altText}\n            </Text>\n          ) : (\n            <Text\n              size=\"tiny\"\n              ellipsis\n              className={classes.altTextPlaceholder}\n              dataHook=\"media-image-view-alt-text-placeholder\"\n            >\n              {placeholder}\n            </Text>\n          )}\n        </>\n      )}\n    </Box>\n  );\n}\n\nexport const MediaImageView = observer(_MediaImageView);\n\nMediaImageView.displayName = 'MediaImageView';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_mobxReactLite","_PatternsFieldsContainerProvider","_getImageSource","_mediaImageValue","_tooltip","_imagePreviewPopover","_imageThumbnail","_mediaImageViewStCss","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_MediaImageView","value","dataHook","_usePatternsCmsFields","image","toMediaImageValue","translate","usePatternsCmsFieldsContainer","src","getImageSource","altText","placeholder","undefined","isPreviewShown","setIsPreviewShown","useState","showPreview","useCallback","hidePreview","thumbnail","createElement","ImageThumbnail","width","height","borderRadius","onMouseEnter","onMouseLeave","__self","__source","fileName","lineNumber","columnNumber","Box","className","classes","root","verticalAlign","gap","padding","ImagePreviewPopover","shown","Fragment","flexShrink","Divider","direction","Text","size","ellipsis","tooltipProps","smallTooltipCommonProps","altTextPlaceholder","MediaImageView","exports","observer","displayName"],"sources":["../../../../src/components/media-image-field/media-image-view.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { Box, Divider, Text } from '@wix/design-system';\nimport { observer } from 'mobx-react-lite';\nimport { usePatternsCmsFieldsContainer } from '../../providers/PatternsFieldsContainerProvider';\nimport { getImageSource } from '../../utils/get-image-source';\nimport { toMediaImageValue } from '../../utils/media-image-value';\nimport { smallTooltipCommonProps } from '../../utils/tooltip';\nimport { ImagePreviewPopover } from '../image/image-preview-popover';\nimport { ImageThumbnail } from '../image/image-thumbnail';\nimport { classes } from './media-image-view.st.css.js';\n\nexport interface MediaImageViewProps {\n  /** A `MEDIA_IMAGE` value. */\n  value: unknown;\n  dataHook?: string;\n}\n\nfunction _MediaImageView({ value, dataHook }: MediaImageViewProps) {\n  const image = toMediaImageValue(value);\n  // Tables render this cell even with no fields container above them, which\n  // legacy image cells never needed. Without one there is nothing to translate\n  // the placeholder with, so it is left out instead of breaking the cell.\n  const translate = usePatternsCmsFieldsContainer()?.translate;\n  const src = getImageSource(image);\n  const altText = image?.altText;\n  const placeholder = altText\n    ? undefined\n    : translate?.('CMS.image.altText.cellPlaceholder');\n  const [isPreviewShown, setIsPreviewShown] = useState(false);\n\n  const showPreview = useCallback(() => setIsPreviewShown(true), []);\n  const hidePreview = useCallback(() => setIsPreviewShown(false), []);\n\n  // With no src, the thumbnail renders the empty-image placeholder.\n  const thumbnail = (\n    <ImageThumbnail\n      value={image}\n      dataHook=\"media-image-view-thumbnail\"\n      width=\"36px\"\n      height=\"24px\"\n      borderRadius=\"0\"\n      onMouseEnter={src ? showPreview : undefined}\n      onMouseLeave={src ? hidePreview : undefined}\n    />\n  );\n\n  return (\n    <Box\n      dataHook={dataHook}\n      className={classes.root}\n      verticalAlign=\"middle\"\n      gap=\"8px\"\n      padding=\"0 8px\"\n      height=\"100%\"\n      width=\"100%\"\n    >\n      {src ? (\n        <ImagePreviewPopover src={src} shown={isPreviewShown}>\n          {thumbnail}\n        </ImagePreviewPopover>\n      ) : (\n        thumbnail\n      )}\n      {src && (altText || placeholder) && (\n        <>\n          <Box height=\"16px\" flexShrink={0}>\n            <Divider direction=\"vertical\" />\n          </Box>\n          {altText ? (\n            <Text\n              size=\"tiny\"\n              ellipsis\n              tooltipProps={smallTooltipCommonProps}\n              dataHook=\"media-image-view-alt-text\"\n            >\n              {altText}\n            </Text>\n          ) : (\n            <Text\n              size=\"tiny\"\n              ellipsis\n              className={classes.altTextPlaceholder}\n              dataHook=\"media-image-view-alt-text-placeholder\"\n            >\n              {placeholder}\n            </Text>\n          )}\n        </>\n      )}\n    </Box>\n  );\n}\n\nexport const MediaImageView = observer(_MediaImageView);\n\nMediaImageView.displayName = 'MediaImageView';\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/media-image-field/media-image-view.st.css.js

@@ -5,15 +5,15 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "mediaimageview1317682424";
+var _namespace_ = "mediaimageview1279718523";
 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": "mediaimageview1317682424__root",
-  "altTextPlaceholder": "mediaimageview1317682424__altTextPlaceholder"
+  "root": "mediaimageview1279718523__root",
+  "altTextPlaceholder": "mediaimageview1279718523__altTextPlaceholder"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/media-image-field/media-image-view.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/media-image-field/media-image-view.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"mediaimageview1317682424\";\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\":\"mediaimageview1317682424__root\",\"altTextPlaceholder\":\"mediaimageview1317682424__altTextPlaceholder\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-text-standard-primary\":\"--wds-color-text-standard-primary\",\"wds-color-text-placeholder\":\"--wds-color-text-placeholder\",\"wsr-color-D40\":\"--wsr-color-D40\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,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,gCAAgC;EAAC,oBAAoB,EAAC;AAA8C,CAAC;AAC3H,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,iCAAiC,EAAC,mCAAmC;EAAC,4BAA4B,EAAC,8BAA8B;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/media-image-field/media-image-view.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"mediaimageview1279718523\";\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\":\"mediaimageview1279718523__root\",\"altTextPlaceholder\":\"mediaimageview1279718523__altTextPlaceholder\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-text-standard-primary\":\"--wds-color-text-standard-primary\",\"wds-color-text-placeholder\":\"--wds-color-text-placeholder\",\"wsr-color-D40\":\"--wsr-color-D40\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,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,gCAAgC;EAAC,oBAAoB,EAAC;AAA8C,CAAC;AAC3H,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,iCAAiC,EAAC,mCAAmC;EAAC,4BAA4B,EAAC,8BAA8B;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

package/dist/cjs/components/media-tag/web-media-tag/media-tag.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "mediatag3696837917";
+var _namespace_ = "mediatag1272788963";
 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": "mediatag3696837917__root"
+  "root": "mediatag1272788963__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/media-tag/web-media-tag/media-tag.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/components/media-tag/web-media-tag/media-tag.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"mediatag3696837917\";\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\":\"mediatag3696837917__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-blue-400\":\"--wds-color-blue-400\",\"wsr-color-B40\":\"--wsr-color-B40\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,oBAAoB;AACtC,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;AAA0B,CAAC;AACjD,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,oBAAoB,EAAC,sBAAsB;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/components/media-tag/web-media-tag/media-tag.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"mediatag1272788963\";\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\":\"mediatag1272788963__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-blue-400\":\"--wds-color-blue-400\",\"wsr-color-B40\":\"--wsr-color-B40\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,oBAAoB;AACtC,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;AAA0B,CAAC;AACjD,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,oBAAoB,EAAC,sBAAsB;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

package/dist/cjs/components/multi-document/cell-multi-document-edit.st.css.js

@@ -5,15 +5,15 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "cellmultidocumentedit1960764494";
+var _namespace_ = "cellmultidocumentedit3521094388";
 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": "cellmultidocumentedit1960764494__root",
-  "chipTrigger": "cellmultidocumentedit1960764494__chipTrigger"
+  "root": "cellmultidocumentedit3521094388__root",
+  "chipTrigger": "cellmultidocumentedit3521094388__chipTrigger"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/multi-document/cell-multi-document-edit.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/multi-document/cell-multi-document-edit.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"cellmultidocumentedit1960764494\";\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\":\"cellmultidocumentedit1960764494__root\",\"chipTrigger\":\"cellmultidocumentedit1960764494__chipTrigger\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,iCAAiC;AACnD,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,uCAAuC;EAAC,aAAa,EAAC;AAA8C,CAAC;AAC3H,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,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/multi-document/cell-multi-document-edit.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"cellmultidocumentedit3521094388\";\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\":\"cellmultidocumentedit3521094388__root\",\"chipTrigger\":\"cellmultidocumentedit3521094388__chipTrigger\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,iCAAiC;AACnD,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,uCAAuC;EAAC,aAAa,EAAC;AAA8C,CAAC;AAC3H,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,CAAC,CAAC","ignoreList":[]}

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

@@ -5,17 +5,17 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "formmultidocument665324025";
+var _namespace_ = "formmultidocument1527598707";
 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": "formmultidocument665324025__root",
-  "viewRoot": "formmultidocument665324025__viewRoot",
-  "singleViewWrapper": "formmultidocument665324025__singleViewWrapper",
-  "addDocumentButton": "formmultidocument665324025__addDocumentButton"
+  "root": "formmultidocument1527598707__root",
+  "viewRoot": "formmultidocument1527598707__viewRoot",
+  "singleViewWrapper": "formmultidocument1527598707__singleViewWrapper",
+  "addDocumentButton": "formmultidocument1527598707__addDocumentButton"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

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

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/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_ = \"formmultidocument665324025\";\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\":\"formmultidocument665324025__root\",\"viewRoot\":\"formmultidocument665324025__viewRoot\",\"singleViewWrapper\":\"formmultidocument665324025__singleViewWrapper\",\"addDocumentButton\":\"formmultidocument665324025__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":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/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_ = \"formmultidocument1527598707\";\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\":\"formmultidocument1527598707__root\",\"viewRoot\":\"formmultidocument1527598707__viewRoot\",\"singleViewWrapper\":\"formmultidocument1527598707__singleViewWrapper\",\"addDocumentButton\":\"formmultidocument1527598707__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,6BAA6B;AAC/C,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,mCAAmC;EAAC,UAAU,EAAC,uCAAuC;EAAC,mBAAmB,EAAC,gDAAgD;EAAC,mBAAmB,EAAC;AAAgD,CAAC;AACvP,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/components/reference/cell-multi-reference-input.js

@@ -14,6 +14,7 @@ const ROW_HEIGHT = 30;
 const MAX_NUM_ROWS = 7;
 const CellMultiReferenceInput = exports.CellMultiReferenceInput = /*#__PURE__*/_react.default.forwardRef(({
   items,
+  loading,
   selectedItems,
   value,
   onChange,
@@ -84,7 +85,7 @@ const CellMultiReferenceInput = exports.CellMultiReferenceInput = /*#__PURE__*/_
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 113,
+        lineNumber: 116,
         columnNumber: 13
       }
     })
@@ -99,7 +100,7 @@ const CellMultiReferenceInput = exports.CellMultiReferenceInput = /*#__PURE__*/_
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 131,
+        lineNumber: 134,
         columnNumber: 15
       }
     }),
@@ -140,7 +141,7 @@ const CellMultiReferenceInput = exports.CellMultiReferenceInput = /*#__PURE__*/_
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 173,
+        lineNumber: 176,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement(_designSystem.MultiSelect, {
@@ -159,7 +160,7 @@ const CellMultiReferenceInput = exports.CellMultiReferenceInput = /*#__PURE__*/_
       onRemoveTag: handleRemoveTag,
       onBlur: onBlur,
       placeholder: selectedItems.length === 0 ? t('auto-patterns.fields.select_placeholder') : '',
-      emptyStateMessage: t('auto-patterns.fields.no_results_found'),
+      emptyStateMessage: loading ? undefined : t('auto-patterns.fields.no_results_found'),
       maxHeightPixels: ROW_HEIGHT * MAX_NUM_ROWS,
       infiniteScroll: infiniteScroll,
       hasMore: hasMore,
@@ -175,7 +176,7 @@ const CellMultiReferenceInput = exports.CellMultiReferenceInput = /*#__PURE__*/_
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 183,
+        lineNumber: 186,
         columnNumber: 9
       }
     }))

package/dist/cjs/components/reference/cell-multi-reference-input.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_useTranslations","_referenceAvatar","_referenceDropdownFooter","_cellMultiReferenceInputStCss","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ROW_HEIGHT","MAX_NUM_ROWS","CellMultiReferenceInput","exports","React","forwardRef","items","selectedItems","value","onChange","onSelect","onRemoveTag","onBlur","onKeyDown","infiniteScroll","hasMore","loadMore","fixedFooter","onOpenCollection","autoOpen","inputRef","dataHook","ref","useTranslations","msRef","useRef","wrapperRef","useImperativeHandle","focus","_msRef$current","current","hideOptions","_msRef$current2","useEffect","_msRef$current3","requestAnimationFrame","_msRef$current4","showOptions","_wrapperRef$current","el","querySelector","untitled","tags","useMemo","map","item","id","label","name","thumb","createElement","ReferenceAvatar","image","size","__self","__source","fileName","lineNumber","columnNumber","options","listItemSelectBuilder","title","prefix","ellipsis","handleChange","useCallback","target","handleSelect","option","find","String","handleRemoveTag","_msRef$current5","combinedFooter","useReferenceDropdownFooter","className","st","classes","root","onClick","stopPropagation","onMouseDown","onKeyDownCapture","MultiSelect","instance","border","predicate","placeholder","length","emptyStateMessage","maxHeightPixels","popoverProps","appendTo","flip","fixed","placement","zIndex","displayName"],"sources":["../../../../src/components/reference/cell-multi-reference-input.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { MultiSelect, listItemSelectBuilder } from '@wix/design-system';\nimport { useTranslations } from '../../hooks/use-translations';\nimport { ReferenceAvatar } from './reference-avatar';\nimport { useReferenceDropdownFooter } from './reference-dropdown-footer';\nimport type { CellMultiReferenceItem } from './cell-multi-reference-view';\nimport { st, classes } from './cell-multi-reference-input.st.css.js';\n\nexport type { CellMultiReferenceItem };\n\nexport interface CellMultiReferenceInputHandle {\n  focus: () => void;\n  hideOptions: () => void;\n}\n\nexport interface CellMultiReferenceInputProps {\n  /** Dropdown options — already filtered/paginated by the caller. */\n  items: CellMultiReferenceItem[];\n  /** Currently selected references, rendered as removable chips. */\n  selectedItems: CellMultiReferenceItem[];\n  /** Text shown in the search input. */\n  value: string;\n  onChange: (value: string) => void;\n  onSelect: (item: CellMultiReferenceItem) => void;\n  onRemoveTag: (id: string) => void;\n  onBlur?: () => void;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  infiniteScroll?: boolean;\n  hasMore?: boolean;\n  loadMore?: () => void;\n  fixedFooter?: React.ReactNode;\n  /** When provided, renders an \"Open Collection\" action at the bottom of the dropdown. */\n  onOpenCollection?: () => void;\n  /** Open dropdown immediately on mount (single-click / type-to-edit triggers). */\n  autoOpen?: boolean;\n  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;\n  dataHook?: string;\n}\n\nconst ROW_HEIGHT = 30;\nconst MAX_NUM_ROWS = 7;\n\ninterface MultiSelectHandle {\n  focus?: () => void;\n  showOptions?: () => void;\n  hideOptions?: () => void;\n}\n\nexport const CellMultiReferenceInput = React.forwardRef<\n  CellMultiReferenceInputHandle,\n  CellMultiReferenceInputProps\n>(\n  (\n    {\n      items,\n      selectedItems,\n      value,\n      onChange,\n      onSelect,\n      onRemoveTag,\n      onBlur,\n      onKeyDown,\n      infiniteScroll,\n      hasMore,\n      loadMore,\n      fixedFooter,\n      onOpenCollection,\n      autoOpen,\n      inputRef,\n      dataHook,\n    },\n    ref,\n  ) => {\n    const { t } = useTranslations();\n    const msRef = useRef<MultiSelectHandle | null>(null);\n    const wrapperRef = useRef<HTMLDivElement | null>(null);\n\n    React.useImperativeHandle(ref, () => ({\n      focus: () => msRef.current?.focus?.(),\n      hideOptions: () => msRef.current?.hideOptions?.(),\n    }));\n\n    useEffect(() => {\n      if (autoOpen) {\n        msRef.current?.focus?.();\n        requestAnimationFrame(() => msRef.current?.showOptions?.());\n      }\n      // Intentionally run only on mount\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    // Expose the MultiSelect input element to the framework's inputRef so\n    // type-to-edit + framework-level focus management work.\n    useEffect(() => {\n      if (!inputRef) {\n        return;\n      }\n      const el = wrapperRef.current?.querySelector<HTMLInputElement>('input');\n      if (el) {\n        inputRef.current = { focus: () => el.focus() };\n      }\n    }, [inputRef]);\n\n    const untitled = t('patterns-fields.reference.untitled');\n\n    const tags = useMemo(\n      () =>\n        selectedItems.map((item) => ({\n          id: item.id,\n          dataHook: 'multi-reference-edit-tag',\n          label: item.name || untitled,\n          thumb: (\n            <ReferenceAvatar\n              name={item.name || untitled}\n              image={item.image}\n              size=\"size18\"\n            />\n          ),\n        })),\n      [selectedItems, untitled],\n    );\n\n    const options = useMemo(\n      () =>\n        items.map((item) =>\n          listItemSelectBuilder({\n            id: item.id,\n            title: item.name || untitled,\n            label: item.name || untitled,\n            prefix: (\n              <ReferenceAvatar\n                name={item.name || untitled}\n                image={item.image}\n              />\n            ),\n            size: 'small',\n            ellipsis: true,\n          }),\n        ),\n      [items, untitled],\n    );\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value),\n      [onChange],\n    );\n\n    const handleSelect = useCallback(\n      (option: { id: string | number }) => {\n        const item = items.find((i) => i.id === String(option.id));\n        if (item) {\n          onSelect(item);\n        }\n      },\n      [items, onSelect],\n    );\n\n    const handleRemoveTag = useCallback(\n      (id: string | number) => onRemoveTag(String(id)),\n      [onRemoveTag],\n    );\n\n    const hideOptions = useCallback(() => msRef.current?.hideOptions?.(), []);\n    const combinedFooter = useReferenceDropdownFooter({\n      fixedFooter,\n      onOpenCollection,\n      hideOptions,\n    });\n\n    return (\n      // Prevent EditableCell's row click/dblclick handlers from firing when\n      // the user interacts with the input or dropdown.\n      <div\n        ref={wrapperRef}\n        className={st(classes.root)}\n        data-hook={dataHook}\n        onClick={(e) => e.stopPropagation()}\n        onMouseDown={(e) => e.stopPropagation()}\n        // Capture phase so keys (e.g. Escape) can be intercepted before the\n        // WDS MultiSelect handles and stops them on the inner input.\n        onKeyDownCapture={onKeyDown}\n      >\n        <MultiSelect\n          ref={(instance: MultiSelectHandle | null) => {\n            msRef.current = instance;\n          }}\n          dataHook=\"multi-reference-input-multiselect\"\n          size=\"small\"\n          border=\"none\"\n          tags={tags}\n          options={options}\n          predicate={() => true}\n          value={value}\n          onChange={handleChange}\n          onSelect={handleSelect}\n          onRemoveTag={handleRemoveTag}\n          onBlur={onBlur}\n          placeholder={\n            selectedItems.length === 0\n              ? t('auto-patterns.fields.select_placeholder')\n              : ''\n          }\n          emptyStateMessage={t('auto-patterns.fields.no_results_found')}\n          maxHeightPixels={ROW_HEIGHT * MAX_NUM_ROWS}\n          infiniteScroll={infiniteScroll}\n          hasMore={hasMore}\n          loadMore={loadMore}\n          fixedFooter={combinedFooter}\n          popoverProps={{\n            appendTo: 'window',\n            flip: true,\n            fixed: false,\n            placement: 'bottom-start',\n            zIndex: 9999,\n          }}\n        />\n      </div>\n    );\n  },\n);\n\nCellMultiReferenceInput.displayName = 'CellMultiReferenceInput';\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,wBAAA,GAAAJ,OAAA;AAEA,IAAAK,6BAAA,GAAAL,OAAA;AAAqE,IAAAM,YAAA;AAAA,SAAAP,wBAAAQ,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAQ,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;AAiCrE,MAAMkB,UAAU,GAAG,EAAE;AACrB,MAAMC,YAAY,GAAG,CAAC;AAQf,MAAMC,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,gBAAGE,cAAK,CAACC,UAAU,CAIrD,CACE;EACEC,KAAK;EACLC,aAAa;EACbC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,WAAW;EACXC,MAAM;EACNC,SAAS;EACTC,cAAc;EACdC,OAAO;EACPC,QAAQ;EACRC,WAAW;EACXC,gBAAgB;EAChBC,QAAQ;EACRC,QAAQ;EACRC;AACF,CAAC,EACDC,GAAG,KACA;EACH,MAAM;IAAExC;EAAE,CAAC,GAAG,IAAAyC,gCAAe,EAAC,CAAC;EAC/B,MAAMC,KAAK,GAAG,IAAAC,aAAM,EAA2B,IAAI,CAAC;EACpD,MAAMC,UAAU,GAAG,IAAAD,aAAM,EAAwB,IAAI,CAAC;EAEtDrB,cAAK,CAACuB,mBAAmB,CAACL,GAAG,EAAE,OAAO;IACpCM,KAAK,EAAEA,CAAA;MAAA,IAAAC,cAAA;MAAA,QAAAA,cAAA,GAAML,KAAK,CAACM,OAAO,aAAbD,cAAA,CAAeD,KAAK,oBAApBC,cAAA,CAAeD,KAAK,CAAG,CAAC;IAAA;IACrCG,WAAW,EAAEA,CAAA;MAAA,IAAAC,eAAA;MAAA,QAAAA,eAAA,GAAMR,KAAK,CAACM,OAAO,aAAbE,eAAA,CAAeD,WAAW,oBAA1BC,eAAA,CAAeD,WAAW,CAAG,CAAC;IAAA;EACnD,CAAC,CAAC,CAAC;EAEH,IAAAE,gBAAS,EAAC,MAAM;IACd,IAAId,QAAQ,EAAE;MAAA,IAAAe,eAAA;MACZ,CAAAA,eAAA,GAAAV,KAAK,CAACM,OAAO,aAAbI,eAAA,CAAeN,KAAK,YAApBM,eAAA,CAAeN,KAAK,CAAG,CAAC;MACxBO,qBAAqB,CAAC;QAAA,IAAAC,eAAA;QAAA,QAAAA,eAAA,GAAMZ,KAAK,CAACM,OAAO,aAAbM,eAAA,CAAeC,WAAW,oBAA1BD,eAAA,CAAeC,WAAW,CAAG,CAAC;MAAA,EAAC;IAC7D;IACA;IACA;EACF,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA;EACA,IAAAJ,gBAAS,EAAC,MAAM;IAAA,IAAAK,mBAAA;IACd,IAAI,CAAClB,QAAQ,EAAE;MACb;IACF;IACA,MAAMmB,EAAE,IAAAD,mBAAA,GAAGZ,UAAU,CAACI,OAAO,qBAAlBQ,mBAAA,CAAoBE,aAAa,CAAmB,OAAO,CAAC;IACvE,IAAID,EAAE,EAAE;MACNnB,QAAQ,CAACU,OAAO,GAAG;QAAEF,KAAK,EAAEA,CAAA,KAAMW,EAAE,CAACX,KAAK,CAAC;MAAE,CAAC;IAChD;EACF,CAAC,EAAE,CAACR,QAAQ,CAAC,CAAC;EAEd,MAAMqB,QAAQ,GAAG3D,CAAC,CAAC,oCAAoC,CAAC;EAExD,MAAM4D,IAAI,GAAG,IAAAC,cAAO,EAClB,MACEpC,aAAa,CAACqC,GAAG,CAAEC,IAAI,KAAM;IAC3BC,EAAE,EAAED,IAAI,CAACC,EAAE;IACXzB,QAAQ,EAAE,0BAA0B;IACpC0B,KAAK,EAAEF,IAAI,CAACG,IAAI,IAAIP,QAAQ;IAC5BQ,KAAK,eACH7E,MAAA,CAAAmB,OAAA,CAAA2D,aAAA,CAACzE,gBAAA,CAAA0E,eAAe;MACdH,IAAI,EAAEH,IAAI,CAACG,IAAI,IAAIP,QAAS;MAC5BW,KAAK,EAAEP,IAAI,CAACO,KAAM;MAClBC,IAAI,EAAC,QAAQ;MAAAC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAA5E,YAAA;QAAA6E,UAAA;QAAAC,YAAA;MAAA;IAAA,CACd;EAEL,CAAC,CAAC,CAAC,EACL,CAACnD,aAAa,EAAEkC,QAAQ,CAC1B,CAAC;EAED,MAAMkB,OAAO,GAAG,IAAAhB,cAAO,EACrB,MACErC,KAAK,CAACsC,GAAG,CAAEC,IAAI,IACb,IAAAe,mCAAqB,EAAC;IACpBd,EAAE,EAAED,IAAI,CAACC,EAAE;IACXe,KAAK,EAAEhB,IAAI,CAACG,IAAI,IAAIP,QAAQ;IAC5BM,KAAK,EAAEF,IAAI,CAACG,IAAI,IAAIP,QAAQ;IAC5BqB,MAAM,eACJ1F,MAAA,CAAAmB,OAAA,CAAA2D,aAAA,CAACzE,gBAAA,CAAA0E,eAAe;MACdH,IAAI,EAAEH,IAAI,CAACG,IAAI,IAAIP,QAAS;MAC5BW,KAAK,EAAEP,IAAI,CAACO,KAAM;MAAAE,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAA5E,YAAA;QAAA6E,UAAA;QAAAC,YAAA;MAAA;IAAA,CACnB,CACF;IACDL,IAAI,EAAE,OAAO;IACbU,QAAQ,EAAE;EACZ,CAAC,CACH,CAAC,EACH,CAACzD,KAAK,EAAEmC,QAAQ,CAClB,CAAC;EAED,MAAMuB,YAAY,GAAG,IAAAC,kBAAW,EAC7BpF,CAAsC,IAAK4B,QAAQ,CAAC5B,CAAC,CAACqF,MAAM,CAAC1D,KAAK,CAAC,EACpE,CAACC,QAAQ,CACX,CAAC;EAED,MAAM0D,YAAY,GAAG,IAAAF,kBAAW,EAC7BG,MAA+B,IAAK;IACnC,MAAMvB,IAAI,GAAGvC,KAAK,CAAC+D,IAAI,CAAEjF,CAAC,IAAKA,CAAC,CAAC0D,EAAE,KAAKwB,MAAM,CAACF,MAAM,CAACtB,EAAE,CAAC,CAAC;IAC1D,IAAID,IAAI,EAAE;MACRnC,QAAQ,CAACmC,IAAI,CAAC;IAChB;EACF,CAAC,EACD,CAACvC,KAAK,EAAEI,QAAQ,CAClB,CAAC;EAED,MAAM6D,eAAe,GAAG,IAAAN,kBAAW,EAChCnB,EAAmB,IAAKnC,WAAW,CAAC2D,MAAM,CAACxB,EAAE,CAAC,CAAC,EAChD,CAACnC,WAAW,CACd,CAAC;EAED,MAAMoB,WAAW,GAAG,IAAAkC,kBAAW,EAAC;IAAA,IAAAO,eAAA;IAAA,QAAAA,eAAA,GAAMhD,KAAK,CAACM,OAAO,aAAb0C,eAAA,CAAezC,WAAW,oBAA1ByC,eAAA,CAAezC,WAAW,CAAG,CAAC;EAAA,GAAE,EAAE,CAAC;EACzE,MAAM0C,cAAc,GAAG,IAAAC,mDAA0B,EAAC;IAChDzD,WAAW;IACXC,gBAAgB;IAChBa;EACF,CAAC,CAAC;EAEF;IAAA;IACE;IACA;IACA3D,MAAA,CAAAmB,OAAA,CAAA2D,aAAA;MACE5B,GAAG,EAAEI,UAAW;MAChBiD,SAAS,EAAE,IAAAC,gCAAE,EAACC,qCAAO,CAACC,IAAI,CAAE;MAC5B,aAAWzD,QAAS;MACpB0D,OAAO,EAAGlG,CAAC,IAAKA,CAAC,CAACmG,eAAe,CAAC,CAAE;MACpCC,WAAW,EAAGpG,CAAC,IAAKA,CAAC,CAACmG,eAAe,CAAC;MACtC;MACA;MAAA;MACAE,gBAAgB,EAAErE,SAAU;MAAAyC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAA5E,YAAA;QAAA6E,UAAA;QAAAC,YAAA;MAAA;IAAA,gBAE5BtF,MAAA,CAAAmB,OAAA,CAAA2D,aAAA,CAAC3E,aAAA,CAAA4G,WAAW;MACV7D,GAAG,EAAG8D,QAAkC,IAAK;QAC3C5D,KAAK,CAACM,OAAO,GAAGsD,QAAQ;MAC1B,CAAE;MACF/D,QAAQ,EAAC,mCAAmC;MAC5CgC,IAAI,EAAC,OAAO;MACZgC,MAAM,EAAC,MAAM;MACb3C,IAAI,EAAEA,IAAK;MACXiB,OAAO,EAAEA,OAAQ;MACjB2B,SAAS,EAAEA,CAAA,KAAM,IAAK;MACtB9E,KAAK,EAAEA,KAAM;MACbC,QAAQ,EAAEuD,YAAa;MACvBtD,QAAQ,EAAEyD,YAAa;MACvBxD,WAAW,EAAE4D,eAAgB;MAC7B3D,MAAM,EAAEA,MAAO;MACf2E,WAAW,EACThF,aAAa,CAACiF,MAAM,KAAK,CAAC,GACtB1G,CAAC,CAAC,yCAAyC,CAAC,GAC5C,EACL;MACD2G,iBAAiB,EAAE3G,CAAC,CAAC,uCAAuC,CAAE;MAC9D4G,eAAe,EAAE1F,UAAU,GAAGC,YAAa;MAC3Ca,cAAc,EAAEA,cAAe;MAC/BC,OAAO,EAAEA,OAAQ;MACjBC,QAAQ,EAAEA,QAAS;MACnBC,WAAW,EAAEwD,cAAe;MAC5BkB,YAAY,EAAE;QACZC,QAAQ,EAAE,QAAQ;QAClBC,IAAI,EAAE,IAAI;QACVC,KAAK,EAAE,KAAK;QACZC,SAAS,EAAE,cAAc;QACzBC,MAAM,EAAE;MACV,CAAE;MAAA1C,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAA5E,YAAA;QAAA6E,UAAA;QAAAC,YAAA;MAAA;IAAA,CACH,CACE;EAAC;AAEV,CACF,CAAC;AAEDxD,uBAAuB,CAAC+F,WAAW,GAAG,yBAAyB","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_useTranslations","_referenceAvatar","_referenceDropdownFooter","_cellMultiReferenceInputStCss","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ROW_HEIGHT","MAX_NUM_ROWS","CellMultiReferenceInput","exports","React","forwardRef","items","loading","selectedItems","value","onChange","onSelect","onRemoveTag","onBlur","onKeyDown","infiniteScroll","hasMore","loadMore","fixedFooter","onOpenCollection","autoOpen","inputRef","dataHook","ref","useTranslations","msRef","useRef","wrapperRef","useImperativeHandle","focus","_msRef$current","current","hideOptions","_msRef$current2","useEffect","_msRef$current3","requestAnimationFrame","_msRef$current4","showOptions","_wrapperRef$current","el","querySelector","untitled","tags","useMemo","map","item","id","label","name","thumb","createElement","ReferenceAvatar","image","size","__self","__source","fileName","lineNumber","columnNumber","options","listItemSelectBuilder","title","prefix","ellipsis","handleChange","useCallback","target","handleSelect","option","find","String","handleRemoveTag","_msRef$current5","combinedFooter","useReferenceDropdownFooter","className","st","classes","root","onClick","stopPropagation","onMouseDown","onKeyDownCapture","MultiSelect","instance","border","predicate","placeholder","length","emptyStateMessage","undefined","maxHeightPixels","popoverProps","appendTo","flip","fixed","placement","zIndex","displayName"],"sources":["../../../../src/components/reference/cell-multi-reference-input.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { MultiSelect, listItemSelectBuilder } from '@wix/design-system';\nimport { useTranslations } from '../../hooks/use-translations';\nimport { ReferenceAvatar } from './reference-avatar';\nimport { useReferenceDropdownFooter } from './reference-dropdown-footer';\nimport type { CellMultiReferenceItem } from './cell-multi-reference-view';\nimport { st, classes } from './cell-multi-reference-input.st.css.js';\n\nexport type { CellMultiReferenceItem };\n\nexport interface CellMultiReferenceInputHandle {\n  focus: () => void;\n  hideOptions: () => void;\n}\n\nexport interface CellMultiReferenceInputProps {\n  /** Dropdown options — already filtered/paginated by the caller. */\n  items: CellMultiReferenceItem[];\n  /** Suppress the empty-state message while dropdown options are loading. */\n  loading?: boolean;\n  /** Currently selected references, rendered as removable chips. */\n  selectedItems: CellMultiReferenceItem[];\n  /** Text shown in the search input. */\n  value: string;\n  onChange: (value: string) => void;\n  onSelect: (item: CellMultiReferenceItem) => void;\n  onRemoveTag: (id: string) => void;\n  onBlur?: () => void;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  infiniteScroll?: boolean;\n  hasMore?: boolean;\n  loadMore?: () => void;\n  fixedFooter?: React.ReactNode;\n  /** When provided, renders an \"Open Collection\" action at the bottom of the dropdown. */\n  onOpenCollection?: () => void;\n  /** Open dropdown immediately on mount (single-click / type-to-edit triggers). */\n  autoOpen?: boolean;\n  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;\n  dataHook?: string;\n}\n\nconst ROW_HEIGHT = 30;\nconst MAX_NUM_ROWS = 7;\n\ninterface MultiSelectHandle {\n  focus?: () => void;\n  showOptions?: () => void;\n  hideOptions?: () => void;\n}\n\nexport const CellMultiReferenceInput = React.forwardRef<\n  CellMultiReferenceInputHandle,\n  CellMultiReferenceInputProps\n>(\n  (\n    {\n      items,\n      loading,\n      selectedItems,\n      value,\n      onChange,\n      onSelect,\n      onRemoveTag,\n      onBlur,\n      onKeyDown,\n      infiniteScroll,\n      hasMore,\n      loadMore,\n      fixedFooter,\n      onOpenCollection,\n      autoOpen,\n      inputRef,\n      dataHook,\n    },\n    ref,\n  ) => {\n    const { t } = useTranslations();\n    const msRef = useRef<MultiSelectHandle | null>(null);\n    const wrapperRef = useRef<HTMLDivElement | null>(null);\n\n    React.useImperativeHandle(ref, () => ({\n      focus: () => msRef.current?.focus?.(),\n      hideOptions: () => msRef.current?.hideOptions?.(),\n    }));\n\n    useEffect(() => {\n      if (autoOpen) {\n        msRef.current?.focus?.();\n        requestAnimationFrame(() => msRef.current?.showOptions?.());\n      }\n      // Intentionally run only on mount\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    // Expose the MultiSelect input element to the framework's inputRef so\n    // type-to-edit + framework-level focus management work.\n    useEffect(() => {\n      if (!inputRef) {\n        return;\n      }\n      const el = wrapperRef.current?.querySelector<HTMLInputElement>('input');\n      if (el) {\n        inputRef.current = { focus: () => el.focus() };\n      }\n    }, [inputRef]);\n\n    const untitled = t('patterns-fields.reference.untitled');\n\n    const tags = useMemo(\n      () =>\n        selectedItems.map((item) => ({\n          id: item.id,\n          dataHook: 'multi-reference-edit-tag',\n          label: item.name || untitled,\n          thumb: (\n            <ReferenceAvatar\n              name={item.name || untitled}\n              image={item.image}\n              size=\"size18\"\n            />\n          ),\n        })),\n      [selectedItems, untitled],\n    );\n\n    const options = useMemo(\n      () =>\n        items.map((item) =>\n          listItemSelectBuilder({\n            id: item.id,\n            title: item.name || untitled,\n            label: item.name || untitled,\n            prefix: (\n              <ReferenceAvatar\n                name={item.name || untitled}\n                image={item.image}\n              />\n            ),\n            size: 'small',\n            ellipsis: true,\n          }),\n        ),\n      [items, untitled],\n    );\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value),\n      [onChange],\n    );\n\n    const handleSelect = useCallback(\n      (option: { id: string | number }) => {\n        const item = items.find((i) => i.id === String(option.id));\n        if (item) {\n          onSelect(item);\n        }\n      },\n      [items, onSelect],\n    );\n\n    const handleRemoveTag = useCallback(\n      (id: string | number) => onRemoveTag(String(id)),\n      [onRemoveTag],\n    );\n\n    const hideOptions = useCallback(() => msRef.current?.hideOptions?.(), []);\n    const combinedFooter = useReferenceDropdownFooter({\n      fixedFooter,\n      onOpenCollection,\n      hideOptions,\n    });\n\n    return (\n      // Prevent EditableCell's row click/dblclick handlers from firing when\n      // the user interacts with the input or dropdown.\n      <div\n        ref={wrapperRef}\n        className={st(classes.root)}\n        data-hook={dataHook}\n        onClick={(e) => e.stopPropagation()}\n        onMouseDown={(e) => e.stopPropagation()}\n        // Capture phase so keys (e.g. Escape) can be intercepted before the\n        // WDS MultiSelect handles and stops them on the inner input.\n        onKeyDownCapture={onKeyDown}\n      >\n        <MultiSelect\n          ref={(instance: MultiSelectHandle | null) => {\n            msRef.current = instance;\n          }}\n          dataHook=\"multi-reference-input-multiselect\"\n          size=\"small\"\n          border=\"none\"\n          tags={tags}\n          options={options}\n          predicate={() => true}\n          value={value}\n          onChange={handleChange}\n          onSelect={handleSelect}\n          onRemoveTag={handleRemoveTag}\n          onBlur={onBlur}\n          placeholder={\n            selectedItems.length === 0\n              ? t('auto-patterns.fields.select_placeholder')\n              : ''\n          }\n          emptyStateMessage={\n            loading ? undefined : t('auto-patterns.fields.no_results_found')\n          }\n          maxHeightPixels={ROW_HEIGHT * MAX_NUM_ROWS}\n          infiniteScroll={infiniteScroll}\n          hasMore={hasMore}\n          loadMore={loadMore}\n          fixedFooter={combinedFooter}\n          popoverProps={{\n            appendTo: 'window',\n            flip: true,\n            fixed: false,\n            placement: 'bottom-start',\n            zIndex: 9999,\n          }}\n        />\n      </div>\n    );\n  },\n);\n\nCellMultiReferenceInput.displayName = 'CellMultiReferenceInput';\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/reference/cell-multi-reference-input.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "cellmultireferenceinput3910784580";
+var _namespace_ = "cellmultireferenceinput1450038572";
 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": "cellmultireferenceinput3910784580__root"
+  "root": "cellmultireferenceinput1450038572__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/reference/cell-multi-reference-input.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/reference/cell-multi-reference-input.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"cellmultireferenceinput3910784580\";\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\":\"cellmultireferenceinput3910784580__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-input-border-color\":\"--wds-input-border-color\",\"wds-input-border-color-hover\":\"--wds-input-border-color-hover\",\"wds-input-border-color-focus\":\"--wds-input-border-color-focus\",\"wds-input-background-fill-default\":\"--wds-input-background-fill-default\",\"wds-input-background-fill-hover\":\"--wds-input-background-fill-hover\",\"wds-input-shadow-focus-standard\":\"--wds-input-shadow-focus-standard\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,mCAAmC;AACrD,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;AAAyC,CAAC;AAChE,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,wBAAwB,EAAC,0BAA0B;EAAC,8BAA8B,EAAC,gCAAgC;EAAC,8BAA8B,EAAC,gCAAgC;EAAC,mCAAmC,EAAC,qCAAqC;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,iCAAiC,EAAC;AAAmC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/reference/cell-multi-reference-input.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"cellmultireferenceinput1450038572\";\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\":\"cellmultireferenceinput1450038572__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-input-border-color\":\"--wds-input-border-color\",\"wds-input-border-color-hover\":\"--wds-input-border-color-hover\",\"wds-input-border-color-focus\":\"--wds-input-border-color-focus\",\"wds-input-background-fill-default\":\"--wds-input-background-fill-default\",\"wds-input-background-fill-hover\":\"--wds-input-background-fill-hover\",\"wds-input-shadow-focus-standard\":\"--wds-input-shadow-focus-standard\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,mCAAmC;AACrD,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;AAAyC,CAAC;AAChE,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,wBAAwB,EAAC,0BAA0B;EAAC,8BAA8B,EAAC,gCAAgC;EAAC,8BAA8B,EAAC,gCAAgC;EAAC,mCAAmC,EAAC,qCAAqC;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,iCAAiC,EAAC;AAAmC,CAAC","ignoreList":[]}

package/dist/cjs/components/reference/cell-reference-input.js

@@ -49,6 +49,7 @@ const CellReferenceInput = exports.CellReferenceInput = /*#__PURE__*/_react.defa
       }
     })
   })), [items, selectedItem == null ? void 0 : selectedItem.id, t]);
+  const rootRef = (0, _react.useRef)(null);
   const acRef = (0, _react.useRef)(null);
   _react.default.useImperativeHandle(ref, () => ({
     focus: () => {
@@ -81,12 +82,19 @@ const CellReferenceInput = exports.CellReferenceInput = /*#__PURE__*/_react.defa
     onOpenCollection,
     hideOptions
   });
+  const handleBlur = event => {
+    var _rootRef$current;
+    if (event.relatedTarget instanceof Node && (_rootRef$current = rootRef.current) != null && _rootRef$current.contains(event.relatedTarget)) {
+      return;
+    }
+    onBlur == null || onBlur();
+  };
   const prefix = selectedItem && !value ? /*#__PURE__*/_react.default.createElement(_designSystem.Input.Affix, {
     "data-hook": "reference-input-avatar-prefix",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 111,
+      lineNumber: 122,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_referenceAvatar.ReferenceAvatar, {
@@ -95,7 +103,7 @@ const CellReferenceInput = exports.CellReferenceInput = /*#__PURE__*/_react.defa
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 112,
+      lineNumber: 123,
       columnNumber: 11
     }
   })) : undefined;
@@ -104,13 +112,14 @@ const CellReferenceInput = exports.CellReferenceInput = /*#__PURE__*/_react.defa
     // Prevent EditableCell's row click/dblclick handlers from firing when
     // the user interacts with the input or dropdown.
     _react.default.createElement("div", {
+      ref: rootRef,
       className: (0, _cellReferenceInputStCss.st)(_cellReferenceInputStCss.classes.root),
       onClick: e => e.stopPropagation(),
       onMouseDown: e => e.stopPropagation(),
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 122,
+        lineNumber: 133,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement(_designSystem.AutoComplete, {
@@ -123,7 +132,7 @@ const CellReferenceInput = exports.CellReferenceInput = /*#__PURE__*/_react.defa
       value: value,
       prefix: prefix,
       onChange: onChange,
-      onBlur: onBlur,
+      onBlur: handleBlur,
       onSelect: wdsOption => {
         const item = items.find(i => i.id === String(wdsOption.id));
         if (item) {
@@ -155,7 +164,7 @@ const CellReferenceInput = exports.CellReferenceInput = /*#__PURE__*/_react.defa
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 127,
+        lineNumber: 139,
         columnNumber: 9
       }
     }))