@wix/patterns 1.363.0 → 1.364.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter2402394648";
+var _namespace_ = "TabsFilter1147196558";
 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":"TabsFilter2402394648__root","title":"TabsFilter2402394648__title"};
+export var classes = {"root":"TabsFilter1147196558__root","title":"TabsFilter1147196558__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "ManageTagsModal2176026072";
+var _namespace_ = "ManageTagsModal3682471619";
 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":"ManageTagsModal2176026072__root"};
+export var classes = {"root":"ManageTagsModal3682471619__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/ToolbarCollection/ToolbarCollection.tsx

@@ -305,6 +305,14 @@ export interface ToolbarCollectionBaseProps<T, F extends FiltersMap>
    * @overrideType [TagsElement](./?path=/story/features-enrich-tags--tags)
    */
   tags?: TagsElement<T, F>;
+
+  /**
+   * When true, renders prefix icons for field types in column headers, filters, and the customize-columns panel.
+   * Each column and filter should have a `fieldType` property set so Cairo can render the matching icon.
+   * @default false
+   * @external
+   */
+  showFieldTypeIcons?: boolean;
 }
 
 export interface ToolbarCollectionProps<T, F extends FiltersMap>

package/src/components/ToolbarCollection/useToolbarCollectionSyncProps.ts

@@ -36,11 +36,15 @@ export function useToolbarCollectionSyncProps<T, F extends FiltersMap>(
     secondaryActions,
     moreActions,
     internalScroll,
+    showFieldTypeIcons,
   } = props;
 
   checkConflictingToolbarProps(props);
 
   state.internalScroll = state.container.isPanelLayout ? true : internalScroll;
+  runInAction(() => {
+    state.showFieldTypeIcons = showFieldTypeIcons ?? false;
+  });
 
   const pageState = useCollectionPageContext();
   const router = useWixPatternsRouter();

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common2140370457";
+var _namespace_ = "common909002123";
 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":"common2140370457__root","column":"common2140370457__column","fullHeight":"common2140370457__fullHeight"};
+export var classes = {"root":"common909002123__root","column":"common909002123__column","fullHeight":"common909002123__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/useBuildAccordionItems.tsx

@@ -11,13 +11,15 @@ import { FilterElement } from '../components/CollectionToolbarFilters';
 import { CollectionToolbarFiltersState } from '../components/CollectionToolbarFilters/CollectionToolbarFiltersState';
 import { FilterAccordionResetButton } from '../components/FiltersPanel/FilterAccordionResetButton';
 import { FilterAccordionTitle } from '../components/FiltersPanel/FilterAccordionTitle';
+import { getFieldTypeIcon } from '../utils/fieldTypePrefixIcons';
 
 function useBuildAccordionItem<T, F extends FiltersMap>(
   state: CollectionToolbarFiltersState<T, F>,
+  showFieldTypeIcons: boolean,
 ) {
   return useCallback((filterElement: FilterElement) => {
     const { type: Component, props: filterProps } = filterElement;
-    const { filter, initiallyOpen, popoverProps, accordionItemProps } =
+    const { filter, initiallyOpen, popoverProps, accordionItemProps, fieldType } =
       filterProps;
 
     const clonedElement = (
@@ -26,27 +28,32 @@ function useBuildAccordionItem<T, F extends FiltersMap>(
         popoverProps={{ appendTo: 'window', ...popoverProps }}
       />
     );
+    const titleElement = (
+      <FilterAccordionTitle
+        state={state.toolbar}
+        filter={filter}
+        filterProps={filterProps}
+      />
+    );
+    const titleWithIcon = showFieldTypeIcons ? (
+      <Box gap="SP1" verticalAlign="middle">
+        {getFieldTypeIcon({ fieldType, size: 'medium' })}
+        {titleElement}
+      </Box>
+    ) : titleElement;
 
-    return {
-      title: filterProps.filter ? (
-        <Box width="100%" align="space-between" verticalAlign="middle">
-          <FilterAccordionTitle
-            state={state.toolbar}
-            filter={filter}
-            filterProps={filterProps}
-          />
-          <FilterAccordionResetButton
-            state={state.toolbar}
-            filter={filterProps.filter}
-          />
-        </Box>
-      ) : (
-        <FilterAccordionTitle
+    const title = filterProps.filter ? (
+      <Box width="100%" align="space-between" verticalAlign="middle">
+        {titleWithIcon}
+        <FilterAccordionResetButton
           state={state.toolbar}
-          filter={filter}
-          filterProps={filterProps}
+          filter={filterProps.filter}
         />
-      ),
+      </Box>
+    ) : titleWithIcon;
+
+    return {
+      title,
       children: filterProps.filter ? (
         <CollectionFilter filter={filterProps.filter} state={state}>
           {clonedElement}
@@ -57,15 +64,16 @@ function useBuildAccordionItem<T, F extends FiltersMap>(
       initiallyOpen,
       ...accordionItemProps,
     };
-  }, []);
+  }, [showFieldTypeIcons]);
 }
 
 export function useBuildAccordionItems<T, F extends FiltersMap>(
   state: CollectionToolbarFiltersState<T, F>,
 ) {
   const { translate: t } = useWixPatternsContainer();
-  const buildAccordionItem = useBuildAccordionItem(state);
   const { panelFilterElements } = state;
+  const showFieldTypeIcons = state.toolbar.showFieldTypeIcons;
+  const buildAccordionItem = useBuildAccordionItem(state, showFieldTypeIcons);
 
   const defaultSectionTitle = t('cairo.filtersPanel.sections.default.title');
 

package/src/hooks/{useCreateWSRColumnBase.ts → useCreateWSRColumnBase.tsx}

@@ -1,12 +1,17 @@
 import { TableColumn } from '../model';
-import { useCallback } from 'react';
+import React, { useCallback, type ReactNode } from 'react';
+import { Box, Text } from '@wix/design-system';
+import { getFieldTypeIcon } from '../utils/fieldTypePrefixIcons';
 
 export interface UseCreateWSRColumnBaseParams {
   horizontalScroll?: boolean;
+  /** When true, renders field-type prefix icons in column headers. */
+  showFieldTypeIcons?: boolean;
 }
 
 export function useCreateWSRColumnBase({
   horizontalScroll,
+  showFieldTypeIcons,
 }: UseCreateWSRColumnBaseParams) {
   return useCallback(
     (
@@ -14,7 +19,8 @@ export function useCreateWSRColumnBase({
       index: number,
       length: number,
     ) => {
-      const { id, title, width, sortable, infoTooltipProps } = column;
+      const { id, title, width, sortable, infoTooltipProps, fieldType } =
+        column;
       const lastColumn = index === length - 1;
 
       const lastColumnStyleNoHorizontalScroll =
@@ -38,11 +44,26 @@ export function useCreateWSRColumnBase({
       const columnStyle = width == null ? { flex: 1 } : undefined;
 
       const style = lastColumn ? lastColumnStyle : columnStyle;
+      const renderedTitle: ReactNode =
+        title && showFieldTypeIcons ? (
+          <Box gap="SP1" verticalAlign="middle" minWidth={0}>
+            <Box flexShrink={0}>{getFieldTypeIcon({ fieldType })}</Box>
+            {typeof title === 'string' ? (
+              <Text size="small" ellipsis appendTo="window">
+                {title}
+              </Text>
+            ) : (
+              title
+            )}
+          </Box>
+        ) : (
+          title
+        );
 
       return {
         id,
         key: id ?? index,
-        title,
+        title: renderedTitle,
         style,
         width: lastColumn && !horizontalScroll ? undefined : width,
         sortable: id && sortable ? true : undefined,
@@ -51,6 +72,6 @@ export function useCreateWSRColumnBase({
           : undefined,
       };
     },
-    [horizontalScroll],
+    [horizontalScroll, showFieldTypeIcons],
   );
 }

package/src/index.ts

@@ -171,6 +171,8 @@ export * from './components/TagsFilter';
 export { runInAction } from 'mobx';
 export { observer, Observer } from 'mobx-react-lite';
 
+export type { FieldType } from './utils/fieldTypePrefixIcons';
+
 export {
   OffsetQuery,
   CursorQuery,

package/src/model/filterProps.ts

@@ -5,6 +5,7 @@ import {
   PopoverCommonProps,
   TagListProps,
 } from '@wix/design-system';
+import type { FieldType } from '../utils/fieldTypePrefixIcons';
 
 export interface FilterProps<V> {
   /**
@@ -13,6 +14,13 @@ export interface FilterProps<V> {
    */
   filter: Filter<V>;
 
+  /**
+   * The field type string used to resolve a prefix icon for the filter.
+   * Cairo maps this to the appropriate icon internally.
+   * @external
+   */
+  fieldType?: FieldType;
+
   /**
    * Padding settings. If this prop it omitted, padding will exist on the sides of the filter.<br> <br>
    * Supported values: <br>

package/src/model/tableColumn.ts

@@ -1,6 +1,7 @@
 import type { TableColumn as TableColumnWSR } from '@wix/design-system';
 import type { KeyedItem, SortMode, SortOrder } from '@wix/bex-core';
 import { CSSProperties, ReactNode } from 'react';
+import type { FieldType } from '../utils/fieldTypePrefixIcons';
 
 type TableColumnBase<T = any> = Omit<
   TableColumnWSR<T>,
@@ -21,6 +22,12 @@ type TableColumnBase<T = any> = Omit<
     panelContent?: ReactNode;
   };
   mobile?: ColumnMobileConfig;
+  /**
+   * The field type string used to resolve a prefix icon for the column.
+   * Cairo maps this to the appropriate icon internally.
+   * @external
+   */
+  fieldType?: FieldType;
 };
 
 // disallow specifying `hideable` / `defaultHidden` or setting `hiddenFromCustomColumnsSelection` as false when `id` is missing
@@ -180,6 +187,12 @@ export interface Column {
    * @external
    */
   mobile?: ColumnMobileConfig;
+  /**
+   * The field type string used to resolve a prefix icon for the column.
+   * Cairo maps this to the appropriate icon internally.
+   * @external
+   */
+  fieldType?: FieldType;
 }
 
 // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

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

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_ = "FormPageHeader4138825591";
 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":"FormPageHeader4138825591__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}
+.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}

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.364.0';