@wix/patterns 1.432.0 → 1.434.0

package/src/components/BulkActionButton/BulkActionButton.tsx

@@ -7,44 +7,40 @@ export type BulkActionButtonProps = ButtonProps & {
   tooltipProps?: Partial<TooltipProps>;
 };
 
-export const BulkActionButton = forwardRef<HTMLButtonElement, BulkActionButtonProps>(
-  (props, ref) => {
-    const { tooltipText, tooltipProps, ...rest } = props;
+export const BulkActionButton = forwardRef<
+  HTMLButtonElement,
+  BulkActionButtonProps
+>((props, ref) => {
+  const { tooltipText, tooltipProps, ...rest } = props;
 
-    const setRef = useCallback(
-      (element: HTMLElement | null) => {
-        if (!ref) {
-          return;
-        }
-        const buttonEl =
-          (element?.querySelector('button') as HTMLButtonElement | null) ?? null;
-        if (typeof ref === 'function') {
-          ref(buttonEl);
-        } else {
-          (ref as React.MutableRefObject<HTMLButtonElement | null>).current =
-            buttonEl;
-        }
-      },
-      [ref],
-    );
+  const setRef = useCallback(
+    (element: HTMLElement | null) => {
+      if (!ref) {
+        return;
+      }
+      const buttonEl =
+        (element?.querySelector('button') as HTMLButtonElement | null) ?? null;
+      if (typeof ref === 'function') {
+        ref(buttonEl);
+      } else {
+        (ref as React.MutableRefObject<HTMLButtonElement | null>).current =
+          buttonEl;
+      }
+    },
+    [ref],
+  );
 
-    return (
-      <div ref={setRef} style={{ display: 'contents' }}>
-        <DisabledTooltip
-          content={tooltipText}
-          dataHook="bulk-action-button-tooltip"
-          {...tooltipProps}
-        >
-          <Button
-            dataHook="bulk-action-button"
-            skin="standard"
-            priority="secondary"
-            {...rest}
-          />
-        </DisabledTooltip>
-      </div>
-    );
-  },
-);
+  return (
+    <div ref={setRef} style={{ display: 'contents' }}>
+      <DisabledTooltip
+        content={tooltipText}
+        dataHook="bulk-action-button-tooltip"
+        {...tooltipProps}
+      >
+        <Button dataHook="bulk-action-button" priority="secondary" {...rest} />
+      </DisabledTooltip>
+    </div>
+  );
+});
 
 BulkActionButton.displayName = 'BulkActionButton';

