@wix/patterns-fields 1.40.0 → 1.42.0

package/dist/cjs/components/address/input/address-input.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_ = "addressinput4016198681";
+var _namespace_ = "addressinput705668431";
 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": "addressinput4016198681__root",
-  "tableAddressInput": "addressinput4016198681__tableAddressInput"
+  "root": "addressinput705668431__root",
+  "tableAddressInput": "addressinput705668431__tableAddressInput"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/address/input/address-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/address/input/address-input.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"addressinput4016198681\";\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\":\"addressinput4016198681__root\",\"tableAddressInput\":\"addressinput4016198681__tableAddressInput\"};\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,wBAAwB;AAC1C,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,8BAA8B;EAAC,mBAAmB,EAAC;AAA2C,CAAC;AACrH,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/address/input/address-input.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"addressinput705668431\";\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\":\"addressinput705668431__root\",\"tableAddressInput\":\"addressinput705668431__tableAddressInput\"};\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,uBAAuB;AACzC,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,6BAA6B;EAAC,mBAAmB,EAAC;AAA0C,CAAC;AACnH,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/audio/actions/actions-menu/actions-menu.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_ = "actionsmenu80615012";
+var _namespace_ = "actionsmenu287889715";
 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": "actionsmenu80615012__root",
-  "action": "actionsmenu80615012__action"
+  "root": "actionsmenu287889715__root",
+  "action": "actionsmenu287889715__action"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/audio/actions/actions-menu/actions-menu.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/audio/actions/actions-menu/actions-menu.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"actionsmenu80615012\";\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\":\"actionsmenu80615012__root\",\"action\":\"actionsmenu80615012__action\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-space-100\":\"--wds-space-100\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,qBAAqB;AACvC,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,2BAA2B;EAAC,QAAQ,EAAC;AAA6B,CAAC;AACzF,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,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/audio/actions/actions-menu/actions-menu.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"actionsmenu287889715\";\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\":\"actionsmenu287889715__root\",\"action\":\"actionsmenu287889715__action\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-space-100\":\"--wds-space-100\"}; \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,4BAA4B;EAAC,QAAQ,EAAC;AAA8B,CAAC;AAC3F,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,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

package/dist/cjs/components/audio/audio-field/form-audio-field.js

@@ -80,6 +80,8 @@ const FormAudioField = ({
       onDelete: handleDelete,
       readOnly
     }),
+    appendTo: 'window',
+    flip: true,
     zIndex: _common.Z_INDEX_MODAL_POPOVER
   }), [t, readOnly, handleReplace, handleDownload, handleDelete]);
   if (loading) {
@@ -89,7 +91,7 @@ const FormAudioField = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 86,
+        lineNumber: 88,
         columnNumber: 12
       }
     });
@@ -109,7 +111,7 @@ const FormAudioField = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 91,
+        lineNumber: 93,
         columnNumber: 7
       }
     });
@@ -121,7 +123,7 @@ const FormAudioField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 107,
+      lineNumber: 109,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -130,7 +132,7 @@ const FormAudioField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 108,
+      lineNumber: 110,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -142,7 +144,7 @@ const FormAudioField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 109,
+      lineNumber: 111,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
@@ -151,7 +153,7 @@ const FormAudioField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 116,
+      lineNumber: 118,
       columnNumber: 11
     }
   }, (0, _utils.getMediaTitle)(data)), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -161,7 +163,7 @@ const FormAudioField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 122,
+      lineNumber: 124,
       columnNumber: 11
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.AudioPlayer, {
@@ -172,7 +174,7 @@ const FormAudioField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 123,
+      lineNumber: 125,
       columnNumber: 13
     }
   }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -181,7 +183,7 @@ const FormAudioField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 129,
+      lineNumber: 131,
       columnNumber: 13
     }
   }, /*#__PURE__*/_react.default.createElement(_actionsButton.ActionsButton, {
@@ -192,7 +194,7 @@ const FormAudioField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 130,
+      lineNumber: 132,
       columnNumber: 15
     }
   }))))));

