@wix/patterns 1.385.0 → 1.388.0

package/src/components/CmsFieldManagement/formFields/FieldTypeSelect.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Dropdown, FormField } from '@wix/design-system';
+import type { SelectableFieldTypes } from '../types';
+
+// TODO: confirm selectable subset vs cms-web
+const SELECTABLE_TYPES: SelectableFieldTypes[] = [
+  'SHORT_TEXT',
+  'NUMBER',
+  'BOOLEAN',
+  'DATE',
+];
+
+// TODO: replace with translation keys cairo.cms.field.type.option.*
+const FIELD_TYPE_LABELS: Record<string, string> = {
+  SHORT_TEXT: 'Short Text',
+  NUMBER: 'Number',
+  BOOLEAN: 'True/False',
+  DATE: 'Date',
+};
+
+const OPTIONS = SELECTABLE_TYPES.map((t) => ({
+  id: t,
+  value: FIELD_TYPE_LABELS[t] ?? t,
+}));
+
+export interface FieldTypeSelectProps {
+  label: string;
+  value: SelectableFieldTypes | undefined;
+  onChange: (v: SelectableFieldTypes) => void;
+  disabled?: boolean;
+  error?: string;
+}
+
+export const FieldTypeSelect = ({
+  label,
+  value,
+  onChange,
+  disabled,
+  error,
+}: FieldTypeSelectProps) => (
+  <FormField
+    required
+    label={label}
+    status={error ? 'error' : undefined}
+    statusMessage={error}
+  >
+    <Dropdown
+      popoverProps={{ zIndex: 10000, appendTo: 'window' }}
+      options={OPTIONS}
+      selectedId={value}
+      onSelect={(option) => onChange(option.id as SelectableFieldTypes)}
+      disabled={disabled}
+    />
+  </FormField>
+);

package/src/components/CmsFieldManagement/formFields/RequiredToggle.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Checkbox } from '@wix/design-system';
+
+export interface RequiredToggleProps {
+  label: string;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+}
+
+export const RequiredToggle = ({
+  label,
+  checked,
+  onChange,
+}: RequiredToggleProps) => (
+  <Checkbox checked={checked} onChange={() => onChange(!checked)}>
+    {label}
+  </Checkbox>
+);

package/src/components/CmsFieldManagement/index.ts

@@ -0,0 +1 @@
+export { CmsFormState } from './CmsFormState';

package/src/components/CmsFieldManagement/toFieldSpec.ts

@@ -0,0 +1,37 @@
+import type {
+  FieldSpec,
+  NonReferenceField,
+  StringLengthRange,
+} from '../../types/SchemaConfig';
+import type { FieldProperties, FieldRules } from './types';
+
+export const toFieldSpec = (
+  properties: FieldProperties,
+  rules: FieldRules,
+): FieldSpec => {
+  const { type, name, isPii, helpText } = properties;
+  const { validationRules } = rules;
+  const trimmedHelpText = helpText.trim();
+
+  const hasRules =
+    validationRules.required !== undefined ||
+    validationRules.charactersLimit !== undefined;
+
+  const validation: NonReferenceField['validation'] = hasRules
+    ? {
+        required: Boolean(validationRules.required),
+        ...(validationRules.charactersLimit !== undefined && {
+          stringLengthRange:
+            validationRules.charactersLimit as StringLengthRange,
+        }),
+      }
+    : undefined;
+
+  return {
+    type,
+    displayName: name.trim(),
+    ...(isPii && { isPii: true }),
+    ...(trimmedHelpText && { helpText: trimmedHelpText }),
+    ...(validation && { validation }),
+  };
+};

package/src/components/CmsFieldManagement/types.ts

@@ -0,0 +1,21 @@
+export type SelectableFieldTypes = 'SHORT_TEXT' | 'NUMBER' | 'BOOLEAN' | 'DATE';
+
+export type ValidationRule = 'required' | 'charactersLimit';
+
+export interface FieldProperties {
+  type: SelectableFieldTypes;
+  name: string;
+  isPii: boolean;
+  helpText: string;
+}
+
+export interface FieldRules {
+  validationRules: Partial<Record<ValidationRule, unknown>>;
+}
+
+// `type` is optional here because it starts undefined until the user picks one,
+// while all other fields are always present. Keeping `type` required on FieldProperties
+// preserves the stricter type everywhere else.
+export type FieldPropertiesState = Omit<FieldProperties, 'type'> & {
+  type?: FieldProperties['type'];
+};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse1113190780";
+var _namespace_ = "Collapse3645939412";
 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":"Collapse1113190780__root","exit":"Collapse1113190780__exit"};
