@wix/patterns 1.481.0 → 1.483.0

package/dist/types/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "patterns@1.481.0";
+export declare const version = "patterns@1.483.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.481.0",
+  "version": "1.483.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -227,11 +227,11 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.387.0",
-    "@wix/bex-utils": "2.174.0",
+    "@wix/bex-core": "2.389.0",
+    "@wix/bex-utils": "2.176.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.109.0",
-    "@wix/patterns-fields-utils": "1.90.0",
+    "@wix/patterns-fields": "1.111.0",
+    "@wix/patterns-fields-utils": "1.92.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "^3.23.1",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -294,7 +294,7 @@
     "@wix/awaiter-utils": "^1.0.76",
     "@wix/babel-cli": "^1.11.0",
     "@wix/business-manager-api": "^1.470.0",
-    "@wix/cairo-integration-utils": "1.149.0",
+    "@wix/cairo-integration-utils": "1.151.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
@@ -456,5 +456,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "99e141bf38a29f496fa54224597ab7f4c62a94f729724d19f8223eb9"
+  "falconPackageHash": "72e8a35d08f6ab028645338917918f2bb6cabe1e247fb4758f5a115d"
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer1849199127";
+var _namespace_ = "CardContainer3152078943";
 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":"CardContainer1849199127__root"};
