@wix/patterns 1.387.0 → 1.388.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit116111444";
+var _namespace_ = "Edit3198482543";
 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":"Edit116111444__root","numberInput":"Edit116111444__numberInput"};
+export var classes = {"root":"Edit3198482543__root","numberInput":"Edit3198482543__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_ = "View1858866971";
+var _namespace_ = "View1943206141";
 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":"View1858866971__root","textView":"View1858866971__textView"};
+export var classes = {"root":"View1943206141__root","textView":"View1943206141__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_ = "Edit527273855";
+var _namespace_ = "Edit1103264885";
 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":"Edit527273855__root","jsonInput":"Edit527273855__jsonInput"};
+export var classes = {"root":"Edit1103264885__root","jsonInput":"Edit1103264885__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_ = "View2467241104";
+var _namespace_ = "View3210567209";
 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":"View2467241104__root"};
+export var classes = {"root":"View3210567209__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_ = "Edit1946452762";
+var _namespace_ = "Edit1556649707";
 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":"Edit1946452762__root","selectInput":"Edit1946452762__selectInput"};
+export var classes = {"root":"Edit1556649707__root","selectInput":"Edit1556649707__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_ = "Edit444568143";
+var _namespace_ = "Edit4035541426";
 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":"Edit444568143__root","editWrapper":"Edit444568143__editWrapper","inputArea":"Edit444568143__inputArea"};
+export var classes = {"root":"Edit4035541426__root","editWrapper":"Edit4035541426__editWrapper","inputArea":"Edit4035541426__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/Edit.tsx

@@ -6,24 +6,25 @@ import {
 } from '@wix/patterns-fields';
 import type { CellEditProps } from '../../types';
 import type { ValidationRule } from '../../../../state/EditableTable/types';
-import { useCloseOnAncestorScroll } from '../../useCloseOnAncestorScroll';
+import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
 import { st, classes } from './Edit.st.css.js';
 
 function getMaxLength(validation?: ValidationRule[]) {
-  return (
-    validation?.find(
-      (r): r is { type: 'maxLength'; value: number; message: string } =>
-        r.type === 'maxLength',
-    )
+  return validation?.find(
+    (r): r is { type: 'maxLength'; value: number; message: string } =>
+      r.type === 'maxLength',
   )?.value;
 }
 
 function getSpecificValues(validation?: ValidationRule[]) {
-  return (
-    validation?.find(
-      (r): r is { type: 'specificValues'; values: { id: string; value: string }[]; message: string } =>
-        r.type === 'specificValues',
-    )
+  return validation?.find(
+    (
+      r,
+    ): r is {
+      type: 'specificValues';
+      values: { id: string; value: string }[];
+      message: string;
+    } => r.type === 'specificValues',
   )?.values;
 }
 
@@ -77,7 +78,15 @@ const TextEditPlain: React.FC<CellEditProps<string>> = ({
 // Specific values mode — autocomplete with a closed list of options
 const TextEditSpecificValues: React.FC<
   CellEditProps<string> & { options: { id: string; value: string }[] }
-> = ({ value, onChange, onCommit, onCancel, inputRef, editTrigger, options }) => {
+> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  inputRef,
+  editTrigger,
+  options,
+}) => {
   const acHandle = useRef<CellAutoCompleteHandle | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
 
@@ -134,7 +143,9 @@ const TextEditSpecificValues: React.FC<
         value={value || undefined}
         options={options}
         initialSearchText={
-          editTrigger && typeof editTrigger === 'object' && editTrigger.kind === 'type'
+          editTrigger &&
+          typeof editTrigger === 'object' &&
+          editTrigger.kind === 'type'
             ? editTrigger.key
             : undefined
         }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View335321206";
+var _namespace_ = "View3195187770";
 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":"View335321206__root"};
+export var classes = {"root":"View3195187770__root"};
 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_ = "Edit560649002";
+var _namespace_ = "Edit3804783142";
 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":"Edit560649002__root","urlInput":"Edit560649002__urlInput"};
+export var classes = {"root":"Edit3804783142__root","urlInput":"Edit3804783142__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/Edit.tsx

@@ -39,12 +39,18 @@ export const UrlEdit: React.FC<CellEditProps<string>> = ({
       }}
     >
       <CellUrlInput
-        inputRef={inputRef as React.MutableRefObject<InputImperativeActions | null | undefined>}
+        inputRef={
+          inputRef as React.MutableRefObject<
+            InputImperativeActions | null | undefined
+          >
+        }
         value={value ?? ''}
         onChange={onChange}
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
-        autoSelect={!(typeof editTrigger === 'object' && editTrigger?.kind === 'type')}
+        autoSelect={
+          !(typeof editTrigger === 'object' && editTrigger?.kind === 'type')
+        }
         className={classes.urlInput}
       />
     </div>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3802501682";
+var _namespace_ = "View3203535727";
 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":"View3802501682__root","textView":"View3802501682__textView","urlText":"View3802501682__urlText","suffix":"View3802501682__suffix"};
+export var classes = {"root":"View3203535727__root","textView":"View3203535727__textView","urlText":"View3203535727__urlText","suffix":"View3203535727__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/View.uni.driver.ts

@@ -13,9 +13,7 @@ export function UrlViewUniDriver(base: UniDriver, body: UniDriver) {
     getValue: () => base.text(),
     hasOpenLinkButton: () => linkButton.exists(),
     getLinkHref: () =>
-      base
-        .$('[data-hook="open-link-button"]')
-        .attr('href') as Promise<string>,
+      base.$('[data-hook="open-link-button"]').attr('href') as Promise<string>,
     clickOpenLink: () => linkButton.click(),
   };
 }

package/src/components/EditableTable/useCellFocusAndEditing.ts

@@ -147,7 +147,10 @@ export function useCellFocusAndEditing<T, F extends FiltersMap>({
         }
 
         e.preventDefault();
-        cellInteraction.startEdit(undefined, undefined, { kind: 'type', key: e.key });
+        cellInteraction.startEdit(undefined, undefined, {
+          kind: 'type',
+          key: e.key,
+        });
 
         if ('value' in typeResult) {
           // Cell type provides an explicit pre-populated value (e.g. first typed

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_ = "EntityPagePlain681429844";
+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":"EntityPagePlain681429844__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_ = "Fade4043886153";
+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":"Fade4043886153__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);
+}