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

package/dist/_chunk/createToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"createToggle.js","names":["mergeProps"],"sources":["../../src/toggle/createToggle.ts"],"sourcesContent":["/**\n * Toggle hook for Solidaria\n *\n * Handles interactions for toggle elements, e.g. Checkboxes and Switches.\n *\n * This is a 1:1 port of @react-aria/toggle's useToggle hook.\n */\n\nimport { JSX, Accessor, createEffect } from \"solid-js\";\nimport { createPress } from \"../interactions/createPress\";\nimport { createFocusable } from \"../interactions/createFocusable\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { filterDOMProps } from \"../utils/filterDOMProps\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\nimport { isDevEnv } from \"../utils/env\";\nimport { createSlotId } from \"../ssr\";\nimport { type ToggleState } from \"@proyecto-viviana/solid-stately\";\nimport { type PressEvent } from \"../interactions/PressEvent\";\n\nexport interface AriaToggleProps {\n  /** Whether the element should be selected (controlled). */\n  isSelected?: boolean;\n  /** Whether the element should be selected by default (uncontrolled). */\n  defaultSelected?: boolean;\n  /** Handler that is called when the element's selection state changes. */\n  onChange?: (isSelected: boolean) => void;\n  /** The value of the input element, used when submitting an HTML form. */\n  value?: string;\n  /** The name of the input element, used when submitting an HTML form. */\n  name?: string;\n  /** The form to associate the input with. */\n  form?: string;\n  /** Whether the element is disabled. */\n  isDisabled?: boolean;\n  /** Whether the element is read only. */\n  isReadOnly?: boolean;\n  /** Whether the element is required. */\n  isRequired?: boolean;\n  /** Whether the element is invalid. */\n  isInvalid?: boolean;\n  /** The element's children. */\n  children?: JSX.Element;\n  /** Defines a string value that labels the current element. */\n  \"aria-label\"?: string;\n  /** Identifies the element (or elements) that labels the current element. */\n  \"aria-labelledby\"?: string;\n  /** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string;\n  /** Identifies the element (or elements) that provide an error message for the object. */\n  \"aria-errormessage\"?: string;\n  /** Identifies the element (or elements) whose contents or presence are controlled by the current element. */\n  \"aria-controls\"?: string;\n  /** The element's unique identifier. */\n  id?: string;\n  /** Handler that is called when the press is released over the target. */\n  onPress?: (e: PressEvent) => void;\n  /** Handler that is called when a press interaction starts. */\n  onPressStart?: (e: PressEvent) => void;\n  /** Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. */\n  onPressEnd?: (e: PressEvent) => void;\n  /** Handler that is called when the press state changes. */\n  onPressChange?: (isPressed: boolean) => void;\n  /** Handler that is called when a press is released over the target, regardless of whether it started on the target or not. */\n  onPressUp?: (e: PressEvent) => void;\n  /** Handler that is called when the element is clicked. */\n  onClick?: (e: MouseEvent) => void;\n  /** Handler that is called when the element receives focus. */\n  onFocus?: (e: FocusEvent) => void;\n  /** Handler that is called when the element loses focus. */\n  onBlur?: (e: FocusEvent) => void;\n  /** Handler that is called when the element's focus status changes. */\n  onFocusChange?: (isFocused: boolean) => void;\n  /** Handler that is called when a key is pressed. */\n  onKeyDown?: (e: KeyboardEvent) => void;\n  /** Handler that is called when a key is released. */\n  onKeyUp?: (e: KeyboardEvent) => void;\n  /** Whether to exclude the element from the tab order. */\n  excludeFromTabOrder?: boolean;\n  /** Whether to autofocus the element. */\n  autoFocus?: boolean;\n}\n\nexport interface ToggleAria {\n  /** Props to be spread on the label element. */\n  labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;\n  /** Props to be spread on the input element. */\n  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;\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  /** Whether the toggle is selected. */\n  isSelected: Accessor<boolean>;\n  /** Whether the toggle is in a pressed state. */\n  isPressed: Accessor<boolean>;\n  /** Whether the toggle is disabled. */\n  isDisabled: boolean;\n  /** Whether the toggle is read only. */\n  isReadOnly: boolean;\n  /** Whether the toggle is invalid. */\n  isInvalid: boolean;\n}\n\n/**\n * Handles interactions for toggle elements, e.g. Checkboxes and Switches.\n */\nexport function createToggle(\n  props: MaybeAccessor<AriaToggleProps>,\n  state: ToggleState,\n  ref: () => HTMLInputElement | null,\n): ToggleAria {\n  const getProps = () => access(props);\n\n  const isDisabled = () => getProps().isDisabled ?? false;\n  const isReadOnly = () => getProps().isReadOnly ?? false;\n  const isInvalid = () => {\n    return getProps().isInvalid ?? false;\n  };\n\n  // Handle press state for keyboard interactions and cases where labelProps is not used.\n  const { pressProps, isPressed } = createPress({\n    get onPressStart() {\n      return getProps().onPressStart;\n    },\n    get onPressEnd() {\n      return getProps().onPressEnd;\n    },\n    get onPressChange() {\n      return getProps().onPressChange;\n    },\n    get onPress() {\n      return getProps().onPress;\n    },\n    get onPressUp() {\n      return getProps().onPressUp;\n    },\n    get onClick() {\n      return getProps().onClick;\n    },\n    get isDisabled() {\n      return isDisabled();\n    },\n  });\n\n  // Handle press state on the label.\n  const { pressProps: labelPressProps, isPressed: isLabelPressed } = createPress({\n    get onPressStart() {\n      return getProps().onPressStart;\n    },\n    get onPressEnd() {\n      return getProps().onPressEnd;\n    },\n    get onPressChange() {\n      return getProps().onPressChange;\n    },\n    get onPressUp() {\n      return getProps().onPressUp;\n    },\n    get onClick() {\n      return getProps().onClick;\n    },\n    onPress(e: PressEvent) {\n      getProps().onPress?.(e);\n      state.toggle();\n      ref()?.focus();\n    },\n    get isDisabled() {\n      return isDisabled() || isReadOnly();\n    },\n  });\n\n  // Handle focusable - extract the relevant props for createFocusable\n  const { focusableProps } = createFocusable(\n    {\n      get isDisabled() {\n        return isDisabled();\n      },\n      get autoFocus() {\n        return getProps().autoFocus;\n      },\n      get onFocus() {\n        return getProps().onFocus;\n      },\n      get onBlur() {\n        return getProps().onBlur;\n      },\n      get onFocusChange() {\n        return getProps().onFocusChange;\n      },\n      get onKeyDown() {\n        return getProps().onKeyDown;\n      },\n      get onKeyUp() {\n        return getProps().onKeyUp;\n      },\n      get excludeFromTabOrder() {\n        return getProps().excludeFromTabOrder;\n      },\n    },\n    ref as unknown as (el: HTMLElement) => void,\n  );\n\n  // Combine press and focusable props for input\n  const interactions = mergeProps(pressProps, focusableProps);\n\n  // Filter DOM props\n  const domProps = () =>\n    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });\n\n  // Handle input change\n  const onChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {\n    // Since we spread props on label, onChange will end up there as well as in here.\n    // So we have to stop propagation at the lowest level that we care about\n    e.stopPropagation();\n\n    // Don't update state if readonly\n    if (isReadOnly()) {\n      // Reset the checkbox to its previous state since the browser already toggled it\n      e.currentTarget.checked = state.isSelected();\n      return;\n    }\n\n    state.setSelected(e.currentTarget.checked);\n  };\n\n  // Warn if no accessible label\n  createEffect(() => {\n    const p = getProps();\n    const hasChildren = p.children != null;\n    const hasAriaLabel = p[\"aria-label\"] != null || p[\"aria-labelledby\"] != null;\n    if (!hasChildren && !hasAriaLabel && isDevEnv()) {\n      console.warn(\n        \"If you do not provide children, you must specify an aria-label for accessibility\",\n      );\n    }\n  });\n\n  // Combined pressed state\n  const combinedIsPressed: Accessor<boolean> = () => isPressed() || isLabelPressed();\n\n  // Mint ids for the description and error message slots. Copied from createField\n  // because we don't want the label behavior that provides — the id resolves only\n  // once an element with that id is actually rendered (e.g. via TextContext slots).\n  const descriptionId = createSlotId();\n  const errorMessageId = createSlotId();\n\n  return {\n    labelProps: mergeProps(labelPressProps, {\n      onClick: (e: MouseEvent) => e.preventDefault(),\n    }) as JSX.LabelHTMLAttributes<HTMLLabelElement>,\n    get inputProps() {\n      const p = getProps();\n      return mergeProps(domProps(), {\n        \"aria-invalid\": isInvalid() || undefined,\n        \"aria-errormessage\": p[\"aria-errormessage\"],\n        \"aria-controls\": p[\"aria-controls\"],\n        \"aria-readonly\": isReadOnly() || undefined,\n        \"aria-describedby\":\n          [descriptionId(), errorMessageId(), p[\"aria-describedby\"]].filter(Boolean).join(\" \") ||\n          undefined,\n        onChange,\n        disabled: isDisabled(),\n        ...(p.value == null ? {} : { value: p.value }),\n        name: p.name,\n        form: p.form,\n        type: \"checkbox\" as const,\n        ...interactions,\n        // Stop click propagation to prevent labelProps.onClick from calling preventDefault\n        // which would prevent the checkbox from toggling in JSDOM/testing-library environments\n        onClick: (e: MouseEvent) => e.stopPropagation(),\n      }) as JSX.InputHTMLAttributes<HTMLInputElement>;\n    },\n    get descriptionProps() {\n      return { id: descriptionId() };\n    },\n    get errorMessageProps() {\n      return { id: errorMessageId() };\n    },\n    isSelected: state.isSelected,\n    isPressed: combinedIsPressed,\n    isDisabled: isDisabled(),\n    isReadOnly: isReadOnly(),\n    isInvalid: isInvalid(),\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"createToggle.js","names":[],"sources":["../../src/toggle/createToggle.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/toggle/useToggle.ts\n\n/**\n * Toggle hook for Solidaria\n *\n * Handles interactions for toggle elements, e.g. Checkboxes and Switches.\n *\n * This is a 1:1 port of @react-aria/toggle's useToggle hook.\n */\n\nimport { Accessor, createTrackedEffect } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { createPress } from \"../interactions/createPress\";\nimport { createFocusable } from \"../interactions/createFocusable\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { filterDOMProps } from \"../utils/filterDOMProps\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\nimport { isDevEnv } from \"../utils/env\";\nimport { createSlotId } from \"../ssr\";\nimport { createFormValidationState, type ToggleState } from \"@proyecto-viviana/solid-stately\";\nimport { type PressEvent } from \"../interactions/PressEvent\";\nimport { createFormValidation } from \"../form/createFormValidation\";\nimport { createFormReset } from \"../form/createFormReset\";\n\nexport interface AriaToggleProps {\n  /** Whether the element should be selected (controlled). */\n  isSelected?: boolean;\n  /** Whether the element should be selected by default (uncontrolled). */\n  defaultSelected?: boolean;\n  /** Handler that is called when the element's selection state changes. */\n  onChange?: (isSelected: boolean) => void;\n  /** The value of the input element, used when submitting an HTML form. */\n  value?: string;\n  /** The name of the input element, used when submitting an HTML form. */\n  name?: string;\n  /** The form to associate the input with. */\n  form?: string;\n  /** Whether the element is disabled. */\n  isDisabled?: boolean;\n  /** Whether the element is read only. */\n  isReadOnly?: boolean;\n  /** Whether the element is required. */\n  isRequired?: boolean;\n  /** Whether the element is invalid. */\n  isInvalid?: boolean;\n  /**\n   * `\"native\"` sets the `required` attribute and omits `aria-required`.\n   * `\"aria\"` does the reverse. S2 Checkbox default is native.\n   * @default \"native\"\n   */\n  validationBehavior?: \"aria\" | \"native\";\n  /** The element's children. */\n  children?: JSX.Element;\n  /** Defines a string value that labels the current element. */\n  \"aria-label\"?: string;\n  /** Identifies the element (or elements) that labels the current element. */\n  \"aria-labelledby\"?: string;\n  /** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string;\n  /** Identifies the element (or elements) that provide an error message for the object. */\n  \"aria-errormessage\"?: string;\n  /** Identifies the element (or elements) whose contents or presence are controlled by the current element. */\n  \"aria-controls\"?: string;\n  /** The element's unique identifier. */\n  id?: string;\n  /** Handler that is called when the press is released over the target. */\n  onPress?: (e: PressEvent) => void;\n  /** Handler that is called when a press interaction starts. */\n  onPressStart?: (e: PressEvent) => void;\n  /** Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. */\n  onPressEnd?: (e: PressEvent) => void;\n  /** Handler that is called when the press state changes. */\n  onPressChange?: (isPressed: boolean) => void;\n  /** Handler that is called when a press is released over the target, regardless of whether it started on the target or not. */\n  onPressUp?: (e: PressEvent) => void;\n  /** Handler that is called when the element is clicked. */\n  onClick?: (e: MouseEvent) => void;\n  /** Handler that is called when the element receives focus. */\n  onFocus?: (e: FocusEvent) => void;\n  /** Handler that is called when the element loses focus. */\n  onBlur?: (e: FocusEvent) => void;\n  /** Handler that is called when the element's focus status changes. */\n  onFocusChange?: (isFocused: boolean) => void;\n  /** Handler that is called when a key is pressed. */\n  onKeyDown?: (e: KeyboardEvent) => void;\n  /** Handler that is called when a key is released. */\n  onKeyUp?: (e: KeyboardEvent) => void;\n  /** Whether to exclude the element from the tab order. */\n  excludeFromTabOrder?: boolean;\n  /** Whether to autofocus the element. */\n  autoFocus?: boolean;\n}\n\nexport interface ToggleAria {\n  /** Props to be spread on the label element. */\n  labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;\n  /** Props to be spread on the input element. */\n  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;\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  /** Whether the toggle is selected. */\n  isSelected: Accessor<boolean>;\n  /** Whether the toggle is in a pressed state. */\n  isPressed: Accessor<boolean>;\n  /** Whether the toggle is disabled. */\n  isDisabled: boolean;\n  /** Whether the toggle is read only. */\n  isReadOnly: boolean;\n  /** Whether the toggle is invalid. */\n  isInvalid: boolean;\n}\n\n/**\n * Handles interactions for toggle elements, e.g. Checkboxes and Switches.\n */\nexport function createToggle(\n  props: MaybeAccessor<AriaToggleProps>,\n  state: ToggleState,\n  ref: () => HTMLInputElement | null,\n): ToggleAria {\n  const getProps = () => access(props);\n\n  const isDisabled = () => getProps().isDisabled ?? false;\n  const isReadOnly = () => getProps().isReadOnly ?? false;\n  const validationBehavior = () => getProps().validationBehavior ?? \"native\";\n  const isInvalid = () => {\n    return getProps().isInvalid ?? false;\n  };\n\n  const validationState = createFormValidationState({\n    get value() {\n      return state.isSelected();\n    },\n    get isInvalid() {\n      return getProps().isInvalid;\n    },\n    get validationBehavior() {\n      return validationBehavior();\n    },\n  });\n\n  createFormValidation(\n    {\n      get validationBehavior() {\n        return validationBehavior();\n      },\n    },\n    validationState,\n    () => ref() ?? undefined,\n  );\n\n  // RAC useToggle: useFormReset(ref, state.defaultSelected, state.setSelected).\n  createFormReset(\n    () => ref() ?? undefined,\n    state.defaultSelected,\n    (value) => state.setSelected(value),\n  );\n\n  const skipLabelKeyboardPress = (e: PressEvent): boolean => {\n    // Keyboard/virtual activation is handled by the native input (Space).\n    // Enter on a focused checkbox must not toggle — RAC useToggle label press.\n    if (e.pointerType === \"keyboard\" || e.pointerType === \"virtual\") {\n      e.continuePropagation();\n      return true;\n    }\n    return false;\n  };\n\n  // Handle press state for keyboard interactions and cases where labelProps is not used.\n  const { pressProps, isPressed } = createPress({\n    get onPressStart() {\n      return getProps().onPressStart;\n    },\n    get onPressEnd() {\n      return getProps().onPressEnd;\n    },\n    get onPressChange() {\n      return getProps().onPressChange;\n    },\n    get onPress() {\n      return getProps().onPress;\n    },\n    get onPressUp() {\n      return getProps().onPressUp;\n    },\n    get onClick() {\n      return getProps().onClick;\n    },\n    get isDisabled() {\n      return isDisabled();\n    },\n  });\n\n  // Handle press state on the label.\n  const { pressProps: labelPressProps, isPressed: isLabelPressed } = createPress({\n    onPressStart(e: PressEvent) {\n      if (skipLabelKeyboardPress(e)) {\n        return;\n      }\n      getProps().onPressStart?.(e);\n    },\n    onPressEnd(e: PressEvent) {\n      if (skipLabelKeyboardPress(e)) {\n        return;\n      }\n      getProps().onPressEnd?.(e);\n    },\n    onPressUp(e: PressEvent) {\n      if (skipLabelKeyboardPress(e)) {\n        return;\n      }\n      getProps().onPressUp?.(e);\n    },\n    get onClick() {\n      return getProps().onClick;\n    },\n    onPress(e: PressEvent) {\n      if (skipLabelKeyboardPress(e)) {\n        return;\n      }\n      getProps().onPress?.(e);\n      state.toggle();\n      ref()?.focus();\n      validationState.commitValidation();\n    },\n    get isDisabled() {\n      return isDisabled() || isReadOnly();\n    },\n  });\n\n  // Handle focusable - extract the relevant props for createFocusable\n  const { focusableProps } = createFocusable(\n    {\n      get isDisabled() {\n        return isDisabled();\n      },\n      get autoFocus() {\n        return getProps().autoFocus;\n      },\n      get onFocus() {\n        return getProps().onFocus;\n      },\n      get onBlur() {\n        return getProps().onBlur;\n      },\n      get onFocusChange() {\n        return getProps().onFocusChange;\n      },\n      get onKeyDown() {\n        return getProps().onKeyDown;\n      },\n      get onKeyUp() {\n        return getProps().onKeyUp;\n      },\n      get excludeFromTabOrder() {\n        return getProps().excludeFromTabOrder;\n      },\n    },\n    ref as unknown as (el: HTMLElement) => void,\n  );\n\n  // Combine press and focusable props for input\n  const interactions = mergeProps(pressProps, focusableProps);\n\n  // Filter DOM props\n  const domProps = () =>\n    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });\n\n  // Handle input change\n  const onChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {\n    // Since we spread props on label, onChange will end up there as well as in here.\n    // So we have to stop propagation at the lowest level that we care about\n    e.stopPropagation();\n\n    // Don't update state if readonly\n    if (isReadOnly()) {\n      // Reset the checkbox to its previous state since the browser already toggled it\n      e.currentTarget.checked = state.isSelected();\n      return;\n    }\n\n    state.setSelected(e.currentTarget.checked);\n  };\n\n  // Warn if no accessible label\n  createTrackedEffect(() => {\n    const p = getProps();\n    const hasChildren = p.children != null;\n    const hasAriaLabel = p[\"aria-label\"] != null || p[\"aria-labelledby\"] != null;\n    if (!hasChildren && !hasAriaLabel && isDevEnv()) {\n      console.warn(\n        \"If you do not provide children, you must specify an aria-label for accessibility\",\n      );\n    }\n  });\n\n  // Combined pressed state\n  const combinedIsPressed: Accessor<boolean> = () => isPressed() || isLabelPressed();\n\n  // Mint ids for the description and error message slots. Copied from createField\n  // because we don't want the label behavior that provides — the id resolves only\n  // once an element with that id is actually rendered (e.g. via TextContext slots).\n  const descriptionId = createSlotId();\n  const errorMessageId = createSlotId();\n\n  return {\n    labelProps: mergeProps(labelPressProps, {\n      onClick: (e: MouseEvent) => e.preventDefault(),\n    }) as JSX.LabelHTMLAttributes<HTMLLabelElement>,\n    get inputProps() {\n      const p = getProps();\n      return mergeProps(domProps(), {\n        \"aria-invalid\": isInvalid() || undefined,\n        \"aria-errormessage\": p[\"aria-errormessage\"],\n        \"aria-controls\": p[\"aria-controls\"],\n        \"aria-readonly\": isReadOnly() || undefined,\n        \"aria-required\": (p.isRequired && validationBehavior() === \"aria\") || undefined,\n        required: (p.isRequired && validationBehavior() === \"native\") || undefined,\n        \"aria-describedby\":\n          [descriptionId(), errorMessageId(), p[\"aria-describedby\"]].filter(Boolean).join(\" \") ||\n          undefined,\n        onChange,\n        disabled: isDisabled(),\n        ...(p.value == null ? {} : { value: p.value }),\n        name: p.name,\n        form: p.form,\n        type: \"checkbox\" as const,\n        ...interactions,\n        // Stop click propagation to prevent labelProps.onClick from calling preventDefault\n        // which would prevent the checkbox from toggling in JSDOM/testing-library environments\n        onClick: (e: MouseEvent) => e.stopPropagation(),\n      }) as JSX.InputHTMLAttributes<HTMLInputElement>;\n    },\n    get descriptionProps() {\n      return { id: descriptionId() };\n    },\n    get errorMessageProps() {\n      return { id: errorMessageId() };\n    },\n    isSelected: state.isSelected,\n    isPressed: combinedIsPressed,\n    get isDisabled() {\n      return isDisabled();\n    },\n    get isReadOnly() {\n      return isReadOnly();\n    },\n    get isInvalid() {\n      return isInvalid();\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/createToggle.jsx

@@ -1,10 +1,26 @@
-import { t as createPress } from "./createPress.jsx";
-import { i as mergeProps$1, t as isDevEnv } from "./env.jsx";
+/*
+* 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/toggle/useToggle.ts
+import { t as mergeProps } from "./mergeProps.jsx";
 import { t as filterDOMProps } from "./filterDOMProps.jsx";
 import { t as access } from "./reactivity.jsx";
+import { t as isDevEnv } from "./env.jsx";
+import { t as createPress } from "./createPress.jsx";
 import { n as createFocusable } from "./createFocusable.jsx";
 import { createSlotId } from "../ssr/index.jsx";
-import { createEffect } from "solid-js";
+import { t as createFormValidation } from "./createFormValidation.jsx";
+import { t as createFormReset } from "./createFormReset.jsx";
+import { createTrackedEffect } from "solid-js";
+import { createFormValidationState } from "@proyecto-viviana/solid-stately";
 //#region src/toggle/createToggle.ts
 /**
 * Toggle hook for Solidaria
@@ -20,9 +36,32 @@ function createToggle(props, state, ref) {
 	const getProps = () => access(props);
 	const isDisabled = () => getProps().isDisabled ?? false;
 	const isReadOnly = () => getProps().isReadOnly ?? false;
+	const validationBehavior = () => getProps().validationBehavior ?? "native";
 	const isInvalid = () => {
 		return getProps().isInvalid ?? false;
 	};
+	const validationState = createFormValidationState({
+		get value() {
+			return state.isSelected();
+		},
+		get isInvalid() {
+			return getProps().isInvalid;
+		},
+		get validationBehavior() {
+			return validationBehavior();
+		}
+	});
+	createFormValidation({ get validationBehavior() {
+		return validationBehavior();
+	} }, validationState, () => ref() ?? void 0);
+	createFormReset(() => ref() ?? void 0, state.defaultSelected, (value) => state.setSelected(value));
+	const skipLabelKeyboardPress = (e) => {
+		if (e.pointerType === "keyboard" || e.pointerType === "virtual") {
+			e.continuePropagation();
+			return true;
+		}
+		return false;
+	};
 	const { pressProps, isPressed } = createPress({
 		get onPressStart() {
 			return getProps().onPressStart;
@@ -47,25 +86,27 @@ function createToggle(props, state, ref) {
 		}
 	});
 	const { pressProps: labelPressProps, isPressed: isLabelPressed } = createPress({
-		get onPressStart() {
-			return getProps().onPressStart;
+		onPressStart(e) {
+			if (skipLabelKeyboardPress(e)) return;
+			getProps().onPressStart?.(e);
 		},
-		get onPressEnd() {
-			return getProps().onPressEnd;
-		},
-		get onPressChange() {
-			return getProps().onPressChange;
+		onPressEnd(e) {
+			if (skipLabelKeyboardPress(e)) return;
+			getProps().onPressEnd?.(e);
 		},
-		get onPressUp() {
-			return getProps().onPressUp;
+		onPressUp(e) {
+			if (skipLabelKeyboardPress(e)) return;
+			getProps().onPressUp?.(e);
 		},
 		get onClick() {
 			return getProps().onClick;
 		},
 		onPress(e) {
+			if (skipLabelKeyboardPress(e)) return;
 			getProps().onPress?.(e);
 			state.toggle();
 			ref()?.focus();
+			validationState.commitValidation();
 		},
 		get isDisabled() {
 			return isDisabled() || isReadOnly();
@@ -97,7 +138,7 @@ function createToggle(props, state, ref) {
 			return getProps().excludeFromTabOrder;
 		}
 	}, ref);
-	const interactions = mergeProps$1(pressProps, focusableProps);
+	const interactions = mergeProps(pressProps, focusableProps);
 	const domProps = () => filterDOMProps(getProps(), { labelable: true });
 	const onChange = (e) => {
 		e.stopPropagation();
@@ -107,7 +148,7 @@ function createToggle(props, state, ref) {
 		}
 		state.setSelected(e.currentTarget.checked);
 	};
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const p = getProps();
 		const hasChildren = p.children != null;
 		const hasAriaLabel = p["aria-label"] != null || p["aria-labelledby"] != null;
@@ -117,14 +158,16 @@ function createToggle(props, state, ref) {
 	const descriptionId = createSlotId();
 	const errorMessageId = createSlotId();
 	return {
-		labelProps: mergeProps$1(labelPressProps, { onClick: (e) => e.preventDefault() }),
+		labelProps: mergeProps(labelPressProps, { onClick: (e) => e.preventDefault() }),
 		get inputProps() {
 			const p = getProps();
-			return mergeProps$1(domProps(), {
+			return mergeProps(domProps(), {
 				"aria-invalid": isInvalid() || void 0,
 				"aria-errormessage": p["aria-errormessage"],
 				"aria-controls": p["aria-controls"],
 				"aria-readonly": isReadOnly() || void 0,
+				"aria-required": p.isRequired && validationBehavior() === "aria" || void 0,
+				required: p.isRequired && validationBehavior() === "native" || void 0,
 				"aria-describedby": [
 					descriptionId(),
 					errorMessageId(),
@@ -148,9 +191,15 @@ function createToggle(props, state, ref) {
 		},
 		isSelected: state.isSelected,
 		isPressed: combinedIsPressed,
-		isDisabled: isDisabled(),
-		isReadOnly: isReadOnly(),
-		isInvalid: isInvalid()
+		get isDisabled() {
+			return isDisabled();
+		},
+		get isReadOnly() {
+			return isReadOnly();
+		},
+		get isInvalid() {
+			return isInvalid();
+		}
 	};
 }
 //#endregion

package/dist/_chunk/createToggle.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"createToggle.jsx","names":["mergeProps"],"sources":["../../src/toggle/createToggle.ts"],"sourcesContent":["/**\n * Toggle hook for Solidaria\n *\n * Handles interactions for toggle elements, e.g. Checkboxes and Switches.\n *\n * This is a 1:1 port of @react-aria/toggle's useToggle hook.\n */\n\nimport { JSX, Accessor, createEffect } from \"solid-js\";\nimport { createPress } from \"../interactions/createPress\";\nimport { createFocusable } from \"../interactions/createFocusable\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { filterDOMProps } from \"../utils/filterDOMProps\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\nimport { isDevEnv } from \"../utils/env\";\nimport { createSlotId } from \"../ssr\";\nimport { type ToggleState } from \"@proyecto-viviana/solid-stately\";\nimport { type PressEvent } from \"../interactions/PressEvent\";\n\nexport interface AriaToggleProps {\n  /** Whether the element should be selected (controlled). */\n  isSelected?: boolean;\n  /** Whether the element should be selected by default (uncontrolled). */\n  defaultSelected?: boolean;\n  /** Handler that is called when the element's selection state changes. */\n  onChange?: (isSelected: boolean) => void;\n  /** The value of the input element, used when submitting an HTML form. */\n  value?: string;\n  /** The name of the input element, used when submitting an HTML form. */\n  name?: string;\n  /** The form to associate the input with. */\n  form?: string;\n  /** Whether the element is disabled. */\n  isDisabled?: boolean;\n  /** Whether the element is read only. */\n  isReadOnly?: boolean;\n  /** Whether the element is required. */\n  isRequired?: boolean;\n  /** Whether the element is invalid. */\n  isInvalid?: boolean;\n  /** The element's children. */\n  children?: JSX.Element;\n  /** Defines a string value that labels the current element. */\n  \"aria-label\"?: string;\n  /** Identifies the element (or elements) that labels the current element. */\n  \"aria-labelledby\"?: string;\n  /** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string;\n  /** Identifies the element (or elements) that provide an error message for the object. */\n  \"aria-errormessage\"?: string;\n  /** Identifies the element (or elements) whose contents or presence are controlled by the current element. */\n  \"aria-controls\"?: string;\n  /** The element's unique identifier. */\n  id?: string;\n  /** Handler that is called when the press is released over the target. */\n  onPress?: (e: PressEvent) => void;\n  /** Handler that is called when a press interaction starts. */\n  onPressStart?: (e: PressEvent) => void;\n  /** Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. */\n  onPressEnd?: (e: PressEvent) => void;\n  /** Handler that is called when the press state changes. */\n  onPressChange?: (isPressed: boolean) => void;\n  /** Handler that is called when a press is released over the target, regardless of whether it started on the target or not. */\n  onPressUp?: (e: PressEvent) => void;\n  /** Handler that is called when the element is clicked. */\n  onClick?: (e: MouseEvent) => void;\n  /** Handler that is called when the element receives focus. */\n  onFocus?: (e: FocusEvent) => void;\n  /** Handler that is called when the element loses focus. */\n  onBlur?: (e: FocusEvent) => void;\n  /** Handler that is called when the element's focus status changes. */\n  onFocusChange?: (isFocused: boolean) => void;\n  /** Handler that is called when a key is pressed. */\n  onKeyDown?: (e: KeyboardEvent) => void;\n  /** Handler that is called when a key is released. */\n  onKeyUp?: (e: KeyboardEvent) => void;\n  /** Whether to exclude the element from the tab order. */\n  excludeFromTabOrder?: boolean;\n  /** Whether to autofocus the element. */\n  autoFocus?: boolean;\n}\n\nexport interface ToggleAria {\n  /** Props to be spread on the label element. */\n  labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;\n  /** Props to be spread on the input element. */\n  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;\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  /** Whether the toggle is selected. */\n  isSelected: Accessor<boolean>;\n  /** Whether the toggle is in a pressed state. */\n  isPressed: Accessor<boolean>;\n  /** Whether the toggle is disabled. */\n  isDisabled: boolean;\n  /** Whether the toggle is read only. */\n  isReadOnly: boolean;\n  /** Whether the toggle is invalid. */\n  isInvalid: boolean;\n}\n\n/**\n * Handles interactions for toggle elements, e.g. Checkboxes and Switches.\n */\nexport function createToggle(\n  props: MaybeAccessor<AriaToggleProps>,\n  state: ToggleState,\n  ref: () => HTMLInputElement | null,\n): ToggleAria {\n  const getProps = () => access(props);\n\n  const isDisabled = () => getProps().isDisabled ?? false;\n  const isReadOnly = () => getProps().isReadOnly ?? false;\n  const isInvalid = () => {\n    return getProps().isInvalid ?? false;\n  };\n\n  // Handle press state for keyboard interactions and cases where labelProps is not used.\n  const { pressProps, isPressed } = createPress({\n    get onPressStart() {\n      return getProps().onPressStart;\n    },\n    get onPressEnd() {\n      return getProps().onPressEnd;\n    },\n    get onPressChange() {\n      return getProps().onPressChange;\n    },\n    get onPress() {\n      return getProps().onPress;\n    },\n    get onPressUp() {\n      return getProps().onPressUp;\n    },\n    get onClick() {\n      return getProps().onClick;\n    },\n    get isDisabled() {\n      return isDisabled();\n    },\n  });\n\n  // Handle press state on the label.\n  const { pressProps: labelPressProps, isPressed: isLabelPressed } = createPress({\n    get onPressStart() {\n      return getProps().onPressStart;\n    },\n    get onPressEnd() {\n      return getProps().onPressEnd;\n    },\n    get onPressChange() {\n      return getProps().onPressChange;\n    },\n    get onPressUp() {\n      return getProps().onPressUp;\n    },\n    get onClick() {\n      return getProps().onClick;\n    },\n    onPress(e: PressEvent) {\n      getProps().onPress?.(e);\n      state.toggle();\n      ref()?.focus();\n    },\n    get isDisabled() {\n      return isDisabled() || isReadOnly();\n    },\n  });\n\n  // Handle focusable - extract the relevant props for createFocusable\n  const { focusableProps } = createFocusable(\n    {\n      get isDisabled() {\n        return isDisabled();\n      },\n      get autoFocus() {\n        return getProps().autoFocus;\n      },\n      get onFocus() {\n        return getProps().onFocus;\n      },\n      get onBlur() {\n        return getProps().onBlur;\n      },\n      get onFocusChange() {\n        return getProps().onFocusChange;\n      },\n      get onKeyDown() {\n        return getProps().onKeyDown;\n      },\n      get onKeyUp() {\n        return getProps().onKeyUp;\n      },\n      get excludeFromTabOrder() {\n        return getProps().excludeFromTabOrder;\n      },\n    },\n    ref as unknown as (el: HTMLElement) => void,\n  );\n\n  // Combine press and focusable props for input\n  const interactions = mergeProps(pressProps, focusableProps);\n\n  // Filter DOM props\n  const domProps = () =>\n    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });\n\n  // Handle input change\n  const onChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {\n    // Since we spread props on label, onChange will end up there as well as in here.\n    // So we have to stop propagation at the lowest level that we care about\n    e.stopPropagation();\n\n    // Don't update state if readonly\n    if (isReadOnly()) {\n      // Reset the checkbox to its previous state since the browser already toggled it\n      e.currentTarget.checked = state.isSelected();\n      return;\n    }\n\n    state.setSelected(e.currentTarget.checked);\n  };\n\n  // Warn if no accessible label\n  createEffect(() => {\n    const p = getProps();\n    const hasChildren = p.children != null;\n    const hasAriaLabel = p[\"aria-label\"] != null || p[\"aria-labelledby\"] != null;\n    if (!hasChildren && !hasAriaLabel && isDevEnv()) {\n      console.warn(\n        \"If you do not provide children, you must specify an aria-label for accessibility\",\n      );\n    }\n  });\n\n  // Combined pressed state\n  const combinedIsPressed: Accessor<boolean> = () => isPressed() || isLabelPressed();\n\n  // Mint ids for the description and error message slots. Copied from createField\n  // because we don't want the label behavior that provides — the id resolves only\n  // once an element with that id is actually rendered (e.g. via TextContext slots).\n  const descriptionId = createSlotId();\n  const errorMessageId = createSlotId();\n\n  return {\n    labelProps: mergeProps(labelPressProps, {\n      onClick: (e: MouseEvent) => e.preventDefault(),\n    }) as JSX.LabelHTMLAttributes<HTMLLabelElement>,\n    get inputProps() {\n      const p = getProps();\n      return mergeProps(domProps(), {\n        \"aria-invalid\": isInvalid() || undefined,\n        \"aria-errormessage\": p[\"aria-errormessage\"],\n        \"aria-controls\": p[\"aria-controls\"],\n        \"aria-readonly\": isReadOnly() || undefined,\n        \"aria-describedby\":\n          [descriptionId(), errorMessageId(), p[\"aria-describedby\"]].filter(Boolean).join(\" \") ||\n          undefined,\n        onChange,\n        disabled: isDisabled(),\n        ...(p.value == null ? {} : { value: p.value }),\n        name: p.name,\n        form: p.form,\n        type: \"checkbox\" as const,\n        ...interactions,\n        // Stop click propagation to prevent labelProps.onClick from calling preventDefault\n        // which would prevent the checkbox from toggling in JSDOM/testing-library environments\n        onClick: (e: MouseEvent) => e.stopPropagation(),\n      }) as JSX.InputHTMLAttributes<HTMLInputElement>;\n    },\n    get descriptionProps() {\n      return { id: descriptionId() };\n    },\n    get errorMessageProps() {\n      return { id: errorMessageId() };\n    },\n    isSelected: state.isSelected,\n    isPressed: combinedIsPressed,\n    isDisabled: isDisabled(),\n    isReadOnly: isReadOnly(),\n    isInvalid: isInvalid(),\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"createToggle.jsx","names":[],"sources":["../../src/toggle/createToggle.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/toggle/useToggle.ts\n\n/**\n * Toggle hook for Solidaria\n *\n * Handles interactions for toggle elements, e.g. Checkboxes and Switches.\n *\n * This is a 1:1 port of @react-aria/toggle's useToggle hook.\n */\n\nimport { Accessor, createTrackedEffect } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { createPress } from \"../interactions/createPress\";\nimport { createFocusable } from \"../interactions/createFocusable\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { filterDOMProps } from \"../utils/filterDOMProps\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\nimport { isDevEnv } from \"../utils/env\";\nimport { createSlotId } from \"../ssr\";\nimport { createFormValidationState, type ToggleState } from \"@proyecto-viviana/solid-stately\";\nimport { type PressEvent } from \"../interactions/PressEvent\";\nimport { createFormValidation } from \"../form/createFormValidation\";\nimport { createFormReset } from \"../form/createFormReset\";\n\nexport interface AriaToggleProps {\n  /** Whether the element should be selected (controlled). */\n  isSelected?: boolean;\n  /** Whether the element should be selected by default (uncontrolled). */\n  defaultSelected?: boolean;\n  /** Handler that is called when the element's selection state changes. */\n  onChange?: (isSelected: boolean) => void;\n  /** The value of the input element, used when submitting an HTML form. */\n  value?: string;\n  /** The name of the input element, used when submitting an HTML form. */\n  name?: string;\n  /** The form to associate the input with. */\n  form?: string;\n  /** Whether the element is disabled. */\n  isDisabled?: boolean;\n  /** Whether the element is read only. */\n  isReadOnly?: boolean;\n  /** Whether the element is required. */\n  isRequired?: boolean;\n  /** Whether the element is invalid. */\n  isInvalid?: boolean;\n  /**\n   * `\"native\"` sets the `required` attribute and omits `aria-required`.\n   * `\"aria\"` does the reverse. S2 Checkbox default is native.\n   * @default \"native\"\n   */\n  validationBehavior?: \"aria\" | \"native\";\n  /** The element's children. */\n  children?: JSX.Element;\n  /** Defines a string value that labels the current element. */\n  \"aria-label\"?: string;\n  /** Identifies the element (or elements) that labels the current element. */\n  \"aria-labelledby\"?: string;\n  /** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string;\n  /** Identifies the element (or elements) that provide an error message for the object. */\n  \"aria-errormessage\"?: string;\n  /** Identifies the element (or elements) whose contents or presence are controlled by the current element. */\n  \"aria-controls\"?: string;\n  /** The element's unique identifier. */\n  id?: string;\n  /** Handler that is called when the press is released over the target. */\n  onPress?: (e: PressEvent) => void;\n  /** Handler that is called when a press interaction starts. */\n  onPressStart?: (e: PressEvent) => void;\n  /** Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. */\n  onPressEnd?: (e: PressEvent) => void;\n  /** Handler that is called when the press state changes. */\n  onPressChange?: (isPressed: boolean) => void;\n  /** Handler that is called when a press is released over the target, regardless of whether it started on the target or not. */\n  onPressUp?: (e: PressEvent) => void;\n  /** Handler that is called when the element is clicked. */\n  onClick?: (e: MouseEvent) => void;\n  /** Handler that is called when the element receives focus. */\n  onFocus?: (e: FocusEvent) => void;\n  /** Handler that is called when the element loses focus. */\n  onBlur?: (e: FocusEvent) => void;\n  /** Handler that is called when the element's focus status changes. */\n  onFocusChange?: (isFocused: boolean) => void;\n  /** Handler that is called when a key is pressed. */\n  onKeyDown?: (e: KeyboardEvent) => void;\n  /** Handler that is called when a key is released. */\n  onKeyUp?: (e: KeyboardEvent) => void;\n  /** Whether to exclude the element from the tab order. */\n  excludeFromTabOrder?: boolean;\n  /** Whether to autofocus the element. */\n  autoFocus?: boolean;\n}\n\nexport interface ToggleAria {\n  /** Props to be spread on the label element. */\n  labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;\n  /** Props to be spread on the input element. */\n  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;\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  /** Whether the toggle is selected. */\n  isSelected: Accessor<boolean>;\n  /** Whether the toggle is in a pressed state. */\n  isPressed: Accessor<boolean>;\n  /** Whether the toggle is disabled. */\n  isDisabled: boolean;\n  /** Whether the toggle is read only. */\n  isReadOnly: boolean;\n  /** Whether the toggle is invalid. */\n  isInvalid: boolean;\n}\n\n/**\n * Handles interactions for toggle elements, e.g. Checkboxes and Switches.\n */\nexport function createToggle(\n  props: MaybeAccessor<AriaToggleProps>,\n  state: ToggleState,\n  ref: () => HTMLInputElement | null,\n): ToggleAria {\n  const getProps = () => access(props);\n\n  const isDisabled = () => getProps().isDisabled ?? false;\n  const isReadOnly = () => getProps().isReadOnly ?? false;\n  const validationBehavior = () => getProps().validationBehavior ?? \"native\";\n  const isInvalid = () => {\n    return getProps().isInvalid ?? false;\n  };\n\n  const validationState = createFormValidationState({\n    get value() {\n      return state.isSelected();\n    },\n    get isInvalid() {\n      return getProps().isInvalid;\n    },\n    get validationBehavior() {\n      return validationBehavior();\n    },\n  });\n\n  createFormValidation(\n    {\n      get validationBehavior() {\n        return validationBehavior();\n      },\n    },\n    validationState,\n    () => ref() ?? undefined,\n  );\n\n  // RAC useToggle: useFormReset(ref, state.defaultSelected, state.setSelected).\n  createFormReset(\n    () => ref() ?? undefined,\n    state.defaultSelected,\n    (value) => state.setSelected(value),\n  );\n\n  const skipLabelKeyboardPress = (e: PressEvent): boolean => {\n    // Keyboard/virtual activation is handled by the native input (Space).\n    // Enter on a focused checkbox must not toggle — RAC useToggle label press.\n    if (e.pointerType === \"keyboard\" || e.pointerType === \"virtual\") {\n      e.continuePropagation();\n      return true;\n    }\n    return false;\n  };\n\n  // Handle press state for keyboard interactions and cases where labelProps is not used.\n  const { pressProps, isPressed } = createPress({\n    get onPressStart() {\n      return getProps().onPressStart;\n    },\n    get onPressEnd() {\n      return getProps().onPressEnd;\n    },\n    get onPressChange() {\n      return getProps().onPressChange;\n    },\n    get onPress() {\n      return getProps().onPress;\n    },\n    get onPressUp() {\n      return getProps().onPressUp;\n    },\n    get onClick() {\n      return getProps().onClick;\n    },\n    get isDisabled() {\n      return isDisabled();\n    },\n  });\n\n  // Handle press state on the label.\n  const { pressProps: labelPressProps, isPressed: isLabelPressed } = createPress({\n    onPressStart(e: PressEvent) {\n      if (skipLabelKeyboardPress(e)) {\n        return;\n      }\n      getProps().onPressStart?.(e);\n    },\n    onPressEnd(e: PressEvent) {\n      if (skipLabelKeyboardPress(e)) {\n        return;\n      }\n      getProps().onPressEnd?.(e);\n    },\n    onPressUp(e: PressEvent) {\n      if (skipLabelKeyboardPress(e)) {\n        return;\n      }\n      getProps().onPressUp?.(e);\n    },\n    get onClick() {\n      return getProps().onClick;\n    },\n    onPress(e: PressEvent) {\n      if (skipLabelKeyboardPress(e)) {\n        return;\n      }\n      getProps().onPress?.(e);\n      state.toggle();\n      ref()?.focus();\n      validationState.commitValidation();\n    },\n    get isDisabled() {\n      return isDisabled() || isReadOnly();\n    },\n  });\n\n  // Handle focusable - extract the relevant props for createFocusable\n  const { focusableProps } = createFocusable(\n    {\n      get isDisabled() {\n        return isDisabled();\n      },\n      get autoFocus() {\n        return getProps().autoFocus;\n      },\n      get onFocus() {\n        return getProps().onFocus;\n      },\n      get onBlur() {\n        return getProps().onBlur;\n      },\n      get onFocusChange() {\n        return getProps().onFocusChange;\n      },\n      get onKeyDown() {\n        return getProps().onKeyDown;\n      },\n      get onKeyUp() {\n        return getProps().onKeyUp;\n      },\n      get excludeFromTabOrder() {\n        return getProps().excludeFromTabOrder;\n      },\n    },\n    ref as unknown as (el: HTMLElement) => void,\n  );\n\n  // Combine press and focusable props for input\n  const interactions = mergeProps(pressProps, focusableProps);\n\n  // Filter DOM props\n  const domProps = () =>\n    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });\n\n  // Handle input change\n  const onChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {\n    // Since we spread props on label, onChange will end up there as well as in here.\n    // So we have to stop propagation at the lowest level that we care about\n    e.stopPropagation();\n\n    // Don't update state if readonly\n    if (isReadOnly()) {\n      // Reset the checkbox to its previous state since the browser already toggled it\n      e.currentTarget.checked = state.isSelected();\n      return;\n    }\n\n    state.setSelected(e.currentTarget.checked);\n  };\n\n  // Warn if no accessible label\n  createTrackedEffect(() => {\n    const p = getProps();\n    const hasChildren = p.children != null;\n    const hasAriaLabel = p[\"aria-label\"] != null || p[\"aria-labelledby\"] != null;\n    if (!hasChildren && !hasAriaLabel && isDevEnv()) {\n      console.warn(\n        \"If you do not provide children, you must specify an aria-label for accessibility\",\n      );\n    }\n  });\n\n  // Combined pressed state\n  const combinedIsPressed: Accessor<boolean> = () => isPressed() || isLabelPressed();\n\n  // Mint ids for the description and error message slots. Copied from createField\n  // because we don't want the label behavior that provides — the id resolves only\n  // once an element with that id is actually rendered (e.g. via TextContext slots).\n  const descriptionId = createSlotId();\n  const errorMessageId = createSlotId();\n\n  return {\n    labelProps: mergeProps(labelPressProps, {\n      onClick: (e: MouseEvent) => e.preventDefault(),\n    }) as JSX.LabelHTMLAttributes<HTMLLabelElement>,\n    get inputProps() {\n      const p = getProps();\n      return mergeProps(domProps(), {\n        \"aria-invalid\": isInvalid() || undefined,\n        \"aria-errormessage\": p[\"aria-errormessage\"],\n        \"aria-controls\": p[\"aria-controls\"],\n        \"aria-readonly\": isReadOnly() || undefined,\n        \"aria-required\": (p.isRequired && validationBehavior() === \"aria\") || undefined,\n        required: (p.isRequired && validationBehavior() === \"native\") || undefined,\n        \"aria-describedby\":\n          [descriptionId(), errorMessageId(), p[\"aria-describedby\"]].filter(Boolean).join(\" \") ||\n          undefined,\n        onChange,\n        disabled: isDisabled(),\n        ...(p.value == null ? {} : { value: p.value }),\n        name: p.name,\n        form: p.form,\n        type: \"checkbox\" as const,\n        ...interactions,\n        // Stop click propagation to prevent labelProps.onClick from calling preventDefault\n        // which would prevent the checkbox from toggling in JSDOM/testing-library environments\n        onClick: (e: MouseEvent) => e.stopPropagation(),\n      }) as JSX.InputHTMLAttributes<HTMLInputElement>;\n    },\n    get descriptionProps() {\n      return { id: descriptionId() };\n    },\n    get errorMessageProps() {\n      return { id: errorMessageId() };\n    },\n    isSelected: state.isSelected,\n    isPressed: combinedIsPressed,\n    get isDisabled() {\n      return isDisabled();\n    },\n    get isReadOnly() {\n      return isReadOnly();\n    },\n    get isInvalid() {\n      return isInvalid();\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/createTypeSelect.js

@@ -1,5 +1,17 @@
+/*
+* 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/selection/useTypeSelect.ts
+import { t as onOwnedCleanup } from "./owner.js";
 import { t as createCollator } from "./createCollator.js";
-import { onCleanup } from "solid-js";
 //#region src/selection/createTypeSelect.ts
 /**
 * createTypeSelect - Handles typeahead interactions with collections.
@@ -98,7 +110,7 @@ function createTypeSelect(options) {
 	const onKeyDown = (e) => {
 		if (options.isDisabled) return;
 		const character = getStringForKey(e.key);
-		if (!character || e.ctrlKey || e.metaKey || e.altKey || !e.currentTarget.contains(e.target) || state.search.length === 0 && character === " ") return;
+		if (!character || e.ctrlKey || e.metaKey || e.altKey || !e.currentTarget?.contains(e.target) || state.search.length === 0 && character === " ") return;
 		state.search += character;
 		if (searchAndFocus() != null) {
 			e.preventDefault();
@@ -111,7 +123,7 @@ function createTypeSelect(options) {
 		}
 		restartDebounce();
 	};
-	onCleanup(() => {
+	onOwnedCleanup(() => {
 		clearTimeout(state.timeout);
 	});
 	return { typeSelectProps: {

package/dist/_chunk/createTypeSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"createTypeSelect.js","names":[],"sources":["../../src/selection/createTypeSelect.ts"],"sourcesContent":["/**\n * createTypeSelect - Handles typeahead interactions with collections.\n * Based on @react-aria/selection useTypeSelect.\n *\n * Allows users to navigate to items by typing characters that match\n * item text values. Supports multi-character search with debouncing.\n */\n\nimport { onCleanup } from \"solid-js\";\nimport type { JSX, Accessor } from \"solid-js\";\nimport type { Key, Collection, CollectionNode } from \"@proyecto-viviana/solid-stately\";\nimport { createCollator } from \"../i18n/createCollator\";\n\n/**\n * Controls how long to wait before clearing the typeahead buffer.\n */\nconst TYPEAHEAD_DEBOUNCE_WAIT_MS = 1000; // 1 second\n\nexport interface TypeSelectOptions<T> {\n  /** The collection to search through. */\n  collection: Accessor<Collection<T>>;\n  /** The currently focused key. */\n  focusedKey: Accessor<Key | null>;\n  /** Callback to set the focused key when a match is found. */\n  onFocusedKeyChange: (key: Key) => void;\n  /** Callback when an item is focused by typing. */\n  onTypeSelect?: (key: Key) => void;\n  /** Function to check if a key is disabled. */\n  isKeyDisabled?: (key: Key) => boolean;\n  /** Whether type-to-select is disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface TypeSelectAria {\n  /** Props to spread on the collection element. */\n  typeSelectProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n// Internal state for tracking the search buffer\ninterface TypeSelectState {\n  search: string;\n  timeout: ReturnType<typeof setTimeout> | undefined;\n}\n\n/**\n * Get a printable character from a key event.\n * Returns the character if it's a single printable character,\n * or empty string for non-printable keys.\n */\nfunction getStringForKey(key: string): string {\n  // If the key is of length 1, it is an ASCII value.\n  // Otherwise, if there are no ASCII characters in the key name,\n  // it is a Unicode character.\n  // See https://www.w3.org/TR/uievents-key/\n  if (key.length === 1 || !/^[A-Z]/i.test(key)) {\n    return key;\n  }\n  return \"\";\n}\n\n/**\n * Search for a key in the collection that matches the search string.\n * Starts *at* `fromKey` (inclusive) and scans to the end, with no internal\n * wrap; the caller retries from the top to cover earlier items. Matching is\n * locale-aware via the supplied `collator`.\n */\nfunction getKeyForSearch<T>(\n  collection: Collection<T>,\n  search: string,\n  fromKey: Key | null,\n  collator: Intl.Collator,\n  isKeyDisabled?: (key: Key) => boolean,\n): Key | null {\n  // Collect all items in order\n  const items: CollectionNode<T>[] = [];\n  for (const item of collection) {\n    if (item.type === \"item\") {\n      items.push(item);\n    }\n  }\n\n  if (items.length === 0) return null;\n\n  // Find the starting index. Start *at* the currently focused item (inclusive),\n  // mirroring upstream ListKeyboardDelegate.getKeyForSearch (`key = fromKey ||\n  // getFirstKey()`): typing a prefix the focused item already matches keeps focus\n  // on it instead of advancing to the next match.\n  let startIndex = 0;\n  if (fromKey != null) {\n    const fromIndex = items.findIndex((item) => item.key === fromKey);\n    if (fromIndex !== -1) {\n      startIndex = fromIndex;\n    }\n  }\n\n  // Scan from startIndex to the end (no wrap). The caller retries from the top to\n  // cover items before the focused one, matching upstream useTypeSelect.\n  for (let index = startIndex; index < items.length; index++) {\n    const item = items[index];\n\n    // Skip disabled items\n    if (item.isDisabled || (isKeyDisabled && isKeyDisabled(item.key))) {\n      continue;\n    }\n\n    // Match the leading characters of the text value against the search string\n    // using locale-aware collation, mirroring upstream ListKeyboardDelegate\n    // (`collator.compare(textValue.slice(0, search.length), search) === 0`). The\n    // collator's `usage: 'search'` / `sensitivity: 'base'` makes this case- and\n    // diacritic-insensitive in a locale-aware way.\n    const textValue = item.textValue || \"\";\n    const substring = textValue.slice(0, search.length);\n    if (textValue && collator.compare(substring, search) === 0) {\n      return item.key;\n    }\n  }\n\n  return null;\n}\n\n/**\n * Creates typeahead/type-to-select functionality for a collection.\n *\n * @example\n * ```tsx\n * const { typeSelectProps } = createTypeSelect({\n *   collection: () => state.collection(),\n *   focusedKey: () => state.focusedKey(),\n *   onFocusedKeyChange: (key) => state.setFocusedKey(key),\n * });\n *\n * return <ul {...mergeProps(listBoxProps, typeSelectProps)}>...</ul>;\n * ```\n */\nexport function createTypeSelect<T>(options: TypeSelectOptions<T>): TypeSelectAria {\n  // Create mutable state object to persist across keystrokes\n  const state: TypeSelectState = {\n    search: \"\",\n    timeout: undefined,\n  };\n\n  // Locale-aware search collator, mirroring upstream useSelectableList's\n  // `useCollator({ usage: 'search', sensitivity: 'base' })`.\n  const collator = createCollator({ usage: \"search\", sensitivity: \"base\" });\n\n  // Append the search buffer, find a matching key (from the focused item,\n  // falling back to the whole list), focus it, and (re)start the debounce timer.\n  // Shared by both phase handlers below, mirroring the duplicated body in\n  // upstream useTypeSelect.\n  const searchAndFocus = (): Key | null => {\n    const collection = options.collection();\n    const currentKey = options.focusedKey();\n\n    // Prioritize items at/after the focused item, then retry from the top to\n    // cover earlier ones (upstream's two getKeyForSearch calls).\n    let key = getKeyForSearch(\n      collection,\n      state.search,\n      currentKey,\n      collator(),\n      options.isKeyDisabled,\n    );\n    if (key == null) {\n      key = getKeyForSearch(collection, state.search, null, collator(), options.isKeyDisabled);\n    }\n\n    if (key != null) {\n      options.onFocusedKeyChange(key);\n      options.onTypeSelect?.(key);\n    }\n\n    return key;\n  };\n\n  const restartDebounce = () => {\n    clearTimeout(state.timeout);\n    state.timeout = setTimeout(() => {\n      state.search = \"\";\n    }, TYPEAHEAD_DEBOUNCE_WAIT_MS);\n  };\n\n  // Capture phase: mid-search a Spacebar is part of the query, not a selection\n  // action, so we consume it before the collection's own keydown handler can act\n  // on it. Mirrors upstream useTypeSelect's onKeyDownCapture.\n  const onKeyDownCapture: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {\n    if (options.isDisabled) return;\n\n    if (state.search.length > 0 && e.key === \" \") {\n      e.preventDefault();\n      // Upstream guards this with `!('continuePropagation' in e) ||\n      // !e.isPropagationStopped()`. Our raw DOM KeyboardEvents never carry\n      // `continuePropagation`, so the guard always holds — stop unconditionally.\n      e.stopPropagation();\n      state.search += \" \";\n      searchAndFocus();\n      restartDebounce();\n    }\n  };\n\n  // Bubble phase: handles ordinary characters (and, in environments where the\n  // capture listener above is inert, mid-search Spacebar via its non-bailing\n  // branch). Mirrors upstream useTypeSelect's onKeyDown.\n  const onKeyDown: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {\n    if (options.isDisabled) return;\n\n    const character = getStringForKey(e.key);\n\n    // Ignore non-printable keys, Ctrl/Meta/Alt combos (Alt is excluded to match\n    // upstream — AltGr-only layouts shouldn't drive type-select), events from\n    // outside the element, and a leading Space (a common action key).\n    if (\n      !character ||\n      e.ctrlKey ||\n      e.metaKey ||\n      e.altKey ||\n      !e.currentTarget.contains(e.target as HTMLElement) ||\n      (state.search.length === 0 && character === \" \")\n    ) {\n      return;\n    }\n\n    state.search += character;\n\n    const key = searchAndFocus();\n\n    if (key != null) {\n      e.preventDefault();\n      // Our raw DOM events never carry `continuePropagation`, so upstream's\n      // `if (!('continuePropagation' in e)) e.stopPropagation()` is unconditional.\n      e.stopPropagation();\n    } else {\n      // Nothing matched even after retrying from the top: type-to-select is done,\n      // so reset the buffer and let the key propagate normally.\n      state.search = \"\";\n      clearTimeout(state.timeout);\n      state.timeout = undefined;\n      return;\n    }\n\n    restartDebounce();\n  };\n\n  // Mirror upstream's unmount cleanup (a useEffect teardown) so a pending\n  // debounce timer never fires after the consumer is disposed.\n  onCleanup(() => {\n    clearTimeout(state.timeout);\n  });\n\n  return {\n    typeSelectProps: {\n      // Upstream binds `onKeyDownCapture` so Spacebar is handled before the\n      // collection's own keydown handler. In Solid a capture handler delivered\n      // through a `{...typeSelectProps}` spread is inert (it never fires), so the\n      // bubble-phase `onKeyDown` is the live path — and it also covers mid-search\n      // Space because its bail check only rejects a *leading* Space. True capture\n      // would need a ref-based addEventListener threaded through every consumer;\n      // see the typeahead follow-up in upstream-sync.md.\n      onKeyDownCapture,\n      onKeyDown,\n    } as JSX.HTMLAttributes<HTMLElement>,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,6BAA6B;;;;;;AAiCnC,SAAS,gBAAgB,KAAqB;CAK5C,IAAI,IAAI,WAAW,KAAK,CAAC,UAAU,KAAK,GAAG,GACzC,OAAO;CAET,OAAO;AACT;;;;;;;AAQA,SAAS,gBACP,YACA,QACA,SACA,UACA,eACY;CAEZ,MAAM,QAA6B,CAAC;CACpC,KAAK,MAAM,QAAQ,YACjB,IAAI,KAAK,SAAS,QAChB,MAAM,KAAK,IAAI;CAInB,IAAI,MAAM,WAAW,GAAG,OAAO;CAM/B,IAAI,aAAa;CACjB,IAAI,WAAW,MAAM;EACnB,MAAM,YAAY,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO;EAChE,IAAI,cAAc,IAChB,aAAa;CAEjB;CAIA,KAAK,IAAI,QAAQ,YAAY,QAAQ,MAAM,QAAQ,SAAS;EAC1D,MAAM,OAAO,MAAM;EAGnB,IAAI,KAAK,cAAe,iBAAiB,cAAc,KAAK,GAAG,GAC7D;EAQF,MAAM,YAAY,KAAK,aAAa;EACpC,MAAM,YAAY,UAAU,MAAM,GAAG,OAAO,MAAM;EAClD,IAAI,aAAa,SAAS,QAAQ,WAAW,MAAM,MAAM,GACvD,OAAO,KAAK;CAEhB;CAEA,OAAO;AACT;;;;;;;;;;;;;;;AAgBA,SAAgB,iBAAoB,SAA+C;CAEjF,MAAM,QAAyB;EAC7B,QAAQ;EACR,SAAS,KAAA;CACX;CAIA,MAAM,WAAW,eAAe;EAAE,OAAO;EAAU,aAAa;CAAO,CAAC;CAMxE,MAAM,uBAAmC;EACvC,MAAM,aAAa,QAAQ,WAAW;EACtC,MAAM,aAAa,QAAQ,WAAW;EAItC,IAAI,MAAM,gBACR,YACA,MAAM,QACN,YACA,SAAS,GACT,QAAQ,aACV;EACA,IAAI,OAAO,MACT,MAAM,gBAAgB,YAAY,MAAM,QAAQ,MAAM,SAAS,GAAG,QAAQ,aAAa;EAGzF,IAAI,OAAO,MAAM;GACf,QAAQ,mBAAmB,GAAG;GAC9B,QAAQ,eAAe,GAAG;EAC5B;EAEA,OAAO;CACT;CAEA,MAAM,wBAAwB;EAC5B,aAAa,MAAM,OAAO;EAC1B,MAAM,UAAU,iBAAiB;GAC/B,MAAM,SAAS;EACjB,GAAG,0BAA0B;CAC/B;CAKA,MAAM,oBAAkE,MAAM;EAC5E,IAAI,QAAQ,YAAY;EAExB,IAAI,MAAM,OAAO,SAAS,KAAK,EAAE,QAAQ,KAAK;GAC5C,EAAE,eAAe;GAIjB,EAAE,gBAAgB;GAClB,MAAM,UAAU;GAChB,eAAe;GACf,gBAAgB;EAClB;CACF;CAKA,MAAM,aAA2D,MAAM;EACrE,IAAI,QAAQ,YAAY;EAExB,MAAM,YAAY,gBAAgB,EAAE,GAAG;EAKvC,IACE,CAAC,aACD,EAAE,WACF,EAAE,WACF,EAAE,UACF,CAAC,EAAE,cAAc,SAAS,EAAE,MAAqB,KAChD,MAAM,OAAO,WAAW,KAAK,cAAc,KAE5C;EAGF,MAAM,UAAU;EAIhB,IAFY,eAEN,KAAK,MAAM;GACf,EAAE,eAAe;GAGjB,EAAE,gBAAgB;EACpB,OAAO;GAGL,MAAM,SAAS;GACf,aAAa,MAAM,OAAO;GAC1B,MAAM,UAAU,KAAA;GAChB;EACF;EAEA,gBAAgB;CAClB;CAIA,gBAAgB;EACd,aAAa,MAAM,OAAO;CAC5B,CAAC;CAED,OAAO,EACL,iBAAiB;EAQf;EACA;CACF,EACF;AACF"}
+{"version":3,"file":"createTypeSelect.js","names":[],"sources":["../../src/selection/createTypeSelect.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/selection/useTypeSelect.ts\n\n/**\n * createTypeSelect - Handles typeahead interactions with collections.\n * Based on @react-aria/selection useTypeSelect.\n *\n * Allows users to navigate to items by typing characters that match\n * item text values. Supports multi-character search with debouncing.\n */\n\nimport { onOwnedCleanup } from \"../utils/owner\";\nimport type { Accessor } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport type { Key, Collection, CollectionNode } from \"@proyecto-viviana/solid-stately\";\nimport { createCollator } from \"../i18n/createCollator\";\n\n/**\n * Controls how long to wait before clearing the typeahead buffer.\n */\nconst TYPEAHEAD_DEBOUNCE_WAIT_MS = 1000; // 1 second\n\nexport interface TypeSelectOptions<T> {\n  /** The collection to search through. */\n  collection: Accessor<Collection<T>>;\n  /** The currently focused key. */\n  focusedKey: Accessor<Key | null>;\n  /** Callback to set the focused key when a match is found. */\n  onFocusedKeyChange: (key: Key) => void;\n  /** Callback when an item is focused by typing. */\n  onTypeSelect?: (key: Key) => void;\n  /** Function to check if a key is disabled. */\n  isKeyDisabled?: (key: Key) => boolean;\n  /** Whether type-to-select is disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface TypeSelectAria {\n  /** Props to spread on the collection element. */\n  typeSelectProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n// Internal state for tracking the search buffer\ninterface TypeSelectState {\n  search: string;\n  timeout: ReturnType<typeof setTimeout> | undefined;\n}\n\n/**\n * Get a printable character from a key event.\n * Returns the character if it's a single printable character,\n * or empty string for non-printable keys.\n */\nfunction getStringForKey(key: string): string {\n  // If the key is of length 1, it is an ASCII value.\n  // Otherwise, if there are no ASCII characters in the key name,\n  // it is a Unicode character.\n  // See https://www.w3.org/TR/uievents-key/\n  if (key.length === 1 || !/^[A-Z]/i.test(key)) {\n    return key;\n  }\n  return \"\";\n}\n\n/**\n * Search for a key in the collection that matches the search string.\n * Starts *at* `fromKey` (inclusive) and scans to the end, with no internal\n * wrap; the caller retries from the top to cover earlier items. Matching is\n * locale-aware via the supplied `collator`.\n */\nfunction getKeyForSearch<T>(\n  collection: Collection<T>,\n  search: string,\n  fromKey: Key | null,\n  collator: Intl.Collator,\n  isKeyDisabled?: (key: Key) => boolean,\n): Key | null {\n  // Collect all items in order\n  const items: CollectionNode<T>[] = [];\n  for (const item of collection) {\n    if (item.type === \"item\") {\n      items.push(item);\n    }\n  }\n\n  if (items.length === 0) return null;\n\n  // Find the starting index. Start *at* the currently focused item (inclusive),\n  // mirroring upstream ListKeyboardDelegate.getKeyForSearch (`key = fromKey ||\n  // getFirstKey()`): typing a prefix the focused item already matches keeps focus\n  // on it instead of advancing to the next match.\n  let startIndex = 0;\n  if (fromKey != null) {\n    const fromIndex = items.findIndex((item) => item.key === fromKey);\n    if (fromIndex !== -1) {\n      startIndex = fromIndex;\n    }\n  }\n\n  // Scan from startIndex to the end (no wrap). The caller retries from the top to\n  // cover items before the focused one, matching upstream useTypeSelect.\n  for (let index = startIndex; index < items.length; index++) {\n    const item = items[index];\n\n    // Skip disabled items\n    if (item.isDisabled || (isKeyDisabled && isKeyDisabled(item.key))) {\n      continue;\n    }\n\n    // Match the leading characters of the text value against the search string\n    // using locale-aware collation, mirroring upstream ListKeyboardDelegate\n    // (`collator.compare(textValue.slice(0, search.length), search) === 0`). The\n    // collator's `usage: 'search'` / `sensitivity: 'base'` makes this case- and\n    // diacritic-insensitive in a locale-aware way.\n    const textValue = item.textValue || \"\";\n    const substring = textValue.slice(0, search.length);\n    if (textValue && collator.compare(substring, search) === 0) {\n      return item.key;\n    }\n  }\n\n  return null;\n}\n\n/**\n * Creates typeahead/type-to-select functionality for a collection.\n *\n * @example\n * ```tsx\n * const { typeSelectProps } = createTypeSelect({\n *   collection: () => state.collection(),\n *   focusedKey: () => state.focusedKey(),\n *   onFocusedKeyChange: (key) => state.setFocusedKey(key),\n * });\n *\n * return <ul {...mergeProps(listBoxProps, typeSelectProps)}>...</ul>;\n * ```\n */\nexport function createTypeSelect<T>(options: TypeSelectOptions<T>): TypeSelectAria {\n  // Create mutable state object to persist across keystrokes\n  const state: TypeSelectState = {\n    search: \"\",\n    timeout: undefined,\n  };\n\n  // Locale-aware search collator, mirroring upstream useSelectableList's\n  // `useCollator({ usage: 'search', sensitivity: 'base' })`.\n  const collator = createCollator({ usage: \"search\", sensitivity: \"base\" });\n\n  // Append the search buffer, find a matching key (from the focused item,\n  // falling back to the whole list), focus it, and (re)start the debounce timer.\n  // Shared by both phase handlers below, mirroring the duplicated body in\n  // upstream useTypeSelect.\n  const searchAndFocus = (): Key | null => {\n    const collection = options.collection();\n    const currentKey = options.focusedKey();\n\n    // Prioritize items at/after the focused item, then retry from the top to\n    // cover earlier ones (upstream's two getKeyForSearch calls).\n    let key = getKeyForSearch(\n      collection,\n      state.search,\n      currentKey,\n      collator(),\n      options.isKeyDisabled,\n    );\n    if (key == null) {\n      key = getKeyForSearch(collection, state.search, null, collator(), options.isKeyDisabled);\n    }\n\n    if (key != null) {\n      options.onFocusedKeyChange(key);\n      options.onTypeSelect?.(key);\n    }\n\n    return key;\n  };\n\n  const restartDebounce = () => {\n    clearTimeout(state.timeout);\n    state.timeout = setTimeout(() => {\n      state.search = \"\";\n    }, TYPEAHEAD_DEBOUNCE_WAIT_MS);\n  };\n\n  // Capture phase: mid-search a Spacebar is part of the query, not a selection\n  // action, so we consume it before the collection's own keydown handler can act\n  // on it. Mirrors upstream useTypeSelect's onKeyDownCapture.\n  const onKeyDownCapture: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {\n    if (options.isDisabled) return;\n\n    if (state.search.length > 0 && e.key === \" \") {\n      e.preventDefault();\n      // Upstream guards this with `!('continuePropagation' in e) ||\n      // !e.isPropagationStopped()`. Our raw DOM KeyboardEvents never carry\n      // `continuePropagation`, so the guard always holds — stop unconditionally.\n      e.stopPropagation();\n      state.search += \" \";\n      searchAndFocus();\n      restartDebounce();\n    }\n  };\n\n  // Bubble phase: handles ordinary characters (and, in environments where the\n  // capture listener above is inert, mid-search Spacebar via its non-bailing\n  // branch). Mirrors upstream useTypeSelect's onKeyDown.\n  const onKeyDown: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {\n    if (options.isDisabled) return;\n\n    const character = getStringForKey(e.key);\n\n    // Ignore non-printable keys, Ctrl/Meta/Alt combos (Alt is excluded to match\n    // upstream — AltGr-only layouts shouldn't drive type-select), events from\n    // outside the element, and a leading Space (a common action key).\n    if (\n      !character ||\n      e.ctrlKey ||\n      e.metaKey ||\n      e.altKey ||\n      !e.currentTarget?.contains(e.target as HTMLElement) ||\n      (state.search.length === 0 && character === \" \")\n    ) {\n      return;\n    }\n\n    state.search += character;\n\n    const key = searchAndFocus();\n\n    if (key != null) {\n      e.preventDefault();\n      // Our raw DOM events never carry `continuePropagation`, so upstream's\n      // `if (!('continuePropagation' in e)) e.stopPropagation()` is unconditional.\n      e.stopPropagation();\n    } else {\n      // Nothing matched even after retrying from the top: type-to-select is done,\n      // so reset the buffer and let the key propagate normally.\n      state.search = \"\";\n      clearTimeout(state.timeout);\n      state.timeout = undefined;\n      return;\n    }\n\n    restartDebounce();\n  };\n\n  // Mirror upstream's unmount cleanup (a useEffect teardown) so a pending\n  // debounce timer never fires after the consumer is disposed.\n  onOwnedCleanup(() => {\n    clearTimeout(state.timeout);\n  });\n\n  return {\n    typeSelectProps: {\n      // Upstream binds `onKeyDownCapture` so Spacebar is handled before the\n      // collection's own keydown handler. In Solid a capture handler delivered\n      // through a `{...typeSelectProps}` spread is inert (it never fires), so the\n      // bubble-phase `onKeyDown` is the live path — and it also covers mid-search\n      // Space because its bail check only rejects a *leading* Space. True capture\n      // would need a ref-based addEventListener threaded through every consumer;\n      // A spread capture handler is inert in Solid; ticket #128 owns the real\n      // capture-phase binding.\n      onKeyDownCapture,\n      onKeyDown,\n    } as JSX.HTMLAttributes<HTMLElement>,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,6BAA6B;;;;;;AAiCnC,SAAS,gBAAgB,KAAqB;CAK5C,IAAI,IAAI,WAAW,KAAK,CAAC,UAAU,KAAK,GAAG,GACzC,OAAO;CAET,OAAO;AACT;;;;;;;AAQA,SAAS,gBACP,YACA,QACA,SACA,UACA,eACY;CAEZ,MAAM,QAA6B,CAAC;CACpC,KAAK,MAAM,QAAQ,YACjB,IAAI,KAAK,SAAS,QAChB,MAAM,KAAK,IAAI;CAInB,IAAI,MAAM,WAAW,GAAG,OAAO;CAM/B,IAAI,aAAa;CACjB,IAAI,WAAW,MAAM;EACnB,MAAM,YAAY,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO;EAChE,IAAI,cAAc,IAChB,aAAa;CAEjB;CAIA,KAAK,IAAI,QAAQ,YAAY,QAAQ,MAAM,QAAQ,SAAS;EAC1D,MAAM,OAAO,MAAM;EAGnB,IAAI,KAAK,cAAe,iBAAiB,cAAc,KAAK,GAAG,GAC7D;EAQF,MAAM,YAAY,KAAK,aAAa;EACpC,MAAM,YAAY,UAAU,MAAM,GAAG,OAAO,MAAM;EAClD,IAAI,aAAa,SAAS,QAAQ,WAAW,MAAM,MAAM,GACvD,OAAO,KAAK;CAEhB;CAEA,OAAO;AACT;;;;;;;;;;;;;;;AAgBA,SAAgB,iBAAoB,SAA+C;CAEjF,MAAM,QAAyB;EAC7B,QAAQ;EACR,SAAS,KAAA;CACX;CAIA,MAAM,WAAW,eAAe;EAAE,OAAO;EAAU,aAAa;CAAO,CAAC;CAMxE,MAAM,uBAAmC;EACvC,MAAM,aAAa,QAAQ,WAAW;EACtC,MAAM,aAAa,QAAQ,WAAW;EAItC,IAAI,MAAM,gBACR,YACA,MAAM,QACN,YACA,SAAS,GACT,QAAQ,aACV;EACA,IAAI,OAAO,MACT,MAAM,gBAAgB,YAAY,MAAM,QAAQ,MAAM,SAAS,GAAG,QAAQ,aAAa;EAGzF,IAAI,OAAO,MAAM;GACf,QAAQ,mBAAmB,GAAG;GAC9B,QAAQ,eAAe,GAAG;EAC5B;EAEA,OAAO;CACT;CAEA,MAAM,wBAAwB;EAC5B,aAAa,MAAM,OAAO;EAC1B,MAAM,UAAU,iBAAiB;GAC/B,MAAM,SAAS;EACjB,GAAG,0BAA0B;CAC/B;CAKA,MAAM,oBAAkE,MAAM;EAC5E,IAAI,QAAQ,YAAY;EAExB,IAAI,MAAM,OAAO,SAAS,KAAK,EAAE,QAAQ,KAAK;GAC5C,EAAE,eAAe;GAIjB,EAAE,gBAAgB;GAClB,MAAM,UAAU;GAChB,eAAe;GACf,gBAAgB;EAClB;CACF;CAKA,MAAM,aAA2D,MAAM;EACrE,IAAI,QAAQ,YAAY;EAExB,MAAM,YAAY,gBAAgB,EAAE,GAAG;EAKvC,IACE,CAAC,aACD,EAAE,WACF,EAAE,WACF,EAAE,UACF,CAAC,EAAE,eAAe,SAAS,EAAE,MAAqB,KACjD,MAAM,OAAO,WAAW,KAAK,cAAc,KAE5C;EAGF,MAAM,UAAU;EAIhB,IAFY,eAEN,KAAK,MAAM;GACf,EAAE,eAAe;GAGjB,EAAE,gBAAgB;EACpB,OAAO;GAGL,MAAM,SAAS;GACf,aAAa,MAAM,OAAO;GAC1B,MAAM,UAAU,KAAA;GAChB;EACF;EAEA,gBAAgB;CAClB;CAIA,qBAAqB;EACnB,aAAa,MAAM,OAAO;CAC5B,CAAC;CAED,OAAO,EACL,iBAAiB;EASf;EACA;CACF,EACF;AACF"}

package/dist/_chunk/createTypeSelect.jsx

@@ -1,5 +1,17 @@
+/*
+* 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/selection/useTypeSelect.ts
+import { t as onOwnedCleanup } from "./owner.jsx";
 import { t as createCollator } from "./createCollator.jsx";
-import { onCleanup } from "solid-js";
 //#region src/selection/createTypeSelect.ts
 /**
 * createTypeSelect - Handles typeahead interactions with collections.
@@ -98,7 +110,7 @@ function createTypeSelect(options) {
 	const onKeyDown = (e) => {
 		if (options.isDisabled) return;
 		const character = getStringForKey(e.key);
-		if (!character || e.ctrlKey || e.metaKey || e.altKey || !e.currentTarget.contains(e.target) || state.search.length === 0 && character === " ") return;
+		if (!character || e.ctrlKey || e.metaKey || e.altKey || !e.currentTarget?.contains(e.target) || state.search.length === 0 && character === " ") return;
 		state.search += character;
 		if (searchAndFocus() != null) {
 			e.preventDefault();
@@ -111,7 +123,7 @@ function createTypeSelect(options) {
 		}
 		restartDebounce();
 	};
-	onCleanup(() => {
+	onOwnedCleanup(() => {
 		clearTimeout(state.timeout);
 	});
 	return { typeSelectProps: {

package/dist/_chunk/createTypeSelect.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"createTypeSelect.jsx","names":[],"sources":["../../src/selection/createTypeSelect.ts"],"sourcesContent":["/**\n * createTypeSelect - Handles typeahead interactions with collections.\n * Based on @react-aria/selection useTypeSelect.\n *\n * Allows users to navigate to items by typing characters that match\n * item text values. Supports multi-character search with debouncing.\n */\n\nimport { onCleanup } from \"solid-js\";\nimport type { JSX, Accessor } from \"solid-js\";\nimport type { Key, Collection, CollectionNode } from \"@proyecto-viviana/solid-stately\";\nimport { createCollator } from \"../i18n/createCollator\";\n\n/**\n * Controls how long to wait before clearing the typeahead buffer.\n */\nconst TYPEAHEAD_DEBOUNCE_WAIT_MS = 1000; // 1 second\n\nexport interface TypeSelectOptions<T> {\n  /** The collection to search through. */\n  collection: Accessor<Collection<T>>;\n  /** The currently focused key. */\n  focusedKey: Accessor<Key | null>;\n  /** Callback to set the focused key when a match is found. */\n  onFocusedKeyChange: (key: Key) => void;\n  /** Callback when an item is focused by typing. */\n  onTypeSelect?: (key: Key) => void;\n  /** Function to check if a key is disabled. */\n  isKeyDisabled?: (key: Key) => boolean;\n  /** Whether type-to-select is disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface TypeSelectAria {\n  /** Props to spread on the collection element. */\n  typeSelectProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n// Internal state for tracking the search buffer\ninterface TypeSelectState {\n  search: string;\n  timeout: ReturnType<typeof setTimeout> | undefined;\n}\n\n/**\n * Get a printable character from a key event.\n * Returns the character if it's a single printable character,\n * or empty string for non-printable keys.\n */\nfunction getStringForKey(key: string): string {\n  // If the key is of length 1, it is an ASCII value.\n  // Otherwise, if there are no ASCII characters in the key name,\n  // it is a Unicode character.\n  // See https://www.w3.org/TR/uievents-key/\n  if (key.length === 1 || !/^[A-Z]/i.test(key)) {\n    return key;\n  }\n  return \"\";\n}\n\n/**\n * Search for a key in the collection that matches the search string.\n * Starts *at* `fromKey` (inclusive) and scans to the end, with no internal\n * wrap; the caller retries from the top to cover earlier items. Matching is\n * locale-aware via the supplied `collator`.\n */\nfunction getKeyForSearch<T>(\n  collection: Collection<T>,\n  search: string,\n  fromKey: Key | null,\n  collator: Intl.Collator,\n  isKeyDisabled?: (key: Key) => boolean,\n): Key | null {\n  // Collect all items in order\n  const items: CollectionNode<T>[] = [];\n  for (const item of collection) {\n    if (item.type === \"item\") {\n      items.push(item);\n    }\n  }\n\n  if (items.length === 0) return null;\n\n  // Find the starting index. Start *at* the currently focused item (inclusive),\n  // mirroring upstream ListKeyboardDelegate.getKeyForSearch (`key = fromKey ||\n  // getFirstKey()`): typing a prefix the focused item already matches keeps focus\n  // on it instead of advancing to the next match.\n  let startIndex = 0;\n  if (fromKey != null) {\n    const fromIndex = items.findIndex((item) => item.key === fromKey);\n    if (fromIndex !== -1) {\n      startIndex = fromIndex;\n    }\n  }\n\n  // Scan from startIndex to the end (no wrap). The caller retries from the top to\n  // cover items before the focused one, matching upstream useTypeSelect.\n  for (let index = startIndex; index < items.length; index++) {\n    const item = items[index];\n\n    // Skip disabled items\n    if (item.isDisabled || (isKeyDisabled && isKeyDisabled(item.key))) {\n      continue;\n    }\n\n    // Match the leading characters of the text value against the search string\n    // using locale-aware collation, mirroring upstream ListKeyboardDelegate\n    // (`collator.compare(textValue.slice(0, search.length), search) === 0`). The\n    // collator's `usage: 'search'` / `sensitivity: 'base'` makes this case- and\n    // diacritic-insensitive in a locale-aware way.\n    const textValue = item.textValue || \"\";\n    const substring = textValue.slice(0, search.length);\n    if (textValue && collator.compare(substring, search) === 0) {\n      return item.key;\n    }\n  }\n\n  return null;\n}\n\n/**\n * Creates typeahead/type-to-select functionality for a collection.\n *\n * @example\n * ```tsx\n * const { typeSelectProps } = createTypeSelect({\n *   collection: () => state.collection(),\n *   focusedKey: () => state.focusedKey(),\n *   onFocusedKeyChange: (key) => state.setFocusedKey(key),\n * });\n *\n * return <ul {...mergeProps(listBoxProps, typeSelectProps)}>...</ul>;\n * ```\n */\nexport function createTypeSelect<T>(options: TypeSelectOptions<T>): TypeSelectAria {\n  // Create mutable state object to persist across keystrokes\n  const state: TypeSelectState = {\n    search: \"\",\n    timeout: undefined,\n  };\n\n  // Locale-aware search collator, mirroring upstream useSelectableList's\n  // `useCollator({ usage: 'search', sensitivity: 'base' })`.\n  const collator = createCollator({ usage: \"search\", sensitivity: \"base\" });\n\n  // Append the search buffer, find a matching key (from the focused item,\n  // falling back to the whole list), focus it, and (re)start the debounce timer.\n  // Shared by both phase handlers below, mirroring the duplicated body in\n  // upstream useTypeSelect.\n  const searchAndFocus = (): Key | null => {\n    const collection = options.collection();\n    const currentKey = options.focusedKey();\n\n    // Prioritize items at/after the focused item, then retry from the top to\n    // cover earlier ones (upstream's two getKeyForSearch calls).\n    let key = getKeyForSearch(\n      collection,\n      state.search,\n      currentKey,\n      collator(),\n      options.isKeyDisabled,\n    );\n    if (key == null) {\n      key = getKeyForSearch(collection, state.search, null, collator(), options.isKeyDisabled);\n    }\n\n    if (key != null) {\n      options.onFocusedKeyChange(key);\n      options.onTypeSelect?.(key);\n    }\n\n    return key;\n  };\n\n  const restartDebounce = () => {\n    clearTimeout(state.timeout);\n    state.timeout = setTimeout(() => {\n      state.search = \"\";\n    }, TYPEAHEAD_DEBOUNCE_WAIT_MS);\n  };\n\n  // Capture phase: mid-search a Spacebar is part of the query, not a selection\n  // action, so we consume it before the collection's own keydown handler can act\n  // on it. Mirrors upstream useTypeSelect's onKeyDownCapture.\n  const onKeyDownCapture: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {\n    if (options.isDisabled) return;\n\n    if (state.search.length > 0 && e.key === \" \") {\n      e.preventDefault();\n      // Upstream guards this with `!('continuePropagation' in e) ||\n      // !e.isPropagationStopped()`. Our raw DOM KeyboardEvents never carry\n      // `continuePropagation`, so the guard always holds — stop unconditionally.\n      e.stopPropagation();\n      state.search += \" \";\n      searchAndFocus();\n      restartDebounce();\n    }\n  };\n\n  // Bubble phase: handles ordinary characters (and, in environments where the\n  // capture listener above is inert, mid-search Spacebar via its non-bailing\n  // branch). Mirrors upstream useTypeSelect's onKeyDown.\n  const onKeyDown: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {\n    if (options.isDisabled) return;\n\n    const character = getStringForKey(e.key);\n\n    // Ignore non-printable keys, Ctrl/Meta/Alt combos (Alt is excluded to match\n    // upstream — AltGr-only layouts shouldn't drive type-select), events from\n    // outside the element, and a leading Space (a common action key).\n    if (\n      !character ||\n      e.ctrlKey ||\n      e.metaKey ||\n      e.altKey ||\n      !e.currentTarget.contains(e.target as HTMLElement) ||\n      (state.search.length === 0 && character === \" \")\n    ) {\n      return;\n    }\n\n    state.search += character;\n\n    const key = searchAndFocus();\n\n    if (key != null) {\n      e.preventDefault();\n      // Our raw DOM events never carry `continuePropagation`, so upstream's\n      // `if (!('continuePropagation' in e)) e.stopPropagation()` is unconditional.\n      e.stopPropagation();\n    } else {\n      // Nothing matched even after retrying from the top: type-to-select is done,\n      // so reset the buffer and let the key propagate normally.\n      state.search = \"\";\n      clearTimeout(state.timeout);\n      state.timeout = undefined;\n      return;\n    }\n\n    restartDebounce();\n  };\n\n  // Mirror upstream's unmount cleanup (a useEffect teardown) so a pending\n  // debounce timer never fires after the consumer is disposed.\n  onCleanup(() => {\n    clearTimeout(state.timeout);\n  });\n\n  return {\n    typeSelectProps: {\n      // Upstream binds `onKeyDownCapture` so Spacebar is handled before the\n      // collection's own keydown handler. In Solid a capture handler delivered\n      // through a `{...typeSelectProps}` spread is inert (it never fires), so the\n      // bubble-phase `onKeyDown` is the live path — and it also covers mid-search\n      // Space because its bail check only rejects a *leading* Space. True capture\n      // would need a ref-based addEventListener threaded through every consumer;\n      // see the typeahead follow-up in upstream-sync.md.\n      onKeyDownCapture,\n      onKeyDown,\n    } as JSX.HTMLAttributes<HTMLElement>,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,6BAA6B;;;;;;AAiCnC,SAAS,gBAAgB,KAAqB;CAK5C,IAAI,IAAI,WAAW,KAAK,CAAC,UAAU,KAAK,GAAG,GACzC,OAAO;CAET,OAAO;AACT;;;;;;;AAQA,SAAS,gBACP,YACA,QACA,SACA,UACA,eACY;CAEZ,MAAM,QAA6B,CAAC;CACpC,KAAK,MAAM,QAAQ,YACjB,IAAI,KAAK,SAAS,QAChB,MAAM,KAAK,IAAI;CAInB,IAAI,MAAM,WAAW,GAAG,OAAO;CAM/B,IAAI,aAAa;CACjB,IAAI,WAAW,MAAM;EACnB,MAAM,YAAY,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO;EAChE,IAAI,cAAc,IAChB,aAAa;CAEjB;CAIA,KAAK,IAAI,QAAQ,YAAY,QAAQ,MAAM,QAAQ,SAAS;EAC1D,MAAM,OAAO,MAAM;EAGnB,IAAI,KAAK,cAAe,iBAAiB,cAAc,KAAK,GAAG,GAC7D;EAQF,MAAM,YAAY,KAAK,aAAa;EACpC,MAAM,YAAY,UAAU,MAAM,GAAG,OAAO,MAAM;EAClD,IAAI,aAAa,SAAS,QAAQ,WAAW,MAAM,MAAM,GACvD,OAAO,KAAK;CAEhB;CAEA,OAAO;AACT;;;;;;;;;;;;;;;AAgBA,SAAgB,iBAAoB,SAA+C;CAEjF,MAAM,QAAyB;EAC7B,QAAQ;EACR,SAAS,KAAA;CACX;CAIA,MAAM,WAAW,eAAe;EAAE,OAAO;EAAU,aAAa;CAAO,CAAC;CAMxE,MAAM,uBAAmC;EACvC,MAAM,aAAa,QAAQ,WAAW;EACtC,MAAM,aAAa,QAAQ,WAAW;EAItC,IAAI,MAAM,gBACR,YACA,MAAM,QACN,YACA,SAAS,GACT,QAAQ,aACV;EACA,IAAI,OAAO,MACT,MAAM,gBAAgB,YAAY,MAAM,QAAQ,MAAM,SAAS,GAAG,QAAQ,aAAa;EAGzF,IAAI,OAAO,MAAM;GACf,QAAQ,mBAAmB,GAAG;GAC9B,QAAQ,eAAe,GAAG;EAC5B;EAEA,OAAO;CACT;CAEA,MAAM,wBAAwB;EAC5B,aAAa,MAAM,OAAO;EAC1B,MAAM,UAAU,iBAAiB;GAC/B,MAAM,SAAS;EACjB,GAAG,0BAA0B;CAC/B;CAKA,MAAM,oBAAkE,MAAM;EAC5E,IAAI,QAAQ,YAAY;EAExB,IAAI,MAAM,OAAO,SAAS,KAAK,EAAE,QAAQ,KAAK;GAC5C,EAAE,eAAe;GAIjB,EAAE,gBAAgB;GAClB,MAAM,UAAU;GAChB,eAAe;GACf,gBAAgB;EAClB;CACF;CAKA,MAAM,aAA2D,MAAM;EACrE,IAAI,QAAQ,YAAY;EAExB,MAAM,YAAY,gBAAgB,EAAE,GAAG;EAKvC,IACE,CAAC,aACD,EAAE,WACF,EAAE,WACF,EAAE,UACF,CAAC,EAAE,cAAc,SAAS,EAAE,MAAqB,KAChD,MAAM,OAAO,WAAW,KAAK,cAAc,KAE5C;EAGF,MAAM,UAAU;EAIhB,IAFY,eAEN,KAAK,MAAM;GACf,EAAE,eAAe;GAGjB,EAAE,gBAAgB;EACpB,OAAO;GAGL,MAAM,SAAS;GACf,aAAa,MAAM,OAAO;GAC1B,MAAM,UAAU,KAAA;GAChB;EACF;EAEA,gBAAgB;CAClB;CAIA,gBAAgB;EACd,aAAa,MAAM,OAAO;CAC5B,CAAC;CAED,OAAO,EACL,iBAAiB;EAQf;EACA;CACF,EACF;AACF"}
+{"version":3,"file":"createTypeSelect.jsx","names":[],"sources":["../../src/selection/createTypeSelect.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/selection/useTypeSelect.ts\n\n/**\n * createTypeSelect - Handles typeahead interactions with collections.\n * Based on @react-aria/selection useTypeSelect.\n *\n * Allows users to navigate to items by typing characters that match\n * item text values. Supports multi-character search with debouncing.\n */\n\nimport { onOwnedCleanup } from \"../utils/owner\";\nimport type { Accessor } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport type { Key, Collection, CollectionNode } from \"@proyecto-viviana/solid-stately\";\nimport { createCollator } from \"../i18n/createCollator\";\n\n/**\n * Controls how long to wait before clearing the typeahead buffer.\n */\nconst TYPEAHEAD_DEBOUNCE_WAIT_MS = 1000; // 1 second\n\nexport interface TypeSelectOptions<T> {\n  /** The collection to search through. */\n  collection: Accessor<Collection<T>>;\n  /** The currently focused key. */\n  focusedKey: Accessor<Key | null>;\n  /** Callback to set the focused key when a match is found. */\n  onFocusedKeyChange: (key: Key) => void;\n  /** Callback when an item is focused by typing. */\n  onTypeSelect?: (key: Key) => void;\n  /** Function to check if a key is disabled. */\n  isKeyDisabled?: (key: Key) => boolean;\n  /** Whether type-to-select is disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface TypeSelectAria {\n  /** Props to spread on the collection element. */\n  typeSelectProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n// Internal state for tracking the search buffer\ninterface TypeSelectState {\n  search: string;\n  timeout: ReturnType<typeof setTimeout> | undefined;\n}\n\n/**\n * Get a printable character from a key event.\n * Returns the character if it's a single printable character,\n * or empty string for non-printable keys.\n */\nfunction getStringForKey(key: string): string {\n  // If the key is of length 1, it is an ASCII value.\n  // Otherwise, if there are no ASCII characters in the key name,\n  // it is a Unicode character.\n  // See https://www.w3.org/TR/uievents-key/\n  if (key.length === 1 || !/^[A-Z]/i.test(key)) {\n    return key;\n  }\n  return \"\";\n}\n\n/**\n * Search for a key in the collection that matches the search string.\n * Starts *at* `fromKey` (inclusive) and scans to the end, with no internal\n * wrap; the caller retries from the top to cover earlier items. Matching is\n * locale-aware via the supplied `collator`.\n */\nfunction getKeyForSearch<T>(\n  collection: Collection<T>,\n  search: string,\n  fromKey: Key | null,\n  collator: Intl.Collator,\n  isKeyDisabled?: (key: Key) => boolean,\n): Key | null {\n  // Collect all items in order\n  const items: CollectionNode<T>[] = [];\n  for (const item of collection) {\n    if (item.type === \"item\") {\n      items.push(item);\n    }\n  }\n\n  if (items.length === 0) return null;\n\n  // Find the starting index. Start *at* the currently focused item (inclusive),\n  // mirroring upstream ListKeyboardDelegate.getKeyForSearch (`key = fromKey ||\n  // getFirstKey()`): typing a prefix the focused item already matches keeps focus\n  // on it instead of advancing to the next match.\n  let startIndex = 0;\n  if (fromKey != null) {\n    const fromIndex = items.findIndex((item) => item.key === fromKey);\n    if (fromIndex !== -1) {\n      startIndex = fromIndex;\n    }\n  }\n\n  // Scan from startIndex to the end (no wrap). The caller retries from the top to\n  // cover items before the focused one, matching upstream useTypeSelect.\n  for (let index = startIndex; index < items.length; index++) {\n    const item = items[index];\n\n    // Skip disabled items\n    if (item.isDisabled || (isKeyDisabled && isKeyDisabled(item.key))) {\n      continue;\n    }\n\n    // Match the leading characters of the text value against the search string\n    // using locale-aware collation, mirroring upstream ListKeyboardDelegate\n    // (`collator.compare(textValue.slice(0, search.length), search) === 0`). The\n    // collator's `usage: 'search'` / `sensitivity: 'base'` makes this case- and\n    // diacritic-insensitive in a locale-aware way.\n    const textValue = item.textValue || \"\";\n    const substring = textValue.slice(0, search.length);\n    if (textValue && collator.compare(substring, search) === 0) {\n      return item.key;\n    }\n  }\n\n  return null;\n}\n\n/**\n * Creates typeahead/type-to-select functionality for a collection.\n *\n * @example\n * ```tsx\n * const { typeSelectProps } = createTypeSelect({\n *   collection: () => state.collection(),\n *   focusedKey: () => state.focusedKey(),\n *   onFocusedKeyChange: (key) => state.setFocusedKey(key),\n * });\n *\n * return <ul {...mergeProps(listBoxProps, typeSelectProps)}>...</ul>;\n * ```\n */\nexport function createTypeSelect<T>(options: TypeSelectOptions<T>): TypeSelectAria {\n  // Create mutable state object to persist across keystrokes\n  const state: TypeSelectState = {\n    search: \"\",\n    timeout: undefined,\n  };\n\n  // Locale-aware search collator, mirroring upstream useSelectableList's\n  // `useCollator({ usage: 'search', sensitivity: 'base' })`.\n  const collator = createCollator({ usage: \"search\", sensitivity: \"base\" });\n\n  // Append the search buffer, find a matching key (from the focused item,\n  // falling back to the whole list), focus it, and (re)start the debounce timer.\n  // Shared by both phase handlers below, mirroring the duplicated body in\n  // upstream useTypeSelect.\n  const searchAndFocus = (): Key | null => {\n    const collection = options.collection();\n    const currentKey = options.focusedKey();\n\n    // Prioritize items at/after the focused item, then retry from the top to\n    // cover earlier ones (upstream's two getKeyForSearch calls).\n    let key = getKeyForSearch(\n      collection,\n      state.search,\n      currentKey,\n      collator(),\n      options.isKeyDisabled,\n    );\n    if (key == null) {\n      key = getKeyForSearch(collection, state.search, null, collator(), options.isKeyDisabled);\n    }\n\n    if (key != null) {\n      options.onFocusedKeyChange(key);\n      options.onTypeSelect?.(key);\n    }\n\n    return key;\n  };\n\n  const restartDebounce = () => {\n    clearTimeout(state.timeout);\n    state.timeout = setTimeout(() => {\n      state.search = \"\";\n    }, TYPEAHEAD_DEBOUNCE_WAIT_MS);\n  };\n\n  // Capture phase: mid-search a Spacebar is part of the query, not a selection\n  // action, so we consume it before the collection's own keydown handler can act\n  // on it. Mirrors upstream useTypeSelect's onKeyDownCapture.\n  const onKeyDownCapture: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {\n    if (options.isDisabled) return;\n\n    if (state.search.length > 0 && e.key === \" \") {\n      e.preventDefault();\n      // Upstream guards this with `!('continuePropagation' in e) ||\n      // !e.isPropagationStopped()`. Our raw DOM KeyboardEvents never carry\n      // `continuePropagation`, so the guard always holds — stop unconditionally.\n      e.stopPropagation();\n      state.search += \" \";\n      searchAndFocus();\n      restartDebounce();\n    }\n  };\n\n  // Bubble phase: handles ordinary characters (and, in environments where the\n  // capture listener above is inert, mid-search Spacebar via its non-bailing\n  // branch). Mirrors upstream useTypeSelect's onKeyDown.\n  const onKeyDown: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {\n    if (options.isDisabled) return;\n\n    const character = getStringForKey(e.key);\n\n    // Ignore non-printable keys, Ctrl/Meta/Alt combos (Alt is excluded to match\n    // upstream — AltGr-only layouts shouldn't drive type-select), events from\n    // outside the element, and a leading Space (a common action key).\n    if (\n      !character ||\n      e.ctrlKey ||\n      e.metaKey ||\n      e.altKey ||\n      !e.currentTarget?.contains(e.target as HTMLElement) ||\n      (state.search.length === 0 && character === \" \")\n    ) {\n      return;\n    }\n\n    state.search += character;\n\n    const key = searchAndFocus();\n\n    if (key != null) {\n      e.preventDefault();\n      // Our raw DOM events never carry `continuePropagation`, so upstream's\n      // `if (!('continuePropagation' in e)) e.stopPropagation()` is unconditional.\n      e.stopPropagation();\n    } else {\n      // Nothing matched even after retrying from the top: type-to-select is done,\n      // so reset the buffer and let the key propagate normally.\n      state.search = \"\";\n      clearTimeout(state.timeout);\n      state.timeout = undefined;\n      return;\n    }\n\n    restartDebounce();\n  };\n\n  // Mirror upstream's unmount cleanup (a useEffect teardown) so a pending\n  // debounce timer never fires after the consumer is disposed.\n  onOwnedCleanup(() => {\n    clearTimeout(state.timeout);\n  });\n\n  return {\n    typeSelectProps: {\n      // Upstream binds `onKeyDownCapture` so Spacebar is handled before the\n      // collection's own keydown handler. In Solid a capture handler delivered\n      // through a `{...typeSelectProps}` spread is inert (it never fires), so the\n      // bubble-phase `onKeyDown` is the live path — and it also covers mid-search\n      // Space because its bail check only rejects a *leading* Space. True capture\n      // would need a ref-based addEventListener threaded through every consumer;\n      // A spread capture handler is inert in Solid; ticket #128 owns the real\n      // capture-phase binding.\n      onKeyDownCapture,\n      onKeyDown,\n    } as JSX.HTMLAttributes<HTMLElement>,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,6BAA6B;;;;;;AAiCnC,SAAS,gBAAgB,KAAqB;CAK5C,IAAI,IAAI,WAAW,KAAK,CAAC,UAAU,KAAK,GAAG,GACzC,OAAO;CAET,OAAO;AACT;;;;;;;AAQA,SAAS,gBACP,YACA,QACA,SACA,UACA,eACY;CAEZ,MAAM,QAA6B,CAAC;CACpC,KAAK,MAAM,QAAQ,YACjB,IAAI,KAAK,SAAS,QAChB,MAAM,KAAK,IAAI;CAInB,IAAI,MAAM,WAAW,GAAG,OAAO;CAM/B,IAAI,aAAa;CACjB,IAAI,WAAW,MAAM;EACnB,MAAM,YAAY,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO;EAChE,IAAI,cAAc,IAChB,aAAa;CAEjB;CAIA,KAAK,IAAI,QAAQ,YAAY,QAAQ,MAAM,QAAQ,SAAS;EAC1D,MAAM,OAAO,MAAM;EAGnB,IAAI,KAAK,cAAe,iBAAiB,cAAc,KAAK,GAAG,GAC7D;EAQF,MAAM,YAAY,KAAK,aAAa;EACpC,MAAM,YAAY,UAAU,MAAM,GAAG,OAAO,MAAM;EAClD,IAAI,aAAa,SAAS,QAAQ,WAAW,MAAM,MAAM,GACvD,OAAO,KAAK;CAEhB;CAEA,OAAO;AACT;;;;;;;;;;;;;;;AAgBA,SAAgB,iBAAoB,SAA+C;CAEjF,MAAM,QAAyB;EAC7B,QAAQ;EACR,SAAS,KAAA;CACX;CAIA,MAAM,WAAW,eAAe;EAAE,OAAO;EAAU,aAAa;CAAO,CAAC;CAMxE,MAAM,uBAAmC;EACvC,MAAM,aAAa,QAAQ,WAAW;EACtC,MAAM,aAAa,QAAQ,WAAW;EAItC,IAAI,MAAM,gBACR,YACA,MAAM,QACN,YACA,SAAS,GACT,QAAQ,aACV;EACA,IAAI,OAAO,MACT,MAAM,gBAAgB,YAAY,MAAM,QAAQ,MAAM,SAAS,GAAG,QAAQ,aAAa;EAGzF,IAAI,OAAO,MAAM;GACf,QAAQ,mBAAmB,GAAG;GAC9B,QAAQ,eAAe,GAAG;EAC5B;EAEA,OAAO;CACT;CAEA,MAAM,wBAAwB;EAC5B,aAAa,MAAM,OAAO;EAC1B,MAAM,UAAU,iBAAiB;GAC/B,MAAM,SAAS;EACjB,GAAG,0BAA0B;CAC/B;CAKA,MAAM,oBAAkE,MAAM;EAC5E,IAAI,QAAQ,YAAY;EAExB,IAAI,MAAM,OAAO,SAAS,KAAK,EAAE,QAAQ,KAAK;GAC5C,EAAE,eAAe;GAIjB,EAAE,gBAAgB;GAClB,MAAM,UAAU;GAChB,eAAe;GACf,gBAAgB;EAClB;CACF;CAKA,MAAM,aAA2D,MAAM;EACrE,IAAI,QAAQ,YAAY;EAExB,MAAM,YAAY,gBAAgB,EAAE,GAAG;EAKvC,IACE,CAAC,aACD,EAAE,WACF,EAAE,WACF,EAAE,UACF,CAAC,EAAE,eAAe,SAAS,EAAE,MAAqB,KACjD,MAAM,OAAO,WAAW,KAAK,cAAc,KAE5C;EAGF,MAAM,UAAU;EAIhB,IAFY,eAEN,KAAK,MAAM;GACf,EAAE,eAAe;GAGjB,EAAE,gBAAgB;EACpB,OAAO;GAGL,MAAM,SAAS;GACf,aAAa,MAAM,OAAO;GAC1B,MAAM,UAAU,KAAA;GAChB;EACF;EAEA,gBAAgB;CAClB;CAIA,qBAAqB;EACnB,aAAa,MAAM,OAAO;CAC5B,CAAC;CAED,OAAO,EACL,iBAAiB;EASf;EACA;CACF,EACF;AACF"}

package/dist/_chunk/{visually-hidden.js → createVisuallyHidden.js}

@@ -1,4 +1,16 @@
-import { i as mergeProps$1 } from "./env.js";
+/*
+* 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/visually-hidden/VisuallyHidden.tsx
+import { t as mergeProps } from "./mergeProps.js";
 import { t as access } from "./reactivity.js";
 import { t as createFocusWithin } from "./createFocusWithin.js";
 import { createMemo, createSignal } from "solid-js";
@@ -9,7 +21,7 @@ import { createMemo, createSignal } from "solid-js";
 * Provides styles and props to visually hide content while keeping it
 * accessible to screen readers.
 *
-* Port of react-aria's useVisuallyHidden.
+* Ported from packages/react-aria/src/visually-hidden/VisuallyHidden.tsx.
 */
 /**
 * CSS styles that visually hide an element while keeping it accessible.
@@ -78,7 +90,7 @@ function createVisuallyHidden(props = {}) {
 		};
 		else return visuallyHiddenStyles;
 	});
-	return { visuallyHiddenProps: createMemo(() => ({ ...mergeProps$1(focusWithinProps, isFocusable() ? {
+	return { visuallyHiddenProps: createMemo(() => ({ ...mergeProps(focusWithinProps, isFocusable() ? {
 		onFocusIn: () => setIsFocused(true),
 		onFocusOut: (e) => {
 			const currentTarget = e.currentTarget;
@@ -90,4 +102,4 @@ function createVisuallyHidden(props = {}) {
 //#endregion
 export { visuallyHiddenStyles as n, createVisuallyHidden as t };
 
-//# sourceMappingURL=visually-hidden.js.map
+//# sourceMappingURL=createVisuallyHidden.js.map

package/dist/_chunk/createVisuallyHidden.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createVisuallyHidden.js","names":[],"sources":["../../src/visually-hidden/createVisuallyHidden.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/visually-hidden/VisuallyHidden.tsx\n\n/**\n * createVisuallyHidden hook for solidaria\n *\n * Provides styles and props to visually hide content while keeping it\n * accessible to screen readers.\n *\n * Ported from packages/react-aria/src/visually-hidden/VisuallyHidden.tsx.\n */\n\nimport { createMemo, createSignal } from \"solid-js\";\nimport type { Accessor } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { createFocusWithin } from \"../interactions/createFocusWithin\";\nimport { access, type MaybeAccessor } from \"../utils\";\nimport { mergeProps } from \"../utils/mergeProps\";\n\nexport interface AriaVisuallyHiddenProps {\n  /** Inline styles to merge with the visually hidden styles. */\n  style?: JSX.CSSProperties;\n  /** Whether the element should become visible when focused (e.g., skip links). */\n  isFocusable?: boolean;\n}\n\nexport interface VisuallyHiddenAria {\n  /** Props to spread on the visually hidden element. */\n  visuallyHiddenProps: Accessor<JSX.HTMLAttributes<HTMLElement>>;\n}\n\n/**\n * CSS styles that visually hide an element while keeping it accessible.\n * These styles ensure the element is read by screen readers but not visible on screen.\n */\nexport const visuallyHiddenStyles: JSX.CSSProperties = {\n  border: \"0\",\n  clip: \"rect(0 0 0 0)\",\n  \"clip-path\": \"inset(50%)\",\n  height: \"1px\",\n  margin: \"-1px\",\n  overflow: \"hidden\",\n  padding: \"0\",\n  position: \"absolute\",\n  width: \"1px\",\n  \"white-space\": \"nowrap\",\n};\n\n/**\n * Provides props for an element that hides its children visually\n * but keeps content visible to assistive technology.\n *\n * @example\n * ```tsx\n * function SkipLink() {\n *   let ref: HTMLAnchorElement | undefined;\n *   const { visuallyHiddenProps } = createVisuallyHidden({ isFocusable: true });\n *\n *   return (\n *     <a\n *       ref={ref}\n *       href=\"#main-content\"\n *       {...visuallyHiddenProps()}\n *     >\n *       Skip to main content\n *     </a>\n *   );\n * }\n *\n * // For content that should always be hidden\n * function ScreenReaderOnly(props: ParentProps) {\n *   const { visuallyHiddenProps } = createVisuallyHidden();\n *\n *   return (\n *     <span {...visuallyHiddenProps()}>\n *       {props.children}\n *     </span>\n *   );\n * }\n * ```\n */\nexport function createVisuallyHidden(\n  props: MaybeAccessor<AriaVisuallyHiddenProps> = {},\n): VisuallyHiddenAria {\n  const [isFocused, setIsFocused] = createSignal(false);\n\n  const isFocusable = () => access(props).isFocusable ?? false;\n  const style = () => access(props).style;\n\n  // Track focus within for focusable visually hidden elements\n  const { focusWithinProps } = createFocusWithin({\n    get isDisabled() {\n      return !isFocusable();\n    },\n    onFocusWithinChange: (val: boolean) => setIsFocused(val),\n  });\n\n  // Compute combined styles\n  const combinedStyles = createMemo<JSX.CSSProperties | undefined>(() => {\n    if (isFocused()) {\n      // If focused, show the element (for skip links, etc.)\n      return style();\n    } else if (style()) {\n      return { ...visuallyHiddenStyles, ...style() };\n    } else {\n      return visuallyHiddenStyles;\n    }\n  });\n\n  const visuallyHiddenProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    ...(mergeProps(\n      focusWithinProps as unknown as Record<string, unknown>,\n      isFocusable()\n        ? {\n            onFocusIn: () => setIsFocused(true),\n            onFocusOut: (e: FocusEvent) => {\n              const currentTarget = e.currentTarget as Element | null;\n              const relatedTarget = e.relatedTarget as Element | null;\n              if (currentTarget && !currentTarget.contains(relatedTarget)) {\n                setIsFocused(false);\n              }\n            },\n          }\n        : {},\n      { style: combinedStyles() },\n    ) as JSX.HTMLAttributes<HTMLElement>),\n  }));\n\n  return {\n    visuallyHiddenProps,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,uBAA0C;CACrD,QAAQ;CACR,MAAM;CACN,aAAa;CACb,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,SAAS;CACT,UAAU;CACV,OAAO;CACP,eAAe;AACjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAAgB,qBACd,QAAgD,CAAC,GAC7B;CACpB,MAAM,CAAC,WAAW,gBAAgB,aAAa,KAAK;CAEpD,MAAM,oBAAoB,OAAO,KAAK,CAAC,CAAC,eAAe;CACvD,MAAM,cAAc,OAAO,KAAK,CAAC,CAAC;CAGlC,MAAM,EAAE,qBAAqB,kBAAkB;EAC7C,IAAI,aAAa;GACf,OAAO,CAAC,YAAY;EACtB;EACA,sBAAsB,QAAiB,aAAa,GAAG;CACzD,CAAC;CAGD,MAAM,iBAAiB,iBAAgD;EACrE,IAAI,UAAU,GAEZ,OAAO,MAAM;OACR,IAAI,MAAM,GACf,OAAO;GAAE,GAAG;GAAsB,GAAG,MAAM;EAAE;OAE7C,OAAO;CAEX,CAAC;CAqBD,OAAO,EACL,qBApB0B,kBAAmD,EAC7E,GAAI,WACF,kBACA,YAAY,IACR;EACE,iBAAiB,aAAa,IAAI;EAClC,aAAa,MAAkB;GAC7B,MAAM,gBAAgB,EAAE;GACxB,MAAM,gBAAgB,EAAE;GACxB,IAAI,iBAAiB,CAAC,cAAc,SAAS,aAAa,GACxD,aAAa,KAAK;EAEtB;CACF,IACA,CAAC,GACL,EAAE,OAAO,eAAe,EAAE,CAC5B,EACF,EAGoB,EACpB;AACF"}

