@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/RadioGroup.jsx

@@ -1,10 +1,23 @@
-import { Provider, filterDOMProps, useRenderProps } from "./utils.jsx";
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/RadioGroup.tsx
+import { Provider, dataAttr, filterDOMProps, useRenderProps } from "./utils.jsx";
 import { VisuallyHidden } from "./VisuallyHidden.jsx";
-import { FieldErrorContext } from "./FieldError.jsx";
 import { TextContext } from "./Text.jsx";
+import { FieldErrorContext } from "./FieldError.jsx";
 import { SelectionIndicatorContext } from "./SelectionIndicator.jsx";
-import { Show, createContext, createMemo, createSignal, createUniqueId, splitProps, useContext } from "solid-js";
-import { createFocusRing, createHover, createRadio, createRadioGroup, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { Show, createContext, createMemo, createSignal, createUniqueId, useContext } from "solid-js";
+import { bindCapture, createFocusRing, createHover, createRadio, createRadioGroup, mergeProps } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { VALID_VALIDITY_STATE, createRadioGroupState } from "@proyecto-viviana/solid-stately";
 //#region src/RadioGroup.tsx
 /**
@@ -13,7 +26,7 @@ import { VALID_VALIDITY_STATE, createRadioGroupState } from "@proyecto-viviana/s
 * Pre-wired headless radio components that combine state + aria hooks.
 * Port of react-aria-components/src/RadioGroup.tsx
 */
-function assignRef(ref, el) {
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -58,20 +71,21 @@ const RadioContext = createContext(null);
 */
 function RadioGroup(props) {
 	const contextProps = useContext(RadioGroupContext);
-	const contextSlotProps = contextProps?.slots?.[props.slot ?? "default"];
+	const contextSlotProps = contextProps?.slots?.[typeof props.slot === "string" ? props.slot : "default"];
 	const contextBaseProps = createMemo(() => {
 		if (!contextProps) return {};
 		const { slots: _slots, ...rest } = contextProps;
 		return rest;
 	});
-	const mergedProps = contextProps ? mergeProps$1(contextBaseProps(), contextSlotProps ?? {}, props) : props;
+	const mergedProps = contextProps ? mergeProps(contextBaseProps(), contextSlotProps ?? {}, props) : props;
 	const [local, ariaProps] = splitProps(mergedProps, [
 		"class",
 		"style",
 		"render",
 		"ref",
 		"slot",
-		"renderHelpText"
+		"renderHelpText",
+		"children"
 	]);
 	const state = createRadioGroupState(() => ({
 		value: mergedProps.value,
@@ -105,9 +119,6 @@ function RadioGroup(props) {
 		state
 	}));
 	const renderProps = useRenderProps({
-		get children() {
-			return props.children;
-		},
 		class: local.class,
 		style: local.style,
 		defaultClassName: "solidaria-RadioGroup"
@@ -128,8 +139,6 @@ function RadioGroup(props) {
 		if (!(target instanceof HTMLInputElement) || target.type !== "radio") return;
 		state.updateValidation(getNativeValidation(target));
 		state.commitValidation();
-		target.focus();
-		event.preventDefault();
 	};
 	const handleGroupChangeCapture = (event) => {
 		const target = event.target;
@@ -137,9 +146,15 @@ function RadioGroup(props) {
 		state.updateValidation(target.validity.valid ? validValidation : getNativeValidation(target));
 		state.commitValidation();
 	};
+	const [groupEl, setGroupEl] = createSignal(null);
 	const setGroupRef = (el) => {
-		assignRef(local.ref, el);
+		setGroupEl(el);
+		assignRef$1(local.ref, el);
 	};
+	bindCapture(groupEl, {
+		invalid: handleGroupInvalidCapture,
+		change: handleGroupChangeCapture
+	});
 	const groupDescribedBy = () => {
 		const ids = [
 			cleanGroupProps()["aria-describedby"],
@@ -180,13 +195,13 @@ function RadioGroup(props) {
 				return state;
 			}
 		};
-		const renderedChildren = createMemo(() => {
-			const children = props.children;
-			if (typeof children === "function") return children.length > 0 ? children(childRenderValues) : children();
-			return children;
-		});
+		const childrenOnce = local.children;
+		const renderedChildren = () => {
+			if (typeof childrenOnce === "function") return childrenOnce.length > 0 ? childrenOnce(childRenderValues) : childrenOnce();
+			return childrenOnce;
+		};
 		return <>
-        {renderedChildren()}
+        {typeof childrenOnce === "function" ? renderedChildren() : childrenOnce}
         <Show when={(local.renderHelpText ?? true) && mergedProps.description}>
           <div {...groupAria.descriptionProps}>
             {mergedProps.description}
@@ -199,10 +214,7 @@ function RadioGroup(props) {
         </Show>
       </>;
 	};
-	const groupEventProps = {
-		onInvalidCapture: handleGroupInvalidCapture,
-		onChangeCapture: handleGroupChangeCapture
-	};
+	const groupEventProps = {};
 	const customRootProps = () => ({
 		...domProps(),
 		...cleanGroupProps(),
@@ -215,19 +227,28 @@ function RadioGroup(props) {
 		style: renderProps.style(),
 		slot: local.slot,
 		"data-orientation": ariaProps.orientation ?? "vertical",
-		"data-disabled": state.isDisabled || void 0,
-		"data-readonly": state.isReadOnly || void 0,
-		"data-required": state.isRequired || void 0,
-		"data-invalid": isInvalid() || void 0,
-		children: <GroupChildren />
+		"data-disabled": dataAttr(state.isDisabled),
+		"data-readonly": dataAttr(state.isReadOnly),
+		"data-required": dataAttr(state.isRequired),
+		"data-invalid": dataAttr(isInvalid())
 	});
-	return <RadioGroupStateContext.Provider value={state}>
-      <FieldErrorContext.Provider value={fieldErrorContext}>
-        {local.render ? local.render(customRootProps(), renderValues()) : <div {...domProps()} {...cleanGroupProps()} {...groupEventProps} ref={setGroupRef} onFocusIn={handleGroupFocusIn} onFocusOut={handleGroupFocusOut} aria-describedby={groupDescribedBy()} class={renderProps.class()} style={renderProps.style()} slot={local.slot} data-orientation={ariaProps.orientation ?? "vertical"} data-disabled={state.isDisabled || void 0} data-readonly={state.isReadOnly || void 0} data-required={state.isRequired || void 0} data-invalid={isInvalid() || void 0}>
-            <GroupChildren />
-          </div>}
-      </FieldErrorContext.Provider>
-    </RadioGroupStateContext.Provider>;
+	return <RadioGroupStateContext value={state}>
+      <FieldErrorContext value={fieldErrorContext}>
+        <RadioGroupDefaultRoot render={local.render} getCustomRootProps={customRootProps} getRenderValues={renderValues} getDomProps={domProps} getCleanGroupProps={cleanGroupProps} groupEventProps={groupEventProps} setGroupRef={setGroupRef} onFocusIn={handleGroupFocusIn} onFocusOut={handleGroupFocusOut} getDescribedBy={groupDescribedBy} getClass={renderProps.class} getStyle={renderProps.style} slot={local.slot} getOrientation={() => ariaProps.orientation ?? "vertical"} getDisabled={() => state.isDisabled || void 0} getReadOnly={() => state.isReadOnly || void 0} getRequired={() => state.isRequired || void 0} getInvalid={() => isInvalid() || void 0}>
+          <GroupChildren />
+        </RadioGroupDefaultRoot>
+      </FieldErrorContext>
+    </RadioGroupStateContext>;
+}
+function RadioGroupDefaultRoot(props) {
+	const children = props.children;
+	if (props.render) return props.render({
+		...props.getCustomRootProps(),
+		children
+	}, props.getRenderValues());
+	return <div {...props.getDomProps()} {...props.getCleanGroupProps()} {...props.groupEventProps} ref={props.setGroupRef} onFocusIn={props.onFocusIn} onFocusOut={props.onFocusOut} aria-describedby={props.getDescribedBy()} class={props.getClass()} style={props.getStyle()} slot={props.slot} data-orientation={props.getOrientation()} data-disabled={dataAttr(props.getDisabled())} data-readonly={dataAttr(props.getReadOnly())} data-required={dataAttr(props.getRequired())} data-invalid={dataAttr(props.getInvalid())}>
+      {children}
+    </div>;
 }
 /**
 * Internal Radio implementation that has access to RadioGroupStateContext.
@@ -237,13 +258,13 @@ function RadioImpl(props) {
 	const [inputElement, setInputElement] = createSignal(null);
 	const { state } = props;
 	const contextProps = useContext(RadioContext);
-	const contextSlotProps = contextProps?.slots?.[props.radioProps.slot ?? "default"];
+	const contextSlotProps = contextProps?.slots?.[typeof props.radioProps.slot === "string" ? props.radioProps.slot : "default"];
 	const contextBaseProps = createMemo(() => {
 		if (!contextProps) return {};
 		const { slots: _slots, ...rest } = contextProps;
 		return rest;
 	});
-	const radioProps = contextProps ? mergeProps$1(contextBaseProps(), contextSlotProps ?? {}, props.radioProps) : props.radioProps;
+	const radioProps = contextProps ? mergeProps(contextBaseProps(), contextSlotProps ?? {}, props.radioProps) : props.radioProps;
 	const inputRefs = createMemo(() => [
 		contextBaseProps().inputRef,
 		contextSlotProps?.inputRef,
@@ -324,9 +345,15 @@ function RadioImpl(props) {
 		return rest;
 	};
 	const cleanInputProps = () => {
-		const { ref: _ref3, onFocus: _onFocus, onBlur: _onBlur, ...rest } = radioAria.inputProps;
+		const inputProps = radioAria.inputProps;
+		const rest = {};
+		for (const key of Object.keys(inputProps)) {
+			if (key === "ref" || key === "onFocus" || key === "onBlur" || key === "aria-describedby") continue;
+			rest[key] = inputProps[key];
+		}
 		return rest;
 	};
+	const inputDescribedBy = () => radioAria.inputDescribedBy();
 	const cleanFocusProps = () => {
 		const { ref: _ref4, onFocus: _onFocus, onBlur: _onBlur, ...rest } = focusProps;
 		return rest;
@@ -340,7 +367,6 @@ function RadioImpl(props) {
 		focusProps.onBlur?.(event);
 	};
 	const handleLabelClick = (event) => {
-		ariaProps.onClickCapture?.(event);
 		radioAria.labelProps.onClick?.(event);
 	};
 	const handleLabelClickCapture = (event) => {
@@ -349,36 +375,31 @@ function RadioImpl(props) {
 	const handleInputClick = (event) => {
 		radioAria.inputProps.onClick?.(event);
 	};
-	const handleInputInvalid = (event) => {
-		state.updateValidation(getNativeValidation(event.currentTarget));
-		state.commitValidation();
-		event.currentTarget.focus();
-		event.preventDefault();
-	};
 	const handleInputChange = (event) => {
 		radioAria.inputProps.onChange?.(event);
 		state.updateValidation(event.currentTarget.validity.valid ? validValidation : getNativeValidation(event.currentTarget));
 		state.commitValidation();
 	};
+	const [labelEl, setLabelEl] = createSignal(null);
 	const setLabelRef = (el) => {
-		assignRef(local.ref, el);
+		setLabelEl(el);
+		assignRef$1(local.ref, el);
 	};
+	bindCapture(labelEl, { click: handleLabelClickCapture });
 	const setInputRef = (el) => {
+		if (!el) {
+			setInputElement(null);
+			return;
+		}
 		setInputElement(el);
-		el.addEventListener("invalid", (event) => {
-			state.updateValidation(getNativeValidation(el));
-			state.commitValidation();
-			el.focus();
-			event.preventDefault();
-		});
 		el.addEventListener("change", () => {
 			state.updateValidation(el.validity.valid ? validValidation : getNativeValidation(el));
 			state.commitValidation();
 		});
-		for (const ref of inputRefs()) assignRef(ref, el);
+		for (const ref of inputRefs()) assignRef$1(ref, el);
 	};
 	const hiddenInput = <VisuallyHidden>
-      <input ref={setInputRef} {...cleanInputProps()} {...cleanFocusProps()} onFocus={handleInputFocus} onBlur={handleInputBlur} onInvalid={handleInputInvalid} onChange={handleInputChange} onClick={handleInputClick} />
+      <input ref={setInputRef} {...cleanInputProps()} {...cleanFocusProps()} aria-describedby={inputDescribedBy()} onFocus={handleInputFocus} onBlur={handleInputBlur} onChange={handleInputChange} onClick={handleInputClick} />
     </VisuallyHidden>;
 	const labelChildren = () => <>
       {hiddenInput}
@@ -403,24 +424,26 @@ function RadioImpl(props) {
 		style: renderProps.style(),
 		slot: local.slot,
 		onClick: handleLabelClick,
-		onClickCapture: handleLabelClickCapture,
-		"data-selected": radioAria.isSelected() || void 0,
-		"data-pressed": radioAria.isPressed() || void 0,
-		"data-hovered": isHovered() || void 0,
-		"data-focused": isFocused() || void 0,
-		"data-focus-visible": isFocusVisible() || void 0,
-		"data-disabled": radioAria.isDisabled || void 0,
-		"data-readonly": state.isReadOnly || void 0,
-		"data-invalid": state.isInvalid || void 0,
-		"data-required": state.isRequired || void 0,
+		"data-selected": dataAttr(radioAria.isSelected()),
+		"data-pressed": dataAttr(radioAria.isPressed()),
+		"data-hovered": dataAttr(isHovered()),
+		"data-focused": dataAttr(isFocused()),
+		"data-focus-visible": dataAttr(isFocusVisible()),
+		"data-disabled": dataAttr(radioAria.isDisabled),
+		"data-readonly": dataAttr(state.isReadOnly),
+		"data-invalid": dataAttr(state.isInvalid),
+		"data-required": dataAttr(state.isRequired),
 		children: labelChildren()
 	});
-	const labelCaptureProps = { onClickCapture: handleLabelClickCapture };
-	return <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
-      {local.render ? local.render(customLabelProps(), renderValues()) : <label {...domProps()} {...cleanLabelProps()} {...cleanHoverProps()} ref={setLabelRef} class={renderProps.class()} style={renderProps.style()} slot={local.slot} onClick={handleLabelClick} {...labelCaptureProps} data-selected={radioAria.isSelected() || void 0} data-pressed={radioAria.isPressed() || void 0} data-hovered={isHovered() || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-disabled={radioAria.isDisabled || void 0} data-readonly={state.isReadOnly || void 0} data-invalid={state.isInvalid || void 0} data-required={state.isRequired || void 0}>
-          {labelChildren()}
-        </label>}
-    </SelectionIndicatorContext.Provider>;
+	const labelCaptureProps = {};
+	if (local.render) return <SelectionIndicatorContext value={selectionIndicatorContext()}>
+        {local.render(customLabelProps(), renderValues())}
+      </SelectionIndicatorContext>;
+	return <SelectionIndicatorContext value={selectionIndicatorContext()}>
+      <label {...domProps()} {...cleanLabelProps()} {...cleanHoverProps()} ref={setLabelRef} class={renderProps.class()} style={renderProps.style()} slot={local.slot} onClick={handleLabelClick} {...labelCaptureProps} data-selected={dataAttr(radioAria.isSelected())} data-pressed={dataAttr(radioAria.isPressed())} data-hovered={dataAttr(isHovered())} data-focused={dataAttr(isFocused())} data-focus-visible={dataAttr(isFocusVisible())} data-disabled={dataAttr(radioAria.isDisabled)} data-readonly={dataAttr(state.isReadOnly)} data-invalid={dataAttr(state.isInvalid)} data-required={dataAttr(state.isRequired)}>
+        {labelChildren()}
+      </label>
+    </SelectionIndicatorContext>;
 }
 /**
 * A radio represents an individual option within a radio group.
@@ -440,10 +463,9 @@ function RadioImpl(props) {
 * ```
 */
 function Radio(props) {
-	const getState = createMemo(() => useContext(RadioGroupStateContext));
-	return <Show when={getState()} fallback={null} keyed>
-      {(state) => <RadioImpl radioProps={props} state={state} />}
-    </Show>;
+	const state = useContext(RadioGroupStateContext);
+	if (!state) return null;
+	return <RadioImpl radioProps={props} state={state} />;
 }
 const RadioFieldContext = createContext(null);
 const InternalRadioContext = createContext(null);
@@ -474,13 +496,13 @@ function RadioFieldImpl(props) {
 	const [inputElement, setInputElement] = createSignal(null);
 	const { state } = props;
 	const contextProps = useContext(RadioFieldContext);
-	const contextSlotProps = contextProps?.slots?.[props.fieldProps.slot ?? "default"];
+	const contextSlotProps = contextProps?.slots?.[typeof props.fieldProps.slot === "string" ? props.fieldProps.slot : "default"];
 	const contextBaseProps = createMemo(() => {
 		if (!contextProps) return {};
 		const { slots: _slots, ...rest } = contextProps;
 		return rest;
 	});
-	const fieldProps = contextProps ? mergeProps$1(contextBaseProps(), contextSlotProps ?? {}, props.fieldProps) : props.fieldProps;
+	const fieldProps = contextProps ? mergeProps(contextBaseProps(), contextSlotProps ?? {}, props.fieldProps) : props.fieldProps;
 	const inputRefs = createMemo(() => [
 		contextBaseProps().inputRef,
 		contextSlotProps?.inputRef,
@@ -508,20 +530,14 @@ function RadioFieldImpl(props) {
 	} } };
 	const setInputRef = (el) => {
 		setInputElement(el);
-		el.addEventListener("invalid", (event) => {
-			state.updateValidation(getNativeValidation(el));
-			state.commitValidation();
-			el.focus();
-			event.preventDefault();
-		});
 		el.addEventListener("change", () => {
 			state.updateValidation(el.validity.valid ? validValidation : getNativeValidation(el));
 			state.commitValidation();
 		});
-		for (const ref of inputRefs()) assignRef(ref, el);
+		for (const ref of inputRefs()) assignRef$1(ref, el);
 	};
 	const setFieldRef = (el) => {
-		assignRef(local.ref, el);
+		assignRef$1(local.ref, el);
 	};
 	const internalContext = {
 		isSelected: () => radioAria.isSelected(),
@@ -529,6 +545,7 @@ function RadioFieldImpl(props) {
 		isDisabled: () => radioAria.isDisabled,
 		labelProps: () => radioAria.labelProps,
 		inputProps: () => radioAria.inputProps,
+		inputDescribedBy: () => radioAria.inputDescribedBy(),
 		setInputRef,
 		defaultClassName: "solidaria-RadioButton"
 	};
@@ -576,14 +593,14 @@ function RadioFieldImpl(props) {
 		});
 		return <>{renderedChildren()}</>;
 	};
-	return <div {...domProps()} ref={setFieldRef} class={renderProps.class()} style={renderProps.style()} slot={local.slot} data-selected={radioAria.isSelected() || void 0} data-disabled={radioAria.isDisabled || void 0} data-readonly={state.isReadOnly || void 0} data-invalid={state.isInvalid || void 0} data-required={state.isRequired || void 0}>
-      <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
-        <InternalRadioContext.Provider value={internalContext}>
+	return <div {...domProps()} ref={setFieldRef} class={renderProps.class()} style={renderProps.style()} slot={local.slot} data-selected={dataAttr(radioAria.isSelected())} data-disabled={dataAttr(radioAria.isDisabled)} data-readonly={dataAttr(state.isReadOnly)} data-invalid={dataAttr(state.isInvalid)} data-required={dataAttr(state.isRequired)}>
+      <SelectionIndicatorContext value={selectionIndicatorContext()}>
+        <InternalRadioContext value={internalContext}>
           <Provider values={[[TextContext, textSlots]]}>
             <FieldChildren />
           </Provider>
-        </InternalRadioContext.Provider>
-      </SelectionIndicatorContext.Provider>
+        </InternalRadioContext>
+      </SelectionIndicatorContext>
     </div>;
 }
 /**
@@ -654,23 +671,17 @@ function RadioButtonImpl(props) {
 	const handleInputClick = (event) => {
 		ctx.inputProps().onClick?.(event);
 	};
-	const handleInputInvalid = (event) => {
-		state.updateValidation(getNativeValidation(event.currentTarget));
-		state.commitValidation();
-		event.currentTarget.focus();
-		event.preventDefault();
-	};
 	const handleInputChange = (event) => {
 		ctx.inputProps().onChange?.(event);
 		state.updateValidation(event.currentTarget.validity.valid ? validValidation : getNativeValidation(event.currentTarget));
 		state.commitValidation();
 	};
 	const setButtonRef = (el) => {
-		assignRef(props.buttonProps.ref, el);
+		assignRef$1(props.buttonProps.ref, el);
 	};
-	return <label {...cleanLabelProps()} {...cleanHoverProps()} ref={setButtonRef} class={renderProps.class()} style={renderProps.style()} slot={props.buttonProps.slot} data-selected={ctx.isSelected() || void 0} data-pressed={ctx.isPressed() || void 0} data-hovered={isHovered() || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-disabled={ctx.isDisabled() || void 0} data-readonly={state.isReadOnly || void 0} data-invalid={state.isInvalid || void 0} data-required={state.isRequired || void 0}>
+	return <label {...cleanLabelProps()} {...cleanHoverProps()} ref={setButtonRef} class={renderProps.class()} style={renderProps.style()} slot={props.buttonProps.slot} data-selected={dataAttr(ctx.isSelected())} data-pressed={dataAttr(ctx.isPressed())} data-hovered={dataAttr(isHovered())} data-focused={dataAttr(isFocused())} data-focus-visible={dataAttr(isFocusVisible())} data-disabled={dataAttr(ctx.isDisabled())} data-readonly={dataAttr(state.isReadOnly)} data-invalid={dataAttr(state.isInvalid)} data-required={dataAttr(state.isRequired)}>
       <VisuallyHidden>
-        <input ref={ctx.setInputRef} {...cleanInputProps()} {...cleanFocusProps()} onFocus={handleInputFocus} onBlur={handleInputBlur} onInvalid={handleInputInvalid} onChange={handleInputChange} onClick={handleInputClick} />
+        <input ref={ctx.setInputRef} {...cleanInputProps()} {...cleanFocusProps()} aria-describedby={ctx.inputDescribedBy()} onFocus={handleInputFocus} onBlur={handleInputBlur} onChange={handleInputChange} onClick={handleInputClick} />
       </VisuallyHidden>
       {renderProps.renderChildren()}
     </label>;