@wix/patterns 1.363.0 → 1.366.0

package/src/components/Suggestions/Suggestions.uni.driver.ts

@@ -1,4 +1,4 @@
-import { CarouselWIPUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { CarouselUniDriver } from '@wix/design-system/dist/testkit/unidriver';
 import {
   baseUniDriverFactory,
   UniDriver,
@@ -7,11 +7,11 @@ import {
 export const SuggestionsUniDriver = (base: UniDriver, body: UniDriver) => {
   const dataHook = 'suggestions';
 
-  const carouselIdle = CarouselWIPUniDriver(
+  const carouselIdle = CarouselUniDriver(
     base.$(`[data-hook="${dataHook}-carousel-idle"]`),
     body,
   );
-  const carouselLoading = CarouselWIPUniDriver(
+  const carouselLoading = CarouselUniDriver(
     base.$(`[data-hook="${dataHook}-carousel-loading"]`),
     body,
   );

package/src/components/Suggestions/types.ts

@@ -1,4 +1,4 @@
-import { CarouselWIPProps } from '@wix/design-system';
+import { CarouselProps } from '@wix/design-system';
 import { Offer } from '@wix/bex-utils/@wix/ambassador-dealer-v1-serving-offer/types';
 
 // Re-export Offer for external consumers
@@ -35,7 +35,7 @@ export interface SuggestionsProps {
    * Props to pass to the carousel component.
    * @external
    */
-  carouselProps?: CarouselWIPProps;
+  carouselProps?: CarouselProps;
   /**
    * Render function for each offer card. Return `null` to filter out a card.
    * @external

package/src/components/TableFolders/TableFoldersContent.tsx

@@ -165,7 +165,7 @@ function _TableFoldersContent<
     toolbar: { selectedOrderedColumnsOrAll },
   } = state;
 
-  const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll });
+  const createWSRColumnBase = useCreateWSRColumnBase({ horizontalScroll, showFieldTypeIcons: state.toolbar.showFieldTypeIcons });
 
   const finalColumns = [
     {

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_ = "TabsFilter4088703764";
 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":"TabsFilter4088703764__root","title":"TabsFilter4088703764__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_ = "ManageTagsModal1570584659";
 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":"ManageTagsModal1570584659__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_ = "ToolbarItem3734550434";
 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":"ToolbarItem3734550434__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_ = "ToolbarItemBox1032297372";
 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":"ToolbarItemBox1032297372__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_ = "common2705747369";
 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":"common2705747369__root","column":"common2705747369__column","fullHeight":"common2705747369__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/hooks/useEditableTableCollection.ts

@@ -0,0 +1,54 @@
+import {
+  CollectionOptimisticActionsBaseParams,
+  FiltersMap,
+  OptionalFiltersMap,
+} from '@wix/bex-core';
+import {
+  useWixPatternsContainer,
+  CollectionConfigWithConditionals,
+  useCreateCollection,
+  useCreateOptimisticActions,
+} from '@wix/bex-core/react';
+import {
+  EditableTableState,
+  EditableTablePermissions,
+  EditableTableMutationHandlers,
+} from '../state/EditableTable';
+import { useOptionalCachedState } from './useOptionalCachedState';
+
+export type EditableTableCollectionConfig<
+  T,
+  F extends FiltersMap,
+> = CollectionConfigWithConditionals<T, F> & {
+  permissions?: EditableTablePermissions;
+  mutations: EditableTableMutationHandlers<T>;
+  optimisticActionParams?: Partial<CollectionOptimisticActionsBaseParams<T, F>>;
+};
+
+type EditableTableCollection = <T, F extends FiltersMap = OptionalFiltersMap>(
+  config: EditableTableCollectionConfig<T, F>,
+) => EditableTableState<T, F>;
+
+export const useEditableTableCollection: EditableTableCollection = <
+  T,
+  F extends FiltersMap = OptionalFiltersMap,
+>(
+  config: EditableTableCollectionConfig<T, F>,
+): EditableTableState<T, F> => {
+  const container = useWixPatternsContainer();
+  const createCollection = useCreateCollection();
+  const createOptimisticActions = useCreateOptimisticActions();
+
+  const state = useOptionalCachedState(() => {
+    return new EditableTableState<T, F>({
+      collection: createCollection<T, F>(config),
+      container,
+      permissions: config.permissions,
+      mutations: config.mutations,
+      createOptimisticActions: (collection) =>
+        createOptimisticActions(collection, config.optimisticActionParams),
+    });
+  });
+
+  return state;
+};

package/src/index.ts

@@ -84,6 +84,7 @@ export * from './components/TableGridSwitchFolders/TableGridSwitchFolders';
 export * from './components/TableGridSwitch/TableGridSwitchDragAndDrop';
 export * from './components/TabTotal';
 export * from './components/NestedTable';
+export * from './components/EditableTable';
 export * from './components/FiltersPanel/AddApplyFiltersButton';
 export * from './components/EmptyState/CollectionEmptyState';
 export * from './components/EmptyState/CollectionNoResultsState';
@@ -132,6 +133,7 @@ export * from './hooks/useTableFolders';
 export * from './hooks/useEntityPage';
 export * from './hooks/useSettingsPage';
 export * from './hooks/useNestedTable';
+export * from './hooks/useEditableTableCollection';
 export * from './hooks/useCreateNestedOptimisticActions';
 export * from './hooks/useEntity';
 export * from './hooks/useSettings';
@@ -150,6 +152,7 @@ export * from './state/TableFoldersState';
 export * from './state/TableGridSwitchFoldersState';
 export * from './state/CustomFields/CustomFieldsWidgetState';
 export * from './state/NestedTableState';
+export * from './state/EditableTable';
 export { DateRangeFilterStateParams } from './state/DateRangeFilterState';
 
 export { TableDragAndDrop } from './components/TableDragAndDrop';
@@ -171,6 +174,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_ = "CollectionPageHeader2247944408";
 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":"CollectionPageHeader2247944408__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};