@wix/patterns 1.431.0 → 1.432.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal2185190114";
+var _namespace_ = "CmsFieldModal574041138";
 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":"CmsFieldModal2185190114__root","modal":"CmsFieldModal2185190114__modal"};
+export var classes = {"root":"CmsFieldModal574041138__root","modal":"CmsFieldModal574041138__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_ = "ValidationAndDefaultsSection2668938222";
+var _namespace_ = "ValidationAndDefaultsSection3027898072";
 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":"ValidationAndDefaultsSection2668938222__root","accordionWrapper":"ValidationAndDefaultsSection2668938222__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection3027898072__root","accordionWrapper":"ValidationAndDefaultsSection3027898072__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_ = "CharactersLimitInput3709322953";
+var _namespace_ = "CharactersLimitInput3690679241";
 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":"CharactersLimitInput3709322953__root","field":"CharactersLimitInput3709322953__field"};
+export var classes = {"root":"CharactersLimitInput3690679241__root","field":"CharactersLimitInput3690679241__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_ = "Collapse2929374578";
+var _namespace_ = "Collapse3206668098";
 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":"Collapse2929374578__root","exit":"Collapse2929374578__exit"};
+export var classes = {"root":"Collapse3206668098__root","exit":"Collapse3206668098__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_ = "CollectionPage3956579968";
+var _namespace_ = "CollectionPage4126903775";
 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":"CollectionPage3956579968__root"};
+export var classes = {"root":"CollectionPage4126903775__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_ = "CollectionSectionHeader2922683827";
+var _namespace_ = "CollectionSectionHeader3072653247";
 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":"CollectionSectionHeader2922683827__root","summaryIcon":"CollectionSectionHeader2922683827__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader3072653247__root","summaryIcon":"CollectionSectionHeader3072653247__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_ = "CollectionTable109442077";
+var _namespace_ = "CollectionTable2739075731";
 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":"CollectionTable109442077__root"};
+export var classes = {"root":"CollectionTable2739075731__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_ = "CollectionTableWSRTable2186714947";
+var _namespace_ = "CollectionTableWSRTable1316029034";
 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":"CollectionTableWSRTable2186714947__root"};
+export var classes = {"root":"CollectionTableWSRTable1316029034__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_ = "CollectionToolbar4248294874";
+var _namespace_ = "CollectionToolbar2037920816";
 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":"CollectionToolbar4248294874__root","right":"CollectionToolbar4248294874__right","left":"CollectionToolbar4248294874__left","fullWidth":"CollectionToolbar4248294874__fullWidth"};
+export var classes = {"root":"CollectionToolbar2037920816__root","right":"CollectionToolbar2037920816__right","left":"CollectionToolbar2037920816__left","fullWidth":"CollectionToolbar2037920816__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/PrimaryActionButton.tsx

@@ -32,7 +32,6 @@ export const PrimaryActionButton = forwardRef<Button, PrimaryActionButtonProps>(
         as="button"
         size="small"
         priority={priority}
-        skin="standard"
         dataHook="toolbar-primary-action-button"
         onClick={(event) => {
           toolbarBIReporter.onPrimaryActionButtonClick();

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter4202859381";
+var _namespace_ = "SearchOrCustomFilter2155612317";
 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":"SearchOrCustomFilter4202859381__root","search":"SearchOrCustomFilter4202859381__search","searchMobile":"SearchOrCustomFilter4202859381__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter2155612317__root","search":"SearchOrCustomFilter2155612317__search","searchMobile":"SearchOrCustomFilter2155612317__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_ = "AutoCompleteReadonly879662225";
+var _namespace_ = "AutoCompleteReadonly671478282";
 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":"AutoCompleteReadonly879662225__root"};
+export var classes = {"root":"AutoCompleteReadonly671478282__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_ = "ViewsDropdown2139846012";
+var _namespace_ = "ViewsDropdown4043386634";
 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":"ViewsDropdown2139846012__root"};
+export var classes = {"root":"ViewsDropdown4043386634__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomColumnsPanel/ColumnListTableListItem.tsx

@@ -36,7 +36,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
   } = props;
   const { select } = state;
 
-  const { collectionFieldsSource } = state;
+  const { manageFieldsSource } = state;
   const { translate: t } = useWixPatternsContainer();
   const isHarmonyTheme = useBmHarmonyTheme();
   const showFieldTypeIcons = state.showFieldTypeIcons;
@@ -67,7 +67,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
   // builds the per-field manage menu (edit / delete / archive …) as data; we
   // render it with the shared popover. Null when the field has no menu.
   const menuConfig = column.field
-    ? collectionFieldsSource?.fieldActionsMenu?.({
+    ? manageFieldsSource?.fieldActionsMenu?.({
         fieldId: column.field.id,
         origin: 'Custom columns panel',
         location: 'Customize columns action cell',

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -33,16 +33,19 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
   const { translate: t } = useWixPatternsContainer();
   const isHarmonyTheme = useBmHarmonyTheme();
 
-  const { dragAndDrop, collectionFieldsSource } = state;
-  const archive = collectionFieldsSource?.fieldsSource.archive;
+  const { dragAndDrop, manageFieldsSource } = state;
+  const archive = manageFieldsSource?.fieldsSource.archive;
   const deleteFieldModal =
-    collectionFieldsSource?.customFieldsPanel.deleteFieldModal;
+    manageFieldsSource?.customFieldsPanel.deleteFieldModal;
   const schemaCtx = useSchemaContext();
   const isSchema = !!schemaCtx?.schema;
-  const isEditable =
-    !!collectionFieldsSource || isSchema || state.isFieldsEditable;
+  const isEditable = !!manageFieldsSource || isSchema || state.isFieldsEditable;
 
-  useEffect(() => state.init(), []);
+  // Keyed on `state`: a card that rebuilds its state hands a new one to the
+  // panel it already registered, and the new one has to be initialized (and the
+  // old one disposed). A table's state is created once, so this never re-runs
+  // there.
+  useEffect(() => state.init(), [state]);
 
   if (!entered) {
     return null;
@@ -51,7 +54,7 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
   const hasSearchResults = state.columnsCollection.result.items.length > 0;
   const hasSearchValue = state.searchValue.trim().length > 0;
   const totalColumns = state.orderedColumns.length;
-  const hasFieldsSource = !!collectionFieldsSource;
+  const hasFieldsSource = !!manageFieldsSource;
 
   // Show search if there's a fields source OR if there are more than 5 columns
   const shouldShowSearch = hasFieldsSource || totalColumns > 5;
@@ -121,8 +124,8 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
             </>
           )}
         </ScrollableContent>
-        {collectionFieldsSource && (
-          <FieldsSourceAddFieldCTA source={collectionFieldsSource} />
+        {manageFieldsSource && (
+          <FieldsSourceAddFieldCTA source={manageFieldsSource} />
         )}
         {schemaCtx?.addField && (
           <Box direction="vertical" width="100%">

package/src/components/CustomFieldModal/CustomFieldFormPiiFieldsV2.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import {
+  Box,
+  Cell,
+  FormField,
+  InfoIcon,
+  SectionHelper,
+  Text,
+  TextButton,
+  ToggleSwitch,
+} from '@wix/design-system';
+import type { FieldPiiWarning } from '@wix/bex-core';
+import { Trans } from '../Trans';
+
+interface PiiFormFieldsV2Props {
+  containsPii: {
+    value: boolean;
+    onChange: (value: boolean) => void;
+  };
+  mode: string;
+  language: string;
+  /** Shown only while the toggle is on. */
+  piiWarning?: FieldPiiWarning;
+}
+
+export function PiiFormFieldsV2({
+  containsPii,
+  mode,
+  language,
+  piiWarning,
+}: PiiFormFieldsV2Props) {
+  const translateKeys = {
+    toggleName:
+      'cairo.customFields.addCustomField.modal.PII-setting.toggle.name',
+    toggleInfo:
+      'cairo.customFields.addCustomField.modal.PII-setting.toggle.info',
+    toggleEditNote:
+      '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';
+
+  return (
+    <>
+      <Cell span={12}>
+        <FormField>
+          <Box gap="9px" marginBlockEnd={isEdit ? '6px' : undefined}>
+            <ToggleSwitch
+              dataHook="pii-toggle-switch"
+              size="medium"
+              disabled={isEdit}
+              checked={containsPii.value}
+              onChange={(e) => containsPii.onChange(e.target.checked)}
+            />
+            <Box gap="3px">
+              <Text size="small" dataHook="pii-toggle-name">
+                <Trans i18nKey={translateKeys.toggleName} />
+              </Text>
+              <InfoIcon
+                size="small"
+                content={
+                  <Trans
+                    i18nKey={translateKeys.toggleInfo}
+                    components={{
+                      linkVal: (
+                        <TextButton
+                          as="a"
+                          href={whyIsItImportantLink}
+                          underline="always"
+                          size="small"
+                          target="_blank"
+                        />
+                      ),
+                    }}
+                  />
+                }
+              />
+            </Box>
+          </Box>
+        </FormField>
+        {isEdit && (
+          <Box>
+            <Text size="small" dataHook="pii-toggle-edit-note">
+              <Trans i18nKey={translateKeys.toggleEditNote} />
+            </Text>
+          </Box>
+        )}
+      </Cell>
+      {containsPii.value && piiWarning && (
+        <Cell span={12}>
+          <SectionHelper
+            dataHook="custom-field-modal-pii-warning"
+            skin="warning"
+            showPrefixIcon
+          >
+            {/* Inline, not SectionHelper's `actionText` — that slot renders a
+                bordered button on its own row. */}
+            {piiWarning.text}{' '}
+            {piiWarning.action && (
+              <TextButton
+                dataHook="custom-field-modal-pii-warning-action"
+                size="small"
+                skin="dark"
+                underline="always"
+                onClick={piiWarning.action.onClick}
+              >
+                {piiWarning.action.label}
+              </TextButton>
+            )}
+          </SectionHelper>
+        </Cell>
+      )}
+    </>
+  );
+}

package/src/components/CustomFieldModal/CustomFieldFormV2.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
+  Accordion,
   Box,
   Cell,
+  Divider,
   FloatingNotification,
   FormField,
   Input,
@@ -14,12 +16,17 @@ import { CustomFieldModalState } from '@wix/bex-core';
 import { InfoCircle } from '@wix/wix-ui-icons-common';
 import { runInAction } from 'mobx';
 import { CustomFieldTypeDropdownV2 } from './CustomFieldTypeDropdownV2';
-import { PiiFormFields } from './CustomFieldFormPiiFields';
+import { PiiFormFieldsV2 } from './CustomFieldFormPiiFieldsV2';
+import { CustomFieldFormV2Permissions } from './CustomFieldFormV2Permissions';
 
 export interface CustomFieldFormV2Props {
   state: CustomFieldModalState;
 }
 
+/** Cancels the modal's content padding so the section below spans the full width. */
+const fullBleed =
+  'calc(-1 * var(--wds-custom-modal-content-padding-horizontal, 24px))';
+
 export const _CustomFieldFormV2 = (props: CustomFieldFormV2Props) => {
   const { state } = props;
   const {
@@ -28,10 +35,13 @@ export const _CustomFieldFormV2 = (props: CustomFieldFormV2Props) => {
     },
     errorToastConfig,
     mode,
+    settings,
     customFieldModalBiReporter,
     generateUniqueKey,
     setKeyFieldIfNotDirty,
   } = state;
+  const { supportsPermissions, fieldModalText, piiWarning } =
+    state.fieldManagement;
 
   const {
     translate: t,
@@ -68,7 +78,7 @@ export const _CustomFieldFormV2 = (props: CustomFieldFormV2Props) => {
           />
         </Box>
       )}
-      <Box paddingLeft="SP1" paddingRight="SP1" direction="vertical">
+      <Box direction="vertical">
         <Layout>
           <Cell span={12}>
             <FormField
@@ -139,18 +149,56 @@ export const _CustomFieldFormV2 = (props: CustomFieldFormV2Props) => {
               />
             </FormField>
           </Cell>
-          {state.fieldManagement.supportsPii && (
-            <PiiFormFields
+          {state.typeSupportsPii && (
+            <PiiFormFieldsV2
               containsPii={{
                 value: containsPii.value,
                 onChange: containsPii.onChange,
               }}
               mode={mode}
               language={language}
+              piiWarning={piiWarning}
             />
           )}
         </Layout>
       </Box>
+      {supportsPermissions && (
+        <>
+          <Box marginTop="SP4" marginLeft={fullBleed} marginRight={fullBleed}>
+            <Divider />
+          </Box>
+          <Box
+            direction="vertical"
+            marginLeft={fullBleed}
+            marginRight={fullBleed}
+          >
+            <Accordion
+              dataHook="custom-field-modal-settings-accordion"
+              skin="standard"
+              hideShadow
+              horizontalPadding="large"
+              items={[
+                {
+                  title:
+                    fieldModalText.settingsLabel ??
+                    t(
+                      'cairo.customFields.addCustomField.modal.advancedSettings',
+                    ),
+                  toggleIconPlacement: 'start',
+                  open: settings.isOn,
+                  onToggle: () => {
+                    settings.toggle();
+                    customFieldModalBiReporter.reportAdvancedSettingsClick(
+                      settings.isOn ? 'Open' : 'Close',
+                    );
+                  },
+                  children: <CustomFieldFormV2Permissions state={state} />,
+                },
+              ]}
+            />
+          </Box>
+        </>
+      )}
     </Box>
   );
 };