@wix/patterns 1.422.0 → 1.424.0

package/src/components/DataExtension/DataExtension.ts

@@ -1,20 +1,16 @@
 import {
   CollectionPageState,
   DataExtensionOverrides,
+  DataExtensionState,
   FiltersMap,
   WixPatternsContainer,
 } from '@wix/bex-core';
 import { ToolbarCollectionState } from '../../state';
-import { CustomFieldModal } from '../CustomFieldModal';
-import { CustomColumnsFull } from '../CustomColumns';
-import { ArchiveFieldModal } from '../CustomFieldsPanel/ArchiveFieldModal';
-import { CustomColumnsAddCustomFieldCTAButton } from '../CustomFieldsPanel/CustomColumnsAddCustomFieldCTAButton';
-import { CustomColumnsEditCustomFieldCTAButton } from '../CustomFieldsPanel/CustomColumnsEditCustomFieldCTAButton';
-import { ArchivedItemsCTAButton } from '../ArchivedItemsPanel/ArchivedItemsCTAButton';
-import { CollectionDataExtensionState } from './CollectionDataExtensionState';
-import { ReactElement } from 'react';
-import { FileCardList } from '../FileCard/FileCardList';
 import { CustomFieldsCollectionPanelEntry } from '../CustomFieldsPanel/CustomFieldsCollectionPanelEntry';
+import { dataExtensionFieldsSourceFrom } from './dataExtensionFieldsSource';
+import { dataExtensionRendering } from './dataExtensionRendering';
+import { CollectionFieldsSourceState } from '../../state/CollectionFieldsSourceState';
+import { ReactElement } from 'react';
 import { MoreActionsItem } from '../MoreActions';
 import { manageCustomFieldsPageAction } from './manageCustomFieldsPageAction';
 
@@ -23,13 +19,6 @@ export type DataExtensionObjectType = {
     toolbar: ToolbarCollectionState<T, F>,
     overrides?: DataExtensionProps,
   ) => void;
