@wix/zero-config-implementation 1.65.0 → 1.66.0

package/dist/{index-DbvAWhJF.js → index-CtX9f415.js}

@@ -1,4 +1,4 @@
-import { g as x } from "./index-BLr9vmnH.js";
+import { g as x } from "./index-BEdi2EUy.js";
 function h(r, a) {
   for (var i = 0; i < a.length; i++) {
     const o = a[i];

package/dist/index.d.ts

@@ -2369,6 +2369,8 @@ export declare interface PropTrackerData {
     role?: string;
     boundProps: string[];
     concatenatedAttrs: Map<string, string>;
+    /** on*-handler prop names whose value is a function on this element (e.g. ['onClick', 'onChange']). */
+    eventHandlers: string[];
 }
 
 export declare interface PropTrackerExtractorState {

package/dist/index.js

@@ -1,4 +1,4 @@
-import { B as t, D as e, E as o, I as n, N as c, P as l, R as i, a as p, V as E, b as m, c as x, d as f, e as d, f as u, h as C, i as I, j as k, k as y, l as A, m as D, n as P, o as R, p as h, q as B, r as M, s as T, t as b, w } from "./index-BLr9vmnH.js";
+import { B as t, D as e, E as o, I as n, N as c, P as l, R as i, a as p, V as E, b as m, c as x, d as f, e as d, f as u, h as C, i as I, j as k, k as y, l as A, m as D, n as P, o as R, p as h, q as B, r as M, s as T, t as b, w } from "./index-BEdi2EUy.js";
 import "react";
 export {
   t as BaseError,

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.65.0",
+  "version": "1.66.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -81,5 +81,5 @@
       ]
     }
   },
-  "falconPackageHash": "978c6e182cced111caaef8f5bc88bdaadfdd813f14c0f9280352d625"
+  "falconPackageHash": "2a3fd8ab08ce40ac87e3bf2f07ad6928e67ddb1262856b12f593624b"
 }

package/src/converters/states-builder.ts

@@ -0,0 +1,58 @@
+/**
+ * Builds the `states` block for the root EditorElement and inline elements.
+ *
+ * Native states only (hover/focus/disabled/invalid). Signals come from the
+ * React extractor (tag, role, event handlers). The CSS extractor is not
+ * consulted.
+ *
+ * className follows BEM by appending `--<state>` to the element's own
+ * semantic class. Component authors are expected to write inner elements
+ * with full BEM class names (e.g. `toggle__label`), so the resulting state
+ * className is `<semanticClass>--<state>`:
+ *   - root  `toggle`         → `toggle--hover`
+ *   - inner `toggle__label`  → `toggle__label--hover`
+ *
+ * `props` is never emitted on native-state entries — that field is reserved
+ * for functional (non-native) states.
+ */
+
+import type { States } from '@wix/react-component-schema'
+import { NATIVE_STATE_TYPE } from '@wix/react-component-schema'
+import {
+  type ExtractedElement,
+  type SupportedNativeStates,
+  inferSupportedNativeStates,
+} from '../information-extractors/react'
+
+const STATE_DISPLAY_NAMES = {
+  hover: 'Hover',
+  focus: 'Focus',
+  disabled: 'Disabled',
+  invalid: 'Invalid',
+} as const
+
+type NativeStateName = keyof SupportedNativeStates
+
+const PSEUDO_CLASS_BY_STATE: Record<NativeStateName, NATIVE_STATE_TYPE> = {
+  hover: NATIVE_STATE_TYPE.hover,
+  focus: NATIVE_STATE_TYPE.focus,
+  disabled: NATIVE_STATE_TYPE.disabled,
+  invalid: NATIVE_STATE_TYPE.invalid,
+}
+
+export function buildStatesBlock(element: ExtractedElement, semanticClass: string): States | undefined {
+  const supported = inferSupportedNativeStates(element)
+  const states: States = {}
+
+  for (const stateName of Object.keys(supported) as NativeStateName[]) {
+    if (!supported[stateName]) continue
+
+    states[stateName] = {
+      displayName: STATE_DISPLAY_NAMES[stateName],
+      className: `${semanticClass}--${stateName}`,
+      pseudoClass: PSEUDO_CLASS_BY_STATE[stateName],
+    }
+  }
+
+  return Object.keys(states).length > 0 ? states : undefined
+}