+export var classes = {"root":"Collapse3645939412__root","exit":"Collapse3645939412__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader3073258850";
+var _namespace_ = "CollectionSectionHeader1234194784";
 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":"CollectionSectionHeader3073258850__root","summaryIcon":"CollectionSectionHeader3073258850__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader1234194784__root","summaryIcon":"CollectionSectionHeader1234194784__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/CollectionTable/CollectionTableWSRTable.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar3080676970";
+var _namespace_ = "CollectionToolbar157066470";
 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":"CollectionToolbar3080676970__root","left":"CollectionToolbar3080676970__left","right":"CollectionToolbar3080676970__right","fullWidth":"CollectionToolbar3080676970__fullWidth"};
+export var classes = {"root":"CollectionToolbar157066470__root","left":"CollectionToolbar157066470__left","right":"CollectionToolbar157066470__right","fullWidth":"CollectionToolbar157066470__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter2278398807";
+var _namespace_ = "SearchOrCustomFilter3697345475";
 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":"SearchOrCustomFilter2278398807__root","search":"SearchOrCustomFilter2278398807__search","searchMobile":"SearchOrCustomFilter2278398807__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter3697345475__root","search":"SearchOrCustomFilter3697345475__search","searchMobile":"SearchOrCustomFilter3697345475__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

package/src/components/CustomColumnsPanel/ColumnListTableListItem.tsx

@@ -14,6 +14,7 @@ export interface ColumnListTableListItemProps<T, F extends FiltersMap>
   column: Column;
   state: CustomColumnsPanelStateBase<T, F>;
   showDivider?: boolean;
+  fieldActions?: React.ReactNode;
 }
 
 function _ColumnListTableListItem<T, F extends FiltersMap>(
@@ -23,6 +24,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
     column,
     state,
     showDivider,
+    fieldActions,
     domRef,
     dragging,
     dragHandleProps,
@@ -74,7 +76,8 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
     column.isPrimary ||
     column.isSystem ||
     !!column.dataExtension;
-  const hasRightContent = hasIndications || !!dataExtensionsCTA;
+  const hasRightContent =
+    hasIndications || !!dataExtensionsCTA || !!fieldActions;
 
   return (
     <div
@@ -204,6 +207,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
                     <Box gap="SP1" verticalAlign="middle">
                       <FieldIndications column={column} />
                       {dataExtensionsCTA}
+                      {fieldActions}
                     </Box>
                   ),
                   align: 'right' as const,

package/src/components/CustomColumnsPanel/ColumnsList.tsx

@@ -1,7 +1,7 @@
 import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelStateBase';
 import { FiltersMap } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, type ReactNode } from 'react';
 import { Column } from '../../model';
 import { Box } from '@wix/design-system';
 import { addEventListener } from '@wix/bex-core/util';
@@ -9,10 +9,11 @@ import { ColumnListTableListItem } from './ColumnListTableListItem';
 
 export interface ColumnsListProps<T, F extends FiltersMap> {
   state: CustomColumnsPanelStateBase<T, F>;
+  fieldActions?: Record<string, ReactNode>;
 }
 
 function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
-  const { state } = props;
+  const { state, fieldActions } = props;
   const { columnsCollection, dragAndDrop } = state;
   const hasSearchValue = state.searchValue.trim().length > 0;
 
@@ -48,6 +49,7 @@ function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
           state={state}
           column={column}
           showDivider={index < length - 1}
+          fieldActions={fieldActions?.[column.id]}
         />
       );
 

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -1,4 +1,4 @@
-import { Box, SidePanel } from '@wix/design-system';
+import { AddItem, Box, Divider, SidePanel } from '@wix/design-system';
 import React, { useEffect } from 'react';
 import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelStateBase';
 import { FiltersMap } from '@wix/bex-core';
