@wix/patterns 1.400.0 → 1.403.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns",
-  "version": "1.400.0",
+  "version": "1.403.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -214,10 +214,10 @@
   ],
   "dependencies": {
     "@wix/agent-platform-bm-sdk": "^1.0.0",
-    "@wix/bex-core": "2.309.0",
-    "@wix/bex-utils": "2.98.0",
+    "@wix/bex-core": "2.311.0",
+    "@wix/bex-utils": "2.100.0",
     "@wix/essentials": "^0.1.26",
-    "@wix/patterns-fields": "1.29.0",
+    "@wix/patterns-fields": "1.32.0",
     "@wix/sdk": "^1.15.22",
     "@wix/wix-style-react-incubator": "3.19.0",
     "@wix/wix-ui-test-utils": "^1.1.9",
@@ -280,7 +280,7 @@
     "@wix/awaiter-utils": "^1.0.76",
     "@wix/babel-cli": "^1.11.0",
     "@wix/business-manager-api": "^1.470.0",
-    "@wix/cairo-integration-utils": "1.73.0",
+    "@wix/cairo-integration-utils": "1.75.0",
     "@wix/ci-build-info": "^1.0.0",
     "@wix/crm": "^1.0.93",
     "@wix/dashboard": "^1.3.39",
@@ -437,5 +437,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "a9e017f8dd3a1d7862222e39a4163a7fe017870b3c54da63e7f1ec03"
+  "falconPackageHash": "a815b5ce8a808031de8f7ab2d6218b98326fe2505e4e7101dac3ff3b"
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CardContainer3211915182";
+var _namespace_ = "CardContainer2250090011";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CardContainer3211915182__root"};
+export var classes = {"root":"CardContainer2250090011__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldForm.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldForm3027573964";
+var _namespace_ = "CmsFieldForm1093903414";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CmsFieldForm3027573964__root","fullBleedDivider":"CmsFieldForm3027573964__fullBleedDivider"};
+export var classes = {"root":"CmsFieldForm1093903414__root","fullBleedDivider":"CmsFieldForm1093903414__fullBleedDivider"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/CmsFieldModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal2678112688";
+var _namespace_ = "CmsFieldModal2771827931";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CmsFieldModal2678112688__root","modal":"CmsFieldModal2678112688__modal"};
+export var classes = {"root":"CmsFieldModal2771827931__root","modal":"CmsFieldModal2771827931__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection2804699426";
+var _namespace_ = "ValidationAndDefaultsSection3549871759";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ValidationAndDefaultsSection2804699426__root","accordionWrapper":"ValidationAndDefaultsSection2804699426__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection3549871759__root","accordionWrapper":"ValidationAndDefaultsSection3549871759__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/formFields/CharactersLimitInput.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CharactersLimitInput1001154566";
+var _namespace_ = "CharactersLimitInput4082401476";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CharactersLimitInput1001154566__root","field":"CharactersLimitInput1001154566__field"};
+export var classes = {"root":"CharactersLimitInput4082401476__root","field":"CharactersLimitInput4082401476__field"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse18967810";
+var _namespace_ = "Collapse862903150";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Collapse18967810__root","exit":"Collapse18967810__exit"};
+export var classes = {"root":"Collapse862903150__root","exit":"Collapse862903150__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage722263293";
+var _namespace_ = "CollectionPage3523435138";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPage722263293__root"};
+export var classes = {"root":"CollectionPage3523435138__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader4048612556";
+var _namespace_ = "CollectionSectionHeader3119916954";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionSectionHeader4048612556__root","summaryIcon":"CollectionSectionHeader4048612556__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader3119916954__root","summaryIcon":"CollectionSectionHeader3119916954__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTable1034190622";
+var _namespace_ = "CollectionTable312694286";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionTable1034190622__root"};
+export var classes = {"root":"CollectionTable312694286__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTableWSRTable3372842649";
+var _namespace_ = "CollectionTableWSRTable696558779";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionTableWSRTable3372842649__root"};
+export var classes = {"root":"CollectionTableWSRTable696558779__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar1959298111";
+var _namespace_ = "CollectionToolbar2177225730";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionToolbar1959298111__root","left":"CollectionToolbar1959298111__left","right":"CollectionToolbar1959298111__right","fullWidth":"CollectionToolbar1959298111__fullWidth"};
+export var classes = {"root":"CollectionToolbar2177225730__root","left":"CollectionToolbar2177225730__left","right":"CollectionToolbar2177225730__right","fullWidth":"CollectionToolbar2177225730__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter3401934296";
+var _namespace_ = "SearchOrCustomFilter1379226531";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SearchOrCustomFilter3401934296__root","search":"SearchOrCustomFilter3401934296__search","searchMobile":"SearchOrCustomFilter3401934296__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter1379226531__root","search":"SearchOrCustomFilter1379226531__search","searchMobile":"SearchOrCustomFilter1379226531__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly3607908492";
+var _namespace_ = "AutoCompleteReadonly184333055";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"AutoCompleteReadonly3607908492__root"};
+export var classes = {"root":"AutoCompleteReadonly184333055__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ViewsDropdown3087475511";
+var _namespace_ = "ViewsDropdown2992817294";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ViewsDropdown3087475511__root"};
+export var classes = {"root":"ViewsDropdown2992817294__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle2738208905";
+var _namespace_ = "DragHandle222401585";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"DragHandle2738208905__root"};
+export var classes = {"root":"DragHandle222401585__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell3260745158";
+var _namespace_ = "EditableCell1925262655";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EditableCell3260745158__root","validationIndicator":"EditableCell3260745158__validationIndicator"};
+export var classes = {"root":"EditableCell1925262655__root","validationIndicator":"EditableCell1925262655__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.tsx

@@ -158,12 +158,16 @@ function _EditableCell<T, F extends FiltersMap>({
           typeConfig={column.typeConfig}
           editTrigger={cellInteraction.editTrigger}
           validation={column.validation}
+          columnId={columnId}
+          rowKey={rowKey}
         />
       ) : (
         <ViewComponent
           value={value}
           typeConfig={column.typeConfig}
           validation={column.validation}
+          columnId={columnId}
+          rowKey={rowKey}
         />
       )}
     </div>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "HeaderActionsPopover2426083042";
+var _namespace_ = "HeaderActionsPopover3485391159";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"HeaderActionsPopover2426083042__root"};
+export var classes = {"root":"HeaderActionsPopover3485391159__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/CellViewLayout.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CellViewLayout2427606748";
+var _namespace_ = "CellViewLayout2196670343";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CellViewLayout2427606748__root"};
+export var classes = {"root":"CellViewLayout2196670343__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1656210143";
+var _namespace_ = "Edit624312548";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit1656210143__root","booleanEdit":"Edit1656210143__booleanEdit"};
+export var classes = {"root":"Edit624312548__root","booleanEdit":"Edit624312548__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2636325412";
+var _namespace_ = "View274638029";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View2636325412__root","booleanView":"View2636325412__booleanView"};
+export var classes = {"root":"View274638029__root","booleanView":"View274638029__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit204895626";
+var _namespace_ = "Edit166524453";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit204895626__root","dateInput":"Edit204895626__dateInput"};
+export var classes = {"root":"Edit166524453__root","dateInput":"Edit166524453__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3496533103";
+var _namespace_ = "View3583136726";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View3496533103__root"};
+export var classes = {"root":"View3583136726__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { CellDocumentEdit } from '@wix/patterns-fields';
+import type { CellEditProps } from '../../types';
+
+export const DocumentEdit: React.FC<CellEditProps<string | null>> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  onStartEdit,
+  inputRef,
+  columnId,
+  rowKey,
+}) => (
+  <CellDocumentEdit
+    value={value}
+    onChange={onChange}
+    onCommit={onCommit}
+    onCancel={onCancel}
+    onStartEdit={onStartEdit}
+    inputRef={inputRef}
+    dataHook="document-edit"
+    fieldId={`document-edit-${columnId}-${rowKey}`}
+  />
+);

package/src/components/EditableTable/cellTypes/document/Edit.uni.driver.ts

@@ -0,0 +1,17 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function DocumentEditUniDriver(base: UniDriver, _body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    hasAddButton: () =>
+      base.$('[data-hook="document-edit-add-button"]').exists(),
+    hasPasteUrlButton: () =>
+      base.$('[data-hook="document-edit-paste-url-button"]').exists(),
+    hasTag: () => base.$('[data-hook="document-edit-tag"]').exists(),
+    hasMoreButton: () =>
+      base.$('[data-hook="document-edit-more-button"]').exists(),
+    isLoading: () =>
+      base.$('[data-hook="document-edit"] [data-hook="loader"]').exists(),
+  };
+}

package/src/components/EditableTable/cellTypes/document/View.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CellDocumentView } from '@wix/patterns-fields';
+import type { CellViewProps } from '../../types';
+
+export const DocumentView: React.FC<CellViewProps<string | null>> = ({
+  value,
+  columnId,
+  rowKey,
+}) => (
+  <CellDocumentView
+    value={value}
+    dataHook="document-view"
+    fieldId={`document-view-${columnId}-${rowKey}`}
+  />
+);

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

@@ -0,0 +1,13 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function DocumentViewUniDriver(base: UniDriver, _body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    hasTag: () => base.$('[data-hook="cell-document-tag"]').exists(),
+    getTagText: async () =>
+      (await base.$('[data-hook="cell-document-tag"]').text()) ?? '',
+    isEmpty: async () =>
+      !(await base.$('[data-hook="cell-document-tag"]').exists()),
+  };
+}

package/src/components/EditableTable/cellTypes/document/index.ts

@@ -0,0 +1,18 @@
+import { defineCellType } from '../../types';
+import { DocumentView } from './View';
+import { DocumentEdit } from './Edit';
+
+export { DocumentView, DocumentEdit };
+
+export const documentCellType = defineCellType<string | null>({
+  type: 'document',
+  ViewComponent: DocumentView,
+  EditComponent: DocumentEdit,
+  serialize: (value) => value ?? '',
+  clearable: true,
+  showEditWhenFocused: true,
+  // Returning undefined blocks all key presses from starting type-to-edit, but
+  // the presence of the function sets the :typeToEdit CSS modifier which keeps
+  // the selection borders visible while the cell is in edit mode (double border).
+  onTypeToEdit: () => undefined,
+});

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit4093384155";
+var _namespace_ = "Edit3932297184";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit4093384155__root","emailInput":"Edit4093384155__emailInput"};
+export var classes = {"root":"Edit3932297184__root","emailInput":"Edit3932297184__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3457779878";
+var _namespace_ = "View1948409395";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View3457779878__root"};
+export var classes = {"root":"View1948409395__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/index.ts

@@ -7,6 +7,7 @@ import { urlCellType } from './url';
 import { emailCellType } from './email';
 import { objectCellType } from './object';
 import { imageCellType } from './image';
+import { documentCellType } from './document';
 import { richContentCellType } from './richContent';
 import { videoCellType } from './video';
 import { richTextCellType } from './richText';
@@ -22,6 +23,7 @@ export {
   emailCellType,
   objectCellType,
   imageCellType,
+  documentCellType,
   richContentCellType,
   videoCellType,
   richTextCellType,
@@ -39,6 +41,7 @@ export const builtInCellTypes: CellType[] = [
   emailCellType,
   objectCellType,
   imageCellType,
+  documentCellType,
   richContentCellType,
   videoCellType,
   richTextCellType,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit937210464";
+var _namespace_ = "Edit326219640";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit937210464__root","numberInput":"Edit937210464__numberInput"};
+export var classes = {"root":"Edit326219640__root","numberInput":"Edit326219640__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};