@wix/patterns 1.495.0 → 1.497.0

package/src/hooks/useBuildAccordionItems.tsx

@@ -1,6 +1,6 @@
 import { FiltersMap } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
-import React, { useCallback } from 'react';
+import React from 'react';
 import {
   AccordionProps,
   Box,
@@ -11,72 +11,89 @@ import { FilterElement } from '../components/CollectionToolbarFilters';
 import { CollectionToolbarFiltersState } from '../components/CollectionToolbarFilters/CollectionToolbarFiltersState';
 import { FilterAccordionResetButton } from '../components/FiltersPanel/FilterAccordionResetButton';
 import { FilterAccordionTitle } from '../components/FiltersPanel/FilterAccordionTitle';
+import { FilterRevealAnchor } from '../components/FiltersPanel/FilterRevealAnchor';
 import { getFieldTypeIcon } from '../utils/fieldTypePrefixIcons';
 
-function useBuildAccordionItem<T, F extends FiltersMap>(
+function createAccordionItemBuilder<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,
-        fieldType,
-      } = filterProps;
+  return (filterElement: FilterElement) => {
+    const { type: Component, props: filterProps } = filterElement;
+    const {
+      filter,
+      initiallyOpen,
+      popoverProps,
+      accordionItemProps,
+      fieldType,
+    } = filterProps;
 
-      const clonedElement = (
-        <Component
-          {...filterProps}
-          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
-      );
+    const clonedElement = (
+      <Component
+        {...filterProps}
+        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
+    );
 
-      const title = filterProps.filter ? (
-        <Box width="100%" align="space-between" verticalAlign="middle">
-          {titleWithIcon}
-          <FilterAccordionResetButton
-            state={state.toolbar}
-            filter={filterProps.filter}
-          />
-        </Box>
+    const panel = state.panel;
+    const sectionKey = panel.getSectionKey(filterElement);
+    const open = panel.isSectionOpen(filterElement);
+    const request = panel.revealRequest;
+    const revealTitle = (content: React.ReactNode) =>
+      request?.sectionKey === sectionKey ? (
+        <FilterRevealAnchor
+          request={request}
+          scrollContainerRef={panel.scrollContainerRef}
+          open={open}
+        >
+          {content}
+        </FilterRevealAnchor>
       ) : (
-        titleWithIcon
+        content
       );
 
-      return {
-        title,
-        children: filterProps.filter ? (
-          <CollectionFilter filter={filterProps.filter} state={state}>
-            {clonedElement}
-          </CollectionFilter>
-        ) : (
-          clonedElement
-        ),
-        initiallyOpen,
-        ...accordionItemProps,
-      };
-    },
-    [showFieldTypeIcons],
-  );
+    const title = (
+      <Box width="100%" align="space-between" verticalAlign="middle">
+        {revealTitle(titleWithIcon)}
+        <FilterAccordionResetButton state={state.toolbar} filter={filter} />
+      </Box>
+    );
+
+    const itemTitle =
+      accordionItemProps && 'title' in accordionItemProps
+        ? revealTitle(accordionItemProps.title)
+        : title;
+    return {
+      children: (
+        <CollectionFilter filter={filter} state={state}>
+          {clonedElement}
+        </CollectionFilter>
+      ),
+      initiallyOpen,
+      ...accordionItemProps,
+      key: sectionKey,
+      open,
+      title: itemTitle,
+      onToggle: (event: React.MouseEvent<HTMLElement>) => {
+        panel.toggleSection(filterElement, event);
+      },
+    };
+  };
 }
 
 export function useBuildAccordionItems<T, F extends FiltersMap>(
@@ -86,7 +103,10 @@ export function useBuildAccordionItems<T, F extends FiltersMap>(
   const { translate: t } = useWixPatternsContainer();
   const { panelFilterElements } = state;
   const showFieldTypeIcons = state.toolbar.showFieldTypeIcons;
-  const buildAccordionItem = useBuildAccordionItem(state, showFieldTypeIcons);
+  const buildAccordionItem = createAccordionItemBuilder(
+    state,
+    showFieldTypeIcons,
+  );
 
   const defaultSectionTitle = t('cairo.filtersPanel.sections.default.title');
 

package/src/hooks/useOptionalCachedState.ts

@@ -67,7 +67,10 @@ export function useOptionalCachedState<S extends ICollectionComponentState>(
 ): S {
   const container = useWixPatternsContainer();
   const router = useWixPatternsRouter();
-  const [maybeNewState] = useState<S>(() => createState());
+  const [maybeNewState] = useState<S>(() => {
+    router?.dropCacheIfFieldsChanged();
+    return createState();
+  });
   const uniqueId = getCollectionComponentUniqueId(maybeNewState);
 
   const [cachedState] = useState<S | undefined>(

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader1790822900";
+var _namespace_ = "CollectionPageHeader3311006848";
 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":"CollectionPageHeader1790822900__root","mobileMoreActions":"CollectionPageHeader1790822900__mobileMoreActions"};
+export var classes = {"root":"CollectionPageHeader3311006848__root","mobileMoreActions":"CollectionPageHeader3311006848__mobileMoreActions"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TitleBadges176837811";
+var _namespace_ = "TitleBadges3914608263";
 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":"TitleBadges176837811__root","tooltip":"TitleBadges176837811__tooltip","tooltipTrigger":"TitleBadges176837811__tooltipTrigger"};
+export var classes = {"root":"TitleBadges3914608263__root","tooltip":"TitleBadges3914608263__tooltip","tooltipTrigger":"TitleBadges3914608263__tooltipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CustomFields/CustomFieldsPanelState.ts

@@ -112,6 +112,16 @@ export class CustomFieldsPanelState {
     return this.fieldsSource.archive;
   }
 
+  private getFieldTypeLocks(fieldId?: string) {
+    const field = fieldId
+      ? this.fieldsSource.fields.find((candidate) => candidate.id === fieldId)
+      : undefined;
+    return field
+      ? resolveFieldTypeDefinition(this.fieldsSource, field)?.fieldModal
+          ?.lockedProperties ?? []
+      : [];
+  }
+
   openCustomFieldModal(
     params: Omit<OpenFieldModalOptions, 'origin'> & {
       origin: CustomFieldOrigin;
@@ -124,7 +134,10 @@ export class CustomFieldsPanelState {
     customFieldModal.mode = params.fieldId ? 'edit' : 'new';
     customFieldModal.origin = params.origin;
     customFieldModal.customOrigin = params.customOrigin;
-    customFieldModal.lockedProperties = params.lockedProperties ?? [];
+    const typeLocks = this.getFieldTypeLocks(params.fieldId);
+    customFieldModal.lockedProperties = [
+      ...new Set([...typeLocks, ...(params.lockedProperties ?? [])]),
+    ];
     customFieldModal.onSave = params.onSave;
 
     !params.fieldId &&

package/src/state/EditableTable/CellValueState.ts

@@ -6,7 +6,8 @@ import {
   builtInCellTypes,
   textCellType,
 } from '../../components/EditableTable/cellTypes';
-import { parseCellKey, runCellValidation, validResult } from './utils';
+import { parseCellKey } from './utils';
+import { validateFieldValue, validResult } from '../../utils/fieldValidation';
 
 const builtInCellTypeMap = new Map<string, CellType>(
   builtInCellTypes.map((ct) => [ct.type, ct]),
@@ -110,7 +111,7 @@ export class CellValueState<T, F extends FiltersMap> {
     const normalized = resolved.normalizeOnCommit
       ? resolved.normalizeOnCommit(value)
       : value;
-    return runCellValidation(
+    return validateFieldValue(
       normalized,
       column.validation,
       resolved.validate,
@@ -405,7 +406,7 @@ export class CellValueState<T, F extends FiltersMap> {
       }
 
       const resolved = this.resolveCellTypeByColumnId(column.id);
-      const result = runCellValidation(
+      const result = validateFieldValue(
         value,
         column.validation,
         resolved.validate,
@@ -464,7 +465,7 @@ export class CellValueState<T, F extends FiltersMap> {
     }
 
     const resolved = this.resolveCellTypeByColumnId(column.id);
-    const result = runCellValidation(
+    const result = validateFieldValue(
       value,
       column.validation,
       resolved.validate,

package/src/state/EditableTable/types.ts

@@ -33,10 +33,7 @@ export interface CellBorder {
 
 export type { ValidationRule } from '@wix/bex-core';
 
-export interface ValidationResult {
-  valid: boolean;
-  errors?: string[];
-}
+export type { ValidationResult } from '../../utils/fieldValidation';
 
 export interface CellType {
   type: keyof CellTypeConfigMap;
@@ -95,7 +92,7 @@ export interface CellType {
    *  wraps chips into multiple rows). The framework releases the bottom anchor
    *  and lays an opaque base under the selection tint so the overflow doesn't
    *  bleed adjacent rows through.
-   *  Only applies to showEditWhenFocused cells — others release the bottom
+   *  Also applies to read-only views. Other editors release the bottom
    *  anchor via :editing already. */
   growable?: boolean;
 

package/src/state/EditableTable/utils.ts

@@ -1,10 +1,4 @@
-import type { Translate } from '@wix/bex-core';
-import type {
-  Cell,
-  CellBorder,
-  ValidationResult,
-  ValidationRule,
-} from './types';
+import type { Cell, CellBorder } from './types';
 
 export function cellKey(rowKey: string, columnId: string): string {
   return `${rowKey}:${columnId}`;
@@ -24,71 +18,3 @@ export const noBorder: CellBorder = {
   left: false,
   right: false,
 };
-
-export const validResult: ValidationResult = { valid: true };
-
-function checkValidationRule(rule: ValidationRule, value: any): boolean {
-  if (value == null && rule.type !== 'required' && rule.type !== 'custom') {
-    return true;
-  }
-
-  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':
-      // An empty value is `required`'s business, not the pattern's — otherwise
-      // clearing an optional cell reports a format error and refuses to save.
-      return (
-        typeof value === 'string' && (value === '' || rule.value.test(value))
-      );
-    case 'custom':
-      return rule.validate(value);
-    case 'specificValues':
-      return (
-        value == null ||
-        value === '' ||
-        (typeof value === 'string' &&
-          rule.values.some((option) => option.id === value))
-      );
-    default:
-      return true;
-  }
-}
-
-export function runCellValidation(
-  value: any,
-  rules?: ValidationRule[],
-  typeValidate?: (
-    value: any,
-    rules?: ValidationRule[],
-    translate?: Translate,
-  ) => string | null,
-  translate?: Translate,
-): 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, translate);
-    if (typeError) {
-      errors.push(typeError);
-    }
-  }
-
-  return errors.length === 0 ? validResult : { valid: false, errors };
-}

package/src/state/EntityPage/EntityPageState.ts

@@ -371,6 +371,10 @@ export class EntityPageState<T, V extends FieldValues = FieldValues>
     return this._loadedSchema;
   }
 
+  markFieldsChanged() {
+    this._routerState?.markFieldsChanged();
+  }
+
   get isFetching() {
     return this.formPage.isFetching;
   }

package/src/state/EntityPageFieldsCardState.ts

@@ -189,12 +189,16 @@ export class EntityPageFieldsCardState {
       // its own copy, so update both public views of it together.
       reaction(
         () => this.sourceState?.loadedSchema,
-        (loadedSchema) => {
+        (loadedSchema, previous) => {
           if (!loadedSchema) {
             return;
           }
           this.params.pageState.setLoadedSchema(loadedSchema);
           this.params.pageState.setSchema(loadedSchema.schema);
+          // The first value is the load; every later one is a field mutation.
+          if (previous) {
+            this.params.pageState.markFieldsChanged();
+          }
         },
       ),
       this.cardState.init(),

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

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

package/src/state/WixPatternsRouterState.ts

@@ -1,7 +1,11 @@
 import { action, makeObservable, observable } from 'mobx';
 import { getCollectionComponentUniqueId } from '../utils/getCollectionComponentUniqueId';
 import { ICollectionComponentState } from './ICollectionComponentState';
-import { NavigateOptions, WixPatternsContainer } from '@wix/bex-core';
+import {
+  NavigateOptions,
+  QueryCache,
+  WixPatternsContainer,
+} from '@wix/bex-core';
 import { NavigateFunction } from 'react-router-dom';
 
 interface WixPatternsRouterStateParams {
@@ -24,6 +28,7 @@ export class WixPatternsRouterState {
   currentState: RouteState = null;
   isUsingCache = false;
   isCollectionStale = false;
+  private fieldsChanged = false;
 
   constructor(params: WixPatternsRouterStateParams) {
     this.container = params.container;
@@ -45,6 +50,19 @@ export class WixPatternsRouterState {
     this.stateRefs.set(uniqueId, state);
   }
 
+  markFieldsChanged() {
+    this.fieldsChanged = true;
+  }
+
+  dropCacheIfFieldsChanged() {
+    if (!this.fieldsChanged) {
+      return;
+    }
+    this.fieldsChanged = false;
+    this.stateRefs.clear();
+    this.container.queryCache = new QueryCache();
+  }
+
   navigate(to: string, options: NavigateOptions): void {
     this.setCurrentState(options.state);
     this._navigate?.(to, options);

package/src/state/buildEditableFieldColumns.ts

@@ -7,7 +7,7 @@ import type {
   ValidationRule,
 } from '@wix/bex-core';
 import { resolveFieldTypeDefinition } from '@wix/bex-core';
-import { compilePattern } from '@wix/patterns-fields';
+import { buildFieldValidationRules } from '../utils/fieldValidation';
 import { resolveFieldPresentation } from '../utils/resolveFieldPresentation';
 import type { CellType, EditableColumn } from './EditableTable/types';
 import { FIELD_TYPE_TO_CELL_TYPE } from './EditableTable/fieldTypeToCellType';
@@ -39,84 +39,6 @@ function hasEditor(field: Field, customCell?: Omit<CellType, 'type'>): boolean {
   );
 }
 
-export function toValidationRules(
-  field: Field,
-  translate: Translate,
-): ValidationRule[] {
-  const v = field.validation;
-  if (!v) {
-    return [];
-  }
-  const rules: ValidationRule[] = [];
-  if (v.required) {
-    rules.push({
-      type: 'required',
-      message: translate('cairo.editableTable.field.validation.required', {
-        fieldName: field.displayName,
-      }),
-    });
-  }
-  if (v.numberRange?.min != null) {
-    const min = v.numberRange.min;
-    rules.push({
-      type: 'min',
-      value: min,
-      message: translate('cairo.editableTable.field.validation.min', { min }),
-    });
-  }
-  if (v.numberRange?.max != null) {
-    const max = v.numberRange.max;
-    rules.push({
-      type: 'max',
-      value: max,
-      message: translate('cairo.editableTable.field.validation.max', { max }),
-    });
-  }
-  if (v.stringLengthRange?.minLength != null) {
-    const minLength = v.stringLengthRange.minLength;
-    rules.push({
-      type: 'minLength',
-      value: minLength,
-      message: translate('cairo.editableTable.field.validation.minLength', {
-        minLength,
-      }),
-    });
-  }
-  if (v.stringLengthRange?.maxLength != null) {
-    const maxLength = v.stringLengthRange.maxLength;
-    rules.push({
-      type: 'maxLength',
-      value: maxLength,
-      message: translate('cairo.editableTable.field.validation.maxLength', {
-        maxLength,
-      }),
-    });
-  }
-  // A pattern the platform refuses to run (uncompilable, over-long, or able to
-  // backtrack catastrophically) yields no rule, matching what the form inputs do.
-  const patternRegex = compilePattern(v.pattern);
-  if (patternRegex) {
-    rules.push({
-      type: 'pattern',
-      value: patternRegex,
-      message: translate('cairo.editableTable.field.validation.pattern', {
-        fieldName: field.displayName,
-      }),
-    });
-  }
-  if (v.specificValues?.length) {
-    rules.push({
-      type: 'specificValues',
-      values: v.specificValues,
-      message: translate(
-        'cairo.editableTable.field.validation.specificValues',
-        { fieldName: field.displayName },
-      ),
-    });
-  }
-  return rules;
-}
-
 // The inline-custom cell config for a resolved definition: its editableTable
 // slot, with the definition's value-level validation layered in when the slot
 // doesn't validate itself.
@@ -164,7 +86,7 @@ export function buildEditableFieldColumns(
         (NEEDS_TYPE_CONFIG.has(field.type)
           ? 'object'
           : FIELD_TYPE_TO_CELL_TYPE[field.type] ?? 'object');
-    const validation = toValidationRules(field, translate);
+    const validation = buildFieldValidationRules(field, translate);
     const editable =
       canWrite &&
       !field.isSystem &&