package/dist/cjs/components/audio/audio-field/form-audio-field.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_autoFieldTypes","_designSystem","_hooks","_utils","_common","_mediaControl","_mediaLoader","_actionsButton","_audioActions","_formAudioFieldStCss","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FormAudioField","data","onChange","onChangeAudio","onClear","onClearAudio","onInput","autoFocus","readOnly","invalid","dataHook","useTranslations","useWithCallback","inputRef","useRef","viewRef","callMedia","onMediaLoad","downloadMedia","loading","useMediaControl","mediaType","MEDIA_TYPES","AUDIO","value","handleReplace","handleDownload","handleDelete","useMediaHandlers","next","actionsMenuProps","useMemo","actions","buildAudioActions","labels","replace","download","delete","dataHooks","onReplace","onDownload","onDelete","zIndex","Z_INDEX_MODAL_POPOVER","createElement","MediaLoader","borderStyle","className","classes","addItem","__self","__source","fileName","lineNumber","columnNumber","AddItem","ref","style","disabled","error","theme","onClick","children","Box","direction","gap","tabIndex","verticalAlign","backgroundColor","padding","borderRadius","Text","mediaTitle","getMediaTitle","marginTop","marginBottom","AudioPlayer","src","getMediaURL","onLoad","onLoadError","marginLeft","ActionsButton","priority","skin","exports"],"sources":["../../../../../src/components/audio/audio-field/form-audio-field.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React, { useRef, useMemo } from 'react';\n\nimport { getMediaURL } from '../../../auto-field-types';\nimport type { AddItemActions } from '@wix/design-system';\nimport { AddItem, AudioPlayer, Box, Text } from '@wix/design-system';\n\nimport { useTranslations, useWithCallback } from '../../../hooks';\nimport { getMediaTitle, MEDIA_TYPES } from '../../../utils';\n\nimport { Z_INDEX_MODAL_POPOVER } from '../../common';\nimport type { FormMediaControlProps } from '../../media-control';\nimport { useMediaControl, useMediaHandlers } from '../../media-control';\nimport { MediaLoader } from '../../media-loader';\nimport { ActionsButton } from '../actions/actions-button';\nimport { buildAudioActions } from '../actions/audio-actions';\n\nimport { style, classes } from './form-audio-field.st.css.js';\n\nexport const FormAudioField: FC<FormMediaControlProps> = ({\n  data,\n  onChange: onChangeAudio,\n  onClear: onClearAudio,\n  onInput,\n  autoFocus,\n  readOnly,\n  invalid,\n  dataHook,\n}) => {\n  const { t } = useTranslations();\n\n  const onChange = useWithCallback(onChangeAudio, onInput);\n  const onClear = useWithCallback(onClearAudio, onInput);\n\n  const inputRef = useRef<AddItemActions>(null);\n  const viewRef = useRef<HTMLDivElement>(null);\n\n  const { callMedia, onMediaLoad, downloadMedia, loading } = useMediaControl({\n    mediaType: MEDIA_TYPES.AUDIO,\n    value: data,\n    onChange,\n    autoFocus,\n    readOnly,\n    inputRef,\n    viewRef,\n  });\n\n  const { handleReplace, handleDownload, handleDelete } = useMediaHandlers({\n    value: data ?? null,\n    callMedia,\n    downloadMedia,\n    onChange: (next) => {\n      if (next === null) {\n        onClear();\n      } else {\n        onChange(next);\n      }\n    },\n  });\n\n  const actionsMenuProps = useMemo(\n    () => ({\n      dataHook: 'fromAudioInput.moreActionsMenu',\n      actions: buildAudioActions({\n        labels: {\n          replace: t('CMS.audio.button.replace'),\n          download: t('CMS.audio.button.download'),\n          delete: t('CMS.audio.button.delete'),\n        },\n        dataHooks: {\n          replace: 'fromAudioInput.button.replace',\n          download: 'fromAudioInput.button.download',\n          delete: 'fromAudioInput.button.delete',\n        },\n        onReplace: handleReplace,\n        onDownload: handleDownload,\n        onDelete: handleDelete,\n        readOnly,\n      }),\n      zIndex: Z_INDEX_MODAL_POPOVER,\n    }),\n    [t, readOnly, handleReplace, handleDownload, handleDelete],\n  );\n\n  if (loading) {\n    return <MediaLoader borderStyle=\"dashed\" className={classes.addItem} />;\n  }\n\n  if (!data) {\n    return (\n      <AddItem\n        ref={inputRef}\n        dataHook={dataHook}\n        className={style(classes.addItem, {\n          disabled: !!readOnly,\n          error: invalid,\n        })}\n        theme=\"dashes\"\n        onClick={callMedia}\n        disabled={readOnly}\n        children={t('CMS.audio.button.add')}\n      />\n    );\n  }\n\n  return (\n    <Box dataHook={dataHook} direction=\"vertical\" gap=\"S1\">\n      <div ref={viewRef} tabIndex={0}>\n        <Box\n          direction=\"vertical\"\n          verticalAlign=\"middle\"\n          backgroundColor=\"D70\"\n          padding=\"SP5\"\n          borderRadius={12}\n        >\n          <Text\n            dataHook=\"fromAudioInput.audioName\"\n            className={classes.mediaTitle}\n          >\n            {getMediaTitle(data)}\n          </Text>\n          <Box direction=\"horizontal\" marginTop=\"9px\" marginBottom=\"-3px\">\n            <AudioPlayer\n              dataHook=\"fromAudioInput.player\"\n              src={getMediaURL(data)}\n              onLoad={onMediaLoad}\n              onLoadError={onMediaLoad}\n            />\n            <Box marginLeft=\"SP3\" gap=\"SP1\">\n              <ActionsButton\n                dataHook=\"fromAudioInput.button.more\"\n                actionsMenuProps={actionsMenuProps}\n                priority=\"secondary\"\n                skin=\"inverted\"\n              />\n            </Box>\n          </Box>\n        </Box>\n      </div>\n    </Box>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_autoFieldTypes","_designSystem","_hooks","_utils","_common","_mediaControl","_mediaLoader","_actionsButton","_audioActions","_formAudioFieldStCss","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FormAudioField","data","onChange","onChangeAudio","onClear","onClearAudio","onInput","autoFocus","readOnly","invalid","dataHook","useTranslations","useWithCallback","inputRef","useRef","viewRef","callMedia","onMediaLoad","downloadMedia","loading","useMediaControl","mediaType","MEDIA_TYPES","AUDIO","value","handleReplace","handleDownload","handleDelete","useMediaHandlers","next","actionsMenuProps","useMemo","actions","buildAudioActions","labels","replace","download","delete","dataHooks","onReplace","onDownload","onDelete","appendTo","flip","zIndex","Z_INDEX_MODAL_POPOVER","createElement","MediaLoader","borderStyle","className","classes","addItem","__self","__source","fileName","lineNumber","columnNumber","AddItem","ref","style","disabled","error","theme","onClick","children","Box","direction","gap","tabIndex","verticalAlign","backgroundColor","padding","borderRadius","Text","mediaTitle","getMediaTitle","marginTop","marginBottom","AudioPlayer","src","getMediaURL","onLoad","onLoadError","marginLeft","ActionsButton","priority","skin","exports"],"sources":["../../../../../src/components/audio/audio-field/form-audio-field.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React, { useRef, useMemo } from 'react';\n\nimport { getMediaURL } from '../../../auto-field-types';\nimport type { AddItemActions } from '@wix/design-system';\nimport { AddItem, AudioPlayer, Box, Text } from '@wix/design-system';\n\nimport { useTranslations, useWithCallback } from '../../../hooks';\nimport { getMediaTitle, MEDIA_TYPES } from '../../../utils';\n\nimport { Z_INDEX_MODAL_POPOVER } from '../../common';\nimport type { FormMediaControlProps } from '../../media-control';\nimport { useMediaControl, useMediaHandlers } from '../../media-control';\nimport { MediaLoader } from '../../media-loader';\nimport { ActionsButton } from '../actions/actions-button';\nimport { buildAudioActions } from '../actions/audio-actions';\n\nimport { style, classes } from './form-audio-field.st.css.js';\n\nexport const FormAudioField: FC<FormMediaControlProps> = ({\n  data,\n  onChange: onChangeAudio,\n  onClear: onClearAudio,\n  onInput,\n  autoFocus,\n  readOnly,\n  invalid,\n  dataHook,\n}) => {\n  const { t } = useTranslations();\n\n  const onChange = useWithCallback(onChangeAudio, onInput);\n  const onClear = useWithCallback(onClearAudio, onInput);\n\n  const inputRef = useRef<AddItemActions>(null);\n  const viewRef = useRef<HTMLDivElement>(null);\n\n  const { callMedia, onMediaLoad, downloadMedia, loading } = useMediaControl({\n    mediaType: MEDIA_TYPES.AUDIO,\n    value: data,\n    onChange,\n    autoFocus,\n    readOnly,\n    inputRef,\n    viewRef,\n  });\n\n  const { handleReplace, handleDownload, handleDelete } = useMediaHandlers({\n    value: data ?? null,\n    callMedia,\n    downloadMedia,\n    onChange: (next) => {\n      if (next === null) {\n        onClear();\n      } else {\n        onChange(next);\n      }\n    },\n  });\n\n  const actionsMenuProps = useMemo(\n    () => ({\n      dataHook: 'fromAudioInput.moreActionsMenu',\n      actions: buildAudioActions({\n        labels: {\n          replace: t('CMS.audio.button.replace'),\n          download: t('CMS.audio.button.download'),\n          delete: t('CMS.audio.button.delete'),\n        },\n        dataHooks: {\n          replace: 'fromAudioInput.button.replace',\n          download: 'fromAudioInput.button.download',\n          delete: 'fromAudioInput.button.delete',\n        },\n        onReplace: handleReplace,\n        onDownload: handleDownload,\n        onDelete: handleDelete,\n        readOnly,\n      }),\n      appendTo: 'window' as const,\n      flip: true,\n      zIndex: Z_INDEX_MODAL_POPOVER,\n    }),\n    [t, readOnly, handleReplace, handleDownload, handleDelete],\n  );\n\n  if (loading) {\n    return <MediaLoader borderStyle=\"dashed\" className={classes.addItem} />;\n  }\n\n  if (!data) {\n    return (\n      <AddItem\n        ref={inputRef}\n        dataHook={dataHook}\n        className={style(classes.addItem, {\n          disabled: !!readOnly,\n          error: invalid,\n        })}\n        theme=\"dashes\"\n        onClick={callMedia}\n        disabled={readOnly}\n        children={t('CMS.audio.button.add')}\n      />\n    );\n  }\n\n  return (\n    <Box dataHook={dataHook} direction=\"vertical\" gap=\"S1\">\n      <div ref={viewRef} tabIndex={0}>\n        <Box\n          direction=\"vertical\"\n          verticalAlign=\"middle\"\n          backgroundColor=\"D70\"\n          padding=\"SP5\"\n          borderRadius={12}\n        >\n          <Text\n            dataHook=\"fromAudioInput.audioName\"\n            className={classes.mediaTitle}\n          >\n            {getMediaTitle(data)}\n          </Text>\n          <Box direction=\"horizontal\" marginTop=\"9px\" marginBottom=\"-3px\">\n            <AudioPlayer\n              dataHook=\"fromAudioInput.player\"\n              src={getMediaURL(data)}\n              onLoad={onMediaLoad}\n              onLoadError={onMediaLoad}\n            />\n            <Box marginLeft=\"SP3\" gap=\"SP1\">\n              <ActionsButton\n                dataHook=\"fromAudioInput.button.more\"\n                actionsMenuProps={actionsMenuProps}\n                priority=\"secondary\"\n                skin=\"inverted\"\n              />\n            </Box>\n          </Box>\n        </Box>\n      </div>\n    </Box>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/audio/audio-field/form-audio-field.st.css.js

@@ -5,16 +5,16 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "formaudiofield56911128";
+var _namespace_ = "formaudiofield811929063";
 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": "formaudiofield56911128__root",
-  "addItem": "formaudiofield56911128__addItem",
-  "mediaTitle": "formaudiofield56911128__mediaTitle"
+  "root": "formaudiofield811929063__root",
+  "addItem": "formaudiofield811929063__addItem",
+  "mediaTitle": "formaudiofield811929063__mediaTitle"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/audio/audio-field/form-audio-field.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/audio/audio-field/form-audio-field.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"formaudiofield56911128\";\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\":\"formaudiofield56911128__root\",\"addItem\":\"formaudiofield56911128__addItem\",\"mediaTitle\":\"formaudiofield56911128__mediaTitle\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-red-100\":\"--wds-color-red-100\",\"wds-color-blue-300\":\"--wds-color-blue-300\",\"wds-border-radius-400\":\"--wds-border-radius-400\",\"wds-input-shadow-focus-standard\":\"--wds-input-shadow-focus-standard\",\"wsr-color-R10\":\"--wsr-color-R10\",\"wsr-color-B30\":\"--wsr-color-B30\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,wBAAwB;AAC1C,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,8BAA8B;EAAC,SAAS,EAAC,iCAAiC;EAAC,YAAY,EAAC;AAAoC,CAAC;AACnJ,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,oBAAoB,EAAC,sBAAsB;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,iCAAiC,EAAC,mCAAmC;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/audio/audio-field/form-audio-field.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"formaudiofield811929063\";\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\":\"formaudiofield811929063__root\",\"addItem\":\"formaudiofield811929063__addItem\",\"mediaTitle\":\"formaudiofield811929063__mediaTitle\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-red-100\":\"--wds-color-red-100\",\"wds-color-blue-300\":\"--wds-color-blue-300\",\"wds-border-radius-400\":\"--wds-border-radius-400\",\"wds-input-shadow-focus-standard\":\"--wds-input-shadow-focus-standard\",\"wsr-color-R10\":\"--wsr-color-R10\",\"wsr-color-B30\":\"--wsr-color-B30\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,yBAAyB;AAC3C,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,+BAA+B;EAAC,SAAS,EAAC,kCAAkC;EAAC,YAAY,EAAC;AAAqC,CAAC;AACtJ,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,oBAAoB,EAAC,sBAAsB;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

package/dist/cjs/components/audio/audio-player/audio-player.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_ = "audioplayer1282513900";
+var _namespace_ = "audioplayer4013659205";
 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": "audioplayer1282513900__root"
+  "root": "audioplayer4013659205__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/audio/audio-player/audio-player.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/audio/audio-player/audio-player.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"audioplayer1282513900\";\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\":\"audioplayer1282513900__root\"};\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,uBAAuB;AACzC,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;AAA6B,CAAC;AACpD,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/audio/audio-player/audio-player.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"audioplayer4013659205\";\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\":\"audioplayer4013659205__root\"};\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,uBAAuB;AACzC,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;AAA6B,CAAC;AACpD,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/color-view/cell-color-input.js

@@ -0,0 +1,195 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.CellColorInput = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _useTranslations = require("../../hooks/use-translations");
+var _hex2 = require("./hex");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/color-view/cell-color-input.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); }
+/**
+ * Cell-layer ColorInput for EditableTable. Differs from the form ColorInput in
+ * four ways required by the cell context:
+ *  1. `popoverProps` passthrough so the picker can `appendTo: 'window'` and
+ *     escape the table's scroll container.
+ *  2. The empty-state add-color button appears for invalid values too (not
+ *     only missing) — mid-typing or post-commit bad hex should still expose
+ *     the picker as an escape hatch.
+ *  3. Invalid input on blur is forwarded upward (prefixed with `#`) so the
+ *     cell-level `validate()` can surface the error; we don't silently revert.
+ *  4. Picker closes on any ancestor scroll while open — the portaled popover
+ *     does not follow the trigger.
+ */
+const CellColorInput = exports.CellColorInput = /*#__PURE__*/(0, _react.forwardRef)(({
+  value: colorValue,
+  onChange,
+  onBlur,
+  popoverProps,
+  inputRef,
+  ...props
+}, ref) => {
+  const {
+    t
+  } = (0, _useTranslations.useTranslations)();
+  const [inputValue, setInputValue] = (0, _react.useState)(colorValue ? (0, _hex2.omitHash)(colorValue) : '');
+  const [showPicker, setShowPicker] = (0, _react.useState)(false);
+  const [pickerHex, setPickerHex] = (0, _react.useState)(colorValue && (0, _hex2.isValidHex)(colorValue) ? colorValue : undefined);
+  const onInputChange = (0, _react.useCallback)(e => {
+    const raw = e.target.value.replace(/^#/, '');
+    setInputValue(raw);
+    const hex = (0, _hex2.normalizeHex)(raw);
+    if (hex) {
+      setPickerHex(hex);
+      onChange == null || onChange(hex);
+    } else {
+      onChange == null || onChange(raw === '' ? '' : `#${raw}`);
+    }
+  }, [onChange]);
+  const onInputBlur = (0, _react.useCallback)(e => {
+    const hex = (0, _hex2.normalizeHex)(inputValue);
+    if (hex) {
+      onChange == null || onChange(hex);
+      setInputValue((0, _hex2.omitHash)(hex));
+    }
+    onBlur == null || onBlur(e);
+  }, [onChange, onBlur, inputValue]);
+  const onPickerConfirm = (0, _react.useCallback)(confirmedColor => {
+    var _hex;
+    const hex = typeof confirmedColor === 'string' ? confirmedColor.toUpperCase() : confirmedColor == null || confirmedColor.hex == null || (_hex = confirmedColor.hex()) == null ? void 0 : _hex.toUpperCase();
+    if (hex) {
+      onChange == null || onChange(hex);
+      setInputValue((0, _hex2.omitHash)(hex));
+      setPickerHex(hex);
+    } else {
+      onChange == null || onChange('');
+      setInputValue('');
+      setPickerHex(undefined);
+    }
+    setShowPicker(false);
+  }, [onChange]);
+  const onPickerCancel = (0, _react.useCallback)(() => {
+    setPickerHex(colorValue && (0, _hex2.isValidHex)(colorValue) ? colorValue : undefined);
+    setShowPicker(false);
+  }, [colorValue]);
+  const togglePicker = (0, _react.useCallback)(() => {
+    setShowPicker(prev => !prev);
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!showPicker) {
+      return;
+    }
+    const close = () => setShowPicker(false);
+    const opts = {
+      capture: true
+    };
+    window.addEventListener('scroll', close, {
+      ...opts,
+      passive: true
+    });
+    return () => window.removeEventListener('scroll', close, opts);
+  }, [showPicker]);
+  const showAddColorButton = !colorValue || !(0, _hex2.isValidHex)(colorValue);
+  const addColorTooltip = t('auto-patterns.fields.add_color_tooltip');
+  const popoverDefaults = {
+    animate: true,
+    flip: true,
+    fixed: false,
+    placement: 'bottom-start',
+    appendTo: 'window',
+    moveBy: {
+      x: 0,
+      y: 4
+    },
+    zIndex: 9999
+  };
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Input, (0, _extends2.default)({}, props, {
+    ref: instance => {
+      if (inputRef) inputRef.current = instance;
+      if (typeof ref === 'function') ref(instance);else if (ref) ref.current = instance;
+    },
+    value: inputValue,
+    onChange: onInputChange,
+    onBlur: onInputBlur,
+    prefix: /*#__PURE__*/_react.default.createElement(_designSystem.Input.Affix, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 154,
+        columnNumber: 17
+      }
+    }, "#"),
+    suffix: /*#__PURE__*/_react.default.createElement(_designSystem.Input.Affix, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 156,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.Popover, (0, _extends2.default)({}, popoverDefaults, popoverProps, {
+      shown: showPicker,
+      onClickOutside: () => setShowPicker(false),
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 157,
+        columnNumber: 13
+      }
+    }), /*#__PURE__*/_react.default.createElement(_designSystem.Popover.Element, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 163,
+        columnNumber: 15
+      }
+    }, showAddColorButton ? /*#__PURE__*/_react.default.createElement(_designSystem.FillButton, {
+      onClick: togglePicker,
+      tooltipContent: addColorTooltip,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 165,
+        columnNumber: 19
+      }
+    }) : /*#__PURE__*/_react.default.createElement(_designSystem.FillPreview, {
+      fill: colorValue,
+      onClick: togglePicker,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 170,
+        columnNumber: 19
+      }
+    })), /*#__PURE__*/_react.default.createElement(_designSystem.Popover.Content, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 173,
+        columnNumber: 15
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.ColorPicker, {
+      value: pickerHex,
+      onChange: c => setPickerHex(typeof c === 'string' ? c : c == null || c.hex == null ? void 0 : c.hex()),
+      onConfirm: onPickerConfirm,
+      onCancel: onPickerCancel,
+      showConverter: true,
+      allowEmpty: true,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 174,
+        columnNumber: 17
+      }
+    })))),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 144,
+      columnNumber: 7
+    }
+  }));
+});
+CellColorInput.displayName = 'CellColorInput';
+//# sourceMappingURL=cell-color-input.js.map