@@ -11,6 +11,7 @@ import { useRafRender } from '../../hooks/useRafRender';
 import { ScrollableContent } from '../ScrollableContent';
 import { PatternsSidePanel } from '../SidePanel/PatternsSidePanel';
 import { useSchemaContext } from '../../providers/SchemaContext';
+import { useSidePanelFieldActions } from './useSidePanelFieldActions';
 
 export interface CustomColumnsPanelProps<T, F extends FiltersMap> {
   state: CustomColumnsPanelStateBase<T, F>;
@@ -26,6 +27,10 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
   const schemaCtx = useSchemaContext();
   const isSchema = !!schemaCtx?.schema;
   const isEditable = !!collectionDataExtension || isSchema;
+  const fieldActions = useSidePanelFieldActions(
+    isEditable ? state.columnsCollection.result.items : [],
+    schemaCtx?.schema?.fieldActions,
+  );
 
   useEffect(() => state.init(), []);
 
@@ -87,7 +92,7 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
                   dataHook="custom-columns"
                 />
               )}
-            <ColumnsList state={state} />
+            <ColumnsList state={state} fieldActions={fieldActions} />
           </>
         )}
       </ScrollableContent>
@@ -95,6 +100,24 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
         ?.CustomColumnsAddCustomFieldCTAButton && (
         <collectionDataExtension.DataExtension.CustomColumnsAddCustomFieldCTAButton />
       )}
+      {schemaCtx?.addField && (
+        <Box direction="vertical" width="100%">
+          <Divider direction="horizontal" />
+          <Box
+            padding="SP4"
+            width="100%"
+            boxSizing="border-box"
+            direction="vertical"
+          >
+            <AddItem
+              dataHook="custom-columns-schema-add-field"
+              onClick={schemaCtx.addField}
+            >
+              {t('cairo.customFields.addCustomField.CTA')}
+            </AddItem>
+          </Box>
+        </Box>
+      )}
     </PatternsSidePanel>
   );
 }

package/src/components/CustomColumnsPanel/useSidePanelFieldActions.tsx

@@ -0,0 +1,69 @@
+import React, { useMemo, type ReactNode } from 'react';
+import type { Column } from '../../model';
+import type { FieldActions } from '../../types/SchemaConfig';
+import {
+  buildFieldActionGroups,
+  HeaderActionsPopover,
+  type FieldActionColumn,
+  type FieldActionHandlers,
+  type FieldActionPermissions,
+} from '../FieldActions';
+
+const SIDE_PANEL_ACTION_GROUPS: Parameters<
+  typeof buildFieldActionGroups
+>[0]['groups'] = [
+  ['editField'],
+  ['makePrimary', 'duplicateField', 'duplicateFieldWithContent'],
+  ['delete'],
+];
+
+function toFieldActionColumn(col: Column): FieldActionColumn & { id: string } {
+  const isText =
+    col.fieldType === 'SHORT_TEXT' || col.fieldType === 'LONG_TEXT';
+  return {
+    id: col.id,
+    isPrimary: col.isPrimary,
+    isSystem: col.isSystem,
+    cellType: isText ? 'text' : col.fieldType,
+  };
+}
+
+export function useSidePanelFieldActions(
+  columns: Column[],
+  fieldActions?: FieldActions,
+  permissions?: FieldActionPermissions,
+): Record<string, ReactNode> {
+  return useMemo(() => {
+    const handlers: FieldActionHandlers = {
+      editField: fieldActions?.editField
+        ? (id) => fieldActions.editField!(id, {})
+        : undefined,
+      makePrimary: (id) => fieldActions?.makePrimary?.(id),
+      duplicateField: fieldActions?.duplicateField,
+      duplicateFieldWithContent: fieldActions?.duplicateField,
+      delete: fieldActions?.deleteField,
+    };
+
+    const result: Record<string, ReactNode> = {};
+
+    for (const col of columns) {
+      const groups = buildFieldActionGroups({
+        column: toFieldActionColumn(col),
+        permissions,
+        handlers,
+        groups: SIDE_PANEL_ACTION_GROUPS,
+      });
+
+      if (groups.length > 0) {
+        result[col.id] = (
+          <HeaderActionsPopover
+            actions={groups}
+            dataHook={`side-panel-field-actions-${col.id}`}
+          />
+        );
+      }
+    }
+
+    return result;
+  }, [columns, fieldActions, permissions]);
+}

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell1155625107";
+var _namespace_ = "EditableCell3602162071";
 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":"EditableCell1155625107__root","validationIndicator":"EditableCell1155625107__validationIndicator"};