package/src/components/CardContainer/CardContainer.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer2113344042";
+var _namespace_ = "CardContainer892613341";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CardContainer2113344042__root"};
+export var classes = {"root":"CardContainer892613341__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldForm.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldForm3072570740";
+var _namespace_ = "CmsFieldForm949764821";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CmsFieldForm3072570740__root","fullBleedDivider":"CmsFieldForm3072570740__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm949764821__root","fullBleedDivider":"CmsFieldForm949764821__fullBleedDivider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal574041138";
+var _namespace_ = "CmsFieldModal1471165315";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CmsFieldModal574041138__root","modal":"CmsFieldModal574041138__modal"};
+export var classes = {"root":"CmsFieldModal1471165315__root","modal":"CmsFieldModal1471165315__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection3027898072";
+var _namespace_ = "ValidationAndDefaultsSection3796101284";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ValidationAndDefaultsSection3027898072__root","accordionWrapper":"ValidationAndDefaultsSection3027898072__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection3796101284__root","accordionWrapper":"ValidationAndDefaultsSection3796101284__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/formFields/CharactersLimitInput.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CharactersLimitInput3690679241";
+var _namespace_ = "CharactersLimitInput1565385755";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CharactersLimitInput3690679241__root","field":"CharactersLimitInput3690679241__field"};
+export var classes = {"root":"CharactersLimitInput1565385755__root","field":"CharactersLimitInput1565385755__field"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Collapse/Collapse.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse3206668098";
+var _namespace_ = "Collapse2393188252";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Collapse3206668098__root","exit":"Collapse3206668098__exit"};
+export var classes = {"root":"Collapse2393188252__root","exit":"Collapse2393188252__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage4126903775";
+var _namespace_ = "CollectionPage2115536449";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPage4126903775__root"};
+export var classes = {"root":"CollectionPage2115536449__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionSectionHeader/CollectionSectionHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader3072653247";
+var _namespace_ = "CollectionSectionHeader3526530237";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionSectionHeader3072653247__root","summaryIcon":"CollectionSectionHeader3072653247__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader3526530237__root","summaryIcon":"CollectionSectionHeader3526530237__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTable.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTable2739075731";
+var _namespace_ = "CollectionTable2481738602";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionTable2739075731__root"};
+export var classes = {"root":"CollectionTable2481738602__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTableWSRTable.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTableWSRTable1316029034";
+var _namespace_ = "CollectionTableWSRTable3520584632";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionTableWSRTable1316029034__root"};
+export var classes = {"root":"CollectionTableWSRTable3520584632__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTableWSRTable.tsx

@@ -29,6 +29,7 @@ import { useIsMobile } from '../../hooks/useIsMobile';
 import { CollectionToolbarsVisualizationProps } from '../CollectionToolbars/CollectionToolbarsVisualization';
 import { buildMobileColumns } from './buildMobileColumns';
 import { TableColumn } from '../../model';
+import { version as cairoVersion } from '../../version';
 
 export interface CollectionTableWSRTableBaseProps<U, T, F extends FiltersMap>
   extends ToolbarCollectionBaseProps<T, F>,
@@ -223,6 +224,7 @@ function _CollectionTableWSRTable<U, T, F extends FiltersMap = FiltersMap>(
   return (
     <div
       data-hook="collection-table"
+      data-wix-patterns={cairoVersion}
       className={wsrTableSt(
         wsrTableClasses.root,
         { resizable: !!resizable },

package/src/components/CollectionToolbar/CollectionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar2037920816";
+var _namespace_ = "CollectionToolbar3918320737";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionToolbar2037920816__root","right":"CollectionToolbar2037920816__right","left":"CollectionToolbar2037920816__left","fullWidth":"CollectionToolbar2037920816__fullWidth"};
+export var classes = {"root":"CollectionToolbar3918320737__root","right":"CollectionToolbar3918320737__right","left":"CollectionToolbar3918320737__left","fullWidth":"CollectionToolbar3918320737__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter2155612317";
+var _namespace_ = "SearchOrCustomFilter33704318";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SearchOrCustomFilter2155612317__root","search":"SearchOrCustomFilter2155612317__search","searchMobile":"SearchOrCustomFilter2155612317__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter33704318__root","search":"SearchOrCustomFilter33704318__search","searchMobile":"SearchOrCustomFilter33704318__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly671478282";
+var _namespace_ = "AutoCompleteReadonly257985153";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"AutoCompleteReadonly671478282__root"};
+export var classes = {"root":"AutoCompleteReadonly257985153__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ViewsDropdown4043386634";
+var _namespace_ = "ViewsDropdown3946390091";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ViewsDropdown4043386634__root"};
+export var classes = {"root":"ViewsDropdown3946390091__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomFieldModal/CustomFieldForm.tsx

@@ -53,7 +53,7 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
     generateUniqueKey,
     setKeyFieldIfNotDirty,
   } = state;
-  const defaultPermissions = state.fieldManagement.permissions;
+  const defaultPermissions = state.fieldManagement.fieldModal.permissions;
   const { reportAdvancedSettingsClick, reportKeyFormFieldChange } =
     customFieldModalBiReporter;
 
@@ -132,7 +132,7 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
               />
             </FormField>
           </Cell>
-          {state.fieldManagement.supportsPii && (
+          {state.fieldManagement.fieldModal.supportsPii && (
             <PiiFormFields
               containsPii={{
                 value: containsPii.value,

package/src/components/CustomFieldModal/CustomFieldFormV2.tsx

@@ -14,6 +14,7 @@ import {
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CustomFieldModalState } from '@wix/bex-core';
 import { InfoCircle } from '@wix/wix-ui-icons-common';
+import { StatusAlertFilledSmall } from '@wix/wix-ui-icons-common/lazy';
 import { runInAction } from 'mobx';
 import { CustomFieldTypeDropdownV2 } from './CustomFieldTypeDropdownV2';
 import { PiiFormFieldsV2 } from './CustomFieldFormPiiFieldsV2';
@@ -40,8 +41,8 @@ export const _CustomFieldFormV2 = (props: CustomFieldFormV2Props) => {
     generateUniqueKey,
     setKeyFieldIfNotDirty,
   } = state;
-  const { supportsPermissions, fieldModalText, piiWarning } =
-    state.fieldManagement;
+  const { fieldModal } = state.fieldManagement;
+  const SettingsSection = state.settingsSection?.Component;
 
   const {
     translate: t,
@@ -157,12 +158,12 @@ export const _CustomFieldFormV2 = (props: CustomFieldFormV2Props) => {
               }}
               mode={mode}
               language={language}
-              piiWarning={piiWarning}
+              piiWarning={state.piiWarning}
             />
           )}
         </Layout>
       </Box>
-      {supportsPermissions && (
+      {state.showSettings && (
         <>
           <Box marginTop="SP4" marginLeft={fullBleed} marginRight={fullBleed}>
             <Divider />
@@ -180,11 +181,20 @@ export const _CustomFieldFormV2 = (props: CustomFieldFormV2Props) => {
               items={[
                 {
                   title:
-                    fieldModalText.settingsLabel ??
+                    fieldModal.text.settingsLabel ??
                     t(
                       'cairo.customFields.addCustomField.modal.advancedSettings',
                     ),
                   toggleIconPlacement: 'start',
+                  suffix: state.settingsHasError ? (
+                    <Box
+                      verticalAlign="middle"
+                      color="R10"
+                      dataHook="custom-field-modal-settings-error"
+                    >
+                      <StatusAlertFilledSmall />
+                    </Box>
+                  ) : undefined,
                   open: settings.isOn,
                   onToggle: () => {
                     settings.toggle();
@@ -192,7 +202,16 @@ export const _CustomFieldFormV2 = (props: CustomFieldFormV2Props) => {
                       settings.isOn ? 'Open' : 'Close',
                     );
                   },
-                  children: <CustomFieldFormV2Permissions state={state} />,
+                  children: (
+                    <Box direction="vertical" gap="SP4">
+                      {fieldModal.permissions && (
+                        <CustomFieldFormV2Permissions state={state} />
+                      )}
+                      {SettingsSection && (
+                        <SettingsSection fieldType={type.value} />
+                      )}
+                    </Box>
+                  ),
                 },
               ]}
             />

package/src/components/CustomFieldModal/CustomFieldFormV2Permissions.tsx

@@ -100,7 +100,7 @@ export const _CustomFieldFormV2Permissions = (
     disabledFields: { permissions },
     mode,
   } = state;
-  const defaultPermissions = state.fieldManagement.permissions;
+  const defaultPermissions = state.fieldManagement.fieldModal.permissions;
 
   const {
     translate: t,

package/src/components/CustomFieldModal/CustomFieldModal.tsx

@@ -57,10 +57,9 @@ export const _CustomFieldModal = ({
     );
   }
 
-  const { fieldModalText } = state.fieldManagement;
-  const title =
-    mode === 'new' ? fieldModalText.addTitle : fieldModalText.editTitle;
-  const addSubtitle = mode === 'new' ? fieldModalText.addSubtitle : undefined;
+  const { text } = state.fieldManagement.fieldModal;
+  const title = mode === 'new' ? text.addTitle : text.editTitle;
+  const addSubtitle = mode === 'new' ? text.addSubtitle : undefined;
   const useV2Form = internalExperiments?.enabled('newFieldsModal');
 
   return (
@@ -100,7 +99,7 @@ export const _CustomFieldModal = ({
       showFooterDivider={useV2Form}
       // V2 has no footnote: whether the toggle row shows is the whole signal.
       footnote={
-        useV2Form || state.fieldManagement.supportsPii ? null : (
+        useV2Form || state.fieldManagement.fieldModal.supportsPii ? null : (
           <Footnote
             language={language}
             reportLearnMoreClick={reportLearnMoreClick}

package/src/components/CustomFieldModal/CustomFieldTypeDropdown.tsx

@@ -18,7 +18,7 @@ export const _CustomFieldTypeDropdown = (
         $: { type, name },
       },
       mode,
-      fieldManagement: { creatableFieldTypes },
+      fieldManagement: { fieldModal },
       generateUniqueKey,
       setKeyFieldIfNotDirty,
     },
@@ -28,7 +28,7 @@ export const _CustomFieldTypeDropdown = (
 
   const fieldTypeOptions = React.useMemo(
     () =>
-      creatableFieldTypes.map((option) =>
+      fieldModal.types.map((option) =>
         listItemSelectBuilder({
           dataHook: `custom-field-modal-type-${option.id}`,
           id: option.id,
@@ -44,7 +44,7 @@ export const _CustomFieldTypeDropdown = (
           label: option.label,
         }),
       ),
-    [creatableFieldTypes],
+    [fieldModal.types],
   );
 
   return (

package/src/components/CustomFieldModal/CustomFieldTypeDropdownV2.tsx

@@ -24,7 +24,7 @@ export const _CustomFieldTypeDropdownV2 = (
         $: { type, name, containsPii },
       },
       mode,
-      fieldManagement: { creatableFieldTypes },
+      fieldManagement: { fieldModal },
       generateUniqueKey,
       setKeyFieldIfNotDirty,
     },
@@ -35,12 +35,12 @@ export const _CustomFieldTypeDropdownV2 = (
   const [search, setSearch] = React.useState<string | null>(null);
   const query = search?.trim().toLowerCase() ?? '';
 
-  const selectedType = creatableFieldTypes.find(
+  const selectedType = fieldModal.types.find(
     (option) => option.id === type.value,
   );
 
   const fieldTypeOptions = React.useMemo(() => {
-    const toOption = (option: (typeof creatableFieldTypes)[number]) =>
+    const toOption = (option: (typeof fieldModal.types)[number]) =>
       listItemSelectBuilder({
         dataHook: `custom-field-modal-type-${option.id}`,
         id: option.id,
@@ -58,12 +58,12 @@ export const _CustomFieldTypeDropdownV2 = (
       });
 
     if (query) {
-      return creatableFieldTypes
+      return fieldModal.types
         .filter((option) => option.label.toLowerCase().includes(query))
         .map(toOption);
     }
 
-    const groups = creatableFieldTypes.reduce<string[]>((labels, option) => {
+    const groups = fieldModal.types.reduce<string[]>((labels, option) => {
       const label = option.group;
       if (label && !labels.includes(label)) {
         labels.push(label);
@@ -72,7 +72,7 @@ export const _CustomFieldTypeDropdownV2 = (
     }, []);
 
     if (groups.length === 0) {
-      return creatableFieldTypes.map(toOption);
+      return fieldModal.types.map(toOption);
     }
 
     const grouped = groups.flatMap((label) => [
@@ -81,15 +81,15 @@ export const _CustomFieldTypeDropdownV2 = (
         type: 'subheader',
         title: label,
       }),
-      ...creatableFieldTypes
+      ...fieldModal.types
         .filter((option) => option.group === label)
         .map(toOption),
     ]);
-    const ungrouped = creatableFieldTypes
+    const ungrouped = fieldModal.types
       .filter((option) => !option.group)
       .map(toOption);
     return [...grouped, ...ungrouped];
-  }, [creatableFieldTypes, query]);
+  }, [fieldModal.types, query]);
 
   return (
     <AutoComplete
@@ -112,8 +112,13 @@ export const _CustomFieldTypeDropdownV2 = (
       }
       onChange={(e) => setSearch(e.target.value)}
       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/src/components/CustomFieldsPanel/CustomFieldItem.tsx

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { Field } from '@wix/bex-core';
 import { FieldActionsPopover } from '../FieldActions';
 import { CustomFieldsPanelState } from '../../state/CustomFields/CustomFieldsPanelState';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface CustomFieldItemProps {
   field: Field;
@@ -13,6 +14,7 @@ export interface CustomFieldItemProps {
 
 function _CustomFieldItem(props: CustomFieldItemProps) {
   const { field, showDivider, state } = props;
+  const isHarmonyTheme = useBmHarmonyTheme();
 
   const style = useMemo<CSSProperties>(
     () => ({
@@ -23,6 +25,14 @@ function _CustomFieldItem(props: CustomFieldItemProps) {
     [],
   );
 
+  const innerTextStyle = useMemo<CSSProperties>(
+    () => ({
+      ...(isHarmonyTheme ? {} : { padding: '0 6px' }),
+      wordBreak: 'break-word',
+    }),
+    [isHarmonyTheme],
+  );
+
   const menuConfig = state.fieldActionsMenu({
     fieldId: field.id,
     origin: 'Custom fields panel',
@@ -34,16 +44,12 @@ function _CustomFieldItem(props: CustomFieldItemProps) {
       <TableListItem
         showDivider={showDivider}
         verticalPadding="tiny"
+        {...(isHarmonyTheme ? { horizontalPadding: 'tiny' } : {})}
         options={[
           {
             value: (
               <Box>
-                <div
-                  style={{
-                    padding: '0 6px',
-                    wordBreak: 'break-word',
-                  }}
-                >
+                <div style={innerTextStyle}>
                   <Text size="small">{field.displayName || field.id}</Text>
                 </div>
               </Box>