@wix/patterns 1.423.0 → 1.424.0

package/src/components/FieldActions/FieldActions.tsx

@@ -8,21 +8,12 @@ import {
   EditSmall,
   FlagSmall,
   DuplicateSmall,
+  ArchiveSmall,
 } from '@wix/wix-ui-icons-common';
-import type { HeaderAction } from './headerActionTypes';
-
-export interface FieldActionPermissions {
-  schemaEditable?: boolean;
-  addDisabled?: boolean;
-  editDisabled?: boolean;
-  deleteDisabled?: boolean;
-}
-
-export interface FieldActionColumn {
-  isPrimary?: boolean;
-  isSystem?: boolean;
-  cellType?: string;
-}
+import { withoutDefaults } from '@wix/bex-core';
+import { cairoCtaClicked } from '@wix/bex-core/bi';
+import type { ReportBI, Translate, TranslationsKeys } from '@wix/bex-core';
+import type { HeaderAction, FieldActionsMenuConfig } from './headerActionTypes';
 
 export type FieldActionKey =
   | 'editField'
@@ -33,196 +24,164 @@ export type FieldActionKey =
   | 'sortAscending'
   | 'sortDescending'
   | 'filter'
+  | 'archive'
   | 'delete';
 
-export type FieldActionDisableReason =
-  | 'schemaNotEditable'
-  | 'addDisabled'
-  | 'editDisabled'
-  | 'deleteDisabled'
-  | 'alreadyPrimary'
-  | 'systemField'
-  | 'nonTextField';
-
 interface FieldActionDef {
+  /** Fallback (English) label, used when no `labelKey` is set or no translate fn is passed. */
   label: string;
+  /** Translation key; when set and a translate fn is passed to buildFieldActionGroups, used instead of `label`. */
+  labelKey?: TranslationsKeys;
+  /** Shared data-hook for the rendered menu item — the same for every source and surface. */
+  dataHook: string;
+  /** BI name reported via `cairoCtaClicked`; set only on the field-management actions that report. */
+  ctaName?: string;
   icon: ReactNode;
   skin?: 'destructive';
-  getDisableReason?: (
-    col: FieldActionColumn,
-    perms: FieldActionPermissions | undefined,
-  ) => FieldActionDisableReason | null;
 }
 
