@wix/patterns 1.422.0 → 1.424.0

package/src/components/SetupWidget/SetupStepGroup.tsx

@@ -58,18 +58,31 @@ export const SetupStepGroup = ({
     >
       <Box
         align="space-between"
-        verticalAlign={isMobile ? 'top' : 'middle'}
+        verticalAlign="middle"
         width="100%"
         minHeight="30px"
       >
-        <Box minHeight="24px" verticalAlign={isMobile ? 'top' : 'middle'}>
-          <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />
+        <Box
+          minHeight="24px"
+          verticalAlign="middle"
+          gap={isMobile ? 'SP1' : undefined}
+        >
+          {isMobile ? (
+            <Box className={st(classes.stepIcon)}>
+              <SetupStepIcon
+                status={allCompleted ? 'completed' : 'upcoming'}
+                marginTop="0px"
+              />
+            </Box>
+          ) : (
+            <SetupStepIcon status={allCompleted ? 'completed' : 'upcoming'} />
+          )}
           {/* Mobile cards stack the badge under the title (matches
               SetupStepCard); desktop rows keep it inline next to it. */}
           <Box
-            paddingLeft="SP2"
+            paddingLeft={isMobile ? undefined : 'SP2'}
             direction={isMobile ? 'vertical' : 'horizontal'}
-            verticalAlign={isMobile ? 'top' : 'middle'}
+            verticalAlign={isMobile ? undefined : 'middle'}
             gap="SP1"
           >
             <Text
@@ -79,13 +92,23 @@ export const SetupStepGroup = ({
             >
               {step.title}
             </Text>
-            {anyInProgress && !allCompleted && (
-              <Box marginTop={isMobile ? undefined : '2px'}>
-                <Badge size="tiny" skin="urgent" type="transparent">
+            {anyInProgress &&
+              !allCompleted &&
+              (isMobile ? (
+                <Text
+                  size="tiny"
+                  weight="normal"
+                  className={st(classes.inProgressLabel)}
+                >
                   {t('cairo.setupWidget.step.inProgress')}
-                </Badge>
-              </Box>
-            )}
+                </Text>
+              ) : (
+                <Box marginTop="2px">
+                  <Badge size="tiny" skin="urgent" type="transparent">
+                    {t('cairo.setupWidget.step.inProgress')}
+                  </Badge>
+                </Box>
+              ))}
           </Box>
         </Box>
         <Box verticalAlign="middle" gap="SP1">
@@ -110,7 +133,7 @@ export const SetupStepGroup = ({
       dataHook={`setup-step-children-${step.id}`}
       direction="vertical"
       gap={isMobile ? 'SP3' : 'SP1'}
-      paddingLeft={isMobile ? 'SP4' : 'SP5'}
+      paddingLeft="SP5"
       marginTop={isMobile ? 'SP3' : 'SP1'}
     >
       {children.map((child) => (
@@ -122,7 +145,7 @@ export const SetupStepGroup = ({
   if (isMobile) {
     return (
       <div data-hook={`setup-step-${step.id}`} className={st(classes.card)}>
-        <Box direction="vertical" padding="SP4">
+        <Box direction="vertical" padding="SP2">
           {header}
           {childList}
         </Box>

package/src/components/SetupWidget/SetupStepIcon.tsx

@@ -9,12 +9,19 @@ import { SetupWidgetStepStatus } from '@wix/bex-core';
  */
 export const SetupStepIcon = ({
   status,
+  /**
+   * Top nudge that centers the 18px icon on a single line of text. Defaults to
+   * the desktop value; the mobile card centers the icon via its own wrapper and
+   * passes "0px" to drop the nudge.
+   */
+  marginTop = '3px',
 }: {
   status: SetupWidgetStepStatus;
+  marginTop?: string;
 }) => {
   if (status === 'completed') {
     return (
-      <Box marginTop="3px">
+      <Box marginTop={marginTop}>
         <ConfirmSmall width="18px" height="18px" color="var(--wsr-color-G20)" />
       </Box>
     );
@@ -24,7 +31,7 @@ export const SetupStepIcon = ({
     status === 'disabled' ? 'var(--wsr-color-D40)' : 'var(--wsr-color-B10)';
 
   return (
-    <Box marginTop="3px">
+    <Box marginTop={marginTop}>
       <CircleSmallFilledSmall width="18px" height="18px" color={color} />
     </Box>
   );

package/src/components/SetupWidget/SetupWidget.st.css

@@ -8,6 +8,12 @@
 @property st-global(--wsr-color-B30);
 @property st-global(--wsr-color-B40);
 @property st-global(--wsr-color-B60);
+@property st-global(--wds-color-text-standard-primary);
+@property st-global(--wds-color-text-disabled);
+@property st-global(--wds-color-text-urgent);
+@property st-global(--wsr-color-D10);
+@property st-global(--wsr-color-D10-30);
+@property st-global(--wsr-color-O10);
 @property st-global(--wds-space-100);
 @property st-global(--wds-border-radius-200);
 @property st-global(--wds-border-radius-400);
@@ -93,3 +99,40 @@
 .card:clickable {
   cursor: pointer;
 }
+
+/* 24px icon cell (matches the Figma spec): a single-line step row is then
+ * 24px + 2×12px padding = 48px tall. The 18px glyph is centered within it, so
+ * the icon lines up with the title (single line) or its first line (wrapped). */
+.stepIcon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 24px;
+}
+
+/* Trailing chevron that replaces the per-step CTA button on mobile. WDS has no
+ * dedicated icon-color token; icons take the text-standard color (the Figma
+ * variable is grouped as "Text & icon"). */
+.chevron {
+  display: flex;
+  flex-shrink: 0;
+  color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
+}
+
+.chevronDisabled {
+  display: flex;
+  flex-shrink: 0;
+  color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
+}
+
+/* "IN PROGRESS" label, rendered with a WDS <Text> (so it uses the design
+ * system's typography) but in the urgent orange. <Text> has no "urgent" skin,
+ * so we override the standard-text color token it reads — this beats the
+ * component's own color rule without !important — and uppercase the label to
+ * match the Figma spec. Using <Text> (not a Badge) keeps it flush with the
+ * title, with no badge padding/offset. */
+.inProgressLabel {
+  --wds-color-text-standard-primary: var(--wds-color-text-urgent, var(--wsr-color-O10, #FE620F));
+
+  text-transform: uppercase;
+}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget1301138261";
+var _namespace_ = "SetupWidget808034205";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SetupWidget1301138261__root","row":"SetupWidget1301138261__row","completedCta":"SetupWidget1301138261__completedCta","card":"SetupWidget1301138261__card"};
+export var classes = {"root":"SetupWidget808034205__root","row":"SetupWidget808034205__row","completedCta":"SetupWidget808034205__completedCta","card":"SetupWidget808034205__card","stepIcon":"SetupWidget808034205__stepIcon","chevron":"SetupWidget808034205__chevron","chevronDisabled":"SetupWidget808034205__chevronDisabled","inProgressLabel":"SetupWidget808034205__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-border-dark-secondary":"--wds-color-border-dark-secondary","wds-color-border-standard-primary":"--wds-color-border-standard-primary","wds-color-border-standard-secondary":"--wds-color-border-standard-secondary","wds-color-fill-standard-tertiary":"--wds-color-fill-standard-tertiary","wds-color-fill-standard-tertiary-hover":"--wds-color-fill-standard-tertiary-hover","wsr-color-D60":"--wsr-color-D60","wsr-color-D80":"--wsr-color-D80","wsr-color-B30":"--wsr-color-B30","wsr-color-B40":"--wsr-color-B40","wsr-color-B60":"--wsr-color-B60","wds-space-100":"--wds-space-100","wds-border-radius-200":"--wds-border-radius-200","wds-border-radius-400":"--wds-border-radius-400"}; 
+export var vars = {"wds-color-border-dark-secondary":"--wds-color-border-dark-secondary","wds-color-border-standard-primary":"--wds-color-border-standard-primary","wds-color-border-standard-secondary":"--wds-color-border-standard-secondary","wds-color-fill-standard-tertiary":"--wds-color-fill-standard-tertiary","wds-color-fill-standard-tertiary-hover":"--wds-color-fill-standard-tertiary-hover","wsr-color-D60":"--wsr-color-D60","wsr-color-D80":"--wsr-color-D80","wsr-color-B30":"--wsr-color-B30","wsr-color-B40":"--wsr-color-B40","wsr-color-B60":"--wsr-color-B60","wds-color-text-standard-primary":"--wds-color-text-standard-primary","wds-color-text-disabled":"--wds-color-text-disabled","wds-color-text-urgent":"--wds-color-text-urgent","wsr-color-D10":"--wsr-color-D10","wsr-color-D10-30":"--wsr-color-D10-30","wsr-color-O10":"--wsr-color-O10","wds-space-100":"--wds-space-100","wds-border-radius-200":"--wds-border-radius-200","wds-border-radius-400":"--wds-border-radius-400"}; 
 
 
 

package/src/components/SetupWidget/SetupWidget.tsx

@@ -186,7 +186,7 @@ const _SetupWidget = ({
   );
 
   const list = (
-    <Box direction="vertical" gap={isMobile ? 'SP3' : 'SP1'}>
+    <Box direction="vertical" gap={isMobile ? 'SP3' : 'SP1'} width="100%">
       {state.steps.map((step) => {
         const node = step.steps?.length ? (
           <SetupStepGroup
@@ -228,7 +228,7 @@ const _SetupWidget = ({
   // through CardContainer so the widget owns those states everywhere.
   if (isMobile && status === 'success') {
     return (
-      <Box dataHook={dataHook} direction="vertical" gap="SP3">
+      <Box dataHook={dataHook} direction="vertical" gap="SP3" width="100%">
         {body}
       </Box>
     );

package/src/components/SetupWidget/SetupWidgetHeader.tsx

@@ -31,16 +31,22 @@ export const SetupWidgetHeader = ({
   });
 
   if (isMobile) {
+    // Mobile (per Figma): the "X/Y" ratio sits inline to the left of the bar
+    // (no "completed" word) to save vertical space. The ratio is just numbers,
+    // so it needs no translation.
+    const ratio = `${completedCount}/${totalCount}`;
     return (
-      <Box direction="vertical" gap="SP2">
+      <Box direction="vertical" gap="SP3" width="100%">
         <Heading dataHook="setup-widget-title" size="large">
           {resolvedTitle}
         </Heading>
-        <Text dataHook="setup-widget-progress" size="small" secondary>
-          {ratioLabel}
-        </Text>
-        <Box width="100%">
-          <LinearProgressBar skin="standard" value={progressPercentage} />
+        <Box width="100%" verticalAlign="middle" gap="SP2">
+          <Text dataHook="setup-widget-progress" size="small" secondary>
+            {ratio}
+          </Text>
+          <Box flexGrow={1}>
+            <LinearProgressBar skin="standard" value={progressPercentage} />
+          </Box>
         </Box>
       </Box>
     );

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard1867398531";
+var _namespace_ = "SkeletonCard3144351190";
 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":"SkeletonCard1867398531__root","headerLoading":"SkeletonCard1867398531__headerLoading"};
+export var classes = {"root":"SkeletonCard3144351190__root","headerLoading":"SkeletonCard3144351190__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/Table/TableCompat.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { CollectionState, FiltersMap } from '@wix/bex-core';
-import { TableV2 } from '../..';
+import { TableV2 } from './TableV2';
 import { TableState } from '../../state';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CollectionTableBaseProps } from '../CollectionTable';

package/src/components/TableGridSwitch/TableGridSwitch.tsx

@@ -12,7 +12,7 @@ import type {
 } from '../CollectionSectionHeader';
 import { TableSections } from '../TableSections';
 import { GridBasePropsWithoutPreset } from '../Grid/Grid';
-import { TableProps } from '..';
+import type { TableProps } from '..';
 import { LayoutSwitch } from '../LayoutSwitch';
 
 export interface TableGridSwitchBaseProps<T, F extends FiltersMap>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter1604621513";
+var _namespace_ = "TabsFilter128028699";
 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":"TabsFilter1604621513__root","title":"TabsFilter1604621513__title"};
+export var classes = {"root":"TabsFilter128028699__root","title":"TabsFilter128028699__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

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

package/src/components/TagsAssignButton/TagsAssignButton.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useRef } from 'react';
 import { Box, Button } from '@wix/design-system';
 import { TagSmall } from '@wix/wix-ui-icons-common';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
-import { useWixPatternsContainer } from '../..';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { BulkAssignTagsPopover } from '../Tags/BulkAssignTagsPopover';
 import { DisabledTooltip } from '../DisabledTooltip';
 import { observer } from 'mobx-react-lite';

package/src/components/ToolbarCollection/ToolbarCollection.tsx

@@ -6,7 +6,11 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import { CollectionToolbarProps, FilterElement, TabsFilterProps } from '../..';
+import type {
+  CollectionToolbarProps,
+  FilterElement,
+  TabsFilterProps,
+} from '../..';
 import { ComputedQuery, FiltersMap } from '@wix/bex-core';
 import { ToolbarCollectionState } from '../../state';
 import {

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

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

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

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

package/src/components/ToolbarTitle/ToolbarTitle.tsx

@@ -9,7 +9,8 @@ import {
   TextButton,
 } from '@wix/design-system';
 import React, { ReactNode } from 'react';
-import { FiltersMap, useWixPatternsContainer } from '../..';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import type { FiltersMap } from '@wix/bex-core';
 import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 import { withoutDefaults } from '@wix/bex-core';
 import { cairoLearnMore } from '@wix/bex-utils/@wix/bi-logger-os-data/v2';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common2904124303";
+var _namespace_ = "common1841882770";
 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":"common2904124303__root","column":"common2904124303__column","fullHeight":"common2904124303__fullHeight"};
+export var classes = {"root":"common1841882770__root","column":"common1841882770__column","fullHeight":"common1841882770__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/fieldsSourceProvider.ts

@@ -0,0 +1,5 @@
+import type { ToolbarCollectionState } from '../state';
+
+export interface FieldsSourceProvider {
+  setOnTable(toolbar: ToolbarCollectionState<any, any>): void;
+}

package/src/hooks/useBuildOption.ts

@@ -7,14 +7,21 @@ import { ListItem } from './listItem';
 import { useCallback, useMemo } from 'react';
 import { DropdownLayoutOption } from '@wix/design-system/dist/types/DropdownLayout';
 
+export interface BuildOptionState {
+  disabled?: boolean;
+  disabledDescription?: string;
+}
+
 export function useBuildOption<V>({
   filter,
   checkbox,
   renderItem,
+  getOptionState,
 }: {
   filter: ArrayField<V>;
   renderItem?: (item: V, index: number) => ListItem;
   checkbox?: boolean;
+  getOptionState?: (key: string) => BuildOptionState;
 }) {
   return useCallback(
     (keyedItem: KeyedItem<V>, index: number) => {
@@ -31,6 +38,7 @@ export function useBuildOption<V>({
           title: filter.itemName(item),
           label: title,
           ...option,
+          ...getOptionState?.(key),
         }),
         {
           sectionId: option?.sectionId,
@@ -38,7 +46,7 @@ export function useBuildOption<V>({
         },
       );
     },
-    [renderItem, checkbox],
+    [renderItem, checkbox, getOptionState],
   );
 }
 

package/src/hooks/useCollectionOptions.tsx

@@ -6,6 +6,7 @@ import {
   KeyedItemOption,
   MultiSelectCheckboxFilterBaseOption,
 } from '../components/MultiSelectCheckboxFilterBase';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 interface UseCollectionOptionsProps<V, F extends FiltersMap> {
   collection: CollectionState<V, F>;
@@ -20,10 +21,22 @@ export function useCollectionOptions<V, F extends FiltersMap>({
   renderItem,
   filter,
 }: UseCollectionOptionsProps<V, F>) {
+  const { translate } = useWixPatternsContainer();
+  const { dropdownSelect } = dropdownCollectionFilterState;
+
   const buildOption = useBuildOption<V>({
     filter,
     renderItem,
     checkbox: true,
+    getOptionState: (key) =>
+      dropdownSelect.canToggle(key)
+        ? {}
+        : {
+            disabled: true,
+            disabledDescription: translate(
+              'cairo.picker.itemsSelected.maxSelected.tooltip',
+            ),
+          },
   });
 
   const {

package/src/hooks/useEditableTableCollection.ts

@@ -15,7 +15,6 @@ import {
   EditableTableMutationHandlers,
 } from '../state/EditableTable';
 import type { CellType } from '../state/EditableTable/types';
-import type { FieldActions } from '../types/SchemaConfig';
 import { useOptionalCachedState } from './useOptionalCachedState';
 
 export type EditableTableCollectionConfig<
@@ -24,8 +23,6 @@ export type EditableTableCollectionConfig<
 > = CollectionConfigWithConditionals<T, F> & {
   permissions?: EditableTablePermissions;
   mutations: EditableTableMutationHandlers<T>;
-  fieldActions?: FieldActions;
-  refresh?: () => Promise<void>;
   optimisticActionParams?: Partial<CollectionOptimisticActionsBaseParams<T, F>>;
   /**
    * Additional cell types to register alongside the built-in ones.
@@ -54,8 +51,6 @@ export const useEditableTableCollection: EditableTableCollection = <
       container,
       permissions: config.permissions,
       mutations: config.mutations,
-      fieldActions: config.fieldActions,
-      refresh: config.refresh,
       extraCellTypes: config.extraCellTypes,
       createOptimisticActions: (collection) =>
         createOptimisticActions(collection, config.optimisticActionParams),

package/src/index.ts

@@ -1,4 +1,7 @@
 export * from './components/Table';
+export { tableSchemaSource } from './components/SchemaSource';
+export type { TableSchemaSource } from './components/SchemaSource';
+export type { FieldsSourceProvider } from './components/fieldsSourceProvider';
 export * from './components/PaginationTable';
 export * from './components/CollectionListItem';
 export * from './components/PageWrapper/PageWrapper';
@@ -169,6 +172,7 @@ export { NestedTableDragAndDrop } from './components/NestedTableDragAndDrop/Nest
 export { DragAndDropSubmit, IndexedItem } from './components/DragAndDrop';
 
 export { DataExtension } from './components/DataExtension';
+export { dataExtensionTableSource } from './components/DataExtension';
 export type {
   SchemaConfig,
   Field,

package/src/model/tableColumn.ts

@@ -1,5 +1,5 @@
 import type { TableColumn as TableColumnWSR } from '@wix/design-system';
-import type { KeyedItem, SortMode, SortOrder } from '@wix/bex-core';
+import type { Field, KeyedItem, SortMode, SortOrder } from '@wix/bex-core';
 import { CSSProperties, ReactNode } from 'react';
 import type { FieldType } from '../utils/fieldTypePrefixIcons';
 import type { ValidationRule } from '../state/EditableTable/types';
@@ -189,6 +189,8 @@ export interface Column {
    */
   defaultHidden?: boolean;
   dataExtension?: { id: string; editable: boolean; isPii?: boolean };
+  /** The source field this column was built from; used to resolve manage actions. */
+  field?: Field;
   /**
    * Whether the field contains personally identifiable information.
    * @external