@wix/patterns 1.385.0 → 1.388.0

package/src/components/EditableTable/useHeaderActions.tsx

@@ -0,0 +1,120 @@
+import React, { useMemo, type ReactNode } from 'react';
+import type { FiltersMap } from '@wix/bex-core';
+import type { EditableTableState } from '../../state/EditableTable';
+import type { EditableColumn } from '../../state/EditableTable/types';
+import {
+  buildFieldActionGroups,
+  type FieldActionHandlers,
+  type FieldActionKey,
+} from '../FieldActions';
+import { HeaderActionsPopover } from './HeaderActionsPopover';
+
+const FIELD_ACTION_GROUPS: FieldActionKey[][] = [
+  ['editField'],
+  ['makePrimary', 'hideColumn', 'duplicateField', 'duplicateFieldWithContent'],
+  ['sortAscending', 'sortDescending', 'filter'],
+  ['delete'],
+];
+
+export function useHeaderActions<T, F extends FiltersMap>(
+  state: EditableTableState<T, F>,
+  columns: EditableColumn<T>[],
+  disabled?: boolean,
+): Record<string, ReactNode> {
+  const { toolbar } = state;
+  const { customColumnsState, panels, toolbarFiltersState } = toolbar;
+  const { handlers: fieldActionHandlers, permissions: fieldActionPermissions } =
+    state.fieldActions;
+  const isDuplicating =
+    state.fieldActions.duplicateTask.status.isLoading ||
+    state.fieldActions.duplicateWithContentTask.status.isLoading;
+  const isMakingPrimary = state.fieldActions.makePrimaryTask.status.isLoading;
+
+  return useMemo(() => {
+    if (disabled) {
+      return {};
+    }
+
+    const result: Record<string, ReactNode> = {};
+
+    const loading: Partial<Record<FieldActionKey, boolean>> = {
+      makePrimary: isMakingPrimary,
+      duplicateField: isDuplicating,
+      duplicateFieldWithContent: isDuplicating,
+    };
+
+    for (const col of columns) {
+      const handlers: FieldActionHandlers = {};
+
+      if (fieldActionHandlers?.makePrimary) {
+        handlers.makePrimary = (id) => state.fieldActions.makePrimary(id);
+      }
+
+      if (col.hideable !== false && customColumnsState) {
+        const toolbarColumn = toolbar.columns.find((c) => c.id === col.id);
+        if (toolbarColumn) {
+          handlers.hideColumn = () =>
+            customColumnsState.onColumnCheckboxToggle(toolbarColumn);
+        }
+      }
+
+      if (fieldActionHandlers?.duplicateField) {
+        handlers.duplicateField = (id) => state.fieldActions.duplicate(id);
+      }
+
+      if (fieldActionHandlers?.duplicateFieldWithContent) {
+        handlers.duplicateFieldWithContent = (id) =>
+          state.fieldActions.duplicateWithContent(id);
+      }
+
+      if (col.sortable) {
+        handlers.sortAscending = (id) =>
+          state.sort(id, { forceDirection: 'asc' });
+        handlers.sortDescending = (id) =>
+          state.sort(id, { forceDirection: 'desc' });
+      }
+
+      const hasFilter =
+        toolbarFiltersState &&
+        state.collection.query.customFilters[col.id] != null;
+      if (hasFilter) {
+        handlers.filter = () => panels.openSidePanel('filters');
+      }
+
+      if (fieldActionHandlers?.deleteField) {
+        handlers.delete = (id) => state.fieldActions.confirmDelete(id);
+      }
+
+      const groups = buildFieldActionGroups({
+        column: col,
+        permissions: fieldActionPermissions,
+        handlers,
+        loading,
+        groups: FIELD_ACTION_GROUPS,
+      });
+
+      if (groups.length > 0) {
+        result[col.id] = (
+          <HeaderActionsPopover
+            actions={groups}
+            dataHook={`header-actions-${col.id}`}
+          />
+        );
+      }
+    }
+
+    return result;
+  }, [
+    state,
+    columns,
+    toolbar,
+    customColumnsState,
+    panels,
+    toolbarFiltersState,
+    disabled,
+    fieldActionHandlers,
+    fieldActionPermissions,
+    isDuplicating,
+    isMakingPrimary,
+  ]);
+}

package/src/components/EntityPage/EntityPagePlain.st.css.ts

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

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

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

package/src/components/FieldActions/FieldActions.tsx

