@proyecto-viviana/solidaria 0.3.0 → 0.4.1

package/dist/_chunk/numberfield.jsx

@@ -0,0 +1,259 @@
+import { i as mergeProps$1 } from "./env.jsx";
+import { t as filterDOMProps } from "./filterDOMProps.jsx";
+import { t as access } from "./reactivity.jsx";
+import { createId } from "../ssr/index.jsx";
+import { t as createLabel } from "./createLabel.jsx";
+import { createMemo } from "solid-js";
+//#region src/numberfield/createNumberField.ts
+/**
+* Provides the behavior and accessibility implementation for a number field.
+* Based on @react-aria/numberfield useNumberField.
+*/
+/**
+* Provides the behavior and accessibility implementation for a number field.
+*/
+function createNumberField(props, state, inputRef) {
+	const getProps = () => access(props);
+	const id = createId(getProps().id);
+	const inputId = `${id}-input`;
+	const incrementId = `${id}-increment`;
+	const decrementId = `${id}-decrement`;
+	const descriptionId = `${id}-description`;
+	const errorMessageId = `${id}-error`;
+	const { labelProps, fieldProps } = createLabel({
+		get id() {
+			return inputId;
+		},
+		get label() {
+			return getProps().label;
+		},
+		get "aria-label"() {
+			return getProps()["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return getProps()["aria-labelledby"];
+		},
+		labelElementType: "label"
+	});
+	const fieldLabel = () => getProps()["aria-label"] ?? "";
+	const buttonLabelledBy = () => {
+		if (fieldLabel()) return void 0;
+		return getProps().label != null ? labelProps.id : getProps()["aria-labelledby"];
+	};
+	const domProps = createMemo(() => filterDOMProps(getProps(), { labelable: true }));
+	const onInputChange = (e) => {
+		const value = e.currentTarget.value;
+		if (state.validate(value)) state.setInputValue(value);
+	};
+	const onInputBlur = (e) => {
+		state.commit();
+		const p = getProps();
+		p.onBlur?.(e);
+		p.onFocusChange?.(false);
+	};
+	const onInputFocus = (e) => {
+		const p = getProps();
+		p.onFocus?.(e);
+		p.onFocusChange?.(true);
+	};
+	const onKeyDown = (e) => {
+		const p = getProps();
+		if (p.isDisabled || p.isReadOnly) {
+			p.onKeyDown?.(e);
+			return;
+		}
+		switch (e.key) {
+			case "ArrowUp":
+				e.preventDefault();
+				state.increment();
+				break;
+			case "ArrowDown":
+				e.preventDefault();
+				state.decrement();
+				break;
+			case "PageUp":
+				e.preventDefault();
+				state.incrementToMax();
+				break;
+			case "PageDown":
+				e.preventDefault();
+				state.decrementToMin();
+				break;
+			case "Home":
+				e.preventDefault();
+				state.decrementToMin();
+				break;
+			case "End":
+				e.preventDefault();
+				state.incrementToMax();
+				break;
+			case "Enter":
+				state.commit();
+				break;
+		}
+		p.onKeyDown?.(e);
+	};
+	const onKeyUp = (e) => {
+		getProps().onKeyUp?.(e);
+	};
+	const onButtonPressStart = (e) => {
+		const input = inputRef?.();
+		if (input && input.ownerDocument.activeElement === input) return;
+		if (e.pointerType === "mouse") input?.focus();
+		else if (e.target instanceof HTMLElement) e.target.focus();
+	};
+	let incrementTouchPressUp = false;
+	let decrementTouchPressUp = false;
+	const onIncrementPressStart = (e) => {
+		if (e.pointerType !== "touch") state.increment();
+		else incrementTouchPressUp = false;
+		onButtonPressStart(e);
+	};
+	const onIncrementPressUp = (e) => {
+		if (e.pointerType === "touch") incrementTouchPressUp = true;
+	};
+	const onIncrementPressEnd = (e) => {
+		if (e.pointerType === "touch" && incrementTouchPressUp) state.increment();
+		incrementTouchPressUp = false;
+	};
+	const onIncrementClick = (e) => {
+		if (!state.canIncrement()) {
+			e.preventDefault();
+			return;
+		}
+		state.increment();
+		inputRef?.()?.focus();
+	};
+	const onDecrementPressStart = (e) => {
+		if (e.pointerType !== "touch") state.decrement();
+		else decrementTouchPressUp = false;
+		onButtonPressStart(e);
+	};
+	const onDecrementPressUp = (e) => {
+		if (e.pointerType === "touch") decrementTouchPressUp = true;
+	};
+	const onDecrementPressEnd = (e) => {
+		if (e.pointerType === "touch" && decrementTouchPressUp) state.decrement();
+		decrementTouchPressUp = false;
+	};
+	const onDecrementClick = (e) => {
+		if (!state.canDecrement()) {
+			e.preventDefault();
+			return;
+		}
+		state.decrement();
+		inputRef?.()?.focus();
+	};
+	const getAriaDescribedBy = () => {
+		const p = getProps();
+		const parts = [];
+		if (p["aria-describedby"]) parts.push(p["aria-describedby"]);
+		if (p.description) parts.push(descriptionId);
+		if (p.isInvalid && p.errorMessage) parts.push(errorMessageId);
+		return parts.length > 0 ? parts.join(" ") : void 0;
+	};
+	return {
+		get labelProps() {
+			return labelProps;
+		},
+		get groupProps() {
+			return {
+				role: "group",
+				"aria-disabled": getProps().isDisabled || void 0,
+				"aria-invalid": getProps().isInvalid || void 0
+			};
+		},
+		get inputProps() {
+			const p = getProps();
+			const isDisabled = p.isDisabled ?? state.isDisabled();
+			const isReadOnly = p.isReadOnly ?? state.isReadOnly();
+			return mergeProps$1(domProps(), fieldProps, {
+				id: inputId,
+				type: "text",
+				inputMode: "decimal",
+				autoComplete: "off",
+				autoCorrect: "off",
+				spellcheck: false,
+				tabIndex: isDisabled ? void 0 : 0,
+				"aria-roledescription": "Number field",
+				"aria-invalid": p.isInvalid || void 0,
+				"aria-required": p.isRequired || void 0,
+				"aria-describedby": getAriaDescribedBy(),
+				disabled: isDisabled || void 0,
+				readOnly: isReadOnly || void 0,
+				required: p.isRequired || void 0,
+				value: state.inputValue(),
+				onInput: onInputChange,
+				onChange: onInputChange,
+				onFocus: onInputFocus,
+				onBlur: onInputBlur,
+				onKeyDown,
+				onKeyUp,
+				onPaste: p.onPaste,
+				onCopy: p.onCopy,
+				onCut: p.onCut,
+				name: p.name,
+				form: p.form,
+				autoFocus: p.autoFocus
+			});
+		},
+		get incrementButtonProps() {
+			const labelledBy = buttonLabelledBy();
+			return {
+				id: incrementId,
+				type: "button",
+				"aria-label": `Increase ${fieldLabel()}`.trim(),
+				"aria-labelledby": labelledBy ? `${incrementId} ${labelledBy}` : void 0,
+				"aria-controls": inputId,
+				excludeFromTabOrder: true,
+				preventFocusOnPress: true,
+				allowFocusWhenDisabled: true,
+				get disabled() {
+					return !state.canIncrement();
+				},
+				tabIndex: -1,
+				get isDisabled() {
+					return !state.canIncrement();
+				},
+				onClick: onIncrementClick,
+				onPressStart: onIncrementPressStart,
+				onPressUp: onIncrementPressUp,
+				onPressEnd: onIncrementPressEnd
+			};
+		},
+		get decrementButtonProps() {
+			const labelledBy = buttonLabelledBy();
+			return {
+				id: decrementId,
+				type: "button",
+				"aria-label": `Decrease ${fieldLabel()}`.trim(),
+				"aria-labelledby": labelledBy ? `${decrementId} ${labelledBy}` : void 0,
+				"aria-controls": inputId,
+				excludeFromTabOrder: true,
+				preventFocusOnPress: true,
+				allowFocusWhenDisabled: true,
+				get disabled() {
+					return !state.canDecrement();
+				},
+				tabIndex: -1,
+				get isDisabled() {
+					return !state.canDecrement();
+				},
+				onClick: onDecrementClick,
+				onPressStart: onDecrementPressStart,
+				onPressUp: onDecrementPressUp,
+				onPressEnd: onDecrementPressEnd
+			};
+		},
+		get descriptionProps() {
+			return { id: descriptionId };
+		},
+		get errorMessageProps() {
+			return { id: errorMessageId };
+		}
+	};
+}
+//#endregion
+export { createNumberField as t };
+
+//# sourceMappingURL=numberfield.jsx.map

package/dist/_chunk/numberfield.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberfield.jsx","names":["mergeProps"],"sources":["../../src/numberfield/createNumberField.ts"],"sourcesContent":["/**\n * Provides the behavior and accessibility implementation for a number field.\n * Based on @react-aria/numberfield useNumberField.\n */\n\nimport { type JSX, createMemo } from \"solid-js\";\nimport { createLabel } from \"../label/createLabel\";\nimport { filterDOMProps } from \"../utils/filterDOMProps\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { createId } from \"../ssr\";\nimport { access, type MaybeAccessor } from \"../utils/reactivity\";\nimport type { NumberFieldState } from \"@proyecto-viviana/solid-stately\";\nimport type { AriaButtonProps } from \"../button/types\";\nimport type { PressEvent } from \"../interactions\";\n\nexport interface AriaNumberFieldProps {\n  /** A label for the number field. */\n  label?: JSX.Element;\n  /** An accessible label for the number field. */\n  \"aria-label\"?: string;\n  /** The element ID that labels the number field. */\n  \"aria-labelledby\"?: string;\n  /** The element ID that describes the number field. */\n  \"aria-describedby\"?: string;\n  /** Whether the number field is disabled. */\n  isDisabled?: boolean;\n  /** Whether the number field is read-only. */\n  isReadOnly?: boolean;\n  /** Whether the number field is required. */\n  isRequired?: boolean;\n  /** Whether the number field is invalid. */\n  isInvalid?: boolean;\n  /** A description for the number field. */\n  description?: JSX.Element;\n  /** An error message for the number field. */\n  errorMessage?: JSX.Element;\n  /** The ID of the number field. */\n  id?: string;\n  /** Whether to auto-focus the input. */\n  autoFocus?: boolean;\n  /** The name for the form input. */\n  name?: string;\n  /** The form element this input belongs to. */\n  form?: string;\n  /** Handler for focus events. */\n  onFocus?: JSX.EventHandler<HTMLInputElement, FocusEvent>;\n  /** Handler for blur events. */\n  onBlur?: JSX.EventHandler<HTMLInputElement, FocusEvent>;\n  /** Handler called when focus state changes. */\n  onFocusChange?: (isFocused: boolean) => void;\n  /** Handler for key down events. */\n  onKeyDown?: JSX.EventHandler<HTMLInputElement, KeyboardEvent>;\n  /** Handler for key up events. */\n  onKeyUp?: JSX.EventHandler<HTMLInputElement, KeyboardEvent>;\n  /** Handler for paste events. */\n  onPaste?: JSX.EventHandler<HTMLInputElement, ClipboardEvent>;\n  /** Handler for copy events. */\n  onCopy?: JSX.EventHandler<HTMLInputElement, ClipboardEvent>;\n  /** Handler for cut events. */\n  onCut?: JSX.EventHandler<HTMLInputElement, ClipboardEvent>;\n}\n\nexport interface NumberFieldAria {\n  /** Props for the label element. */\n  labelProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the input element group. */\n  groupProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the input element. */\n  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;\n  /** Props for the increment button. */\n  incrementButtonProps: AriaButtonProps;\n  /** Props for the decrement button. */\n  decrementButtonProps: AriaButtonProps;\n  /** Props for the description element. */\n  descriptionProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the error message element. */\n  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a number field.\n */\nexport function createNumberField(\n  props: MaybeAccessor<AriaNumberFieldProps>,\n  state: NumberFieldState,\n  inputRef?: () => HTMLInputElement | null,\n): NumberFieldAria {\n  const getProps = () => access(props);\n  const id = createId(getProps().id);\n\n  // Generate IDs for associated elements\n  const inputId = `${id}-input`;\n  const incrementId = `${id}-increment`;\n  const decrementId = `${id}-decrement`;\n  const descriptionId = `${id}-description`;\n  const errorMessageId = `${id}-error`;\n\n  // Label handling\n  const { labelProps, fieldProps } = createLabel({\n    get id() {\n      return inputId;\n    },\n    get label() {\n      return getProps().label;\n    },\n    get \"aria-label\"() {\n      return getProps()[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return getProps()[\"aria-labelledby\"];\n    },\n    // Upstream react-aria `useNumberField` → `useField` → `useLabel` with the DEFAULT\n    // `labelElementType: 'label'`: the S2 NumberField label is a native `<label htmlFor>`\n    // (verified against the shipped React DOM: `<label id for=inputId>`). This hardcoded\n    // `\"span\"` was a self-inflicted divergence — it dropped the `for` association and made\n    // `NumberFieldLabel` render a `<span>`. Reverted to `\"label\"` so `createLabel` emits\n    // `for: inputId` (the input still also carries `aria-labelledby`, exactly as upstream).\n    labelElementType: \"label\",\n  });\n\n  // Increment/decrement button labels — a 1:1 port of upstream `useNumberField`'s\n  // four-case logic. Upstream RAC's `NumberField` component feeds `useNumberField` a\n  // BOOLEAN slot for `label` (from `useSlot`), never the label string, so a visible\n  // label is NEVER concatenated into the button `aria-label`. Instead: with a visible\n  // label the button reads `aria-label: \"Increase\"` PLUS `aria-labelledby: \"<selfId>\n  // <labelId>\"`; only an explicit `aria-label` (and no visible label) changes the text\n  // (`\"Increase <aria-label>\"`). The prior `Increase ${getLabelText()}` was a\n  // self-inflicted divergence that produced \"Increase Quantity\" where S2 ships\n  // \"Increase\". `fieldLabel` mirrors upstream: `props['aria-label'] || ''` — the visible\n  // label string is intentionally excluded (it arrives as a boolean slot in RAC).\n  const fieldLabel = (): string => getProps()[\"aria-label\"] ?? \"\";\n  const buttonLabelledBy = (): string | undefined => {\n    if (fieldLabel()) return undefined;\n    return getProps().label != null\n      ? (labelProps.id as string | undefined)\n      : getProps()[\"aria-labelledby\"];\n  };\n\n  // Filter DOM props\n  const domProps = createMemo(() =>\n    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true }),\n  );\n\n  // Handle input change\n  const onInputChange: JSX.EventHandler<HTMLInputElement, Event> = (e) => {\n    const value = e.currentTarget.value;\n    if (state.validate(value)) {\n      state.setInputValue(value);\n    }\n  };\n\n  // Handle input blur - commit value\n  const onInputBlur: JSX.EventHandler<HTMLInputElement, FocusEvent> = (e) => {\n    state.commit();\n    const p = getProps();\n    p.onBlur?.(e);\n    p.onFocusChange?.(false);\n  };\n\n  const onInputFocus: JSX.EventHandler<HTMLInputElement, FocusEvent> = (e) => {\n    const p = getProps();\n    p.onFocus?.(e);\n    p.onFocusChange?.(true);\n  };\n\n  // Handle keyboard events\n  const onKeyDown: JSX.EventHandler<HTMLInputElement, KeyboardEvent> = (e) => {\n    const p = getProps();\n    if (p.isDisabled || p.isReadOnly) {\n      p.onKeyDown?.(e);\n      return;\n    }\n\n    switch (e.key) {\n      case \"ArrowUp\":\n        e.preventDefault();\n        state.increment();\n        break;\n      case \"ArrowDown\":\n        e.preventDefault();\n        state.decrement();\n        break;\n      case \"PageUp\":\n        e.preventDefault();\n        state.incrementToMax();\n        break;\n      case \"PageDown\":\n        e.preventDefault();\n        state.decrementToMin();\n        break;\n      case \"Home\":\n        e.preventDefault();\n        state.decrementToMin();\n        break;\n      case \"End\":\n        e.preventDefault();\n        state.incrementToMax();\n        break;\n      case \"Enter\":\n        state.commit();\n        break;\n    }\n\n    p.onKeyDown?.(e);\n  };\n\n  const onKeyUp: JSX.EventHandler<HTMLInputElement, KeyboardEvent> = (e) => {\n    getProps().onKeyUp?.(e);\n  };\n\n  const onButtonPressStart = (e: PressEvent) => {\n    const input = inputRef?.();\n\n    // Keep existing input focus in place. This avoids hiding software keyboards\n    // and prevents a blur/refocus flicker when mouse pressing the steppers.\n    if (input && input.ownerDocument.activeElement === input) {\n      return;\n    }\n\n    if (e.pointerType === \"mouse\") {\n      input?.focus();\n    } else if (e.target instanceof HTMLElement) {\n      e.target.focus();\n    }\n  };\n\n  let incrementTouchPressUp = false;\n  let decrementTouchPressUp = false;\n\n  const onIncrementPressStart = (e: PressEvent) => {\n    if (e.pointerType !== \"touch\") {\n      state.increment();\n    } else {\n      incrementTouchPressUp = false;\n    }\n\n    onButtonPressStart(e);\n  };\n\n  const onIncrementPressUp = (e: PressEvent) => {\n    if (e.pointerType === \"touch\") {\n      incrementTouchPressUp = true;\n    }\n  };\n\n  const onIncrementPressEnd = (e: PressEvent) => {\n    if (e.pointerType === \"touch\" && incrementTouchPressUp) {\n      state.increment();\n    }\n\n    incrementTouchPressUp = false;\n  };\n  const onIncrementClick = (e: MouseEvent) => {\n    if (!state.canIncrement()) {\n      e.preventDefault();\n      return;\n    }\n\n    state.increment();\n    inputRef?.()?.focus();\n  };\n\n  const onDecrementPressStart = (e: PressEvent) => {\n    if (e.pointerType !== \"touch\") {\n      state.decrement();\n    } else {\n      decrementTouchPressUp = false;\n    }\n\n    onButtonPressStart(e);\n  };\n\n  const onDecrementPressUp = (e: PressEvent) => {\n    if (e.pointerType === \"touch\") {\n      decrementTouchPressUp = true;\n    }\n  };\n\n  const onDecrementPressEnd = (e: PressEvent) => {\n    if (e.pointerType === \"touch\" && decrementTouchPressUp) {\n      state.decrement();\n    }\n\n    decrementTouchPressUp = false;\n  };\n  const onDecrementClick = (e: MouseEvent) => {\n    if (!state.canDecrement()) {\n      e.preventDefault();\n      return;\n    }\n\n    state.decrement();\n    inputRef?.()?.focus();\n  };\n\n  // Build aria-describedby\n  const getAriaDescribedBy = () => {\n    const p = getProps();\n    const parts: string[] = [];\n    if (p[\"aria-describedby\"]) parts.push(p[\"aria-describedby\"]);\n    if (p.description) parts.push(descriptionId);\n    if (p.isInvalid && p.errorMessage) parts.push(errorMessageId);\n    return parts.length > 0 ? parts.join(\" \") : undefined;\n  };\n\n  return {\n    get labelProps() {\n      return labelProps as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get groupProps() {\n      return {\n        role: \"group\",\n        \"aria-disabled\": getProps().isDisabled || undefined,\n        \"aria-invalid\": getProps().isInvalid || undefined,\n      } as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get inputProps() {\n      const p = getProps();\n      const isDisabled = p.isDisabled ?? state.isDisabled();\n      const isReadOnly = p.isReadOnly ?? state.isReadOnly();\n\n      return mergeProps(\n        domProps(),\n        fieldProps as Record<string, unknown>,\n        {\n          id: inputId,\n          type: \"text\",\n          inputMode: \"decimal\" as const,\n          autoComplete: \"off\",\n          autoCorrect: \"off\",\n          spellcheck: false,\n          // Upstream routes the input through useFormattedTextField → useTextField →\n          // useFocusable, which \"always set[s] a tabIndex so that Safari allows\n          // focusing native buttons and inputs\": `excludeFromTabOrder ? -1 : 0`, then\n          // `undefined` when disabled. The input is never excluded, so the rendered\n          // DOM carries `tabindex=\"0\"` (absent only when disabled). We hand-roll\n          // inputProps (see the spinbutton-override note below) so we must replay that\n          // one focusable prop here to stay byte-identical to React's tab order.\n          tabIndex: isDisabled ? undefined : 0,\n          // Upstream useNumberField wraps useSpinButton but deliberately\n          // overrides its output: role=spinbutton can't be focused with\n          // VoiceOver, so the input is a plain textbox (inside the role=group\n          // wrapper above) and every aria-value* is dropped in favour of\n          // aria-roledescription. The formatted value is still announced via the\n          // input's own value. Mirror that contract instead of leaking the raw\n          // spinbutton semantics.\n          //\n          // The string MUST match upstream's `stringFormatter.format('numberField')`,\n          // whose en-US value is `Number field` (capitalised) — not a lowercase\n          // hand-roll. Full locale routing via `createStringFormatter` (as\n          // `createDateField` does) is tracked as `intl-roledescription-hardcodes`\n          // (also covers the ColorArea/ColorSwatch English hardcodes); this keeps the\n          // en-US roledescription byte-identical to React Spectrum in the meantime.\n          \"aria-roledescription\": \"Number field\",\n          \"aria-invalid\": p.isInvalid || undefined,\n          \"aria-required\": p.isRequired || undefined,\n          \"aria-describedby\": getAriaDescribedBy(),\n          disabled: isDisabled || undefined,\n          readOnly: isReadOnly || undefined,\n          required: p.isRequired || undefined,\n          value: state.inputValue(),\n          onInput: onInputChange,\n          onChange: onInputChange,\n          onFocus: onInputFocus,\n          onBlur: onInputBlur,\n          onKeyDown,\n          onKeyUp,\n          onPaste: p.onPaste,\n          onCopy: p.onCopy,\n          onCut: p.onCut,\n          name: p.name,\n          form: p.form,\n          autoFocus: p.autoFocus,\n        } as Record<string, unknown>,\n      ) as JSX.InputHTMLAttributes<HTMLInputElement>;\n    },\n    get incrementButtonProps() {\n      const labelledBy = buttonLabelledBy();\n      return {\n        id: incrementId,\n        type: \"button\",\n        \"aria-label\": `Increase ${fieldLabel()}`.trim(),\n        \"aria-labelledby\": labelledBy ? `${incrementId} ${labelledBy}` : undefined,\n        \"aria-controls\": inputId,\n        excludeFromTabOrder: true,\n        preventFocusOnPress: true,\n        allowFocusWhenDisabled: true,\n        get disabled() {\n          return !state.canIncrement();\n        },\n        tabIndex: -1,\n        get isDisabled() {\n          return !state.canIncrement();\n        },\n        onClick: onIncrementClick,\n        onPressStart: onIncrementPressStart,\n        onPressUp: onIncrementPressUp,\n        onPressEnd: onIncrementPressEnd,\n      } as AriaButtonProps;\n    },\n    get decrementButtonProps() {\n      const labelledBy = buttonLabelledBy();\n      return {\n        id: decrementId,\n        type: \"button\",\n        \"aria-label\": `Decrease ${fieldLabel()}`.trim(),\n        \"aria-labelledby\": labelledBy ? `${decrementId} ${labelledBy}` : undefined,\n        \"aria-controls\": inputId,\n        excludeFromTabOrder: true,\n        preventFocusOnPress: true,\n        allowFocusWhenDisabled: true,\n        get disabled() {\n          return !state.canDecrement();\n        },\n        tabIndex: -1,\n        get isDisabled() {\n          return !state.canDecrement();\n        },\n        onClick: onDecrementClick,\n        onPressStart: onDecrementPressStart,\n        onPressUp: onDecrementPressUp,\n        onPressEnd: onDecrementPressEnd,\n      } as AriaButtonProps;\n    },\n    get descriptionProps() {\n      return {\n        id: descriptionId,\n      } as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get errorMessageProps() {\n      return {\n        id: errorMessageId,\n      } as JSX.HTMLAttributes<HTMLElement>;\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/overlays.js

@@ -0,0 +1,186 @@
+import { t as access } from "./reactivity.js";
+import { createId } from "../ssr/index.js";
+import { createContext, createEffect, createSignal, onCleanup, useContext } from "solid-js";
+import { Portal, createComponent, getNextElement, insert, isServer, runHydrationEvents, spread, template } from "solid-js/web";
+//#region src/overlays/createOverlayTrigger.ts
+/**
+* Handles the behavior and accessibility for an overlay trigger.
+* Based on @react-aria/overlays useOverlayTrigger.
+*/
+const onCloseMap = /* @__PURE__ */ new WeakMap();
+/**
+* Handles the behavior and accessibility for an overlay trigger, e.g. a button
+* that opens a popover, menu, or other overlay that is positioned relative to the trigger.
+*/
+function createOverlayTrigger(props, state, ref) {
+	const propsAccessor = () => access(props);
+	const overlayId = createId();
+	createEffect(() => {
+		const element = ref?.();
+		if (element) onCloseMap.set(element, state.close);
+	});
+	const getAriaHasPopup = () => {
+		const type = propsAccessor().type;
+		if (type === "menu") return true;
+		else if (type === "listbox") return "listbox";
+	};
+	return {
+		triggerProps: {
+			get "aria-haspopup"() {
+				return getAriaHasPopup();
+			},
+			get "aria-expanded"() {
+				return state.isOpen();
+			},
+			get "aria-controls"() {
+				return state.isOpen() ? overlayId : void 0;
+			},
+			onPress: state.toggle
+		},
+		overlayProps: { id: overlayId }
+	};
+}
+//#endregion
+//#region src/overlays/createModal.tsx
+/**
+* Modal context and hooks for managing modal accessibility.
+* Based on @react-aria/overlays useModal.
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<div data-overlay-container>`);
+const ModalContext = createContext(null);
+const PortalContext = createContext({});
+/**
+* Each ModalProvider tracks how many modals are open in its subtree. On mount, the modals
+* trigger `addModal` to increment the count, and trigger `removeModal` on unmount to decrement it.
+* This is done recursively so that all parent providers are incremented and decremented.
+* If the modal count is greater than zero, we add `aria-hidden` to this provider to hide its
+* subtree from screen readers. This is done using SolidJS context in order to account for things
+* like portals, which can cause the component tree and the DOM tree to differ significantly in structure.
+*/
+const ModalProvider = (props) => {
+	const parent = useContext(ModalContext);
+	const [modalCount, setModalCount] = createSignal(0);
+	const context = {
+		parent,
+		modalCount,
+		addModal() {
+			setModalCount((count) => count + 1);
+			if (parent) parent.addModal();
+		},
+		removeModal() {
+			setModalCount((count) => count - 1);
+			if (parent) parent.removeModal();
+		}
+	};
+	return createComponent(ModalContext.Provider, {
+		value: context,
+		get children() {
+			return props.children;
+		}
+	});
+};
+/**
+* Sets the portal container for overlays rendered by descendants.
+*/
+const UNSAFE_PortalProvider = (props) => {
+	const parent = useUNSAFE_PortalContext();
+	return createComponent(PortalContext.Provider, {
+		get value() {
+			return { getContainer: props.getContainer === null ? void 0 : props.getContainer ?? parent.getContainer };
+		},
+		get children() {
+			return props.children;
+		}
+	});
+};
+/**
+* Returns the portal container configuration inherited from the nearest provider.
+*/
+function useUNSAFE_PortalContext() {
+	return useContext(PortalContext) ?? {};
+}
+/**
+* Used to determine if the tree should be aria-hidden based on how many
+* modals are open.
+*/
+function useModalProvider() {
+	const context = useContext(ModalContext);
+	return { modalProviderProps: { get "aria-hidden"() {
+		return context && context.modalCount() > 0 ? true : void 0;
+	} } };
+}
+/**
+* Creates a root node that will be aria-hidden if there are other modals open.
+*/
+const OverlayContainerDOM = (props) => {
+	const { modalProviderProps } = useModalProvider();
+	return (() => {
+		var _el$ = getNextElement(_tmpl$);
+		spread(_el$, modalProviderProps, false, true);
+		insert(_el$, () => props.children);
+		runHydrationEvents();
+		return _el$;
+	})();
+};
+/**
+* An OverlayProvider acts as a container for the top-level application.
+* Any application that uses modal dialogs or other overlays should
+* be wrapped in a `<OverlayProvider>`. This is used to ensure that
+* the main content of the application is hidden from screen readers
+* if a modal or other overlay is opened. Only the top-most modal or
+* overlay should be accessible at once.
+*/
+const OverlayProvider = (props) => {
+	return createComponent(ModalProvider, { get children() {
+		return createComponent(OverlayContainerDOM, { get children() {
+			return props.children;
+		} });
+	} });
+};
+/**
+* A container for overlays like modals and popovers. Renders the overlay
+* into a Portal which is placed at the end of the document body.
+* Also ensures that the overlay is hidden from screen readers if a
+* nested modal is opened. Only the top-most modal or overlay should
+* be accessible at once.
+*/
+const OverlayContainer = (props) => {
+	if (isServer) return null;
+	const portalContext = useUNSAFE_PortalContext();
+	const portalContainer = () => props.portalContainer ?? portalContext.getContainer?.() ?? document.body;
+	createEffect(() => {
+		if (portalContainer()?.closest("[data-overlay-container]")) throw new Error("An OverlayContainer must not be inside another container. Please change the portalContainer prop.");
+	});
+	return createComponent(Portal, {
+		get mount() {
+			return portalContainer();
+		},
+		get children() {
+			return createComponent(OverlayProvider, { get children() {
+				return props.children;
+			} });
+		}
+	});
+};
+/**
+* Hides content outside the current `<OverlayContainer>` from screen readers
+* on mount and restores it on unmount. Typically used by modal dialogs and
+* other types of overlays to ensure that only the top-most modal is
+* accessible at once.
+*/
+function createModal(options) {
+	const context = useContext(ModalContext);
+	if (!context) throw new Error("Modal is not contained within a provider");
+	createEffect(() => {
+		if (options?.isDisabled || !context.parent) return;
+		context.parent.addModal();
+		onCleanup(() => {
+			if (context.parent) context.parent.removeModal();
+		});
+	});
+	return { modalProps: { "data-ismodal": !options?.isDisabled } };
+}
+//#endregion
+export { createModal as a, createOverlayTrigger as c, UNSAFE_PortalProvider as i, onCloseMap as l, OverlayContainer as n, useModalProvider as o, OverlayProvider as r, useUNSAFE_PortalContext as s, ModalProvider as t };
+
+//# sourceMappingURL=overlays.js.map

package/dist/_chunk/overlays.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlays.js","names":["createContext","createSignal","useContext","createEffect","onCleanup","JSX","Accessor","ParentComponent","Portal","isServer","ModalProviderProps","children","Element","PortalProviderProps","getContainer","PortalProviderContextValue","ModalContext","parent","modalCount","addModal","removeModal","PortalContext","ModalProvider","props","setModalCount","context","count","_$createComponent","Provider","value","UNSAFE_PortalProvider","useUNSAFE_PortalContext","undefined","ModalProviderAria","modalProviderProps","useModalProvider","aria-hidden","OverlayContainerDOM","_el$","_$getNextElement","_tmpl$","_$spread","_$insert","_$runHydrationEvents","OverlayProvider","OverlayContainerProps","portalContainer","OverlayContainer","portalContext","document","body","container","closest","Error","mount","AriaModalOptions","isDisabled","ModalAria","modalProps","createModal","options"],"sources":["../../src/overlays/createOverlayTrigger.ts","../../src/overlays/createModal.tsx"],"sourcesContent":["/**\n * Handles the behavior and accessibility for an overlay trigger.\n * Based on @react-aria/overlays useOverlayTrigger.\n */\n\nimport { createEffect } from \"solid-js\";\nimport type { OverlayTriggerState } from \"@proyecto-viviana/solid-stately\";\nimport { createId } from \"../ssr\";\nimport { access, type MaybeAccessor } from \"../utils\";\n\nexport interface OverlayTriggerProps {\n  /** Type of overlay that is opened by the trigger. */\n  type: \"dialog\" | \"menu\" | \"listbox\" | \"tree\" | \"grid\";\n}\n\nexport interface OverlayTriggerAria {\n  /** Props for the trigger element. */\n  triggerProps: {\n    \"aria-haspopup\"?: boolean | \"listbox\";\n    \"aria-expanded\": boolean;\n    \"aria-controls\"?: string;\n    onPress: () => void;\n  };\n  /** Props for the overlay container element. */\n  overlayProps: {\n    id: string;\n  };\n}\n\n// Map for storing close functions, used by useCloseOnScroll\nexport const onCloseMap = new WeakMap<Element, () => void>();\n\n/**\n * Handles the behavior and accessibility for an overlay trigger, e.g. a button\n * that opens a popover, menu, or other overlay that is positioned relative to the trigger.\n */\nexport function createOverlayTrigger(\n  props: MaybeAccessor<OverlayTriggerProps>,\n  state: OverlayTriggerState,\n  ref?: () => Element | null,\n): OverlayTriggerAria {\n  const propsAccessor = () => access(props);\n  const overlayId = createId();\n\n  // Backward compatibility. Share state close function with useOverlayPosition so it can close on scroll\n  // without forcing users to pass onClose.\n  createEffect(() => {\n    const element = ref?.();\n    if (element) {\n      onCloseMap.set(element, state.close);\n    }\n  });\n\n  // Aria 1.1 supports multiple values for aria-haspopup other than just menus.\n  // https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup\n  // However, we only add it for menus for now because screen readers often\n  // announce it as a menu even for other values.\n  const getAriaHasPopup = (): boolean | \"listbox\" | undefined => {\n    const type = propsAccessor().type;\n    if (type === \"menu\") {\n      return true;\n    } else if (type === \"listbox\") {\n      return \"listbox\";\n    }\n    return undefined;\n  };\n\n  return {\n    triggerProps: {\n      get \"aria-haspopup\"() {\n        return getAriaHasPopup();\n      },\n      get \"aria-expanded\"() {\n        return state.isOpen();\n      },\n      get \"aria-controls\"() {\n        return state.isOpen() ? overlayId : undefined;\n      },\n      onPress: state.toggle,\n    },\n    overlayProps: {\n      id: overlayId,\n    },\n  };\n}\n","/**\n * Modal context and hooks for managing modal accessibility.\n * Based on @react-aria/overlays useModal.\n */\n\nimport {\n  createContext,\n  createSignal,\n  useContext,\n  createEffect,\n  onCleanup,\n  type JSX,\n  type Accessor,\n  type ParentComponent,\n} from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport { isServer } from \"solid-js/web\";\n\nexport interface ModalProviderProps {\n  children: JSX.Element;\n}\n\nexport interface PortalProviderProps {\n  /** Returns the element where overlays should portal. Pass null to clear inherited context. */\n  getContainer?: (() => Element | null) | null;\n  children: JSX.Element;\n}\n\nexport interface PortalProviderContextValue {\n  getContainer?: () => Element | null;\n}\n\ninterface ModalContext {\n  parent: ModalContext | null;\n  modalCount: Accessor<number>;\n  addModal: () => void;\n  removeModal: () => void;\n}\n\nconst ModalContext = createContext<ModalContext | null>(null);\nconst PortalContext = createContext<PortalProviderContextValue>({});\n\n/**\n * Each ModalProvider tracks how many modals are open in its subtree. On mount, the modals\n * trigger `addModal` to increment the count, and trigger `removeModal` on unmount to decrement it.\n * This is done recursively so that all parent providers are incremented and decremented.\n * If the modal count is greater than zero, we add `aria-hidden` to this provider to hide its\n * subtree from screen readers. This is done using SolidJS context in order to account for things\n * like portals, which can cause the component tree and the DOM tree to differ significantly in structure.\n */\nexport const ModalProvider: ParentComponent<ModalProviderProps> = (props) => {\n  const parent = useContext(ModalContext);\n  const [modalCount, setModalCount] = createSignal(0);\n\n  const context: ModalContext = {\n    parent,\n    modalCount,\n    addModal() {\n      setModalCount((count) => count + 1);\n      if (parent) {\n        parent.addModal();\n      }\n    },\n    removeModal() {\n      setModalCount((count) => count - 1);\n      if (parent) {\n        parent.removeModal();\n      }\n    },\n  };\n\n  return <ModalContext.Provider value={context}>{props.children}</ModalContext.Provider>;\n};\n\n/**\n * Sets the portal container for overlays rendered by descendants.\n */\nexport const UNSAFE_PortalProvider: ParentComponent<PortalProviderProps> = (props) => {\n  const parent = useUNSAFE_PortalContext();\n\n  return (\n    <PortalContext.Provider\n      value={{\n        getContainer:\n          props.getContainer === null ? undefined : (props.getContainer ?? parent.getContainer),\n      }}\n    >\n      {props.children}\n    </PortalContext.Provider>\n  );\n};\n\n/**\n * Returns the portal container configuration inherited from the nearest provider.\n */\nexport function useUNSAFE_PortalContext(): PortalProviderContextValue {\n  return useContext(PortalContext) ?? {};\n}\n\nexport interface ModalProviderAria {\n  /** Props to be spread on the container element. */\n  modalProviderProps: {\n    \"aria-hidden\"?: true;\n  };\n}\n\n/**\n * Used to determine if the tree should be aria-hidden based on how many\n * modals are open.\n */\nexport function useModalProvider(): ModalProviderAria {\n  const context = useContext(ModalContext);\n  return {\n    modalProviderProps: {\n      get \"aria-hidden\"() {\n        return context && context.modalCount() > 0 ? true : undefined;\n      },\n    },\n  };\n}\n\n/**\n * Creates a root node that will be aria-hidden if there are other modals open.\n */\nconst OverlayContainerDOM: ParentComponent<ModalProviderProps> = (props) => {\n  const { modalProviderProps } = useModalProvider();\n  return (\n    <div data-overlay-container {...modalProviderProps}>\n      {props.children}\n    </div>\n  );\n};\n\n/**\n * An OverlayProvider acts as a container for the top-level application.\n * Any application that uses modal dialogs or other overlays should\n * be wrapped in a `<OverlayProvider>`. This is used to ensure that\n * the main content of the application is hidden from screen readers\n * if a modal or other overlay is opened. Only the top-most modal or\n * overlay should be accessible at once.\n */\nexport const OverlayProvider: ParentComponent<ModalProviderProps> = (props) => {\n  return (\n    <ModalProvider>\n      <OverlayContainerDOM>{props.children}</OverlayContainerDOM>\n    </ModalProvider>\n  );\n};\n\nexport interface OverlayContainerProps extends ModalProviderProps {\n  /**\n   * The container element in which the overlay portal will be placed.\n   * @default document.body\n   */\n  portalContainer?: Element;\n}\n\n/**\n * A container for overlays like modals and popovers. Renders the overlay\n * into a Portal which is placed at the end of the document body.\n * Also ensures that the overlay is hidden from screen readers if a\n * nested modal is opened. Only the top-most modal or overlay should\n * be accessible at once.\n */\nexport const OverlayContainer: ParentComponent<OverlayContainerProps> = (props) => {\n  // Don't render portal on server\n  if (isServer) {\n    return null;\n  }\n\n  const portalContext = useUNSAFE_PortalContext();\n  const portalContainer = () =>\n    props.portalContainer ?? portalContext.getContainer?.() ?? document.body;\n\n  createEffect(() => {\n    const container = portalContainer();\n    if (container?.closest(\"[data-overlay-container]\")) {\n      throw new Error(\n        \"An OverlayContainer must not be inside another container. Please change the portalContainer prop.\",\n      );\n    }\n  });\n\n  return (\n    <Portal mount={portalContainer()}>\n      <OverlayProvider>{props.children}</OverlayProvider>\n    </Portal>\n  );\n};\n\nexport interface AriaModalOptions {\n  /** Whether the modal is disabled. */\n  isDisabled?: boolean;\n}\n\nexport interface ModalAria {\n  /** Props for the modal content element. */\n  modalProps: {\n    \"data-ismodal\": boolean;\n  };\n}\n\n/**\n * Hides content outside the current `<OverlayContainer>` from screen readers\n * on mount and restores it on unmount. Typically used by modal dialogs and\n * other types of overlays to ensure that only the top-most modal is\n * accessible at once.\n */\nexport function createModal(options?: AriaModalOptions): ModalAria {\n  // Add aria-hidden to all parent providers on mount, and restore on unmount.\n  const context = useContext(ModalContext);\n\n  if (!context) {\n    throw new Error(\"Modal is not contained within a provider\");\n  }\n\n  createEffect(() => {\n    if (options?.isDisabled || !context.parent) {\n      return;\n    }\n\n    // The immediate context is from the provider containing this modal, so we only\n    // want to trigger aria-hidden on its parents not on the modal provider itself.\n    context.parent.addModal();\n\n    onCleanup(() => {\n      if (context.parent) {\n        context.parent.removeModal();\n      }\n    });\n  });\n\n  return {\n    modalProps: {\n      \"data-ismodal\": !options?.isDisabled,\n    },\n  };\n}\n"],"mappings":";;;;;;;;;AA8BA,MAAa,6BAAa,IAAI,QAA6B;;;;;AAM3D,SAAgB,qBACd,OACA,OACA,KACoB;CACpB,MAAM,sBAAsB,OAAO,KAAK;CACxC,MAAM,YAAY,SAAS;CAI3B,mBAAmB;EACjB,MAAM,UAAU,MAAM;EACtB,IAAI,SACF,WAAW,IAAI,SAAS,MAAM,KAAK;CAEvC,CAAC;CAMD,MAAM,wBAAyD;EAC7D,MAAM,OAAO,cAAc,CAAC,CAAC;EAC7B,IAAI,SAAS,QACX,OAAO;OACF,IAAI,SAAS,WAClB,OAAO;CAGX;CAEA,OAAO;EACL,cAAc;GACZ,IAAI,kBAAkB;IACpB,OAAO,gBAAgB;GACzB;GACA,IAAI,kBAAkB;IACpB,OAAO,MAAM,OAAO;GACtB;GACA,IAAI,kBAAkB;IACpB,OAAO,MAAM,OAAO,IAAI,YAAY,KAAA;GACtC;GACA,SAAS,MAAM;EACjB;EACA,cAAc,EACZ,IAAI,UACN;CACF;AACF;;;;;;;;AC7CA,MAAMgB,eAAehB,cAAmC,IAAI;AAC5D,MAAMqB,gBAAgBrB,cAA0C,CAAC,CAAC;;;;;;;;;AAUlE,MAAasB,iBAAsDC,UAAU;CAC3E,MAAMN,SAASf,WAAWc,YAAY;CACtC,MAAM,CAACE,YAAYM,iBAAiBvB,aAAa,CAAC;CAElD,MAAMwB,UAAwB;EAC5BR;EACAC;EACAC,WAAW;GACTK,eAAeE,UAAUA,QAAQ,CAAC;GAClC,IAAIT,QACFA,OAAOE,SAAS;EAEpB;EACAC,cAAc;GACZI,eAAeE,UAAUA,QAAQ,CAAC;GAClC,IAAIT,QACFA,OAAOG,YAAY;EAEvB;CACF;CAEA,OAAAO,gBAAQX,aAAaY,UAAQ;EAACC,OAAOJ;EAAO,IAAAd,WAAA;GAAA,OAAGY,MAAMZ;EAAQ;CAAA,CAAA;AAC/D;;;;AAKA,MAAamB,yBAA+DP,UAAU;CACpF,MAAMN,SAASc,wBAAwB;CAEvC,OAAAJ,gBACGN,cAAcO,UAAQ;EAAA,IACrBC,QAAK;GAAA,OAAE,EACLf,cACES,MAAMT,iBAAiB,OAAOkB,KAAAA,IAAaT,MAAMT,gBAAgBG,OAAOH,aAC5E;EAAC;EAAA,IAAAH,WAAA;GAAA,OAEAY,MAAMZ;EAAQ;CAAA,CAAA;AAGrB;;;;AAKA,SAAgBoB,0BAAsD;CACpE,OAAO7B,WAAWmB,aAAa,KAAK,CAAC;AACvC;;;;;AAaA,SAAgBc,mBAAsC;CACpD,MAAMV,UAAUvB,WAAWc,YAAY;CACvC,OAAO,EACLkB,oBAAoB,EAClB,IAAI,gBAAgB;EAClB,OAAOT,WAAWA,QAAQP,WAAW,IAAI,IAAI,OAAOc,KAAAA;CACtD,EACF,EACF;AACF;;;;AAKA,MAAMK,uBAA4Dd,UAAU;CAC1E,MAAM,EAAEW,uBAAuBC,iBAAiB;CAChD,cAAA;EAAA,IAAAG,OAAAC,eAAAC,MAAA;EAAAC,OAAAH,MACkCJ,oBAAkB,OAAA,IAAA;EAAAQ,OAAAJ,YAC/Cf,MAAMZ,QAAQ;EAAAgC,mBAAA;EAAA,OAAAL;CAAA,EAAA,CAAA;AAGrB;;;;;;;;;AAUA,MAAaM,mBAAwDrB,UAAU;CAC7E,OAAAI,gBACGL,eAAa,EAAA,IAAAX,WAAA;EAAA,OAAAgB,gBACXU,qBAAmB,EAAA,IAAA1B,WAAA;GAAA,OAAEY,MAAMZ;EAAQ,EAAA,CAAA;CAAA,EAAA,CAAA;AAG1C;;;;;;;;AAiBA,MAAaoC,oBAA4DxB,UAAU;CAEjF,IAAId,UACF,OAAO;CAGT,MAAMuC,gBAAgBjB,wBAAwB;CAC9C,MAAMe,wBACJvB,MAAMuB,mBAAmBE,cAAclC,eAAe,KAAKmC,SAASC;CAEtE/C,mBAAmB;EAEjB,IADkB2C,gBACdK,CAAS,EAAEC,QAAQ,0BAA0B,GAC/C,MAAM,IAAIC,MACR,mGACF;CAEJ,CAAC;CAED,OAAA1B,gBACGnB,QAAM;EAAA,IAAC8C,QAAK;GAAA,OAAER,gBAAgB;EAAC;EAAA,IAAAnC,WAAA;GAAA,OAAAgB,gBAC7BiB,iBAAe,EAAA,IAAAjC,WAAA;IAAA,OAAEY,MAAMZ;GAAQ,EAAA,CAAA;EAAA;CAAA,CAAA;AAGtC;;;;;;;AAoBA,SAAgBgD,YAAYC,SAAuC;CAEjE,MAAMnC,UAAUvB,WAAWc,YAAY;CAEvC,IAAI,CAACS,SACH,MAAM,IAAI4B,MAAM,0CAA0C;CAG5DlD,mBAAmB;EACjB,IAAIyD,SAASJ,cAAc,CAAC/B,QAAQR,QAClC;EAKFQ,QAAQR,OAAOE,SAAS;EAExBf,gBAAgB;GACd,IAAIqB,QAAQR,QACVQ,QAAQR,OAAOG,YAAY;EAE/B,CAAC;CACH,CAAC;CAED,OAAO,EACLsC,YAAY,EACV,gBAAgB,CAACE,SAASJ,WAC5B,EACF;AACF"}