package/src/converters/to-editor-component.ts

@@ -22,6 +22,7 @@ import { getDefaultDisplayForTag, resolveDisplayValue } from '../information-ext
 import { findPreferredSemanticClass } from '../utils/css-class'
 import { resolveLonghand } from './css-longhand-resolver'
 import { buildDataItem } from './data-item-builder'
+import { buildStatesBlock } from './states-builder'
 import { formatDisplayName } from './utils'
 
 // Props to exclude from data items (same as in element-data.ts)
@@ -42,6 +43,9 @@ function buildEditorElement(
   const childElements = rootElement?.children ?? []
   const rootCustomProps = rootElement ? (nearestCommonAncestorCustomProps.get(rootElement.traceId) ?? {}) : {}
 
+  const rootSemanticClass = getSemanticBlockName(rootElement)
+  const rootStates = rootElement && rootSemanticClass ? buildStatesBlock(rootElement, rootSemanticClass) : undefined
+
   return {
     selector: buildSelector(rootElement),
     displayName: formatDisplayName(component.componentName),
@@ -54,9 +58,15 @@ function buildEditorElement(
     ),
     cssProperties: buildCssProperties(rootElement),
     cssCustomProperties: rootCustomProps,
+    ...(rootStates && { states: rootStates }),
   }
 }
 
