@orangelogic/design-system 2.57.0 → 2.58.0

package/library/css/ol-base.css

@@ -111,9 +111,9 @@
   --cx-input-letter-spacing         : var(--cx-letter-spacing-normal);
   --cx-input-required-content       : '*';
   --cx-input-required-content-offset: -2px;
-  --cx-input-spacing-large          : var(--cx-spacing-large);
+  --cx-input-spacing-large          : var(--cx-spacing-medium);
   --cx-input-spacing-medium         : var(--cx-spacing-medium);
-  --cx-input-spacing-small          : var(--cx-spacing-small);
+  --cx-input-spacing-small          : var(--cx-spacing-medium);
 
   /* Font tokens */
   --cx-font-heading-2x-large: var(--cx-font-weight-semi-bold,600) var(--cx-font-size-2x-large,28px)/var(--cx-font-line-height-32,32px) var(--cx-font-sans,'Inter');
@@ -131,8 +131,8 @@
 
 
   /* Labels */
-  --cx-input-label-font-size-large    : var(--cx-font-size-medium);
-  --cx-input-label-font-size-medium   : var(--cx-font-size-small);
+  --cx-input-label-font-size-large    : var(--cx-font-size-x-small);
+  --cx-input-label-font-size-medium   : var(--cx-font-size-x-small);
   --cx-input-label-font-size-small    : var(--cx-font-size-x-small);
   --cx-input-label-text-transform     : none;
   --cx-radio-label-text-transform     : none;

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.57.0",
+  "version": "2.58.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/atoms/src/components/space/space.d.ts

@@ -1,7 +1,7 @@
 import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { SpacingProp } from '../../../../types/src/space';
 import { CSSResultGroup } from 'lit';
 
