@wix/patterns 1.432.0 → 1.434.0

package/dist/cjs/components/CustomFieldModal/CustomFieldModal.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_designSystem","_ActionModal","_","_react2","_CustomFieldModalPrimaryButton","_minimalRequiredWdsRuntimeCheck","_useBmHarmonyTheme","_jsxFileName","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CustomFieldFormV2","React","lazy","Promise","resolve","then","m","_CustomFieldModal","state","process","env","NODE_ENV","minimalRequiredWdsRuntimeCheck","required","requiredBy","translate","environment","language","internalExperiments","useWixPatternsContainer","mode","customFieldModalBiReporter","reportLearnMoreClick","reportModalEndProcess","fieldManagement","maxReached","createElement","MessageActionModal","modalState","title","primaryButtonText","content","__self","__source","fileName","lineNumber","columnNumber","fieldModalText","addTitle","editTitle","addSubtitle","undefined","useV2Form","enabled","CustomActionModal","dataHook","subtitle","CustomFieldModalSubtitle","Suspense","fallback","CustomFieldForm","CustomFieldModalPrimaryButton","secondaryButtonText","onCloseButtonClick","endType","secondaryButtonOnClick","showFooterDivider","footnote","supportsPii","Footnote","exports","CustomFieldModal","observer","isBmHarmonyTheme","useBmHarmonyTheme","Text","size","href","target","rel","onClick","text","note","learnMore","textSize","Box","direction","TextButton","as","label"],"sources":["../../../../src/components/CustomFieldModal/CustomFieldModal.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Box, Text, TextButton } from '@wix/design-system';\nimport { CustomActionModal, MessageActionModal } from '../ActionModal';\nimport { CustomFieldForm } from '.';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { CustomFieldModalPrimaryButton } from './CustomFieldModalPrimaryButton';\nimport {\n  CustomFieldModalState,\n  FieldModalSubtitle,\n  Translate,\n} from '@wix/bex-core';\nimport { minimalRequiredWdsRuntimeCheck } from '../../minimalRequiredWdsRuntimeCheck';\nimport { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';\n\n// Lazy so the V2 form (and its subtree) stays out of the main bundle while the\n// flag is off.\nconst CustomFieldFormV2 = React.lazy(() =>\n  import(\n    /* webpackChunkName: \"CustomFieldFormV2\" */ './CustomFieldFormV2'\n  ).then((m) => ({ default: m.CustomFieldFormV2 })),\n);\n\nexport const _CustomFieldModal = ({\n  state,\n}: {\n  state: CustomFieldModalState;\n}) => {\n  if (process.env.NODE_ENV !== 'production') {\n    // We show form errors in the FormField status messages which were introduced\n    // in wix-style-react 10.56.0\n    minimalRequiredWdsRuntimeCheck({\n      required: '^1.64.1',\n      requiredBy: 'WixPatterns/CustomFieldModal',\n    });\n  }\n\n  const {\n    translate: t,\n    environment: { language },\n    internalExperiments,\n  } = useWixPatternsContainer();\n\n  const {\n    mode,\n    customFieldModalBiReporter: { reportLearnMoreClick, reportModalEndProcess },\n  } = state;\n\n  if (mode === 'new' && state.fieldManagement.maxReached) {\n    return (\n      <MessageActionModal\n        state={state.modalState}\n        title={t('cairo.customFields.maxLimit.modal.title')}\n        primaryButtonText={t('cairo.customFields.maxLimit.modal.cta')}\n        content={t('cairo.customFields.maxLimit.modal.description')}\n      />\n    );\n  }\n\n  const { fieldModalText } = state.fieldManagement;\n  const title =\n    mode === 'new' ? fieldModalText.addTitle : fieldModalText.editTitle;\n  const addSubtitle = mode === 'new' ? fieldModalText.addSubtitle : undefined;\n  const useV2Form = internalExperiments?.enabled('newFieldsModal');\n\n  return (\n    <CustomActionModal\n      dataHook=\"custom-field-modal\"\n      state={state.modalState}\n      title={title}\n      subtitle={\n        addSubtitle && <CustomFieldModalSubtitle subtitle={addSubtitle} />\n      }\n      content={\n        useV2Form ? (\n          <React.Suspense fallback={null}>\n            <CustomFieldFormV2 state={state} />\n          </React.Suspense>\n        ) : (\n          <CustomFieldForm state={state} />\n        )\n      }\n      primaryButtonText={\n        <CustomFieldModalPrimaryButton\n          state={state}\n          content={\n            mode === 'new'\n              ? t('cairo.customFields.addCustomField.modal.add.CTA')\n              : t('cairo.customFields.editCustomField.save.CTA')\n          }\n        />\n      }\n      secondaryButtonText={t(\n        'cairo.customFields.addCustomField.modal.cancel.CTA',\n      )}\n      onCloseButtonClick={() => reportModalEndProcess({ endType: 'Cancel' })}\n      secondaryButtonOnClick={() =>\n        reportModalEndProcess({ endType: 'Cancel' })\n      }\n      showFooterDivider={useV2Form}\n      // V2 has no footnote: whether the toggle row shows is the whole signal.\n      footnote={\n        useV2Form || state.fieldManagement.supportsPii ? null : (\n          <Footnote\n            language={language}\n            reportLearnMoreClick={reportLearnMoreClick}\n            t={t}\n          />\n        )\n      }\n    />\n  );\n};\n\nexport const CustomFieldModal = observer(_CustomFieldModal);\n\ninterface FootnoteProps {\n  language: string;\n  reportLearnMoreClick: () => void;\n  t: Translate;\n}\n\nconst Footnote: React.FC<FootnoteProps> = ({\n  language,\n  reportLearnMoreClick,\n  t,\n}) => {\n  const isBmHarmonyTheme = useBmHarmonyTheme();\n\n  return (\n    <Text size={isBmHarmonyTheme ? 'tiny' : 'small'} dataHook=\"pii-footnote\">\n      {t('cairo.customFields.addCustomField.modal.PII')}\n      &nbsp;\n      <a\n        href={`https://support.wix.com/${language}/article/about-personally-identifiable-information-pii`}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        onClick={reportLearnMoreClick}\n      >\n        {t('cairo.customFields.addCustomField.modal.PII.learnMore')}\n      </a>\n    </Text>\n  );\n};\n\ninterface CustomFieldModalSubtitleProps {\n  subtitle: FieldModalSubtitle;\n}\n\nconst CustomFieldModalSubtitle: React.FC<CustomFieldModalSubtitleProps> = ({\n  subtitle: { text, note, learnMore },\n}) => {\n  const isBmHarmonyTheme = useBmHarmonyTheme();\n  const textSize = isBmHarmonyTheme ? 'small' : 'medium';\n\n  return (\n    <Box direction=\"vertical\">\n      <Text size={textSize}>{text}</Text>\n      {(note || learnMore) && (\n        <Text size={textSize}>\n          {note}\n          {note && learnMore ? ' ' : null}\n          {learnMore && (\n            <TextButton\n              as=\"a\"\n              rel=\"noopener\"\n              target=\"_blank\"\n              href={learnMore.href}\n              dataHook=\"custom-field-modal-subtitle-learnmore\"\n            >\n              {learnMore.label}\n            </TextButton>\n          )}\n        </Text>\n      )}\n    </Box>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_designSystem","_ActionModal","_","_react2","_CustomFieldModalPrimaryButton","_minimalRequiredWdsRuntimeCheck","_useBmHarmonyTheme","_jsxFileName","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CustomFieldFormV2","React","lazy","Promise","resolve","then","m","_CustomFieldModal","state","process","env","NODE_ENV","minimalRequiredWdsRuntimeCheck","required","requiredBy","translate","environment","language","internalExperiments","useWixPatternsContainer","mode","customFieldModalBiReporter","reportLearnMoreClick","reportModalEndProcess","fieldManagement","maxReached","createElement","MessageActionModal","modalState","title","primaryButtonText","content","__self","__source","fileName","lineNumber","columnNumber","text","fieldModal","addTitle","editTitle","addSubtitle","undefined","useV2Form","enabled","CustomActionModal","dataHook","subtitle","CustomFieldModalSubtitle","Suspense","fallback","CustomFieldForm","CustomFieldModalPrimaryButton","secondaryButtonText","onCloseButtonClick","endType","secondaryButtonOnClick","showFooterDivider","footnote","supportsPii","Footnote","exports","CustomFieldModal","observer","isBmHarmonyTheme","useBmHarmonyTheme","Text","size","href","target","rel","onClick","note","learnMore","textSize","Box","direction","TextButton","as","label"],"sources":["../../../../src/components/CustomFieldModal/CustomFieldModal.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Box, Text, TextButton } from '@wix/design-system';\nimport { CustomActionModal, MessageActionModal } from '../ActionModal';\nimport { CustomFieldForm } from '.';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { CustomFieldModalPrimaryButton } from './CustomFieldModalPrimaryButton';\nimport {\n  CustomFieldModalState,\n  FieldModalSubtitle,\n  Translate,\n} from '@wix/bex-core';\nimport { minimalRequiredWdsRuntimeCheck } from '../../minimalRequiredWdsRuntimeCheck';\nimport { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';\n\n// Lazy so the V2 form (and its subtree) stays out of the main bundle while the\n// flag is off.\nconst CustomFieldFormV2 = React.lazy(() =>\n  import(\n    /* webpackChunkName: \"CustomFieldFormV2\" */ './CustomFieldFormV2'\n  ).then((m) => ({ default: m.CustomFieldFormV2 })),\n);\n\nexport const _CustomFieldModal = ({\n  state,\n}: {\n  state: CustomFieldModalState;\n}) => {\n  if (process.env.NODE_ENV !== 'production') {\n    // We show form errors in the FormField status messages which were introduced\n    // in wix-style-react 10.56.0\n    minimalRequiredWdsRuntimeCheck({\n      required: '^1.64.1',\n      requiredBy: 'WixPatterns/CustomFieldModal',\n    });\n  }\n\n  const {\n    translate: t,\n    environment: { language },\n    internalExperiments,\n  } = useWixPatternsContainer();\n\n  const {\n    mode,\n    customFieldModalBiReporter: { reportLearnMoreClick, reportModalEndProcess },\n  } = state;\n\n  if (mode === 'new' && state.fieldManagement.maxReached) {\n    return (\n      <MessageActionModal\n        state={state.modalState}\n        title={t('cairo.customFields.maxLimit.modal.title')}\n        primaryButtonText={t('cairo.customFields.maxLimit.modal.cta')}\n        content={t('cairo.customFields.maxLimit.modal.description')}\n      />\n    );\n  }\n\n  const { text } = state.fieldManagement.fieldModal;\n  const title = mode === 'new' ? text.addTitle : text.editTitle;\n  const addSubtitle = mode === 'new' ? text.addSubtitle : undefined;\n  const useV2Form = internalExperiments?.enabled('newFieldsModal');\n\n  return (\n    <CustomActionModal\n      dataHook=\"custom-field-modal\"\n      state={state.modalState}\n      title={title}\n      subtitle={\n        addSubtitle && <CustomFieldModalSubtitle subtitle={addSubtitle} />\n      }\n      content={\n        useV2Form ? (\n          <React.Suspense fallback={null}>\n            <CustomFieldFormV2 state={state} />\n          </React.Suspense>\n        ) : (\n          <CustomFieldForm state={state} />\n        )\n      }\n      primaryButtonText={\n        <CustomFieldModalPrimaryButton\n          state={state}\n          content={\n            mode === 'new'\n              ? t('cairo.customFields.addCustomField.modal.add.CTA')\n              : t('cairo.customFields.editCustomField.save.CTA')\n          }\n        />\n      }\n      secondaryButtonText={t(\n        'cairo.customFields.addCustomField.modal.cancel.CTA',\n      )}\n      onCloseButtonClick={() => reportModalEndProcess({ endType: 'Cancel' })}\n      secondaryButtonOnClick={() =>\n        reportModalEndProcess({ endType: 'Cancel' })\n      }\n      showFooterDivider={useV2Form}\n      // V2 has no footnote: whether the toggle row shows is the whole signal.\n      footnote={\n        useV2Form || state.fieldManagement.fieldModal.supportsPii ? null : (\n          <Footnote\n            language={language}\n            reportLearnMoreClick={reportLearnMoreClick}\n            t={t}\n          />\n        )\n      }\n    />\n  );\n};\n\nexport const CustomFieldModal = observer(_CustomFieldModal);\n\ninterface FootnoteProps {\n  language: string;\n  reportLearnMoreClick: () => void;\n  t: Translate;\n}\n\nconst Footnote: React.FC<FootnoteProps> = ({\n  language,\n  reportLearnMoreClick,\n  t,\n}) => {\n  const isBmHarmonyTheme = useBmHarmonyTheme();\n\n  return (\n    <Text size={isBmHarmonyTheme ? 'tiny' : 'small'} dataHook=\"pii-footnote\">\n      {t('cairo.customFields.addCustomField.modal.PII')}\n      &nbsp;\n      <a\n        href={`https://support.wix.com/${language}/article/about-personally-identifiable-information-pii`}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        onClick={reportLearnMoreClick}\n      >\n        {t('cairo.customFields.addCustomField.modal.PII.learnMore')}\n      </a>\n    </Text>\n  );\n};\n\ninterface CustomFieldModalSubtitleProps {\n  subtitle: FieldModalSubtitle;\n}\n\nconst CustomFieldModalSubtitle: React.FC<CustomFieldModalSubtitleProps> = ({\n  subtitle: { text, note, learnMore },\n}) => {\n  const isBmHarmonyTheme = useBmHarmonyTheme();\n  const textSize = isBmHarmonyTheme ? 'small' : 'medium';\n\n  return (\n    <Box direction=\"vertical\">\n      <Text size={textSize}>{text}</Text>\n      {(note || learnMore) && (\n        <Text size={textSize}>\n          {note}\n          {note && learnMore ? ' ' : null}\n          {learnMore && (\n            <TextButton\n              as=\"a\"\n              rel=\"noopener\"\n              target=\"_blank\"\n              href={learnMore.href}\n              dataHook=\"custom-field-modal-subtitle-learnmore\"\n            >\n              {learnMore.label}\n            </TextButton>\n          )}\n        </Text>\n      )}\n    </Box>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/CustomFieldModal/CustomFieldTypeDropdown.js

@@ -20,7 +20,7 @@ const _CustomFieldTypeDropdown = props => {
       },
       mode,
       fieldManagement: {
-        creatableFieldTypes
+        fieldModal
       },
       generateUniqueKey,
       setKeyFieldIfNotDirty
@@ -29,7 +29,7 @@ const _CustomFieldTypeDropdown = props => {
   const {
     translate: t
   } = (0, _react2.useWixPatternsContainer)();
-  const fieldTypeOptions = _react.default.useMemo(() => creatableFieldTypes.map(option => (0, _designSystem.listItemSelectBuilder)({
+  const fieldTypeOptions = _react.default.useMemo(() => fieldModal.types.map(option => (0, _designSystem.listItemSelectBuilder)({
     dataHook: `custom-field-modal-type-${option.id}`,
     id: option.id,
     prefix: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -45,7 +45,7 @@ const _CustomFieldTypeDropdown = props => {
     })),
     title: option.label,
     label: option.label
-  })), [creatableFieldTypes]);
+  })), [fieldModal.types]);
   return /*#__PURE__*/_react.default.createElement(_designSystem.Dropdown, {
     dataHook: "custom-field-modal-type",
     disabled: mode === 'edit',

package/dist/cjs/components/CustomFieldModal/CustomFieldTypeDropdown.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_designSystem","_react2","_fieldTypePrefixIcons","_jsxFileName","_CustomFieldTypeDropdown","props","state","form","$","type","name","mode","fieldManagement","creatableFieldTypes","generateUniqueKey","setKeyFieldIfNotDirty","translate","t","useWixPatternsContainer","fieldTypeOptions","React","useMemo","map","option","listItemSelectBuilder","dataHook","id","prefix","default","createElement","Box","__self","__source","fileName","lineNumber","columnNumber","getFieldTypeIcon","fieldType","patternsType","size","title","label","Dropdown","disabled","valueParser","selectedId","value","onSelect","onChange","String","popoverProps","appendTo","zIndex","dropdownWidth","placeholder","options","exports","CustomFieldTypeDropdown","observer"],"sources":["../../../../src/components/CustomFieldModal/CustomFieldTypeDropdown.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Box, Dropdown, listItemSelectBuilder } from '@wix/design-system';\nimport { CustomFieldModalState } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';\n\nexport interface CustomFieldTypeDropdownProps {\n  state: CustomFieldModalState;\n}\n\nexport const _CustomFieldTypeDropdown = (\n  props: CustomFieldTypeDropdownProps,\n) => {\n  const {\n    state: {\n      form: {\n        $: { type, name },\n      },\n      mode,\n      fieldManagement: { creatableFieldTypes },\n      generateUniqueKey,\n      setKeyFieldIfNotDirty,\n    },\n  } = props;\n\n  const { translate: t } = useWixPatternsContainer();\n\n  const fieldTypeOptions = React.useMemo(\n    () =>\n      creatableFieldTypes.map((option) =>\n        listItemSelectBuilder({\n          dataHook: `custom-field-modal-type-${option.id}`,\n          id: option.id,\n          prefix: (\n            <Box>\n              {getFieldTypeIcon({\n                fieldType: option.patternsType,\n                size: 'medium',\n              })}\n            </Box>\n          ),\n          title: option.label,\n          label: option.label,\n        }),\n      ),\n    [creatableFieldTypes],\n  );\n\n  return (\n    <Dropdown\n      dataHook=\"custom-field-modal-type\"\n      disabled={mode === 'edit'}\n      valueParser={(option) => option.label}\n      selectedId={type.value}\n      onSelect={({ id }) => {\n        type.onChange(String(id));\n        setKeyFieldIfNotDirty(generateUniqueKey(name.value));\n      }}\n      popoverProps={{ appendTo: 'window', zIndex: 5001 }}\n      dropdownWidth=\"258px\"\n      placeholder={t(\n        'cairo.customFields.addCustomField.modal.fieldType.placeholder',\n      )}\n      options={fieldTypeOptions}\n    />\n  );\n};\n\nexport const CustomFieldTypeDropdown = observer(_CustomFieldTypeDropdown);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,qBAAA,GAAAJ,OAAA;AAAoE,IAAAK,YAAA;AAM7D,MAAMC,wBAAwB,GACnCC,KAAmC,IAChC;EACH,MAAM;IACJC,KAAK,EAAE;MACLC,IAAI,EAAE;QACJC,CAAC,EAAE;UAAEC,IAAI;UAAEC;QAAK;MAClB,CAAC;MACDC,IAAI;MACJC,eAAe,EAAE;QAAEC;MAAoB,CAAC;MACxCC,iBAAiB;MACjBC;IACF;EACF,CAAC,GAAGV,KAAK;EAET,MAAM;IAAEW,SAAS,EAAEC;EAAE,CAAC,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAElD,MAAMC,gBAAgB,GAAGC,cAAK,CAACC,OAAO,CACpC,MACER,mBAAmB,CAACS,GAAG,CAAEC,MAAM,IAC7B,IAAAC,mCAAqB,EAAC;IACpBC,QAAQ,EAAE,2BAA2BF,MAAM,CAACG,EAAE,EAAE;IAChDA,EAAE,EAAEH,MAAM,CAACG,EAAE;IACbC,MAAM,eACJ/B,MAAA,CAAAgC,OAAA,CAAAC,aAAA,CAAC7B,aAAA,CAAA8B,GAAG;MAAAC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAA9B,YAAA;QAAA+B,UAAA;QAAAC,YAAA;MAAA;IAAA,GACD,IAAAC,sCAAgB,EAAC;MAChBC,SAAS,EAAEd,MAAM,CAACe,YAAY;MAC9BC,IAAI,EAAE;IACR,CAAC,CACE,CACN;IACDC,KAAK,EAAEjB,MAAM,CAACkB,KAAK;IACnBA,KAAK,EAAElB,MAAM,CAACkB;EAChB,CAAC,CACH,CAAC,EACH,CAAC5B,mBAAmB,CACtB,CAAC;EAED,oBACEjB,MAAA,CAAAgC,OAAA,CAAAC,aAAA,CAAC7B,aAAA,CAAA0C,QAAQ;IACPjB,QAAQ,EAAC,yBAAyB;IAClCkB,QAAQ,EAAEhC,IAAI,KAAK,MAAO;IAC1BiC,WAAW,EAAGrB,MAAM,IAAKA,MAAM,CAACkB,KAAM;IACtCI,UAAU,EAAEpC,IAAI,CAACqC,KAAM;IACvBC,QAAQ,EAAEA,CAAC;MAAErB;IAAG,CAAC,KAAK;MACpBjB,IAAI,CAACuC,QAAQ,CAACC,MAAM,CAACvB,EAAE,CAAC,CAAC;MACzBX,qBAAqB,CAACD,iBAAiB,CAACJ,IAAI,CAACoC,KAAK,CAAC,CAAC;IACtD,CAAE;IACFI,YAAY,EAAE;MAAEC,QAAQ,EAAE,QAAQ;MAAEC,MAAM,EAAE;IAAK,CAAE;IACnDC,aAAa,EAAC,OAAO;IACrBC,WAAW,EAAErC,CAAC,CACZ,+DACF,CAAE;IACFsC,OAAO,EAAEpC,gBAAiB;IAAAY,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA9B,YAAA;MAAA+B,UAAA;MAAAC,YAAA;IAAA;EAAA,CAC3B,CAAC;AAEN,CAAC;AAACqB,OAAA,CAAApD,wBAAA,GAAAA,wBAAA;AAEK,MAAMqD,uBAAuB,GAAAD,OAAA,CAAAC,uBAAA,GAAG,IAAAC,uBAAQ,EAACtD,wBAAwB,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_designSystem","_react2","_fieldTypePrefixIcons","_jsxFileName","_CustomFieldTypeDropdown","props","state","form","$","type","name","mode","fieldManagement","fieldModal","generateUniqueKey","setKeyFieldIfNotDirty","translate","t","useWixPatternsContainer","fieldTypeOptions","React","useMemo","types","map","option","listItemSelectBuilder","dataHook","id","prefix","default","createElement","Box","__self","__source","fileName","lineNumber","columnNumber","getFieldTypeIcon","fieldType","patternsType","size","title","label","Dropdown","disabled","valueParser","selectedId","value","onSelect","onChange","String","popoverProps","appendTo","zIndex","dropdownWidth","placeholder","options","exports","CustomFieldTypeDropdown","observer"],"sources":["../../../../src/components/CustomFieldModal/CustomFieldTypeDropdown.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Box, Dropdown, listItemSelectBuilder } from '@wix/design-system';\nimport { CustomFieldModalState } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';\n\nexport interface CustomFieldTypeDropdownProps {\n  state: CustomFieldModalState;\n}\n\nexport const _CustomFieldTypeDropdown = (\n  props: CustomFieldTypeDropdownProps,\n) => {\n  const {\n    state: {\n      form: {\n        $: { type, name },\n      },\n      mode,\n      fieldManagement: { fieldModal },\n      generateUniqueKey,\n      setKeyFieldIfNotDirty,\n    },\n  } = props;\n\n  const { translate: t } = useWixPatternsContainer();\n\n  const fieldTypeOptions = React.useMemo(\n    () =>\n      fieldModal.types.map((option) =>\n        listItemSelectBuilder({\n          dataHook: `custom-field-modal-type-${option.id}`,\n          id: option.id,\n          prefix: (\n            <Box>\n              {getFieldTypeIcon({\n                fieldType: option.patternsType,\n                size: 'medium',\n              })}\n            </Box>\n          ),\n          title: option.label,\n          label: option.label,\n        }),\n      ),\n    [fieldModal.types],\n  );\n\n  return (\n    <Dropdown\n      dataHook=\"custom-field-modal-type\"\n      disabled={mode === 'edit'}\n      valueParser={(option) => option.label}\n      selectedId={type.value}\n      onSelect={({ id }) => {\n        type.onChange(String(id));\n        setKeyFieldIfNotDirty(generateUniqueKey(name.value));\n      }}\n      popoverProps={{ appendTo: 'window', zIndex: 5001 }}\n      dropdownWidth=\"258px\"\n      placeholder={t(\n        'cairo.customFields.addCustomField.modal.fieldType.placeholder',\n      )}\n      options={fieldTypeOptions}\n    />\n  );\n};\n\nexport const CustomFieldTypeDropdown = observer(_CustomFieldTypeDropdown);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,qBAAA,GAAAJ,OAAA;AAAoE,IAAAK,YAAA;AAM7D,MAAMC,wBAAwB,GACnCC,KAAmC,IAChC;EACH,MAAM;IACJC,KAAK,EAAE;MACLC,IAAI,EAAE;QACJC,CAAC,EAAE;UAAEC,IAAI;UAAEC;QAAK;MAClB,CAAC;MACDC,IAAI;MACJC,eAAe,EAAE;QAAEC;MAAW,CAAC;MAC/BC,iBAAiB;MACjBC;IACF;EACF,CAAC,GAAGV,KAAK;EAET,MAAM;IAAEW,SAAS,EAAEC;EAAE,CAAC,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAElD,MAAMC,gBAAgB,GAAGC,cAAK,CAACC,OAAO,CACpC,MACER,UAAU,CAACS,KAAK,CAACC,GAAG,CAAEC,MAAM,IAC1B,IAAAC,mCAAqB,EAAC;IACpBC,QAAQ,EAAE,2BAA2BF,MAAM,CAACG,EAAE,EAAE;IAChDA,EAAE,EAAEH,MAAM,CAACG,EAAE;IACbC,MAAM,eACJhC,MAAA,CAAAiC,OAAA,CAAAC,aAAA,CAAC9B,aAAA,CAAA+B,GAAG;MAAAC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAA/B,YAAA;QAAAgC,UAAA;QAAAC,YAAA;MAAA;IAAA,GACD,IAAAC,sCAAgB,EAAC;MAChBC,SAAS,EAAEd,MAAM,CAACe,YAAY;MAC9BC,IAAI,EAAE;IACR,CAAC,CACE,CACN;IACDC,KAAK,EAAEjB,MAAM,CAACkB,KAAK;IACnBA,KAAK,EAAElB,MAAM,CAACkB;EAChB,CAAC,CACH,CAAC,EACH,CAAC7B,UAAU,CAACS,KAAK,CACnB,CAAC;EAED,oBACE1B,MAAA,CAAAiC,OAAA,CAAAC,aAAA,CAAC9B,aAAA,CAAA2C,QAAQ;IACPjB,QAAQ,EAAC,yBAAyB;IAClCkB,QAAQ,EAAEjC,IAAI,KAAK,MAAO;IAC1BkC,WAAW,EAAGrB,MAAM,IAAKA,MAAM,CAACkB,KAAM;IACtCI,UAAU,EAAErC,IAAI,CAACsC,KAAM;IACvBC,QAAQ,EAAEA,CAAC;MAAErB;IAAG,CAAC,KAAK;MACpBlB,IAAI,CAACwC,QAAQ,CAACC,MAAM,CAACvB,EAAE,CAAC,CAAC;MACzBZ,qBAAqB,CAACD,iBAAiB,CAACJ,IAAI,CAACqC,KAAK,CAAC,CAAC;IACtD,CAAE;IACFI,YAAY,EAAE;MAAEC,QAAQ,EAAE,QAAQ;MAAEC,MAAM,EAAE;IAAK,CAAE;IACnDC,aAAa,EAAC,OAAO;IACrBC,WAAW,EAAEtC,CAAC,CACZ,+DACF,CAAE;IACFuC,OAAO,EAAErC,gBAAiB;IAAAa,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA/B,YAAA;MAAAgC,UAAA;MAAAC,YAAA;IAAA;EAAA,CAC3B,CAAC;AAEN,CAAC;AAACqB,OAAA,CAAArD,wBAAA,GAAAA,wBAAA;AAEK,MAAMsD,uBAAuB,GAAAD,OAAA,CAAAC,uBAAA,GAAG,IAAAC,uBAAQ,EAACvD,wBAAwB,CAAC","ignoreList":[]}

package/dist/cjs/components/CustomFieldModal/CustomFieldTypeDropdownV2.js

@@ -21,7 +21,7 @@ const _CustomFieldTypeDropdownV2 = props => {
       },
       mode,
       fieldManagement: {
-        creatableFieldTypes
+        fieldModal
       },
       generateUniqueKey,
       setKeyFieldIfNotDirty
@@ -32,7 +32,7 @@ const _CustomFieldTypeDropdownV2 = props => {
   } = (0, _react2.useWixPatternsContainer)();
   const [search, setSearch] = _react.default.useState(null);
   const query = (search == null ? void 0 : search.trim().toLowerCase()) ?? '';
-  const selectedType = creatableFieldTypes.find(option => option.id === type.value);
+  const selectedType = fieldModal.types.find(option => option.id === type.value);
   const fieldTypeOptions = _react.default.useMemo(() => {
     const toOption = option => (0, _designSystem.listItemSelectBuilder)({
       dataHook: `custom-field-modal-type-${option.id}`,
@@ -53,9 +53,9 @@ const _CustomFieldTypeDropdownV2 = props => {
       label: option.label
     });
     if (query) {
-      return creatableFieldTypes.filter(option => option.label.toLowerCase().includes(query)).map(toOption);
+      return fieldModal.types.filter(option => option.label.toLowerCase().includes(query)).map(toOption);
     }
-    const groups = creatableFieldTypes.reduce((labels, option) => {
+    const groups = fieldModal.types.reduce((labels, option) => {
       const label = option.group;
       if (label && !labels.includes(label)) {
         labels.push(label);
@@ -63,16 +63,16 @@ const _CustomFieldTypeDropdownV2 = props => {
       return labels;
     }, []);
     if (groups.length === 0) {
-      return creatableFieldTypes.map(toOption);
+      return fieldModal.types.map(toOption);
     }
     const grouped = groups.flatMap(label => [(0, _designSystem.listItemSectionBuilder)({
       id: `custom-field-modal-type-group-${label}`,
       type: 'subheader',
       title: label
-    }), ...creatableFieldTypes.filter(option => option.group === label).map(toOption)]);
-    const ungrouped = creatableFieldTypes.filter(option => !option.group).map(toOption);
+    }), ...fieldModal.types.filter(option => option.group === label).map(toOption)]);
+    const ungrouped = fieldModal.types.filter(option => !option.group).map(toOption);
     return [...grouped, ...ungrouped];
-  }, [creatableFieldTypes, query]);
+  }, [fieldModal.types, query]);
   return /*#__PURE__*/_react.default.createElement(_designSystem.AutoComplete, {
     dataHook: "custom-field-modal-type",
     disabled: mode === 'edit',
@@ -101,8 +101,13 @@ const _CustomFieldTypeDropdownV2 = props => {
     onSelect: ({
       id
     }) => {
+      const nextType = String(id);
       setSearch(null);
-      type.onChange(String(id));
+      if (nextType !== type.value) {
+        // The settings were filled in for the old type; the new one starts fresh.
+        props.state.resetSettingsValues();
+      }
+      type.onChange(nextType);
       // Read off `props.state` — a destructured computed holds the pre-change value.
       if (!props.state.typeSupportsPii) {
         containsPii.onChange(false);

package/dist/cjs/components/CustomFieldModal/CustomFieldTypeDropdownV2.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_designSystem","_react2","_fieldTypePrefixIcons","_jsxFileName","_CustomFieldTypeDropdownV2","props","state","form","$","type","name","containsPii","mode","fieldManagement","creatableFieldTypes","generateUniqueKey","setKeyFieldIfNotDirty","translate","t","useWixPatternsContainer","search","setSearch","React","useState","query","trim","toLowerCase","selectedType","find","option","id","value","fieldTypeOptions","useMemo","toOption","listItemSelectBuilder","dataHook","prefix","default","createElement","Box","__self","__source","fileName","lineNumber","columnNumber","getFieldTypeIcon","fieldType","patternsType","size","title","label","subtitle","filter","includes","map","groups","reduce","labels","group","push","length","grouped","flatMap","listItemSectionBuilder","ungrouped","AutoComplete","disabled","selectedId","Input","IconAffix","color","undefined","onChange","e","target","onSelect","String","typeSupportsPii","onClose","popoverProps","appendTo","zIndex","placeholder","emptyStateMessage","options","exports","CustomFieldTypeDropdownV2","observer"],"sources":["../../../../src/components/CustomFieldModal/CustomFieldTypeDropdownV2.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport {\n  AutoComplete,\n  Box,\n  Input,\n  listItemSectionBuilder,\n  listItemSelectBuilder,\n} from '@wix/design-system';\nimport { CustomFieldModalState } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';\n\nexport interface CustomFieldTypeDropdownV2Props {\n  state: CustomFieldModalState;\n}\n\nexport const _CustomFieldTypeDropdownV2 = (\n  props: CustomFieldTypeDropdownV2Props,\n) => {\n  const {\n    state: {\n      form: {\n        $: { type, name, containsPii },\n      },\n      mode,\n      fieldManagement: { creatableFieldTypes },\n      generateUniqueKey,\n      setKeyFieldIfNotDirty,\n    },\n  } = props;\n\n  const { translate: t } = useWixPatternsContainer();\n\n  const [search, setSearch] = React.useState<string | null>(null);\n  const query = search?.trim().toLowerCase() ?? '';\n\n  const selectedType = creatableFieldTypes.find(\n    (option) => option.id === type.value,\n  );\n\n  const fieldTypeOptions = React.useMemo(() => {\n    const toOption = (option: (typeof creatableFieldTypes)[number]) =>\n      listItemSelectBuilder({\n        dataHook: `custom-field-modal-type-${option.id}`,\n        id: option.id,\n        prefix: (\n          <Box>\n            {getFieldTypeIcon({\n              fieldType: option.patternsType,\n              size: 'medium',\n            })}\n          </Box>\n        ),\n        title: option.label,\n        subtitle: option.subtitle,\n        label: option.label,\n      });\n\n    if (query) {\n      return creatableFieldTypes\n        .filter((option) => option.label.toLowerCase().includes(query))\n        .map(toOption);\n    }\n\n    const groups = creatableFieldTypes.reduce<string[]>((labels, option) => {\n      const label = option.group;\n      if (label && !labels.includes(label)) {\n        labels.push(label);\n      }\n      return labels;\n    }, []);\n\n    if (groups.length === 0) {\n      return creatableFieldTypes.map(toOption);\n    }\n\n    const grouped = groups.flatMap((label) => [\n      listItemSectionBuilder({\n        id: `custom-field-modal-type-group-${label}`,\n        type: 'subheader',\n        title: label,\n      }),\n      ...creatableFieldTypes\n        .filter((option) => option.group === label)\n        .map(toOption),\n    ]);\n    const ungrouped = creatableFieldTypes\n      .filter((option) => !option.group)\n      .map(toOption);\n    return [...grouped, ...ungrouped];\n  }, [creatableFieldTypes, query]);\n\n  return (\n    <AutoComplete\n      dataHook=\"custom-field-modal-type\"\n      disabled={mode === 'edit'}\n      value={search ?? selectedType?.label ?? ''}\n      selectedId={type.value}\n      prefix={\n        search === null && selectedType ? (\n          <Input.IconAffix>\n            {/* WDS paints input affix icons blue; the type icons stay dark. */}\n            <Box color=\"D10\">\n              {getFieldTypeIcon({\n                fieldType: selectedType.patternsType,\n                size: 'medium',\n              })}\n            </Box>\n          </Input.IconAffix>\n        ) : undefined\n      }\n      onChange={(e) => setSearch(e.target.value)}\n      onSelect={({ id }) => {\n        setSearch(null);\n        type.onChange(String(id));\n        // Read off `props.state` — a destructured computed holds the pre-change value.\n        if (!props.state.typeSupportsPii) {\n          containsPii.onChange(false);\n        }\n        setKeyFieldIfNotDirty(generateUniqueKey(name.value));\n      }}\n      onClose={() => setSearch(null)}\n      popoverProps={{ appendTo: 'window', zIndex: 5001 }}\n      placeholder={t(\n        'cairo.customFields.addCustomField.modal.fieldType.placeholder',\n      )}\n      emptyStateMessage={t('cairo.emptyState.subtitle.nothingMatchesCriteria')}\n      options={fieldTypeOptions}\n    />\n  );\n};\n\nexport const CustomFieldTypeDropdownV2 = observer(_CustomFieldTypeDropdownV2);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AAQA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,qBAAA,GAAAJ,OAAA;AAAoE,IAAAK,YAAA;AAM7D,MAAMC,0BAA0B,GACrCC,KAAqC,IAClC;EACH,MAAM;IACJC,KAAK,EAAE;MACLC,IAAI,EAAE;QACJC,CAAC,EAAE;UAAEC,IAAI;UAAEC,IAAI;UAAEC;QAAY;MAC/B,CAAC;MACDC,IAAI;MACJC,eAAe,EAAE;QAAEC;MAAoB,CAAC;MACxCC,iBAAiB;MACjBC;IACF;EACF,CAAC,GAAGX,KAAK;EAET,MAAM;IAAEY,SAAS,EAAEC;EAAE,CAAC,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAElD,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAgB,IAAI,CAAC;EAC/D,MAAMC,KAAK,GAAG,CAAAJ,MAAM,oBAANA,MAAM,CAAEK,IAAI,CAAC,CAAC,CAACC,WAAW,CAAC,CAAC,KAAI,EAAE;EAEhD,MAAMC,YAAY,GAAGb,mBAAmB,CAACc,IAAI,CAC1CC,MAAM,IAAKA,MAAM,CAACC,EAAE,KAAKrB,IAAI,CAACsB,KACjC,CAAC;EAED,MAAMC,gBAAgB,GAAGV,cAAK,CAACW,OAAO,CAAC,MAAM;IAC3C,MAAMC,QAAQ,GAAIL,MAA4C,IAC5D,IAAAM,mCAAqB,EAAC;MACpBC,QAAQ,EAAE,2BAA2BP,MAAM,CAACC,EAAE,EAAE;MAChDA,EAAE,EAAED,MAAM,CAACC,EAAE;MACbO,MAAM,eACJzC,MAAA,CAAA0C,OAAA,CAAAC,aAAA,CAACvC,aAAA,CAAAwC,GAAG;QAAAC,MAAA;QAAAC,QAAA;UAAAC,QAAA,EAAAxC,YAAA;UAAAyC,UAAA;UAAAC,YAAA;QAAA;MAAA,GACD,IAAAC,sCAAgB,EAAC;QAChBC,SAAS,EAAElB,MAAM,CAACmB,YAAY;QAC9BC,IAAI,EAAE;MACR,CAAC,CACE,CACN;MACDC,KAAK,EAAErB,MAAM,CAACsB,KAAK;MACnBC,QAAQ,EAAEvB,MAAM,CAACuB,QAAQ;MACzBD,KAAK,EAAEtB,MAAM,CAACsB;IAChB,CAAC,CAAC;IAEJ,IAAI3B,KAAK,EAAE;MACT,OAAOV,mBAAmB,CACvBuC,MAAM,CAAExB,MAAM,IAAKA,MAAM,CAACsB,KAAK,CAACzB,WAAW,CAAC,CAAC,CAAC4B,QAAQ,CAAC9B,KAAK,CAAC,CAAC,CAC9D+B,GAAG,CAACrB,QAAQ,CAAC;IAClB;IAEA,MAAMsB,MAAM,GAAG1C,mBAAmB,CAAC2C,MAAM,CAAW,CAACC,MAAM,EAAE7B,MAAM,KAAK;MACtE,MAAMsB,KAAK,GAAGtB,MAAM,CAAC8B,KAAK;MAC1B,IAAIR,KAAK,IAAI,CAACO,MAAM,CAACJ,QAAQ,CAACH,KAAK,CAAC,EAAE;QACpCO,MAAM,CAACE,IAAI,CAACT,KAAK,CAAC;MACpB;MACA,OAAOO,MAAM;IACf,CAAC,EAAE,EAAE,CAAC;IAEN,IAAIF,MAAM,CAACK,MAAM,KAAK,CAAC,EAAE;MACvB,OAAO/C,mBAAmB,CAACyC,GAAG,CAACrB,QAAQ,CAAC;IAC1C;IAEA,MAAM4B,OAAO,GAAGN,MAAM,CAACO,OAAO,CAAEZ,KAAK,IAAK,CACxC,IAAAa,oCAAsB,EAAC;MACrBlC,EAAE,EAAE,iCAAiCqB,KAAK,EAAE;MAC5C1C,IAAI,EAAE,WAAW;MACjByC,KAAK,EAAEC;IACT,CAAC,CAAC,EACF,GAAGrC,mBAAmB,CACnBuC,MAAM,CAAExB,MAAM,IAAKA,MAAM,CAAC8B,KAAK,KAAKR,KAAK,CAAC,CAC1CI,GAAG,CAACrB,QAAQ,CAAC,CACjB,CAAC;IACF,MAAM+B,SAAS,GAAGnD,mBAAmB,CAClCuC,MAAM,CAAExB,MAAM,IAAK,CAACA,MAAM,CAAC8B,KAAK,CAAC,CACjCJ,GAAG,CAACrB,QAAQ,CAAC;IAChB,OAAO,CAAC,GAAG4B,OAAO,EAAE,GAAGG,SAAS,CAAC;EACnC,CAAC,EAAE,CAACnD,mBAAmB,EAAEU,KAAK,CAAC,CAAC;EAEhC,oBACE5B,MAAA,CAAA0C,OAAA,CAAAC,aAAA,CAACvC,aAAA,CAAAkE,YAAY;IACX9B,QAAQ,EAAC,yBAAyB;IAClC+B,QAAQ,EAAEvD,IAAI,KAAK,MAAO;IAC1BmB,KAAK,EAAEX,MAAM,KAAIO,YAAY,oBAAZA,YAAY,CAAEwB,KAAK,KAAI,EAAG;IAC3CiB,UAAU,EAAE3D,IAAI,CAACsB,KAAM;IACvBM,MAAM,EACJjB,MAAM,KAAK,IAAI,IAAIO,YAAY,gBAC7B/B,MAAA,CAAA0C,OAAA,CAAAC,aAAA,CAACvC,aAAA,CAAAqE,KAAK,CAACC,SAAS;MAAA7B,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAxC,YAAA;QAAAyC,UAAA;QAAAC,YAAA;MAAA;IAAA,gBAEdjD,MAAA,CAAA0C,OAAA,CAAAC,aAAA,CAACvC,aAAA,CAAAwC,GAAG;MAAC+B,KAAK,EAAC,KAAK;MAAA9B,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAxC,YAAA;QAAAyC,UAAA;QAAAC,YAAA;MAAA;IAAA,GACb,IAAAC,sCAAgB,EAAC;MAChBC,SAAS,EAAEpB,YAAY,CAACqB,YAAY;MACpCC,IAAI,EAAE;IACR,CAAC,CACE,CACU,CAAC,GAChBuB,SACL;IACDC,QAAQ,EAAGC,CAAC,IAAKrD,SAAS,CAACqD,CAAC,CAACC,MAAM,CAAC5C,KAAK,CAAE;IAC3C6C,QAAQ,EAAEA,CAAC;MAAE9C;IAAG,CAAC,KAAK;MACpBT,SAAS,CAAC,IAAI,CAAC;MACfZ,IAAI,CAACgE,QAAQ,CAACI,MAAM,CAAC/C,EAAE,CAAC,CAAC;MACzB;MACA,IAAI,CAACzB,KAAK,CAACC,KAAK,CAACwE,eAAe,EAAE;QAChCnE,WAAW,CAAC8D,QAAQ,CAAC,KAAK,CAAC;MAC7B;MACAzD,qBAAqB,CAACD,iBAAiB,CAACL,IAAI,CAACqB,KAAK,CAAC,CAAC;IACtD,CAAE;IACFgD,OAAO,EAAEA,CAAA,KAAM1D,SAAS,CAAC,IAAI,CAAE;IAC/B2D,YAAY,EAAE;MAAEC,QAAQ,EAAE,QAAQ;MAAEC,MAAM,EAAE;IAAK,CAAE;IACnDC,WAAW,EAAEjE,CAAC,CACZ,+DACF,CAAE;IACFkE,iBAAiB,EAAElE,CAAC,CAAC,kDAAkD,CAAE;IACzEmE,OAAO,EAAErD,gBAAiB;IAAAS,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,CAC3B,CAAC;AAEN,CAAC;AAACyC,OAAA,CAAAlF,0BAAA,GAAAA,0BAAA;AAEK,MAAMmF,yBAAyB,GAAAD,OAAA,CAAAC,yBAAA,GAAG,IAAAC,uBAAQ,EAACpF,0BAA0B,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_designSystem","_react2","_fieldTypePrefixIcons","_jsxFileName","_CustomFieldTypeDropdownV2","props","state","form","$","type","name","containsPii","mode","fieldManagement","fieldModal","generateUniqueKey","setKeyFieldIfNotDirty","translate","t","useWixPatternsContainer","search","setSearch","React","useState","query","trim","toLowerCase","selectedType","types","find","option","id","value","fieldTypeOptions","useMemo","toOption","listItemSelectBuilder","dataHook","prefix","default","createElement","Box","__self","__source","fileName","lineNumber","columnNumber","getFieldTypeIcon","fieldType","patternsType","size","title","label","subtitle","filter","includes","map","groups","reduce","labels","group","push","length","grouped","flatMap","listItemSectionBuilder","ungrouped","AutoComplete","disabled","selectedId","Input","IconAffix","color","undefined","onChange","e","target","onSelect","nextType","String","resetSettingsValues","typeSupportsPii","onClose","popoverProps","appendTo","zIndex","placeholder","emptyStateMessage","options","exports","CustomFieldTypeDropdownV2","observer"],"sources":["../../../../src/components/CustomFieldModal/CustomFieldTypeDropdownV2.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport {\n  AutoComplete,\n  Box,\n  Input,\n  listItemSectionBuilder,\n  listItemSelectBuilder,\n} from '@wix/design-system';\nimport { CustomFieldModalState } from '@wix/bex-core';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';\n\nexport interface CustomFieldTypeDropdownV2Props {\n  state: CustomFieldModalState;\n}\n\nexport const _CustomFieldTypeDropdownV2 = (\n  props: CustomFieldTypeDropdownV2Props,\n) => {\n  const {\n    state: {\n      form: {\n        $: { type, name, containsPii },\n      },\n      mode,\n      fieldManagement: { fieldModal },\n      generateUniqueKey,\n      setKeyFieldIfNotDirty,\n    },\n  } = props;\n\n  const { translate: t } = useWixPatternsContainer();\n\n  const [search, setSearch] = React.useState<string | null>(null);\n  const query = search?.trim().toLowerCase() ?? '';\n\n  const selectedType = fieldModal.types.find(\n    (option) => option.id === type.value,\n  );\n\n  const fieldTypeOptions = React.useMemo(() => {\n    const toOption = (option: (typeof fieldModal.types)[number]) =>\n      listItemSelectBuilder({\n        dataHook: `custom-field-modal-type-${option.id}`,\n        id: option.id,\n        prefix: (\n          <Box>\n            {getFieldTypeIcon({\n              fieldType: option.patternsType,\n              size: 'medium',\n            })}\n          </Box>\n        ),\n        title: option.label,\n        subtitle: option.subtitle,\n        label: option.label,\n      });\n\n    if (query) {\n      return fieldModal.types\n        .filter((option) => option.label.toLowerCase().includes(query))\n        .map(toOption);\n    }\n\n    const groups = fieldModal.types.reduce<string[]>((labels, option) => {\n      const label = option.group;\n      if (label && !labels.includes(label)) {\n        labels.push(label);\n      }\n      return labels;\n    }, []);\n\n    if (groups.length === 0) {\n      return fieldModal.types.map(toOption);\n    }\n\n    const grouped = groups.flatMap((label) => [\n      listItemSectionBuilder({\n        id: `custom-field-modal-type-group-${label}`,\n        type: 'subheader',\n        title: label,\n      }),\n      ...fieldModal.types\n        .filter((option) => option.group === label)\n        .map(toOption),\n    ]);\n    const ungrouped = fieldModal.types\n      .filter((option) => !option.group)\n      .map(toOption);\n    return [...grouped, ...ungrouped];\n  }, [fieldModal.types, query]);\n\n  return (\n    <AutoComplete\n      dataHook=\"custom-field-modal-type\"\n      disabled={mode === 'edit'}\n      value={search ?? selectedType?.label ?? ''}\n      selectedId={type.value}\n      prefix={\n        search === null && selectedType ? (\n          <Input.IconAffix>\n            {/* WDS paints input affix icons blue; the type icons stay dark. */}\n            <Box color=\"D10\">\n              {getFieldTypeIcon({\n                fieldType: selectedType.patternsType,\n                size: 'medium',\n              })}\n            </Box>\n          </Input.IconAffix>\n        ) : undefined\n      }\n      onChange={(e) => setSearch(e.target.value)}\n      onSelect={({ id }) => {\n        const nextType = String(id);\n        setSearch(null);\n        if (nextType !== type.value) {\n          // The settings were filled in for the old type; the new one starts fresh.\n          props.state.resetSettingsValues();\n        }\n        type.onChange(nextType);\n        // Read off `props.state` — a destructured computed holds the pre-change value.\n        if (!props.state.typeSupportsPii) {\n          containsPii.onChange(false);\n        }\n        setKeyFieldIfNotDirty(generateUniqueKey(name.value));\n      }}\n      onClose={() => setSearch(null)}\n      popoverProps={{ appendTo: 'window', zIndex: 5001 }}\n      placeholder={t(\n        'cairo.customFields.addCustomField.modal.fieldType.placeholder',\n      )}\n      emptyStateMessage={t('cairo.emptyState.subtitle.nothingMatchesCriteria')}\n      options={fieldTypeOptions}\n    />\n  );\n};\n\nexport const CustomFieldTypeDropdownV2 = observer(_CustomFieldTypeDropdownV2);\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/CustomFieldsPanel/CustomFieldItem.js

@@ -8,6 +8,7 @@ var _designSystem = require("@wix/design-system");
 var _react = _interopRequireWildcard(require("react"));
 var _mobxReactLite = require("mobx-react-lite");
 var _FieldActions = require("../FieldActions");
+var _useBmHarmonyTheme = require("../../hooks/useBmHarmonyTheme");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CustomFieldsPanel/CustomFieldItem.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 _CustomFieldItem(props) {
@@ -16,11 +17,18 @@ function _CustomFieldItem(props) {
     showDivider,
     state
   } = props;
+  const isHarmonyTheme = (0, _useBmHarmonyTheme.useBmHarmonyTheme)();
   const style = (0, _react.useMemo)(() => ({
     display: 'flex',
     flexDirection: 'column',
     position: 'relative'
   }), []);
+  const innerTextStyle = (0, _react.useMemo)(() => ({
+    ...(isHarmonyTheme ? {} : {
+      padding: '0 6px'
+    }),
+    wordBreak: 'break-word'
+  }), [isHarmonyTheme]);
   const menuConfig = state.fieldActionsMenu({
     fieldId: field.id,
     origin: 'Custom fields panel',
@@ -32,29 +40,29 @@ function _CustomFieldItem(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 33,
+      lineNumber: 43,
       columnNumber: 5
     }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.TableListItem, {
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.TableListItem, (0, _extends2.default)({
     showDivider: showDivider,
-    verticalPadding: "tiny",
+    verticalPadding: "tiny"
+  }, isHarmonyTheme ? {
+    horizontalPadding: 'tiny'
+  } : {}, {
     options: [{
       value: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 40,
+          lineNumber: 51,
           columnNumber: 15
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          padding: '0 6px',
-          wordBreak: 'break-word'
-        },
+        style: innerTextStyle,
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 41,
+          lineNumber: 52,
           columnNumber: 17
         }
       }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
@@ -62,7 +70,7 @@ function _CustomFieldItem(props) {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 47,
+          lineNumber: 53,
           columnNumber: 19
         }
       }, field.displayName || field.id)))
@@ -72,14 +80,14 @@ function _CustomFieldItem(props) {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 54,
+          lineNumber: 60,
           columnNumber: 15
         }
       }, menuConfig ? /*#__PURE__*/_react.default.createElement(_FieldActions.FieldActionsPopover, (0, _extends2.default)({}, menuConfig, {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 55,
+          lineNumber: 61,
           columnNumber: 31
         }
       })) : null),
@@ -88,10 +96,10 @@ function _CustomFieldItem(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 34,
+      lineNumber: 44,
       columnNumber: 7
     }
-  }));
+  })));
 }
 const CustomFieldItem = exports.CustomFieldItem = (0, _mobxReactLite.observer)(_CustomFieldItem);
 //# sourceMappingURL=CustomFieldItem.js.map

