@wix/patterns 1.430.0 → 1.432.0

package/src/components/CustomColumnsPanel/ColumnsList.tsx

@@ -6,6 +6,7 @@ import { Column } from '../../model';
 import { Box } from '@wix/design-system';
 import { addEventListener } from '@wix/bex-core/util';
 import { ColumnListTableListItem } from './ColumnListTableListItem';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface ColumnsListProps<T, F extends FiltersMap> {
   state: CustomColumnsPanelStateBase<T, F>;
@@ -15,6 +16,7 @@ function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
   const { state } = props;
   const { columnsCollection, dragAndDrop } = state;
   const hasSearchValue = state.searchValue.trim().length > 0;
+  const isHarmonyTheme = useBmHarmonyTheme();
 
   useEffect(() => {
     if (dragAndDrop == null) {
@@ -40,14 +42,18 @@ function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
   }, []);
 
   const renderItem = useCallback(
-    (column: Column, index: number, { length }: { length: number }) => {
+    (column: Column, index: number) => {
       const itemContent = (
         <ColumnListTableListItem
           key={column.id}
           index={index}
           state={state}
           column={column}
-          showDivider={index < length - 1}
+          showDivider={
+            isHarmonyTheme
+              ? false
+              : index < columnsCollection.result.items.length - 1
+          }
         />
       );
 
@@ -69,14 +75,14 @@ function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
 
       return itemContent;
     },
-    [hasSearchValue],
+    [hasSearchValue, isHarmonyTheme],
   );
 
   let child = (
     <Box
       direction="vertical"
       dataHook="custom-columns-list"
-      backgroundColor="D60"
+      {...(isHarmonyTheme ? { paddingLeft: 'SP2', paddingRight: 'SP2' } : {})}
     >
       {columnsCollection.result.items.map(renderItem)}
     </Box>
@@ -104,7 +110,7 @@ function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
             state={dragAndDrop}
             renderItem={(index) => {
               const item = columnsCollection.result.items[index];
-              return item ? renderItem(item, index, { length: 0 }) : null;
+              return item ? renderItem(item, index) : null;
             }}
           />
         </>

package/src/components/CustomColumnsPanel/CustomColumnsEntityPageContext.ts

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+import { CustomColumnsEntityPageState } from '../../state/CustomColumnsEntityPageState';
+import { assertContextValue } from '../../createContext';
+
+/** Carries the panel's state from the mount to the registered panel component,
+ *  which the side-panel machinery renders with no props. Per mount, so two
+ *  panels on one page stay independent. */
+export const CustomColumnsEntityPageContext =
+  createContext<CustomColumnsEntityPageState | null>(null);
+
+export const CustomColumnsEntityPageProvider =
+  CustomColumnsEntityPageContext.Provider;
+
+export const useCustomColumnsEntityPageContext = () => {
+  const value = useContext(CustomColumnsEntityPageContext);
+  assertContextValue('CustomColumnsEntityPageProvider', value);
+  return value;
+};

package/src/components/CustomColumnsPanel/CustomColumnsEntityPagePanelEntry.tsx

@@ -1,20 +1,14 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { CustomColumnsPanel } from './CustomColumnsPanel';
-import { CustomColumnsEntityPageState } from '../../state/CustomColumnsEntityPageState';
+import { useCustomColumnsEntityPageContext } from './CustomColumnsEntityPageContext';
 
 function _CustomColumnsEntityPagePanelEntry() {
-  const state = CustomColumnsEntityPagePanelEntry.state;
-
-  if (!state) {
-    return null;
-  }
+  const state = useCustomColumnsEntityPageContext();
 
   return <CustomColumnsPanel state={state} />;
 }
 
 export const CustomColumnsEntityPagePanelEntry = observer(
   _CustomColumnsEntityPagePanelEntry,
-) as typeof _CustomColumnsEntityPagePanelEntry & {
-  state?: CustomColumnsEntityPageState;
-};
+);

package/src/components/CustomColumnsPanel/CustomColumnsEntityPagePanelMount.tsx

@@ -6,6 +6,7 @@ import { CustomColumnsEntityPageState } from '../../state/CustomColumnsEntityPag
 import { WixPatternsModalsContainer } from '../WixPatternsModalsContainer';
 import { WixPatternsPanelModalsContainer } from '../WixPatternsPanelModalsContainer';
 import { CustomColumnsEntityPagePanelEntry } from './CustomColumnsEntityPagePanelEntry';
+import { CustomColumnsEntityPageProvider } from './CustomColumnsEntityPageContext';
 
 export interface CustomColumnsEntityPagePanelMountProps {
   state: CustomColumnsEntityPageState;
@@ -19,7 +20,6 @@ function _CustomColumnsEntityPagePanelMount({
   const { modalsContainerRef, stackingRootRef } = usePageContext();
 
   useEffect(() => {
-    CustomColumnsEntityPagePanelEntry.state = state;
     panels.registerSidePanel(
       'customColumns',
       CustomColumnsEntityPagePanelEntry,
@@ -27,16 +27,23 @@ function _CustomColumnsEntityPagePanelMount({
     return panels.init();
   }, []);
 
-  if (isPanelLayout) {
-    return <WixPatternsPanelModalsContainer state={panels} />;
-  }
-
+  // The panel component is registered by type and rendered with no props, so it
+  // reads its state from this provider — one per mount, which keeps two panels
+  // on the same page independent.
   return (
-    <WixPatternsModalsContainer
-      rootRef={stackingRootRef}
-      anchorRef={useRelativeSidePanel ? stackingRootRef : modalsContainerRef}
-      state={panels}
-    />
+    <CustomColumnsEntityPageProvider value={state}>
+      {isPanelLayout ? (
+        <WixPatternsPanelModalsContainer state={panels} />
+      ) : (
+        <WixPatternsModalsContainer
+          rootRef={stackingRootRef}
+          anchorRef={
+            useRelativeSidePanel ? stackingRootRef : modalsContainerRef
+          }
+          state={panels}
+        />
+      )}
+    </CustomColumnsEntityPageProvider>
   );
 }
 

package/src/components/CustomColumnsPanel/CustomColumnsNoResults.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Box, Text, TextButton } from '@wix/design-system';
-import { Revert } from '@wix/wix-ui-icons-common';
+import { Revert } from '@wix/wix-ui-icons-common/lazy';
 import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelStateBase';
 import { FiltersMap } from '@wix/bex-core';
 import { CollectionEmptyStateBase } from '../CollectionEmptyStateBase';

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -4,6 +4,7 @@ import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelState
 import { FiltersMap } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { observer } from 'mobx-react-lite';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { ColumnsList } from './ColumnsList';
 import { CustomColumnsSearch } from './CustomColumnsSearch';
 import { CustomColumnsNoResults } from './CustomColumnsNoResults';
@@ -30,16 +31,21 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
 }: CustomColumnsPanelProps<T, F>) {
   const entered = useRafRender();
   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;
+  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;
@@ -48,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;
@@ -73,7 +79,7 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
       >
         <SidePanel.Header title={t(titleKey)} subtitle={t(subtitleKey)}>
           {shouldShowSearch && (
-            <Box padding="0 SP3 SP2 SP3">
+            <Box padding={isHarmonyTheme ? '0 SP4 SP2 SP4' : '0 SP3 SP2 SP3'}>
               <CustomColumnsSearch state={state} />
             </Box>
           )}
@@ -91,22 +97,35 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
             <CustomColumnsNoResults state={state} />
           ) : (
             <>
-              {archive?.shouldDisplay && deleteFieldModal && (
-                <Suspense fallback={null}>
-                  <ArchivedItemsCTAButton
-                    archive={archive}
-                    deleteFieldModal={deleteFieldModal}
-                    onCloseSidePanel={() => state.onClose()}
-                    dataHook="custom-columns"
-                  />
-                </Suspense>
-              )}
+              {archive?.shouldDisplay &&
+                deleteFieldModal &&
+                (isHarmonyTheme ? (
+                  <Box direction="vertical" marginLeft="SP2" marginRight="SP2">
+                    <Suspense fallback={null}>
+                      <ArchivedItemsCTAButton
+                        archive={archive}
+                        deleteFieldModal={deleteFieldModal}
+                        onCloseSidePanel={() => state.onClose()}
+                        dataHook="custom-columns"
+                      />
+                    </Suspense>
+                  </Box>
+                ) : (
+                  <Suspense fallback={null}>
+                    <ArchivedItemsCTAButton
+                      archive={archive}
+                      deleteFieldModal={deleteFieldModal}
+                      onCloseSidePanel={() => state.onClose()}
+                      dataHook="custom-columns"
+                    />
+                  </Suspense>
+                ))}
               <ColumnsList state={state} />
             </>
           )}
         </ScrollableContent>
-        {collectionFieldsSource && (
-          <FieldsSourceAddFieldCTA source={collectionFieldsSource} />
+        {manageFieldsSource && (
+          <FieldsSourceAddFieldCTA source={manageFieldsSource} />
         )}
         {schemaCtx?.addField && (
           <Box direction="vertical" width="100%">

package/src/components/CustomColumnsPanel/CustomColumnsSearch.tsx

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelStateBase';
 import { FiltersMap } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface CustomColumnsSearchProps<T, F extends FiltersMap> {
   state: CustomColumnsPanelStateBase<T, F>;
@@ -13,6 +14,7 @@ export function _CustomColumnsSearch<T, F extends FiltersMap>({
   state,
 }: CustomColumnsSearchProps<T, F>) {
   const { translate: t } = useWixPatternsContainer();
+  const isHarmonyTheme = useBmHarmonyTheme();
   const searchInputRef = useRef<Search>(null);
 
   useEffect(() => {
@@ -31,6 +33,7 @@ export function _CustomColumnsSearch<T, F extends FiltersMap>({
       ref={searchInputRef}
       dataHook="custom-columns-search"
       size="small"
+      border={isHarmonyTheme ? 'standard' : undefined}
       value={state.searchValue}
       onChange={(e) => {
         state.setSearchValue(e.target.value);

package/src/components/CustomColumnsPanel/FieldIndications.tsx

@@ -3,7 +3,7 @@ import { Badge, Box, Tooltip } from '@wix/design-system';
 import {
   LockLockedFilledSmall,
   FlagFilledSmall,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { observer } from 'mobx-react-lite';
 import { Column } from '../../model';

package/src/components/CustomFieldModal/CustomFieldForm.tsx

@@ -17,7 +17,11 @@ import {
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CustomFieldModalState } from '@wix/bex-core';
 import { CustomFieldTypeDropdown } from './CustomFieldTypeDropdown';
-import { ChevronDown, ChevronUp, InfoCircle } from '@wix/wix-ui-icons-common';
+import {
+  ChevronDown,
+  ChevronUp,
+  InfoCircle,
+} from '@wix/wix-ui-icons-common/lazy';
 import { Trans } from '../Trans';
 import { runInAction } from 'mobx';
 import { PiiFormFields } from './CustomFieldFormPiiFields';

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

@@ -0,0 +1,206 @@
+import React, { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  Accordion,
+  Box,
+  Cell,
+  Divider,
+  FloatingNotification,
+  FormField,
+  Input,
+  Layout,
+  Text,
+} from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { CustomFieldModalState } from '@wix/bex-core';
+import { InfoCircle } from '@wix/wix-ui-icons-common';
+import { runInAction } from 'mobx';
+import { CustomFieldTypeDropdownV2 } from './CustomFieldTypeDropdownV2';
+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 {
+    form: {
+      $: { key, type, name, containsPii },
+    },
+    errorToastConfig,
+    mode,
+    settings,
+    customFieldModalBiReporter,
+    generateUniqueKey,
+    setKeyFieldIfNotDirty,
+  } = state;
+  const { supportsPermissions, fieldModalText, piiWarning } =
+    state.fieldManagement;
+
+  const {
+    translate: t,
+    environment: { language },
+  } = useWixPatternsContainer();
+
+  useEffect(() => customFieldModalBiReporter.init(), []);
+
+  return (
+    <Box width={552} direction="vertical">
+      {errorToastConfig && (
+        <Box
+          position="absolute"
+          top="24px"
+          left="49%"
+          transform="translateX(-50%)"
+        >
+          <FloatingNotification
+            dataHook="custom-field-modal-error-state"
+            type="destructive"
+            prefixIcon={<InfoCircle />}
+            text={errorToastConfig.message}
+            textButtonProps={
+              errorToastConfig?.action && {
+                label: errorToastConfig.action.text,
+                onClick: () => errorToastConfig?.action?.onClick?.(),
+              }
+            }
+            onClose={() => {
+              runInAction(() => {
+                state.errorToastConfig = undefined;
+              });
+            }}
+          />
+        </Box>
+      )}
+      <Box direction="vertical">
+        <Layout>
+          <Cell span={12}>
+            <FormField
+              dataHook="custom-field-modal-field-type"
+              required
+              label={t('cairo.customFields.addCustomField.modal.fieldType')}
+              status={type.hasError ? 'error' : undefined}
+              statusMessage={type.error}
+            >
+              <CustomFieldTypeDropdownV2 state={state} />
+              {mode === 'edit' && (
+                <Box marginTop="SP1">
+                  <Text size="tiny" secondary>
+                    {t('cairo.customFields.editCustomField.fieldType.tooltip')}
+                  </Text>
+                </Box>
+              )}
+            </FormField>
+          </Cell>
+          <Cell span={6}>
+            <FormField
+              dataHook="custom-field-modal-field-name"
+              required
+              label={t('cairo.customFields.addCustomField.modal.fieldName')}
+              status={name.hasError ? 'error' : undefined}
+              statusMessage={name.error}
+            >
+              <Input
+                dataHook="custom-field-modal-name"
+                onChange={(e) => {
+                  name.onChange(e.target.value);
+                  setKeyFieldIfNotDirty(generateUniqueKey(e.target.value));
+                }}
+                value={name.value}
+                maxLength={64}
+                placeholder={state.namePlaceholder}
+              />
+            </FormField>
+          </Cell>
+          <Cell span={6}>
+            <FormField
+              dataHook="custom-field-modal-field-key"
+              required
+              label={t(
+                'cairo.customFields.addCustomField.modal.advancedSettings.key.title',
+              )}
+              infoContent={
+                mode === 'new'
+                  ? t(
+                      'cairo.customFields.addCustomField.modal.advancedSettings.key.tooltip',
+                    )
+                  : t('cairo.customFields.editCustomField.fieldKey.tooltip')
+              }
+              status={key.hasError ? 'error' : undefined}
+              statusMessage={key.error}
+            >
+              <Input
+                dataHook="custom-field-modal-key"
+                disabled={mode === 'edit'}
+                value={key.value}
+                onChange={(e) => {
+                  key.onChange(e.target.value.toLowerCase());
+                  customFieldModalBiReporter.reportKeyFormFieldChange();
+                }}
+                placeholder={t(
+                  'cairo.customFields.addCustomField.modal.advancedSettings.key.placeholder',
+                )}
+              />
+            </FormField>
+          </Cell>
+          {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>
+  );
+};
+
+export const CustomFieldFormV2 = observer(_CustomFieldFormV2);