@wix/patterns 1.363.0 → 1.366.0

package/src/state/EditableTable/types.ts

@@ -0,0 +1,108 @@
+import type { ComponentType } from 'react';
+import type { TableColumn } from '../../model/tableColumn';
+import type {
+  CellViewProps,
+  CellEditProps,
+} from '../../components/EditableTable/types';
+
+export interface Cell {
+  rowKey: string;
+  columnId: string;
+}
+
+export interface CellBorder {
+  top: boolean;
+  bottom: boolean;
+  left: boolean;
+  right: boolean;
+}
+
+export type ValidationRule =
+  | { type: 'required'; message: string }
+  | { type: 'min' | 'max'; value: number; message: string }
+  | { type: 'minLength' | 'maxLength'; value: number; message: string }
+  | { type: 'pattern'; value: RegExp; message: string }
+  | { type: 'custom'; validate: (value: unknown) => boolean; message: string };
+
+export interface ValidationResult {
+  valid: boolean;
+  errors?: string[];
+}
+
+export interface CellType {
+  type: keyof CellTypeConfigMap;
+
+  /** Render cell in view mode (read-only display) */
+  ViewComponent: ComponentType<CellViewProps<any>>;
+
+  /** Render cell in edit mode (inline editor). Optional — omit for view-only cells. */
+  EditComponent?: ComponentType<CellEditProps<any>>;
+
+  /** Serialize value to clipboard string */
+  serialize?: (value: any) => string;
+
+  /** Deserialize clipboard string to value */
+  deserialize?: (raw: string) => any;
+
+  /** Validate a cell value. Return null if valid, or error message string. */
+  validate?: (value: any, rules?: ValidationRule[]) => string | null;
+
+  /** Can this cell type be edited? (default: true) */
+  editable?: boolean;
+
+  /** Can this cell type be cleared with Delete key? (default: true) */
+  clearable?: boolean;
+
+  /** Toggle value on single click (e.g., boolean checkbox). Skips focus→edit flow. */
+  toggleValue?: (value: any) => any;
+
+  /** Called on type-to-edit. Return object with cleared value and/or prevent flag.
+   *  CMS-web pattern: text clears to '', number clears only for digits, date blocks non-digits. */
+  onTypeToEdit?: (params: {
+    key: string;
+  }) => { value?: any; prevent?: boolean } | undefined;
+}
+
+export interface CellTypeConfigMap {
+  text: never;
+  number: never;
+  boolean: never;
+  url: never;
+  select: SelectCellConfig;
+  date: never;
+  custom: Record<string, unknown>;
+}
+
+export interface SelectCellConfig {
+  options: { id: string; value: string }[];
+}
+
+interface EditableColumnBase<T> extends Omit<TableColumn<T>, 'render'> {
+  id: string;
+  /** Column type — maps to a CellType in the registry */
+  cellType: keyof CellTypeConfigMap;
+
+  /** Extract the cell value from the row data */
+  getValue: (item: T) => any;
+
+  /** Return updated item with new cell value (immutable) */
+  setValue?: (item: T, value: any) => T;
+
+  /** Column-level validation rules */
+  validation?: ValidationRule[];
+
+  /** Is this column editable? (default: true if setValue exists) */
+  editable?: boolean | ((item: T) => boolean);
+}
+
+export type EditableColumn<
+  T,
+  C extends keyof CellTypeConfigMap = keyof CellTypeConfigMap,
+> = C extends C
+  ? EditableColumnBase<T> & {
+      cellType: C;
+      typeConfig?: CellTypeConfigMap[C] extends never
+        ? never
+        : CellTypeConfigMap[C];
+    }
+  : never;

package/src/state/EditableTable/utils.ts

@@ -0,0 +1,73 @@
+import type {
+  Cell,
+  CellBorder,
+  ValidationResult,
+  ValidationRule,
+} from './types';
+
+export function cellKey(rowKey: string, columnId: string): string {
+  return `${rowKey}:${columnId}`;
+}
+
+export function parseCellKey(key: string): Cell | null {
+  const idx = key.indexOf(':');
+  if (idx === -1) {
+    return null;
+  }
+  return { rowKey: key.slice(0, idx), columnId: key.slice(idx + 1) };
+}
+
+export const noBorder: CellBorder = {
+  top: false,
+  bottom: false,
+  left: false,
+  right: false,
+};
+
+export const validResult: ValidationResult = { valid: true };
+
+function checkValidationRule(rule: ValidationRule, value: any): boolean {
+  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;
+  }
+}
+
+export function runCellValidation(
+  value: any,
+  rules?: ValidationRule[],
+  typeValidate?: (value: any, rules?: ValidationRule[]) => string | null,
+): ValidationResult {
+  const errors: string[] = [];
+
+  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 };
+}