package/dist/cjs/components/CustomFieldsPanel/CustomFieldItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["_designSystem","require","_react","_interopRequireWildcard","_mobxReactLite","_FieldActions","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_CustomFieldItem","props","field","showDivider","state","style","useMemo","display","flexDirection","position","menuConfig","fieldActionsMenu","fieldId","id","origin","location","createElement","__self","__source","fileName","lineNumber","columnNumber","TableListItem","verticalPadding","options","value","Box","padding","wordBreak","Text","size","displayName","height","FieldActionsPopover","_extends2","align","CustomFieldItem","exports","observer"],"sources":["../../../../src/components/CustomFieldsPanel/CustomFieldItem.tsx"],"sourcesContent":["import { Box, TableListItem, Text } from '@wix/design-system';\nimport React, { CSSProperties, useMemo } from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Field } from '@wix/bex-core';\nimport { FieldActionsPopover } from '../FieldActions';\nimport { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';\n\nexport interface CustomFieldItemProps {\n  field: Field;\n  showDivider?: boolean;\n  state: CustomFieldsPanelState;\n}\n\nfunction _CustomFieldItem(props: CustomFieldItemProps) {\n  const { field, showDivider, state } = props;\n\n  const style = useMemo<CSSProperties>(\n    () => ({\n      display: 'flex',\n      flexDirection: 'column',\n      position: 'relative',\n    }),\n    [],\n  );\n\n  const menuConfig = state.fieldActionsMenu({\n    fieldId: field.id,\n    origin: 'Custom fields panel',\n    location: 'Manage custom fields action cell',\n  });\n\n  return (\n    <div style={style} data-hook={`custom-field-${field.id}`}>\n      <TableListItem\n        showDivider={showDivider}\n        verticalPadding=\"tiny\"\n        options={[\n          {\n            value: (\n              <Box>\n                <div\n                  style={{\n                    padding: '0 6px',\n                    wordBreak: 'break-word',\n                  }}\n                >\n                  <Text size=\"small\">{field.displayName || field.id}</Text>\n                </div>\n              </Box>\n            ),\n          },\n          {\n            value: (\n              <Box height=\"24px\">\n                {menuConfig ? <FieldActionsPopover {...menuConfig} /> : null}\n              </Box>\n            ),\n            align: 'right',\n          },\n        ]}\n      />\n    </div>\n  );\n}\n\nexport const CustomFieldItem = observer(_CustomFieldItem);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_designSystem","require","_react","_interopRequireWildcard","_mobxReactLite","_FieldActions","_useBmHarmonyTheme","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_CustomFieldItem","props","field","showDivider","state","isHarmonyTheme","useBmHarmonyTheme","style","useMemo","display","flexDirection","position","innerTextStyle","padding","wordBreak","menuConfig","fieldActionsMenu","fieldId","id","origin","location","createElement","__self","__source","fileName","lineNumber","columnNumber","TableListItem","_extends2","verticalPadding","horizontalPadding","options","value","Box","Text","size","displayName","height","FieldActionsPopover","align","CustomFieldItem","exports","observer"],"sources":["../../../../src/components/CustomFieldsPanel/CustomFieldItem.tsx"],"sourcesContent":["import { Box, TableListItem, Text } from '@wix/design-system';\nimport React, { CSSProperties, useMemo } from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Field } from '@wix/bex-core';\nimport { FieldActionsPopover } from '../FieldActions';\nimport { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';\nimport { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';\n\nexport interface CustomFieldItemProps {\n  field: Field;\n  showDivider?: boolean;\n  state: CustomFieldsPanelState;\n}\n\nfunction _CustomFieldItem(props: CustomFieldItemProps) {\n  const { field, showDivider, state } = props;\n  const isHarmonyTheme = useBmHarmonyTheme();\n\n  const style = useMemo<CSSProperties>(\n    () => ({\n      display: 'flex',\n      flexDirection: 'column',\n      position: 'relative',\n    }),\n    [],\n  );\n\n  const innerTextStyle = useMemo<CSSProperties>(\n    () => ({\n      ...(isHarmonyTheme ? {} : { padding: '0 6px' }),\n      wordBreak: 'break-word',\n    }),\n    [isHarmonyTheme],\n  );\n\n  const menuConfig = state.fieldActionsMenu({\n    fieldId: field.id,\n    origin: 'Custom fields panel',\n    location: 'Manage custom fields action cell',\n  });\n\n  return (\n    <div style={style} data-hook={`custom-field-${field.id}`}>\n      <TableListItem\n        showDivider={showDivider}\n        verticalPadding=\"tiny\"\n        {...(isHarmonyTheme ? { horizontalPadding: 'tiny' } : {})}\n        options={[\n          {\n            value: (\n              <Box>\n                <div style={innerTextStyle}>\n                  <Text size=\"small\">{field.displayName || field.id}</Text>\n                </div>\n              </Box>\n            ),\n          },\n          {\n            value: (\n              <Box height=\"24px\">\n                {menuConfig ? <FieldActionsPopover {...menuConfig} /> : null}\n              </Box>\n            ),\n            align: 'right',\n          },\n        ]}\n      />\n    </div>\n  );\n}\n\nexport const CustomFieldItem = observer(_CustomFieldItem);\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/CustomFieldsPanel/CustomFieldsList.js

@@ -1,42 +1,51 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.CustomFieldsList = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _mobxReactLite = require("mobx-react-lite");
 var _react = _interopRequireWildcard(require("react"));
 var _CustomFieldItem = require("./CustomFieldItem");
 var _designSystem = require("@wix/design-system");
+var _useBmHarmonyTheme = require("../../hooks/useBmHarmonyTheme");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CustomFieldsPanel/CustomFieldsList.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 _CustomFieldsList(props) {
   const {
     state
   } = props;
+  const isHarmonyTheme = (0, _useBmHarmonyTheme.useBmHarmonyTheme)();
   const renderItem = (0, _react.useCallback)((field, index, array) => {
     return /*#__PURE__*/_react.default.createElement(_CustomFieldItem.CustomFieldItem, {
       state: state,
       key: field.id,
       field: field,
-      showDivider: index < array.length - 1,
+      showDivider: isHarmonyTheme ? false : index < array.length - 1,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 18,
+        lineNumber: 20,
         columnNumber: 9
       }
     });
-  }, []);
-  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+  }, [isHarmonyTheme]);
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, (0, _extends2.default)({
     direction: "vertical",
-    dataHook: "custom-fields-list",
-    backgroundColor: "D60",
+    dataHook: "custom-fields-list"
+  }, isHarmonyTheme ? {
+    paddingLeft: 'SP2',
+    paddingRight: 'SP2'
+  } : {
+    backgroundColor: 'D60'
+  }, {
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 30,
+      lineNumber: 32,
       columnNumber: 5
     }
-  }, state.manageableFields.map(renderItem));
+  }), state.manageableFields.map(renderItem));
 }
 const CustomFieldsList = exports.CustomFieldsList = (0, _mobxReactLite.observer)(_CustomFieldsList);
 //# sourceMappingURL=CustomFieldsList.js.map

