@proyecto-viviana/solidaria 0.4.2 → 0.6.0-rc.0

package/dist/_chunk/createCollator.jsx

@@ -1,3 +1,15 @@
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/i18n/useCollator.ts
 import { a as createCacheKey, i as useLocale } from "./locale.jsx";
 import { createMemo } from "solid-js";
 //#region src/i18n/createCollator.ts

package/dist/_chunk/createCollator.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"createCollator.jsx","names":[],"sources":["../../src/i18n/createCollator.ts"],"sourcesContent":["/**\n * createCollator hook for solidaria\n *\n * Provides localized string comparison/collation with caching.\n *\n * Port of @react-aria/i18n useCollator.\n */\n\nimport { createMemo } from \"solid-js\";\nimport { useLocale } from \"./locale\";\nimport { createCacheKey } from \"./utils\";\n\nconst collatorCache = new Map<string, Intl.Collator>();\n\n/**\n * Gets or creates a cached collator.\n */\nfunction getCachedCollator(locale: string, options?: Intl.CollatorOptions): Intl.Collator {\n  const cacheKey = createCacheKey(locale, options as Record<string, unknown>);\n\n  if (collatorCache.has(cacheKey)) {\n    return collatorCache.get(cacheKey)!;\n  }\n\n  const collator = new Intl.Collator(locale, options);\n  collatorCache.set(cacheKey, collator);\n  return collator;\n}\n\n/**\n * Provides localized string collation for the current locale.\n * Useful for sorting strings according to locale-specific rules.\n *\n * @example\n * ```tsx\n * function SortedList(props: { items: string[] }) {\n *   const collator = createCollator();\n *\n *   const sortedItems = () =>\n *     [...props.items].sort((a, b) => collator().compare(a, b));\n *\n *   return (\n *     <ul>\n *       <For each={sortedItems()}>\n *         {(item) => <li>{item}</li>}\n *       </For>\n *     </ul>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Case-insensitive sorting\n * const collator = createCollator({ sensitivity: 'base' });\n *\n * // Numeric sorting\n * const numericCollator = createCollator({ numeric: true });\n * // ['a1', 'a10', 'a2'].sort(numericCollator().compare) -> ['a1', 'a2', 'a10']\n * ```\n */\nexport function createCollator(options?: Intl.CollatorOptions): () => Intl.Collator {\n  const locale = useLocale();\n\n  return createMemo(() => getCachedCollator(locale().locale, options));\n}\n"],"mappings":";;;;;;;;;;AAYA,MAAM,gCAAgB,IAAI,IAA2B;;;;AAKrD,SAAS,kBAAkB,QAAgB,SAA+C;CACxF,MAAM,WAAW,eAAe,QAAQ,OAAkC;CAE1E,IAAI,cAAc,IAAI,QAAQ,GAC5B,OAAO,cAAc,IAAI,QAAQ;CAGnC,MAAM,WAAW,IAAI,KAAK,SAAS,QAAQ,OAAO;CAClD,cAAc,IAAI,UAAU,QAAQ;CACpC,OAAO;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgB,eAAe,SAAqD;CAClF,MAAM,SAAS,UAAU;CAEzB,OAAO,iBAAiB,kBAAkB,OAAO,CAAC,CAAC,QAAQ,OAAO,CAAC;AACrE"}
+{"version":3,"file":"createCollator.jsx","names":[],"sources":["../../src/i18n/createCollator.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/i18n/useCollator.ts\n\n/**\n * createCollator hook for solidaria\n *\n * Provides localized string comparison/collation with caching.\n *\n * Port of @react-aria/i18n useCollator.\n */\n\nimport { createMemo } from \"solid-js\";\nimport { useLocale } from \"./locale\";\nimport { createCacheKey } from \"./utils\";\n\nconst collatorCache = new Map<string, Intl.Collator>();\n\n/**\n * Gets or creates a cached collator.\n */\nfunction getCachedCollator(locale: string, options?: Intl.CollatorOptions): Intl.Collator {\n  const cacheKey = createCacheKey(locale, options as Record<string, unknown>);\n\n  if (collatorCache.has(cacheKey)) {\n    return collatorCache.get(cacheKey)!;\n  }\n\n  const collator = new Intl.Collator(locale, options);\n  collatorCache.set(cacheKey, collator);\n  return collator;\n}\n\n/**\n * Provides localized string collation for the current locale.\n * Useful for sorting strings according to locale-specific rules.\n *\n * @example\n * ```tsx\n * function SortedList(props: { items: string[] }) {\n *   const collator = createCollator();\n *\n *   const sortedItems = () =>\n *     [...props.items].sort((a, b) => collator().compare(a, b));\n *\n *   return (\n *     <ul>\n *       <For each={sortedItems()}>\n *         {(item) => <li>{item}</li>}\n *       </For>\n *     </ul>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Case-insensitive sorting\n * const collator = createCollator({ sensitivity: 'base' });\n *\n * // Numeric sorting\n * const numericCollator = createCollator({ numeric: true });\n * // ['a1', 'a10', 'a2'].sort(numericCollator().compare) -> ['a1', 'a2', 'a10']\n * ```\n */\nexport function createCollator(options?: Intl.CollatorOptions): () => Intl.Collator {\n  const locale = useLocale();\n\n  return createMemo(() => getCachedCollator(locale().locale, options));\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAM,gCAAgB,IAAI,IAA2B;;;;AAKrD,SAAS,kBAAkB,QAAgB,SAA+C;CACxF,MAAM,WAAW,eAAe,QAAQ,OAAkC;CAE1E,IAAI,cAAc,IAAI,QAAQ,GAC5B,OAAO,cAAc,IAAI,QAAQ;CAGnC,MAAM,WAAW,IAAI,KAAK,SAAS,QAAQ,OAAO;CAClD,cAAc,IAAI,UAAU,QAAQ;CACpC,OAAO;AACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgB,eAAe,SAAqD;CAClF,MAAM,SAAS,UAAU;CAEzB,OAAO,iBAAiB,kBAAkB,OAAO,CAAC,CAAC,QAAQ,OAAO,CAAC;AACrE"}

package/dist/_chunk/createCollectionRowInteraction.js

@@ -1,6 +1,31 @@
-import { S as scrollIntoViewport } from "./utils.js";
-import { a as getEventTarget, g as isTabbable, i as getActiveElement, l as getScrollParent, o as getFocusableTreeWalker, t as focusSafely, y as nodeContains } from "./focus.js";
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/gridlist/useGridListItem.ts
+import { _ as scrollIntoViewport } from "./utils.js";
+import { c as getScrollParent, f as isFocusable, i as getFocusableTreeWalker, n as getActiveElement, r as getEventTarget, v as nodeContains, w as focusSafely } from "./dom.js";
 //#region src/selection/createCollectionRowInteraction.ts
+/**
+* Nested ActionMenu / checkbox widgets in an arrow-nav row are focusable but
+* `tabIndex=-1`, so `isTabbable` misses them. Walk to the nearest focusable
+* ancestor inside the row (the event target is often an SVG inside the trigger).
+*/
+function isNestedFocusableChild(row, target) {
+	let el = target;
+	while (el && el !== row) {
+		if (isFocusable(el)) return true;
+		el = el.parentElement;
+	}
+	return false;
+}
 function lastFocusable(walker) {
 	let last = null;
 	let next;
@@ -36,6 +61,7 @@ function mergeCollectionRowInteractionProps(rowProps, options) {
 	const baseOnKeyDown = rowProps.onKeyDown;
 	const baseOnPointerDown = rowProps.onPointerDown;
 	const baseOnMouseDown = rowProps.onMouseDown;
+	const baseOnClick = rowProps.onClick;
 	const onKeyDownCapture = (event) => {
 		const row = options.ref();
 		const activeElement = getActiveElement(row?.ownerDocument);
@@ -43,6 +69,11 @@ function mergeCollectionRowInteractionProps(rowProps, options) {
 			baseOnKeyDownCapture?.(event);
 			return;
 		}
+		if (options.onBeforeArrowNavigation?.(event)) return;
+		if (options.layout?.() === "grid" && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
+			baseOnKeyDownCapture?.(event);
+			return;
+		}
 		const direction = options.direction?.() ?? "ltr";
 		const walker = getFocusableTreeWalker(row);
 		walker.currentNode = activeElement;
@@ -74,13 +105,11 @@ function mergeCollectionRowInteractionProps(rowProps, options) {
 				break;
 			}
 			case "ArrowUp":
-			case "ArrowDown":
-				if (!event.altKey) {
-					event.preventDefault();
-					event.stopPropagation();
-					redispatchCollectionArrowKey(row, event);
-				}
-				break;
+			case "ArrowDown": if (!event.altKey) {
+				event.preventDefault();
+				event.stopPropagation();
+				redispatchCollectionArrowKey(row, event);
+			}
 		}
 		if (!event.cancelBubble) baseOnKeyDownCapture?.(event);
 	};
@@ -104,7 +133,7 @@ function mergeCollectionRowInteractionProps(rowProps, options) {
 	const onPointerDown = (event) => {
 		const row = options.ref();
 		const target = getEventTarget(event);
-		if (row && target && target !== row && isTabbable(target)) {
+		if (row && target && target !== row && isNestedFocusableChild(row, target)) {
 			event.stopPropagation();
 			return;
 		}
@@ -113,18 +142,26 @@ function mergeCollectionRowInteractionProps(rowProps, options) {
 	const onMouseDown = (event) => {
 		const row = options.ref();
 		const target = getEventTarget(event);
-		if (row && target && target !== row && isTabbable(target)) {
+		if (row && target && target !== row && isNestedFocusableChild(row, target)) {
 			event.stopPropagation();
 			return;
 		}
 		baseOnMouseDown?.(event);
 	};
+	const onClick = (event) => {
+		const row = options.ref();
+		const target = getEventTarget(event);
+		if (row && target && target !== row && isNestedFocusableChild(row, target)) return;
+		baseOnClick?.(event);
+	};
+	const captureHandler = options.keyboardNavigationBehavior() === "arrow" ? onKeyDownCapture : baseOnKeyDownCapture;
 	return {
 		...rowProps,
-		onKeyDownCapture: options.keyboardNavigationBehavior() === "arrow" ? onKeyDownCapture : baseOnKeyDownCapture,
+		onKeyDownCapture: captureHandler,
 		onKeyDown,
 		onPointerDown,
-		onMouseDown
+		onMouseDown,
+		onClick
 	};
 }
 //#endregion

package/dist/_chunk/createCollectionRowInteraction.js.map

@@ -1 +1 @@
-{"version":3,"file":"createCollectionRowInteraction.js","names":[],"sources":["../../src/selection/createCollectionRowInteraction.ts"],"sourcesContent":["import type { Accessor, JSX } from \"solid-js\";\nimport {\n  getActiveElement,\n  getEventTarget,\n  getFocusableTreeWalker,\n  getScrollParent,\n  isTabbable,\n  nodeContains,\n} from \"../utils/dom\";\nimport { focusSafely } from \"../utils/focus\";\nimport { scrollIntoViewport } from \"../utils/scrollIntoView\";\n\ntype KeyboardNavigationBehavior = \"arrow\" | \"tab\";\n\ninterface CollectionRowInteractionOptions {\n  ref: Accessor<HTMLElement | null>;\n  keyboardNavigationBehavior: Accessor<KeyboardNavigationBehavior>;\n  direction?: Accessor<\"ltr\" | \"rtl\">;\n}\n\ntype CollectionRowInteractionProps<T extends HTMLElement> = JSX.HTMLAttributes<T> & {\n  onKeyDownCapture?: JSX.EventHandler<T, KeyboardEvent>;\n};\n\nfunction lastFocusable(walker: TreeWalker): HTMLElement | null {\n  let last: Node | null = null;\n  let next: Node | null;\n  while ((next = walker.nextNode())) {\n    last = next;\n  }\n  return last instanceof HTMLElement ? last : null;\n}\n\nfunction scrollFocusedElementIntoView(row: HTMLElement, element: HTMLElement): void {\n  focusSafely(element);\n  scrollIntoViewport(element, { containingElement: getScrollParent(row) });\n}\n\nfunction redispatchCollectionArrowKey(row: HTMLElement, event: KeyboardEvent): void {\n  row.parentElement?.dispatchEvent(\n    new KeyboardEvent(event.type, {\n      altKey: event.altKey,\n      bubbles: true,\n      cancelable: event.cancelable,\n      code: event.code,\n      composed: event.composed,\n      ctrlKey: event.ctrlKey,\n      key: event.key,\n      location: event.location,\n      metaKey: event.metaKey,\n      repeat: event.repeat,\n      shiftKey: event.shiftKey,\n    }),\n  );\n}\n\nfunction shouldIgnoreRowEvent(event: Event, row: HTMLElement): boolean {\n  const target = getEventTarget<Element>(event);\n  const currentTarget = event.currentTarget as Element | null;\n  return (\n    !target || !currentTarget || !nodeContains(currentTarget, target) || !nodeContains(row, target)\n  );\n}\n\nexport function mergeCollectionRowInteractionProps<T extends HTMLElement>(\n  rowProps: CollectionRowInteractionProps<T>,\n  options: CollectionRowInteractionOptions,\n): CollectionRowInteractionProps<T> {\n  const baseOnKeyDownCapture = rowProps.onKeyDownCapture as\n    | ((event: KeyboardEvent) => void)\n    | undefined;\n  const baseOnKeyDown = rowProps.onKeyDown as ((event: KeyboardEvent) => void) | undefined;\n  const baseOnPointerDown = rowProps.onPointerDown as ((event: PointerEvent) => void) | undefined;\n  const baseOnMouseDown = rowProps.onMouseDown as ((event: MouseEvent) => void) | undefined;\n\n  const onKeyDownCapture = (event: KeyboardEvent) => {\n    const row = options.ref();\n    const activeElement = getActiveElement(row?.ownerDocument);\n    if (\n      options.keyboardNavigationBehavior() !== \"arrow\" ||\n      !row ||\n      !activeElement ||\n      shouldIgnoreRowEvent(event, row)\n    ) {\n      baseOnKeyDownCapture?.(event);\n      return;\n    }\n\n    const direction = options.direction?.() ?? \"ltr\";\n    const walker = getFocusableTreeWalker(row);\n    walker.currentNode = activeElement;\n\n    switch (event.key) {\n      case \"ArrowLeft\": {\n        const focusable =\n          direction === \"rtl\"\n            ? (walker.nextNode() as HTMLElement | null)\n            : (walker.previousNode() as HTMLElement | null);\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (focusable) {\n          scrollFocusedElementIntoView(row, focusable);\n        } else if (direction === \"rtl\") {\n          scrollFocusedElementIntoView(row, row);\n        } else {\n          walker.currentNode = row;\n          const lastElement = lastFocusable(walker);\n          if (lastElement) {\n            scrollFocusedElementIntoView(row, lastElement);\n          }\n        }\n        break;\n      }\n      case \"ArrowRight\": {\n        const focusable =\n          direction === \"rtl\"\n            ? (walker.previousNode() as HTMLElement | null)\n            : (walker.nextNode() as HTMLElement | null);\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (focusable) {\n          scrollFocusedElementIntoView(row, focusable);\n        } else if (direction === \"ltr\") {\n          scrollFocusedElementIntoView(row, row);\n        } else {\n          walker.currentNode = row;\n          const lastElement = lastFocusable(walker);\n          if (lastElement) {\n            scrollFocusedElementIntoView(row, lastElement);\n          }\n        }\n        break;\n      }\n      case \"ArrowUp\":\n      case \"ArrowDown\": {\n        if (!event.altKey) {\n          event.preventDefault();\n          event.stopPropagation();\n          redispatchCollectionArrowKey(row, event);\n        }\n        break;\n      }\n    }\n\n    if (!event.cancelBubble) {\n      baseOnKeyDownCapture?.(event);\n    }\n  };\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    const row = options.ref();\n    const target = getEventTarget<Element>(event);\n    const activeElement = getActiveElement(row?.ownerDocument);\n\n    if (row && target && activeElement && !shouldIgnoreRowEvent(event, row)) {\n      if (options.keyboardNavigationBehavior() === \"tab\" && target !== row && event.key !== \"Tab\") {\n        event.stopPropagation();\n        return;\n      }\n\n      if (options.keyboardNavigationBehavior() === \"tab\" && event.key === \"Tab\") {\n        const walker = getFocusableTreeWalker(row, { tabbable: true });\n        walker.currentNode = activeElement;\n        const next = event.shiftKey ? walker.previousNode() : walker.nextNode();\n\n        if (next) {\n          event.stopPropagation();\n        }\n      }\n    }\n\n    if (!event.cancelBubble) {\n      baseOnKeyDown?.(event);\n    }\n  };\n\n  const onPointerDown = (event: PointerEvent) => {\n    const row = options.ref();\n    const target = getEventTarget<Element>(event);\n    if (row && target && target !== row && isTabbable(target)) {\n      event.stopPropagation();\n      return;\n    }\n    baseOnPointerDown?.(event);\n  };\n\n  const onMouseDown = (event: MouseEvent) => {\n    const row = options.ref();\n    const target = getEventTarget<Element>(event);\n    if (row && target && target !== row && isTabbable(target)) {\n      event.stopPropagation();\n      return;\n    }\n    baseOnMouseDown?.(event);\n  };\n\n  return {\n    ...rowProps,\n    onKeyDownCapture:\n      options.keyboardNavigationBehavior() === \"arrow\" ? onKeyDownCapture : baseOnKeyDownCapture,\n    onKeyDown,\n    onPointerDown,\n    onMouseDown,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"createCollectionRowInteraction.js","names":[],"sources":["../../src/selection/createCollectionRowInteraction.ts"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/gridlist/useGridListItem.ts\n\nimport type { Accessor } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  getActiveElement,\n  getEventTarget,\n  getFocusableTreeWalker,\n  getScrollParent,\n  isFocusable,\n  nodeContains,\n} from \"../utils/dom\";\nimport { focusSafely } from \"../utils/focus\";\nimport { scrollIntoViewport } from \"../utils/scrollIntoView\";\n\ntype KeyboardNavigationBehavior = \"arrow\" | \"tab\";\n\ninterface CollectionRowInteractionOptions {\n  ref: Accessor<HTMLElement | null>;\n  keyboardNavigationBehavior: Accessor<KeyboardNavigationBehavior>;\n  direction?: Accessor<\"ltr\" | \"rtl\">;\n  /**\n   * `\"grid\"` skips intra-row Left/Right so the collection can move between\n   * columns (S2 CardView `layout=\"grid\"`).\n   */\n  layout?: Accessor<\"stack\" | \"grid\">;\n  /**\n   * Tree expansion/collapse runs in capture before intra-row arrow walking,\n   * matching RAC `handleTreeExpansionKeys`. Return true if the key was handled.\n   */\n  onBeforeArrowNavigation?: (event: KeyboardEvent) => boolean;\n}\n\ntype CollectionRowInteractionProps<T extends HTMLElement> = JSX.HTMLAttributes<T> & {\n  onKeyDownCapture?: JSX.EventHandler<T, KeyboardEvent>;\n};\n\n/**\n * Nested ActionMenu / checkbox widgets in an arrow-nav row are focusable but\n * `tabIndex=-1`, so `isTabbable` misses them. Walk to the nearest focusable\n * ancestor inside the row (the event target is often an SVG inside the trigger).\n */\nfunction isNestedFocusableChild(row: Element, target: Element): boolean {\n  let el: Element | null = target;\n  while (el && el !== row) {\n    if (isFocusable(el)) {\n      return true;\n    }\n    el = el.parentElement;\n  }\n  return false;\n}\n\nfunction lastFocusable(walker: TreeWalker): HTMLElement | null {\n  let last: Node | null = null;\n  let next: Node | null;\n  while ((next = walker.nextNode())) {\n    last = next;\n  }\n  return last instanceof HTMLElement ? last : null;\n}\n\nfunction scrollFocusedElementIntoView(row: HTMLElement, element: HTMLElement): void {\n  focusSafely(element);\n  scrollIntoViewport(element, { containingElement: getScrollParent(row) });\n}\n\nfunction redispatchCollectionArrowKey(row: HTMLElement, event: KeyboardEvent): void {\n  row.parentElement?.dispatchEvent(\n    new KeyboardEvent(event.type, {\n      altKey: event.altKey,\n      bubbles: true,\n      cancelable: event.cancelable,\n      code: event.code,\n      composed: event.composed,\n      ctrlKey: event.ctrlKey,\n      key: event.key,\n      location: event.location,\n      metaKey: event.metaKey,\n      repeat: event.repeat,\n      shiftKey: event.shiftKey,\n    }),\n  );\n}\n\nfunction shouldIgnoreRowEvent(event: Event, row: HTMLElement): boolean {\n  const target = getEventTarget<Element>(event);\n  const currentTarget = event.currentTarget as Element | null;\n  return (\n    !target || !currentTarget || !nodeContains(currentTarget, target) || !nodeContains(row, target)\n  );\n}\n\nexport function mergeCollectionRowInteractionProps<T extends HTMLElement>(\n  rowProps: CollectionRowInteractionProps<T>,\n  options: CollectionRowInteractionOptions,\n): CollectionRowInteractionProps<T> {\n  const baseOnKeyDownCapture = rowProps.onKeyDownCapture as\n    | ((event: KeyboardEvent) => void)\n    | undefined;\n  const baseOnKeyDown = rowProps.onKeyDown as ((event: KeyboardEvent) => void) | undefined;\n  const baseOnPointerDown = rowProps.onPointerDown as ((event: PointerEvent) => void) | undefined;\n  const baseOnMouseDown = rowProps.onMouseDown as ((event: MouseEvent) => void) | undefined;\n  const baseOnClick = rowProps.onClick as ((event: MouseEvent) => void) | undefined;\n\n  const onKeyDownCapture = (event: KeyboardEvent) => {\n    const row = options.ref();\n    const activeElement = getActiveElement(row?.ownerDocument);\n    if (\n      options.keyboardNavigationBehavior() !== \"arrow\" ||\n      !row ||\n      !activeElement ||\n      shouldIgnoreRowEvent(event, row)\n    ) {\n      baseOnKeyDownCapture?.(event);\n      return;\n    }\n\n    if (options.onBeforeArrowNavigation?.(event)) {\n      return;\n    }\n\n    if (\n      options.layout?.() === \"grid\" &&\n      (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\")\n    ) {\n      baseOnKeyDownCapture?.(event);\n      return;\n    }\n\n    const direction = options.direction?.() ?? \"ltr\";\n    const walker = getFocusableTreeWalker(row);\n    walker.currentNode = activeElement;\n\n    switch (event.key) {\n      case \"ArrowLeft\": {\n        const focusable =\n          direction === \"rtl\"\n            ? (walker.nextNode() as HTMLElement | null)\n            : (walker.previousNode() as HTMLElement | null);\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (focusable) {\n          scrollFocusedElementIntoView(row, focusable);\n        } else if (direction === \"rtl\") {\n          scrollFocusedElementIntoView(row, row);\n        } else {\n          walker.currentNode = row;\n          const lastElement = lastFocusable(walker);\n          if (lastElement) {\n            scrollFocusedElementIntoView(row, lastElement);\n          }\n        }\n        break;\n      }\n      case \"ArrowRight\": {\n        const focusable =\n          direction === \"rtl\"\n            ? (walker.previousNode() as HTMLElement | null)\n            : (walker.nextNode() as HTMLElement | null);\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (focusable) {\n          scrollFocusedElementIntoView(row, focusable);\n        } else if (direction === \"ltr\") {\n          scrollFocusedElementIntoView(row, row);\n        } else {\n          walker.currentNode = row;\n          const lastElement = lastFocusable(walker);\n          if (lastElement) {\n            scrollFocusedElementIntoView(row, lastElement);\n          }\n        }\n        break;\n      }\n      case \"ArrowUp\":\n      case \"ArrowDown\": {\n        if (!event.altKey) {\n          event.preventDefault();\n          event.stopPropagation();\n          redispatchCollectionArrowKey(row, event);\n        }\n        break;\n      }\n    }\n\n    if (!event.cancelBubble) {\n      baseOnKeyDownCapture?.(event);\n    }\n  };\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    const row = options.ref();\n    const target = getEventTarget<Element>(event);\n    const activeElement = getActiveElement(row?.ownerDocument);\n\n    if (row && target && activeElement && !shouldIgnoreRowEvent(event, row)) {\n      if (options.keyboardNavigationBehavior() === \"tab\" && target !== row && event.key !== \"Tab\") {\n        event.stopPropagation();\n        return;\n      }\n\n      if (options.keyboardNavigationBehavior() === \"tab\" && event.key === \"Tab\") {\n        const walker = getFocusableTreeWalker(row, { tabbable: true });\n        walker.currentNode = activeElement;\n        const next = event.shiftKey ? walker.previousNode() : walker.nextNode();\n\n        if (next) {\n          event.stopPropagation();\n        }\n      }\n    }\n\n    if (!event.cancelBubble) {\n      baseOnKeyDown?.(event);\n    }\n  };\n\n  const onPointerDown = (event: PointerEvent) => {\n    const row = options.ref();\n    const target = getEventTarget<Element>(event);\n    if (row && target && target !== row && isNestedFocusableChild(row, target)) {\n      event.stopPropagation();\n      return;\n    }\n    baseOnPointerDown?.(event);\n  };\n\n  const onMouseDown = (event: MouseEvent) => {\n    const row = options.ref();\n    const target = getEventTarget<Element>(event);\n    if (row && target && target !== row && isNestedFocusableChild(row, target)) {\n      event.stopPropagation();\n      return;\n    }\n    baseOnMouseDown?.(event);\n  };\n\n  const onClick = (event: MouseEvent) => {\n    const row = options.ref();\n    const target = getEventTarget<Element>(event);\n    if (row && target && target !== row && isNestedFocusableChild(row, target)) {\n      return;\n    }\n    baseOnClick?.(event);\n  };\n\n  const captureHandler =\n    options.keyboardNavigationBehavior() === \"arrow\" ? onKeyDownCapture : baseOnKeyDownCapture;\n\n  return {\n    ...rowProps,\n    // Solid 2 has no capture JSX. The live binding is `bindCapture` in\n    // createGridListItem / createTreeItem. Keep the RAC name so unit tests\n    // can still invoke the handler off rowProps.\n    onKeyDownCapture: captureHandler,\n    onKeyDown,\n    onPointerDown,\n    onMouseDown,\n    onClick,\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/createCollectionRowInteraction.jsx

@@ -1,6 +1,31 @@
-import { S as scrollIntoViewport } from "./utils.jsx";
-import { a as getEventTarget, g as isTabbable, i as getActiveElement, l as getScrollParent, o as getFocusableTreeWalker, t as focusSafely, y as nodeContains } from "./focus.jsx";
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/gridlist/useGridListItem.ts
+import { _ as scrollIntoViewport } from "./utils.jsx";
+import { c as getScrollParent, f as isFocusable, i as getFocusableTreeWalker, n as getActiveElement, r as getEventTarget, v as nodeContains, w as focusSafely } from "./dom.jsx";
 //#region src/selection/createCollectionRowInteraction.ts
+/**
+* Nested ActionMenu / checkbox widgets in an arrow-nav row are focusable but
+* `tabIndex=-1`, so `isTabbable` misses them. Walk to the nearest focusable
+* ancestor inside the row (the event target is often an SVG inside the trigger).
+*/
+function isNestedFocusableChild(row, target) {
+	let el = target;
+	while (el && el !== row) {
+		if (isFocusable(el)) return true;
+		el = el.parentElement;
+	}
+	return false;
+}
 function lastFocusable(walker) {
 	let last = null;
 	let next;
@@ -36,6 +61,7 @@ function mergeCollectionRowInteractionProps(rowProps, options) {
 	const baseOnKeyDown = rowProps.onKeyDown;
 	const baseOnPointerDown = rowProps.onPointerDown;
 	const baseOnMouseDown = rowProps.onMouseDown;
+	const baseOnClick = rowProps.onClick;
 	const onKeyDownCapture = (event) => {
 		const row = options.ref();
 		const activeElement = getActiveElement(row?.ownerDocument);
@@ -43,6 +69,11 @@ function mergeCollectionRowInteractionProps(rowProps, options) {
 			baseOnKeyDownCapture?.(event);
 			return;
 		}
+		if (options.onBeforeArrowNavigation?.(event)) return;
+		if (options.layout?.() === "grid" && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
+			baseOnKeyDownCapture?.(event);
+			return;
+		}
 		const direction = options.direction?.() ?? "ltr";
 		const walker = getFocusableTreeWalker(row);
 		walker.currentNode = activeElement;
@@ -74,13 +105,11 @@ function mergeCollectionRowInteractionProps(rowProps, options) {
 				break;
 			}
 			case "ArrowUp":
-			case "ArrowDown":
-				if (!event.altKey) {
-					event.preventDefault();
-					event.stopPropagation();
-					redispatchCollectionArrowKey(row, event);
-				}
-				break;
+			case "ArrowDown": if (!event.altKey) {
+				event.preventDefault();
+				event.stopPropagation();
+				redispatchCollectionArrowKey(row, event);
+			}
 		}
 		if (!event.cancelBubble) baseOnKeyDownCapture?.(event);
 	};
@@ -104,7 +133,7 @@ function mergeCollectionRowInteractionProps(rowProps, options) {
 	const onPointerDown = (event) => {
 		const row = options.ref();
 		const target = getEventTarget(event);
-		if (row && target && target !== row && isTabbable(target)) {
+		if (row && target && target !== row && isNestedFocusableChild(row, target)) {
 			event.stopPropagation();
 			return;
 		}
@@ -113,18 +142,26 @@ function mergeCollectionRowInteractionProps(rowProps, options) {
 	const onMouseDown = (event) => {
 		const row = options.ref();
 		const target = getEventTarget(event);
-		if (row && target && target !== row && isTabbable(target)) {
+		if (row && target && target !== row && isNestedFocusableChild(row, target)) {
 			event.stopPropagation();
 			return;
 		}
 		baseOnMouseDown?.(event);
 	};
+	const onClick = (event) => {
+		const row = options.ref();
+		const target = getEventTarget(event);
+		if (row && target && target !== row && isNestedFocusableChild(row, target)) return;
+		baseOnClick?.(event);
+	};
+	const captureHandler = options.keyboardNavigationBehavior() === "arrow" ? onKeyDownCapture : baseOnKeyDownCapture;
 	return {
 		...rowProps,
-		onKeyDownCapture: options.keyboardNavigationBehavior() === "arrow" ? onKeyDownCapture : baseOnKeyDownCapture,
+		onKeyDownCapture: captureHandler,
 		onKeyDown,
 		onPointerDown,
-		onMouseDown
+		onMouseDown,
+		onClick
 	};
 }
 //#endregion

package/dist/_chunk/createCollectionRowInteraction.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"createCollectionRowInteraction.jsx","names":[],"sources":["../../src/selection/createCollectionRowInteraction.ts"],"sourcesContent":["import type { Accessor, JSX } from \"solid-js\";\nimport {\n  getActiveElement,\n  getEventTarget,\n  getFocusableTreeWalker,\n  getScrollParent,\n  isTabbable,\n  nodeContains,\n} from \"../utils/dom\";\nimport { focusSafely } from \"../utils/focus\";\nimport { scrollIntoViewport } from \"../utils/scrollIntoView\";\n\ntype KeyboardNavigationBehavior = \"arrow\" | \"tab\";\n\ninterface CollectionRowInteractionOptions {\n  ref: Accessor<HTMLElement | null>;\n  keyboardNavigationBehavior: Accessor<KeyboardNavigationBehavior>;\n  direction?: Accessor<\"ltr\" | \"rtl\">;\n}\n\ntype CollectionRowInteractionProps<T extends HTMLElement> = JSX.HTMLAttributes<T> & {\n  onKeyDownCapture?: JSX.EventHandler<T, KeyboardEvent>;\n};\n\nfunction lastFocusable(walker: TreeWalker): HTMLElement | null {\n  let last: Node | null = null;\n  let next: Node | null;\n  while ((next = walker.nextNode())) {\n    last = next;\n  }\n  return last instanceof HTMLElement ? last : null;\n}\n\nfunction scrollFocusedElementIntoView(row: HTMLElement, element: HTMLElement): void {\n  focusSafely(element);\n  scrollIntoViewport(element, { containingElement: getScrollParent(row) });\n}\n\nfunction redispatchCollectionArrowKey(row: HTMLElement, event: KeyboardEvent): void {\n  row.parentElement?.dispatchEvent(\n    new KeyboardEvent(event.type, {\n      altKey: event.altKey,\n      bubbles: true,\n      cancelable: event.cancelable,\n      code: event.code,\n      composed: event.composed,\n      ctrlKey: event.ctrlKey,\n      key: event.key,\n      location: event.location,\n      metaKey: event.metaKey,\n      repeat: event.repeat,\n      shiftKey: event.shiftKey,\n    }),\n  );\n}\n\nfunction shouldIgnoreRowEvent(event: Event, row: HTMLElement): boolean {\n  const target = getEventTarget<Element>(event);\n  const currentTarget = event.currentTarget as Element | null;\n  return (\n    !target || !currentTarget || !nodeContains(currentTarget, target) || !nodeContains(row, target)\n  );\n}\n\nexport function mergeCollectionRowInteractionProps<T extends HTMLElement>(\n  rowProps: CollectionRowInteractionProps<T>,\n  options: CollectionRowInteractionOptions,\n): CollectionRowInteractionProps<T> {\n  const baseOnKeyDownCapture = rowProps.onKeyDownCapture as\n    | ((event: KeyboardEvent) => void)\n    | undefined;\n  const baseOnKeyDown = rowProps.onKeyDown as ((event: KeyboardEvent) => void) | undefined;\n  const baseOnPointerDown = rowProps.onPointerDown as ((event: PointerEvent) => void) | undefined;\n  const baseOnMouseDown = rowProps.onMouseDown as ((event: MouseEvent) => void) | undefined;\n\n  const onKeyDownCapture = (event: KeyboardEvent) => {\n    const row = options.ref();\n    const activeElement = getActiveElement(row?.ownerDocument);\n    if (\n      options.keyboardNavigationBehavior() !== \"arrow\" ||\n      !row ||\n      !activeElement ||\n      shouldIgnoreRowEvent(event, row)\n    ) {\n      baseOnKeyDownCapture?.(event);\n      return;\n    }\n\n    const direction = options.direction?.() ?? \"ltr\";\n    const walker = getFocusableTreeWalker(row);\n    walker.currentNode = activeElement;\n\n    switch (event.key) {\n      case \"ArrowLeft\": {\n        const focusable =\n          direction === \"rtl\"\n            ? (walker.nextNode() as HTMLElement | null)\n            : (walker.previousNode() as HTMLElement | null);\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (focusable) {\n          scrollFocusedElementIntoView(row, focusable);\n        } else if (direction === \"rtl\") {\n          scrollFocusedElementIntoView(row, row);\n        } else {\n          walker.currentNode = row;\n          const lastElement = lastFocusable(walker);\n          if (lastElement) {\n            scrollFocusedElementIntoView(row, lastElement);\n          }\n        }\n        break;\n      }\n      case \"ArrowRight\": {\n        const focusable =\n          direction === \"rtl\"\n            ? (walker.previousNode() as HTMLElement | null)\n            : (walker.nextNode() as HTMLElement | null);\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (focusable) {\n          scrollFocusedElementIntoView(row, focusable);\n        } else if (direction === \"ltr\") {\n          scrollFocusedElementIntoView(row, row);\n        } else {\n          walker.currentNode = row;\n          const lastElement = lastFocusable(walker);\n          if (lastElement) {\n            scrollFocusedElementIntoView(row, lastElement);\n          }\n        }\n        break;\n      }\n      case \"ArrowUp\":\n      case \"ArrowDown\": {\n        if (!event.altKey) {\n          event.preventDefault();\n          event.stopPropagation();\n          redispatchCollectionArrowKey(row, event);\n        }\n        break;\n      }\n    }\n\n    if (!event.cancelBubble) {\n      baseOnKeyDownCapture?.(event);\n    }\n  };\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    const row = options.ref();\n    const target = getEventTarget<Element>(event);\n    const activeElement = getActiveElement(row?.ownerDocument);\n\n    if (row && target && activeElement && !shouldIgnoreRowEvent(event, row)) {\n      if (options.keyboardNavigationBehavior() === \"tab\" && target !== row && event.key !== \"Tab\") {\n        event.stopPropagation();\n        return;\n      }\n\n      if (options.keyboardNavigationBehavior() === \"tab\" && event.key === \"Tab\") {\n        const walker = getFocusableTreeWalker(row, { tabbable: true });\n        walker.currentNode = activeElement;\n        const next = event.shiftKey ? walker.previousNode() : walker.nextNode();\n\n        if (next) {\n          event.stopPropagation();\n        }\n      }\n    }\n\n    if (!event.cancelBubble) {\n      baseOnKeyDown?.(event);\n    }\n  };\n\n  const onPointerDown = (event: PointerEvent) => {\n    const row = options.ref();\n    const target = getEventTarget<Element>(event);\n    if (row && target && target !== row && isTabbable(target)) {\n      event.stopPropagation();\n      return;\n    }\n    baseOnPointerDown?.(event);\n  };\n\n  const onMouseDown = (event: MouseEvent) => {\n    const row = options.ref();\n    const target = getEventTarget<Element>(event);\n    if (row && target && target !== row && isTabbable(target)) {\n      event.stopPropagation();\n      return;\n    }\n    baseOnMouseDown?.(event);\n  };\n\n  return {\n    ...rowProps,\n    onKeyDownCapture:\n      options.keyboardNavigationBehavior() === \"arrow\" ? onKeyDownCapture : baseOnKeyDownCapture,\n    onKeyDown,\n    onPointerDown,\n    onMouseDown,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"createCollectionRowInteraction.jsx","names":[],"sources":["../../src/selection/createCollectionRowInteraction.ts"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/gridlist/useGridListItem.ts\n\nimport type { Accessor } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  getActiveElement,\n  getEventTarget,\n  getFocusableTreeWalker,\n  getScrollParent,\n  isFocusable,\n  nodeContains,\n} from \"../utils/dom\";\nimport { focusSafely } from \"../utils/focus\";\nimport { scrollIntoViewport } from \"../utils/scrollIntoView\";\n\ntype KeyboardNavigationBehavior = \"arrow\" | \"tab\";\n\ninterface CollectionRowInteractionOptions {\n  ref: Accessor<HTMLElement | null>;\n  keyboardNavigationBehavior: Accessor<KeyboardNavigationBehavior>;\n  direction?: Accessor<\"ltr\" | \"rtl\">;\n  /**\n   * `\"grid\"` skips intra-row Left/Right so the collection can move between\n   * columns (S2 CardView `layout=\"grid\"`).\n   */\n  layout?: Accessor<\"stack\" | \"grid\">;\n  /**\n   * Tree expansion/collapse runs in capture before intra-row arrow walking,\n   * matching RAC `handleTreeExpansionKeys`. Return true if the key was handled.\n   */\n  onBeforeArrowNavigation?: (event: KeyboardEvent) => boolean;\n}\n\ntype CollectionRowInteractionProps<T extends HTMLElement> = JSX.HTMLAttributes<T> & {\n  onKeyDownCapture?: JSX.EventHandler<T, KeyboardEvent>;\n};\n\n/**\n * Nested ActionMenu / checkbox widgets in an arrow-nav row are focusable but\n * `tabIndex=-1`, so `isTabbable` misses them. Walk to the nearest focusable\n * ancestor inside the row (the event target is often an SVG inside the trigger).\n */\nfunction isNestedFocusableChild(row: Element, target: Element): boolean {\n  let el: Element | null = target;\n  while (el && el !== row) {\n    if (isFocusable(el)) {\n      return true;\n    }\n    el = el.parentElement;\n  }\n  return false;\n}\n\nfunction lastFocusable(walker: TreeWalker): HTMLElement | null {\n  let last: Node | null = null;\n  let next: Node | null;\n  while ((next = walker.nextNode())) {\n    last = next;\n  }\n  return last instanceof HTMLElement ? last : null;\n}\n\nfunction scrollFocusedElementIntoView(row: HTMLElement, element: HTMLElement): void {\n  focusSafely(element);\n  scrollIntoViewport(element, { containingElement: getScrollParent(row) });\n}\n\nfunction redispatchCollectionArrowKey(row: HTMLElement, event: KeyboardEvent): void {\n  row.parentElement?.dispatchEvent(\n    new KeyboardEvent(event.type, {\n      altKey: event.altKey,\n      bubbles: true,\n      cancelable: event.cancelable,\n      code: event.code,\n      composed: event.composed,\n      ctrlKey: event.ctrlKey,\n      key: event.key,\n      location: event.location,\n      metaKey: event.metaKey,\n      repeat: event.repeat,\n      shiftKey: event.shiftKey,\n    }),\n  );\n}\n\nfunction shouldIgnoreRowEvent(event: Event, row: HTMLElement): boolean {\n  const target = getEventTarget<Element>(event);\n  const currentTarget = event.currentTarget as Element | null;\n  return (\n    !target || !currentTarget || !nodeContains(currentTarget, target) || !nodeContains(row, target)\n  );\n}\n\nexport function mergeCollectionRowInteractionProps<T extends HTMLElement>(\n  rowProps: CollectionRowInteractionProps<T>,\n  options: CollectionRowInteractionOptions,\n): CollectionRowInteractionProps<T> {\n  const baseOnKeyDownCapture = rowProps.onKeyDownCapture as\n    | ((event: KeyboardEvent) => void)\n    | undefined;\n  const baseOnKeyDown = rowProps.onKeyDown as ((event: KeyboardEvent) => void) | undefined;\n  const baseOnPointerDown = rowProps.onPointerDown as ((event: PointerEvent) => void) | undefined;\n  const baseOnMouseDown = rowProps.onMouseDown as ((event: MouseEvent) => void) | undefined;\n  const baseOnClick = rowProps.onClick as ((event: MouseEvent) => void) | undefined;\n\n  const onKeyDownCapture = (event: KeyboardEvent) => {\n    const row = options.ref();\n    const activeElement = getActiveElement(row?.ownerDocument);\n    if (\n      options.keyboardNavigationBehavior() !== \"arrow\" ||\n      !row ||\n      !activeElement ||\n      shouldIgnoreRowEvent(event, row)\n    ) {\n      baseOnKeyDownCapture?.(event);\n      return;\n    }\n\n    if (options.onBeforeArrowNavigation?.(event)) {\n      return;\n    }\n\n    if (\n      options.layout?.() === \"grid\" &&\n      (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\")\n    ) {\n      baseOnKeyDownCapture?.(event);\n      return;\n    }\n\n    const direction = options.direction?.() ?? \"ltr\";\n    const walker = getFocusableTreeWalker(row);\n    walker.currentNode = activeElement;\n\n    switch (event.key) {\n      case \"ArrowLeft\": {\n        const focusable =\n          direction === \"rtl\"\n            ? (walker.nextNode() as HTMLElement | null)\n            : (walker.previousNode() as HTMLElement | null);\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (focusable) {\n          scrollFocusedElementIntoView(row, focusable);\n        } else if (direction === \"rtl\") {\n          scrollFocusedElementIntoView(row, row);\n        } else {\n          walker.currentNode = row;\n          const lastElement = lastFocusable(walker);\n          if (lastElement) {\n            scrollFocusedElementIntoView(row, lastElement);\n          }\n        }\n        break;\n      }\n      case \"ArrowRight\": {\n        const focusable =\n          direction === \"rtl\"\n            ? (walker.previousNode() as HTMLElement | null)\n            : (walker.nextNode() as HTMLElement | null);\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (focusable) {\n          scrollFocusedElementIntoView(row, focusable);\n        } else if (direction === \"ltr\") {\n          scrollFocusedElementIntoView(row, row);\n        } else {\n          walker.currentNode = row;\n          const lastElement = lastFocusable(walker);\n          if (lastElement) {\n            scrollFocusedElementIntoView(row, lastElement);\n          }\n        }\n        break;\n      }\n      case \"ArrowUp\":\n      case \"ArrowDown\": {\n        if (!event.altKey) {\n          event.preventDefault();\n          event.stopPropagation();\n          redispatchCollectionArrowKey(row, event);\n        }\n        break;\n      }\n    }\n\n    if (!event.cancelBubble) {\n      baseOnKeyDownCapture?.(event);\n    }\n  };\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    const row = options.ref();\n    const target = getEventTarget<Element>(event);\n    const activeElement = getActiveElement(row?.ownerDocument);\n\n    if (row && target && activeElement && !shouldIgnoreRowEvent(event, row)) {\n      if (options.keyboardNavigationBehavior() === \"tab\" && target !== row && event.key !== \"Tab\") {\n        event.stopPropagation();\n        return;\n      }\n\n      if (options.keyboardNavigationBehavior() === \"tab\" && event.key === \"Tab\") {\n        const walker = getFocusableTreeWalker(row, { tabbable: true });\n        walker.currentNode = activeElement;\n        const next = event.shiftKey ? walker.previousNode() : walker.nextNode();\n\n        if (next) {\n          event.stopPropagation();\n        }\n      }\n    }\n\n    if (!event.cancelBubble) {\n      baseOnKeyDown?.(event);\n    }\n  };\n\n  const onPointerDown = (event: PointerEvent) => {\n    const row = options.ref();\n    const target = getEventTarget<Element>(event);\n    if (row && target && target !== row && isNestedFocusableChild(row, target)) {\n      event.stopPropagation();\n      return;\n    }\n    baseOnPointerDown?.(event);\n  };\n\n  const onMouseDown = (event: MouseEvent) => {\n    const row = options.ref();\n    const target = getEventTarget<Element>(event);\n    if (row && target && target !== row && isNestedFocusableChild(row, target)) {\n      event.stopPropagation();\n      return;\n    }\n    baseOnMouseDown?.(event);\n  };\n\n  const onClick = (event: MouseEvent) => {\n    const row = options.ref();\n    const target = getEventTarget<Element>(event);\n    if (row && target && target !== row && isNestedFocusableChild(row, target)) {\n      return;\n    }\n    baseOnClick?.(event);\n  };\n\n  const captureHandler =\n    options.keyboardNavigationBehavior() === \"arrow\" ? onKeyDownCapture : baseOnKeyDownCapture;\n\n  return {\n    ...rowProps,\n    // Solid 2 has no capture JSX. The live binding is `bindCapture` in\n    // createGridListItem / createTreeItem. Keep the RAC name so unit tests\n    // can still invoke the handler off rowProps.\n    onKeyDownCapture: captureHandler,\n    onKeyDown,\n    onPointerDown,\n    onMouseDown,\n    onClick,\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/createField.js

@@ -1,6 +1,18 @@
-import { i as mergeProps } from "./env.js";
+/*
+* Copyright 2021 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/label/useField.ts
+import { t as mergeProps } from "./mergeProps.js";
 import { t as access } from "./reactivity.js";
-import { createId } from "../ssr/index.js";
+import { createSlotId } from "../ssr/index.js";
 import { t as createLabel } from "./createLabel.js";
 //#region src/label/createField.ts
 /**
@@ -12,40 +24,38 @@ import { t as createLabel } from "./createLabel.js";
 */
 function createField(props) {
 	const getProps = () => access(props);
-	const { labelProps, fieldProps: baseLabelFieldProps } = createLabel(props);
-	const descriptionId = createId();
-	const errorMessageId = createId();
-	const getDescriptionProps = () => {
-		const { description, errorMessage, isInvalid } = getProps();
-		if (!description && !errorMessage && !isInvalid) return {};
-		return { id: descriptionId };
-	};
-	const getErrorMessageProps = () => {
-		const { errorMessage, isInvalid } = getProps();
-		if (!errorMessage && !isInvalid) return {};
-		return { id: errorMessageId };
-	};
+	const labelAria = createLabel(props);
+	const descriptionId = createSlotId([
+		() => Boolean(getProps().description),
+		() => Boolean(getProps().errorMessage),
+		() => getProps().isInvalid,
+		() => getProps().validationState
+	]);
+	const errorMessageId = createSlotId([
+		() => Boolean(getProps().description),
+		() => Boolean(getProps().errorMessage),
+		() => getProps().isInvalid,
+		() => getProps().validationState
+	]);
 	const getFieldProps = () => {
-		const { description, errorMessage, isInvalid } = getProps();
-		const describedByIds = [];
-		if (description) describedByIds.push(descriptionId);
-		if (isInvalid && errorMessage) describedByIds.push(errorMessageId);
-		const existingDescribedBy = getProps()["aria-describedby"];
-		if (existingDescribedBy) describedByIds.push(existingDescribedBy);
-		return mergeProps(baseLabelFieldProps, { "aria-describedby": describedByIds.length > 0 ? describedByIds.join(" ") : void 0 });
+		return mergeProps(labelAria.fieldProps, { "aria-describedby": [
+			descriptionId(),
+			errorMessageId(),
+			getProps()["aria-describedby"]
+		].filter(Boolean).join(" ") || void 0 });
 	};
 	return {
 		get labelProps() {
-			return labelProps;
+			return labelAria.labelProps;
 		},
 		get fieldProps() {
 			return getFieldProps();
 		},
 		get descriptionProps() {
-			return getDescriptionProps();
+			return { id: descriptionId() };
 		},
 		get errorMessageProps() {
-			return getErrorMessageProps();
+			return { id: errorMessageId() };
 		}
 	};
 }

package/dist/_chunk/createField.js.map

@@ -1 +1 @@
-{"version":3,"file":"createField.js","names":[],"sources":["../../src/label/createField.ts"],"sourcesContent":["/**\n * Field hook for Solidaria\n *\n * Provides the accessibility implementation for input fields.\n * Fields accept user input, gain context from their label, and may display\n * a description or error message.\n *\n * This is a 1:1 port of @react-aria/label's useField hook.\n */\n\nimport { JSX } from \"solid-js\";\nimport { createId } from \"../ssr\";\nimport {\n  createLabel,\n  type LabelAriaProps,\n  type LabelAria,\n  type AriaLabelingProps,\n  type DOMProps,\n} from \"./createLabel\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\n\nexport interface HelpTextProps {\n  /** A description for the field. Provides a hint such as specific requirements for what to choose. */\n  description?: JSX.Element;\n  /** An error message for the field. */\n  errorMessage?: JSX.Element | ((validation: ValidationResult) => JSX.Element);\n}\n\nexport interface ValidationResult {\n  /** Whether the input value is invalid. */\n  isInvalid: boolean;\n  /** The current error messages for the input if it is invalid, otherwise an empty array. */\n  validationErrors: string[];\n  /** The native validity state for the input. */\n  validationDetails: ValidityState;\n}\n\nexport interface Validation<T> {\n  /** Whether the input value is invalid. */\n  isInvalid?: boolean;\n  /** Whether the input is required before form submission. */\n  isRequired?: boolean;\n  /** A function that returns an error message if a given value is invalid. */\n  validate?: (value: T) => string | string[] | true | null | undefined;\n}\n\nexport interface AriaFieldProps\n  extends LabelAriaProps, HelpTextProps, Omit<Validation<any>, \"isRequired\"> {}\n\nexport interface FieldAria extends LabelAria {\n  /** Props for the description element, if any. */\n  descriptionProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the error message element, if any. */\n  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides the accessibility implementation for input fields.\n * Fields accept user input, gain context from their label, and may display\n * a description or error message.\n *\n * @param props - Props for the Field.\n */\nexport function createField(props: MaybeAccessor<AriaFieldProps>): FieldAria {\n  const getProps = () => access(props);\n\n  const { labelProps, fieldProps: baseLabelFieldProps } = createLabel(props);\n\n  // Generate IDs for description and error message\n  const descriptionId = createId();\n  const errorMessageId = createId();\n\n  const getDescriptionProps = (): FieldAria[\"descriptionProps\"] => {\n    const { description, errorMessage, isInvalid } = getProps();\n\n    // Only include ID if description exists or there's an error message that might be shown\n    if (!description && !errorMessage && !isInvalid) {\n      return {};\n    }\n\n    return {\n      id: descriptionId,\n    };\n  };\n\n  const getErrorMessageProps = (): FieldAria[\"errorMessageProps\"] => {\n    const { errorMessage, isInvalid } = getProps();\n\n    // Only include ID if there's an error message and the field is invalid\n    if (!errorMessage && !isInvalid) {\n      return {};\n    }\n\n    return {\n      id: errorMessageId,\n    };\n  };\n\n  const getFieldProps = (): AriaLabelingProps & DOMProps => {\n    const { description, errorMessage, isInvalid } = getProps();\n\n    const describedByIds: string[] = [];\n\n    // Add description ID if description exists\n    if (description) {\n      describedByIds.push(descriptionId);\n    }\n\n    // Add error message ID if field is invalid and error message exists\n    // Use aria-describedby for error message because aria-errormessage is unsupported\n    // using VoiceOver or NVDA. See https://github.com/adobe/react-spectrum/issues/1346#issuecomment-740136268\n    if (isInvalid && errorMessage) {\n      describedByIds.push(errorMessageId);\n    }\n\n    // Add any existing aria-describedby from props\n    const existingDescribedBy = getProps()[\"aria-describedby\"];\n    if (existingDescribedBy) {\n      describedByIds.push(existingDescribedBy);\n    }\n\n    const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(\" \") : undefined;\n\n    return mergeProps(baseLabelFieldProps, {\n      \"aria-describedby\": ariaDescribedBy,\n    }) as AriaLabelingProps & DOMProps;\n  };\n\n  return {\n    get labelProps() {\n      return labelProps;\n    },\n    get fieldProps() {\n      return getFieldProps();\n    },\n    get descriptionProps() {\n      return getDescriptionProps();\n    },\n    get errorMessageProps() {\n      return getErrorMessageProps();\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;AAgEA,SAAgB,YAAY,OAAiD;CAC3E,MAAM,iBAAiB,OAAO,KAAK;CAEnC,MAAM,EAAE,YAAY,YAAY,wBAAwB,YAAY,KAAK;CAGzE,MAAM,gBAAgB,SAAS;CAC/B,MAAM,iBAAiB,SAAS;CAEhC,MAAM,4BAA2D;EAC/D,MAAM,EAAE,aAAa,cAAc,cAAc,SAAS;EAG1D,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,WACpC,OAAO,CAAC;EAGV,OAAO,EACL,IAAI,cACN;CACF;CAEA,MAAM,6BAA6D;EACjE,MAAM,EAAE,cAAc,cAAc,SAAS;EAG7C,IAAI,CAAC,gBAAgB,CAAC,WACpB,OAAO,CAAC;EAGV,OAAO,EACL,IAAI,eACN;CACF;CAEA,MAAM,sBAAoD;EACxD,MAAM,EAAE,aAAa,cAAc,cAAc,SAAS;EAE1D,MAAM,iBAA2B,CAAC;EAGlC,IAAI,aACF,eAAe,KAAK,aAAa;EAMnC,IAAI,aAAa,cACf,eAAe,KAAK,cAAc;EAIpC,MAAM,sBAAsB,SAAS,CAAC,CAAC;EACvC,IAAI,qBACF,eAAe,KAAK,mBAAmB;EAKzC,OAAO,WAAW,qBAAqB,EACrC,oBAHsB,eAAe,SAAS,IAAI,eAAe,KAAK,GAAG,IAAI,KAAA,EAI/E,CAAC;CACH;CAEA,OAAO;EACL,IAAI,aAAa;GACf,OAAO;EACT;EACA,IAAI,aAAa;GACf,OAAO,cAAc;EACvB;EACA,IAAI,mBAAmB;GACrB,OAAO,oBAAoB;EAC7B;EACA,IAAI,oBAAoB;GACtB,OAAO,qBAAqB;EAC9B;CACF;AACF"}
+{"version":3,"file":"createField.js","names":[],"sources":["../../src/label/createField.ts"],"sourcesContent":["/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/label/useField.ts\n\n/**\n * Field hook for Solidaria\n *\n * Provides the accessibility implementation for input fields.\n * Fields accept user input, gain context from their label, and may display\n * a description or error message.\n *\n * This is a 1:1 port of @react-aria/label's useField hook.\n */\n\nimport type { JSX } from \"@solidjs/web\";\nimport { createSlotId } from \"../ssr\";\nimport {\n  createLabel,\n  type LabelAriaProps,\n  type LabelAria,\n  type AriaLabelingProps,\n  type DOMProps,\n} from \"./createLabel\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\n\nexport interface HelpTextProps {\n  /** A description for the field. Provides a hint such as specific requirements for what to choose. */\n  description?: JSX.Element;\n  /** An error message for the field. */\n  errorMessage?: JSX.Element | ((validation: ValidationResult) => JSX.Element);\n}\n\nexport interface ValidationResult {\n  /** Whether the input value is invalid. */\n  isInvalid: boolean;\n  /** The current error messages for the input if it is invalid, otherwise an empty array. */\n  validationErrors: string[];\n  /** The native validity state for the input. */\n  validationDetails: ValidityState;\n}\n\nexport interface Validation<T> {\n  /** Whether the input value is invalid. */\n  isInvalid?: boolean;\n  /** Whether the input is required before form submission. */\n  isRequired?: boolean;\n  /** A function that returns an error message if a given value is invalid. */\n  validate?: (value: T) => string | string[] | true | null | undefined;\n}\n\nexport interface AriaFieldProps\n  extends LabelAriaProps, HelpTextProps, Omit<Validation<any>, \"isRequired\"> {\n  /**\n   * Legacy validation state. Kept as a `createSlotId` dependency so a\n   * description/error slot is re-probed when this flips, matching RAC\n   * `useField` (`useField.ts:38-48`).\n   */\n  validationState?: \"valid\" | \"invalid\";\n}\n\nexport interface FieldAria extends LabelAria {\n  /** Props for the description element, if any. */\n  descriptionProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the error message element, if any. */\n  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides the accessibility implementation for input fields.\n * Fields accept user input, gain context from their label, and may display\n * a description or error message.\n *\n * @param props - Props for the Field.\n */\nexport function createField(props: MaybeAccessor<AriaFieldProps>): FieldAria {\n  const getProps = () => access(props);\n\n  // Keep the label hook intact. Its `fieldProps`/`labelProps` are getters;\n  // destructuring them would freeze the first labelledby snapshot.\n  const labelAria = createLabel(props);\n\n  // RAC `useField.ts:38-48`: `useSlotId` so the id exists only when an element\n  // with that id is in the DOM. Deps re-probe when help-text / invalid state\n  // changes (the slot may mount or unmount).\n  const descriptionId = createSlotId([\n    () => Boolean(getProps().description),\n    () => Boolean(getProps().errorMessage),\n    () => getProps().isInvalid,\n    () => getProps().validationState,\n  ]);\n  const errorMessageId = createSlotId([\n    () => Boolean(getProps().description),\n    () => Boolean(getProps().errorMessage),\n    () => getProps().isInvalid,\n    () => getProps().validationState,\n  ]);\n\n  const getFieldProps = (): AriaLabelingProps & DOMProps => {\n    // RAC `useField.ts:51-60`: description id, then error id, then the user\n    // `aria-describedby`. `createSlotId` yields `undefined` when the slot is\n    // not rendered, so dangling references never land on the field.\n    return mergeProps(labelAria.fieldProps, {\n      \"aria-describedby\":\n        [descriptionId(), errorMessageId(), getProps()[\"aria-describedby\"]]\n          .filter(Boolean)\n          .join(\" \") || undefined,\n    }) as AriaLabelingProps & DOMProps;\n  };\n\n  return {\n    get labelProps() {\n      return labelAria.labelProps;\n    },\n    get fieldProps() {\n      return getFieldProps();\n    },\n    get descriptionProps() {\n      return {\n        id: descriptionId(),\n      };\n    },\n    get errorMessageProps() {\n      return {\n        id: errorMessageId(),\n      };\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqFA,SAAgB,YAAY,OAAiD;CAC3E,MAAM,iBAAiB,OAAO,KAAK;CAInC,MAAM,YAAY,YAAY,KAAK;CAKnC,MAAM,gBAAgB,aAAa;QAC3B,QAAQ,SAAS,CAAC,CAAC,WAAW;QAC9B,QAAQ,SAAS,CAAC,CAAC,YAAY;QAC/B,SAAS,CAAC,CAAC;QACX,SAAS,CAAC,CAAC;CACnB,CAAC;CACD,MAAM,iBAAiB,aAAa;QAC5B,QAAQ,SAAS,CAAC,CAAC,WAAW;QAC9B,QAAQ,SAAS,CAAC,CAAC,YAAY;QAC/B,SAAS,CAAC,CAAC;QACX,SAAS,CAAC,CAAC;CACnB,CAAC;CAED,MAAM,sBAAoD;EAIxD,OAAO,WAAW,UAAU,YAAY,EACtC,oBACE;GAAC,cAAc;GAAG,eAAe;GAAG,SAAS,CAAC,CAAC;EAAmB,CAAC,CAChE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KAAK,KAAA,EACpB,CAAC;CACH;CAEA,OAAO;EACL,IAAI,aAAa;GACf,OAAO,UAAU;EACnB;EACA,IAAI,aAAa;GACf,OAAO,cAAc;EACvB;EACA,IAAI,mBAAmB;GACrB,OAAO,EACL,IAAI,cAAc,EACpB;EACF;EACA,IAAI,oBAAoB;GACtB,OAAO,EACL,IAAI,eAAe,EACrB;EACF;CACF;AACF"}

package/dist/_chunk/createField.jsx

@@ -1,6 +1,18 @@
-import { i as mergeProps } from "./env.jsx";
+/*
+* Copyright 2021 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/label/useField.ts
+import { t as mergeProps } from "./mergeProps.jsx";
 import { t as access } from "./reactivity.jsx";
-import { createId } from "../ssr/index.jsx";
+import { createSlotId } from "../ssr/index.jsx";
 import { t as createLabel } from "./createLabel.jsx";
 //#region src/label/createField.ts
 /**
@@ -12,40 +24,38 @@ import { t as createLabel } from "./createLabel.jsx";
 */
 function createField(props) {
 	const getProps = () => access(props);
-	const { labelProps, fieldProps: baseLabelFieldProps } = createLabel(props);
-	const descriptionId = createId();
-	const errorMessageId = createId();
-	const getDescriptionProps = () => {
-		const { description, errorMessage, isInvalid } = getProps();
-		if (!description && !errorMessage && !isInvalid) return {};
-		return { id: descriptionId };
-	};
-	const getErrorMessageProps = () => {
-		const { errorMessage, isInvalid } = getProps();
-		if (!errorMessage && !isInvalid) return {};
-		return { id: errorMessageId };
-	};
+	const labelAria = createLabel(props);
+	const descriptionId = createSlotId([
+		() => Boolean(getProps().description),
+		() => Boolean(getProps().errorMessage),
+		() => getProps().isInvalid,
+		() => getProps().validationState
+	]);
+	const errorMessageId = createSlotId([
+		() => Boolean(getProps().description),
+		() => Boolean(getProps().errorMessage),
+		() => getProps().isInvalid,
+		() => getProps().validationState
+	]);
 	const getFieldProps = () => {
-		const { description, errorMessage, isInvalid } = getProps();
-		const describedByIds = [];
-		if (description) describedByIds.push(descriptionId);
-		if (isInvalid && errorMessage) describedByIds.push(errorMessageId);
-		const existingDescribedBy = getProps()["aria-describedby"];
-		if (existingDescribedBy) describedByIds.push(existingDescribedBy);
-		return mergeProps(baseLabelFieldProps, { "aria-describedby": describedByIds.length > 0 ? describedByIds.join(" ") : void 0 });
+		return mergeProps(labelAria.fieldProps, { "aria-describedby": [
+			descriptionId(),
+			errorMessageId(),
+			getProps()["aria-describedby"]
+		].filter(Boolean).join(" ") || void 0 });
 	};
 	return {
 		get labelProps() {
-			return labelProps;
+			return labelAria.labelProps;
 		},
 		get fieldProps() {
 			return getFieldProps();
 		},
 		get descriptionProps() {
-			return getDescriptionProps();
+			return { id: descriptionId() };
 		},
 		get errorMessageProps() {
-			return getErrorMessageProps();
+			return { id: errorMessageId() };
 		}
 	};
 }

package/dist/_chunk/createField.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"createField.jsx","names":[],"sources":["../../src/label/createField.ts"],"sourcesContent":["/**\n * Field hook for Solidaria\n *\n * Provides the accessibility implementation for input fields.\n * Fields accept user input, gain context from their label, and may display\n * a description or error message.\n *\n * This is a 1:1 port of @react-aria/label's useField hook.\n */\n\nimport { JSX } from \"solid-js\";\nimport { createId } from \"../ssr\";\nimport {\n  createLabel,\n  type LabelAriaProps,\n  type LabelAria,\n  type AriaLabelingProps,\n  type DOMProps,\n} from \"./createLabel\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\n\nexport interface HelpTextProps {\n  /** A description for the field. Provides a hint such as specific requirements for what to choose. */\n  description?: JSX.Element;\n  /** An error message for the field. */\n  errorMessage?: JSX.Element | ((validation: ValidationResult) => JSX.Element);\n}\n\nexport interface ValidationResult {\n  /** Whether the input value is invalid. */\n  isInvalid: boolean;\n  /** The current error messages for the input if it is invalid, otherwise an empty array. */\n  validationErrors: string[];\n  /** The native validity state for the input. */\n  validationDetails: ValidityState;\n}\n\nexport interface Validation<T> {\n  /** Whether the input value is invalid. */\n  isInvalid?: boolean;\n  /** Whether the input is required before form submission. */\n  isRequired?: boolean;\n  /** A function that returns an error message if a given value is invalid. */\n  validate?: (value: T) => string | string[] | true | null | undefined;\n}\n\nexport interface AriaFieldProps\n  extends LabelAriaProps, HelpTextProps, Omit<Validation<any>, \"isRequired\"> {}\n\nexport interface FieldAria extends LabelAria {\n  /** Props for the description element, if any. */\n  descriptionProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the error message element, if any. */\n  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides the accessibility implementation for input fields.\n * Fields accept user input, gain context from their label, and may display\n * a description or error message.\n *\n * @param props - Props for the Field.\n */\nexport function createField(props: MaybeAccessor<AriaFieldProps>): FieldAria {\n  const getProps = () => access(props);\n\n  const { labelProps, fieldProps: baseLabelFieldProps } = createLabel(props);\n\n  // Generate IDs for description and error message\n  const descriptionId = createId();\n  const errorMessageId = createId();\n\n  const getDescriptionProps = (): FieldAria[\"descriptionProps\"] => {\n    const { description, errorMessage, isInvalid } = getProps();\n\n    // Only include ID if description exists or there's an error message that might be shown\n    if (!description && !errorMessage && !isInvalid) {\n      return {};\n    }\n\n    return {\n      id: descriptionId,\n    };\n  };\n\n  const getErrorMessageProps = (): FieldAria[\"errorMessageProps\"] => {\n    const { errorMessage, isInvalid } = getProps();\n\n    // Only include ID if there's an error message and the field is invalid\n    if (!errorMessage && !isInvalid) {\n      return {};\n    }\n\n    return {\n      id: errorMessageId,\n    };\n  };\n\n  const getFieldProps = (): AriaLabelingProps & DOMProps => {\n    const { description, errorMessage, isInvalid } = getProps();\n\n    const describedByIds: string[] = [];\n\n    // Add description ID if description exists\n    if (description) {\n      describedByIds.push(descriptionId);\n    }\n\n    // Add error message ID if field is invalid and error message exists\n    // Use aria-describedby for error message because aria-errormessage is unsupported\n    // using VoiceOver or NVDA. See https://github.com/adobe/react-spectrum/issues/1346#issuecomment-740136268\n    if (isInvalid && errorMessage) {\n      describedByIds.push(errorMessageId);\n    }\n\n    // Add any existing aria-describedby from props\n    const existingDescribedBy = getProps()[\"aria-describedby\"];\n    if (existingDescribedBy) {\n      describedByIds.push(existingDescribedBy);\n    }\n\n    const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(\" \") : undefined;\n\n    return mergeProps(baseLabelFieldProps, {\n      \"aria-describedby\": ariaDescribedBy,\n    }) as AriaLabelingProps & DOMProps;\n  };\n\n  return {\n    get labelProps() {\n      return labelProps;\n    },\n    get fieldProps() {\n      return getFieldProps();\n    },\n    get descriptionProps() {\n      return getDescriptionProps();\n    },\n    get errorMessageProps() {\n      return getErrorMessageProps();\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;AAgEA,SAAgB,YAAY,OAAiD;CAC3E,MAAM,iBAAiB,OAAO,KAAK;CAEnC,MAAM,EAAE,YAAY,YAAY,wBAAwB,YAAY,KAAK;CAGzE,MAAM,gBAAgB,SAAS;CAC/B,MAAM,iBAAiB,SAAS;CAEhC,MAAM,4BAA2D;EAC/D,MAAM,EAAE,aAAa,cAAc,cAAc,SAAS;EAG1D,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,WACpC,OAAO,CAAC;EAGV,OAAO,EACL,IAAI,cACN;CACF;CAEA,MAAM,6BAA6D;EACjE,MAAM,EAAE,cAAc,cAAc,SAAS;EAG7C,IAAI,CAAC,gBAAgB,CAAC,WACpB,OAAO,CAAC;EAGV,OAAO,EACL,IAAI,eACN;CACF;CAEA,MAAM,sBAAoD;EACxD,MAAM,EAAE,aAAa,cAAc,cAAc,SAAS;EAE1D,MAAM,iBAA2B,CAAC;EAGlC,IAAI,aACF,eAAe,KAAK,aAAa;EAMnC,IAAI,aAAa,cACf,eAAe,KAAK,cAAc;EAIpC,MAAM,sBAAsB,SAAS,CAAC,CAAC;EACvC,IAAI,qBACF,eAAe,KAAK,mBAAmB;EAKzC,OAAO,WAAW,qBAAqB,EACrC,oBAHsB,eAAe,SAAS,IAAI,eAAe,KAAK,GAAG,IAAI,KAAA,EAI/E,CAAC;CACH;CAEA,OAAO;EACL,IAAI,aAAa;GACf,OAAO;EACT;EACA,IAAI,aAAa;GACf,OAAO,cAAc;EACvB;EACA,IAAI,mBAAmB;GACrB,OAAO,oBAAoB;EAC7B;EACA,IAAI,oBAAoB;GACtB,OAAO,qBAAqB;EAC9B;CACF;AACF"}
+{"version":3,"file":"createField.jsx","names":[],"sources":["../../src/label/createField.ts"],"sourcesContent":["/*\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/label/useField.ts\n\n/**\n * Field hook for Solidaria\n *\n * Provides the accessibility implementation for input fields.\n * Fields accept user input, gain context from their label, and may display\n * a description or error message.\n *\n * This is a 1:1 port of @react-aria/label's useField hook.\n */\n\nimport type { JSX } from \"@solidjs/web\";\nimport { createSlotId } from \"../ssr\";\nimport {\n  createLabel,\n  type LabelAriaProps,\n  type LabelAria,\n  type AriaLabelingProps,\n  type DOMProps,\n} from \"./createLabel\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\n\nexport interface HelpTextProps {\n  /** A description for the field. Provides a hint such as specific requirements for what to choose. */\n  description?: JSX.Element;\n  /** An error message for the field. */\n  errorMessage?: JSX.Element | ((validation: ValidationResult) => JSX.Element);\n}\n\nexport interface ValidationResult {\n  /** Whether the input value is invalid. */\n  isInvalid: boolean;\n  /** The current error messages for the input if it is invalid, otherwise an empty array. */\n  validationErrors: string[];\n  /** The native validity state for the input. */\n  validationDetails: ValidityState;\n}\n\nexport interface Validation<T> {\n  /** Whether the input value is invalid. */\n  isInvalid?: boolean;\n  /** Whether the input is required before form submission. */\n  isRequired?: boolean;\n  /** A function that returns an error message if a given value is invalid. */\n  validate?: (value: T) => string | string[] | true | null | undefined;\n}\n\nexport interface AriaFieldProps\n  extends LabelAriaProps, HelpTextProps, Omit<Validation<any>, \"isRequired\"> {\n  /**\n   * Legacy validation state. Kept as a `createSlotId` dependency so a\n   * description/error slot is re-probed when this flips, matching RAC\n   * `useField` (`useField.ts:38-48`).\n   */\n  validationState?: \"valid\" | \"invalid\";\n}\n\nexport interface FieldAria extends LabelAria {\n  /** Props for the description element, if any. */\n  descriptionProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the error message element, if any. */\n  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides the accessibility implementation for input fields.\n * Fields accept user input, gain context from their label, and may display\n * a description or error message.\n *\n * @param props - Props for the Field.\n */\nexport function createField(props: MaybeAccessor<AriaFieldProps>): FieldAria {\n  const getProps = () => access(props);\n\n  // Keep the label hook intact. Its `fieldProps`/`labelProps` are getters;\n  // destructuring them would freeze the first labelledby snapshot.\n  const labelAria = createLabel(props);\n\n  // RAC `useField.ts:38-48`: `useSlotId` so the id exists only when an element\n  // with that id is in the DOM. Deps re-probe when help-text / invalid state\n  // changes (the slot may mount or unmount).\n  const descriptionId = createSlotId([\n    () => Boolean(getProps().description),\n    () => Boolean(getProps().errorMessage),\n    () => getProps().isInvalid,\n    () => getProps().validationState,\n  ]);\n  const errorMessageId = createSlotId([\n    () => Boolean(getProps().description),\n    () => Boolean(getProps().errorMessage),\n    () => getProps().isInvalid,\n    () => getProps().validationState,\n  ]);\n\n  const getFieldProps = (): AriaLabelingProps & DOMProps => {\n    // RAC `useField.ts:51-60`: description id, then error id, then the user\n    // `aria-describedby`. `createSlotId` yields `undefined` when the slot is\n    // not rendered, so dangling references never land on the field.\n    return mergeProps(labelAria.fieldProps, {\n      \"aria-describedby\":\n        [descriptionId(), errorMessageId(), getProps()[\"aria-describedby\"]]\n          .filter(Boolean)\n          .join(\" \") || undefined,\n    }) as AriaLabelingProps & DOMProps;\n  };\n\n  return {\n    get labelProps() {\n      return labelAria.labelProps;\n    },\n    get fieldProps() {\n      return getFieldProps();\n    },\n    get descriptionProps() {\n      return {\n        id: descriptionId(),\n      };\n    },\n    get errorMessageProps() {\n      return {\n        id: errorMessageId(),\n      };\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqFA,SAAgB,YAAY,OAAiD;CAC3E,MAAM,iBAAiB,OAAO,KAAK;CAInC,MAAM,YAAY,YAAY,KAAK;CAKnC,MAAM,gBAAgB,aAAa;QAC3B,QAAQ,SAAS,CAAC,CAAC,WAAW;QAC9B,QAAQ,SAAS,CAAC,CAAC,YAAY;QAC/B,SAAS,CAAC,CAAC;QACX,SAAS,CAAC,CAAC;CACnB,CAAC;CACD,MAAM,iBAAiB,aAAa;QAC5B,QAAQ,SAAS,CAAC,CAAC,WAAW;QAC9B,QAAQ,SAAS,CAAC,CAAC,YAAY;QAC/B,SAAS,CAAC,CAAC;QACX,SAAS,CAAC,CAAC;CACnB,CAAC;CAED,MAAM,sBAAoD;EAIxD,OAAO,WAAW,UAAU,YAAY,EACtC,oBACE;GAAC,cAAc;GAAG,eAAe;GAAG,SAAS,CAAC,CAAC;EAAmB,CAAC,CAChE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KAAK,KAAA,EACpB,CAAC;CACH;CAEA,OAAO;EACL,IAAI,aAAa;GACf,OAAO,UAAU;EACnB;EACA,IAAI,aAAa;GACf,OAAO,cAAc;EACvB;EACA,IAAI,mBAAmB;GACrB,OAAO,EACL,IAAI,cAAc,EACpB;EACF;EACA,IAAI,oBAAoB;GACtB,OAAO,EACL,IAAI,eAAe,EACrB;EACF;CACF;AACF"}