+export var classes = {"root":"CardContainer3152078943__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_ = "CmsFieldForm1755542765";
+var _namespace_ = "CmsFieldForm1711651431";
 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":"CmsFieldForm1755542765__root","fullBleedDivider":"CmsFieldForm1755542765__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm1711651431__root","fullBleedDivider":"CmsFieldForm1711651431__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_ = "CmsFieldModal36790164";
+var _namespace_ = "CmsFieldModal2493735177";
 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":"CmsFieldModal36790164__root","modal":"CmsFieldModal36790164__modal"};
+export var classes = {"root":"CmsFieldModal2493735177__root","modal":"CmsFieldModal2493735177__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldModalBiReporter.ts

@@ -0,0 +1,65 @@
+import type { CustomFieldOrigin, ReportBI } from '@wix/bex-core';
+import { withoutDefaults } from '@wix/bex-core';
+import {
+  cairoChangesBeforeApply,
+  cairoDataExAddCustomField,
+  cairoDataExCustomFieldEndProcess,
+} from '@wix/bex-core/bi';
+import type { CmsFormState } from './CmsFormState';
+
+export type CmsFieldModalEndType = 'Add Field' | 'Edit Field' | 'Cancel';
+
+/**
+ * Reporting for the schema-source field modal. It mirrors what
+ * `CustomFieldModalBiReporter` sends for the Data Extension modal, so both
+ * field-creation paths land on the same events.
+ */
+export class CmsFieldModalBiReporter {
+  private readonly reportBi: ReportBI;
+
+  constructor(reportBi: ReportBI) {
+    this.reportBi = reportBi;
+  }
+
+  addFieldStarted(origin: CustomFieldOrigin) {
+    this.reportBi(withoutDefaults(cairoDataExAddCustomField)({ origin }));
+  }
+
+  fieldChanged(params: {
+    mode: 'new' | 'edit';
+    fieldName: string;
+    fieldValue?: string;
+  }) {
+    this.reportBi(
+      withoutDefaults(cairoChangesBeforeApply)({
+        feature:
+          params.mode === 'new' ? 'Add Custom Field' : 'Edit Custom Field',
+        fieldName: params.fieldName,
+        fieldValue: params.fieldValue,
+        isClearButton: false,
+      }),
+    );
+  }
+
+  endProcess(params: {
+    endType: CmsFieldModalEndType;
+    form: CmsFormState;
+    origin: CustomFieldOrigin;
+    numFields: number;
+  }) {
+    const { properties } = params.form;
+    this.reportBi(
+      withoutDefaults(cairoDataExCustomFieldEndProcess)({
+        actionName: params.form.mode === 'edit' ? 'Edit' : 'Add',
+        endType: params.endType,
+        fieldName: properties.name,
+        fieldType: properties.type,
+        numAdded: params.numFields,
+        origin: params.origin,
+        // Schema-source fields are ordinary collection fields, not the
+        // Data Extension custom fields the event was first built for.
+        isCustomField: false,
+      }),
+    );
+  }
+}

package/src/components/CmsFieldManagement/CmsFieldModalState.ts

@@ -1,6 +1,11 @@
 import { action, makeObservable, observable } from 'mobx';
-import { ConditionalModalState, type ToastConfig } from '@wix/bex-core';
+import {
+  ConditionalModalState,
+  type CustomFieldOrigin,
+  type ToastConfig,
+} from '@wix/bex-core';
 import { Field, SchemaConfig } from '../../types/SchemaConfig';
+import type { CmsFieldModalBiReporter } from './CmsFieldModalBiReporter';
 import { CmsFormState } from './CmsFormState';
 import { toFieldSpec } from './toFieldSpec';
 import { getFieldTypeValidationRulesList } from './fieldValidationRulesMap';
@@ -8,15 +13,21 @@ import { getFieldTypeValidationRulesList } from './fieldValidationRulesMap';
 export class CmsFieldModalState {
   private readonly getSchema: () => SchemaConfig;
   private readonly resolveError: (e: unknown) => ToastConfig;
+  private readonly bi?: CmsFieldModalBiReporter;
   readonly modal: ConditionalModalState<null>;
   formState: CmsFormState | null = null;
+  /** Distinguishes closing after a save from closing by cancelling. */
+  private didSubmit = false;
+  private origin: CustomFieldOrigin = 'external';
 
   constructor(
     getSchema: () => SchemaConfig,
     resolveError: (e: unknown) => ToastConfig,
+    bi?: CmsFieldModalBiReporter,
   ) {
     this.getSchema = getSchema;
     this.resolveError = resolveError;
+    this.bi = bi;
     this.modal = new ConditionalModalState({
       onConfirm: () => this.submit(),
     });
@@ -28,12 +39,20 @@ export class CmsFieldModalState {
     });
   }
 
-  open(fieldId?: string) {
+  open(fieldId?: string, origin: CustomFieldOrigin = 'external') {
     const schemaConfig = this.getSchema();
+    this.didSubmit = false;
+    this.origin = origin;
 
     this.formState = new CmsFormState({
       schemaConfig,
       getValidationRules: getFieldTypeValidationRulesList,
+      onFieldTouched: (field, value) =>
+        this.bi?.fieldChanged({
+          mode: fieldId ? 'edit' : 'new',
+          fieldName: field,
+          fieldValue: value,
+        }),
     });
 
     if (fieldId) {
@@ -47,10 +66,22 @@ export class CmsFieldModalState {
       this.formState.loadField(field);
     }
 
+    if (!fieldId) {
+      this.bi?.addFieldStarted(origin);
+    }
+
     this.modal.open(null);
   }
 
   reset() {
+    if (this.formState && !this.didSubmit) {
+      this.bi?.endProcess({
+        endType: 'Cancel',
+        form: this.formState,
+        origin: this.origin,
+        numFields: Object.keys(this.getSchema().fields).length,
+      });
+    }
     this.formState = null;
   }
 
@@ -83,6 +114,7 @@ export class CmsFieldModalState {
           formState.editingFieldId,
           fieldSpec,
         );
+        this._reportSaved(formState, schemaConfig);
         schemaConfig.refresh?.();
         return;
       }
@@ -91,10 +123,21 @@ export class CmsFieldModalState {
         throw new Error('SchemaConfig.fieldActions.addField is not configured');
       }
       await schemaConfig.fieldActions.addField(fieldSpec as Field);
+      this._reportSaved(formState, schemaConfig);
       schemaConfig.refresh?.();
     } catch (e) {
       formState.setErrorToastConfig(this.resolveError(e));
       throw e;
     }
   }
+
+  private _reportSaved(formState: CmsFormState, schemaConfig: SchemaConfig) {
+    this.didSubmit = true;
+    this.bi?.endProcess({
+      endType: formState.mode === 'edit' ? 'Edit Field' : 'Add Field',
+      form: formState,
+      origin: this.origin,
+      numFields: Object.keys(schemaConfig.fields).length,
+    });
+  }
 }

package/src/components/CmsFieldManagement/CmsFormState.ts