-type SpacingProp = '3x-small' | '2x-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large' | '3x-large' | '4x-large';
 /**
  * @summary SpacingContainer allows for flexible layout spacing between child elements, vertically or horizontally, with varying sizes.
  *
@@ -48,4 +48,3 @@ declare global {
         'cx-space': SpacingContainer;
     }
 }
-export {};

package/library/packages/atoms/src/components/table/components/table-row-actions/table-row-actions-dropdown.d.ts

@@ -7,7 +7,7 @@ import { default as CxMenuSection } from '../../../menu-section/menu-section.ts'
 import { RowComponent } from '../../table.ts';
 import { default as CxTooltip } from '../../../tooltip/tooltip.ts';
 import { default as CortexElement } from '../../../../../../base/src/cortex-element.ts';
-import { DropdownItem, RowAction } from '../../../../../../types/src/table';
+import { DropdownItem, ICellComponent, RowAction } from '../../../../../../types/src/table';
 import { nothing } from 'lit';
 
 export default class CxTableRowActionsDropdown extends CortexElement {
@@ -23,6 +23,7 @@ export default class CxTableRowActionsDropdown extends CortexElement {
     private readonly localize;
     action: RowAction;
     row: RowComponent;
+    cell?: ICellComponent;
     groupedDropdownItems: Record<string, DropdownItem[]>;
     sections: string[];
     createRenderRoot(): this;

package/library/packages/atoms/src/components/table/components/table-row-actions/table-row-actions.d.ts

@@ -1,10 +1,9 @@
 import { default as CxButton } from '../../../button/button.ts';
 import { default as CxIcon } from '../../../icon/icon.ts';
 import { default as CxSpace } from '../../../space/space.ts';
-import { RowComponent } from '../../table.ts';
 import { default as CxTooltip } from '../../../tooltip/tooltip.ts';
 import { default as CortexElement } from '../../../../../../base/src/cortex-element.ts';
-import { RowAction } from '../../../../../../types/src/table';
+import { ICellComponent, IRowComponent, RowAction } from '../../../../../../types/src/table';
 import { CSSResultGroup } from 'lit';
 import { default as CxTableRowActionsDropdown } from './table-row-actions-dropdown';
 
@@ -17,7 +16,7 @@ import { default as CxTableRowActionsDropdown } from './table-row-actions-dropdo
  * @dependency cx-space
  * @dependency cx-table-row-actions-dropdown
  *
- * @event {{ name: string, row: RowComponent }} cx-table-row-action-click - Emitted when an action is clicked.
+ * @event {{ name: string, row: RowComponent, cell?: CellComponent }} cx-table-row-action-click - Emitted when an action is clicked.
  *
  * @property {RowAction[]} actions - The list of actions to display.
  * @property {number} rowIndex - The index of the row.
@@ -32,7 +31,8 @@ export default class CxTableRowActions extends CortexElement {
         'cx-tooltip': typeof CxTooltip;
     };
     actions: RowAction[];
-    row: RowComponent;
+    row: IRowComponent;
+    cell?: ICellComponent;
     private handleActionClick;
     private renderButton;
     private renderDropdown;

package/library/packages/atoms/src/components/table/components/table-toolbar/table-dropdown-filter.d.ts

@@ -0,0 +1,36 @@
+import { default as CxButton } from '../../../button/button.ts';
+import { default as CxDropdown } from '../../../dropdown/dropdown.ts';
+import { default as CxMenu } from '../../../menu/menu.ts';
+import { default as CxMenuItem } from '../../../menu-item/menu-item.ts';
+import { default as CortexElement } from '../../../../../../base/src/cortex-element.ts';
+import { TableDropdownFilterData, TableDropdownFilterDataOption } from '../../../../../../types/src/table';
+import { CSSResultGroup } from 'lit';
+
+/**
+ * @summary CxTableDropdownFilter
+ */
+export default class CxTableDropdownFilter extends CortexElement {
+    static readonly styles: CSSResultGroup;
+    static readonly dependencies: {
+        'cx-button': typeof CxButton;
+        'cx-dropdown': typeof CxDropdown;
+        'cx-menu': typeof CxMenu;
+        'cx-menu-item': typeof CxMenuItem;
+    };
+    data: TableDropdownFilterData;
+    activeOptionId: string;
+    optionsMap: Record<string, TableDropdownFilterDataOption>;
+    get activeOption(): TableDropdownFilterDataOption;
+    createRenderRoot(): this;
+    private createOptionsMap;
+    private selectOptionWithId;
+    handleDataChange(): void;
+    private handleMenuSelect;
+    private renderMenuItems;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cx-table-dropdown-filter': CxTableDropdownFilter;
+    }
+}

package/library/packages/atoms/src/components/table/components/table-toolbar/table-toolbar.d.ts

@@ -5,12 +5,14 @@ import { default as CxIconButton } from '../../../icon-button/icon-button.ts';
 import { default as CxInput } from '../../../input/input.ts';
 import { default as CxMenu } from '../../../menu/menu.ts';
 import { default as CxMenuItem } from '../../../menu-item/menu-item.ts';
+import { default as CxPagination } from '../../../pagination/pagination.ts';
 import { default as CxSpace } from '../../../space/space.ts';
 import { default as CxTooltip } from '../../../tooltip/tooltip.ts';
 import { default as CxTypography } from '../../../typography/typography.ts';
 import { default as CortexElement } from '../../../../../../base/src/cortex-element.ts';
-import { SavedSearchItem } from '../../../../../../types/src/table';
+import { SavedSearchItem, TableDropdownFilterData } from '../../../../../../types/src/table';
 import { CSSResultGroup } from 'lit';