package/dist/_chunk/{visually-hidden.jsx → createVisuallyHidden.jsx}

@@ -1,4 +1,16 @@
-import { i as mergeProps$1 } from "./env.jsx";
+/*
+* 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/visually-hidden/VisuallyHidden.tsx
+import { t as mergeProps } from "./mergeProps.jsx";
 import { t as access } from "./reactivity.jsx";
 import { t as createFocusWithin } from "./createFocusWithin.jsx";
 import { createMemo, createSignal } from "solid-js";
@@ -9,7 +21,7 @@ import { createMemo, createSignal } from "solid-js";
 * Provides styles and props to visually hide content while keeping it
 * accessible to screen readers.
 *
-* Port of react-aria's useVisuallyHidden.
+* Ported from packages/react-aria/src/visually-hidden/VisuallyHidden.tsx.
 */
 /**
 * CSS styles that visually hide an element while keeping it accessible.
@@ -78,7 +90,7 @@ function createVisuallyHidden(props = {}) {
 		};
 		else return visuallyHiddenStyles;
 	});
-	return { visuallyHiddenProps: createMemo(() => ({ ...mergeProps$1(focusWithinProps, isFocusable() ? {
+	return { visuallyHiddenProps: createMemo(() => ({ ...mergeProps(focusWithinProps, isFocusable() ? {
 		onFocusIn: () => setIsFocused(true),
 		onFocusOut: (e) => {
 			const currentTarget = e.currentTarget;
@@ -90,4 +102,4 @@ function createVisuallyHidden(props = {}) {
 //#endregion
 export { visuallyHiddenStyles as n, createVisuallyHidden as t };
 
-//# sourceMappingURL=visually-hidden.jsx.map
+//# sourceMappingURL=createVisuallyHidden.jsx.map