@wix/patterns-fields 1.81.0 → 1.83.0

package/dist/types/types/validation.d.ts

@@ -11,5 +11,71 @@ export type CharactersLimitValidationRule = {
 export type SpecificValuesValidationRule = {
     specificValues: SpecificValue[];
 };
-export type DataValidationRules = Partial<RequiredValidationRule & CharactersLimitValidationRule & SpecificValuesValidationRule>;
+export type PatternValidationRule = {
+    pattern: string;
+};
+export interface RequiredFieldValidationRuleConfig {
+    type: 'required';
+    label: string;
+    tooltip: string;
+}
+export interface CharactersLimitFieldValidationRuleConfig {
+    type: 'charactersLimit';
+    label: string;
+    tooltip: string;
+    minLabel: string;
+    maxLabel: string;
+    separator: string;
+    outOfBoundsError(min: number, max: number): string;
+    maxBelowMinError: string;
+}
+export interface SpecificValuesFieldValidationRuleConfig {
+    type: 'specificValues';
+    label: string;
+    tooltip: string;
+    blankError: string;
+    duplicateError: string;
+    addButton: string;
+    removeButton: string;
+    exclusiveRulesExplanation: string;
+}
+export interface PatternFieldValidationRuleConfig {
+    type: 'pattern';
+    label: string;
+    tooltip: string;
+    inputLabel: string;
+    invalidError: string;
+}
+export type FieldValidationRuleConfig = RequiredFieldValidationRuleConfig | CharactersLimitFieldValidationRuleConfig | SpecificValuesFieldValidationRuleConfig | PatternFieldValidationRuleConfig;
+export type FieldValidationRule = FieldValidationRuleConfig['type'];
+export interface FieldValidationSettingsValue {
+    required?: boolean;
+    charactersLimit?: {
+        min?: number;
+        max?: number;
+    };
+    specificValues?: SpecificValue[];
+    pattern?: string;
+}
+export type FieldValidationViolation = {
+    rule: 'charactersLimit';
+    type: 'outOfBounds';
+    bound: 'min' | 'max';
+    min: number;
+    max: number;
+} | {
+    rule: 'charactersLimit';
+    type: 'maxBelowMin';
+} | {
+    rule: 'specificValues';
+    type: 'blank' | 'duplicate';
+    optionId: string;
+} | {
+    rule: 'specificValues' | 'charactersLimit' | 'pattern';
+    type: 'exclusiveRules';
+} | {
+    rule: 'pattern';
+    type: 'invalidPattern';
+};
+export type DataValidationRules = Partial<RequiredValidationRule & CharactersLimitValidationRule & SpecificValuesValidationRule & PatternValidationRule>;
 //# sourceMappingURL=validation.d.ts.map

package/dist/types/types/validation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../../src/types/validation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,eAAe,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG;IACzC,cAAc,EAAE,aAAa,EAAE,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,OAAO,CACvC,sBAAsB,GACpB,6BAA6B,GAC7B,4BAA4B,CAC/B,CAAC"}
+{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../../src/types/validation.ts"],"names":[],"mappings":"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"}

package/dist/types/validations/field-validation-settings.d.ts

@@ -0,0 +1,10 @@
+import type { FieldValidationRule, FieldValidationSettingsValue, FieldValidationViolation } from '../types/validation';
+export interface FieldValidationSettingsOptions {
+    /** Whether `specificValues` rejects `charactersLimit`/`pattern` on the same
+     *  field. Callers that let a field carry both (e.g. a stored
+     *  `stringLengthRange` alongside `specificValues`) should pass `false`. */
+    exclusiveSpecificValues?: boolean;
+}
+export declare const getFieldValidationSettingsViolations: (value: FieldValidationSettingsValue, supportedRules?: readonly FieldValidationRule[], { exclusiveSpecificValues }?: FieldValidationSettingsOptions) => FieldValidationViolation[];
+export declare const hasFieldValidationSettingsError: (value: FieldValidationSettingsValue, supportedRules?: readonly FieldValidationRule[], options?: FieldValidationSettingsOptions) => boolean;
+//# sourceMappingURL=field-validation-settings.d.ts.map

package/dist/types/validations/field-validation-settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-validation-settings.d.ts","sourceRoot":"","sources":["../../../src/validations/field-validation-settings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,4BAA4B,EAC5B,wBAAwB,EACzB,MAAM,qBAAqB,CAAC;AA4B7B,MAAM,WAAW,8BAA8B;IAC7C;;+EAE2E;IAC3E,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,eAAO,MAAM,oCAAoC,GAC/C,OAAO,4BAA4B,EACnC,iBAAiB,SAAS,mBAAmB,EAAE,EAC/C,8BAAoC,8BAAmC,KACtE,wBAAwB,EA4F1B,CAAC;AAEF,eAAO,MAAM,+BAA+B,GAC1C,OAAO,4BAA4B,EACnC,iBAAiB,SAAS,mBAAmB,EAAE,EAC/C,UAAU,8BAA8B,YAGvC,CAAC"}

package/dist/types/validations/field-validation-settings.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=field-validation-settings.spec.d.ts.map

package/dist/types/validations/field-validation-settings.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-validation-settings.spec.d.ts","sourceRoot":"","sources":["../../../src/validations/field-validation-settings.spec.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns-fields",
-  "version": "1.81.0",
+  "version": "1.83.0",
   "license": "UNLICENSED",
   "author": {
     "name": "Kobi",
@@ -124,7 +124,7 @@
     "@wix/atlas": "^1.0.35",
     "@wix/data": "^1.0.323",
     "@wix/media": "^1.0.231",
-    "@wix/patterns-fields-utils": "1.62.0",
+    "@wix/patterns-fields-utils": "1.64.0",
     "@wix/rich-content": "1.0.37",
     "@wix/sdk": "^1.17.2",
     "@wix/wix-ui-icons-common": "^3.189.0",
@@ -152,8 +152,8 @@
     "@types/lodash": "^4.17.20",
     "@types/react": "^16.14.68",
     "@wix/babel-cli": "^1.11.0",
-    "@wix/bex-core": "2.359.0",
-    "@wix/design-system": "^1.314.0",
+    "@wix/bex-core": "2.361.0",
+    "@wix/design-system": "^1.319.0",
     "@wix/eslint-config-yoshi": "^6.74.0",
     "@wix/jest-yoshi-preset": "^6.74.0",
     "@wix/wix-data-items-common": "^1.0.270",
@@ -168,7 +168,7 @@
   },
   "peerDependencies": {
     "@wix/bex-core": "^2.284.0",
-    "@wix/design-system": "^1.314.0",
+    "@wix/design-system": "^1.319.0",
     "mobx": "^6.1.8",
     "react": "^16.8.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^18.0.0"
@@ -212,5 +212,5 @@
       "optional": true
     }
   },
-  "falconPackageHash": "7f3ac142c92989cd0bc2506f1510478c1b2edc0c549e190447a20f49"
+  "falconPackageHash": "7c94817351adcc8e6c284b0541c9e5f48d7e507e54b6247373bee947"
 }