@@ -0,0 +1,248 @@
+import React, { type ReactNode } from 'react';
+import {
+  SortAscendingSmall,
+  SortDescendingSmall,
+  ContentFilterSmall,
+  HiddenSmall,
+  DeleteSmall,
+  EditSmall,
+  FlagSmall,
+  DuplicateSmall,
+} 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;
+}
+
+export type FieldActionKey =
+  | 'editField'
+  | 'makePrimary'
+  | 'hideColumn'
+  | 'duplicateField'
+  | 'duplicateFieldWithContent'
+  | 'sortAscending'
+  | 'sortDescending'
+  | 'filter'
+  | 'delete';
+
+export type FieldActionDisableReason =
+  | 'schemaNotEditable'
+  | 'addDisabled'
+  | 'editDisabled'
+  | 'deleteDisabled'
+  | 'alreadyPrimary'
+  | 'systemField'
+  | 'nonTextField';
+
+interface FieldActionDef {
+  label: 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',
+    icon: <EditSmall />,
+    getDisableReason: checkEditPerms,
+  },
+  makePrimary: {
+    label: 'Use as Primary Field',
+    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',
+    icon: <HiddenSmall />,
+  },
+  duplicateField: {
+    label: 'Duplicate Field',
+    icon: <DuplicateSmall />,
+    getDisableReason: checkAddPerms,
+  },
+  duplicateFieldWithContent: {
+    label: 'Duplicate Field with Content',
+    icon: <DuplicateSmall />,
+    getDisableReason: checkAddPerms,
+  },
+  sortAscending: {
+    label: 'Sort Ascending',
+    icon: <SortAscendingSmall />,
+  },
+  sortDescending: {
+    label: 'Sort Descending',
+    icon: <SortDescendingSmall />,
+  },
+  filter: {
+    label: 'Filter',
+    icon: <ContentFilterSmall />,
+  },
+  delete: {
+    label: '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 function getFieldActionDisableReason(
+  action: FieldActionKey,
+  column: FieldActionColumn,
+  permissions: FieldActionPermissions | undefined,
+): FieldActionDisableReason | null {
+  return FIELD_ACTIONS[action].getDisableReason?.(column, permissions) ?? null;
+}
+
+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 type FieldActionHandlers = Partial<
+  Record<FieldActionKey, (id: string) => void>
+>;
+
+export function buildFieldActionGroups(args: {
+  column: FieldActionColumn & { id: string };
+  permissions?: FieldActionPermissions;
+  handlers: FieldActionHandlers;
+  loading?: Partial<Record<FieldActionKey, boolean>>;
+  groups: FieldActionKey[][];
+}): HeaderAction[][] {
+  const { column, permissions, handlers, loading, groups } = args;
+  return groups
+    .map((group) =>
+      group.flatMap((key): HeaderAction[] => {
+        const handler = handlers[key];
+        if (!handler) {
+          return [];
+        }
+        const def = FIELD_ACTIONS[key];
+        const disable = getFieldActionDisableState(key, column, permissions);
+        return [
+          {
+            label: def.label,
+            icon: def.icon,
+            skin: def.skin,
+            onClick: () => handler(column.id),
+            loading: loading?.[key],
+            ...disable,
+          },
+        ];
+      }),
+    )
+    .filter((g) => g.length > 0);
+}

package/src/components/FieldActions/HeaderActionsPopover.tsx

@@ -0,0 +1,99 @@
+import React, { useState, useCallback, useRef, type ReactNode } from 'react';
+import { PopoverMenu, IconButton, Loader } from '@wix/design-system';
+import { MoreSmall } from '@wix/wix-ui-icons-common';
+import type { HeaderAction } from './headerActionTypes';
+import { useCloseOnAncestorScroll } from '../../hooks/useCloseOnAncestorScroll';
+
+export interface HeaderActionsPopoverProps {
+  actions: HeaderAction[][];
+  dataHook?: string;
+  className?: string;
+}
+
+export function HeaderActionsPopover({
+  actions,
+  dataHook,
+  className,
+}: HeaderActionsPopoverProps) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [popoverKey, setPopoverKey] = useState(0);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const closePopover = useCallback(() => {
+    setMenuOpen(false);
+    setPopoverKey((k) => k + 1);
+  }, []);
+
+  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];
+    }, []);
+
+  if (menuItems.length === 0) {
+    return null;
+  }
+
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    <div
+      ref={wrapperRef}
+      className={className}
+      data-menu-open={menuOpen ? 'true' : 'false'}
+      data-hook={dataHook}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <PopoverMenu
+        key={popoverKey}
+        dataHook={dataHook ? `${dataHook}-menu` : undefined}
+        textSize="small"
+        triggerElement={
+          <IconButton
+            size="tiny"
+            skin="dark"
+            priority="tertiary"
+            ariaLabel="Column actions"
+            dataHook={dataHook ? `${dataHook}-more-button` : undefined}
+          >
+            <MoreSmall />
+          </IconButton>
+        }
+        appendTo="window"
+        placement="bottom-end"
+        onShow={() => setMenuOpen(true)}
+        onHide={() => setMenuOpen(false)}
+      >
+        {menuItems}
+      </PopoverMenu>
+    </div>
+  );
+}

package/src/components/{EditableTable → FieldActions}/headerActionTypes.ts

@@ -13,4 +13,6 @@ export interface HeaderAction {
   disabledTooltip?: string;
   /** Visual style — 'dark' (default) or 'destructive' (red). */
   skin?: 'dark' | 'destructive';
+  /** When true, replaces the icon with a spinner, forces disabled, and suppresses `disabledTooltip`. */
+  loading?: boolean;
 }

package/src/components/FieldActions/index.ts

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

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

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

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ImportStepUpload2296702810";
+var _namespace_ = "ImportStepUpload2889347292";
 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":"ImportStepUpload2296702810__root","fileUpload":"ImportStepUpload2296702810__fileUpload"};
+export var classes = {"root":"ImportStepUpload2889347292__root","fileUpload":"ImportStepUpload2889347292__fileUpload"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow2049894941";
+var _namespace_ = "LoadingRow2398801252";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow2049894941__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow2049894941__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2398801252__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2398801252__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar1742506254";
+var _namespace_ = "MultiBulkActionToolbar4235211275";
 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":"MultiBulkActionToolbar1742506254__root","leftGroupWrapper":"MultiBulkActionToolbar1742506254__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar1742506254__selectedCountItem","selectedCountText":"MultiBulkActionToolbar1742506254__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar4235211275__root","leftGroupWrapper":"MultiBulkActionToolbar4235211275__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar4235211275__selectedCountItem","selectedCountText":"MultiBulkActionToolbar4235211275__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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