package/dist/cjs/components/color-view/cell-color-input.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_useTranslations","_hex2","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CellColorInput","exports","forwardRef","value","colorValue","onChange","onBlur","popoverProps","inputRef","props","ref","useTranslations","inputValue","setInputValue","useState","omitHash","showPicker","setShowPicker","pickerHex","setPickerHex","isValidHex","undefined","onInputChange","useCallback","raw","target","replace","hex","normalizeHex","onInputBlur","onPickerConfirm","confirmedColor","_hex","toUpperCase","onPickerCancel","togglePicker","prev","useEffect","close","opts","capture","window","addEventListener","passive","removeEventListener","showAddColorButton","addColorTooltip","popoverDefaults","animate","flip","fixed","placement","appendTo","moveBy","x","y","zIndex","createElement","Input","_extends2","instance","current","prefix","Affix","__self","__source","fileName","lineNumber","columnNumber","suffix","Popover","shown","onClickOutside","Element","FillButton","onClick","tooltipContent","FillPreview","fill","Content","ColorPicker","c","onConfirm","onCancel","showConverter","allowEmpty","displayName"],"sources":["../../../../src/components/color-view/cell-color-input.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useState } from 'react';\nimport type {\n  ColorPickerProps,\n  InputImperativeActions,\n  InputProps,\n  PopoverProps,\n} from '@wix/design-system';\nimport {\n  ColorPicker,\n  FillButton,\n  FillPreview,\n  Input,\n  Popover,\n} from '@wix/design-system';\nimport { useTranslations } from '../../hooks/use-translations';\nimport { isValidHex, normalizeHex, omitHash } from './hex';\n\nexport interface CellColorInputProps\n  extends Omit<\n    InputProps,\n    'value' | 'onChange' | 'prefix' | 'suffix' | 'inputRef'\n  > {\n  value?: string;\n  onChange?: (text: string) => void;\n  popoverProps?: Partial<PopoverProps>;\n  inputRef?: React.MutableRefObject<InputImperativeActions | null | undefined>;\n}\n\n/**\n * Cell-layer ColorInput for EditableTable. Differs from the form ColorInput in\n * four ways required by the cell context:\n *  1. `popoverProps` passthrough so the picker can `appendTo: 'window'` and\n *     escape the table's scroll container.\n *  2. The empty-state add-color button appears for invalid values too (not\n *     only missing) — mid-typing or post-commit bad hex should still expose\n *     the picker as an escape hatch.\n *  3. Invalid input on blur is forwarded upward (prefixed with `#`) so the\n *     cell-level `validate()` can surface the error; we don't silently revert.\n *  4. Picker closes on any ancestor scroll while open — the portaled popover\n *     does not follow the trigger.\n */\nexport const CellColorInput = forwardRef<\n  InputImperativeActions,\n  CellColorInputProps\n>(\n  (\n    { value: colorValue, onChange, onBlur, popoverProps, inputRef, ...props },\n    ref,\n  ) => {\n    const { t } = useTranslations();\n    const [inputValue, setInputValue] = useState(\n      colorValue ? omitHash(colorValue) : '',\n    );\n    const [showPicker, setShowPicker] = useState(false);\n    const [pickerHex, setPickerHex] = useState<string | undefined>(\n      colorValue && isValidHex(colorValue) ? colorValue : undefined,\n    );\n\n    const onInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const raw = e.target.value.replace(/^#/, '');\n        setInputValue(raw);\n\n        const hex = normalizeHex(raw);\n        if (hex) {\n          setPickerHex(hex);\n          onChange?.(hex);\n        } else {\n          onChange?.(raw === '' ? '' : `#${raw}`);\n        }\n      },\n      [onChange],\n    );\n\n    const onInputBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        const hex = normalizeHex(inputValue);\n        if (hex) {\n          onChange?.(hex);\n          setInputValue(omitHash(hex));\n        }\n        onBlur?.(e);\n      },\n      [onChange, onBlur, inputValue],\n    );\n\n    const onPickerConfirm = useCallback(\n      (confirmedColor: ColorPickerProps['value']) => {\n        const hex =\n          typeof confirmedColor === 'string'\n            ? confirmedColor.toUpperCase()\n            : (confirmedColor as { hex?: () => string } | null | undefined)\n                ?.hex?.()\n                ?.toUpperCase();\n        if (hex) {\n          onChange?.(hex);\n          setInputValue(omitHash(hex));\n          setPickerHex(hex);\n        } else {\n          onChange?.('');\n          setInputValue('');\n          setPickerHex(undefined);\n        }\n        setShowPicker(false);\n      },\n      [onChange],\n    );\n\n    const onPickerCancel = useCallback(() => {\n      setPickerHex(\n        colorValue && isValidHex(colorValue) ? colorValue : undefined,\n      );\n      setShowPicker(false);\n    }, [colorValue]);\n\n    const togglePicker = useCallback(() => {\n      setShowPicker((prev) => !prev);\n    }, []);\n\n    useEffect(() => {\n      if (!showPicker) {\n        return;\n      }\n      const close = () => setShowPicker(false);\n      const opts = { capture: true } as const;\n      window.addEventListener('scroll', close, { ...opts, passive: true });\n      return () => window.removeEventListener('scroll', close, opts);\n    }, [showPicker]);\n\n    const showAddColorButton = !colorValue || !isValidHex(colorValue);\n    const addColorTooltip = t('auto-patterns.fields.add_color_tooltip');\n\n    const popoverDefaults: Partial<PopoverProps> = {\n      animate: true,\n      flip: true,\n      fixed: false,\n      placement: 'bottom-start',\n      appendTo: 'window',\n      moveBy: { x: 0, y: 4 },\n      zIndex: 9999,\n    };\n\n    return (\n      <Input\n        {...props}\n        ref={(instance) => {\n          if (inputRef) inputRef.current = instance;\n          if (typeof ref === 'function') ref(instance);\n          else if (ref) ref.current = instance;\n        }}\n        value={inputValue}\n        onChange={onInputChange}\n        onBlur={onInputBlur}\n        prefix={<Input.Affix>#</Input.Affix>}\n        suffix={\n          <Input.Affix>\n            <Popover\n              {...popoverDefaults}\n              {...popoverProps}\n              shown={showPicker}\n              onClickOutside={() => setShowPicker(false)}\n            >\n              <Popover.Element>\n                {showAddColorButton ? (\n                  <FillButton\n                    onClick={togglePicker}\n                    tooltipContent={addColorTooltip}\n                  />\n                ) : (\n                  <FillPreview fill={colorValue} onClick={togglePicker} />\n                )}\n              </Popover.Element>\n              <Popover.Content>\n                <ColorPicker\n                  value={pickerHex as ColorPickerProps['value']}\n                  onChange={\n                    ((c: ColorPickerProps['value']) =>\n                      setPickerHex(\n                        typeof c === 'string'\n                          ? c\n                          : (\n                              c as { hex?: () => string } | null | undefined\n                            )?.hex?.(),\n                      )) as ColorPickerProps['onChange']\n                  }\n                  onConfirm={onPickerConfirm}\n                  onCancel={onPickerCancel}\n                  showConverter\n                  allowEmpty\n                />\n              </Popover.Content>\n            </Popover>\n          </Input.Affix>\n        }\n      />\n    );\n  },\n);\n\nCellColorInput.displayName = 'CellColorInput';\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/color-view/cell-color-view.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.CellColorView = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _designSystem = require("@wix/design-system");
+var _cellColorViewStCss = require("./cell-color-view.st.css.js");
+var _hex = require("./hex");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/color-view/cell-color-view.tsx";
+/**
+ * Cell-layer color view. Matches the visual layout of CellColorInput so the
+ * View↔Edit transition is seamless.
+ *
+ *   "#"  (placeholder color)   hex digits (thin, uppercase)   [swatch right]
+ *
+ * Empty or invalid values show only the `#` on the left and the empty-state
+ * FillPreview (diagonal-slash placeholder) on the right.
+ */
+const CellColorView = ({
+  value
+}) => {
+  const isValid = !!value && _hex.HEX_RE.test(value);
+  const hex = value ? value.replace(/^#/, '').toUpperCase() : '';
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    width: "100%",
+    verticalAlign: "middle",
+    align: "space-between",
+    gap: "SP1",
+    dataHook: "cell-color-view",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 24,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    gap: "SP1",
+    verticalAlign: "middle",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 31,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    className: _cellColorViewStCss.classes.hashPrefix,
+    dataHook: "cell-color-view-hash",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 32,
+      columnNumber: 9
+    }
+  }, "#"), hex ? /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
+    size: "small",
+    weight: "thin",
+    dataHook: "cell-color-view-text",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 36,
+      columnNumber: 11
+    }
+  }, hex) : null), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    width: "24px",
+    height: "24px",
+    flexShrink: 0,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 41,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.FillPreview, {
+    fill: isValid ? value : undefined,
+    aspectRatio: 1,
+    dataHook: "cell-color-view-fill-preview",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 42,
+      columnNumber: 9
+    }
+  })));
+};
+exports.CellColorView = CellColorView;
+CellColorView.displayName = 'CellColorView';
+//# sourceMappingURL=cell-color-view.js.map