package/src/__tests__/components/datetime-input/date-time-input.spec.tsx

@@ -0,0 +1,99 @@
+import '../../../testkit/test-polyfills';
+
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+import { ControlledDateTimeInput } from '../../../components/datetime-input/date-time-input';
+import { PatternsFieldsTestProvider } from '../../../testkit/patterns-fields-test-provider';
+
+const DATA_HOOK = 'date-time';
+
+const renderInput = (onBlur: () => void) =>
+  render(
+    <ControlledDateTimeInput
+      data={null}
+      onChange={jest.fn()}
+      onBlur={onBlur}
+      dataHook={DATA_HOOK}
+    />,
+    { wrapper: PatternsFieldsTestProvider },
+  );
+
+const blurTo = (relatedTarget: Node | null) => {
+  const wrapper = document.querySelector(`[data-hook="${DATA_HOOK}"]`)!;
+  fireEvent.blur(wrapper, { relatedTarget });
+};
+
+describe('ControlledDateTimeInput blur handling', () => {
+  it('does not call onBlur when focus moves into the calendar popover', () => {
+    const onBlur = jest.fn();
+    renderInput(onBlur);
+
+    const calendar = document.createElement('div');
+    calendar.setAttribute('data-hook', 'date-picker-calendar-date-time-date');
+    document.body.append(calendar);
+
+    blurTo(calendar);
+
+    expect(onBlur).not.toHaveBeenCalled();
+  });
+
+  it('does not call onBlur when focus moves into the mobile drawer fallback', () => {
+    const onBlur = jest.fn();
+    renderInput(onBlur);
+
+    const drawer = document.createElement('div');
+    drawer.setAttribute('role', 'dialog');
+    document.body.append(drawer);
+
+    blurTo(drawer);
+
+    expect(onBlur).not.toHaveBeenCalled();
+  });
+
+  it('does not call onBlur when focus moves into the time dropdown', () => {
+    const onBlur = jest.fn();
+    renderInput(onBlur);
+
+    const dropdown = document.createElement('div');
+    dropdown.setAttribute('data-hook', 'TimeInput-dropdown');
+    const option = document.createElement('div');
+    dropdown.append(option);
+    document.body.append(dropdown);
+
+    blurTo(option);
+
+    expect(onBlur).not.toHaveBeenCalled();
+  });
+
+  it('calls onBlur when focus leaves to an unrelated element', () => {
+    const onBlur = jest.fn();
+    renderInput(onBlur);
+
+    const outside = document.createElement('button');
+    document.body.append(outside);
+
+    blurTo(outside);
+
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onBlur when focus leaves the document entirely', () => {
+    const onBlur = jest.fn();
+    renderInput(onBlur);
+
+    blurTo(null);
+
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onBlur when focus moves between the date and time inputs', () => {
+    const onBlur = jest.fn();
+    renderInput(onBlur);
+
+    const timeInput = document.querySelector('[data-hook="date-time-time"] input')!;
+    blurTo(timeInput);
+
+    expect(onBlur).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/components/field-validation-settings/field-validation-settings-input.spec.tsx

@@ -0,0 +1,366 @@
+import '../../../testkit/test-polyfills';
+
+import React, { useState } from 'react';
+import { render } from '@testing-library/react';
+import { uniTestkitFactoryCreator } from '@wix/wix-ui-test-utils/testing-library';
+import { FieldValidationSettingsInput } from '../../../components/field-validation-settings';
+import { FieldValidationSettingsUniDriver } from '../../../components/field-validation-settings/field-validation-settings.uni.driver';
+import { PatternsFieldsTestProvider } from '../../../testkit/patterns-fields-test-provider';
+import type {
+  FieldValidationRuleConfig,
+  FieldValidationSettingsValue,
+} from '../../../types/validation';
+
+const testkitFactory = uniTestkitFactoryCreator(
+  FieldValidationSettingsUniDriver,
+);
+
+const requiredRule: FieldValidationRuleConfig = {
+  type: 'required',
+  label: 'Required',
+  tooltip: 'Required tooltip',
+};
+
+const charactersLimitRule: FieldValidationRuleConfig = {
+  type: 'charactersLimit',
+  label: 'Character limit',
+  tooltip: 'Character limit tooltip',
+  minLabel: 'Minimum',
+  maxLabel: 'Maximum',
+  separator: 'and',
+  outOfBoundsError: (min, max) => `Enter a value from ${min} to ${max}.`,
+  maxBelowMinError: 'Maximum must not be below minimum.',
+};
+
+const specificValuesRule: FieldValidationRuleConfig = {
+  type: 'specificValues',
+  label: 'Specific values',
+  tooltip: 'Specific values tooltip',
+  blankError: 'Enter a value.',
+  duplicateError: 'Values must be unique.',
+  addButton: 'Add value',
+  removeButton: 'Remove value',
+  exclusiveRulesExplanation: 'Disable the active rule first.',
+};
+
+const patternRule: FieldValidationRuleConfig = {
+  type: 'pattern',
+  label: 'Pattern',
+  tooltip: 'Pattern tooltip',
+  inputLabel: 'Regular expression',
+  invalidError: 'Enter a valid regular expression.',
+};
+
+const allRules = [
+  requiredRule,
+  charactersLimitRule,
+  specificValuesRule,
+  patternRule,
+];
+
+const ruleCombinations = Array.from(
+  { length: 2 ** allRules.length },
+  (_entry, mask) => allRules.filter((_rule, index) => mask & (1 << index)),
+);
+
+interface RenderInputOptions {
+  rules?: readonly FieldValidationRuleConfig[];
+  readOnly?: boolean;
+  invalid?: boolean;
+}
+
+const renderInput = (
+  initialData: FieldValidationSettingsValue,
+  { rules = allRules, readOnly, invalid }: RenderInputOptions = {},
+) => {
+  const onChange = jest.fn<void, [FieldValidationSettingsValue]>();
+
+  const TestInput = () => {
+    const [data, setData] = useState(initialData);
+    return (
+      <FieldValidationSettingsInput
+        dataHook="validation"
+        data={data}
+        rules={rules}
+        readOnly={readOnly}
+        invalid={invalid}
+        onChange={(nextData) => {
+          onChange(nextData);
+          setData(nextData);
+        }}
+      />
+    );
+  };
+
+  const result = render(<TestInput />, { wrapper: PatternsFieldsTestProvider });
+
+  return {
+    ...result,
+    driver: testkitFactory({
+      wrapper: result.container,
+      dataHook: 'validation',
+    }),
+    onChange,
+  };
+};
+
+describe('FieldValidationSettingsInput', () => {
+  it.each(ruleCombinations)(
+    'renders exactly the configured rule combination: %j',
+    async (...rules) => {
+      const { driver } = renderInput({}, { rules });
+      const configuredTypes = rules.map(({ type }) => type);
+
+      expect(await driver.getRequiredToggle().exists()).toBe(
+        configuredTypes.includes('required'),
+      );
+      expect(await driver.getCharactersLimitToggle().exists()).toBe(
+        configuredTypes.includes('charactersLimit'),
+      );
+      expect(await driver.getSpecificValuesToggle().exists()).toBe(
+        configuredTypes.includes('specificValues'),
+      );
+      expect(await driver.getPatternToggle().exists()).toBe(
+        configuredTypes.includes('pattern'),
+      );
+    },
+  );
+
+  it('renders only configured rules in caller order', async () => {
+    const { container, driver } = renderInput(
+      {},
+      { rules: [patternRule, requiredRule] },
+    );
+    const text = container.textContent ?? '';
+
+    expect(text.indexOf('Pattern')).toBeLessThan(text.indexOf('Required'));
+    expect(await driver.getPatternToggle().exists()).toBe(true);
+    expect(await driver.getRequiredToggle().exists()).toBe(true);
+    expect(await driver.getCharactersLimitToggle().exists()).toBe(false);
+    expect(await driver.getSpecificValuesToggle().exists()).toBe(false);
+  });
+
+  it('does not explain exclusivity when no conflicting rule is configured', async () => {
+    const { driver } = renderInput(
+      { specificValues: [] },
+      { rules: [specificValuesRule] },
+    );
+
+    expect(await driver.hasExclusiveRulesExplanation()).toBe(false);
+  });
+
+  it('ignores hidden rule values when disabling visible rules', async () => {
+    const { driver } = renderInput(
+      { specificValues: [] },
+      { rules: [charactersLimitRule] },
+    );
+
+    expect(await driver.getCharactersLimitToggle().isDisabled()).toBe(false);
+  });
+
+  it('preserves a minimum of zero while required makes it invalid and valid again', async () => {
+    const { driver, onChange } = renderInput({
+      required: false,
+      charactersLimit: { min: 0 },
+    });
+
+    await driver.getRequiredToggle().click();
+    expect(onChange).toHaveBeenLastCalledWith({
+      required: true,
+      charactersLimit: { min: 0 },
+    });
+    expect(await driver.getMinCharactersInput().hasStatus('error')).toBe(true);
+    expect(await driver.getMinCharactersInput().getStatusMessage()).toBe(
+      'Enter a value from 1 to 256000.',
+    );
+
+    await driver.getRequiredToggle().click();
+    expect(onChange).toHaveBeenLastCalledWith({
+      required: false,
+      charactersLimit: { min: 0 },
+    });
+    expect(await driver.getMinCharactersInput().hasStatus('error')).toBe(false);
+  });
+
+  it('keeps invalid character drafts and shows their specific errors', async () => {
+    const { driver, onChange } = renderInput({
+      charactersLimit: { min: -1, max: 0 },
+    });
+
+    expect(await driver.getMinCharactersInput().getStatusMessage()).toBe(
+      'Enter a value from 0 to 256000.',
+    );
+    expect(await driver.getMaxCharactersInput().getStatusMessage()).toBe(
+      'Enter a value from 1 to 256000.',
+    );
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('shows a maximum-below-minimum error without changing the draft', async () => {
+    const { driver, onChange } = renderInput({
+      charactersLimit: { min: 20, max: 2 },
+    });
+
+    expect(await driver.getMaxCharactersInput().getStatusMessage()).toBe(
+      'Maximum must not be below minimum.',
+    );
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('highlights only the invalid character bound', async () => {
+    const { driver } = renderInput({
+      charactersLimit: { min: -1, max: 20 },
+    });
+
+    expect(await driver.getMinCharactersInput().hasStatus('error')).toBe(true);
+    expect(await driver.getMaxCharactersInput().hasStatus('error')).toBe(false);
+  });
+
+  it('enables and disables character limits without changing required', async () => {
+    const { driver, onChange } = renderInput({});
+
+    await driver.getCharactersLimitToggle().click();
+    expect(onChange).toHaveBeenLastCalledWith({ charactersLimit: {} });
+    await driver.getCharactersLimitToggle().click();
+    expect(onChange).toHaveBeenLastCalledWith({ charactersLimit: undefined });
+  });
+
+  it('edits both character bounds through the controlled value', async () => {
+    const { driver, onChange } = renderInput({ charactersLimit: {} });
+
+    await driver.getMinCharactersInput().enterText('2');
+    expect(onChange).toHaveBeenLastCalledWith({
+      charactersLimit: { min: 2 },
+    });
+
+    await driver.getMaxCharactersInput().enterText('20');
+    expect(onChange).toHaveBeenLastCalledWith({
+      charactersLimit: { min: 2, max: 20 },
+    });
+  });
+
+  it('adds, edits, and removes specific values without replacing their IDs', async () => {
+    const { driver, onChange } = renderInput({ specificValues: [] });
+
+    await driver.getAddSpecificValueButton().click();
+    const added = onChange.mock.calls[0][0];
+    expect(added.specificValues?.[0]).toEqual({
+      id: expect.any(String),
+      value: '',
+    });
+
+    await driver.getSpecificValueInput(0).enterText('First');
+    const edited = onChange.mock.calls[1][0];
+    expect(edited.specificValues?.[0]).toEqual({
+      id: added.specificValues?.[0].id,
+      value: 'First',
+    });
+
+    await driver.getRemoveSpecificValueButton(0).click();
+    expect(onChange).toHaveBeenLastCalledWith({ specificValues: [] });
+  });
+
+  it('shows blank and duplicate specific-value errors', async () => {
+    const { driver } = renderInput({
+      specificValues: [
+        { id: 'blank', value: ' ' },
+        { id: 'first', value: 'One' },
+        { id: 'duplicate', value: ' One ' },
+      ],
+    });
+
+    expect(await driver.getSpecificValueInput(0).getStatusMessage()).toBe(
+      'Enter a value.',
+    );
+    expect(await driver.getSpecificValueInput(2).getStatusMessage()).toBe(
+      'Values must be unique.',
+    );
+  });
+
+  it('disables only inactive rules that conflict with character limits', async () => {
+    const { driver } = renderInput({ charactersLimit: {} });
+
+    expect(await driver.getCharactersLimitToggle().isDisabled()).toBe(false);
+    expect(await driver.getSpecificValuesToggle().isDisabled()).toBe(true);
+    expect(await driver.getPatternToggle().isDisabled()).toBe(false);
+    expect(await driver.hasExclusiveRulesExplanation()).toBe(true);
+  });
+
+  it('disables only inactive rules that conflict with specific values', async () => {
+    const { driver } = renderInput({ specificValues: [] });
+
+    expect(await driver.getSpecificValuesToggle().isDisabled()).toBe(false);
+    expect(await driver.getCharactersLimitToggle().isDisabled()).toBe(true);
+    expect(await driver.getPatternToggle().isDisabled()).toBe(true);
+  });
+
+  it('keeps active conflicting rules enabled so loaded data can be repaired', async () => {
+    const { driver, onChange } = renderInput({
+      charactersLimit: {},
+      specificValues: [],
+      pattern: '^value$',
+    });
+
+    expect(await driver.getCharactersLimitToggle().isDisabled()).toBe(false);
+    expect(await driver.getSpecificValuesToggle().isDisabled()).toBe(false);
+    expect(await driver.getPatternToggle().isDisabled()).toBe(false);
+
+    await driver.getSpecificValuesToggle().click();
+    expect(onChange).toHaveBeenLastCalledWith({
+      charactersLimit: {},
+      specificValues: undefined,
+      pattern: '^value$',
+    });
+  });
+
+  it('enables, edits, validates, and disables a string pattern', async () => {
+    const { driver, onChange } = renderInput({});
+
+    await driver.getPatternToggle().click();
+    expect(onChange).toHaveBeenLastCalledWith({ pattern: '' });
+
+    await driver.getPatternInput().enterText('[');
+    expect(onChange).toHaveBeenLastCalledWith({ pattern: '[' });
+    expect(await driver.getPatternInput().getStatusMessage()).toBe(
+      'Enter a valid regular expression.',
+    );
+
+    await driver.getPatternToggle().click();
+    expect(onChange).toHaveBeenLastCalledWith({ pattern: undefined });
+  });
+
+  it('disables every interactive control when read only', async () => {
+    const { driver } = renderInput(
+      {
+        required: true,
+        charactersLimit: { min: 2, max: 20 },
+        specificValues: [{ id: 'one', value: 'One' }],
+        pattern: '^value$',
+      },
+      { readOnly: true },
+    );
+
+    expect(await driver.getRequiredToggle().isDisabled()).toBe(true);
+    expect(await driver.getCharactersLimitToggle().isDisabled()).toBe(true);
+    expect(await driver.getMinCharactersInput().isDisabled()).toBe(true);
+    expect(await driver.getMaxCharactersInput().isDisabled()).toBe(true);
+    expect(await driver.getSpecificValuesToggle().isDisabled()).toBe(true);
+    expect(await driver.getSpecificValueInput(0).isDisabled()).toBe(true);
+    expect(await driver.getAddSpecificValueButton().isDisabled()).toBe(true);
+    expect(
+      await driver.getRemoveSpecificValueButton(0).isButtonDisabled(),
+    ).toBe(true);
+    expect(await driver.getPatternToggle().isDisabled()).toBe(true);
+    expect(await driver.getPatternInput().isDisabled()).toBe(true);
+  });
+
+  it('applies unattributed aggregate invalid styling without inventing an error message', async () => {
+    const { driver } = renderInput(
+      { charactersLimit: { min: 2, max: 20 } },
+      { rules: [charactersLimitRule], invalid: true },
+    );
+
+    expect(await driver.getMinCharactersInput().hasStatus('error')).toBe(true);
+    expect(await driver.getMaxCharactersInput().hasStatus('error')).toBe(true);
+  });
+});

package/src/__tests__/exports/field-validation-settings.spec.ts

@@ -0,0 +1,27 @@
+import {
+  FieldValidationSettingsInput,
+  getFieldValidationSettingsViolations,
+  hasFieldValidationSettingsError,
+} from '../../index';
+import type {
+  FieldValidationRuleConfig,
+  FieldValidationSettingsValue,
+} from '../../index';
+import { FieldValidationSettingsUniDriver } from '../../exports/unidriver';
+
+describe('field validation settings public exports', () => {
+  it('exports the component, pure helpers, types, and UniDriver', () => {
+    const rules: readonly FieldValidationRuleConfig[] = [
+      { type: 'required', label: 'Required', tooltip: 'Required tooltip' },
+    ];
+    const value: FieldValidationSettingsValue = { required: true };
+
+    expect(FieldValidationSettingsInput).toBeDefined();
+    expect(FieldValidationSettingsUniDriver).toBeDefined();
+    expect(getFieldValidationSettingsViolations(value)).toEqual([]);
+    expect(hasFieldValidationSettingsError(value)).toBe(false);
+    expect(rules).toEqual([
+      { type: 'required', label: 'Required', tooltip: 'Required tooltip' },
+    ]);
+  });
+});

package/src/components/address/input/address-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput1467036950";
+var _namespace_ = "addressinput1375149515";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"addressinput1467036950__root","tableAddressInput":"addressinput1467036950__tableAddressInput"};
+export var classes = {"root":"addressinput1375149515__root","tableAddressInput":"addressinput1375149515__tableAddressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/actions/actions-menu/actions-menu.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "actionsmenu1437673280";
+var _namespace_ = "actionsmenu3707053799";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"actionsmenu1437673280__root","action":"actionsmenu1437673280__action"};
+export var classes = {"root":"actionsmenu3707053799__root","action":"actionsmenu3707053799__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};