@wix/patterns 1.439.0 → 1.442.0

package/src/components/SetupWidget/SetupStepRow.tsx

@@ -12,6 +12,7 @@ import {
 import { SetupWidgetStep } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { SetupStepIcon } from './SetupStepIcon';
+import { SetupStepSecondaryCta } from './SetupStepSecondaryCta';
 import { st, classes } from './SetupWidget.st.css.js';
 
 export interface SetupStepRowProps {
@@ -21,6 +22,8 @@ export interface SetupStepRowProps {
   /** Inline content is shown below the row. */
   expanded: boolean;
   onActivate: () => void;
+  /** Fires when the step's `secondaryCta` icon button is clicked. */
+  onSecondaryActivate?: () => void;
   /** Supplies the inline-expansion content (render prop on the widget). */
   renderStepContent?: (step: SetupWidgetStep) => React.ReactNode;
   /** Tints the row's background when it's focused (off under the Harmony theme, see `useBmHarmonyTheme`). */
@@ -40,6 +43,7 @@ export const SetupStepRow = ({
   isFocused,
   expanded,
   onActivate,
+  onSecondaryActivate,
   renderStepContent,
   focusedBackground,
 }: SetupStepRowProps) => {
@@ -52,11 +56,46 @@ export const SetupStepRow = ({
 
   const showCta = !isCompleted && !!step.ctaLabel && !isInlineExpanded;
   // Completed steps stay actionable when they carry a completed CTA (G2).
-  const showCompletedCta = isCompleted && !!step.completedCtaLabel && !isDisabled;
+  const showCompletedCta =
+    isCompleted && !!step.completedCtaLabel && !isDisabled;
   const clickable = (!isCompleted && !isDisabled) || showCompletedCta;
 
   const handleClick = clickable ? onActivate : undefined;
 
+  const ctaNode = showCta && (
+    <ClickableCard.Action>
+      <Button
+        dataHook={`setup-step-cta-${step.id}`}
+        size="small"
+        priority={!isDisabled && !isFocused ? 'secondary' : 'primary'}
+        disabled={isDisabled}
+        ellipsis={false}
+        onClick={(event: React.MouseEvent) => {
+          event.stopPropagation();
+          onActivate();
+        }}
+      >
+        {step.ctaLabel}
+      </Button>
+    </ClickableCard.Action>
+  );
+
+  // The step's extra icon-only action. Dropped on completed steps (their CTA is
+  // gone too) and while the step is inline-expanded, so the row keeps a single
+  // trailing action.
+  const secondaryCtaNode =
+    step.secondaryCta &&
+    onSecondaryActivate &&
+    !isCompleted &&
+    !isInlineExpanded ? (
+      <SetupStepSecondaryCta
+        stepId={step.id}
+        cta={step.secondaryCta}
+        disabled={isDisabled}
+        onActivate={onSecondaryActivate}
+      />
+    ) : null;
+
   return (
     <div
       data-hook={`setup-step-${step.id}`}
@@ -109,32 +148,11 @@ export const SetupStepRow = ({
                 )}
               </Box>
             </Box>
-            {showCta &&
-              (() => {
-                const ctaNode = (
-                  <Box verticalAlign="middle">
-                    <ClickableCard.Action>
-                      <Button
-                        dataHook={`setup-step-cta-${step.id}`}
-                        size="small"
-                        priority={
-                          !isDisabled && !isFocused ? 'secondary' : 'primary'
-                        }
-                        disabled={isDisabled}
-                        ellipsis={false}
-                        onClick={(event: React.MouseEvent) => {
-                          event.stopPropagation();
-                          onActivate();
-                        }}
-                      >
-                        {step.ctaLabel}
-                      </Button>
-                    </ClickableCard.Action>
-                  </Box>
-                );
-
-                // Disabled steps explain why the CTA is disabled (G5).
-                return isDisabled ? (
+            {(secondaryCtaNode || showCta) && (
+              <Box verticalAlign="middle" gap="SP1">
+                {secondaryCtaNode}
+                {/* Disabled steps explain why the CTA is disabled (G5). */}
+                {showCta && isDisabled ? (
                   <Tooltip
                     dataHook={`setup-step-disabled-tooltip-${step.id}`}
                     content={
@@ -144,12 +162,13 @@ export const SetupStepRow = ({
                       t('cairo.setupWidget.step.lockedTooltip')
                     }
                   >
-                    {ctaNode}
+                    <Box verticalAlign="middle">{ctaNode}</Box>
                   </Tooltip>
                 ) : (
                   ctaNode
-                );
-              })()}
+                )}
+              </Box>
+            )}
             {showCompletedCta && (
               <Box
                 verticalAlign="middle"

package/src/components/SetupWidget/SetupStepSecondaryCta.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Box, IconButton, Tooltip, ClickableCard } from '@wix/design-system';
+import { SetupWidgetStepSecondaryCta as SecondaryCta } from '@wix/bex-core';
+
+export interface SetupStepSecondaryCtaProps {
+  stepId: string;
+  cta: SecondaryCta;
+  disabled?: boolean;
+  onActivate: () => void;
+}
+
+/**
+ * A step's extra icon-only action, rendered before its CTA. Shared by leaf rows
+ * and aggregated group rows.
+ */
+export const SetupStepSecondaryCta = ({
+  stepId,
+  cta,
+  disabled,
+  onActivate,
+}: SetupStepSecondaryCtaProps) => {
+  const button = (
+    <IconButton
+      dataHook={`setup-step-secondary-cta-${stepId}`}
+      size="small"
+      // No `skin` — the Harmony theme's IconButton default (`dark`) has to win
+      // here, the same way the CTA next to it picks up its own default.
+      priority="tertiary"
+      disabled={disabled}
+      ariaLabel={cta.ariaLabel}
+      onClick={(event: React.MouseEvent) => {
+        event.stopPropagation();
+        onActivate();
+      }}
+    >
+      {cta.icon}
+    </IconButton>
+  );
+
+  // The Tooltip goes inside ClickableCard.Action so it clones the button
+  // itself — that's what carries its focus handlers and aria wiring.
+  return (
+    <ClickableCard.Action>
+      <Box verticalAlign="middle">
+        {cta.tooltip ? (
+          <Tooltip
+            dataHook={`setup-step-secondary-cta-tooltip-${stepId}`}
+            content={cta.tooltip}
+          >
+            {button}
+          </Tooltip>
+        ) : (
+          button
+        )}
+      </Box>
+    </ClickableCard.Action>
+  );
+};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SetupWidget3308182246";
+var _namespace_ = "SetupWidget2305872505";
 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":"SetupWidget3308182246__root","row":"SetupWidget3308182246__row","completedCta":"SetupWidget3308182246__completedCta","card":"SetupWidget3308182246__card","stepIcon":"SetupWidget3308182246__stepIcon","chevron":"SetupWidget3308182246__chevron","chevronDisabled":"SetupWidget3308182246__chevronDisabled","inProgressLabel":"SetupWidget3308182246__inProgressLabel"};
+export var classes = {"root":"SetupWidget2305872505__root","row":"SetupWidget2305872505__row","completedCta":"SetupWidget2305872505__completedCta","card":"SetupWidget2305872505__card","stepIcon":"SetupWidget2305872505__stepIcon","chevron":"SetupWidget2305872505__chevron","chevronDisabled":"SetupWidget2305872505__chevronDisabled","inProgressLabel":"SetupWidget2305872505__inProgressLabel"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SetupWidget/SetupWidget.tsx

@@ -34,6 +34,12 @@ export interface SetupWidgetProps {
    * which targets the step's separate `completedCta`).
    */
   onCompletedStepClick?: (step: SetupWidgetStep) => void;
+  /**
+   * Fired when a step's `secondaryCta` icon button is clicked (desktop rows —
+   * leaf steps, group rows and their children). The button only renders while
+   * the step is still actionable, so this never fires for a completed step.
+   */
+  onStepSecondaryClick?: (step: SetupWidgetStep) => void;
   /**
    * Fired once when a step (or group) scrolls into view — for the consumer to
    * report view telemetry (BI/dealer). The widget itself stays
@@ -84,6 +90,7 @@ const _SetupWidget = ({
   renderStepContent,
   onStepClick,
   onCompletedStepClick,
+  onStepSecondaryClick,
   onStepView,
   onAllCompleteClick,
   renderError,
@@ -149,6 +156,9 @@ const _SetupWidget = ({
         isFocused={isFocused}
         expanded={expanded}
         onActivate={onActivate}
+        onSecondaryActivate={
+          onStepSecondaryClick ? () => onStepSecondaryClick(step) : undefined
+        }
         renderStepContent={renderStepContent}
         focusedBackground={!isHarmonyTheme}
       />
@@ -200,6 +210,11 @@ const _SetupWidget = ({
             expanded={state._expandedStepId === step.id}
             isPrimary={step.id === state._primaryStepId}
             onToggle={() => state._toggleStep(step.id)}
+            onSecondaryActivate={
+              onStepSecondaryClick
+                ? () => onStepSecondaryClick(step)
+                : undefined
+            }
             renderChild={(child) => renderLeaf(child, true)}
           />
         ) : (

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

@@ -3,6 +3,7 @@ import { baseUniDriverFactory } from '../../unidriver';
 import {
   ButtonUniDriver,
   ClickableCardUniDriver,
+  IconButtonUniDriver,
   TextButtonUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 
@@ -16,6 +17,12 @@ export default (base: UniDriver, body: UniDriver) => {
   const stepCta = (id: string) =>
     ButtonUniDriver(base.$(`[data-hook="setup-step-cta-${id}"]`), body);
 
+  const stepSecondaryCta = (id: string) =>
+    IconButtonUniDriver(
+      base.$(`[data-hook="setup-step-secondary-cta-${id}"]`),
+      body,
+    );
+
   const stepCard = (id: string) =>
     ClickableCardUniDriver(base.$(`[data-hook="setup-step-${id}"]`), body);
 
@@ -40,6 +47,17 @@ export default (base: UniDriver, body: UniDriver) => {
     /** Whether a step's CTA is rendered. */
     stepCtaExists: (id: string) =>
       base.$(`[data-hook="setup-step-cta-${id}"]`).exists(),
+    /** Click a step's secondary (icon) action. */
+    clickStepSecondaryCta: (id: string) => stepSecondaryCta(id).click(),
+    /** Whether a step's secondary (icon) action is rendered. */
+    stepSecondaryCtaExists: (id: string) =>
+      base.$(`[data-hook="setup-step-secondary-cta-${id}"]`).exists(),
+    /** Whether a step's secondary action is disabled. */
+    isStepSecondaryCtaDisabled: (id: string) =>
+      stepSecondaryCta(id).isButtonDisabled(),
+    /** Whether a tooltip wraps a step's secondary action. */
+    stepSecondaryCtaTooltipExists: (id: string) =>
+      base.$(`[data-hook="setup-step-secondary-cta-tooltip-${id}"]`).exists(),
     /** Whether a disabled step's permission tooltip wraps its CTA. */
     disabledTooltipExists: (id: string) =>
       base.$(`[data-hook="setup-step-disabled-tooltip-${id}"]`).exists(),

package/src/components/SetupWidget/index.ts

@@ -5,5 +5,6 @@ export type {
   SetupWidgetData,
   SetupWidgetStep,
   SetupWidgetStepStatus,
+  SetupWidgetStepSecondaryCta,
   SetupWidgetConfig,
 } from '@wix/bex-core';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard969420999";
+var _namespace_ = "SkeletonCard2280372685";
 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":"SkeletonCard969420999__root","headerLoading":"SkeletonCard969420999__headerLoading"};
+export var classes = {"root":"SkeletonCard2280372685__root","headerLoading":"SkeletonCard2280372685__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader1135780333";
+var _namespace_ = "AddFieldColumnHeader3837372143";
 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":"AddFieldColumnHeader1135780333__root","title":"AddFieldColumnHeader1135780333__title","hoverBridge":"AddFieldColumnHeader1135780333__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader3837372143__root","title":"AddFieldColumnHeader3837372143__title","hoverBridge":"AddFieldColumnHeader3837372143__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter4286792124";
+var _namespace_ = "TabsFilter4070174655";
 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":"TabsFilter4286792124__root","title":"TabsFilter4286792124__title"};
+export var classes = {"root":"TabsFilter4070174655__root","title":"TabsFilter4070174655__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_ = "ManageTagsModal1604149467";
+var _namespace_ = "ManageTagsModal3698406852";
 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":"ManageTagsModal1604149467__root"};
+export var classes = {"root":"ManageTagsModal3698406852__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ToolbarItem2347692777";
+var _namespace_ = "ToolbarItem1700851956";
 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":"ToolbarItem2347692777__root"};
+export var classes = {"root":"ToolbarItem1700851956__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_ = "ToolbarItemBox697607015";
+var _namespace_ = "ToolbarItemBox4201143137";
 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":"ToolbarItemBox697607015__root"};
+export var classes = {"root":"ToolbarItemBox4201143137__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_ = "common1967001566";
+var _namespace_ = "common2868247412";
 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":"common1967001566__root","column":"common1967001566__column","fullHeight":"common1967001566__fullHeight"};
+export var classes = {"root":"common2868247412__root","column":"common2868247412__column","fullHeight":"common2868247412__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/useCreateWSRColumnBase.tsx

@@ -23,8 +23,15 @@ export function useCreateWSRColumnBase({
       index: number,
       length: number,
     ) => {
-      const { id, title, width, sortable, infoTooltipProps, fieldType } =
-        column;
+      const {
+        id,
+        title,
+        width,
+        sortable,
+        infoTooltipProps,
+        fieldType,
+        fieldTypeIcons,
+      } = column;
       const lastColumn = index === length - 1;
 
       const lastColumnStyleNoHorizontalScroll =
@@ -51,7 +58,9 @@ export function useCreateWSRColumnBase({
       const renderedTitle: ReactNode =
         title && showFieldTypeIcons ? (
           <Box gap="SP1" verticalAlign="middle" minWidth={0}>
-            <Box flexShrink={0}>{getFieldTypeIcon({ fieldType })}</Box>
+            <Box flexShrink={0}>
+              {getFieldTypeIcon({ fieldType, icons: fieldTypeIcons })}
+            </Box>
             {typeof title === 'string' ? (
               <Text size="small" ellipsis appendTo="window">
                 {title}

package/src/index.ts

@@ -173,7 +173,10 @@ export {
   type FieldCapabilities,
   type FilterTypeConfig,
   type FieldActionsConfig,
+  type FieldModalConfig,
   type FieldTypeActionItem,
+  type FormTypeConfig,
+  type FormFieldComponentProps,
   type EditableCellConfig,
   type TableCellConfig,
   type CellViewProps,

package/src/model/tableColumn.ts

@@ -1,6 +1,6 @@
 import type { TableColumn as TableColumnWSR } from '@wix/design-system';
 import type { Field, KeyedItem, SortMode, SortOrder } from '@wix/bex-core';
-import { CSSProperties, ReactNode } from 'react';
+import { ComponentType, CSSProperties, ReactNode } from 'react';
 import type { FieldType } from '../utils/fieldTypePrefixIcons';
 import type { ValidationRule } from '../state/EditableTable/types';
 
@@ -29,6 +29,12 @@ type TableColumnBase<T = any> = Omit<
    * @external
    */
   fieldType?: FieldType;
+  /**
+   * Explicit prefix icons for the column (e.g. a custom field type's
+   * `display.icons`). When present, used instead of the `fieldType` mapping.
+   * @external
+   */
+  fieldTypeIcons?: { Small: ComponentType; Medium: ComponentType };
   /**
    * Whether the field contains personally identifiable information.
    * @external
@@ -236,6 +242,12 @@ export interface Column {
    * @external
    */
   fieldType?: FieldType;
+  /**
+   * Explicit prefix icons for the column (e.g. a custom field type's
+   * `display.icons`). When present, used instead of the `fieldType` mapping.
+   * @external
+   */
+  fieldTypeIcons?: { Small: ComponentType; Medium: ComponentType };
 }
 
 // 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_ = "CollectionPageHeader1278033918";
+var _namespace_ = "CollectionPageHeader489962603";
 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":"CollectionPageHeader1278033918__root"};
+export var classes = {"root":"CollectionPageHeader489962603__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/EditableTable/CellValueState.ts

@@ -92,6 +92,26 @@ export class CellValueState<T, F extends FiltersMap> {
     return validResult;
   }
 
+  /** Validate a value the user is still typing. Normalizes first, like
+   *  commitHandler does, so a value that commit would accept (`www.wix.com`)
+   *  is not reported invalid while it's being typed. */
+  validateEditingValue(columnId: string, value: any): ValidationResult {
+    const column = this._parent._columnMap.get(columnId);
+    if (!column) {
+      return validResult;
+    }
+    const resolved = this.resolveCellTypeByColumnId(column.id);
+    const normalized = resolved.normalizeOnCommit
+      ? resolved.normalizeOnCommit(value)
+      : value;
+    return runCellValidation(
+      normalized,
+      column.validation,
+      resolved.validate,
+      this._parent.collection?.translate,
+    );
+  }
+
   isCellEditable(rowKey: string, columnId: string): boolean {
     const column = this._parent._columnMap.get(columnId);
     if (!column) {

package/src/state/EditableTable/EditableTableState.ts

@@ -348,7 +348,19 @@ export class EditableTableState<T, F extends FiltersMap>
   }
 
   getCellValidation(rowKey: string, columnId: string): ValidationResult {
-    return this.cellValue.getCellValidation(rowKey, columnId);
+    const committed = this.cellValue.getCellValidation(rowKey, columnId);
+
+    if (
+      committed.valid ||
+      !this.cellInteraction.isCellEditing(rowKey, columnId) ||
+      this.cellInteraction.editingValue === undefined
+    ) {
+      return committed;
+    }
+    return this.cellValue.validateEditingValue(
+      columnId,
+      this.cellInteraction.editingValue,
+    );
   }
 
   isCellEditable(rowKey: string, columnId: string): boolean {

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

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

package/src/state/TagsCollectionState.ts

@@ -84,9 +84,9 @@ export class TagsCollectionState<T, F extends FiltersMap> {
     this.components = {
       AssignButton: TagsAssignButton,
       ManageModal: React.lazy(() =>
-        import(
-          '../components/Tags/ManageTags/CollectionManageTagsModal'
-        ).then((m) => ({ default: m.CollectionManageTagsModal })),
+        import('../components/Tags/ManageTags/CollectionManageTagsModal').then(
+          (m) => ({ default: m.CollectionManageTagsModal }),
+        ),
       ),
       CollectionToolbarFilters,
     };

package/src/state/buildEditableFieldColumns.ts

@@ -37,7 +37,7 @@ function hasEditor(field: Field, customCell?: Omit<CellType, 'type'>): boolean {
   );
 }
 
-function toValidationRules(field: Field): ValidationRule[] {
+export function toValidationRules(field: Field): ValidationRule[] {
   const v = field.validation;
   if (!v) {
     return [];

package/src/state/buildFieldColumns.tsx

@@ -72,6 +72,7 @@ export function buildFieldColumns(
       isSystem: field.isSystem,
       isPrimary: field.isPrimary,
       fieldType: toFieldType(field.type),
+      fieldTypeIcons: definition?.display.icons,
       width: layout.width,
       align: layout.align,
       render: (row, rowNum) => (