@wix/patterns 1.364.0 → 1.369.0

package/dist/cjs/state/EditableTable/utils.js

@@ -0,0 +1,71 @@
+"use strict";
+
+exports.__esModule = true;
+exports.cellKey = cellKey;
+exports.noBorder = void 0;
+exports.parseCellKey = parseCellKey;
+exports.runCellValidation = runCellValidation;
+exports.validResult = void 0;
+function cellKey(rowKey, columnId) {
+  return `${rowKey}:${columnId}`;
+}
+function parseCellKey(key) {
+  const idx = key.indexOf(':');
+  if (idx === -1) {
+    return null;
+  }
+  return {
+    rowKey: key.slice(0, idx),
+    columnId: key.slice(idx + 1)
+  };
+}
+const noBorder = exports.noBorder = {
+  top: false,
+  bottom: false,
+  left: false,
+  right: false
+};
+const validResult = exports.validResult = {
+  valid: true
+};
+function checkValidationRule(rule, value) {
+  switch (rule.type) {
+    case 'required':
+      return value != null && value !== '';
+    case 'min':
+      return typeof value === 'number' && value >= rule.value;
+    case 'max':
+      return typeof value === 'number' && value <= rule.value;
+    case 'minLength':
+      return typeof value === 'string' && value.length >= rule.value;
+    case 'maxLength':
+      return typeof value === 'string' && value.length <= rule.value;
+    case 'pattern':
+      return typeof value === 'string' && rule.value.test(value);
+    case 'custom':
+      return rule.validate(value);
+    default:
+      return true;
+  }
+}
+function runCellValidation(value, rules, typeValidate) {
+  const errors = [];
+  if (rules) {
+    for (const rule of rules) {
+      if (!checkValidationRule(rule, value)) {
+        errors.push(rule.message);
+      }
+    }
+  }
+  if (typeValidate) {
+    const typeError = typeValidate(value, rules);
+    if (typeError) {
+      errors.push(typeError);
+    }
+  }
+  return errors.length === 0 ? validResult : {
+    valid: false,
+    errors
+  };
+}
+//# sourceMappingURL=utils.js.map

package/dist/cjs/state/EditableTable/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cellKey","rowKey","columnId","parseCellKey","key","idx","indexOf","slice","noBorder","exports","top","bottom","left","right","validResult","valid","checkValidationRule","rule","value","type","length","test","validate","runCellValidation","rules","typeValidate","errors","push","message","typeError"],"sources":["../../../../src/state/EditableTable/utils.ts"],"sourcesContent":["import type {\n  Cell,\n  CellBorder,\n  ValidationResult,\n  ValidationRule,\n} from './types';\n\nexport function cellKey(rowKey: string, columnId: string): string {\n  return `${rowKey}:${columnId}`;\n}\n\nexport function parseCellKey(key: string): Cell | null {\n  const idx = key.indexOf(':');\n  if (idx === -1) {\n    return null;\n  }\n  return { rowKey: key.slice(0, idx), columnId: key.slice(idx + 1) };\n}\n\nexport const noBorder: CellBorder = {\n  top: false,\n  bottom: false,\n  left: false,\n  right: false,\n};\n\nexport const validResult: ValidationResult = { valid: true };\n\nfunction checkValidationRule(rule: ValidationRule, value: any): boolean {\n  switch (rule.type) {\n    case 'required':\n      return value != null && value !== '';\n    case 'min':\n      return typeof value === 'number' && value >= rule.value;\n    case 'max':\n      return typeof value === 'number' && value <= rule.value;\n    case 'minLength':\n      return typeof value === 'string' && value.length >= rule.value;\n    case 'maxLength':\n      return typeof value === 'string' && value.length <= rule.value;\n    case 'pattern':\n      return typeof value === 'string' && rule.value.test(value);\n    case 'custom':\n      return rule.validate(value);\n    default:\n      return true;\n  }\n}\n\nexport function runCellValidation(\n  value: any,\n  rules?: ValidationRule[],\n  typeValidate?: (value: any, rules?: ValidationRule[]) => string | null,\n): ValidationResult {\n  const errors: string[] = [];\n\n  if (rules) {\n    for (const rule of rules) {\n      if (!checkValidationRule(rule, value)) {\n        errors.push(rule.message);\n      }\n    }\n  }\n\n  if (typeValidate) {\n    const typeError = typeValidate(value, rules);\n    if (typeError) {\n      errors.push(typeError);\n    }\n  }\n\n  return errors.length === 0 ? validResult : { valid: false, errors };\n}\n"],"mappings":";;;;;;;;AAOO,SAASA,OAAOA,CAACC,MAAc,EAAEC,QAAgB,EAAU;EAChE,OAAO,GAAGD,MAAM,IAAIC,QAAQ,EAAE;AAChC;AAEO,SAASC,YAAYA,CAACC,GAAW,EAAe;EACrD,MAAMC,GAAG,GAAGD,GAAG,CAACE,OAAO,CAAC,GAAG,CAAC;EAC5B,IAAID,GAAG,KAAK,CAAC,CAAC,EAAE;IACd,OAAO,IAAI;EACb;EACA,OAAO;IAAEJ,MAAM,EAAEG,GAAG,CAACG,KAAK,CAAC,CAAC,EAAEF,GAAG,CAAC;IAAEH,QAAQ,EAAEE,GAAG,CAACG,KAAK,CAACF,GAAG,GAAG,CAAC;EAAE,CAAC;AACpE;AAEO,MAAMG,QAAoB,GAAAC,OAAA,CAAAD,QAAA,GAAG;EAClCE,GAAG,EAAE,KAAK;EACVC,MAAM,EAAE,KAAK;EACbC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE;AACT,CAAC;AAEM,MAAMC,WAA6B,GAAAL,OAAA,CAAAK,WAAA,GAAG;EAAEC,KAAK,EAAE;AAAK,CAAC;AAE5D,SAASC,mBAAmBA,CAACC,IAAoB,EAAEC,KAAU,EAAW;EACtE,QAAQD,IAAI,CAACE,IAAI;IACf,KAAK,UAAU;MACb,OAAOD,KAAK,IAAI,IAAI,IAAIA,KAAK,KAAK,EAAE;IACtC,KAAK,KAAK;MACR,OAAO,OAAOA,KAAK,KAAK,QAAQ,IAAIA,KAAK,IAAID,IAAI,CAACC,KAAK;IACzD,KAAK,KAAK;MACR,OAAO,OAAOA,KAAK,KAAK,QAAQ,IAAIA,KAAK,IAAID,IAAI,CAACC,KAAK;IACzD,KAAK,WAAW;MACd,OAAO,OAAOA,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACE,MAAM,IAAIH,IAAI,CAACC,KAAK;IAChE,KAAK,WAAW;MACd,OAAO,OAAOA,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACE,MAAM,IAAIH,IAAI,CAACC,KAAK;IAChE,KAAK,SAAS;MACZ,OAAO,OAAOA,KAAK,KAAK,QAAQ,IAAID,IAAI,CAACC,KAAK,CAACG,IAAI,CAACH,KAAK,CAAC;IAC5D,KAAK,QAAQ;MACX,OAAOD,IAAI,CAACK,QAAQ,CAACJ,KAAK,CAAC;IAC7B;MACE,OAAO,IAAI;EACf;AACF;AAEO,SAASK,iBAAiBA,CAC/BL,KAAU,EACVM,KAAwB,EACxBC,YAAsE,EACpD;EAClB,MAAMC,MAAgB,GAAG,EAAE;EAE3B,IAAIF,KAAK,EAAE;IACT,KAAK,MAAMP,IAAI,IAAIO,KAAK,EAAE;MACxB,IAAI,CAACR,mBAAmB,CAACC,IAAI,EAAEC,KAAK,CAAC,EAAE;QACrCQ,MAAM,CAACC,IAAI,CAACV,IAAI,CAACW,OAAO,CAAC;MAC3B;IACF;EACF;EAEA,IAAIH,YAAY,EAAE;IAChB,MAAMI,SAAS,GAAGJ,YAAY,CAACP,KAAK,EAAEM,KAAK,CAAC;IAC5C,IAAIK,SAAS,EAAE;MACbH,MAAM,CAACC,IAAI,CAACE,SAAS,CAAC;IACxB;EACF;EAEA,OAAOH,MAAM,CAACN,MAAM,KAAK,CAAC,GAAGN,WAAW,GAAG;IAAEC,KAAK,EAAE,KAAK;IAAEW;EAAO,CAAC;AACrE","ignoreList":[]}

package/dist/cjs/state/FormPage/FormPageHeader.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "FormPageHeader4138825591";
+var _namespace_ = "FormPageHeader2449721271";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "FormPageHeader4138825591__root"
+  "root": "FormPageHeader2449721271__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/state/FormPage/FormPageHeader.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/state/FormPage/FormPageHeader.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"FormPageHeader4138825591\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"FormPageHeader4138825591__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAgC,CAAC;AACvD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/state/FormPage/FormPageHeader.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"FormPageHeader2449721271\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"FormPageHeader2449721271__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAAgC,CAAC;AACvD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/state/TableState.js