-const getReadOnlySchemaReason = (
-  perms: FieldActionPermissions | undefined,
-): FieldActionDisableReason | null =>
-  perms?.schemaEditable === false ? 'schemaNotEditable' : null;
-
-const checkEditPerms = (
-  col: FieldActionColumn,
-  perms: FieldActionPermissions | undefined,
-): FieldActionDisableReason | null => {
-  const blocked = getReadOnlySchemaReason(perms);
-  if (blocked) {
-    return blocked;
-  }
-  if (perms?.editDisabled) {
-    return 'editDisabled';
-  }
-  if (col.isSystem) {
-    return 'systemField';
-  }
-  return null;
-};
-
-const checkAddPerms = (
-  col: FieldActionColumn,
-  perms: FieldActionPermissions | undefined,
-): FieldActionDisableReason | null => {
-  const blocked = getReadOnlySchemaReason(perms);
-  if (blocked) {
-    return blocked;
-  }
-  if (perms?.addDisabled) {
-    return 'addDisabled';
-  }
-  if (col.isSystem) {
-    return 'systemField';
-  }
-  return null;
-};
-
-const checkDeletePerms = (
-  col: FieldActionColumn,
-  perms: FieldActionPermissions | undefined,
-): FieldActionDisableReason | null => {
-  const blocked = getReadOnlySchemaReason(perms);
-  if (blocked) {
-    return blocked;
-  }
-  if (perms?.deleteDisabled) {
-    return 'deleteDisabled';
-  }
-  if (col.isSystem) {
-    return 'systemField';
-  }
-  if (col.isPrimary) {
-    return 'alreadyPrimary';
-  }
-  return null;
-};
-
 export const FIELD_ACTIONS: Record<FieldActionKey, FieldActionDef> = {
   editField: {
     label: 'Edit Field',
+    labelKey: 'cairo.customFields.edit.CTA',
+    dataHook: 'field-action-edit',
+    ctaName: 'Edit',
     icon: <EditSmall />,
-    getDisableReason: checkEditPerms,
   },
   makePrimary: {
     label: 'Use as Primary Field',
+    dataHook: 'field-action-make-primary',
+    ctaName: 'Make Primary',
     icon: <FlagSmall />,
-    getDisableReason: (col, perms) => {
-      const blocked = getReadOnlySchemaReason(perms);
-      if (blocked) {
-        return blocked;
-      }
-      if (perms?.editDisabled) {
-        return 'editDisabled';
-      }
-      if (col.isPrimary) {
-        return 'alreadyPrimary';
-      }
-      if (col.isSystem) {
-        return 'systemField';
-      }
-      if (col.cellType !== 'text') {
-        return 'nonTextField';
-      }
-      return null;
-    },
   },
   hideColumn: {
     label: 'Hide Column',
+    dataHook: 'field-action-hide',
     icon: <HiddenSmall />,
   },
   duplicateField: {
     label: 'Duplicate Field',
+    dataHook: 'field-action-duplicate',
+    ctaName: 'Duplicate',
     icon: <DuplicateSmall />,
-    getDisableReason: checkAddPerms,
   },
   duplicateFieldWithContent: {
     label: 'Duplicate Field with Content',
+    dataHook: 'field-action-duplicate-with-content',
+    ctaName: 'Duplicate with Content',
     icon: <DuplicateSmall />,
-    getDisableReason: checkAddPerms,
   },
   sortAscending: {
     label: 'Sort Ascending',
+    dataHook: 'field-action-sort-ascending',
     icon: <SortAscendingSmall />,
   },
   sortDescending: {
     label: 'Sort Descending',
+    dataHook: 'field-action-sort-descending',
     icon: <SortDescendingSmall />,
   },
   filter: {
     label: 'Filter',
+    dataHook: 'field-action-filter',
     icon: <ContentFilterSmall />,
   },
+  archive: {
+    label: 'Archive',
+    labelKey: 'cairo.customFields.archive.CTA',
+    dataHook: 'field-action-archive',
+    ctaName: 'Archive',
+    icon: <ArchiveSmall />,
+  },
   delete: {
     label: 'Delete',
+    labelKey: 'cairo.delete.button',
+    dataHook: 'field-action-delete',
+    ctaName: 'Delete',
     icon: <DeleteSmall />,
     skin: 'destructive',
-    getDisableReason: checkDeletePerms,
   },
 };
 
-export const FIELD_ACTION_DISABLE_REASON_TOOLTIPS: Record<
-  FieldActionDisableReason,
-  string
-> = {
-  schemaNotEditable: 'This schema is read-only.',
-  addDisabled: 'Adding fields is disabled.',
-  editDisabled: 'Editing fields is disabled.',
-  deleteDisabled: 'Deleting fields is disabled.',
-  alreadyPrimary: 'This is the primary field.',
-  systemField: "System fields can't be modified.",
-  nonTextField: 'Only text fields can be made primary.',
-};
+export type FieldActionHandlers = Partial<
+  Record<FieldActionKey, (id: string) => void>
+>;
 