+function getSemanticBlockName(element: ExtractedElement | undefined): string | undefined {
+  if (!element?.attributes.class) return undefined
+  return findPreferredSemanticClass(element.attributes.class.split(' '))
+}
+
 function buildSelector(rootElement?: ExtractedElement): string {
   if (rootElement?.attributes.class) {
     const semanticClass = findPreferredSemanticClass(rootElement.attributes.class.split(' '))
@@ -101,6 +111,9 @@ function buildElements(
     const cssProps = buildCssProperties(element)
     const cssCustomProps = nearestCommonAncestorCustomProps.get(element.traceId) ?? {}
 
+    const semanticClass = getSemanticBlockName(element)
+    const states = semanticClass ? buildStatesBlock(element, semanticClass) : undefined
+
     result[element.name] = {
       elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
       inlineElement: {
@@ -113,6 +126,7 @@ function buildElements(
         ...(Object.keys(cssProps).length > 0 && { cssProperties: cssProps }),
         // CSS custom properties placed on the Nearest Common Ancestor of all elements that use each variable
         ...(Object.keys(cssCustomProps).length > 0 && { cssCustomProperties: cssCustomProps }),
+        ...(states && { states }),
         // Recursively build nested elements
         elements:
           element.children.length > 0

package/src/information-extractors/react/extractors/index.ts

@@ -31,3 +31,6 @@ export {
   getDefaultDisplayForTag,
 } from './css-properties'
 export type { CssPropertiesData } from './css-properties'
+
+export { inferSupportedNativeStates } from './state-markers'
+export type { SupportedNativeStates } from './state-markers'

package/src/information-extractors/react/extractors/prop-tracker.ts

@@ -20,6 +20,8 @@ export interface PropTrackerData {
   role?: string
   boundProps: string[]
   concatenatedAttrs: Map<string, string> // attrName → propName (for concatenated values)
+  /** on*-handler prop names whose value is a function on this element (e.g. ['onClick', 'onChange']). */
+  eventHandlers: string[]
 }
 
 export interface PropTrackerExtractorState {
@@ -110,10 +112,15 @@ export function createPropTrackerExtractor(): {
 
       const boundProps = new Set<string>()
       const concatenatedAttrs = new Map<string, string>()
+      const eventHandlers: string[] = []
 
       Object.entries(props).forEach(([key, value]) => {
         if (key.startsWith('__') || key === TRACE_ATTR) return
 
+        if (typeof value === 'function' && key.length > 2 && key.startsWith('on') && key[2] === key[2].toUpperCase()) {
+          eventHandlers.push(key)
+        }
+
         const spies = extractSpies(value)
 
         spies.forEach((spy) => {
@@ -141,6 +148,7 @@ export function createPropTrackerExtractor(): {
         role: htmlProps.role,
         boundProps: [...boundProps],
         concatenatedAttrs,
+        eventHandlers,
       }
       store.set(traceId, 'prop-tracker', data)
     },

package/src/information-extractors/react/extractors/state-markers.test.ts

@@ -0,0 +1,143 @@
+import { describe, expect, it } from 'vitest'
+import type { ExtractedElement } from './core/tree-builder'
+import type { PropTrackerData } from './prop-tracker'
+import { inferSupportedNativeStates } from './state-markers'
+
+function makeElement(input: {
+  tag: string
+  attributes?: Record<string, string>
+  role?: string
+  eventHandlers?: string[]
+}): ExtractedElement {
+  const propTrackerData: PropTrackerData = {
+    tag: input.tag,
+    role: input.role,
+    boundProps: [],
+    concatenatedAttrs: new Map(),
+    eventHandlers: input.eventHandlers ?? [],
+  }
+  return {
+    traceId: 'trace-0',
+    name: 'root',
+    tag: input.tag,
+    attributes: input.attributes ?? {},
+    extractorData: new Map([['prop-tracker', propTrackerData]]),
+    children: [],
+  }
+}
+
+describe('inferSupportedNativeStates', () => {
+  describe('hover + focus (interactive)', () => {
+    it('returns true for native form tags', () => {
+      for (const tag of ['button', 'a', 'input', 'select', 'textarea', 'summary']) {
+        const states = inferSupportedNativeStates(makeElement({ tag }))
+        expect(states.hover, `hover for <${tag}>`).toBe(true)
+        expect(states.focus, `focus for <${tag}>`).toBe(true)
+      }
+    })
+
+    it('returns true when role is interactive', () => {
+      const interactiveRoles = ['switch', 'checkbox', 'tab', 'menuitem', 'combobox', 'slider']
+      for (const role of interactiveRoles) {
+        const states = inferSupportedNativeStates(makeElement({ tag: 'div', role }))
+        expect(states.hover, `hover for role=${role}`).toBe(true)
+        expect(states.focus, `focus for role=${role}`).toBe(true)
+      }
+    })
+
+    it('returns true when any pointer/keyboard/form event handler is present', () => {
+      const handlers = ['onClick', 'onPointerDown', 'onFocus', 'onKeyDown', 'onChange']
+      for (const handler of handlers) {
+        const states = inferSupportedNativeStates(makeElement({ tag: 'div', eventHandlers: [handler] }))
+        expect(states.hover, `hover for ${handler}`).toBe(true)
+        expect(states.focus, `focus for ${handler}`).toBe(true)
+      }
+    })
+
+    it('returns false for a plain div with no signals', () => {
+      const states = inferSupportedNativeStates(makeElement({ tag: 'div' }))
+      expect(states.hover).toBe(false)
+      expect(states.focus).toBe(false)
+    })
+
+    it('reads role from the rendered attributes when prop-tracker data is absent', () => {
+      const element: ExtractedElement = {
+        traceId: 'trace-0',
+        name: 'root',
+        tag: 'div',
+        attributes: { role: 'button' },
+        extractorData: new Map(),
+        children: [],
+      }
+      const states = inferSupportedNativeStates(element)
+      expect(states.hover).toBe(true)
+      expect(states.focus).toBe(true)
+    })
+  })
+
+  describe('disabled', () => {
+    it('returns true for form-disableable native tags', () => {
+      for (const tag of ['button', 'input', 'select', 'textarea', 'fieldset']) {
+        const states = inferSupportedNativeStates(makeElement({ tag }))
+        expect(states.disabled, `disabled for <${tag}>`).toBe(true)
+      }
+    })
+
+    it('returns true for form-control roles', () => {
+      for (const role of ['button', 'switch', 'checkbox', 'radio', 'menuitem', 'tab', 'option', 'link']) {
+        const states = inferSupportedNativeStates(makeElement({ tag: 'div', role }))
+        expect(states.disabled, `disabled for role=${role}`).toBe(true)
+      }
+    })
+
+    it('returns false for plain divs and non-form roles', () => {
+      expect(inferSupportedNativeStates(makeElement({ tag: 'div' })).disabled).toBe(false)
+      expect(inferSupportedNativeStates(makeElement({ tag: 'div', role: 'navigation' })).disabled).toBe(false)
+    })
+  })
+
+  describe('invalid', () => {
+    it('returns true for form-validatable native tags', () => {
+      for (const tag of ['input', 'select', 'textarea', 'form']) {
+        const states = inferSupportedNativeStates(makeElement({ tag }))
+        expect(states.invalid, `invalid for <${tag}>`).toBe(true)
+      }
+    })
+
+    it('returns false for a plain button (not form-validatable)', () => {
+      expect(inferSupportedNativeStates(makeElement({ tag: 'button' })).invalid).toBe(false)
+    })
+
+    it('ignores the aria-invalid attribute on non-form tags', () => {
+      const states = inferSupportedNativeStates(makeElement({ tag: 'div', attributes: { 'aria-invalid': 'true' } }))
+      expect(states.invalid).toBe(false)
+    })
+  })
+
+  describe('role="presentation" / "none" opt-out', () => {
+    it('suppresses every native state when role is "presentation"', () => {
+      const states = inferSupportedNativeStates(makeElement({ tag: 'button', role: 'presentation' }))
+      expect(states).toEqual({ hover: false, focus: false, disabled: false, invalid: false })
+    })
+
+    it('suppresses every native state when role is "none"', () => {
+      const states = inferSupportedNativeStates(makeElement({ tag: 'input', role: 'none' }))
+      expect(states).toEqual({ hover: false, focus: false, disabled: false, invalid: false })
+    })
+  })
+
+  describe('tabindex="-1" suppresses focus', () => {
+    it('keeps hover and disabled but suppresses focus on an interactive tag with tabindex="-1"', () => {
+      const states = inferSupportedNativeStates(makeElement({ tag: 'button', attributes: { tabindex: '-1' } }))
+      expect(states.hover).toBe(true)
+      expect(states.focus).toBe(false)
+      expect(states.disabled).toBe(true)
+    })
+
+    it('does not affect non-interactive elements (no focus to suppress)', () => {
+      const states = inferSupportedNativeStates(makeElement({ tag: 'div', attributes: { tabindex: '-1' } }))
+      expect(states.focus).toBe(false)
+      expect(states.hover).toBe(false)
+    })
+  })
+})

package/src/information-extractors/react/extractors/state-markers.ts

@@ -0,0 +1,142 @@
+/**
+ * Design-state inference from React-extractor signals.
+ *
+ * The new design (Notion: "New Design") supports only the four native states
+ * (hover/focus/disabled/invalid) and derives them purely from the React side:
+ * html tag, role attribute, and event handlers. The CSS extractor is not
+ * involved.
+ */
+
+import type { ExtractedElement } from './core/tree-builder'
+import type { PropTrackerData } from './prop-tracker'
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface SupportedNativeStates {
+  hover: boolean
+  focus: boolean
+  disabled: boolean
+  invalid: boolean
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Signal sets
+// ─────────────────────────────────────────────────────────────────────────────
+
+const INTERACTIVE_TAGS = new Set(['button', 'a', 'input', 'select', 'textarea', 'summary'])
+
+const INTERACTIVE_ROLES = new Set([
+  'button',
+  'link',
+  'switch',
+  'checkbox',
+  'radio',
+  'tab',
+  'option',
+  'menuitem',
+  'menuitemcheckbox',
+  'menuitemradio',
+  'treeitem',
+  'combobox',
+  'slider',
+  'spinbutton',
+  'searchbox',
+  'textbox',
+  'listbox',
+])
+
+const INTERACTIVE_EVENT_HANDLERS = new Set([
+  'onClick',
+  'onMouseDown',
+  'onMouseUp',
+  'onMouseEnter',
+  'onMouseLeave',
+  'onPointerDown',
+  'onPointerUp',
+  'onFocus',
+  'onBlur',
+  'onKeyDown',
+  'onKeyUp',
+  'onKeyPress',
+  'onChange',
+  'onInput',
+  'onSubmit',
+])
+
+const DISABLEABLE_TAGS = new Set(['button', 'input', 'select', 'textarea', 'fieldset'])
+
+const DISABLEABLE_ROLES = new Set(['button', 'switch', 'checkbox', 'radio', 'menuitem', 'tab', 'option', 'link'])
+
+const VALIDATABLE_TAGS = new Set(['input', 'select', 'textarea', 'form'])
+
+const PRESENTATION_ROLES = new Set(['presentation', 'none'])
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Inference
+// ─────────────────────────────────────────────────────────────────────────────
+
+function getRole(element: ExtractedElement): string | undefined {
+  const propTrackerData = element.extractorData.get('prop-tracker') as PropTrackerData | undefined
+  return propTrackerData?.role ?? element.attributes.role
+}
+
+function getEventHandlers(element: ExtractedElement): string[] {
+  const propTrackerData = element.extractorData.get('prop-tracker') as PropTrackerData | undefined
+  return propTrackerData?.eventHandlers ?? []
+}
+
+/**
+ * `role="presentation"` and `role="none"` strip the element's implicit ARIA
+ * semantics — a `<button role="presentation">` is no longer a button. Treat
+ * either as an explicit opt-out from every native state.
+ */
+function hasPresentationRole(role: string | undefined): boolean {
+  return role !== undefined && PRESENTATION_ROLES.has(role)
+}
+
+function hasInteractiveSignal(tag: string, role: string | undefined, eventHandlers: string[]): boolean {
+  if (INTERACTIVE_TAGS.has(tag)) return true
+  if (role !== undefined && INTERACTIVE_ROLES.has(role)) return true
+  return eventHandlers.some((handler) => INTERACTIVE_EVENT_HANDLERS.has(handler))
+}
+
+function hasDisableableSignal(tag: string, role: string | undefined): boolean {
+  if (DISABLEABLE_TAGS.has(tag)) return true
+  if (role !== undefined && DISABLEABLE_ROLES.has(role)) return true
+  return false
+}
+
+function hasValidatableSignal(tag: string): boolean {
+  return VALIDATABLE_TAGS.has(tag)
+}
+
+/**
+ * Decides which of the four native states the given element supports, based on
+ * its tag, role, and event handlers.
+ *
+ * Two attribute-level overrides apply:
+ *   - `role="presentation"` / `role="none"` opts the element out of every state.
+ *   - `tabindex="-1"` suppresses `focus` only (the element is programmatically
+ *     focusable but not via keyboard tab).
+ */
+export function inferSupportedNativeStates(element: ExtractedElement): SupportedNativeStates {
+  const tag = element.tag.toLowerCase()
+  const role = getRole(element)
+
+  if (hasPresentationRole(role)) {
+    return { hover: false, focus: false, disabled: false, invalid: false }
+  }
+
+  const eventHandlers = getEventHandlers(element)
+  const interactive = hasInteractiveSignal(tag, role, eventHandlers)
+  const isUntabbable = element.attributes.tabindex === '-1'
+
+  return {
+    hover: interactive,
+    focus: interactive && !isUntabbable,
+    disabled: hasDisableableSignal(tag, role),
+    invalid: hasValidatableSignal(tag),
+  }
+}

package/src/information-extractors/react/index.ts

@@ -19,6 +19,7 @@ export {
   enrichGapProperties,
   resolveDisplayValue,
   getDefaultDisplayForTag,
+  inferSupportedNativeStates,
 } from './extractors'
 
 export type {
@@ -34,6 +35,7 @@ export type {
   PropTrackerData,
   PropTrackerExtractorState,
   CssPropertiesData,
+  SupportedNativeStates,
 } from './extractors'
 
 // ─────────────────────────────────────────────────────────────────────────────