package/src/state/FormPage/FormPageHeader.st.css.ts

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

package/src/state/ToolbarCollectionState.ts

@@ -297,6 +297,7 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
       setToolbarFiltersStateInitialized: action,
       activeFiltersEntries: computed,
       _searchExpanded: observable.ref,
+      showFieldTypeIcons: observable.ref,
     });
   }
 
@@ -460,6 +461,13 @@ export class ToolbarCollectionState<T, F extends FiltersMap = FiltersMap> {
     return [..._userColumns, ..._featureColumns, ..._extendedColumns];
   }
 
+  /**
+   * Whether to show field-type prefix icons across the collection UI.
+   * Controlled by the `showFieldTypeIcons` prop on the collection component (Table, Grid, etc.).
+   * @default false
+   */
+  showFieldTypeIcons = false;
+
   get selectedOrderedColumnsOrAll() {
     const { columns, customColumnsState, columnSizesState } = this;
 

package/src/state/simplifyExtendedColumns.tsx

@@ -3,6 +3,7 @@ import { CustomFieldType, CustomField, ExtendedFields } from '@wix/bex-core';
 import { Column } from '../model';
 import { ExtendedColumn } from '../components/ExtendedColumn/ExtendedColumn';
 import { DataTableColumnAlign } from '@wix/design-system/dist/types/Table/DataTable';
+import { toFieldType } from '../utils/fieldTypePrefixIcons';
 
 const ExtendedColumnsConfig: Record<
   CustomFieldType,
@@ -82,6 +83,7 @@ export function simplifyExtendedColumns<T>({
       hideable: true,
       sortable: field.filterable,
       defaultHidden: defaultHidden || field.owner !== 'user',
+      fieldType: type ? toFieldType(type) : undefined,
       align: type ? ExtendedColumnsConfig[type].align : undefined,
       width: type ? ExtendedColumnsConfig[type].width : undefined,
       style: type ? ExtendedColumnsConfig[type].style : undefined,

package/src/styles.global.css

@@ -1 +1 @@
-.CardContainer3155620443__root.CardContainer3155620443--mobile{border-radius:0}.Collapse3034119267__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse3034119267__exit{height:0}.CollectionPage1404352217__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage1404352217__root.CollectionPage1404352217--mobile{--wds-page-header-padding-horizontal:0;--wds-page-header-padding-horizontal-small:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage1404352217__root.CollectionPage1404352217--panel{overflow:hidden;position:relative}.CollectionSectionHeader1715510560__summaryIcon{display:flex;color:var(--wds-color-text-standard-secondary)}.CollectionTable996119683__root td{vertical-align:middle}.CollectionTable996119683__root.CollectionTable996119683--mobile td:first-child{padding-left:18px}.CollectionTable996119683__root.CollectionTable996119683--mobile td:last-child{padding-right:18px}.CollectionToolbar2658396883__left{min-width:0}.CollectionToolbar2658396883__left.CollectionToolbar2658396883--expandable{flex:auto}.CollectionToolbar2658396883__left.CollectionToolbar2658396883--title>*{width:100%}.CollectionToolbar2658396883__root.CollectionToolbar2658396883---responsiveMode-5-title .CollectionToolbar2658396883__left{flex:1 100;min-width:50px}.CollectionToolbar2658396883__root.CollectionToolbar2658396883---responsiveMode-4-tabs .CollectionToolbar2658396883__left,.CollectionToolbar2658396883__root.CollectionToolbar2658396883---responsiveMode-4-tabs .CollectionToolbar2658396883__left.CollectionToolbar2658396883--expandable{flex:1 100 auto;min-width:140px}.CollectionToolbar2658396883__root.CollectionToolbar2658396883---responsiveMode-4-tabs .CollectionToolbar2658396883__left>*{flex-shrink:1;min-width:0}.CollectionToolbar2658396883__root .CollectionToolbar2658396883__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar2658396883__root.CollectionToolbar2658396883--views .CollectionToolbar2658396883__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar2658396883__root.CollectionToolbar2658396883---responsiveMode-4-tabs .CollectionToolbar2658396883__right,.CollectionToolbar2658396883__root.CollectionToolbar2658396883---responsiveMode-5-title .CollectionToolbar2658396883__right{flex:0 1 auto;min-width:0}.CollectionToolbar2658396883__root .CollectionToolbar2658396883__right.CollectionToolbar2658396883__fullWidth{margin-inline-start:0!important}.CollectionToolbar2658396883__root.CollectionToolbar2658396883--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter1207220654__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter1207220654__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter1207220654__searchMobile:not(.SearchOrCustomFilter1207220654--expandable){left:18px}.SearchOrCustomFilter1207220654__searchMobile.SearchOrCustomFilter1207220654--expandable.SearchOrCustomFilter1207220654--expanded{left:18px}.AutoCompleteReadonly1869116685__root.AutoCompleteReadonly1869116685--disableEditing{cursor:pointer}.AutoCompleteReadonly1869116685__root.AutoCompleteReadonly1869116685--disableEditing input{cursor:pointer}.ViewsDropdown514972543__root{width:200px}.DragHandle4263951191__root{display:flex;align-items:center}.DragHandle4263951191__root:not(.DragHandle4263951191--disabled){cursor:grab;color:#a8caff}.DragHandle4263951191__root.DragHandle4263951191--disabled{color:#acafc4}.DragHandle4263951191__root:focus-visible:not(.DragHandle4263951191--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle4263951191__root.DragHandle4263951191--disabled{pointer-events:none}.DragHandle4263951191__root.DragHandle4263951191--dragging:not(.DragHandle4263951191--disabled){cursor:grabbing}.EntityPagePlain1687286502__root.EntityPagePlain1687286502--mobile{--wds-page-header-padding-horizontal:0}.Fade140473283__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade140473283__root.Fade140473283--exit{opacity:0}.Heading2968453176__root{visibility:visible}.Heading2968453176__root.Heading2968453176--appearanceH2{font-size:28px!important;line-height:36px!important}.ImportStepUpload2853718693__fileUpload{width:100%}.InputOverflow3167239132__root.InputOverflow3167239132--selected:not(.InputOverflow3167239132--focused) input::placeholder{color:#000624}@keyframes LoadingRow3791399935__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%}}.LoadingRow3791399935__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:LoadingRow3791399935__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText3994669917__root{opacity:1}.MaxHeightText3994669917__root.MaxHeightText3994669917--height24{line-height:24px}.MaxLines545705138__root{overflow:hidden}.MaxLines545705138__root.MaxLines545705138--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar2458542829__root{min-width:0}.MultiBulkActionToolbar2458542829__leftGroupWrapper{padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar2458542829__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar2458542829__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow2764090560__root td{padding:0!important;width:100%}.NestedTableRow449850700__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow449850700__root:hover{background-color:#e7f0ff!important}.NestedTableRow449850700__root.NestedTableRow449850700--expandable{cursor:pointer}.NestedTableRow449850700__placeholder td{padding:0!important;width:100%}.NestedTableRow449850700__root:hover td:first-of-type::before,.NestedTableRow449850700__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect909212706__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)}.NestedTableDragAndDropRow817173986__root.NestedTableDragAndDropRow817173986--draggingInto td{background-color:#e7f0ff!important}.PickerContent2621024629__root{display:flex}.PickerContentAdditionalStep2112299193__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep2112299193__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem2879372486__root{box-sizing:border-box}.ScrollableContent2145096297__root.ScrollableContent2145096297--overflowY{overflow-y:auto}.ScrollableContent2145096297__root.ScrollableContent2145096297--overflowX{overflow-x:auto}.ScrollableContent2145096297__root.ScrollableContent2145096297--smooth{scroll-behavior:smooth}.SkeletonCard3016637993__headerLoading{display:block!important}.SlidingModal3550523278__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal3550523278__root.SlidingModal3550523278--overlay{transition:transform 0s ease 0s}.SlidingModal3550523278__root.SlidingModal3550523278---appendTo-6-parent{position:absolute}.SlidingModal3550523278__root:not(.SlidingModal3550523278--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter2402394648__root .TabsFilter2402394648__title{color:var(--wds-tabs-label-fill, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)))}.TabsFilter2402394648__root.TabsFilter2402394648--selected .TabsFilter2402394648__title,.TabsFilter2402394648__root:hover .TabsFilter2402394648__title{color:var(--wds-tabs-label-fill-active, var(--wsr-color-B10, #116DFF))}.ManageTagsModal2176026072__root{display:flex}.ToolbarItem4013764498__root{min-width:0}.ToolbarItemBox572276993__root{min-width:0}.ToolbarItemBox572276993__root.ToolbarItemBox572276993--removeStartPadding{margin-left:-24px}.ToolbarItemBox572276993__root.ToolbarItemBox572276993--expandable{flex:1 0}.common2140370457__column{display:flex;flex-direction:column}.common2140370457__fullHeight{height:100%;min-height:0}.CollectionPageHeader2540668539__root:not(.CollectionPageHeader2540668539--mobile){gap:12px}.CollectionPageHeader2540668539__root.CollectionPageHeader2540668539--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader2540668539__root.CollectionPageHeader2540668539--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader2202744091__root.FormPageHeader2202744091--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader2202744091__root.FormPageHeader2202744091--mobile>*{margin-left:0;margin-top:6px!important;height:auto}
+.CardContainer2295250283__root.CardContainer2295250283--mobile{border-radius:0}.Collapse269535241__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse269535241__exit{height:0}.CollectionPage3573774927__root [data-hook=page-header-wrapper]{--wds-space-300:18px}.CollectionPage3573774927__root.CollectionPage3573774927--mobile{--wds-page-header-padding-horizontal:0;--wds-page-header-padding-horizontal-small:0;--wds-color-fill-surface-sunken:#ffffff}.CollectionPage3573774927__root.CollectionPage3573774927--panel{overflow:hidden;position:relative}.CollectionSectionHeader3937441446__summaryIcon{display:flex;color:var(--wds-color-text-standard-secondary)}.CollectionTable2673478244__root td{vertical-align:middle}.CollectionTable2673478244__root.CollectionTable2673478244--mobile td:first-child{padding-left:18px}.CollectionTable2673478244__root.CollectionTable2673478244--mobile td:last-child{padding-right:18px}.CollectionToolbar1478562778__left{min-width:0}.CollectionToolbar1478562778__left.CollectionToolbar1478562778--expandable{flex:auto}.CollectionToolbar1478562778__left.CollectionToolbar1478562778--title>*{width:100%}.CollectionToolbar1478562778__root.CollectionToolbar1478562778---responsiveMode-5-title .CollectionToolbar1478562778__left{flex:1 100;min-width:50px}.CollectionToolbar1478562778__root.CollectionToolbar1478562778---responsiveMode-4-tabs .CollectionToolbar1478562778__left,.CollectionToolbar1478562778__root.CollectionToolbar1478562778---responsiveMode-4-tabs .CollectionToolbar1478562778__left.CollectionToolbar1478562778--expandable{flex:1 100 auto;min-width:140px}.CollectionToolbar1478562778__root.CollectionToolbar1478562778---responsiveMode-4-tabs .CollectionToolbar1478562778__left>*{flex-shrink:1;min-width:0}.CollectionToolbar1478562778__root .CollectionToolbar1478562778__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar1478562778__root.CollectionToolbar1478562778--views .CollectionToolbar1478562778__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar1478562778__root.CollectionToolbar1478562778---responsiveMode-4-tabs .CollectionToolbar1478562778__right,.CollectionToolbar1478562778__root.CollectionToolbar1478562778---responsiveMode-5-title .CollectionToolbar1478562778__right{flex:0 1 auto;min-width:0}.CollectionToolbar1478562778__root .CollectionToolbar1478562778__right.CollectionToolbar1478562778__fullWidth{margin-inline-start:0!important}.CollectionToolbar1478562778__root.CollectionToolbar1478562778--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter281901088__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter281901088__searchMobile{justify-content:flex-end;position:absolute;right:18px}.SearchOrCustomFilter281901088__searchMobile:not(.SearchOrCustomFilter281901088--expandable){left:18px}.SearchOrCustomFilter281901088__searchMobile.SearchOrCustomFilter281901088--expandable.SearchOrCustomFilter281901088--expanded{left:18px}.AutoCompleteReadonly3238632147__root.AutoCompleteReadonly3238632147--disableEditing{cursor:pointer}.AutoCompleteReadonly3238632147__root.AutoCompleteReadonly3238632147--disableEditing input{cursor:pointer}.ViewsDropdown767838626__root{width:200px}.DragHandle1649945225__root{display:flex;align-items:center}.DragHandle1649945225__root:not(.DragHandle1649945225--disabled){cursor:grab;color:#a8caff}.DragHandle1649945225__root.DragHandle1649945225--disabled{color:#acafc4}.DragHandle1649945225__root:focus-visible:not(.DragHandle1649945225--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle1649945225__root.DragHandle1649945225--disabled{pointer-events:none}.DragHandle1649945225__root.DragHandle1649945225--dragging:not(.DragHandle1649945225--disabled){cursor:grabbing}td:has(>.EditableCell3084944771__root){position:relative;min-height:24px}.EditableCell3084944771__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)}.EditableCell3084944771__root.EditableCell3084944771--selected{background:rgba(56,153,236,.08)}.EditableCell3084944771__root.EditableCell3084944771--focused:not(.EditableCell3084944771--selected){box-shadow:inset 0 0 0 2px var(--wsr-color-B10);z-index:2}.EditableCell3084944771__root.EditableCell3084944771--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}.EditableCell3084944771__root.EditableCell3084944771--selectionTop{border-top:2px solid var(--wsr-color-B10)}.EditableCell3084944771__root.EditableCell3084944771--selectionBottom{border-bottom:2px solid var(--wsr-color-B10)}.EditableCell3084944771__root.EditableCell3084944771--selectionLeft{border-left:2px solid var(--wsr-color-B10)}.EditableCell3084944771__root.EditableCell3084944771--selectionRight{border-right:2px solid var(--wsr-color-B10)}.EditableCell3084944771__root.EditableCell3084944771--invalid:not(.EditableCell3084944771--editing){background:rgba(229,0,77,.06)}.EditableCell3084944771__root.EditableCell3084944771--copiedTop:not(.EditableCell3084944771--selectionTop){border-top:2px dashed var(--wsr-color-B10)}.EditableCell3084944771__root.EditableCell3084944771--copiedBottom:not(.EditableCell3084944771--selectionBottom){border-bottom:2px dashed var(--wsr-color-B10)}.EditableCell3084944771__root.EditableCell3084944771--copiedLeft:not(.EditableCell3084944771--selectionLeft){border-left:2px dashed var(--wsr-color-B10)}.EditableCell3084944771__root.EditableCell3084944771--copiedRight:not(.EditableCell3084944771--selectionRight){border-right:2px dashed var(--wsr-color-B10)}.EditableCell3084944771__validationIndicator{flex-shrink:0;margin-left:12px;margin-right:6px;color:var(--wsr-color-Y10)}.Edit2756468535__booleanEdit{display:flex;align-items:center;margin-left:12px}.View1734812011__booleanView{display:flex;align-items:center;margin-left:9px;pointer-events:none}.Edit2954194738__dateInput{width:100%;margin-left:-1px}.View3496179537__textView{width:100%;padding:9px 12px}.Edit1086718486__numberInput{width:100%;margin-right:2px}.Edit1086718486__numberInput input{text-align:right;direction:ltr}.View489596864__textView{width:100%;padding:9px 12px;text-align:right}.Edit2171501204__selectInput{width:100%}.View2274296977__textView{width:100%;padding:9px 12px}.Edit659033210__editWrapper{width:100%}.Edit659033210__inputArea{background-color:transparent;width:100%}.Edit659033210__inputArea>div{border:0!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;outline:0!important}.Edit659033210__inputArea textarea{padding:9px 12px 8px!important;outline:0!important;border:0!important}.Edit659033210__inputArea:not(.Edit659033210--isFocused) textarea{resize:none;overflow:hidden}.Edit659033210__inputArea:not(.Edit659033210--isFocused) textarea::-webkit-scrollbar{display:none}.View985561481__textView{width:100%;padding:9px 12px}.Edit4061833648__urlInput{width:100%;margin-left:-1px}.View793386274__textView{width:100%;padding:9px 12px;display:flex;align-items:center;justify-content:space-between}.View793386274__urlText{flex:1;min-width:0}.View793386274__suffix{flex-shrink:0;margin-left:10px}.View793386274__textView.View793386274--suffixOnHover:not(:hover) .View793386274__suffix{display:none}.EntityPagePlain1681091989__root.EntityPagePlain1681091989--mobile{--wds-page-header-padding-horizontal:0}.Fade817618918__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade817618918__root.Fade817618918--exit{opacity:0}.Heading2420093600__root{visibility:visible}.Heading2420093600__root.Heading2420093600--appearanceH2{font-size:28px!important;line-height:36px!important}.ImportStepUpload972892750__fileUpload{width:100%}.InputOverflow2859286953__root.InputOverflow2859286953--selected:not(.InputOverflow2859286953--focused) input::placeholder{color:#000624}@keyframes LoadingRow641118317__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%}}.LoadingRow641118317__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:LoadingRow641118317__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText222894855__root{opacity:1}.MaxHeightText222894855__root.MaxHeightText222894855--height24{line-height:24px}.MaxLines3413711216__root{overflow:hidden}.MaxLines3413711216__root.MaxLines3413711216--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar2017077380__root{min-width:0}.MultiBulkActionToolbar2017077380__leftGroupWrapper{padding-right:12px;min-width:0;flex-wrap:nowrap;align-items:center}.MultiBulkActionToolbar2017077380__selectedCountItem{min-width:0;flex-shrink:1;white-space:nowrap;overflow:hidden}.MultiBulkActionToolbar2017077380__selectedCountText{display:block;width:100%}.NestedTablePlaceholderStatesRow3998706015__root td{padding:0!important;width:100%}.NestedTableRow1007766577__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow1007766577__root:hover{background-color:#e7f0ff!important}.NestedTableRow1007766577__root.NestedTableRow1007766577--expandable{cursor:pointer}.NestedTableRow1007766577__placeholder td{padding:0!important;width:100%}.NestedTableRow1007766577__root:hover td:first-of-type::before,.NestedTableRow1007766577__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect2755059664__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)}.NestedTableDragAndDropRow1618883091__root.NestedTableDragAndDropRow1618883091--draggingInto td{background-color:#e7f0ff!important}.PickerContent3783271928__root{display:flex}.PickerContentAdditionalStep769599043__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep769599043__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem1878736355__root{box-sizing:border-box}.ScrollableContent3878505752__root.ScrollableContent3878505752--overflowY{overflow-y:auto}.ScrollableContent3878505752__root.ScrollableContent3878505752--overflowX{overflow-x:auto}.ScrollableContent3878505752__root.ScrollableContent3878505752--smooth{scroll-behavior:smooth}.SkeletonCard3453398691__headerLoading{display:block!important}.SlidingModal823534629__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal823534629__root.SlidingModal823534629--overlay{transition:transform 0s ease 0s}.SlidingModal823534629__root.SlidingModal823534629---appendTo-6-parent{position:absolute}.SlidingModal823534629__root:not(.SlidingModal823534629--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter4088703764__root .TabsFilter4088703764__title{color:var(--wds-tabs-label-fill, var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624)))}.TabsFilter4088703764__root.TabsFilter4088703764--selected .TabsFilter4088703764__title,.TabsFilter4088703764__root:hover .TabsFilter4088703764__title{color:var(--wds-tabs-label-fill-active, var(--wsr-color-B10, #116DFF))}.ManageTagsModal1570584659__root{display:flex}.ToolbarItem3734550434__root{min-width:0}.ToolbarItemBox1032297372__root{min-width:0}.ToolbarItemBox1032297372__root.ToolbarItemBox1032297372--removeStartPadding{margin-left:-24px}.ToolbarItemBox1032297372__root.ToolbarItemBox1032297372--expandable{flex:1 0}.common2705747369__column{display:flex;flex-direction:column}.common2705747369__fullHeight{height:100%;min-height:0}.CollectionPageHeader2247944408__root:not(.CollectionPageHeader2247944408--mobile){gap:12px}.CollectionPageHeader2247944408__root.CollectionPageHeader2247944408--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader2247944408__root.CollectionPageHeader2247944408--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader1910830305__root.FormPageHeader1910830305--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader1910830305__root.FormPageHeader1910830305--mobile>*{margin-left:0;margin-top:6px!important;height:auto}

package/src/testkit/jsdom.ts

@@ -26,6 +26,7 @@ import { CustomFieldModalUniDriver } from '../components/CustomFieldModal/Custom
 import RequestIdUniDriver from '../components/RequestId/RequestId.uni.driver';
 import { SearchableCollectionContentUniDriver } from '../components/SearchableCollectionContent/SearchableCollectionContent.uni.driver';
 import { SuggestionsUniDriver } from '../components/Suggestions/Suggestions.uni.driver';
+import { default as EditableTableUniDriver } from '../components/EditableTable/EditableTable.uni.driver';
 
 export const TableTestkit = uniTestkitFactoryCreator(TableUniDriver);
 
@@ -111,3 +112,7 @@ export const SearchableCollectionContentTestkit = uniTestkitFactoryCreator(
 
 export const SuggestionsTestkit =
   uniTestkitFactoryCreator(SuggestionsUniDriver);
+
+export const EditableTableTestkit = uniTestkitFactoryCreator(
+  EditableTableUniDriver,
+);

package/src/testkit/playwright.ts

@@ -21,6 +21,7 @@ import { ManageTagsModalUniDriver } from '../components/Tags/ManageTags/ManageTa
 import CollectionPageUniDriver from '../components/CollectionPageNew/CollectionPage.uni.driver';
 import RequestIdUniDriver from '../components/RequestId/RequestId.uni.driver';
 import { SuggestionsUniDriver } from '../components/Suggestions/Suggestions.uni.driver';
+import { default as EditableTableUniDriver } from '../components/EditableTable/EditableTable.uni.driver';
 
 export const TableTestkit = playwrightUniTestkitFactoryCreator(TableUniDriver);
 
@@ -94,3 +95,7 @@ export const RequestIdTestkit =
 
 export const SuggestionsTestkit =
   playwrightUniTestkitFactoryCreator(SuggestionsUniDriver);
+
+export const EditableTableTestkit = playwrightUniTestkitFactoryCreator(
+  EditableTableUniDriver,
+);

package/src/testkit/puppeteer.ts

@@ -22,6 +22,7 @@ import CollectionPageUniDriver from '../components/CollectionPageNew/CollectionP
 import RequestIdUniDriver from '../components/RequestId/RequestId.uni.driver';
 import { default as KanbanUniDriver } from '../components/Kanban/Kanban.uni.driver';
 import { SuggestionsUniDriver } from '../components/Suggestions/Suggestions.uni.driver';
+import { default as EditableTableUniDriver } from '../components/EditableTable/EditableTable.uni.driver';
 
 export const TableTestkit = puppeteerUniTestkitFactoryCreator(TableUniDriver);
 
@@ -97,3 +98,7 @@ export const RequestIdTestkit =
 
 export const SuggestionsTestkit =
   puppeteerUniTestkitFactoryCreator(SuggestionsUniDriver);
+
+export const EditableTableTestkit = puppeteerUniTestkitFactoryCreator(
+  EditableTableUniDriver,
+);

package/src/utils/fieldTypePrefixIcons.tsx

@@ -0,0 +1,164 @@
+import React, { type ComponentType, type ReactNode } from 'react';
+import {
+  Text,
+  TextSmall,
+  Image,
+  ImageSmall,
+  SquareRatioChecked,
+  SquareRatioCheckedSmall,
+  Number,
+  NumberSmall,
+  Date,
+  DateSmall,
+  DateAndTime,
+  DateAndTimeSmall,
+  Time,
+  TimeSmall,
+  Article,
+  ArticleSmall,
+  RichText,
+  RichTextSmall,
+  Reference,
+  ReferenceSmall,
+  Multireference,
+  MultireferenceSmall,
+  Link,
+  LinkSmall,
+  Document,
+  DocumentSmall,
+  DocDuplicate,
+  Music,
+  MusicSmall,
+  Location,
+  LocationSmall,
+  Tag,
+  TagSmall,
+  CodeObject,
+  CodeObjectSmall,
+  ProGalleries,
+  ProGalleriesSmall,
+  Email,
+  EmailSmall,
+  Database,
+  DatabaseSmall,
+} from '@wix/wix-ui-icons-common';
+
+/**
+ * Canonical field type keys (UPPER_SNAKE_CASE).
+ * The map is keyed by these values; incoming camelCase strings
+ * are normalised before lookup.
+ */
+export type FieldType =
+  | 'SHORT_TEXT'
+  | 'LONG_TEXT'
+  | 'NUMBER'
+  | 'BOOLEAN'
+  | 'DATE'
+  | 'DATE_TIME'
+  | 'DATETIME'
+  | 'TIME'
+  | 'URL'
+  | 'EMAIL'
+  | 'IMAGE'
+  | 'MEDIA_GALLERY'
+  | 'AUDIO'
+  | 'DOCUMENT'
+  | 'MULTI_DOCUMENT'
+  | 'RICH_TEXT'
+  | 'RICH_CONTENT'
+  | 'REFERENCE'
+  | 'MULTI_REFERENCE'
+  | 'OBJECT'
+  | 'ARRAY'
+  | 'ADDRESS'
+  | 'COLOR'
+  | 'INTEGER'
+  | 'DECIMAL'
+  | 'CHECKBOX'
+  | 'DROPDOWN'
+  | 'FILES'
+  | 'MULTI_SELECT';
+
+/**
+ * Converts any casing (camelCase, snake_case, etc.) to a canonical FieldType.
+ * e.g. "shortText" → "SHORT_TEXT", "dateTime" → "DATE_TIME".
+ * Already UPPER_SNAKE_CASE strings pass through unchanged.
+ */
+export function toFieldType(value: string): FieldType {
+  return value.replace(/([a-z])([A-Z])/g, '$1_$2').toUpperCase() as FieldType;
+}
+
+interface FieldPrefixIconEntry {
+  small: ComponentType;
+  medium: ComponentType;
+}
+
+/**
+ * Maps canonical UPPER_SNAKE_CASE field types to icon components (small + medium).
+ */
+const FIELD_TYPE_ICON_MAP: Partial<Record<FieldType, FieldPrefixIconEntry>> = {
+  SHORT_TEXT: { small: TextSmall, medium: Text },
+  LONG_TEXT: { small: TextSmall, medium: Text },
+  NUMBER: { small: NumberSmall, medium: Number },
+  BOOLEAN: { small: SquareRatioCheckedSmall, medium: SquareRatioChecked },
+  DATE: { small: DateSmall, medium: Date },
+  DATE_TIME: { small: DateAndTimeSmall, medium: DateAndTime },
+  DATETIME: { small: DateAndTimeSmall, medium: DateAndTime },
+  TIME: { small: TimeSmall, medium: Time },
+  URL: { small: LinkSmall, medium: Link },
+  EMAIL: { small: EmailSmall, medium: Email },
+  IMAGE: { small: ImageSmall, medium: Image },
+  MEDIA_GALLERY: { small: ProGalleriesSmall, medium: ProGalleries },
+  AUDIO: { small: MusicSmall, medium: Music },
+  DOCUMENT: { small: DocumentSmall, medium: Document },
+  MULTI_DOCUMENT: { small: DocumentSmall, medium: DocDuplicate },
+  RICH_TEXT: { small: RichTextSmall, medium: RichText },
+  RICH_CONTENT: { small: ArticleSmall, medium: Article },
+  REFERENCE: { small: ReferenceSmall, medium: Reference },
+  MULTI_REFERENCE: { small: MultireferenceSmall, medium: Multireference },
+  OBJECT: { small: CodeObjectSmall, medium: CodeObject },
+  ARRAY: { small: TagSmall, medium: Tag },
+  ADDRESS: { small: LocationSmall, medium: Location },
+  INTEGER: { small: NumberSmall, medium: Number },
+  DECIMAL: { small: NumberSmall, medium: Number },
+  CHECKBOX: { small: SquareRatioCheckedSmall, medium: SquareRatioChecked },
+  FILES: { small: DocumentSmall, medium: Document },
+  MULTI_SELECT: { small: TagSmall, medium: Tag },
+};
+
+/**
+ * Returns an icon ReactNode for the given field type string and size.
+ * Accepts both UPPER_SNAKE_CASE and camelCase input.
+ * If the field type is not mapped (or undefined), returns an info fallback icon.
+ *
+ * @param fieldType - The field type string
+ * @param size - 'small' (default, for column headers / customize panel) or 'medium' (for filters)
+ */
+const ICON_STYLE: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  color: 'var(--wds-color-text-standard-primary, #000624)',
+};
+
+export function getFieldTypeIcon({
+  fieldType,
+  size = 'small',
+}: {
+  fieldType?: FieldType;
+  size?: 'small' | 'medium';
+}): ReactNode {
+  const Fallback = size === 'medium' ? Database : DatabaseSmall;
+
+  if (!fieldType) {
+    return <span style={ICON_STYLE}><Fallback /></span>;
+  }
+
+  const entry = FIELD_TYPE_ICON_MAP[fieldType];
+
+  if (!entry) {
+    return <span style={ICON_STYLE}><Fallback /></span>;
+  }
+
+  const Icon = size === 'medium' ? entry.medium : entry.small;
+  return <span style={ICON_STYLE}><Icon /></span>;
+}

package/src/version.ts

@@ -1 +1 @@
-export const version = 'patterns@1.363.0';
+export const version = 'patterns@1.366.0';