-  CustomFieldModal: typeof CustomFieldModal;
-  ArchiveFieldModal: typeof ArchiveFieldModal;
-  FileCardList: typeof FileCardList;
-  CustomColumns: typeof CustomColumnsFull;
-  CustomColumnsAddCustomFieldCTAButton: typeof CustomColumnsAddCustomFieldCTAButton;
-  CustomColumnsEditCustomFieldCTAButton: typeof CustomColumnsEditCustomFieldCTAButton;
-  CustomColumnsArchivedItemsCTAButton: typeof ArchivedItemsCTAButton;
   syncTableCollectionProps: (state: ToolbarCollectionState<any, any>) => void;
   manageCustomFieldsPageAction: (params: {
     pageState: CollectionPageState;
@@ -52,23 +41,39 @@ export type DataExtensionElement = ReactElement<
 export type DataExtensionType = typeof DataExtension;
 
 DataExtension.setDataExtensionOnTable = function (toolbar, overrides) {
-  toolbar.collectionDataExtension ??= new CollectionDataExtensionState({
-    toolbar,
+  if (toolbar.collectionFieldsSource) {
+    return;
+  }
+
+  const dataExtension = new DataExtensionState({
     container: toolbar.container,
-    DataExtension,
-    props: overrides,
-    ...overrides,
+    fqdn: toolbar.collection.fqdn ?? {
+      product: toolbar.collection.queryName,
+    },
+    closeSidePanel: toolbar.closeSidePanel,
+    disableUserDefinedWriting: overrides?.disableUserDefinedWriting,
+    filterable: overrides?.filterable,
+    containsPii: overrides?.containsPii,
+    defaultPermissions: overrides?.defaultPermissions,
+    enableArchive: overrides?.enableArchive,
+  });
+
+  const fieldsSource = dataExtensionFieldsSourceFrom({
+    dataExtension,
+    reportBi: toolbar.reportBi,
+    toExtendedFields: toolbar.collection.toExtendedFields,
+  });
+
+  CollectionFieldsSourceState.setOnTable(toolbar, {
+    fieldsSource,
+    ...dataExtensionRendering({
+      dataExtension,
+      toolbar,
+      DataExtension,
+      props: overrides,
+    }),
   });
 };
-DataExtension.FileCardList = FileCardList;
-DataExtension.CustomFieldModal = CustomFieldModal;
-DataExtension.ArchiveFieldModal = ArchiveFieldModal;
-DataExtension.CustomColumns = CustomColumnsFull;
-DataExtension.CustomColumnsAddCustomFieldCTAButton =
-  CustomColumnsAddCustomFieldCTAButton;
-DataExtension.CustomColumnsEditCustomFieldCTAButton =
-  CustomColumnsEditCustomFieldCTAButton;
-DataExtension.CustomColumnsArchivedItemsCTAButton = ArchivedItemsCTAButton;
 DataExtension.syncTableCollectionProps = (
   state: ToolbarCollectionState<any>,
 ) => {

package/src/components/DataExtension/dataExtensionArchive.ts

@@ -0,0 +1,39 @@
+import type { DataExtensionState, FieldArchive, ReportBI } from '@wix/bex-core';
+
+export interface DataExtensionArchiveParams {
+  dataExtension: DataExtensionState;
+  reportBi: ReportBI;
+}
+
+/**
+ * Adapts DataExtensionState to the source-neutral FieldArchive contract. Used by
+ * the FieldsSource adapter and the archive-field modal.
+ */
+export const dataExtensionArchive = ({
+  dataExtension,
+  reportBi,
+}: DataExtensionArchiveParams): FieldArchive => ({
+  get items() {
+    return dataExtension.archivedItems.map((a) => ({
+      id: a.id,
+      label: a.label,
+      isPii: a.isPii,
+    }));
+  },
+  get shouldDisplay() {
+    return dataExtension.shouldDisplayArchive ?? false;
+  },
+  get isOpen() {
+    return dataExtension.isArchivedPanelOpen;
+  },
+  openPanel: () => dataExtension.openArchivedPanel(),
+  closePanel: () => dataExtension.closeArchivedPanel(),
+  archiveField: async (fieldId, origin) => {
+    await dataExtension.archiveField({ id: fieldId, origin, reportBi });
+  },
+  restoreField: async (fieldId, origin) => {
+    await dataExtension.restoreField({ id: fieldId, origin, reportBi });
+  },
+  fieldName: (fieldId) =>
+    dataExtension.extractFieldValuesFromSchema(fieldId)?.name ?? '',
+});

package/src/components/DataExtension/dataExtensionFieldActions.ts

@@ -0,0 +1,80 @@
+import type { DataExtensionState, CustomFieldOrigin } from '@wix/bex-core';
+import type {
+  CustomFieldsPanelState,
+  FieldActionsMenuBuilder,
+} from '../../state/CustomFields/CustomFieldsPanelState';
+import {
+  buildFieldActionsMenu,
+  type FieldActionsBIContext,
+  type FieldActionHandlers,
+  type FieldActionHandlersConfig,
+  type FieldActionKey,
+} from '../FieldActions';
+
+// DataExtension field menu: edit + archive (one group, no divider).
+const DE_MENU_GROUPS: FieldActionKey[][] = [['editField', 'archive']];
+
+/**
+ * DataExtension's per-field management (edit + archive) as neutral callbacks. A
+ * non-editable field returns null (no menu); an editable field with no write
+ * permission returns a handler-less config with a `disabledTooltip` so the menu
+ * shows a disabled trigger. The shared builder sees only the neutral config.
+ */
+export const dataExtensionFieldActionHandlers =
+  (dataExtension: DataExtensionState, panel: CustomFieldsPanelState) =>
+  ({
+    fieldId,
+    origin,
+  }: {
+    fieldId: string;
+    origin: CustomFieldOrigin;
+    location: string;
+  }): FieldActionHandlersConfig | null => {
+    const cf = dataExtension.availableCustomFields.find(
+      (f) => f.id === fieldId,
+    );
+    if (!cf || !cf.editable || dataExtension.disableUserDefinedWriting) {
+      return null;
+    }
+    if (!dataExtension.hasWritePermissions) {
+      return {
+        handlers: {},
+        disabledTooltip: dataExtension.container.translate(
+          'cairo.customFields.writePermission.tooltip',
+        ),
+      };
+    }
+    const handlers: FieldActionHandlers = {
+      editField: () => panel.openCustomFieldModal({ fieldId, origin }),
+      archive: () =>
+        panel.archiveFieldModal?.modal.open({
+          id: fieldId,
+          origin,
+          fieldName: panel.fieldManagement?.getFieldDraft(fieldId)?.name ?? '',
+          archiveEnabled: dataExtension.enableArchive,
+        }),
+    };
+    return { handlers };
+  };
+
+export const createDataExtensionFieldActionsMenu =
+  (dataExtension: DataExtensionState) =>
+  (panel: CustomFieldsPanelState): FieldActionsMenuBuilder => {
+    const handlers = dataExtensionFieldActionHandlers(dataExtension, panel);
+    return (args) => {
+      const t = panel.container.translate;
+      const bi: FieldActionsBIContext = {
+        reportBi: panel.reportBi,
+        location: args.location,
+        listSize: panel.manageableFields.length,
+      };
+      return buildFieldActionsMenu({
+        fieldId: args.fieldId,
+        config: handlers(args),
+        groups: DE_MENU_GROUPS,
+        translate: t,
+        tooltipContent: t('cairo.custom-columns.more-actions.tooltip'),
+        bi,
+      });
+    };
+  };

package/src/components/DataExtension/dataExtensionFieldManagement.ts

@@ -0,0 +1,176 @@
+import type {
+  CustomField,
+  CustomFieldForm,
+  CustomFieldType,
+  DataExtensionState,
+  FieldDraft,
+  FieldManagement,
+  FieldTypeOption,
+  NonReferenceField,
+  ReportBI,
+  TranslationsKeys,
+} from '@wix/bex-core';
+import { runInAction } from 'mobx';
+
+export const CUSTOM_FIELD_TYPE_TO_PATTERNS: Record<
+  CustomFieldType,
+  NonReferenceField['type']
+> = {
+  shortText: 'SHORT_TEXT',
+  longText: 'LONG_TEXT',
+  url: 'URL',
+  date: 'DATE',
+  dateTime: 'DATETIME',
+  integer: 'NUMBER',
+  decimal: 'NUMBER',
+  checkbox: 'BOOLEAN',
+  dropdown: 'SHORT_TEXT',
+  multiSelect: 'ARRAY',
+  files: 'DOCUMENT',
+};
+
+export const toPatternsFieldType = (
+  type: CustomFieldType,
+): NonReferenceField['type'] =>
+  CUSTOM_FIELD_TYPE_TO_PATTERNS[type] ?? 'UNKNOWN';
+
+const isCustomFieldType = (type: string): type is CustomFieldType =>
+  type in CUSTOM_FIELD_TYPE_TO_PATTERNS;
+
+const CREATABLE_TYPES: readonly {
+  id: CustomFieldType;
+  labelKey: TranslationsKeys;
+  namePlaceholderKey: TranslationsKeys;
+}[] = [
+  {
+    id: 'shortText',
+    labelKey: 'cairo.customFields.fieldType.shortText',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.shortText.Name.placeholder',
+  },
+  {
+    id: 'longText',
+    labelKey: 'cairo.customFields.fieldType.longText',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.longText.Name.placeholder',
+  },
+  {
+    id: 'date',
+    labelKey: 'cairo.customFields.fieldType.date',
+    namePlaceholderKey: 'cairo.customFields.fieldType.date.Name.placeholder',
+  },
+  {
+    id: 'dateTime',
+    labelKey: 'cairo.customFields.fieldType.dateAndTime',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.dateAndTime.Name.placeholder',
+  },
+  {
+    id: 'integer',
+    labelKey: 'cairo.customFields.fieldType.numberInteger',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.numberInteger.Name.placeholder',
+  },
+  {
+    id: 'decimal',
+    labelKey: 'cairo.customFields.fieldType.numberDecimal',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.numberDecimal.Name.placeholder',
+  },
+  {
+    id: 'checkbox',
+    labelKey: 'cairo.customFields.fieldType.checkbox',
+    namePlaceholderKey:
+      'cairo.customFields.fieldType.checkbox.Name.placeholder',
+  },
+  {
+    id: 'url',
+    labelKey: 'cairo.customFields.fieldType.url',
+    namePlaceholderKey: 'cairo.customFields.placeholder.url',
+  },
+];
+
+export interface DataExtensionFieldManagementParams {
+  dataExtension: DataExtensionState;
+  reportBi: ReportBI;
+}
+
+export const dataExtensionFieldManagement = ({
+  dataExtension,
+  reportBi,
+}: DataExtensionFieldManagementParams): FieldManagement => {
+  const customFieldFor = (id: string): CustomField | undefined =>
+    dataExtension.availableCustomFields.find((f) => f.id === id);
+
+  const toCustomFieldForm = (draft: FieldDraft): CustomFieldForm => ({
+    ...draft,
+    type: draft.type && isCustomFieldType(draft.type) ? draft.type : undefined,
+  });
+
+  const upsertField = async (draft: FieldDraft) => {
+    const { dataExtensionSchema } =
+      await dataExtension.dataExtensionService.addCustomField({
+        form: toCustomFieldForm(draft),
+        schema: dataExtension.userSchema,
+        fqdn: dataExtension.fqdnString,
+        filterable: dataExtension.filterable,
+      });
+
+    runInAction(() => {
+      if (dataExtensionSchema) {
+        dataExtension._upsertSchema(dataExtensionSchema);
+      }
+    });
+  };
+
+  return {
+    get canAddFields() {
+      return !dataExtension.disableUserDefinedWriting;
+    },
+    get addFieldDisabled() {
+      return dataExtension.disableAddCustomField;
+    },
+    get addFieldDisabledHint() {
+      return dataExtension.disableAddCustomFieldContent || undefined;
+    },
+    canEditField: (field) => customFieldFor(field.id)?.editable ?? false,
+    deleteField: async (fieldId, origin) => {
+      await dataExtension.deleteField({
+        id: fieldId,
+        origin,
+        reportBi,
+      });
+    },
+
+    // Lazy: translate on access (after the container's i18n has loaded), not at
+    // construction — the source is built before `load()` runs initTask, so an
+    // eager map would freeze the raw translation keys.
+    get creatableFieldTypes(): FieldTypeOption[] {
+      const t = dataExtension.container.translate;
+      return CREATABLE_TYPES.map((ft) => ({
+        id: ft.id,
+        label: t(ft.labelKey),
+        namePlaceholder: t(ft.namePlaceholderKey),
+        patternsType: toPatternsFieldType(ft.id),
+      }));
+    },
+    get existingFieldKeys() {
+      // All user fields, not just the available ones: duplicate-key detection
+      // must also catch keys of fields that exist but aren't currently shown.
+      return dataExtension.allUserCustomFields.map((f) => f.id);
+    },
+    get maxReached() {
+      return dataExtension.isReachedMaxCustomFields;
+    },
+    get permissions() {
+      return dataExtension.defaultPermissions;
+    },
+    get supportsPii() {
+      return dataExtension.containsPii;
+    },
+    addField: upsertField,
+    editField: (_fieldId, draft) => upsertField(draft),
+    getFieldDraft: (fieldId) =>
+      dataExtension.extractFieldValuesFromSchema(fieldId),
+  };
+};

package/src/components/DataExtension/dataExtensionFieldsSource.ts

@@ -0,0 +1,117 @@
+import type {
+  FieldsSource,
+  Field,
+  CustomField,
+  CustomFieldType,
+  DataExtensionState,
+  ExtendedFields,
+  ReportBI,
+} from '@wix/bex-core';
+import { prefixFieldWithNamespace } from '../../state/simplifyExtendedColumns';
+import {
+  dataExtensionFieldManagement,
+  toPatternsFieldType,
+} from './dataExtensionFieldManagement';
+import { dataExtensionArchive } from './dataExtensionArchive';
+
+const FILTERABLE_TYPES: CustomFieldType[] = [
+  'shortText',
+  'longText',
+  'url',
+  'date',
+  'dateTime',
+  'integer',
+  'decimal',
+  'checkbox',
+];
+
+export interface DataExtensionFieldsSourceParams {
+  dataExtension: DataExtensionState;
+  reportBi: ReportBI;
+  toExtendedFields?: (row: any) => ExtendedFields | undefined | null;
+}
+
+export const dataExtensionFieldsSourceFrom = (
+  params: DataExtensionFieldsSourceParams,
+): FieldsSource => {
+  const d = params.dataExtension;
+
+  const toField = (cf: CustomField): Field => ({
+    id: cf.id,
+    displayName: cf.label ?? cf.id,
+    type: toPatternsFieldType(cf.type),
+    isPii: cf.isPii,
+    capabilities: {
+      sortable: cf.filterable ?? false,
+      supportedQueryOperators: [],
+    },
+  });
+
+  const customFieldFor = (id: string): CustomField | undefined =>
+    d.availableCustomFields.find((f) => f.id === id);
+
+  // Field carries no namespace; recover it from the source CustomField so the
+  // namespace prefix stays inside the DataExtension adapter.
+  const fieldPath = (field: Field): string =>
+    prefixFieldWithNamespace(
+      field.id,
+      customFieldFor(field.id)?.namespace ?? '',
+    );
+
+  const source: FieldsSource = {
+    load: async () => {
+      d.container.initTask.runOnce();
+      await Promise.all([
+        d.container.initTask.status.promise,
+        d.fetchSchemas(),
+      ]);
+    },
+
+    get fields() {
+      return d.availableCustomFields.map(toField);
+    },
+    get filterableFields() {
+      if (!d.filterable) {
+        return [];
+      }
+      return d.availableCustomFields
+        .filter((f) => f.filterable && FILTERABLE_TYPES.includes(f.type))
+        .map(toField);
+    },
+    get manageableFields() {
+      return d.availableUserCustomFields.map(toField);
+    },
+    columnIdForField: fieldPath,
+    queryFieldId: fieldPath,
+    getCellValue: (row, field) =>
+      params.toExtendedFields?.(row)?.namespaces?.[
+        customFieldFor(field.id)?.namespace ?? ''
+      ]?.[field.id],
+
+    fieldManagement: dataExtensionFieldManagement({
+      dataExtension: d,
+      reportBi: params.reportBi,
+    }),
+
+    groups: {
+      get all() {
+        return d.allNamespaces;
+      },
+      fieldsForGroup: (group) =>
+        d.availableCustomFields
+          .filter((f) => f.namespace === group)
+          .map(toField),
+    },
+  };
+
+  // Always provide archive — NOT gated on enableArchive. It backs the remove
+  // confirm modal, which must open whether or not archive is enabled (the modal
+  // shows "cannot be restored" when it isn't). The archived-items panel stays
+  // hidden when archive is off via `shouldDisplayArchive` (= enableArchive && …).
+  source.archive = dataExtensionArchive({
+    dataExtension: d,
+    reportBi: params.reportBi,
+  });
+
+  return source;
+};

package/src/components/DataExtension/dataExtensionRendering.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { STRING_OPERATORS } from '@wix/bex-core';
+import type { DataExtensionState } from '@wix/bex-core';
+import type { FieldsSourceRendering } from '../../state/CollectionFieldsSourceState';
+import type { Column } from '../../model';
+import type { ToolbarCollectionState } from '../../state';
+import type { DataExtensionType, DataExtensionProps } from './DataExtension';
+import { toFieldType } from '../../utils/fieldTypePrefixIcons';
+import { FileCardList } from '../FileCard/FileCardList';
+import {
+  createDataExtensionFieldActionsMenu,
+  dataExtensionFieldActionHandlers,
+} from './dataExtensionFieldActions';
+import { FieldManagementModals } from '../CustomFieldsPanel/FieldManagementModals';
+import { CustomColumnsFull } from '../CustomColumns/CustomColumnsFull';
+import { CollectionToolbarFilters } from '../CollectionToolbarFilters';
+
+/**
+ * Builds the DataExtension-specific config the spine needs, shaped as a
+ * FieldsSourceRendering. The spine builds the field-management panel from this;
+ * pairs with the DataExtension FieldsSource (the data).
+ */
+export const dataExtensionRendering = ({
+  dataExtension,
+  toolbar,
+  DataExtension,
+  props,
+}: {
+  dataExtension: DataExtensionState;
+  toolbar: ToolbarCollectionState<any, any>;
+  DataExtension: DataExtensionType;
+  props?: DataExtensionProps;
+}): FieldsSourceRendering => {
+  return {
+    columnOverrides: (field, { firstBuild }): Partial<Column> => {
+      const cf = dataExtension.availableCustomFields.find(
+        (f) => f.id === field.id,
+      );
+      const overrides: Partial<Column> = {
+        // Derive the icon from the source type, not the neutral type. The neutral
+        // type collapses distinct source types (e.g. dropdown into short text),
+        // which would change the icon.
+        fieldType: cf?.type ? toFieldType(cf.type) : undefined,
+        dataExtension: cf,
+        defaultHidden: firstBuild || cf?.owner !== 'user',
+      };
+      if (field.type === 'DOCUMENT') {
+        overrides.render = (row) => {
+          const value =
+            toolbar.collection.toExtendedFields?.(row)?.namespaces?.[
+              cf?.namespace ?? ''
+            ]?.[field.id];
+          if (!value) {
+            return null;
+          }
+          const files = Array.isArray(value) ? value : [value];
+          return <FileCardList files={files} />;
+        };
+      }
+      return overrides;
+    },
+    filterConfig: {
+      textOperators: STRING_OPERATORS,
+      numberIsDecimal: (field) =>
+        dataExtension.availableCustomFields.find((f) => f.id === field.id)
+          ?.type === 'decimal',
+      // Derive the icon from the source type, not the neutral type (which would
+      // collapse distinct source types) — matching the column icon.
+      iconType: (field) => {
+        const cf = dataExtension.availableCustomFields.find(
+          (f) => f.id === field.id,
+        );
+        return cf?.type ? toFieldType(cf.type) : toFieldType(field.type);
+      },
+    },
+    createFieldActionsMenu: createDataExtensionFieldActionsMenu(dataExtension),
+    createFieldActionHandlers: (panel) =>
+      dataExtensionFieldActionHandlers(dataExtension, panel),
+    featuredPageActions: [DataExtension.manageCustomFieldsPageAction],
+    props,
+    components: {
+      FieldManagementModals,
+      CustomColumns: CustomColumnsFull,
+      CollectionToolbarFilters,
+    },
+  };
+};

package/src/components/DataExtension/dataExtensionTableSource.ts

@@ -0,0 +1,18 @@
+import type { FieldsSourceProvider } from '../fieldsSourceProvider';
+import { DataExtension, type DataExtensionProps } from './DataExtension';
+
+/**
+ * Wraps DataExtension as a table field source, so consumers attach it the same
+ * way as a schema source: `<Table fieldsSource={dataExtensionTableSource(...)} />`.
+ * Unlike a schema source, DataExtension extends the consumer's own collection
+ * rather than owning the data, so there is no `collectionConfig` to spread —
+ * the consumer still drives data via their own collection hook.
+ */
+export const dataExtensionTableSource = (
+  overrides?: DataExtensionProps,
+): FieldsSourceProvider => ({
+  setOnTable(toolbar) {
+    DataExtension.setDataExtensionOnTable(toolbar, overrides);
+    DataExtension.syncTableCollectionProps(toolbar);
+  },
+});

package/src/components/DataExtension/index.ts

@@ -1,2 +1,2 @@
 export * from './DataExtension';
-export * from './CollectionDataExtensionState';
+export * from './dataExtensionTableSource';

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

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

package/src/components/DropdownFilter/CollectionDropdownFilter.uni.driver.ts

@@ -155,6 +155,19 @@ export const CollectionDropdownFilterUniDriver = <
     );
   };
 
+  const isOptionDisabled = async (id: string) => {
+    const option = await optionsDriver.dropdownLayoutDriver.optionById(id);
+    return option.isDisabled();
+  };
+
+  const hasOptionDisabledTooltip = async (id: string) => {
+    const option = await optionsDriver.dropdownLayoutDriver.optionById(id);
+    return option
+      .element()
+      .$('[data-hook="list-item-select-disabled-tooltip"]')
+      .exists();
+  };
+
   return {
     ...optionsDriver,
     waitForOptions,
@@ -175,6 +188,8 @@ export const CollectionDropdownFilterUniDriver = <
     initialLoaderExists,
     infiniteScrollLoaderExists,
     hasDivider,
+    isOptionDisabled,
+    hasOptionDisabledTooltip,
     existInFilter,
     _getDropdownLayoutBase: getDropdownLayoutBase,
     scrollDown: async () => {

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell1651312747";
+var _namespace_ = "EditableCell2214069969";
 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":"EditableCell1651312747__root","validationIndicator":"EditableCell1651312747__validationIndicator"};
+export var classes = {"root":"EditableCell2214069969__root","validationIndicator":"EditableCell2214069969__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};