@wix/patterns 1.370.0 → 1.372.0

package/src/components/NestedTable/NestedTableRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "NestedTableRow2700507870";
+var _namespace_ = "NestedTableRow926890738";
 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":"NestedTableRow2700507870__root","firstLevel":"NestedTableRow2700507870__firstLevel","placeholder":"NestedTableRow2700507870__placeholder","parentHovered":"NestedTableRow2700507870__parentHovered"};
+export var classes = {"root":"NestedTableRow926890738__root","firstLevel":"NestedTableRow926890738__firstLevel","placeholder":"NestedTableRow926890738__placeholder","parentHovered":"NestedTableRow926890738__parentHovered"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/NestedTableDragAndDrop/MultipleDragOverlayEffect.st.css.ts

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

package/src/components/NestedTableDragAndDrop/NestedTableDragAndDropRow.st.css.ts

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

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

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

package/src/components/PickerContent/PickerContentAdditionalStep.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "PickerContentAdditionalStep1687238386";
+var _namespace_ = "PickerContentAdditionalStep4061668691";
 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":"PickerContentAdditionalStep1687238386__root","titles":"PickerContentAdditionalStep1687238386__titles","suffix":"PickerContentAdditionalStep1687238386__suffix"};
+export var classes = {"root":"PickerContentAdditionalStep4061668691__root","titles":"PickerContentAdditionalStep4061668691__titles","suffix":"PickerContentAdditionalStep4061668691__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard1494168202";
+var _namespace_ = "SkeletonCard2973485831";
 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":"SkeletonCard1494168202__root","headerLoading":"SkeletonCard1494168202__headerLoading"};
+export var classes = {"root":"SkeletonCard2973485831__root","headerLoading":"SkeletonCard2973485831__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter1361871225";
+var _namespace_ = "TabsFilter2657081565";
 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":"TabsFilter1361871225__root","title":"TabsFilter1361871225__title"};
+export var classes = {"root":"TabsFilter2657081565__root","title":"TabsFilter2657081565__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal419307129";
+var _namespace_ = "ManageTagsModal1423203914";
 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":"ManageTagsModal419307129__root"};
+export var classes = {"root":"ManageTagsModal1423203914__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.tsx

@@ -9,6 +9,7 @@ import {
   Text,
   Divider,
   Search,
+  ToastContainer,
 } from '@wix/design-system';
 import { Add } from '@wix/wix-ui-icons-common';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
@@ -103,21 +104,15 @@ const ManageTagsModalComponent = ({ state }: ManageTagsModalProps) => {
           dataHook="manage-tags-modal-layout"
         >
           <Box direction="vertical" height="100%" flex={1}>
-            {state.toastConfig && (
-              <Box
-                position="absolute"
-                top="18px"
-                left="50%"
-                transform="translateX(-50%)"
-                maxWidth="388px"
-              >
+            <ToastContainer>
+              {state.toastConfig && (
                 <ManageTagsNotification
                   toastConfig={state.toastConfig}
                   onClose={handleNotificationClose}
                   dataHook="manage-tags-modal-notification"
                 />
-              </Box>
-            )}
+              )}
+            </ToastContainer>
             <Box direction="vertical" gap="SP2">
               <Box padding="0 SP4">
                 <Search

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.uni.driver.ts

@@ -10,7 +10,7 @@ import {
   FormFieldUniDriver,
   IconButtonUniDriver,
   MessageModalLayoutUniDriver,
-  FloatingNotificationUniDriver,
+  StatusToastUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 
 export function ManageTagsModalUniDriver(base: UniDriver, body: UniDriver) {
@@ -56,16 +56,30 @@ export function ManageTagsModalUniDriver(base: UniDriver, body: UniDriver) {
       body,
     );
 
-  const getNotificationDriver = () =>
-    FloatingNotificationUniDriver(
-      body.$(`[data-hook="manage-tags-modal-notification"]`),
+  const getNotificationDriver = () => {
+    const notificationBase = body.$(
+      `[data-hook="manage-tags-modal-notification"]`,
+    );
+    const statusToast = StatusToastUniDriver(notificationBase, body);
+    const actionButton = TextButtonUniDriver(
+      notificationBase.$(`[data-hook="manage-tags-modal-notification-action"]`),
       body,
     );
+    return {
+      ...statusToast,
+      getText: () =>
+        notificationBase
+          .$('[data-hook="manage-tags-modal-notification-message"]')
+          .text(),
+      clickTextButton: () => actionButton.click(),
+      getTextButtonLabel: () => actionButton.getButtonTextContent(),
+    };
+  };
 
   const getNotificationButtonExists = () =>
     body
       .$(`[data-hook="manage-tags-modal-notification"]`)
-      .$(`[data-hook="floating-notification-text-button"]`)
+      .$(`[data-hook="manage-tags-modal-notification-action"]`)
       .exists();
 
   const clickCloseButton = async () => {

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsNotification.tsx

@@ -1,11 +1,6 @@
 import React, { useMemo } from 'react';
 import { ToastConfig, ToastType } from '@wix/bex-core';
-import {
-  FloatingNotification,
-  FloatingNotificationType,
-  IconElement,
-} from '@wix/design-system';
-import { InfoCircle, StatusComplete } from '@wix/wix-ui-icons-common';
+import { StatusToast } from '@wix/design-system';
 
 interface ManageTagsNotificationProps {
   toastConfig: ToastConfig;
@@ -13,37 +8,14 @@ interface ManageTagsNotificationProps {
   dataHook?: string;
 }
 
-const toastTypeToNotificationType: {
-  [key in ToastType]?: FloatingNotificationType;
+const toastTypeToStatus: {
+  [key in ToastType]?: 'success' | 'error' | 'warning' | 'info';
 } = {
+  STANDARD: 'info',
+  PREMIUM: 'info',
   SUCCESS: 'success',
-  ERROR: 'destructive',
-};
-
-const convertToastConfigToButtonProps = ({
-  toastConfig,
-  onClose,
-}: {
-  toastConfig: ToastConfig;
-  onClose: (toastConfig: ToastConfig) => unknown;
-}) => {
-  return {
-    label: toastConfig.action?.text,
-    onClick: () => {
-      toastConfig.action?.onClick?.();
-
-      if (toastConfig.action?.removeToastOnClick) {
-        onClose(toastConfig);
-      }
-    },
-  };
-};
-
-const toastTypeToIcon: {
-  [key in ToastType]?: IconElement;
-} = {
-  SUCCESS: <StatusComplete />,
-  ERROR: <InfoCircle />,
+  WARNING: 'warning',
+  ERROR: 'error',
 };
 
 export const ManageTagsNotification = ({
@@ -51,30 +23,39 @@ export const ManageTagsNotification = ({
   onClose,
   dataHook,
 }: ManageTagsNotificationProps) => {
-  const notificationProps = useMemo(() => {
-    let type;
-    let prefixIcon;
-    if (toastConfig.type) {
-      type = toastTypeToNotificationType[toastConfig.type];
-      prefixIcon = toastTypeToIcon[toastConfig.type];
+  const actionElement = useMemo(() => {
+    if (!toastConfig.action?.text) {
+      return undefined;
     }
 
-    const buttonProps = convertToastConfigToButtonProps({
-      toastConfig,
-      onClose,
-    });
+    const handleClick = () => {
+      toastConfig.action?.onClick?.();
 
-    return {
-      type,
-      prefixIcon,
-      text: toastConfig.message,
-      buttonProps:
-        toastConfig.action?.uiType === 'BUTTON' ? buttonProps : undefined,
-      textButtonProps:
-        toastConfig.action?.uiType === 'LINK' ? buttonProps : undefined,
-      onClose: () => onClose(toastConfig),
+      if (toastConfig.action?.removeToastOnClick) {
+        onClose(toastConfig);
+      }
     };
+
+    return (
+      <StatusToast.Action
+        dataHook="manage-tags-modal-notification-action"
+        onClick={handleClick}
+      >
+        {toastConfig.action.text}
+      </StatusToast.Action>
+    );
   }, [toastConfig, onClose]);
 
-  return <FloatingNotification dataHook={dataHook} {...notificationProps} />;
+  return (
+    <StatusToast
+      key={toastConfig.biName ?? toastConfig.message}
+      dataHook={dataHook}
+      status={toastTypeToStatus[toastConfig.type ?? 'STANDARD']}
+      dismissible
+      onDismiss={() => onClose(toastConfig)}
+      action={actionElement}
+    >
+      <span data-hook="manage-tags-modal-notification-message">{toastConfig.message}</span>
+    </StatusToast>
+  );
 };

package/src/components/TagsWidget/TagsWidget.tsx

@@ -6,6 +6,7 @@ import {
   Card,
   Cell,
   Layout,
+  PopoverCommonProps,
   SkeletonLine,
   Text,
   TextButton,
@@ -66,6 +67,10 @@ export type TagsWidgetProps = {
    * Displays tags without the option to edit them.
    */
   readOnly?: boolean;
+  /**
+   * Props to pass to the MultiSelect popover.
+   */
+  popoverProps?: PopoverCommonProps;
 } & (
   | {
       /**

package/src/components/TagsWidget/TagsWidgetContent.tsx

@@ -78,6 +78,7 @@ const _TagsWidgetContent = ({
   initialTags,
   entityId,
   readOnly,
+  popoverProps,
 }: TagsWidgetContentProps) => {
   const { translate: t } = useWixPatternsContainer();
   const [formState] = useState(() =>
@@ -179,6 +180,7 @@ const _TagsWidgetContent = ({
   return (
     <>
       <MultiSelect
+        popoverProps={popoverProps}
         value={formState.searchValue}
         onChange={handleSearchChange}
         options={tagsOptions}

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common3076010149";
+var _namespace_ = "common61718607";
 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":"common3076010149__root","column":"common3076010149__column","fullHeight":"common3076010149__fullHeight"};
+export var classes = {"root":"common61718607__root","column":"common61718607__column","fullHeight":"common61718607__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/model/tableColumn.ts

@@ -2,6 +2,7 @@ import type { TableColumn as TableColumnWSR } from '@wix/design-system';
 import type { KeyedItem, SortMode, SortOrder } from '@wix/bex-core';
 import { CSSProperties, ReactNode } from 'react';
 import type { FieldType } from '../utils/fieldTypePrefixIcons';
+import type { ValidationRule } from '../state/EditableTable/types';
 
 type TableColumnBase<T = any> = Omit<
   TableColumnWSR<T>,
@@ -28,6 +29,26 @@ type TableColumnBase<T = any> = Omit<
    * @external
    */
   fieldType?: FieldType;
+  /**
+   * Whether the field contains personally identifiable information.
+   * @external
+   */
+  isPii?: boolean;
+  /**
+   * only for cms. Whether this is a system-managed field.
+   * @external
+   */
+  isSystem?: boolean;
+  /**
+   * Whether this is the primary display field.
+   * @external
+   */
+  isPrimary?: boolean;
+  /**
+   * Column-level validation rules. When a `required` rule is present, a required indicator is shown in the custom columns panel.
+   * @external
+   */
+  validation?: ValidationRule[];
 };
 
 // disallow specifying `hideable` / `defaultHidden` or setting `hiddenFromCustomColumnsSelection` as false when `id` is missing
@@ -167,7 +188,27 @@ export interface Column {
    * @external
    */
   defaultHidden?: boolean;
-  dataExtension?: { id: string; editable: boolean };
+  dataExtension?: { id: string; editable: boolean; isPii?: boolean };
+  /**
+   * Whether the field contains personally identifiable information.
+   * @external
+   */
+  isPii?: boolean;
+  /**
+   * only for cms. Whether this is a system-managed field.
+   * @external
+   */
+  isSystem?: boolean;
+  /**
+   * Whether this is the primary display field.
+   * @external
+   */
+  isPrimary?: boolean;
+  /**
+   * Column-level validation rules. When a `required` rule is present, a required indicator is shown in the custom columns panel.
+   * @external
+   */
+  validation?: ValidationRule[];
   infoTooltipProps?: {
     content?: ReactNode;
     panelContent?: ReactNode;

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

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

package/src/state/FormPage/FormPageHeader.st.css.ts

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

package/src/state/ToolbarCollectionState.ts

@@ -730,10 +730,23 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
       return;
     }
 
+    const dataExtension = this.collectionDataExtension?.dataExtension;
+    const getSchemaField = dataExtension
+      ? (namespace: string, fieldId: string) => {
+          const schemas = [
+            dataExtension.userSchema,
+            ...(dataExtension.appSchemas || []),
+          ];
+          const schema = schemas.find((s) => s?.namespace === namespace);
+          return schema?.jsonSchema?.properties?.[fieldId];
+        }
+      : undefined;
+
     this._extendedColumns = simplifyExtendedColumns<T>({
       fields,
       toExtendedFields: this.collection.toExtendedFields,
       defaultHidden,
+      getSchemaField,
     });
 
     this._adjustSelectedColumns();

package/src/state/simplifyExtendedColumns.tsx

@@ -65,15 +65,22 @@ export function simplifyExtendedColumns<T>({
   fields,
   toExtendedFields,
   defaultHidden,
+  getSchemaField,
 }: {
   fields: CustomField[];
   toExtendedFields?: (item: T) => ExtendedFields | undefined | null;
   defaultHidden?: boolean;
+  getSchemaField?: (
+    namespace: string,
+    fieldId: string,
+  ) => Record<string, any> | undefined;
 }): Column[] {
   return fields.map((field) => {
     const type = field.type;
 
     const id = prefixFieldWithNamespace(field.id, field.namespace);
+    const schemaField = getSchemaField?.(field.namespace, field.id);
+    const isPii = field.isPii ?? Boolean(schemaField?.['x-wix-pii']?.enabled);
     return {
       dataExtension: field,
       id,
@@ -84,6 +91,7 @@ export function simplifyExtendedColumns<T>({
       sortable: field.filterable,
       defaultHidden: defaultHidden || field.owner !== 'user',
       fieldType: type ? toFieldType(type) : undefined,
+      isPii,
       align: type ? ExtendedColumnsConfig[type].align : undefined,
       width: type ? ExtendedColumnsConfig[type].width : undefined,
       style: type ? ExtendedColumnsConfig[type].style : undefined,