package/dist/cjs/components/CustomFieldsPanel/CustomFieldsList.js.map

@@ -1 +1 @@
-{"version":3,"names":["_mobxReactLite","require","_react","_interopRequireWildcard","_CustomFieldItem","_designSystem","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_CustomFieldsList","props","state","renderItem","useCallback","field","index","array","createElement","CustomFieldItem","key","id","showDivider","length","__self","__source","fileName","lineNumber","columnNumber","Box","direction","dataHook","backgroundColor","manageableFields","map","CustomFieldsList","exports","observer"],"sources":["../../../../src/components/CustomFieldsPanel/CustomFieldsList.tsx"],"sourcesContent":["import { Field } from '@wix/bex-core';\nimport { observer } from 'mobx-react-lite';\nimport React, { useCallback } from 'react';\nimport { CustomFieldItem } from './CustomFieldItem';\nimport { Box } from '@wix/design-system';\nimport { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';\n\nexport interface CustomFieldsListProps {\n  state: CustomFieldsPanelState;\n}\n\nfunction _CustomFieldsList(props: CustomFieldsListProps) {\n  const { state } = props;\n\n  const renderItem = useCallback(\n    (field: Field, index: number, array: Field[]) => {\n      return (\n        <CustomFieldItem\n          state={state}\n          key={field.id}\n          field={field}\n          showDivider={index < array.length - 1}\n        />\n      );\n    },\n    [],\n  );\n\n  return (\n    <Box\n      direction=\"vertical\"\n      dataHook=\"custom-fields-list\"\n      backgroundColor=\"D60\"\n    >\n      {state.manageableFields.map(renderItem)}\n    </Box>\n  );\n}\n\nexport const CustomFieldsList = observer(_CustomFieldsList);\n"],"mappings":";;;;AACA,IAAAA,cAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAAyC,IAAAK,YAAA;AAAA,SAAAH,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,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;AAOzC,SAASkB,iBAAiBA,CAACC,KAA4B,EAAE;EACvD,MAAM;IAAEC;EAAM,CAAC,GAAGD,KAAK;EAEvB,MAAME,UAAU,GAAG,IAAAC,kBAAW,EAC5B,CAACC,KAAY,EAAEC,KAAa,EAAEC,KAAc,KAAK;IAC/C,oBACE/B,MAAA,CAAAe,OAAA,CAAAiB,aAAA,CAAC9B,gBAAA,CAAA+B,eAAe;MACdP,KAAK,EAAEA,KAAM;MACbQ,GAAG,EAAEL,KAAK,CAACM,EAAG;MACdN,KAAK,EAAEA,KAAM;MACbO,WAAW,EAAEN,KAAK,GAAGC,KAAK,CAACM,MAAM,GAAG,CAAE;MAAAC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAApC,YAAA;QAAAqC,UAAA;QAAAC,YAAA;MAAA;IAAA,CACvC,CAAC;EAEN,CAAC,EACD,EACF,CAAC;EAED,oBACE1C,MAAA,CAAAe,OAAA,CAAAiB,aAAA,CAAC7B,aAAA,CAAAwC,GAAG;IACFC,SAAS,EAAC,UAAU;IACpBC,QAAQ,EAAC,oBAAoB;IAC7BC,eAAe,EAAC,KAAK;IAAAR,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAApC,YAAA;MAAAqC,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEpBhB,KAAK,CAACqB,gBAAgB,CAACC,GAAG,CAACrB,UAAU,CACnC,CAAC;AAEV;AAEO,MAAMsB,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,IAAAE,uBAAQ,EAAC3B,iBAAiB,CAAC","ignoreList":[]}
+{"version":3,"names":["_mobxReactLite","require","_react","_interopRequireWildcard","_CustomFieldItem","_designSystem","_useBmHarmonyTheme","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_CustomFieldsList","props","state","isHarmonyTheme","useBmHarmonyTheme","renderItem","useCallback","field","index","array","createElement","CustomFieldItem","key","id","showDivider","length","__self","__source","fileName","lineNumber","columnNumber","Box","_extends2","direction","dataHook","paddingLeft","paddingRight","backgroundColor","manageableFields","map","CustomFieldsList","exports","observer"],"sources":["../../../../src/components/CustomFieldsPanel/CustomFieldsList.tsx"],"sourcesContent":["import { Field } from '@wix/bex-core';\nimport { observer } from 'mobx-react-lite';\nimport React, { useCallback } from 'react';\nimport { CustomFieldItem } from './CustomFieldItem';\nimport { Box } from '@wix/design-system';\nimport { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';\nimport { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';\n\nexport interface CustomFieldsListProps {\n  state: CustomFieldsPanelState;\n}\n\nfunction _CustomFieldsList(props: CustomFieldsListProps) {\n  const { state } = props;\n  const isHarmonyTheme = useBmHarmonyTheme();\n\n  const renderItem = useCallback(\n    (field: Field, index: number, array: Field[]) => {\n      return (\n        <CustomFieldItem\n          state={state}\n          key={field.id}\n          field={field}\n          showDivider={isHarmonyTheme ? false : index < array.length - 1}\n        />\n      );\n    },\n    [isHarmonyTheme],\n  );\n\n  return (\n    <Box\n      direction=\"vertical\"\n      dataHook=\"custom-fields-list\"\n      {...(isHarmonyTheme\n        ? { paddingLeft: 'SP2', paddingRight: 'SP2' }\n        : { backgroundColor: 'D60' })}\n    >\n      {state.manageableFields.map(renderItem)}\n    </Box>\n  );\n}\n\nexport const CustomFieldsList = observer(_CustomFieldsList);\n"],"mappings":";;;;;;AACA,IAAAA,cAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAEA,IAAAK,kBAAA,GAAAL,OAAA;AAAkE,IAAAM,YAAA;AAAA,SAAAJ,wBAAAK,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAP,uBAAA,YAAAA,CAAAK,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;AAMlE,SAASkB,iBAAiBA,CAACC,KAA4B,EAAE;EACvD,MAAM;IAAEC;EAAM,CAAC,GAAGD,KAAK;EACvB,MAAME,cAAc,GAAG,IAAAC,oCAAiB,EAAC,CAAC;EAE1C,MAAMC,UAAU,GAAG,IAAAC,kBAAW,EAC5B,CAACC,KAAY,EAAEC,KAAa,EAAEC,KAAc,KAAK;IAC/C,oBACElC,MAAA,CAAAgB,OAAA,CAAAmB,aAAA,CAACjC,gBAAA,CAAAkC,eAAe;MACdT,KAAK,EAAEA,KAAM;MACbU,GAAG,EAAEL,KAAK,CAACM,EAAG;MACdN,KAAK,EAAEA,KAAM;MACbO,WAAW,EAAEX,cAAc,GAAG,KAAK,GAAGK,KAAK,GAAGC,KAAK,CAACM,MAAM,GAAG,CAAE;MAAAC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAtC,YAAA;QAAAuC,UAAA;QAAAC,YAAA;MAAA;IAAA,CAChE,CAAC;EAEN,CAAC,EACD,CAACjB,cAAc,CACjB,CAAC;EAED,oBACE5B,MAAA,CAAAgB,OAAA,CAAAmB,aAAA,CAAChC,aAAA,CAAA2C,GAAG,MAAAC,SAAA,CAAA/B,OAAA;IACFgC,SAAS,EAAC,UAAU;IACpBC,QAAQ,EAAC;EAAoB,GACxBrB,cAAc,GACf;IAAEsB,WAAW,EAAE,KAAK;IAAEC,YAAY,EAAE;EAAM,CAAC,GAC3C;IAAEC,eAAe,EAAE;EAAM,CAAC;IAAAX,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAtC,YAAA;MAAAuC,UAAA;MAAAC,YAAA;IAAA;EAAA,IAE7BlB,KAAK,CAAC0B,gBAAgB,CAACC,GAAG,CAACxB,UAAU,CACnC,CAAC;AAEV;AAEO,MAAMyB,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,IAAAE,uBAAQ,EAAChC,iBAAiB,CAAC","ignoreList":[]}