+import { default as CxTableDropdownFilter } from './table-dropdown-filter';
 import { default as CxTableSavedSearchDropdown } from './table-saved-search-dropdown';
 
 /**
@@ -27,7 +29,9 @@ export default class CxTableToolbar extends CortexElement {
         'cx-input': typeof CxInput;
         'cx-menu': typeof CxMenu;
         'cx-menu-item': typeof CxMenuItem;
+        'cx-pagination': typeof CxPagination;
         'cx-space': typeof CxSpace;
+        'cx-table-dropdown-filter': typeof CxTableDropdownFilter;
         'cx-table-saved-search-dropdown': typeof CxTableSavedSearchDropdown;
         'cx-tooltip': typeof CxTooltip;
         'cx-typography': typeof CxTypography;
@@ -66,6 +70,10 @@ export default class CxTableToolbar extends CortexElement {
      * Whether to display a export custom button
      */
     canExportCustom: boolean;
+    /**
+     * The dropdown filters to display in the toolbar.
+     */
+    dropdownFilters: TableDropdownFilterData[];
     /**
      * Whether to display a save report button
      */
@@ -107,6 +115,7 @@ export default class CxTableToolbar extends CortexElement {
     private renderAddButton;
     private renderSavedSearchDropdown;
     private renderExportDropdown;
+    private renderDropdownFilters;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

package/library/packages/atoms/src/components/table/filter-controller.d.ts

@@ -0,0 +1,84 @@
+import { Filter, TableDropdownFilterData } from '../../../../types/src/table';
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { default as CxTable } from './table';
+
+export type FilterSource = 'search' | `dropdown:${string}`;
+/**
+ * A reactive controller to manage programmatic filter state across multiple sources (search, dropdowns).
+ * Coordinates filter operations to prevent conflicts between different filter sources.
+ *
+ * Note: This controller only manages programmatic filters (set via search and dropdown sources).
+ * Header filters (set directly on table columns) are managed separately by the Filter class
+ * and are not affected by this controller's operations.
+ *
+ * The controller also preserves initialFilter (if set) when applying filters, ensuring that
+ * initial filters are not lost when FilterController-managed filters are applied.
+ */
+export declare class FilterController implements ReactiveController {
+    private readonly host;
+    private readonly filters;
+    private isConnected;
+    constructor(host: ReactiveControllerHost & CxTable);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    /**
+     * Set filters for a specific source, replacing any existing filters for that source.
+     * @param source - The filter source identifier
+     * @param filters - Array of filters to set for this source
+     */
+    setSourceFilters(source: FilterSource, filters: Filter[]): void;
+    /**
+     * Add a single filter to a specific source.
+     * @param source - The filter source identifier
+     * @param filterEntry - The filter to add
+     */
+    addFilter(source: FilterSource, filter: Filter): void;
+    /**
+     * Clear all filters for a specific source, or all filters if no source is provided.
+     * @param source - Optional filter source identifier. If not provided, clears all filters.
+     */
+    clearSourceFilters(source?: FilterSource): void;
+    /**
+     * Removes sources for dropdown ids no longer present, clears sources when `defaultOption` is unset,
+     * and applies filters for each configured `defaultOption`
+     */
+    syncDropdownFilterSources(configs: readonly TableDropdownFilterData[]): void;
+    /**
+     * Remove filters for a specific field, optionally scoped to a specific source.
+     * @param field - The field name to remove filters for
+     * @param source - Optional source to limit removal to
+     */
+    removeFieldFilters(field: string, source?: FilterSource): void;
+    /**
+     * Get all active programmatic filters from all sources managed by this controller.
+     * Note: This does not include header filters (managed separately) or initialFilter
+     * (which is included separately when applying filters).
+     * @returns Array of all active programmatic filters from controller-managed sources
+     */
+    getFilters(): Filter[];
+    /**
+     * Get filters for a specific source.
+     * @param source - The filter source identifier
+     * @returns Array of filters for the specified source, or empty array if none exist
+     */
+    getSourceFilters(source: FilterSource): Filter[];
+    /**
+     * Check if a specific source has any active filters.
+     * @param source - The filter source identifier
+     * @returns True if the source has active filters
+     */
+    hasSourceFilters(source: FilterSource): boolean;
+    /**
+     * Reconcile all programmatic filters from all sources and apply them to the Tabulator instance.
+     * This method replaces all existing programmatic filters (filterList) in Tabulator and
+     * re-applies all filters from all sources to ensure consistency.
+     *
+     * Note: This only affects programmatic filters. Header filters are managed separately
+     * by the Filter class and are not modified by this method.
+     *
+     * This method also includes initialFilter (if set) to ensure it is preserved when
+     * FilterController applies its filters.
+     */
+    applyFilters(): void;
+}

package/library/packages/atoms/src/components/table/modules/HoverMenu.d.ts

@@ -1,13 +1,21 @@
 import { IHoverMenu } from '../../../../../types/src/table';
-import { Row, Tabulator } from '../tabulator-tables';
+import { CxTableRowActions } from '../components';
+import { Cell, Row, Tabulator } from '../tabulator-tables';
 import { default as Module } from '../tabulator-tables/core/Module';
 
 export default class HoverMenu extends Module implements IHoverMenu {
     static readonly moduleName = "hoverMenu";
+    private static readonly placementDataAttribute;
     hoverMenuField: string;
     constructor(table: Tabulator);
     initialize(): void;
     handleRowMouseEnter(e: Event, row: Row): void;
     handleRowMouseLeave(e: Event, row: Row): void;
+    handleCellMouseEnter(e: Event, cell: Cell): void;
+    handleCellMouseLeave(e: Event, cell: Cell): void;
+    createHoverMenuElement(): CxTableRowActions;
     layoutRow(row: Row): void;
+    private getMenuPlacement;
+    private applyMenuPosition;
+    layoutCell(cell: Cell): void;
 }

package/library/packages/atoms/src/components/table/table.d.ts

@@ -1,12 +1,19 @@
+import { default as CxButton } from '../button/button.ts';
 import { default as CxCheckbox } from '../checkbox/checkbox.ts';
+import { default as CxDivider } from '../divider/divider.ts';
+import { default as CxFormatNumber } from '../format-number/format-number.ts';
+import { default as CxFormatTime } from '../format-time/format-time.ts';
+import { default as CxIcon } from '../icon/icon.ts';
 import { default as CxIconButton } from '../icon-button/icon-button.ts';
 import { default as CxLineClamp } from '../line-clamp/line-clamp.ts';
+import { default as CxSelect } from '../select/select.ts';
 import { default as CxSpace } from '../space/space.ts';
 import { default as CxSpinner } from '../spinner/spinner.ts';
 import { default as CxTag } from '../tag/tag.ts';
+import { default as CxTypography } from '../typography/typography.ts';
 import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
 import { PaginationCounter } from '../../../../types/src/pagination';
-import { HoverMenuOptions, SavedSearchItem, ColumnDefinition, Options, OptionsColumns, OptionsSpreadsheet, SheetDefinition } from '../../../../types/src/table';
+import { HoverMenuOptions, SavedSearchItem, TableDropdownFilterData, ColumnDefinition, Options, OptionsColumns, OptionsSpreadsheet, SheetDefinition } from '../../../../types/src/table';
 import { CSSResultGroup, TemplateResult } from 'lit';
 import { CxTableRowActions, CxTableToolbar } from './components';
 import { RowComponent, TabulatorFull as Tabulator } from './tabulator-tables';
@@ -49,6 +56,11 @@ import { RowComponent, TabulatorFull as Tabulator } from './tabulator-tables';
  * @cssproperty [--placeholder-font-weight=var(--cx-font-weight-regular)] - The font weight of the table placeholder.
  * @cssproperty [--placeholder-font-size=var(--cx-font-size-medium-large)] - The font size of the table placeholder.
  * @cssproperty [--hover-menu-background-color=var(--cx-color-neutral-50)] - The background color of the table hover menu.
+ * @cssproperty [--table-selected-only-cell-background-color=transparent] - The background color of a single selected cell.
+ * @cssproperty [--table-selected-range-cell-background-color=var(--cx-color-neutral-100)] - The background color of selected cells within a range.
+ * @cssproperty [--table-selected-cell-border-color=var(--cx-color-primary-200)] - The border color of the active selected cell.
+ * @cssproperty [--table-selected-cell-border-width=1px] - The border width of the active selected cell.
+ * @cssproperty [--table-selected-cell-border-style=solid] - The border style of the active selected cell.
  *
  * @event {{ args: any[] }} cx-table.[event_name] - Emitted when the event with such name is emitted on the table.
  * Must register the event listener on the table element to receive the event.
@@ -59,18 +71,27 @@ export default class CxTable extends CortexElement {
     static readonly styles: CSSResultGroup;
     private readonly localize;
     static readonly dependencies: {
+        'cx-button': typeof CxButton;
         'cx-checkbox': typeof CxCheckbox;
+        'cx-divider': typeof CxDivider;
+        'cx-format-number': typeof CxFormatNumber;
+        'cx-format-time': typeof CxFormatTime;
+        'cx-icon': typeof CxIcon;
         'cx-icon-button': typeof CxIconButton;
         'cx-line-clamp': typeof CxLineClamp;
+        'cx-select': typeof CxSelect;
         'cx-space': typeof CxSpace;
         'cx-spinner': typeof CxSpinner;
         'cx-table-row-actions': typeof CxTableRowActions;
         'cx-table-toolbar': typeof CxTableToolbar;
         'cx-tag': typeof CxTag;
+        'cx-typography': typeof CxTypography;
     };
-    private osInstance;
+    private verticalOsInstance;
+    private horizontalOsInstance;
     private resizeObserver;
     private overflowObserver;
+    private readonly filterController;
     private readonly tabulatorHolder;
     private readonly tabulatorElement;
     private readonly table;
@@ -211,6 +232,10 @@ export default class CxTable extends CortexElement {
      * The parameter name for the page number for the saved search dropdown
      */
     savedSearchPageNumberParam: string;
+    /**
+     * The dropdown filters to display in the toolbar.
+     */
+    dropdownFilters: TableDropdownFilterData[];
     /**
      * The URL to load the data from.
      */
@@ -618,6 +643,10 @@ export default class CxTable extends CortexElement {
      * The placeholder text to display when table is empty due to active filters.
      */
     placeholderHeaderFilter: Options['placeholderHeaderFilter'];
+    /**
+     * The placeholder text to display when all columns are hidden.
+     */
+    noColumnPlaceholderText: string;
     /**
      * Enables the overlay scrollbar plugin, which provides a custom scrollbar that does not take up any content space.
      */
@@ -635,10 +664,15 @@ export default class CxTable extends CortexElement {
     initTable(): Promise<void>;
     handleUseOverlayScrollbarChange(): void;
     constructor();
-    runFirstUpdated(): void;
     connectedCallback(): void;
+    runFirstUpdated(): void;
+    /**
+     * All logic that needs to run when the table is built should be placed here.
+     */
+    private readonly handleTableBuilt;
     disconnectedCallback(): void;
-    private initOverlayScrollbars;
+    private initVerticalScrollbar;
+    private initHorizontalScrollbar;
     private readonly checkHorizontalOverflow;
     private initOverflowObserver;
     private registerEventListeners;
@@ -649,6 +683,7 @@ export default class CxTable extends CortexElement {
     handleDataChange(): void;
     handleSpreadsheetDataChange(): void;
     handleColumnsChange(): void;
+    handleNoColumnPlaceholderTextChange(): void;
     handleGroupByChange(): void;
     handleGroupHeaderChange(): void;
     handleGroupValuesChange(): void;
@@ -657,7 +692,9 @@ export default class CxTable extends CortexElement {
     search(searchText: string): void;
     private handleSearch;
     handleSearchFieldsChange(): void;
+    handleDropdownFiltersPropChange(): void;
     private handleTableExport;
+    private handleDropdownFilterChange;
     render(): TemplateResult;
 }
 declare global {

package/library/packages/atoms/src/components/table/tabulator-tables/core/ColumnManager.d.ts

@@ -64,6 +64,7 @@ export default class ColumnManager extends CoreFeature implements IColumnManager
     addColumn(definition: ColumnDefinition, before?: boolean, nextToColumn?: IColumn | IColumnComponent | false): Promise<IColumn>;
     deregisterColumn(column: IColumn): void;
     rerenderColumns(update?: boolean, silent?: boolean): void;
+    refreshVisibilityLayout(): void;
     blockRedraw(): void;
     restoreRedraw(): void;
     redraw(force?: boolean): void;

package/library/packages/atoms/src/components/table/tabulator-tables/core/RowManager.d.ts

@@ -132,6 +132,9 @@ export default class RowManager extends CoreFeature implements IRowManager {
     _clearTable(): void;
     tableEmpty(): void;
     checkPlaceholder(): void;
+    hasVisibleColumns(): boolean;
+    shouldShowPlaceholder(): boolean;
+    syncColumnVisibilityState(): void;
     _showPlaceholder(): void;
     _clearPlaceholder(): void;
     _positionPlaceholder(): void;

package/library/packages/atoms/src/components/table/tabulator-tables/core/TabulatorFull.d.ts

@@ -43,6 +43,7 @@ declare class TabulatorFull extends Tabulator implements ITabulatorFull {
     getSheetData: (key?: SheetLookup) => unknown[][];
     getPage: () => Page;
     setFilter: Filter['setFilter'];
+    createFilterFieldFunction: Filter['createFilterFieldFunction'];
     clearFilter: Filter['clearFilter'];
     selectRow: SelectRow['selectRows'];
     deselectRow: SelectRow['deselectRows'];

package/library/packages/atoms/src/components/table/tabulator-tables/core/cell/Cell.d.ts

@@ -18,6 +18,7 @@ export default class Cell extends CoreFeature implements ICell {
     component: ICellComponent | null;
     loaded: boolean;
     calcs?: Record<string, any>;
+    hoverMenuElement: HTMLElement | null;
     constructor(column: IColumn, row: IRow);
     /**
      * Setup Functions

package/library/packages/atoms/src/components/table/tabulator-tables/core/cell/CellComponent.d.ts

@@ -10,7 +10,7 @@ export default class CellComponent implements ICellComponent {
     getElement(): HTMLElement | null;
     getContentElement(): HTMLElement | null;
     getRow(): import('../../../../../../../types/src/table').IRowComponent;
-    getData(transform: string): Record<string, any>;
+    getData(transform?: string): Record<string, any>;
     getType(): string;
     getField(): string;
     getColumn(): import('../../../../../../../types/src/table').IColumnComponent;

package/library/packages/atoms/src/components/table/tabulator-tables/index.d.ts

@@ -10,5 +10,6 @@ export { default as RangeComponent } from './modules/SelectRange/RangeComponent'
 export { default as SheetComponent } from './modules/Spreadsheet/SheetComponent';
 export { default as PseudoRow } from './core/row/PseudoRow';
 export { default as Row } from './core/row/Row';
+export { default as Cell } from './core/cell/Cell';
 export { default as Module } from './core/Module';
 export { default as Renderer } from './core/rendering/Renderer';

package/library/packages/atoms/src/components/table/tabulator-tables/modules/Edit/List.d.ts

@@ -1,115 +1,106 @@
 import { ITabulator } from '../../../../../../../types/src/table';
 import { default as Cell } from '../../core/cell/Cell';
-import { default as CellComponent } from '../../core/cell/CellComponent';
-import { default as Popup } from '../../core/tools/Popup';
+import { default as CxOption } from '../../../../option/option.ts';
+import { default as CxSelect } from '../../../../select/select.ts';
 import { ListEditorParams } from '../../core/types';
 import { default as Edit } from './Edit';
 
 interface ListItem {
-    element: HTMLElement | false;
-    elementAttributes?: Record<string, string>;
+    element?: CxOption;
     group?: boolean;
     itemParams?: any;
     label: string;
     level: number;
     options?: ListItem[];
     original: any;
+    sanitizedValue: string;
     selected: boolean;
     value: string | number | boolean;
     visible: boolean;
 }
 interface ListParams extends ListEditorParams {
+    closedByDefault?: boolean;
     emptyValue: any;
-    filterDelay: number;
-    placeholderEmpty: string;
-    placeholderLoading: string;
+    freeWidth?: boolean;
+    placeholder?: string;
+    prefixElement?: HTMLElement | string;
     verticalNavigation: 'editor' | 'table' | 'hybrid';
 }
 type SuccessCallback = (value: any) => void;
 type CancelCallback = () => void;
 type OnRenderedCallback = (callback: () => void) => void;
+type ListInputValues = Record<string, string> | ListItem[] | Array<string | number>;
 export default class List {
-    edit: Edit;
     table: ITabulator;
     cell: Cell;
     params: ListParams;
     data: ListItem[];
+    _itemsMap: Map<string, ListItem>;
     displayItems: ListItem[];
     currentItems: ListItem[];
     focusedItem: ListItem | null;
-    input: HTMLInputElement;
-    listEl: HTMLDivElement;
-    initialValues: any[] | null;
-    isFilter: boolean;
-    filterTimeout: ReturnType<typeof setTimeout> | null;
-    filtered: boolean;
+    input: CxSelect;
+    initialValues: string[];
+    /**
+     * Whether the cell is a header cell, used for header filter of type list
+     */
+    isHeaderFilter: boolean;
     typing: boolean;
-    values: any[];
-    popup: Popup | null;
     listIteration: number;
     lastAction: string;
-    filterTerm: string;
-    blurable: boolean;
     actions: {
         cancel: CancelCallback;
         success: SuccessCallback;
     };
     constructor(editor: Edit, cell: Cell, onRendered: OnRenderedCallback, success: SuccessCallback, cancel: CancelCallback, editorParams: ListEditorParams);
-    _deprecatedOptionsCheck(): void;
-    _initializeValue(): void;
-    _onRendered(): void;
-    _createListElement(): HTMLDivElement;
-    _setListWidth(): void;
-    _createInputElement(): HTMLInputElement;
+    /**
+     * cx-select only accepts string values without spaces
+     * @param value - The value to sanitize
+     */
+    sanitizeValue(value: any): string;
+    _initializeValue(): Promise<void>;
+    _onRendered(): Promise<void>;
+    clickStop(e: MouseEvent): void;
+    /**
+     * Refreshes {@link List._itemsMap} from {@link List.data} (O(n) once per options parse).
+     */
+    _rebuildItemsMap(): void;
+    handleCxInputChange(): Promise<void>;
+    createPrefixElement(): HTMLElement | null;
+    _createSelectElement(): CxSelect;
     _initializeParams(params: ListEditorParams): ListParams;
-    _bindInputEvents(input: HTMLInputElement): void;
-    _inputFocus(): void;
-    _filter(): void;
+    _bindInputEvents(input: CxSelect): void;
     _inputClick(e: MouseEvent): void;
-    _inputBlur(): void;
-    _inputSearch(): void;
+    _inputBlur(e: FocusEvent): void;
     _inputKeyDown(e: KeyboardEvent): void;
-    _inputKeyUp(e: KeyboardEvent): void;
-    _preventPopupBlur(): void;
-    _preventBlur(): void;
-    _keyTab(_e?: KeyboardEvent): void;
-    _keyUp(e: KeyboardEvent): void;
-    _keyDown(e: KeyboardEvent): void;
-    _keySide(e: KeyboardEvent): void;
     _keyEnter(): void;
     _keyEsc(): void;
-    _keyHomeEnd(e: KeyboardEvent): void;
-    _keySelectLetter(e: KeyboardEvent): void;
-    _keyAutoCompLetter(_e?: KeyboardEvent): void;
-    _scrollToValue(char: number): void;
-    _focusItem(item: ListItem | null): void;
     headerFilterInitialListGen(): void;
-    rebuildOptionsList(): void;
-    _filterList(): void;
-    _generateOptions(silent?: boolean): Promise<ListItem[]>;
-    _addPlaceholder(contents: string | HTMLElement | ((cell: CellComponent, listEl: HTMLElement) => string | HTMLElement)): void;
-    _ajaxRequest(url: string, term: string): Promise<any>;
+    rebuildOptionsList(): Promise<void>;
+    _generateOptions(): Promise<ListItem[]>;
+    _ajaxRequest(url: string, term: string): Promise<ListInputValues>;
     _uniqueColumnValues(field?: string): string[];
     _emptyValueCheck(value: any): boolean;
-    _parseList(inputValues: any[] | Record<string, any>): ListItem[];
-    _parseListItem(option: any, data: ListItem[], level: number): void;
+    _parseList(inputValues: ListInputValues | Record<string, any>): ListItem[];
+    _parseListItem(option: any, level: number): ListItem;
     _parseListGroup(option: any, level: number): ListItem;
     _sortOptions(options: ListItem[]): ListItem[];
     _sortGroup(sorter: (a: string, b: string) => number, options: ListItem[]): void;
     _defaultSortFunction(as: string, bs: string): number;
-    _filterOptions(): ListItem[];
-    _filterItem(func: (term: string, label: string, value: any, item: any) => boolean, term: string, item: ListItem): boolean;
-    _defaultFilterFunc(term: string, label: string, value: any): boolean;
     _clearList(): void;
     _buildList(data: ListItem[]): void;
-    _buildItem(item: ListItem): void;
-    _showList(): void;
-    _styleItem(item: ListItem): void;
-    _itemClick(item: ListItem, e: MouseEvent): void;
-    _groupClick(item: ListItem, e: MouseEvent): void;
+    /**
+     * Builds listbox content to match cx-select grouping (see Select docs): `<small>` labels and
+     * `<cx-divider>` between sections; only leaf rows are `<cx-option>`.
+     */
+    _appendListItemSequence(items: ListItem[]): void;
+    _appendDivider(): void;
+    _appendSectionLabel(label: string): void;
+    _appendLeafOption(item: ListItem): void;
+    formatItemLabel(item: ListItem, el: HTMLElement): HTMLElement | string;
     _cancel(): void;
-    _clearChoices(): void;
     _chooseItem(item: ListItem, silent?: boolean): void;
-    _resolveValue(blur?: boolean): void;
+    _getCommittedOutput(): any;
+    _resolveValue(commitItem?: ListItem): void;
 }
 export {};

package/library/packages/atoms/src/components/table/tabulator-tables/modules/Edit/defaults/editors/list.d.ts

@@ -1,7 +1,8 @@
+import { EditorParams } from '../../../../../../../../../types/src/table';
 import { default as CellComponent } from '../../../../core/cell/CellComponent';
-import { EditorParams } from '../../../../core/types';
+import { Cell } from '../../../../core/types';
 import { default as Edit } from '../../Edit';
 
-type EditorFunction = (this: Edit, cell: CellComponent, onRendered: (callback: () => void) => void, success: (value: any) => boolean, cancel: () => void, editorParams: EditorParams) => HTMLElement | false;
+type EditorFunction = (this: Edit, cell: Cell | CellComponent, onRendered: (callback: () => void) => void, success: (value: any) => boolean, cancel: () => void, editorParams: EditorParams) => HTMLElement | false;
 declare const list: EditorFunction;
 export default list;