+export var classes = {"root":"EditableCell3602162071__root","validationIndicator":"EditableCell3602162071__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.tsx

@@ -76,14 +76,11 @@ function _EditableCell<T, F extends FiltersMap>({
     [cellInteraction],
   );
 
-  const handleStartEdit = useCallback(
-    () => {
-      if (!cellInteraction.isEditing) {
-        cellInteraction.startEdit(rowKey, columnId);
-      }
-    },
-    [cellInteraction, rowKey, columnId],
-  );
+  const handleStartEdit = useCallback(() => {
+    if (!cellInteraction.isEditing) {
+      cellInteraction.startEdit(rowKey, columnId);
+    }
+  }, [cellInteraction, rowKey, columnId]);
 
   const cellKeyboard = useCellFocusAndEditing({
     state,

package/src/components/EditableTable/EditableColumnHeader.uni.driver.ts

@@ -41,5 +41,15 @@ export function EditableColumnHeaderUniDriver(
     /** Click a menu item by index */
     clickMenuItem: async (index: number) =>
       (await getPopoverMenu()).clickAtChild(index),
+
+    /** Whether the menu item at the given index is disabled */
+    isMenuItemDisabled: async (index: number) => {
+      const popover = await getPopoverMenu();
+      const contentElement = await popover.getContentElement();
+      const item = contentElement
+        .$$('[data-hook="dropdown-layout-options"] > *')
+        .get(index);
+      return (await item.attr('data-option-disabled')) === 'true';
+    },
   };
 }

package/src/components/EditableTable/EditableTable.tsx

@@ -19,14 +19,20 @@ import { useMouseSweepSelection } from './useMouseSweepSelection';
 import { AddItemRow } from './AddItemRow';
 import { useAddRow } from './useAddRow';
 import type { TableColumn } from '../../model';
-import { useBuiltInHeaderActions } from './useBuiltInHeaderActions';
+import { useHeaderActions } from './useHeaderActions';
 
 export interface EditableTableProps<
   T,
   F extends FiltersMap = OptionalFiltersMap,
 > extends Omit<
     TableVirtualProps<T, F>,
-    'columns' | 'state' | 'onRowClick' | 'forceResize' | 'horizontalScroll'
+    | 'columns'
+    | 'state'
+    | 'onRowClick'
+    | 'forceResize'
+    | 'horizontalScroll'
+    | 'showSelection'
+    | 'showRowNumbers'
   > {
   /** EditableTableState instance, created via useEditableTableCollection */
   state: EditableTableState<T, F>;
@@ -62,7 +68,7 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
   const { onFocus, onBlur } = useClearFocusOnBlur(state.cellInteraction);
   useMouseSweepSelection(state, containerRef);
 
-  const builtInActions = useBuiltInHeaderActions(
+  const builtInActions = useHeaderActions(
     state,
     editableColumns,
     hideHeaderActions,
@@ -105,6 +111,8 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
           columns={tableColumns}
           forceResize
           horizontalScroll
+          showSelection
+          showRowNumbers
         >
           {showAddItemRow && <AddItemRow onAdd={handleAddItem} />}
         </TableVirtual>

package/src/components/EditableTable/HeaderActionsPopover.st.css

@@ -1,12 +1,10 @@
 .root {
-  -st-states: menuOpen;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
 
-/* Reveal when the table header cell is hovered or the menu is open */
-:global(th):hover .root,
-.root:menuOpen,
-.root:focus-within {
-  opacity: 1;
-}
+  :global(th):hover .root,
+  .root[data-menu-open="true"],
+  .root:focus-within {
+    opacity: 1;
+  }

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

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