package/dist/cjs/components/CustomFieldsPanel/CustomFieldsPanel.js

@@ -14,6 +14,7 @@ var _CustomFieldsList = require("./CustomFieldsList");
 var _AddCustomFieldCTAButton = require("./AddCustomFieldCTAButton");
 var _bi = require("@wix/bex-core/bi");
 var _PatternsSidePanel = require("../SidePanel/PatternsSidePanel");
+var _useBmHarmonyTheme = require("../../hooks/useBmHarmonyTheme");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CustomFieldsPanel/CustomFieldsPanel.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); }
 // Lazy: the archive CTA loads only for sources that archive, so sources that
@@ -30,6 +31,7 @@ function _CustomFieldsPanel({
     translate: t
   } = container;
   const origin = 'Custom fields panel';
+  const isHarmonyTheme = (0, _useBmHarmonyTheme.useBmHarmonyTheme)();
   const entered = (0, _useRafRender.useRafRender)();
   if (!entered) {
     return null;
@@ -48,7 +50,7 @@ function _CustomFieldsPanel({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 36,
+      lineNumber: 38,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react2.default.createElement(_designSystem.SidePanel.Header, {
@@ -57,7 +59,7 @@ function _CustomFieldsPanel({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 50,
+      lineNumber: 52,
       columnNumber: 7
     }
   }), /*#__PURE__*/_react2.default.createElement(_ScrollableContent.ScrollableContent, {
@@ -66,7 +68,7 @@ function _CustomFieldsPanel({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 54,
+      lineNumber: 56,
       columnNumber: 7
     }
   }, ((_state$archive = state.archive) == null ? void 0 : _state$archive.shouldDisplay) && /*#__PURE__*/_react2.default.createElement(_react2.Suspense, {
@@ -74,9 +76,19 @@ function _CustomFieldsPanel({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 59,
+      lineNumber: 61,
       columnNumber: 11
     }
+  }, isHarmonyTheme ? /*#__PURE__*/_react2.default.createElement(_designSystem.Box, {
+    direction: "vertical",
+    marginLeft: "SP2",
+    marginRight: "SP2",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 63,
+      columnNumber: 15
+    }
   }, /*#__PURE__*/_react2.default.createElement(ArchivedItemsCTAButton, {
     archive: state.archive,
     deleteFieldModal: state.deleteFieldModal,
@@ -85,15 +97,26 @@ function _CustomFieldsPanel({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 60,
-      columnNumber: 13
+      lineNumber: 64,
+      columnNumber: 17
+    }
+  })) : /*#__PURE__*/_react2.default.createElement(ArchivedItemsCTAButton, {
+    archive: state.archive,
+    deleteFieldModal: state.deleteFieldModal,
+    onCloseSidePanel: () => state.closeSidePanel == null ? void 0 : state.closeSidePanel(),
+    dataHook: "custom-fields",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 72,
+      columnNumber: 15
     }
   })), /*#__PURE__*/_react2.default.createElement(_CustomFieldsList.CustomFieldsList, {
     state: state,
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 68,
+      lineNumber: 81,
       columnNumber: 9
     }
   })), /*#__PURE__*/_react2.default.createElement(_designSystem.Box, {
@@ -102,16 +125,16 @@ function _CustomFieldsPanel({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 71,
+      lineNumber: 84,
       columnNumber: 7
     }
-  }, /*#__PURE__*/_react2.default.createElement(_designSystem.Divider, {
+  }, !isHarmonyTheme && /*#__PURE__*/_react2.default.createElement(_designSystem.Divider, {
     direction: "horizontal",
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 72,
-      columnNumber: 9
+      lineNumber: 85,
+      columnNumber: 29
     }
   }), /*#__PURE__*/_react2.default.createElement(_designSystem.Box, {
     padding: "SP4",
@@ -119,7 +142,7 @@ function _CustomFieldsPanel({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 73,
+      lineNumber: 86,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react2.default.createElement(_AddCustomFieldCTAButton.AddCustomFieldCTAButton, {
@@ -132,7 +155,7 @@ function _CustomFieldsPanel({
     __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 74,
+      lineNumber: 87,
       columnNumber: 11
     }
   }))));