@@ -23,6 +23,8 @@ export interface CmsFormStateParams {
   getValidationRules: (t: SelectableFieldTypes) => ValidationRule[];
   mode?: 'new' | 'edit';
   editingFieldId?: string;
+  /** Called the first time a field is left, for reporting what the user filled in. */
+  onFieldTouched?: (field: keyof FieldProperties, value?: string) => void;
 }
 
 function defaultProperties(): FieldPropertiesState {
@@ -40,6 +42,7 @@ const NAME_MAX_LENGTH = 50;
 export class CmsFormState {
   readonly schemaConfig?: SchemaConfig;
   readonly getValidationRules: (t: SelectableFieldTypes) => ValidationRule[];
+  private readonly onFieldTouched?: CmsFormStateParams['onFieldTouched'];
 
   properties: FieldPropertiesState = defaultProperties();
   fieldRules: FieldRules = { validationRules: {} };
@@ -54,6 +57,7 @@ export class CmsFormState {
     this.getValidationRules = params.getValidationRules;
     this.mode = params.mode ?? 'new';
     this.editingFieldId = params.editingFieldId;
+    this.onFieldTouched = params.onFieldTouched;
 
     makeObservable(this, {
       properties: observable.ref,
@@ -165,7 +169,12 @@ export class CmsFormState {
   }
 
   blurField(field: keyof FieldProperties) {
+    const wasUntouched = !this.touchedFields.has(field);
     this.touchedFields.add(field);
+    if (wasUntouched) {
+      const value = this.properties[field];
+      this.onFieldTouched?.(field, value == null ? undefined : String(value));
+    }
   }
 
   enableShowValidationError() {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection1913926124";
+var _namespace_ = "ValidationAndDefaultsSection3896500806";
 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":"ValidationAndDefaultsSection1913926124__root","accordionWrapper":"ValidationAndDefaultsSection1913926124__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection3896500806__root","accordionWrapper":"ValidationAndDefaultsSection3896500806__accordionWrapper"};
 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_ = "Collapse3605536152";
+var _namespace_ = "Collapse136079483";
 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":"Collapse3605536152__root","exit":"Collapse3605536152__exit"};
+export var classes = {"root":"Collapse136079483__root","exit":"Collapse136079483__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_ = "CollectionPage3490548403";
+var _namespace_ = "CollectionPage30871070";
 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":"CollectionPage3490548403__root"};
+export var classes = {"root":"CollectionPage30871070__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_ = "CollectionSectionHeader3804335527";
+var _namespace_ = "CollectionSectionHeader4175391760";
 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":"CollectionSectionHeader3804335527__root","summaryIcon":"CollectionSectionHeader3804335527__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader4175391760__root","summaryIcon":"CollectionSectionHeader4175391760__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_ = "CollectionTable118995330";
+var _namespace_ = "CollectionTable2341564990";
 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":"CollectionTable118995330__root"};
+export var classes = {"root":"CollectionTable2341564990__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_ = "CollectionTableWSRTable3700121031";
+var _namespace_ = "CollectionTableWSRTable2152666113";
 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":"CollectionTableWSRTable3700121031__root"};
+export var classes = {"root":"CollectionTableWSRTable2152666113__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar1355295430";
+var _namespace_ = "CollectionToolbar4191390783";
 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":"CollectionToolbar1355295430__root","right":"CollectionToolbar1355295430__right","left":"CollectionToolbar1355295430__left","fullWidth":"CollectionToolbar1355295430__fullWidth"};
+export var classes = {"root":"CollectionToolbar4191390783__root","right":"CollectionToolbar4191390783__right","left":"CollectionToolbar4191390783__left","fullWidth":"CollectionToolbar4191390783__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_ = "SearchOrCustomFilter1356450189";
+var _namespace_ = "SearchOrCustomFilter3598456581";
 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":"SearchOrCustomFilter1356450189__root","search":"SearchOrCustomFilter1356450189__search","searchMobile":"SearchOrCustomFilter1356450189__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter3598456581__root","search":"SearchOrCustomFilter3598456581__search","searchMobile":"SearchOrCustomFilter3598456581__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_ = "AutoCompleteReadonly1587949727";
+var _namespace_ = "AutoCompleteReadonly2292120229";
 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":"AutoCompleteReadonly1587949727__root"};
+export var classes = {"root":"AutoCompleteReadonly2292120229__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_ = "ViewsDropdown2014084365";
+var _namespace_ = "ViewsDropdown594376402";
 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":"ViewsDropdown2014084365__root"};
+export var classes = {"root":"ViewsDropdown594376402__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -138,7 +138,7 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
             >
               <AddItem
                 dataHook="custom-columns-schema-add-field"
-                onClick={schemaCtx.addField}
+                onClick={() => schemaCtx.addField?.('Custom columns panel')}
               >
                 {t('cairo.customFields.addCustomField.CTA')}
               </AddItem>

package/src/components/CustomFieldModal/CustomFieldForm.tsx

@@ -171,6 +171,7 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
                 onChange: containsPii.onChange,
               }}
               mode={mode}
+              canChangePii={state.canChangePii}
               language={language}
               piiWarning={state.piiWarning}
             />

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CustomFieldFormPiiFields1162113718";
+var _namespace_ = "CustomFieldFormPiiFields1126082020";
 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":"CustomFieldFormPiiFields1162113718__root","tooltipText":"CustomFieldFormPiiFields1162113718__tooltipText"};
+export var classes = {"root":"CustomFieldFormPiiFields1126082020__root","tooltipText":"CustomFieldFormPiiFields1126082020__tooltipText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.tsx

@@ -10,6 +10,7 @@ import {
   ToggleSwitch,
 } from '@wix/design-system';
 import type { FieldPiiWarning } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { Trans } from '../Trans';
 import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { classes } from './CustomFieldFormPiiFields.st.css.js';
@@ -20,6 +21,7 @@ interface PiiFormFieldsProps {
     onChange: (value: boolean) => void;
   };
   mode: string;
+  canChangePii?: boolean;
   language: string;
   /** Shown only while the toggle is on. */
   piiWarning?: FieldPiiWarning;
@@ -28,9 +30,11 @@ interface PiiFormFieldsProps {
 export function PiiFormFields({
   containsPii,
   mode,
+  canChangePii = mode !== 'edit',
   language,
   piiWarning,
 }: PiiFormFieldsProps) {
+  const { translate } = useWixPatternsContainer();
   const isBmHarmonyTheme = useBmHarmonyTheme();
   const tooltipTextSize = isBmHarmonyTheme ? 'tiny' : 'small';
   const translateKeys = {
@@ -42,17 +46,18 @@ export function PiiFormFields({
       'cairo.customFields.addCustomField.modal.PII-setting.toggle.editNote',
   } as const;
   const whyIsItImportantLink = `https://support.wix.com/${language}/article/about-personally-identifiable-information-pii`;
-  const isEdit = mode === 'edit';
+  const isPiiLocked = mode === 'edit' && !canChangePii;
 
   return (
     <>
       <Cell span={12}>
         <FormField>
-          <Box gap="9px" marginBlockEnd={isEdit ? '6px' : undefined}>
+          <Box gap="9px" marginBlockEnd={isPiiLocked ? '6px' : undefined}>
             <ToggleSwitch
               dataHook="pii-toggle-switch"
+              aria-label={translate(translateKeys.toggleName)}
               size="medium"
-              disabled={isEdit}
+              disabled={!canChangePii}
               checked={containsPii.value}
               onChange={(e) => containsPii.onChange(e.target.checked)}
             />
@@ -90,7 +95,7 @@ export function PiiFormFields({
             </Box>
           </Box>
         </FormField>
-        {isEdit && (
+        {isPiiLocked && (
           <Box>
             <Text size="small" dataHook="pii-toggle-edit-note">
               <Trans i18nKey={translateKeys.toggleEditNote} />

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle3246916303";
+var _namespace_ = "DragHandle1913915071";
 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":"DragHandle3246916303__root"};
+export var classes = {"root":"DragHandle1913915071__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell1177568343";
+var _namespace_ = "EditableCell3309682090";
 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":"EditableCell1177568343__root","errorMessage":"EditableCell1177568343__errorMessage"};
+export var classes = {"root":"EditableCell3309682090__root","errorMessage":"EditableCell3309682090__errorMessage"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};