-export function getFieldActionDisableReason(
-  action: FieldActionKey,
-  column: FieldActionColumn,
-  permissions: FieldActionPermissions | undefined,
-): FieldActionDisableReason | null {
-  return FIELD_ACTIONS[action].getDisableReason?.(column, permissions) ?? null;
+export interface FieldActionHandlersConfig {
+  handlers: FieldActionHandlers;
+  loading?: Partial<Record<FieldActionKey, boolean>>;
+  /** Per-action disabled state, owned by the source: a key present here renders
+   *  that action disabled with the given tooltip. */
+  disabledTooltips?: Partial<Record<FieldActionKey, string>>;
+  /** Menu-level disabled reason: when set and there are no actions, the menu
+   *  renders a disabled trigger with this tooltip (e.g. a read-only source). */
+  disabledTooltip?: string;
 }
 
-export function getFieldActionDisableState(
-  action: FieldActionKey,
-  column: FieldActionColumn,
-  permissions: FieldActionPermissions | undefined,
-): { disabled: boolean; disabledTooltip: string | undefined } {
-  const reason = getFieldActionDisableReason(action, column, permissions);
-  return {
-    disabled: reason !== null,
-    disabledTooltip: reason
-      ? FIELD_ACTION_DISABLE_REASON_TOOLTIPS[reason]
-      : undefined,
-  };
+export interface FieldActionsBIContext {
+  reportBi: ReportBI;
+  location: string;
+  listSize: number;
 }
 
-export type FieldActionHandlers = Partial<
-  Record<FieldActionKey, (id: string) => void>
->;
+const MENU_OPEN_CTA_NAME = 'More Actions Menu';
+
+const MENU_DATA_HOOKS = {
+  menuDataHook: 'field-actions-menu',
+  buttonDataHook: 'field-actions-menu-button',
+};
+
+const reportFieldActionCta = (
+  bi: FieldActionsBIContext,
+  cta: {
+    ctaName: string;
+    ctaIndex: number;
+    moreActionsIndex?: number;
+    numCtas: number;
+  },
+) =>
+  bi.reportBi(
+    withoutDefaults(cairoCtaClicked)({
+      ctaIndex: cta.ctaIndex,
+      ctaName: cta.ctaName,
+      filteredListSize: bi.listSize,
+      isSelectAll: false,
+      location: bi.location,
+      moreActionsIndex: cta.moreActionsIndex,
+      numCtas: cta.numCtas,
+      numItems: 1,
+      url: typeof window !== 'undefined' ? window.location.href : '',
+    }),
+  );
 
 export function buildFieldActionGroups(args: {
-  column: FieldActionColumn & { id: string };
-  permissions?: FieldActionPermissions;
+  columnId: string;
   handlers: FieldActionHandlers;
   loading?: Partial<Record<FieldActionKey, boolean>>;
+  /** Per-action disabled tooltips owned by the source (key present ⇒ disabled). */
+  disabledTooltips?: Partial<Record<FieldActionKey, string>>;
   groups: FieldActionKey[][];
+  /** When provided, labels use the registry's `labelKey` (falling back to `label`). */
+  translate?: Translate;
+  /** When provided, actions with a registry `ctaName` report `cairoCtaClicked` on click. */
+  bi?: FieldActionsBIContext;
 }): HeaderAction[][] {
-  const { column, permissions, handlers, loading, groups } = args;
+  const {
+    columnId,
+    handlers,
+    loading,
+    disabledTooltips,
+    groups,
+    translate,
+    bi,
+  } = args;
+
+  // BI-eligible actions (have a handler + a ctaName), in menu order — gives a
+  // stable ctaIndex / numCtas no matter which source built the menu.
+  const biKeys = groups
+    .flat()
+    .filter((key) => handlers[key] && FIELD_ACTIONS[key].ctaName);
+
   return groups
     .map((group) =>
       group.flatMap((key): HeaderAction[] => {
@@ -231,18 +190,82 @@ export function buildFieldActionGroups(args: {
           return [];
         }
         const def = FIELD_ACTIONS[key];
-        const disable = getFieldActionDisableState(key, column, permissions);
+        const disabledTooltip = disabledTooltips?.[key];
+        const ctaIndex =
+          bi && def.ctaName ? biKeys.indexOf(key) + 1 : undefined;
         return [
           {
-            label: def.label,
+            label:
+              translate && def.labelKey ? translate(def.labelKey) : def.label,
+            dataHook: def.dataHook,
             icon: def.icon,
             skin: def.skin,
-            onClick: () => handler(column.id),
+            onClick: () => {
+              if (bi && def.ctaName && ctaIndex) {
+                reportFieldActionCta(bi, {
+                  ctaName: def.ctaName,
+                  ctaIndex,
+                  moreActionsIndex: ctaIndex,
+                  numCtas: biKeys.length,
+                });
+              }
+              handler(columnId);
+            },
             loading: loading?.[key],
-            ...disable,
+            disabled: disabledTooltip !== undefined,
+            disabledTooltip,
           },
         ];
       }),
     )
     .filter((g) => g.length > 0);
 }
+
+export function buildFieldActionsMenu(args: {
+  fieldId: string;
+  config: FieldActionHandlersConfig | null;
+  groups: FieldActionKey[][];
+  translate: Translate;
+  tooltipContent?: string;
+  bi?: FieldActionsBIContext;
+}): FieldActionsMenuConfig | null {
+  const { fieldId, config, groups, translate, tooltipContent, bi } = args;
+
+  const actions = config
+    ? buildFieldActionGroups({
+        columnId: fieldId,
+        handlers: config.handlers,
+        loading: config.loading,
+        disabledTooltips: config.disabledTooltips,
+        groups,
+        translate,
+        bi,
+      })
+    : [];
+
+  if (actions.length === 0) {
+    return config?.disabledTooltip
+      ? {
+          actions: [],
+          disabledTooltip: config.disabledTooltip,
+          tooltipContent,
+          ...MENU_DATA_HOOKS,
+        }
+      : null;
+  }
+
+  const numCtas = actions.flat().length;
+  return {
+    actions,
+    tooltipContent,
+    ...MENU_DATA_HOOKS,
+    onShow: bi
+      ? () =>
+          reportFieldActionCta(bi, {
+            ctaName: MENU_OPEN_CTA_NAME,
+            ctaIndex: 0,
+            numCtas,
+          })
+      : undefined,
+  };
+}

package/src/components/FieldActions/FieldActionsPopover.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { PopoverMenu, IconButton, Tooltip } from '@wix/design-system';
+import { MoreSmall } from '@wix/wix-ui-icons-common';
+import { usePageContext, useWixPatternsContainer } from '@wix/bex-core/react';
+import type { FieldActionsMenuConfig } from './headerActionTypes';
+import { actionMenuItems } from './actionMenuItems';
+
+export function FieldActionsPopover({
+  actions,
+  buttonDataHook,
+  menuDataHook,
+  tooltipContent,
+  onShow,
+  disabledTooltip,
+}: FieldActionsMenuConfig) {
+  const { translate: t } = useWixPatternsContainer();
+  const { stackingRootRef } = usePageContext();
+  const tooltip = tooltipContent ?? t('cairo.moreActions');
+  const menuItems = actionMenuItems(actions);
+
+  if (menuItems.length === 0) {
+    if (!disabledTooltip) {
+      return null;
+    }
+    return (
+      <Tooltip
+        dataHook={
+          buttonDataHook ? `${buttonDataHook}-disabled-tooltip` : undefined
+        }
+        content={disabledTooltip}
+      >
+        <IconButton
+          size="tiny"
+          disabled
+          ariaLabel={t('cairo.moreActions')}
+          dataHook={buttonDataHook}
+        >
+          <MoreSmall />
+        </IconButton>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <PopoverMenu
+      textSize="small"
+      placement="bottom-end"
+      appendTo={stackingRootRef.current || 'parent'}
+      dataHook={menuDataHook}
+      onShow={onShow}
+      triggerElement={
+        <Tooltip content={tooltip}>
+          <IconButton
+            size="tiny"
+            skin="light"
+            ariaLabel={t('cairo.moreActions')}
+            dataHook={buttonDataHook}
+          >
+            <MoreSmall />
+          </IconButton>
+        </Tooltip>
+      }
+    >
+      {menuItems}
+    </PopoverMenu>
+  );
+}

package/src/components/FieldActions/HeaderActionsPopover.tsx

@@ -1,8 +1,9 @@
-import React, { useState, useCallback, useRef, type ReactNode } from 'react';
-import { PopoverMenu, IconButton, Loader, Tooltip } from '@wix/design-system';
+import React, { useState, useCallback, useRef } from 'react';
+import { PopoverMenu, IconButton, Tooltip } from '@wix/design-system';
 import { MoreSmall } from '@wix/wix-ui-icons-common';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import type { HeaderAction } from './headerActionTypes';
+import { actionMenuItems } from './actionMenuItems';
 import { useCloseOnAncestorScroll } from '../../hooks/useCloseOnAncestorScroll';
 
 export interface HeaderActionsPopoverProps {
@@ -28,39 +29,7 @@ export function HeaderActionsPopover({
 
   useCloseOnAncestorScroll(wrapperRef, closePopover, menuOpen);
 
-  const menuItems = actions
-    .filter((group) => group.length > 0)
-    .reduce<ReactNode[]>((result, group, index, array) => {
-      const items = group.map((action, i) => (
-        <PopoverMenu.MenuItem
-          key={`${index}-${i}`}
-          text={action.label}
-          onClick={
-            action.disabled || action.loading ? undefined : action.onClick
-          }
-          prefixIcon={
-            action.loading ? (
-              <span>
-                <Loader size="tiny" />
-              </span>
-            ) : (
-              action.icon
-            )
-          }
-          disabled={action.disabled || action.loading}
-          disabledDescription={
-            action.loading ? undefined : action.disabledTooltip
-          }
-          skin={action.skin}
-        />
-      ));
-      const divider =
-        index < array.length - 1
-          ? [<PopoverMenu.Divider key={`divider-${index}`} />]
-          : [];
-      return [...result, ...items, ...divider];
-    }, []);
-
+  const menuItems = actionMenuItems(actions);
   if (menuItems.length === 0) {
     return null;
   }

package/src/components/FieldActions/actionMenuItems.tsx

@@ -0,0 +1,45 @@
+import React, { type ReactNode } from 'react';
+import { PopoverMenu, Loader } from '@wix/design-system';
+import type { HeaderAction } from './headerActionTypes';
+
+/**
+ * Renders grouped field actions as PopoverMenu items, with a divider between
+ * groups. Shared by HeaderActionsPopover (table header) and FieldActionsPopover
+ * (side panels) so the menu body is identical across surfaces; only the trigger
+ * differs. Returns an empty array when there are no actions.
+ */
+export function actionMenuItems(actions: HeaderAction[][]): ReactNode[] {
+  return actions
+    .filter((group) => group.length > 0)
+    .reduce<ReactNode[]>((result, group, index, array) => {
+      const items = group.map((action, i) => (
+        <PopoverMenu.MenuItem
+          key={`${index}-${i}`}
+          dataHook={action.dataHook}
+          text={action.label}
+          onClick={
+            action.disabled || action.loading ? undefined : action.onClick
+          }
+          prefixIcon={
+            action.loading ? (
+              <span>
+                <Loader size="tiny" />
+              </span>
+            ) : (
+              action.icon
+            )
+          }
+          disabled={action.disabled || action.loading}
+          disabledDescription={
+            action.loading ? undefined : action.disabledTooltip
+          }
+          skin={action.skin}
+        />
+      ));
+      const divider =
+        index < array.length - 1
+          ? [<PopoverMenu.Divider key={`divider-${index}`} />]
+          : [];
+      return [...result, ...items, ...divider];
+    }, []);
+}

package/src/components/FieldActions/headerActionTypes.ts

@@ -3,6 +3,8 @@ import type { ReactNode } from 'react';
 export interface HeaderAction {
   /** The text label of the action item. */
   label: string;
+  /** Optional data-hook for the menu item (for testkits). */
+  dataHook?: string;
   /** Handler called when the action is clicked. */
   onClick: () => void;
   /** An icon to display before the text. */
@@ -16,3 +18,12 @@ export interface HeaderAction {
   /** When true, replaces the icon with a spinner, forces disabled, and suppresses `disabledTooltip`. */
   loading?: boolean;
 }
+
+export interface FieldActionsMenuConfig {
+  actions: HeaderAction[][];
+  buttonDataHook?: string;
+  menuDataHook?: string;
+  tooltipContent?: string;
+  onShow?: () => void;
+  disabledTooltip?: string;
+}

package/src/components/FieldActions/index.ts

@@ -1,17 +1,15 @@
 export {
   FIELD_ACTIONS,
-  FIELD_ACTION_DISABLE_REASON_TOOLTIPS,
   buildFieldActionGroups,
-  getFieldActionDisableReason,
-  getFieldActionDisableState,
+  buildFieldActionsMenu,
 } from './FieldActions';
 export type {
   FieldActionKey,
-  FieldActionDisableReason,
-  FieldActionPermissions,
-  FieldActionColumn,
   FieldActionHandlers,
+  FieldActionHandlersConfig,
+  FieldActionsBIContext,
 } from './FieldActions';
 export { HeaderActionsPopover } from './HeaderActionsPopover';
 export type { HeaderActionsPopoverProps } from './HeaderActionsPopover';
-export type { HeaderAction } from './headerActionTypes';
+export { FieldActionsPopover } from './FieldActionsPopover';
+export type { HeaderAction, FieldActionsMenuConfig } from './headerActionTypes';