@@ -13,6 +13,8 @@ class TableState {
     (0, _defineProperty2.default)(this, "virtual", void 0);
     (0, _defineProperty2.default)(this, "loadingRowState", void 0);
     (0, _defineProperty2.default)(this, "tableDragAndDropState", null);
+    /** The sticky table header element (column headers row) */
+    (0, _defineProperty2.default)(this, "headerElement", null);
     (0, _defineProperty2.default)(this, "retryErrorState", () => this.toolbar.retryErrorState());
     (0, _defineProperty2.default)(this, "onAddItemActionComplete", async items => {
       return this.toolbar.onAddItemActionComplete(items);

package/dist/cjs/state/TableState.js.map

@@ -1 +1 @@
-{"version":3,"names":["_ToolbarCollectionState","require","_TableVirtualState","_LoadingRowState","TableState","constructor","params","_defineProperty2","default","toolbar","retryErrorState","items","onAddItemActionComplete","columnId","forceDirection","collection","sort","id","ToolbarCollectionState","container","componentType","virtual","TableVirtualState","table","loadingRowState","LoadingRowState","visibleColumns","selectedOrderedColumnsOrAll","tableState","itemsContentWidth","itemsContentRect","rect","width","itemsToRenderCount","result","size","init","keyedItems","getStickyColumnsCount","_customColumnsState$d","horizontalScroll","stickyColumns","tableDragAndDropState","customColumnsState","customColumnsProps","customColumnsStateInitialized","stickySelectionColumn","showSelection","customColumnsIsEffective","reorderDisabledColumnsIsEffective","dragAndDrop","orderedColumnsByReorderDisabled","reorderDisabled","length","checkboxColumnStickyCompat","showEmptyState","multi","hasAvailableItems","resultOriginQuerySearch","hasNonPersistentActiveFilters","showErrorState","errorStatus","showLoadingState","initTask","status","isIdle","isLoading","exports"],"sources":["../../../src/state/TableState.ts"],"sourcesContent":["import {\n  CollectionState,\n  FiltersMap,\n  SortOrder,\n  WixPatternsContainer,\n} from '@wix/bex-core';\nimport {\n  ToolbarCollectionState,\n  ToolbarCollectionStateParamsInitParams,\n} from './ToolbarCollectionState';\nimport { TableVirtualState } from './TableVirtualState';\nimport { DragAndDropState } from '../components/DragAndDrop';\nimport { ICollectionComponentState } from './ICollectionComponentState';\nimport { LoadingRowState } from '../components/LoadingRow/LoadingRowState';\n\nexport interface TableStateParams<T, F extends FiltersMap> {\n  readonly collection: CollectionState<T, F>;\n  readonly container: WixPatternsContainer;\n  readonly toolbar?: ToolbarCollectionState<T, F>;\n}\n\ninterface TableDragAndDropStateBase<T, F extends FiltersMap> {\n  getStickyColumnsCount: (params: { stickyColumns: number }) => number;\n  init: () => void;\n  dnd: DragAndDropState<T, F>;\n}\n\nexport interface TableStateInitParams\n  extends ToolbarCollectionStateParamsInitParams {\n  hasMultiLevelSorting?: boolean;\n}\n\nexport interface TableStatePublicAPI<T, F extends FiltersMap> {\n  /**\n   * Underlying [CollectionState](./?path=/story/common-state--collectionstate) instance\n   * @external\n   */\n  readonly collection: CollectionState<T, F>;\n  /**\n   * Underlying [ToolbarCollectionState](./?path=/story/common-state--toolbarcollectionstate) instance\n   * @external\n   */\n  readonly toolbar: ToolbarCollectionState<T, F>;\n  /**\n   * Reset active filters & sorting and adds new items to the collection.\n   * @external\n   * @param items - new items to add to the collection\n   */\n  onAddItemActionComplete(items: T[]): void;\n\n  /**\n   * Visible columns as selected via [CustomColumns](./?path=/story/features-display--customcolumns)\n   * @external\n   */\n  readonly visibleColumns: { id: string }[];\n\n  /**\n   * Sorts the collection by a specified column and optional sort direction.\n   * @external\n   */\n  sort: (columnId: string, params: { forceDirection?: SortOrder }) => void;\n}\n\nexport class TableState<T, F extends FiltersMap>\n  implements ICollectionComponentState, TableStatePublicAPI<T, F>\n{\n  readonly toolbar;\n  readonly virtual;\n  readonly loadingRowState;\n\n  tableDragAndDropState: TableDragAndDropStateBase<T, F> | null = null;\n\n  constructor(params: TableStateParams<T, F>) {\n    this.toolbar =\n      params.toolbar ??\n      new ToolbarCollectionState({\n        collection: params.collection,\n        container: params.container,\n        componentType: 'Table',\n      });\n\n    this.virtual = new TableVirtualState({\n      table: this,\n    });\n\n    this.loadingRowState = new LoadingRowState();\n  }\n\n  get visibleColumns() {\n    return this.toolbar.selectedOrderedColumnsOrAll;\n  }\n\n  // backwards compat\n  get table() {\n    return this.toolbar;\n  }\n\n  get collection() {\n    return this.table.collection;\n  }\n\n  get tableState() {\n    return this;\n  }\n\n  get itemsContentWidth() {\n    return this.toolbar.itemsContentRect.rect.width ?? 0;\n  }\n\n  get itemsToRenderCount() {\n    return this.collection.result.size;\n  }\n\n  init(params: TableStateInitParams) {\n    return this.table.init(params);\n  }\n\n  get keyedItems() {\n    return this.collection.result.keyedItems;\n  }\n\n  getStickyColumnsCount(params: {\n    stickyColumns?: number;\n    horizontalScroll?: boolean;\n    showSelection?: boolean;\n    stickySelectionColumn?: boolean;\n  }) {\n    const { horizontalScroll } = params;\n\n    if (!horizontalScroll) {\n      return params.stickyColumns;\n    }\n\n    const { tableDragAndDropState, toolbar } = this;\n\n    const {\n      customColumnsState,\n      customColumnsProps,\n      customColumnsStateInitialized,\n    } = toolbar;\n\n    const { stickySelectionColumn, showSelection } = params;\n\n    let stickyColumns = params.stickyColumns ?? 0;\n\n    const customColumnsIsEffective =\n      customColumnsProps && customColumnsState && customColumnsStateInitialized;\n\n    const reorderDisabledColumnsIsEffective =\n      !!customColumnsState?.dragAndDrop?.orderedColumnsByReorderDisabled\n        .reorderDisabled?.length;\n\n    if (customColumnsIsEffective) {\n      stickyColumns = customColumnsState.getStickyColumnsCount({\n        ...params,\n        stickyColumns,\n      });\n    }\n\n    if (tableDragAndDropState) {\n      stickyColumns = tableDragAndDropState.getStickyColumnsCount({\n        ...params,\n        stickyColumns,\n      });\n    }\n\n    const checkboxColumnStickyCompat =\n      reorderDisabledColumnsIsEffective ||\n      stickySelectionColumn ||\n      tableDragAndDropState != null;\n\n    if (showSelection && checkboxColumnStickyCompat) {\n      stickyColumns += 1;\n    }\n\n    return stickyColumns;\n  }\n\n  get showEmptyState() {\n    return this.toolbar.multi.showEmptyState;\n  }\n\n  get hasAvailableItems() {\n    return this.toolbar.multi.hasAvailableItems;\n  }\n\n  get resultOriginQuerySearch() {\n    return this.toolbar.multi.resultOriginQuerySearch;\n  }\n\n  get hasNonPersistentActiveFilters() {\n    return this.toolbar.multi.hasNonPersistentActiveFilters;\n  }\n\n  get showErrorState() {\n    return this.toolbar.multi.showErrorState;\n  }\n\n  get errorStatus() {\n    return this.toolbar.multi.errorStatus;\n  }\n\n  get showLoadingState() {\n    const { initTask, toolbar } = this;\n    return (\n      initTask.status.isIdle ||\n      initTask.status.isLoading ||\n      toolbar.multi.showLoadingState\n    );\n  }\n\n  get initTask() {\n    return this.toolbar.initTask;\n  }\n\n  retryErrorState = () => this.toolbar.retryErrorState();\n\n  onAddItemActionComplete = async (items: T[]) => {\n    return this.toolbar.onAddItemActionComplete(items);\n  };\n\n  sort = (\n    columnId: string,\n    { forceDirection }: { forceDirection?: SortOrder } = {},\n  ) => {\n    this.collection.sort({ id: columnId }, { forceDirection });\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_ToolbarCollectionState","require","_TableVirtualState","_LoadingRowState","TableState","constructor","params","_defineProperty2","default","toolbar","retryErrorState","items","onAddItemActionComplete","columnId","forceDirection","collection","sort","id","ToolbarCollectionState","container","componentType","virtual","TableVirtualState","table","loadingRowState","LoadingRowState","visibleColumns","selectedOrderedColumnsOrAll","tableState","itemsContentWidth","itemsContentRect","rect","width","itemsToRenderCount","result","size","init","keyedItems","getStickyColumnsCount","_customColumnsState$d","horizontalScroll","stickyColumns","tableDragAndDropState","customColumnsState","customColumnsProps","customColumnsStateInitialized","stickySelectionColumn","showSelection","customColumnsIsEffective","reorderDisabledColumnsIsEffective","dragAndDrop","orderedColumnsByReorderDisabled","reorderDisabled","length","checkboxColumnStickyCompat","showEmptyState","multi","hasAvailableItems","resultOriginQuerySearch","hasNonPersistentActiveFilters","showErrorState","errorStatus","showLoadingState","initTask","status","isIdle","isLoading","exports"],"sources":["../../../src/state/TableState.ts"],"sourcesContent":["import {\n  CollectionState,\n  FiltersMap,\n  SortOrder,\n  WixPatternsContainer,\n} from '@wix/bex-core';\nimport {\n  ToolbarCollectionState,\n  ToolbarCollectionStateParamsInitParams,\n} from './ToolbarCollectionState';\nimport { TableVirtualState } from './TableVirtualState';\nimport { DragAndDropState } from '../components/DragAndDrop';\nimport { ICollectionComponentState } from './ICollectionComponentState';\nimport { LoadingRowState } from '../components/LoadingRow/LoadingRowState';\n\nexport interface TableStateParams<T, F extends FiltersMap> {\n  readonly collection: CollectionState<T, F>;\n  readonly container: WixPatternsContainer;\n  readonly toolbar?: ToolbarCollectionState<T, F>;\n}\n\ninterface TableDragAndDropStateBase<T, F extends FiltersMap> {\n  getStickyColumnsCount: (params: { stickyColumns: number }) => number;\n  init: () => void;\n  dnd: DragAndDropState<T, F>;\n}\n\nexport interface TableStateInitParams\n  extends ToolbarCollectionStateParamsInitParams {\n  hasMultiLevelSorting?: boolean;\n}\n\nexport interface TableStatePublicAPI<T, F extends FiltersMap> {\n  /**\n   * Underlying [CollectionState](./?path=/story/common-state--collectionstate) instance\n   * @external\n   */\n  readonly collection: CollectionState<T, F>;\n  /**\n   * Underlying [ToolbarCollectionState](./?path=/story/common-state--toolbarcollectionstate) instance\n   * @external\n   */\n  readonly toolbar: ToolbarCollectionState<T, F>;\n  /**\n   * Reset active filters & sorting and adds new items to the collection.\n   * @external\n   * @param items - new items to add to the collection\n   */\n  onAddItemActionComplete(items: T[]): void;\n\n  /**\n   * Visible columns as selected via [CustomColumns](./?path=/story/features-display--customcolumns)\n   * @external\n   */\n  readonly visibleColumns: { id: string }[];\n\n  /**\n   * Sorts the collection by a specified column and optional sort direction.\n   * @external\n   */\n  sort: (columnId: string, params: { forceDirection?: SortOrder }) => void;\n}\n\nexport class TableState<T, F extends FiltersMap>\n  implements ICollectionComponentState, TableStatePublicAPI<T, F>\n{\n  readonly toolbar;\n  readonly virtual;\n  readonly loadingRowState;\n\n  tableDragAndDropState: TableDragAndDropStateBase<T, F> | null = null;\n\n  /** The sticky table header element (column headers row) */\n  headerElement: HTMLElement | null = null;\n\n  constructor(params: TableStateParams<T, F>) {\n    this.toolbar =\n      params.toolbar ??\n      new ToolbarCollectionState({\n        collection: params.collection,\n        container: params.container,\n        componentType: 'Table',\n      });\n\n    this.virtual = new TableVirtualState({\n      table: this,\n    });\n\n    this.loadingRowState = new LoadingRowState();\n  }\n\n  get visibleColumns() {\n    return this.toolbar.selectedOrderedColumnsOrAll;\n  }\n\n  // backwards compat\n  get table() {\n    return this.toolbar;\n  }\n\n  get collection() {\n    return this.table.collection;\n  }\n\n  get tableState() {\n    return this;\n  }\n\n  get itemsContentWidth() {\n    return this.toolbar.itemsContentRect.rect.width ?? 0;\n  }\n\n  get itemsToRenderCount() {\n    return this.collection.result.size;\n  }\n\n  init(params: TableStateInitParams) {\n    return this.table.init(params);\n  }\n\n  get keyedItems() {\n    return this.collection.result.keyedItems;\n  }\n\n  getStickyColumnsCount(params: {\n    stickyColumns?: number;\n    horizontalScroll?: boolean;\n    showSelection?: boolean;\n    stickySelectionColumn?: boolean;\n  }) {\n    const { horizontalScroll } = params;\n\n    if (!horizontalScroll) {\n      return params.stickyColumns;\n    }\n\n    const { tableDragAndDropState, toolbar } = this;\n\n    const {\n      customColumnsState,\n      customColumnsProps,\n      customColumnsStateInitialized,\n    } = toolbar;\n\n    const { stickySelectionColumn, showSelection } = params;\n\n    let stickyColumns = params.stickyColumns ?? 0;\n\n    const customColumnsIsEffective =\n      customColumnsProps && customColumnsState && customColumnsStateInitialized;\n\n    const reorderDisabledColumnsIsEffective =\n      !!customColumnsState?.dragAndDrop?.orderedColumnsByReorderDisabled\n        .reorderDisabled?.length;\n\n    if (customColumnsIsEffective) {\n      stickyColumns = customColumnsState.getStickyColumnsCount({\n        ...params,\n        stickyColumns,\n      });\n    }\n\n    if (tableDragAndDropState) {\n      stickyColumns = tableDragAndDropState.getStickyColumnsCount({\n        ...params,\n        stickyColumns,\n      });\n    }\n\n    const checkboxColumnStickyCompat =\n      reorderDisabledColumnsIsEffective ||\n      stickySelectionColumn ||\n      tableDragAndDropState != null;\n\n    if (showSelection && checkboxColumnStickyCompat) {\n      stickyColumns += 1;\n    }\n\n    return stickyColumns;\n  }\n\n  get showEmptyState() {\n    return this.toolbar.multi.showEmptyState;\n  }\n\n  get hasAvailableItems() {\n    return this.toolbar.multi.hasAvailableItems;\n  }\n\n  get resultOriginQuerySearch() {\n    return this.toolbar.multi.resultOriginQuerySearch;\n  }\n\n  get hasNonPersistentActiveFilters() {\n    return this.toolbar.multi.hasNonPersistentActiveFilters;\n  }\n\n  get showErrorState() {\n    return this.toolbar.multi.showErrorState;\n  }\n\n  get errorStatus() {\n    return this.toolbar.multi.errorStatus;\n  }\n\n  get showLoadingState() {\n    const { initTask, toolbar } = this;\n    return (\n      initTask.status.isIdle ||\n      initTask.status.isLoading ||\n      toolbar.multi.showLoadingState\n    );\n  }\n\n  get initTask() {\n    return this.toolbar.initTask;\n  }\n\n  retryErrorState = () => this.toolbar.retryErrorState();\n\n  onAddItemActionComplete = async (items: T[]) => {\n    return this.toolbar.onAddItemActionComplete(items);\n  };\n\n  sort = (\n    columnId: string,\n    { forceDirection }: { forceDirection?: SortOrder } = {},\n  ) => {\n    this.collection.sort({ id: columnId }, { forceDirection });\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/state/Toolbar/ToolbarResponsiveState.js

@@ -23,8 +23,13 @@ class ToolbarResponsiveState {
     (0, _defineProperty2.default)(this, "search", void 0);
     (0, _defineProperty2.default)(this, "filters", void 0);
     (0, _defineProperty2.default)(this, "_groups", void 0);
+    (0, _defineProperty2.default)(this, "_shouldOverflow", false);
     (0, _defineProperty2.default)(this, "_measurementElement", null);
     (0, _defineProperty2.default)(this, "_contentElement", null);
+    // Width of non-group content that is removed from the DOM during overflow
+    // (e.g., tableGridSwitchButton). Must be accounted for in the exit-overflow
+    // calculation to prevent flicker.
+    (0, _defineProperty2.default)(this, "_overflowHiddenContentWidth", 0);
     (0, _defineProperty2.default)(this, "toolbar", void 0);
     (0, _defineProperty2.default)(this, "leftGroupState", null);
     (0, _defineProperty2.default)(this, "_recomputeThrottled", void 0);
@@ -43,6 +48,8 @@ class ToolbarResponsiveState {
     });
     this._groups = [this.actions, this.filters, this.search];
     (0, _mobx.makeObservable)(this, {
+      _shouldOverflow: _mobx.observable.ref,
+      _overflowHiddenContentWidth: _mobx.observable.ref,
       responsiveDisabled: _mobx.computed,
       _applyTargetState: _mobx.action
     });
@@ -86,12 +93,34 @@ class ToolbarResponsiveState {
       collapsedWidth: g.collapsedWidth,
       currentlyShrunk: g._shouldShrink
     }));
-    const groupsTotal = groups.reduce((sum, g) => sum + (g.currentlyShrunk ? g.collapsedWidth : g.expandedWidth), 0);
+
+    // When overflowing, the overflowable groups are removed from the DOM and
+    // replaced by the overflow button. Compute groupsTotal to reflect what the
+    // algorithm expects (all groups at their current widths) so that
+    // availableWidth = containerWidth - nonGroupContent is accurate.
+    let groupsTotal;
+    if (this._shouldOverflow) {
+      // contentWidth includes the overflow button but not the overflowable groups.
+      // groupsTotal must match: only non-overflowed groups + overflow button.
+      const overflowableIndices = ToolbarResponsiveState._overflowableGroupIndices;
+      const nonOverflowedTotal = groups.reduce((sum, g, i) => overflowableIndices.includes(i) ? sum : sum + (g.currentlyShrunk ? g.collapsedWidth : g.expandedWidth), 0);
+      groupsTotal = nonOverflowedTotal + _toolbarResponsiveConstants.OVERFLOW_BUTTON_WIDTH;
+    } else {
+      groupsTotal = groups.reduce((sum, g) => sum + (g.currentlyShrunk ? g.collapsedWidth : g.expandedWidth), 0);
+    }
+
+    // nonGroupContent that is hidden during overflow but would reappear on exit.
+    // Must be added back so the algorithm doesn't overestimate available space.
+    const hiddenContentAdjustment = this._shouldOverflow ? this._overflowHiddenContentWidth : 0;
     return {
-      availableWidth: containerWidth - (contentWidth - groupsTotal),
+      availableWidth: containerWidth - (contentWidth - groupsTotal) - hiddenContentAdjustment,
       groups
     };
   }
+
+  // Indices of groups that can be absorbed into the overflow menu.
+  // actions = 0, filters = 1 (search = 2 stays visible).
+
   _applyTargetState() {
     const input = this._computeResponsiveInput();
     if (!input) {
@@ -99,11 +128,15 @@ class ToolbarResponsiveState {
     }
     const result = (0, _computeResponsiveTargetState.computeResponsiveTargetState)({
       ...input,
-      expandThresholdBuffer: EXPAND_THRESHOLD_BUFFER
+      expandThresholdBuffer: EXPAND_THRESHOLD_BUFFER,
+      currentlyOverflowing: this._shouldOverflow,
+      overflowButtonWidth: _toolbarResponsiveConstants.OVERFLOW_BUTTON_WIDTH,
+      overflowableGroupIndices: ToolbarResponsiveState._overflowableGroupIndices
     });
     this._groups.forEach((g, i) => {
-      g._shouldShrink = result[i].shouldShrink;
+      g._shouldShrink = result.groups[i].shouldShrink;
     });
+    this._shouldOverflow = result.shouldOverflow;
   }
   init() {
     const {
@@ -134,4 +167,5 @@ class ToolbarResponsiveState {
   }
 }
 exports.ToolbarResponsiveState = ToolbarResponsiveState;
+(0, _defineProperty2.default)(ToolbarResponsiveState, "_overflowableGroupIndices", [0, 1]);
 //# sourceMappingURL=ToolbarResponsiveState.js.map

package/dist/cjs/state/Toolbar/ToolbarResponsiveState.js.map

@@ -1 +1 @@
-{"version":3,"names":["_bexCore","require","_mobx","_ToolbarResponsivePriorityState","_computeResponsiveTargetState","_toolbarResponsiveConstants","EXPAND_THRESHOLD_BUFFER","ToolbarResponsiveState","container","toolbar","constructor","params","_defineProperty2","default","actions","ToolbarResponsivePriorityState","responsive","filters","search","expandedWidth","SEARCH_EXPANDED_WIDTH","collapsedWidth","SEARCH_COLLAPSED_WIDTH","_groups","makeObservable","responsiveDisabled","computed","_applyTargetState","action","_syncedProps","internalExperiments","useResponsiveLayout","enabled","_scheduleRecompute","_this$_recomputeThrot","_recomputeThrottled","call","_computeResponsiveInput","_this$leftGroupState","el","_measurementElement","contentEl","_contentElement","leftGroupExcess","leftGroupState","getExcessWidth","containerWidth","clientWidth","contentWidth","scrollWidth","groups","map","g","currentlyShrunk","_shouldShrink","groupsTotal","reduce","sum","availableWidth","input","result","computeResponsiveTargetState","expandThresholdBuffer","forEach","i","shouldShrink","init","lodash","throttle","_rafId","window","requestAnimationFrame","runInAction","containerEl","toolbarRect","element","_this$_recomputeThrot2","cancel","disposers","addResizeObserver","_this$_recomputeThrot3","d","cancelAnimationFrame","exports"],"sources":["../../../../src/state/Toolbar/ToolbarResponsiveState.ts"],"sourcesContent":["import { addResizeObserver } from '@wix/bex-core';\nimport { action, computed, makeObservable, runInAction } from 'mobx';\nimport { ToolbarResponsivePriorityState } from './ToolbarResponsivePriorityState';\nimport { ToolbarState } from '../../components/CollectionToolbars/ToolbarState';\nimport { ToolbarLeftGroupState } from './ToolbarLeftGroupState';\nimport { computeResponsiveTargetState } from './computeResponsiveTargetState';\nimport {\n  SEARCH_COLLAPSED_WIDTH,\n  SEARCH_EXPANDED_WIDTH,\n} from './toolbarResponsiveConstants';\n\nexport interface ToolbarResponsiveStateParams {\n  readonly toolbar: ToolbarState<any, any>;\n}\n\n// Buffer (in px) added to the expand threshold to prevent flickering near the\n// expand/collapse boundary. Tuned to ~2-3x the inter-element gap (SP2 = 12px) --\n// large enough to absorb measurement rounding and flex reflow, small enough that\n// the dead zone per group isn't visually noticeable during gradual resizing.\nconst EXPAND_THRESHOLD_BUFFER = 30;\n\nexport class ToolbarResponsiveState {\n  readonly actions: ToolbarResponsivePriorityState;\n  readonly search: ToolbarResponsivePriorityState;\n  readonly filters: ToolbarResponsivePriorityState;\n\n  private readonly _groups: ToolbarResponsivePriorityState[];\n\n  _measurementElement: Element | null = null;\n  _contentElement: Element | null = null;\n\n  readonly toolbar: ToolbarState<any, any>;\n\n  leftGroupState: ToolbarLeftGroupState<any, any> | null = null;\n\n  get container() {\n    return this.toolbar.toolbar.container;\n  }\n\n  constructor(params: ToolbarResponsiveStateParams) {\n    this.toolbar = params.toolbar;\n\n    this.actions = new ToolbarResponsivePriorityState({\n      responsive: this,\n    });\n\n    this.filters = new ToolbarResponsivePriorityState({\n      responsive: this,\n    });\n\n    this.search = new ToolbarResponsivePriorityState({\n      responsive: this,\n      expandedWidth: SEARCH_EXPANDED_WIDTH,\n      collapsedWidth: SEARCH_COLLAPSED_WIDTH,\n    });\n\n    this._groups = [this.actions, this.filters, this.search];\n\n    makeObservable(this, {\n      responsiveDisabled: computed,\n      _applyTargetState: action,\n    });\n  }\n\n  get responsiveDisabled() {\n    const {\n      toolbar: {\n        toolbar: { _syncedProps },\n      },\n      container: { internalExperiments },\n    } = this;\n\n    return (\n      !_syncedProps?.useResponsiveLayout ||\n      !internalExperiments?.enabled('specs.cairo.EnableResponsiveToolbar11420')\n    );\n  }\n\n  _scheduleRecompute() {\n    if (this.responsiveDisabled) {\n      return;\n    }\n    this._recomputeThrottled?.();\n  }\n\n  private _computeResponsiveInput() {\n    const el = this._measurementElement;\n    const contentEl = this._contentElement;\n    if (!el || !contentEl) {\n      return null;\n    }\n\n    // The left group (title/tabs/views) has flex:1 and absorbs freed space when\n    // right-side items shrink. Account for its excess width so the algorithm sees\n    // the true available space and can expand items back when the container grows.\n    const leftGroupExcess = this.leftGroupState?.getExcessWidth() ?? 0;\n    const containerWidth = el.clientWidth + leftGroupExcess;\n    const contentWidth = contentEl.scrollWidth;\n\n    const groups = this._groups.map((g) => ({\n      expandedWidth: g.expandedWidth,\n      collapsedWidth: g.collapsedWidth,\n      currentlyShrunk: g._shouldShrink,\n    }));\n\n    const groupsTotal = groups.reduce(\n      (sum, g) => sum + (g.currentlyShrunk ? g.collapsedWidth : g.expandedWidth),\n      0,\n    );\n\n    return {\n      availableWidth: containerWidth - (contentWidth - groupsTotal),\n      groups,\n    };\n  }\n\n  _applyTargetState() {\n    const input = this._computeResponsiveInput();\n    if (!input) {\n      return;\n    }\n\n    const result = computeResponsiveTargetState({\n      ...input,\n      expandThresholdBuffer: EXPAND_THRESHOLD_BUFFER,\n    });\n\n    this._groups.forEach((g, i) => {\n      g._shouldShrink = result[i].shouldShrink;\n    });\n  }\n\n  private _recomputeThrottled?: ReturnType<typeof this.container.lodash.throttle>;\n  private _rafId = 0;\n\n  init() {\n    const { responsiveDisabled } = this;\n\n    if (responsiveDisabled) {\n      return () => {};\n    }\n\n    this._recomputeThrottled = this.container.lodash.throttle(() => {\n      this._rafId = window.requestAnimationFrame(() => {\n        runInAction(() => this._applyTargetState());\n      });\n    }, 200);\n\n    const containerEl =\n      this.toolbar.toolbar.toolbarRect.element;\n    if (!containerEl) {\n      return () => {\n        this._recomputeThrottled?.cancel();\n      };\n    }\n\n    const disposers = [\n      addResizeObserver(containerEl, this._recomputeThrottled),\n    ];\n\n    return () => {\n      disposers.forEach((d) => d?.());\n      this._recomputeThrottled?.cancel();\n      cancelAnimationFrame(this._rafId);\n    };\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_bexCore","require","_mobx","_ToolbarResponsivePriorityState","_computeResponsiveTargetState","_toolbarResponsiveConstants","EXPAND_THRESHOLD_BUFFER","ToolbarResponsiveState","container","toolbar","constructor","params","_defineProperty2","default","actions","ToolbarResponsivePriorityState","responsive","filters","search","expandedWidth","SEARCH_EXPANDED_WIDTH","collapsedWidth","SEARCH_COLLAPSED_WIDTH","_groups","makeObservable","_shouldOverflow","observable","ref","_overflowHiddenContentWidth","responsiveDisabled","computed","_applyTargetState","action","_syncedProps","internalExperiments","useResponsiveLayout","enabled","_scheduleRecompute","_this$_recomputeThrot","_recomputeThrottled","call","_computeResponsiveInput","_this$leftGroupState","el","_measurementElement","contentEl","_contentElement","leftGroupExcess","leftGroupState","getExcessWidth","containerWidth","clientWidth","contentWidth","scrollWidth","groups","map","g","currentlyShrunk","_shouldShrink","groupsTotal","overflowableIndices","_overflowableGroupIndices","nonOverflowedTotal","reduce","sum","i","includes","OVERFLOW_BUTTON_WIDTH","hiddenContentAdjustment","availableWidth","input","result","computeResponsiveTargetState","expandThresholdBuffer","currentlyOverflowing","overflowButtonWidth","overflowableGroupIndices","forEach","shouldShrink","shouldOverflow","init","lodash","throttle","_rafId","window","requestAnimationFrame","runInAction","containerEl","toolbarRect","element","_this$_recomputeThrot2","cancel","disposers","addResizeObserver","_this$_recomputeThrot3","d","cancelAnimationFrame","exports"],"sources":["../../../../src/state/Toolbar/ToolbarResponsiveState.ts"],"sourcesContent":["import { addResizeObserver } from '@wix/bex-core';\nimport {\n  action,\n  computed,\n  makeObservable,\n  observable,\n  runInAction,\n} from 'mobx';\nimport { ToolbarResponsivePriorityState } from './ToolbarResponsivePriorityState';\nimport { ToolbarState } from '../../components/CollectionToolbars/ToolbarState';\nimport { ToolbarLeftGroupState } from './ToolbarLeftGroupState';\nimport { computeResponsiveTargetState } from './computeResponsiveTargetState';\nimport {\n  OVERFLOW_BUTTON_WIDTH,\n  SEARCH_COLLAPSED_WIDTH,\n  SEARCH_EXPANDED_WIDTH,\n} from './toolbarResponsiveConstants';\n\nexport interface ToolbarResponsiveStateParams {\n  readonly toolbar: ToolbarState<any, any>;\n}\n\n// Buffer (in px) added to the expand threshold to prevent flickering near the\n// expand/collapse boundary. Tuned to ~2-3x the inter-element gap (SP2 = 12px) --\n// large enough to absorb measurement rounding and flex reflow, small enough that\n// the dead zone per group isn't visually noticeable during gradual resizing.\nconst EXPAND_THRESHOLD_BUFFER = 30;\n\nexport class ToolbarResponsiveState {\n  readonly actions: ToolbarResponsivePriorityState;\n  readonly search: ToolbarResponsivePriorityState;\n  readonly filters: ToolbarResponsivePriorityState;\n\n  private readonly _groups: ToolbarResponsivePriorityState[];\n\n  _shouldOverflow = false;\n\n  _measurementElement: Element | null = null;\n  _contentElement: Element | null = null;\n\n  // Width of non-group content that is removed from the DOM during overflow\n  // (e.g., tableGridSwitchButton). Must be accounted for in the exit-overflow\n  // calculation to prevent flicker.\n  _overflowHiddenContentWidth = 0;\n\n  readonly toolbar: ToolbarState<any, any>;\n\n  leftGroupState: ToolbarLeftGroupState<any, any> | null = null;\n\n  get container() {\n    return this.toolbar.toolbar.container;\n  }\n\n  constructor(params: ToolbarResponsiveStateParams) {\n    this.toolbar = params.toolbar;\n\n    this.actions = new ToolbarResponsivePriorityState({\n      responsive: this,\n    });\n\n    this.filters = new ToolbarResponsivePriorityState({\n      responsive: this,\n    });\n\n    this.search = new ToolbarResponsivePriorityState({\n      responsive: this,\n      expandedWidth: SEARCH_EXPANDED_WIDTH,\n      collapsedWidth: SEARCH_COLLAPSED_WIDTH,\n    });\n\n    this._groups = [this.actions, this.filters, this.search];\n\n    makeObservable(this, {\n      _shouldOverflow: observable.ref,\n      _overflowHiddenContentWidth: observable.ref,\n      responsiveDisabled: computed,\n      _applyTargetState: action,\n    });\n  }\n\n  get responsiveDisabled() {\n    const {\n      toolbar: {\n        toolbar: { _syncedProps },\n      },\n      container: { internalExperiments },\n    } = this;\n\n    return (\n      !_syncedProps?.useResponsiveLayout ||\n      !internalExperiments?.enabled('specs.cairo.EnableResponsiveToolbar11420')\n    );\n  }\n\n  _scheduleRecompute() {\n    if (this.responsiveDisabled) {\n      return;\n    }\n    this._recomputeThrottled?.();\n  }\n\n  private _computeResponsiveInput() {\n    const el = this._measurementElement;\n    const contentEl = this._contentElement;\n    if (!el || !contentEl) {\n      return null;\n    }\n\n    // The left group (title/tabs/views) has flex:1 and absorbs freed space when\n    // right-side items shrink. Account for its excess width so the algorithm sees\n    // the true available space and can expand items back when the container grows.\n    const leftGroupExcess = this.leftGroupState?.getExcessWidth() ?? 0;\n    const containerWidth = el.clientWidth + leftGroupExcess;\n    const contentWidth = contentEl.scrollWidth;\n\n    const groups = this._groups.map((g) => ({\n      expandedWidth: g.expandedWidth,\n      collapsedWidth: g.collapsedWidth,\n      currentlyShrunk: g._shouldShrink,\n    }));\n\n    // When overflowing, the overflowable groups are removed from the DOM and\n    // replaced by the overflow button. Compute groupsTotal to reflect what the\n    // algorithm expects (all groups at their current widths) so that\n    // availableWidth = containerWidth - nonGroupContent is accurate.\n    let groupsTotal: number;\n    if (this._shouldOverflow) {\n      // contentWidth includes the overflow button but not the overflowable groups.\n      // groupsTotal must match: only non-overflowed groups + overflow button.\n      const overflowableIndices =\n        ToolbarResponsiveState._overflowableGroupIndices;\n      const nonOverflowedTotal = groups.reduce(\n        (sum, g, i) =>\n          overflowableIndices.includes(i)\n            ? sum\n            : sum + (g.currentlyShrunk ? g.collapsedWidth : g.expandedWidth),\n        0,\n      );\n      groupsTotal = nonOverflowedTotal + OVERFLOW_BUTTON_WIDTH;\n    } else {\n      groupsTotal = groups.reduce(\n        (sum, g) =>\n          sum + (g.currentlyShrunk ? g.collapsedWidth : g.expandedWidth),\n        0,\n      );\n    }\n\n    // nonGroupContent that is hidden during overflow but would reappear on exit.\n    // Must be added back so the algorithm doesn't overestimate available space.\n    const hiddenContentAdjustment = this._shouldOverflow\n      ? this._overflowHiddenContentWidth\n      : 0;\n\n    return {\n      availableWidth:\n        containerWidth - (contentWidth - groupsTotal) - hiddenContentAdjustment,\n      groups,\n    };\n  }\n\n  // Indices of groups that can be absorbed into the overflow menu.\n  // actions = 0, filters = 1 (search = 2 stays visible).\n  private static readonly _overflowableGroupIndices = [0, 1];\n\n  _applyTargetState() {\n    const input = this._computeResponsiveInput();\n    if (!input) {\n      return;\n    }\n\n    const result = computeResponsiveTargetState({\n      ...input,\n      expandThresholdBuffer: EXPAND_THRESHOLD_BUFFER,\n      currentlyOverflowing: this._shouldOverflow,\n      overflowButtonWidth: OVERFLOW_BUTTON_WIDTH,\n      overflowableGroupIndices:\n        ToolbarResponsiveState._overflowableGroupIndices,\n    });\n\n    this._groups.forEach((g, i) => {\n      g._shouldShrink = result.groups[i].shouldShrink;\n    });\n    this._shouldOverflow = result.shouldOverflow;\n  }\n\n  private _recomputeThrottled?: ReturnType<\n    typeof this.container.lodash.throttle\n  >;\n  private _rafId = 0;\n\n  init() {\n    const { responsiveDisabled } = this;\n\n    if (responsiveDisabled) {\n      return () => {};\n    }\n\n    this._recomputeThrottled = this.container.lodash.throttle(() => {\n      this._rafId = window.requestAnimationFrame(() => {\n        runInAction(() => this._applyTargetState());\n      });\n    }, 200);\n\n    const containerEl = this.toolbar.toolbar.toolbarRect.element;\n    if (!containerEl) {\n      return () => {\n        this._recomputeThrottled?.cancel();\n      };\n    }\n\n    const disposers = [\n      addResizeObserver(containerEl, this._recomputeThrottled),\n    ];\n\n    return () => {\n      disposers.forEach((d) => d?.());\n      this._recomputeThrottled?.cancel();\n      cancelAnimationFrame(this._rafId);\n    };\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/state/Toolbar/computeResponsiveTargetState.js

@@ -6,16 +6,24 @@ function computeResponsiveTargetState(params) {
   const {
     availableWidth,
     groups,
-    expandThresholdBuffer
+    expandThresholdBuffer,
+    currentlyOverflowing = false,
+    overflowButtonWidth = 0,
+    overflowableGroupIndices = []
   } = params;
   if (groups.length === 0) {
-    return [];
+    return {
+      groups: [],
+      shouldOverflow: false
+    };
   }
   const result = groups.map(g => ({
     shouldShrink: g.currentlyShrunk
   }));
   const widthOf = (group, index) => result[index].shouldShrink ? group.collapsedWidth : group.expandedWidth;
   let total = groups.reduce((sum, g, i) => sum + widthOf(g, i), 0);
+
+  // Shrink pass
   for (let i = 0; i < groups.length; i++) {
     if (total <= availableWidth) {
       break;
@@ -26,23 +34,54 @@ function computeResponsiveTargetState(params) {
       total -= savings;
     }
   }
-  for (let i = groups.length - 1; i >= 0; i--) {
-    if (!result[i].shouldShrink) {
-      continue;
-    }
-    const expandCost = groups[i].expandedWidth - groups[i].collapsedWidth;
-    if (expandCost === 0) {
-      continue;
+
+  // Overflow detection: the "More" button is the step AFTER all groups have
+  // shrunk to their collapsed widths and it still doesn't fit.
+  // Flow: actions shrink → filters shrink → search shrinks → overflow.
+  const allShrunk = result.every(r => r.shouldShrink);
+  const hasOverflowConfig = overflowableGroupIndices.length > 0 && overflowButtonWidth > 0;
+  let shouldOverflow = false;
+  if (hasOverflowConfig && allShrunk && total > availableWidth) {
+    shouldOverflow = true;
+  } else if (hasOverflowConfig && currentlyOverflowing) {
+    // Hysteresis: stay in overflow until collapsed total + buffer fits,
+    // preventing flicker at the boundary.
+    const collapsedTotal = groups.reduce((sum, g) => sum + g.collapsedWidth, 0);
+    if (collapsedTotal + expandThresholdBuffer > availableWidth) {
+      shouldOverflow = true;
     }
-    if (total + expandCost + expandThresholdBuffer <= availableWidth) {
-      result[i].shouldShrink = false;
-      total += expandCost;
-    } else {
-      // Strict priority: if a higher-priority group (lower index) cannot expand,
-      // no lower-priority groups should expand either to avoid visual inconsistency.
-      break;
+  }
+  if (shouldOverflow) {
+    // Replace overflowable groups' widths with the single overflow button width
+    const overflowableTotal = overflowableGroupIndices.reduce((sum, idx) => sum + groups[idx].collapsedWidth, 0);
+    total = total - overflowableTotal + overflowButtonWidth;
+  }
+
+  // Expand pass — skip entirely while in overflow; everything stays collapsed
+  // until the container is wide enough to exit overflow, then groups expand
+  // in priority order (search last).
+  if (!shouldOverflow) {
+    for (let i = groups.length - 1; i >= 0; i--) {
+      if (!result[i].shouldShrink) {
+        continue;
+      }
+      const expandCost = groups[i].expandedWidth - groups[i].collapsedWidth;
+      if (expandCost === 0) {
+        continue;
+      }
+      if (total + expandCost + expandThresholdBuffer <= availableWidth) {
+        result[i].shouldShrink = false;
+        total += expandCost;
+      } else {
+        // Strict priority: if a higher-priority group (lower index) cannot expand,
+        // no lower-priority groups should expand either to avoid visual inconsistency.
+        break;
+      }
     }
   }
-  return result;
+  return {
+    groups: result,
+    shouldOverflow
+  };
 }
 //# sourceMappingURL=computeResponsiveTargetState.js.map

package/dist/cjs/state/Toolbar/computeResponsiveTargetState.js.map

@@ -1 +1 @@
-{"version":3,"names":["computeResponsiveTargetState","params","availableWidth","groups","expandThresholdBuffer","length","result","map","g","shouldShrink","currentlyShrunk","widthOf","group","index","collapsedWidth","expandedWidth","total","reduce","sum","i","savings","expandCost"],"sources":["../../../../src/state/Toolbar/computeResponsiveTargetState.ts"],"sourcesContent":["export interface ResponsiveGroupInput {\n  expandedWidth: number;\n  collapsedWidth: number;\n  currentlyShrunk: boolean;\n}\n\nexport interface ComputeResponsiveTargetStateParams {\n  availableWidth: number;\n  groups: ResponsiveGroupInput[];\n  expandThresholdBuffer: number;\n}\n\nexport interface ResponsiveGroupOutput {\n  shouldShrink: boolean;\n}\n\nexport function computeResponsiveTargetState(\n  params: ComputeResponsiveTargetStateParams,\n): ResponsiveGroupOutput[] {\n  const { availableWidth, groups, expandThresholdBuffer } = params;\n\n  if (groups.length === 0) {\n    return [];\n  }\n\n  const result: ResponsiveGroupOutput[] = groups.map((g) => ({\n    shouldShrink: g.currentlyShrunk,\n  }));\n\n  const widthOf = (group: ResponsiveGroupInput, index: number) =>\n    result[index].shouldShrink ? group.collapsedWidth : group.expandedWidth;\n\n  let total = groups.reduce((sum, g, i) => sum + widthOf(g, i), 0);\n\n  for (let i = 0; i < groups.length; i++) {\n    if (total <= availableWidth) {\n      break;\n    }\n    if (!result[i].shouldShrink) {\n      const savings = groups[i].expandedWidth - groups[i].collapsedWidth;\n      result[i].shouldShrink = true;\n      total -= savings;\n    }\n  }\n\n  for (let i = groups.length - 1; i >= 0; i--) {\n    if (!result[i].shouldShrink) {\n      continue;\n    }\n\n    const expandCost = groups[i].expandedWidth - groups[i].collapsedWidth;\n    if (expandCost === 0) {\n      continue;\n    }\n\n    if (total + expandCost + expandThresholdBuffer <= availableWidth) {\n      result[i].shouldShrink = false;\n      total += expandCost;\n    } else {\n      // Strict priority: if a higher-priority group (lower index) cannot expand,\n      // no lower-priority groups should expand either to avoid visual inconsistency.\n      break;\n    }\n  }\n\n  return result;\n}\n"],"mappings":";;;;AAgBO,SAASA,4BAA4BA,CAC1CC,MAA0C,EACjB;EACzB,MAAM;IAAEC,cAAc;IAAEC,MAAM;IAAEC;EAAsB,CAAC,GAAGH,MAAM;EAEhE,IAAIE,MAAM,CAACE,MAAM,KAAK,CAAC,EAAE;IACvB,OAAO,EAAE;EACX;EAEA,MAAMC,MAA+B,GAAGH,MAAM,CAACI,GAAG,CAAEC,CAAC,KAAM;IACzDC,YAAY,EAAED,CAAC,CAACE;EAClB,CAAC,CAAC,CAAC;EAEH,MAAMC,OAAO,GAAGA,CAACC,KAA2B,EAAEC,KAAa,KACzDP,MAAM,CAACO,KAAK,CAAC,CAACJ,YAAY,GAAGG,KAAK,CAACE,cAAc,GAAGF,KAAK,CAACG,aAAa;EAEzE,IAAIC,KAAK,GAAGb,MAAM,CAACc,MAAM,CAAC,CAACC,GAAG,EAAEV,CAAC,EAAEW,CAAC,KAAKD,GAAG,GAAGP,OAAO,CAACH,CAAC,EAAEW,CAAC,CAAC,EAAE,CAAC,CAAC;EAEhE,KAAK,IAAIA,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGhB,MAAM,CAACE,MAAM,EAAEc,CAAC,EAAE,EAAE;IACtC,IAAIH,KAAK,IAAId,cAAc,EAAE;MAC3B;IACF;IACA,IAAI,CAACI,MAAM,CAACa,CAAC,CAAC,CAACV,YAAY,EAAE;MAC3B,MAAMW,OAAO,GAAGjB,MAAM,CAACgB,CAAC,CAAC,CAACJ,aAAa,GAAGZ,MAAM,CAACgB,CAAC,CAAC,CAACL,cAAc;MAClER,MAAM,CAACa,CAAC,CAAC,CAACV,YAAY,GAAG,IAAI;MAC7BO,KAAK,IAAII,OAAO;IAClB;EACF;EAEA,KAAK,IAAID,CAAC,GAAGhB,MAAM,CAACE,MAAM,GAAG,CAAC,EAAEc,CAAC,IAAI,CAAC,EAAEA,CAAC,EAAE,EAAE;IAC3C,IAAI,CAACb,MAAM,CAACa,CAAC,CAAC,CAACV,YAAY,EAAE;MAC3B;IACF;IAEA,MAAMY,UAAU,GAAGlB,MAAM,CAACgB,CAAC,CAAC,CAACJ,aAAa,GAAGZ,MAAM,CAACgB,CAAC,CAAC,CAACL,cAAc;IACrE,IAAIO,UAAU,KAAK,CAAC,EAAE;MACpB;IACF;IAEA,IAAIL,KAAK,GAAGK,UAAU,GAAGjB,qBAAqB,IAAIF,cAAc,EAAE;MAChEI,MAAM,CAACa,CAAC,CAAC,CAACV,YAAY,GAAG,KAAK;MAC9BO,KAAK,IAAIK,UAAU;IACrB,CAAC,MAAM;MACL;MACA;MACA;IACF;EACF;EAEA,OAAOf,MAAM;AACf","ignoreList":[]}
+{"version":3,"names":["computeResponsiveTargetState","params","availableWidth","groups","expandThresholdBuffer","currentlyOverflowing","overflowButtonWidth","overflowableGroupIndices","length","shouldOverflow","result","map","g","shouldShrink","currentlyShrunk","widthOf","group","index","collapsedWidth","expandedWidth","total","reduce","sum","i","savings","allShrunk","every","r","hasOverflowConfig","collapsedTotal","overflowableTotal","idx","expandCost"],"sources":["../../../../src/state/Toolbar/computeResponsiveTargetState.ts"],"sourcesContent":["export interface ResponsiveGroupInput {\n  expandedWidth: number;\n  collapsedWidth: number;\n  currentlyShrunk: boolean;\n}\n\nexport interface ComputeResponsiveTargetStateParams {\n  availableWidth: number;\n  groups: ResponsiveGroupInput[];\n  expandThresholdBuffer: number;\n  currentlyOverflowing?: boolean;\n  overflowButtonWidth?: number;\n  overflowableGroupIndices?: number[];\n}\n\nexport interface ResponsiveGroupOutput {\n  shouldShrink: boolean;\n}\n\nexport interface ComputeResponsiveTargetStateResult {\n  groups: ResponsiveGroupOutput[];\n  shouldOverflow: boolean;\n}\n\nexport function computeResponsiveTargetState(\n  params: ComputeResponsiveTargetStateParams,\n): ComputeResponsiveTargetStateResult {\n  const {\n    availableWidth,\n    groups,\n    expandThresholdBuffer,\n    currentlyOverflowing = false,\n    overflowButtonWidth = 0,\n    overflowableGroupIndices = [],\n  } = params;\n\n  if (groups.length === 0) {\n    return { groups: [], shouldOverflow: false };\n  }\n\n  const result: ResponsiveGroupOutput[] = groups.map((g) => ({\n    shouldShrink: g.currentlyShrunk,\n  }));\n\n  const widthOf = (group: ResponsiveGroupInput, index: number) =>\n    result[index].shouldShrink ? group.collapsedWidth : group.expandedWidth;\n\n  let total = groups.reduce((sum, g, i) => sum + widthOf(g, i), 0);\n\n  // Shrink pass\n  for (let i = 0; i < groups.length; i++) {\n    if (total <= availableWidth) {\n      break;\n    }\n    if (!result[i].shouldShrink) {\n      const savings = groups[i].expandedWidth - groups[i].collapsedWidth;\n      result[i].shouldShrink = true;\n      total -= savings;\n    }\n  }\n\n  // Overflow detection: the \"More\" button is the step AFTER all groups have\n  // shrunk to their collapsed widths and it still doesn't fit.\n  // Flow: actions shrink → filters shrink → search shrinks → overflow.\n  const allShrunk = result.every((r) => r.shouldShrink);\n  const hasOverflowConfig =\n    overflowableGroupIndices.length > 0 && overflowButtonWidth > 0;\n\n  let shouldOverflow = false;\n\n  if (hasOverflowConfig && allShrunk && total > availableWidth) {\n    shouldOverflow = true;\n  } else if (hasOverflowConfig && currentlyOverflowing) {\n    // Hysteresis: stay in overflow until collapsed total + buffer fits,\n    // preventing flicker at the boundary.\n    const collapsedTotal = groups.reduce((sum, g) => sum + g.collapsedWidth, 0);\n    if (collapsedTotal + expandThresholdBuffer > availableWidth) {\n      shouldOverflow = true;\n    }\n  }\n\n  if (shouldOverflow) {\n    // Replace overflowable groups' widths with the single overflow button width\n    const overflowableTotal = overflowableGroupIndices.reduce(\n      (sum, idx) => sum + groups[idx].collapsedWidth,\n      0,\n    );\n    total = total - overflowableTotal + overflowButtonWidth;\n  }\n\n  // Expand pass — skip entirely while in overflow; everything stays collapsed\n  // until the container is wide enough to exit overflow, then groups expand\n  // in priority order (search last).\n  if (!shouldOverflow) {\n    for (let i = groups.length - 1; i >= 0; i--) {\n      if (!result[i].shouldShrink) {\n        continue;\n      }\n\n      const expandCost = groups[i].expandedWidth - groups[i].collapsedWidth;\n      if (expandCost === 0) {\n        continue;\n      }\n\n      if (total + expandCost + expandThresholdBuffer <= availableWidth) {\n        result[i].shouldShrink = false;\n        total += expandCost;\n      } else {\n        // Strict priority: if a higher-priority group (lower index) cannot expand,\n        // no lower-priority groups should expand either to avoid visual inconsistency.\n        break;\n      }\n    }\n  }\n\n  return { groups: result, shouldOverflow };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/state/Toolbar/toolbarResponsiveConstants.js

@@ -1,7 +1,11 @@
 "use strict";
 
 exports.__esModule = true;
-exports.SEARCH_EXPANDED_WIDTH = exports.SEARCH_COLLAPSED_WIDTH = void 0;
+exports.SEARCH_EXPANDED_WIDTH = exports.SEARCH_COLLAPSED_WIDTH = exports.OVERFLOW_BUTTON_WIDTH = exports.LAYOUT_SWITCH_BUTTON_WIDTH = void 0;
 const SEARCH_EXPANDED_WIDTH = exports.SEARCH_EXPANDED_WIDTH = 240;
 const SEARCH_COLLAPSED_WIDTH = exports.SEARCH_COLLAPSED_WIDTH = 140;
+const OVERFLOW_BUTTON_WIDTH = exports.OVERFLOW_BUTTON_WIDTH = 36;
+// Width of the layout switch IconButton (size="small") + SP2 gap (12px).
+// Used to account for hidden content during overflow exit calculation.
+const LAYOUT_SWITCH_BUTTON_WIDTH = exports.LAYOUT_SWITCH_BUTTON_WIDTH = 48;
 //# sourceMappingURL=toolbarResponsiveConstants.js.map

package/dist/cjs/state/Toolbar/toolbarResponsiveConstants.js.map

@@ -1 +1 @@
-{"version":3,"names":["SEARCH_EXPANDED_WIDTH","exports","SEARCH_COLLAPSED_WIDTH"],"sources":["../../../../src/state/Toolbar/toolbarResponsiveConstants.ts"],"sourcesContent":["export const SEARCH_EXPANDED_WIDTH = 240;\nexport const SEARCH_COLLAPSED_WIDTH = 140;\n"],"mappings":";;;;AAAO,MAAMA,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,GAAG;AACjC,MAAME,sBAAsB,GAAAD,OAAA,CAAAC,sBAAA,GAAG,GAAG","ignoreList":[]}
+{"version":3,"names":["SEARCH_EXPANDED_WIDTH","exports","SEARCH_COLLAPSED_WIDTH","OVERFLOW_BUTTON_WIDTH","LAYOUT_SWITCH_BUTTON_WIDTH"],"sources":["../../../../src/state/Toolbar/toolbarResponsiveConstants.ts"],"sourcesContent":["export const SEARCH_EXPANDED_WIDTH = 240;\nexport const SEARCH_COLLAPSED_WIDTH = 140;\nexport const OVERFLOW_BUTTON_WIDTH = 36;\n// Width of the layout switch IconButton (size=\"small\") + SP2 gap (12px).\n// Used to account for hidden content during overflow exit calculation.\nexport const LAYOUT_SWITCH_BUTTON_WIDTH = 48;\n"],"mappings":";;;;AAAO,MAAMA,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAG,GAAG;AACjC,MAAME,sBAAsB,GAAAD,OAAA,CAAAC,sBAAA,GAAG,GAAG;AAClC,MAAMC,qBAAqB,GAAAF,OAAA,CAAAE,qBAAA,GAAG,EAAE;AACvC;AACA;AACO,MAAMC,0BAA0B,GAAAH,OAAA,CAAAG,0BAAA,GAAG,EAAE","ignoreList":[]}

package/dist/cjs/styles.global.css

@@ -1 +1 @@
-.CardContainer1566366143__root.CardContainer1566366143--mobile{border-radius:0}.Collapse2986371253__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse2986371253__exit{height:0}.CollectionPage3366515438__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage3366515438__root.CollectionPage3366515438--mobile{--wds-page-header-padding-horizontal:0;--wds-page-header-padding-horizontal-small:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage3366515438__root.CollectionPage3366515438--panel{overflow:hidden;position:relative}.CollectionSectionHeader4023101680__summaryIcon{display:flex;color:var(--wds-color-text-standard-secondary)}.CollectionTable2981164327__root td{vertical-align:middle}.CollectionTable2981164327__root.CollectionTable2981164327--mobile td:first-child{padding-left:18px}.CollectionTable2981164327__root.CollectionTable2981164327--mobile td:last-child{padding-right:18px}.CollectionToolbar953780465__left{min-width:0}.CollectionToolbar953780465__left.CollectionToolbar953780465--expandable{flex:auto}.CollectionToolbar953780465__left.CollectionToolbar953780465--title>*{width:100%}.CollectionToolbar953780465__root.CollectionToolbar953780465---responsiveMode-5-title .CollectionToolbar953780465__left{flex:1 100;min-width:50px}.CollectionToolbar953780465__root.CollectionToolbar953780465---responsiveMode-4-tabs .CollectionToolbar953780465__left,.CollectionToolbar953780465__root.CollectionToolbar953780465---responsiveMode-4-tabs .CollectionToolbar953780465__left.CollectionToolbar953780465--expandable{flex:1 100 auto;min-width:140px}.CollectionToolbar953780465__root.CollectionToolbar953780465---responsiveMode-4-tabs .CollectionToolbar953780465__left>*{flex-shrink:1;min-width:0}.CollectionToolbar953780465__root .CollectionToolbar953780465__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar953780465__root.CollectionToolbar953780465--views .CollectionToolbar953780465__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar953780465__root.CollectionToolbar953780465---responsiveMode-4-tabs .CollectionToolbar953780465__right,.CollectionToolbar953780465__root.CollectionToolbar953780465---responsiveMode-5-title .CollectionToolbar953780465__right{flex:0 1 auto;min-width:0}.CollectionToolbar953780465__root .CollectionToolbar953780465__right.CollectionToolbar953780465__fullWidth{margin-inline-start:0!important}.CollectionToolbar953780465__root.CollectionToolbar953780465--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter1304714687__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter1304714687__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter1304714687__searchMobile:not(.SearchOrCustomFilter1304714687--expandable){left:18px}.SearchOrCustomFilter1304714687__searchMobile.SearchOrCustomFilter1304714687--expandable.SearchOrCustomFilter1304714687--expanded{left:18px}.AutoCompleteReadonly844239590__root.AutoCompleteReadonly844239590--disableEditing{cursor:pointer}.AutoCompleteReadonly844239590__root.AutoCompleteReadonly844239590--disableEditing input{cursor:pointer}.ViewsDropdown267929420__root{width:200px}.DragHandle3347869420__root{display:flex;align-items:center}.DragHandle3347869420__root:not(.DragHandle3347869420--disabled){cursor:grab;color:#a8caff}.DragHandle3347869420__root.DragHandle3347869420--disabled{color:#acafc4}.DragHandle3347869420__root:focus-visible:not(.DragHandle3347869420--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle3347869420__root.DragHandle3347869420--disabled{pointer-events:none}.DragHandle3347869420__root.DragHandle3347869420--dragging:not(.DragHandle3347869420--disabled){cursor:grabbing}.EntityPagePlain2305275193__root.EntityPagePlain2305275193--mobile{--wds-page-header-padding-horizontal:0}.Fade2577267590__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade2577267590__root.Fade2577267590--exit{opacity:0}.Heading774911002__root{visibility:visible}.Heading774911002__root.Heading774911002--appearanceH2{font-size:28px!important;line-height:36px!important}.ImportStepUpload2190126313__fileUpload{width:100%}.InputOverflow202707770__root.InputOverflow202707770--selected:not(.InputOverflow202707770--focused) input::placeholder{color:#000624}@keyframes LoadingRow3461175397__gradientSwoosh{0%{background-position:50% 50%;background-size:150% 125%}15%{background-position:75% 40%;background-size:130% 115%}30%{background-position:50% 50%;background-size:120% 135%}60%{background-position:30% 50%;background-size:120% 135%}80%{background-position:10% 30%;background-size:130% 155%}to{background-position:40% 45%;background-size:125% 135%}}.LoadingRow3461175397__root{background-image:linear-gradient(60deg,rgba(255,255,255,.15)0,rgba(255,255,255,.15) 50%,rgba(95,242,174,.15) 100%),linear-gradient(284.81deg,#fff 67.18%,#91bbff 158.87%),linear-gradient(29deg,rgba(145,187,255,.6)0,#fff 40%,rgba(95,242,174,.6) 100%);height:100%;background-size:150% 125%;background-repeat:no-repeat;animation:LoadingRow3461175397__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText216893253__root{opacity:1}.MaxHeightText216893253__root.MaxHeightText216893253--height24{line-height:24px}.MaxLines1284639450__root{overflow:hidden}.MaxLines1284639450__root.MaxLines1284639450--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar791660869__root{min-width:0}.MultiBulkActionToolbar791660869__leftGroupWrapper{padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar791660869__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar791660869__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow2310651378__root td{padding:0!important;width:100%}.NestedTableRow2704827787__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow2704827787__root:hover{background-color:#e7f0ff!important}.NestedTableRow2704827787__root.NestedTableRow2704827787--expandable{cursor:pointer}.NestedTableRow2704827787__placeholder td{padding:0!important;width:100%}.NestedTableRow2704827787__root:hover td:first-of-type::before,.NestedTableRow2704827787__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect1637060963__root{position:absolute;transform:translate(6px,6px);background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,6,36,.12),0 0 6px 0 rgba(0,6,36,.12)}.NestedTableDragAndDropRow11113410__root.NestedTableDragAndDropRow11113410--draggingInto td{background-color:#e7f0ff!important}.PickerContent1005862874__root{display:flex}.PickerContentAdditionalStep1256051322__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep1256051322__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem1960942270__root{box-sizing:border-box}.ScrollableContent4102213427__root.ScrollableContent4102213427--overflowY{overflow-y:auto}.ScrollableContent4102213427__root.ScrollableContent4102213427--overflowX{overflow-x:auto}.ScrollableContent4102213427__root.ScrollableContent4102213427--smooth{scroll-behavior:smooth}.SkeletonCard543860056__headerLoading{display:block!important}.SlidingModal3880889394__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal3880889394__root.SlidingModal3880889394--overlay{transition:transform 0s ease 0s}.SlidingModal3880889394__root.SlidingModal3880889394---appendTo-6-parent{position:absolute}.SlidingModal3880889394__root:not(.SlidingModal3880889394--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter1147196558__root .TabsFilter1147196558__title{color:var(--wds-tabs-label-fill, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)))}.TabsFilter1147196558__root.TabsFilter1147196558--selected .TabsFilter1147196558__title,.TabsFilter1147196558__root:hover .TabsFilter1147196558__title{color:var(--wds-tabs-label-fill-active, var(--wsr-color-B10, #116DFF))}.ManageTagsModal3682471619__root{display:flex}.ToolbarItem1139159954__root{min-width:0}.ToolbarItemBox20441471__root{min-width:0}.ToolbarItemBox20441471__root.ToolbarItemBox20441471--removeStartPadding{margin-left:-24px}.ToolbarItemBox20441471__root.ToolbarItemBox20441471--expandable{flex:1 0}.common909002123__column{display:flex;flex-direction:column}.common909002123__fullHeight{height:100%;min-height:0}.CollectionPageHeader2424010381__root:not(.CollectionPageHeader2424010381--mobile){gap:12px}.CollectionPageHeader2424010381__root.CollectionPageHeader2424010381--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader2424010381__root.CollectionPageHeader2424010381--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader4138825591__root.FormPageHeader4138825591--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader4138825591__root.FormPageHeader4138825591--mobile>*{margin-left:0;margin-top:6px!important;height:auto}
+.CardContainer2168501202__root.CardContainer2168501202--mobile{border-radius:0}.Collapse4048424257__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse4048424257__exit{height:0}.CollectionPage276279459__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage276279459__root.CollectionPage276279459--mobile{--wds-page-header-padding-horizontal:0;--wds-page-header-padding-horizontal-small:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage276279459__root.CollectionPage276279459--panel{overflow:hidden;position:relative}.CollectionSectionHeader1447244304__summaryIcon{display:flex;color:var(--wds-color-text-standard-secondary)}.CollectionTable4289411793__root td{vertical-align:middle}.CollectionTable4289411793__root.CollectionTable4289411793--mobile td:first-child{padding-left:18px}.CollectionTable4289411793__root.CollectionTable4289411793--mobile td:last-child{padding-right:18px}.CollectionToolbar3017975653__left{min-width:0}.CollectionToolbar3017975653__left.CollectionToolbar3017975653--expandable{flex:auto}.CollectionToolbar3017975653__left.CollectionToolbar3017975653--title>*{width:100%}.CollectionToolbar3017975653__root.CollectionToolbar3017975653---responsiveMode-5-title .CollectionToolbar3017975653__left{flex:1 100;min-width:50px}.CollectionToolbar3017975653__root.CollectionToolbar3017975653---responsiveMode-4-tabs .CollectionToolbar3017975653__left,.CollectionToolbar3017975653__root.CollectionToolbar3017975653---responsiveMode-4-tabs .CollectionToolbar3017975653__left.CollectionToolbar3017975653--expandable{flex:1 100 auto;min-width:140px}.CollectionToolbar3017975653__root.CollectionToolbar3017975653---responsiveMode-4-tabs .CollectionToolbar3017975653__left>*{flex-shrink:1;min-width:0}.CollectionToolbar3017975653__root .CollectionToolbar3017975653__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar3017975653__root.CollectionToolbar3017975653--views .CollectionToolbar3017975653__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar3017975653__root.CollectionToolbar3017975653---responsiveMode-4-tabs .CollectionToolbar3017975653__right,.CollectionToolbar3017975653__root.CollectionToolbar3017975653---responsiveMode-5-title .CollectionToolbar3017975653__right{flex:0 1 auto;min-width:0}.CollectionToolbar3017975653__root .CollectionToolbar3017975653__right.CollectionToolbar3017975653__fullWidth{margin-inline-start:0!important}.CollectionToolbar3017975653__root.CollectionToolbar3017975653--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter1183156895__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter1183156895__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter1183156895__searchMobile:not(.SearchOrCustomFilter1183156895--expandable){left:18px}.SearchOrCustomFilter1183156895__searchMobile.SearchOrCustomFilter1183156895--expandable.SearchOrCustomFilter1183156895--expanded{left:18px}.AutoCompleteReadonly1590410434__root.AutoCompleteReadonly1590410434--disableEditing{cursor:pointer}.AutoCompleteReadonly1590410434__root.AutoCompleteReadonly1590410434--disableEditing input{cursor:pointer}.ViewsDropdown2299579084__root{width:200px}.DragHandle2706796462__root{display:flex;align-items:center}.DragHandle2706796462__root:not(.DragHandle2706796462--disabled){cursor:grab;color:#a8caff}.DragHandle2706796462__root.DragHandle2706796462--disabled{color:#acafc4}.DragHandle2706796462__root:focus-visible:not(.DragHandle2706796462--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle2706796462__root.DragHandle2706796462--disabled{pointer-events:none}.DragHandle2706796462__root.DragHandle2706796462--dragging:not(.DragHandle2706796462--disabled){cursor:grabbing}td:has(>.EditableCell4007055773__root){position:relative;min-height:24px}.EditableCell4007055773__root{display:flex;align-items:center;padding:0;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;box-sizing:border-box;outline:0;cursor:default;user-select:none;background:var(--wsr-color-D80);border:1px solid var(--wsr-color-B40)}.EditableCell4007055773__root.EditableCell4007055773--selected{background:rgba(56,153,236,.08)}.EditableCell4007055773__root.EditableCell4007055773--focused:not(.EditableCell4007055773--selected){box-shadow:inset 0 0 0 2px var(--wsr-color-B10);z-index:2}.EditableCell4007055773__root.EditableCell4007055773--editing{background:var(--wsr-color-D80);box-shadow:inset 0 0 0 2px var(--wsr-color-B10);z-index:3;user-select:auto;overflow:visible}.EditableCell4007055773__root.EditableCell4007055773--selectionTop{border-top:2px solid var(--wsr-color-B10)}.EditableCell4007055773__root.EditableCell4007055773--selectionBottom{border-bottom:2px solid var(--wsr-color-B10)}.EditableCell4007055773__root.EditableCell4007055773--selectionLeft{border-left:2px solid var(--wsr-color-B10)}.EditableCell4007055773__root.EditableCell4007055773--selectionRight{border-right:2px solid var(--wsr-color-B10)}.EditableCell4007055773__root.EditableCell4007055773--invalid:not(.EditableCell4007055773--editing){background:rgba(229,0,77,.06)}.EditableCell4007055773__root.EditableCell4007055773--copiedTop:not(.EditableCell4007055773--selectionTop){border-top:2px dashed var(--wsr-color-B10)}.EditableCell4007055773__root.EditableCell4007055773--copiedBottom:not(.EditableCell4007055773--selectionBottom){border-bottom:2px dashed var(--wsr-color-B10)}.EditableCell4007055773__root.EditableCell4007055773--copiedLeft:not(.EditableCell4007055773--selectionLeft){border-left:2px dashed var(--wsr-color-B10)}.EditableCell4007055773__root.EditableCell4007055773--copiedRight:not(.EditableCell4007055773--selectionRight){border-right:2px dashed var(--wsr-color-B10)}.EditableCell4007055773__validationIndicator{flex-shrink:0;margin-left:12px;margin-right:6px;color:var(--wsr-color-Y10)}.Edit3240722367__booleanEdit{display:flex;align-items:center;margin-left:12px}.View3426461177__booleanView{display:flex;align-items:center;margin-left:9px;pointer-events:none}.Edit3386202237__dateInput{width:100%;margin-left:-1px}.View292028254__textView{width:100%;padding:9px 12px}.Edit3860369112__emailInput{width:100%;margin-left:-1px}.View150901042__textView{width:100%;padding:9px 12px}.Edit1803646036__numberInput{width:100%;margin-right:2px}.Edit1803646036__numberInput input{text-align:right;direction:ltr}.View2720415983__textView{width:100%;padding:9px 12px;text-align:right}.Edit136607306__jsonInput{width:100%;margin-left:-1px}.View2058179119__textView{width:100%;padding:9px 12px}.Edit2518330657__selectInput{width:100%}.View2299310086__textView{width:100%;padding:9px 12px}.Edit3813731711__editWrapper{width:100%}.Edit3813731711__inputArea{background-color:transparent;width:100%}.Edit3813731711__inputArea>div{border:0!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;outline:0!important}.Edit3813731711__inputArea textarea{padding:9px 12px 8px!important;outline:0!important;border:0!important}.Edit3813731711__inputArea:not(.Edit3813731711--isFocused) textarea{resize:none;overflow:hidden}.Edit3813731711__inputArea:not(.Edit3813731711--isFocused) textarea::-webkit-scrollbar{display:none}.View3275766842__textView{width:100%;padding:9px 12px}.Edit1324021997__urlInput{width:100%;margin-left:-1px}.View567257960__textView{width:100%;padding:9px 12px;display:flex;align-items:center;justify-content:space-between}.View567257960__urlText{flex:1;min-width:0}.View567257960__suffix{flex-shrink:0;margin-left:10px}.View567257960__textView.View567257960--suffixOnHover:not(:hover) .View567257960__suffix{display:none}.EntityPagePlain2605367659__root.EntityPagePlain2605367659--mobile{--wds-page-header-padding-horizontal:0}.Fade3987565292__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade3987565292__root.Fade3987565292--exit{opacity:0}.Heading1326594153__root{visibility:visible}.Heading1326594153__root.Heading1326594153--appearanceH2{font-size:28px!important;line-height:36px!important}.ImportStepUpload2527291098__fileUpload{width:100%}.InputOverflow2955188721__root.InputOverflow2955188721--selected:not(.InputOverflow2955188721--focused) input::placeholder{color:#000624}@keyframes LoadingRow488784554__gradientSwoosh{0%{background-position:50% 50%;background-size:150% 125%}15%{background-position:75% 40%;background-size:130% 115%}30%{background-position:50% 50%;background-size:120% 135%}60%{background-position:30% 50%;background-size:120% 135%}80%{background-position:10% 30%;background-size:130% 155%}to{background-position:40% 45%;background-size:125% 135%}}.LoadingRow488784554__root{background-image:linear-gradient(60deg,rgba(255,255,255,.15)0,rgba(255,255,255,.15) 50%,rgba(95,242,174,.15) 100%),linear-gradient(284.81deg,#fff 67.18%,#91bbff 158.87%),linear-gradient(29deg,rgba(145,187,255,.6)0,#fff 40%,rgba(95,242,174,.6) 100%);height:100%;background-size:150% 125%;background-repeat:no-repeat;animation:LoadingRow488784554__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText2696233809__root{opacity:1}.MaxHeightText2696233809__root.MaxHeightText2696233809--height24{line-height:24px}.MaxLines3057111191__root{overflow:hidden}.MaxLines3057111191__root.MaxLines3057111191--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar821506402__root{min-width:0}.MultiBulkActionToolbar821506402__leftGroupWrapper{padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar821506402__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar821506402__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow3678363266__root td{padding:0!important;width:100%}.NestedTableRow3906551943__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow3906551943__root:hover{background-color:#e7f0ff!important}.NestedTableRow3906551943__root.NestedTableRow3906551943--expandable{cursor:pointer}.NestedTableRow3906551943__placeholder td{padding:0!important;width:100%}.NestedTableRow3906551943__root:hover td:first-of-type::before,.NestedTableRow3906551943__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect1706234059__root{position:absolute;transform:translate(6px,6px);background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,6,36,.12),0 0 6px 0 rgba(0,6,36,.12)}.NestedTableDragAndDropRow963030393__root.NestedTableDragAndDropRow963030393--draggingInto td{background-color:#e7f0ff!important}.PickerContent4004721251__root{display:flex}.PickerContentAdditionalStep3378583378__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep3378583378__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem3045741371__root{box-sizing:border-box}.ScrollableContent1159900848__root.ScrollableContent1159900848--overflowY{overflow-y:auto}.ScrollableContent1159900848__root.ScrollableContent1159900848--overflowX{overflow-x:auto}.ScrollableContent1159900848__root.ScrollableContent1159900848--smooth{scroll-behavior:smooth}.SkeletonCard2332620532__headerLoading{display:block!important}.SlidingModal2730405760__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal2730405760__root.SlidingModal2730405760--overlay{transition:transform 0s ease 0s}.SlidingModal2730405760__root.SlidingModal2730405760---appendTo-6-parent{position:absolute}.SlidingModal2730405760__root:not(.SlidingModal2730405760--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter409906628__root .TabsFilter409906628__title{color:var(--wds-tabs-label-fill, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)))}.TabsFilter409906628__root.TabsFilter409906628--selected .TabsFilter409906628__title,.TabsFilter409906628__root:hover .TabsFilter409906628__title{color:var(--wds-tabs-label-fill-active, var(--wsr-color-B10, #116DFF))}.ManageTagsModal3917873617__root{display:flex}.ToolbarItem15520440__root{min-width:0}.ToolbarItemBox939755603__root{min-width:0}.ToolbarItemBox939755603__root.ToolbarItemBox939755603--removeStartPadding{margin-left:-24px}.ToolbarItemBox939755603__root.ToolbarItemBox939755603--expandable{flex:1 0}.common1802833007__column{display:flex;flex-direction:column}.common1802833007__fullHeight{height:100%;min-height:0}.CollectionPageHeader2854830172__root:not(.CollectionPageHeader2854830172--mobile){gap:12px}.CollectionPageHeader2854830172__root.CollectionPageHeader2854830172--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader2854830172__root.CollectionPageHeader2854830172--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader2449721271__root.FormPageHeader2449721271--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader2449721271__root.FormPageHeader2449721271--mobile>*{margin-left:0;margin-top:6px!important;height:auto}

package/dist/cjs/testkit/jsdom.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.ViewsStandaloneTestkit = exports.ViewsStandaloneSaveModalTestkit = exports.TagsWidgetTestkit = exports.TableTestkit = exports.TableGridSwitchTestkit = exports.TableGridSwitchFoldersTestkit = exports.TableFoldersTestkit = exports.SuggestionsTestkit = exports.SkeletonCardTestkit = exports.SettingsPageTestkit = exports.SearchableCollectionContentTestkit = exports.RequestIdTestkit = exports.PickerStandaloneTestkit = exports.PickerModalTestkit = exports.PageSubTitleTestkit = exports.PageErrorStateTestkit = exports.NestedTableTestkit = exports.KanbanTestkit = exports.GridTestkit = exports.GridFoldersTestkit = exports.ErrorCardTestkit = exports.EntityPageTestkit = exports.CustomFieldsWidgetTestkit = exports.CustomFieldsViewWidgetTestkit = exports.CustomFieldModalTestkit = exports.CollectionPageTestkit = exports.CardContainerTestkit = void 0;
+exports.ViewsStandaloneTestkit = exports.ViewsStandaloneSaveModalTestkit = exports.TagsWidgetTestkit = exports.TableTestkit = exports.TableGridSwitchTestkit = exports.TableGridSwitchFoldersTestkit = exports.TableFoldersTestkit = exports.SuggestionsTestkit = exports.SkeletonCardTestkit = exports.SettingsPageTestkit = exports.SearchableCollectionContentTestkit = exports.RequestIdTestkit = exports.PickerStandaloneTestkit = exports.PickerModalTestkit = exports.PageSubTitleTestkit = exports.PageErrorStateTestkit = exports.NestedTableTestkit = exports.KanbanTestkit = exports.GridTestkit = exports.GridFoldersTestkit = exports.ErrorCardTestkit = exports.EntityPageTestkit = exports.EditableTableTestkit = exports.CustomFieldsWidgetTestkit = exports.CustomFieldsViewWidgetTestkit = exports.CustomFieldModalTestkit = exports.CollectionPageTestkit = exports.CardContainerTestkit = void 0;
 var _vanilla = require("@wix/wix-ui-test-utils/vanilla");
 var _TableUni = _interopRequireDefault(require("../components/Table/Table.uni.driver"));
 var _PickerStandaloneUni = _interopRequireDefault(require("../components/PickerStandalone/PickerStandalone.uni.driver"));
@@ -31,6 +31,7 @@ var _CustomFieldModalUni = require("../components/CustomFieldModal/CustomFieldMo
 var _RequestIdUni = _interopRequireDefault(require("../components/RequestId/RequestId.uni.driver"));
 var _SearchableCollectionContentUni = require("../components/SearchableCollectionContent/SearchableCollectionContent.uni.driver");
 var _SuggestionsUni = require("../components/Suggestions/Suggestions.uni.driver");
+var _EditableTableUni = _interopRequireDefault(require("../components/EditableTable/EditableTable.uni.driver"));
 const TableTestkit = exports.TableTestkit = (0, _vanilla.uniTestkitFactoryCreator)(_TableUni.default);
 const GridTestkit = exports.GridTestkit = (0, _vanilla.uniTestkitFactoryCreator)(_GridUni.GridUniDriver);
 const TableGridSwitchTestkit = exports.TableGridSwitchTestkit = (0, _vanilla.uniTestkitFactoryCreator)(_TableGridSwitchUni.TableGridSwitchUniDriver);
@@ -58,4 +59,5 @@ const CustomFieldModalTestkit = exports.CustomFieldModalTestkit = (0, _vanilla.u
 const RequestIdTestkit = exports.RequestIdTestkit = (0, _vanilla.uniTestkitFactoryCreator)(_RequestIdUni.default);
 const SearchableCollectionContentTestkit = exports.SearchableCollectionContentTestkit = (0, _vanilla.uniTestkitFactoryCreator)(_SearchableCollectionContentUni.SearchableCollectionContentUniDriver);
 const SuggestionsTestkit = exports.SuggestionsTestkit = (0, _vanilla.uniTestkitFactoryCreator)(_SuggestionsUni.SuggestionsUniDriver);
+const EditableTableTestkit = exports.EditableTableTestkit = (0, _vanilla.uniTestkitFactoryCreator)(_EditableTableUni.default);
 //# sourceMappingURL=jsdom.js.map