@wix/patterns 1.423.0 → 1.424.0

package/src/components/EditableTable/cellTypes/email/View.st.css.ts

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

package/src/components/EditableTable/cellTypes/number/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2211381145";
+var _namespace_ = "Edit2518949657";
 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":"Edit2211381145__root","numberInput":"Edit2211381145__numberInput"};
+export var classes = {"root":"Edit2518949657__root","numberInput":"Edit2518949657__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View4113334386";
+var _namespace_ = "View3249344471";
 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":"View4113334386__root","textView":"View4113334386__textView"};
+export var classes = {"root":"View3249344471__root","textView":"View3249344471__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit687429529";
+var _namespace_ = "Edit2809740217";
 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":"Edit687429529__root","jsonInput":"Edit687429529__jsonInput"};
+export var classes = {"root":"Edit2809740217__root","jsonInput":"Edit2809740217__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/View.st.css.ts

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

package/src/components/EditableTable/cellTypes/select/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1443891590";
+var _namespace_ = "Edit4152557657";
 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":"Edit1443891590__root","selectInput":"Edit1443891590__selectInput"};
+export var classes = {"root":"Edit4152557657__root","selectInput":"Edit4152557657__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2568652599";
+var _namespace_ = "Edit2474595361";
 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":"Edit2568652599__root","editWrapper":"Edit2568652599__editWrapper","inputArea":"Edit2568652599__inputArea"};
+export var classes = {"root":"Edit2474595361__root","editWrapper":"Edit2474595361__editWrapper","inputArea":"Edit2474595361__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/View.st.css.ts

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

package/src/components/EditableTable/cellTypes/time/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2621736823";
+var _namespace_ = "Edit3071470623";
 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":"Edit2621736823__root","wrapper":"Edit2621736823__wrapper","overlay":"Edit2621736823__overlay"};
+export var classes = {"root":"Edit3071470623__root","wrapper":"Edit3071470623__wrapper","overlay":"Edit3071470623__overlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3407352688";
+var _namespace_ = "Edit1008679439";
 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":"Edit3407352688__root","urlInput":"Edit3407352688__urlInput"};
+export var classes = {"root":"Edit1008679439__root","urlInput":"Edit1008679439__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1207806995";
+var _namespace_ = "View1517719082";
 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":"View1207806995__root","textView":"View1207806995__textView","urlText":"View1207806995__urlText","suffix":"View1207806995__suffix"};
+export var classes = {"root":"View1517719082__root","textView":"View1517719082__textView","urlText":"View1517719082__urlText","suffix":"View1517719082__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/useEditableTableCollectionSyncProps.ts

@@ -1,11 +1,13 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import type { FiltersMap } from '@wix/bex-core';
 import type { EditableTableProps } from './EditableTable';
 
 export function useEditableTableCollectionSyncProps<T, F extends FiltersMap>(
   props: EditableTableProps<T, F>,
 ) {
-  const { state, columns } = props;
+  const { state, columns, fieldsSource } = props;
+
+  useState(() => fieldsSource?.setOnTable(state.toolbar));
 
   useEffect(() => state.init(columns), [state, columns]);
 }

package/src/components/EditableTable/useHeaderActions.tsx

@@ -2,118 +2,27 @@ 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'],
-];
-
+import { HeaderFieldActions } from './HeaderFieldActions';
+
+/**
+ * Builds the per-column header menu. Field-management comes from the table's
+ * field source (collectionFieldsSource); sort / hide / filter are table-wired.
+ * Each column's menu is its own observer (HeaderFieldActions), so loading and
+ * field-list changes re-render it without recomputing this map.
+ */
 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 { isMakingPrimary, isDuplicating, isDuplicatingWithContent } =
-    state.fieldActions;
-
   return useMemo(() => {
     if (disabled) {
       return {};
     }
-
     const result: Record<string, ReactNode> = {};
-
-    const loading: Partial<Record<FieldActionKey, boolean>> = {
-      makePrimary: isMakingPrimary,
-      duplicateField: isDuplicating,
-      duplicateFieldWithContent: isDuplicatingWithContent,
-    };
-
     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}`}
-          />
-        );
-      }
+      result[col.id] = <HeaderFieldActions state={state} column={col} />;
     }
-
     return result;
-  }, [
-    state,
-    columns,
-    toolbar,
-    customColumnsState,
-    panels,
-    toolbarFiltersState,
-    disabled,
-    fieldActionHandlers,
-    fieldActionPermissions,
-    isDuplicating,
-    isDuplicatingWithContent,
-    isMakingPrimary,
-  ]);
+  }, [state, columns, disabled]);
 }

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

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

package/src/components/EntityPageContent/EntityPageContent.tsx

@@ -1,5 +1,9 @@
 import { ReactElement, ReactNode } from 'react';
-import { useEntityPageContent } from '../../state/EntityPage';
+// Import directly, not via the ../../state/EntityPage barrel: going through the
+// barrel makes this static assignment depend on module init order, which breaks
+// when an unrelated top-of-barrel export loads state/EntityPage first (the static
+// ends up undefined). See useEntityPageChild.
+import { useEntityPageContent } from '../../state/EntityPage/useEntityPageContent';
 
 export interface EntityPageContentProps {
   /**

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

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