package/dist/cjs/components/color-view/cell-color-view.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_cellColorViewStCss","_hex","_jsxFileName","CellColorView","value","isValid","HEX_RE","test","hex","replace","toUpperCase","default","createElement","Box","width","verticalAlign","align","gap","dataHook","__self","__source","fileName","lineNumber","columnNumber","className","classes","hashPrefix","Text","size","weight","height","flexShrink","FillPreview","fill","undefined","aspectRatio","exports","displayName"],"sources":["../../../../src/components/color-view/cell-color-view.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, FillPreview, Text } from '@wix/design-system';\nimport { classes } from './cell-color-view.st.css.js';\nimport { HEX_RE } from './hex';\n\nexport interface CellColorViewProps {\n  value?: string;\n}\n\n/**\n * Cell-layer color view. Matches the visual layout of CellColorInput so the\n * View↔Edit transition is seamless.\n *\n *   \"#\"  (placeholder color)   hex digits (thin, uppercase)   [swatch right]\n *\n * Empty or invalid values show only the `#` on the left and the empty-state\n * FillPreview (diagonal-slash placeholder) on the right.\n */\nexport const CellColorView: React.FC<CellColorViewProps> = ({ value }) => {\n  const isValid = !!value && HEX_RE.test(value);\n  const hex = value ? value.replace(/^#/, '').toUpperCase() : '';\n\n  return (\n    <Box\n      width=\"100%\"\n      verticalAlign=\"middle\"\n      align=\"space-between\"\n      gap=\"SP1\"\n      dataHook=\"cell-color-view\"\n    >\n      <Box gap=\"SP1\" verticalAlign=\"middle\">\n        <Box className={classes.hashPrefix} dataHook=\"cell-color-view-hash\">\n          #\n        </Box>\n        {hex ? (\n          <Text size=\"small\" weight=\"thin\" dataHook=\"cell-color-view-text\">\n            {hex}\n          </Text>\n        ) : null}\n      </Box>\n      <Box width=\"24px\" height=\"24px\" flexShrink={0}>\n        <FillPreview\n          fill={isValid ? value : undefined}\n          aspectRatio={1}\n          dataHook=\"cell-color-view-fill-preview\"\n        />\n      </Box>\n    </Box>\n  );\n};\n\nCellColorView.displayName = 'CellColorView';\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AACA,IAAAG,IAAA,GAAAH,OAAA;AAA+B,IAAAI,YAAA;AAM/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,aAA2C,GAAGA,CAAC;EAAEC;AAAM,CAAC,KAAK;EACxE,MAAMC,OAAO,GAAG,CAAC,CAACD,KAAK,IAAIE,WAAM,CAACC,IAAI,CAACH,KAAK,CAAC;EAC7C,MAAMI,GAAG,GAAGJ,KAAK,GAAGA,KAAK,CAACK,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAACC,WAAW,CAAC,CAAC,GAAG,EAAE;EAE9D,oBACEd,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAAc,GAAG;IACFC,KAAK,EAAC,MAAM;IACZC,aAAa,EAAC,QAAQ;IACtBC,KAAK,EAAC,eAAe;IACrBC,GAAG,EAAC,KAAK;IACTC,QAAQ,EAAC,iBAAiB;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAE1B3B,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAAc,GAAG;IAACI,GAAG,EAAC,KAAK;IAACF,aAAa,EAAC,QAAQ;IAAAI,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACnC3B,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAAc,GAAG;IAACW,SAAS,EAAEC,2BAAO,CAACC,UAAW;IAACR,QAAQ,EAAC,sBAAsB;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAAC,GAE/D,CAAC,EACLf,GAAG,gBACFZ,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAA4B,IAAI;IAACC,IAAI,EAAC,OAAO;IAACC,MAAM,EAAC,MAAM;IAACX,QAAQ,EAAC,sBAAsB;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAC7Df,GACG,CAAC,GACL,IACD,CAAC,eACNZ,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAAc,GAAG;IAACC,KAAK,EAAC,MAAM;IAACgB,MAAM,EAAC,MAAM;IAACC,UAAU,EAAE,CAAE;IAAAZ,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAC5C3B,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,aAAA,CAAAiC,WAAW;IACVC,IAAI,EAAE5B,OAAO,GAAGD,KAAK,GAAG8B,SAAU;IAClCC,WAAW,EAAE,CAAE;IACfjB,QAAQ,EAAC,8BAA8B;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,CACxC,CACE,CACF,CAAC;AAEV,CAAC;AAACa,OAAA,CAAAjC,aAAA,GAAAA,aAAA;AAEFA,aAAa,CAACkC,WAAW,GAAG,eAAe","ignoreList":[]}

package/dist/cjs/components/color-view/cell-color-view.st.css

@@ -0,0 +1,8 @@
+@property st-global(--wsr-color-D40);
+
+.hashPrefix {
+  color: var(--wsr-color-D40, #868aa5);
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 1;
+}