@tamagui/radio-headless 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/useRadioGroup.cjs

@@ -1,30 +1,29 @@
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useRadioGroup_exports = {};
 __export(useRadioGroup_exports, {
-  useRadioGroup: () => useRadioGroup,
-  useRadioGroupItem: () => useRadioGroupItem,
-  useRadioGroupItemIndicator: () => useRadioGroupItemIndicator
+	useRadioGroup: () => useRadioGroup,
+	useRadioGroupItem: () => useRadioGroupItem,
+	useRadioGroupItemIndicator: () => useRadioGroupItemIndicator
 });
 module.exports = __toCommonJS(useRadioGroup_exports);
 var import_compose_refs = require("@tamagui/compose-refs");
@@ -38,165 +37,133 @@ var import_BubbleInput = require("./BubbleInput.cjs");
 var import_utils = require("./utils.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function useRadioGroup(params) {
-  const {
-    value: valueProp,
-    onValueChange,
-    defaultValue,
-    required,
-    disabled,
-    name,
-    native,
-    accentColor,
-    orientation,
-    ref
-  } = params;
-  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
-    prop: valueProp,
-    defaultProp: defaultValue,
-    onChange: onValueChange
-  });
-  return {
-    providerValue: {
-      value,
-      onChange: setValue,
-      required,
-      disabled,
-      name,
-      native,
-      accentColor
-    },
-    frameAttrs: {
-      role: "radiogroup",
-      "aria-orientation": orientation,
-      "data-disabled": disabled ? "" : void 0
-    },
-    rovingFocusGroupAttrs: {
-      orientation,
-      loop: true
-    }
-  };
+	const { value: valueProp, onValueChange, defaultValue, required, disabled, name, native, accentColor, orientation, ref } = params;
+	const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+		prop: valueProp,
+		defaultProp: defaultValue,
+		onChange: onValueChange
+	});
+	return {
+		providerValue: {
+			value,
+			onChange: setValue,
+			required,
+			disabled,
+			name,
+			native,
+			accentColor
+		},
+		frameAttrs: {
+			role: "radiogroup",
+			"aria-orientation": orientation,
+			"data-disabled": disabled ? "" : void 0
+		},
+		rovingFocusGroupAttrs: {
+			orientation,
+			loop: true
+		}
+	};
 }
-const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
-const useRadioGroupItem = params => {
-  const {
-    radioGroupContext,
-    value,
-    labelledBy: ariaLabelledby,
-    disabled: itemDisabled,
-    ref: refProp,
-    id,
-    onPress,
-    onKeyDown,
-    onFocus
-  } = params;
-  const {
-    value: groupValue,
-    disabled,
-    required,
-    onChange,
-    name,
-    native,
-    accentColor
-  } = (0, import_react.useContext)(radioGroupContext);
-  const [button, setButton] = (0, import_react.useState)(null);
-  const hasConsumerStoppedPropagationRef = (0, import_react.useRef)(false);
-  const ref = (0, import_react.useRef)(null);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(refProp, node => setButton(node), ref);
-  const isArrowKeyPressedRef = (0, import_react.useRef)(false);
-  const isFormControl = import_constants.isWeb ? button ? Boolean(button.closest("form")) : true : false;
-  const checked = groupValue === value;
-  const labelId = (0, import_label.useLabelContext)(button);
-  const labelledBy = ariaLabelledby || labelId;
-  (0, import_react.useEffect)(() => {
-    if (import_constants.isWeb) {
-      const handleKeyDown = event => {
-        if (ARROW_KEYS.includes(event.key)) isArrowKeyPressedRef.current = true;
-      };
-      const handleKeyUp = () => {
-        isArrowKeyPressedRef.current = false;
-      };
-      document.addEventListener("keydown", handleKeyDown);
-      document.addEventListener("keyup", handleKeyUp);
-      return () => {
-        document.removeEventListener("keydown", handleKeyDown);
-        document.removeEventListener("keyup", handleKeyUp);
-      };
-    }
-  }, []);
-  const isDisabled = disabled || itemDisabled;
-  return {
-    providerValue: {
-      checked
-    },
-    checked,
-    isFormControl,
-    bubbleInput: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BubbleInput.BubbleInput, {
-      isHidden: !native,
-      control: button,
-      bubbles: !hasConsumerStoppedPropagationRef.current,
-      name,
-      value,
-      checked,
-      required,
-      disabled: isDisabled,
-      ...(import_constants.isWeb && native && {
-        accentColor,
-        id
-      })
-    }),
-    native,
-    frameAttrs: {
-      "data-state": (0, import_utils.getState)(checked),
-      "data-disabled": isDisabled ? "" : void 0,
-      role: "radio",
-      "aria-labelledby": labelledBy,
-      "aria-checked": checked,
-      "aria-required": required,
-      disabled: isDisabled,
-      ref: composedRefs,
-      ...(import_constants.isWeb && {
-        type: "button",
-        value
-      }),
-      id,
-      onPress: (0, import_helpers.composeEventHandlers)(onPress, event => {
-        if (!checked) onChange?.(value);
-        if (isFormControl) {
-          hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
-          if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
-        }
-      }),
-      ...(import_constants.isWeb && {
-        onKeyDown: (0, import_helpers.composeEventHandlers)(onKeyDown, event => {
-          if (event.key === "Enter" || event.key === " ") {
-            if (!checked) onChange?.(value);
-          }
-        }),
-        onFocus: (0, import_helpers.composeEventHandlers)(onFocus, () => {
-          if (isArrowKeyPressedRef.current) ref.current?.click();
-        })
-      })
-    },
-    rovingFocusGroupAttrs: {
-      asChild: "except-style",
-      focusable: !isDisabled,
-      active: checked
-    }
-  };
+const ARROW_KEYS = [
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight"
+];
+const useRadioGroupItem = (params) => {
+	const { radioGroupContext, value, labelledBy: ariaLabelledby, disabled: itemDisabled, ref: refProp, id, onPress, onKeyDown, onFocus } = params;
+	const { value: groupValue, disabled, required, onChange, name, native, accentColor } = (0, import_react.useContext)(radioGroupContext);
+	const [button, setButton] = (0, import_react.useState)(null);
+	const hasConsumerStoppedPropagationRef = (0, import_react.useRef)(false);
+	const ref = (0, import_react.useRef)(null);
+	const composedRefs = (0, import_compose_refs.useComposedRefs)(refProp, (node) => setButton(node), ref);
+	const isArrowKeyPressedRef = (0, import_react.useRef)(false);
+	const isFormControl = import_constants.isWeb ? button ? Boolean(button.closest("form")) : true : false;
+	const checked = groupValue === value;
+	const labelId = (0, import_label.useLabelContext)(button);
+	const labelledBy = ariaLabelledby || labelId;
+	(0, import_react.useEffect)(() => {
+		if (import_constants.isWeb) {
+			const handleKeyDown = (event) => {
+				if (ARROW_KEYS.includes(event.key)) isArrowKeyPressedRef.current = true;
+			};
+			const handleKeyUp = () => {
+				isArrowKeyPressedRef.current = false;
+			};
+			document.addEventListener("keydown", handleKeyDown);
+			document.addEventListener("keyup", handleKeyUp);
+			return () => {
+				document.removeEventListener("keydown", handleKeyDown);
+				document.removeEventListener("keyup", handleKeyUp);
+			};
+		}
+	}, []);
+	const isDisabled = disabled || itemDisabled;
+	return {
+		providerValue: { checked },
+		checked,
+		isFormControl,
+		bubbleInput: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BubbleInput.BubbleInput, {
+			isHidden: !native,
+			control: button,
+			bubbles: !hasConsumerStoppedPropagationRef.current,
+			name,
+			value,
+			checked,
+			required,
+			disabled: isDisabled,
+			...import_constants.isWeb && native && {
+				accentColor,
+				id
+			}
+		}),
+		native,
+		frameAttrs: {
+			"data-state": (0, import_utils.getState)(checked),
+			"data-disabled": isDisabled ? "" : void 0,
+			role: "radio",
+			"aria-labelledby": labelledBy,
+			"aria-checked": checked,
+			"aria-required": required,
+			disabled: isDisabled,
+			ref: composedRefs,
+			...import_constants.isWeb && {
+				type: "button",
+				value
+			},
+			id,
+			onPress: (0, import_helpers.composeEventHandlers)(onPress, (event) => {
+				if (!checked) onChange?.(value);
+				if (isFormControl) {
+					hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+					if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+				}
+			}),
+			...import_constants.isWeb && {
+				onKeyDown: (0, import_helpers.composeEventHandlers)(onKeyDown, (event) => {
+					if (event.key === "Enter" || event.key === " ") {
+						if (!checked) onChange?.(value);
+					}
+				}),
+				onFocus: (0, import_helpers.composeEventHandlers)(onFocus, () => {
+					if (isArrowKeyPressedRef.current) ref.current?.click();
+				})
+			}
+		},
+		rovingFocusGroupAttrs: {
+			asChild: "except-style",
+			tabIndex: isDisabled ? -1 : 0,
+			active: checked
+		}
+	};
 };
 function useRadioGroupItemIndicator(params) {
-  const {
-    radioGroupItemContext,
-    disabled,
-    ...rest
-  } = params;
-  const {
-    checked
-  } = (0, import_react.useContext)(radioGroupItemContext);
-  return {
-    checked,
-    "data-state": (0, import_utils.getState)(checked),
-    "data-disabled": disabled ? "" : void 0,
-    ...rest
-  };
-}
+	const { radioGroupItemContext, disabled, ...rest } = params;
+	const { checked } = (0, import_react.useContext)(radioGroupItemContext);
+	return {
+		checked,
+		"data-state": (0, import_utils.getState)(checked),
+		"data-disabled": disabled ? "" : void 0,
+		...rest
+	};
+}

package/dist/cjs/useRadioGroup.native.cjs

@@ -0,0 +1,190 @@
+"use strict";
+
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useRadioGroup_exports = {};
+__export(useRadioGroup_exports, {
+	useRadioGroup: () => useRadioGroup,
+	useRadioGroupItem: () => useRadioGroupItem,
+	useRadioGroupItemIndicator: () => useRadioGroupItemIndicator
+});
+module.exports = __toCommonJS(useRadioGroup_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_compose_refs = require("@tamagui/compose-refs");
+var import_constants = require("@tamagui/constants");
+var import_focusable = require("@tamagui/focusable");
+var import_helpers = require("@tamagui/helpers");
+var import_label = require("@tamagui/label");
+var import_use_controllable_state = require("@tamagui/use-controllable-state");
+var import_react = require("react");
+var import_BubbleInput = require("./BubbleInput.native.js");
+var import_utils = require("./utils.native.js");
+function useRadioGroup(params) {
+	var { value: valueProp, onValueChange, defaultValue, required, disabled, name, native, accentColor, orientation, ref } = params;
+	var [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+		prop: valueProp,
+		defaultProp: defaultValue,
+		onChange: onValueChange
+	});
+	return {
+		providerValue: {
+			value,
+			onChange: setValue,
+			required,
+			disabled,
+			name,
+			native,
+			accentColor
+		},
+		frameAttrs: {
+			role: "radiogroup",
+			"aria-orientation": orientation,
+			"data-disabled": disabled ? "" : void 0
+		},
+		rovingFocusGroupAttrs: {
+			orientation,
+			loop: true
+		}
+	};
+}
+var ARROW_KEYS = [
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight"
+];
+var useRadioGroupItem = function(params) {
+	var { radioGroupContext, value, labelledBy: ariaLabelledby, disabled: itemDisabled, ref: refProp, id, onPress, onKeyDown, onFocus } = params;
+	var { value: groupValue, disabled, required, onChange, name, native, accentColor } = (0, import_react.useContext)(radioGroupContext);
+	var [button, setButton] = (0, import_react.useState)(null);
+	var hasConsumerStoppedPropagationRef = (0, import_react.useRef)(false);
+	var ref = (0, import_react.useRef)(null);
+	var composedRefs = (0, import_compose_refs.useComposedRefs)(refProp, function(node) {
+		return setButton(node);
+	}, ref);
+	var isArrowKeyPressedRef = (0, import_react.useRef)(false);
+	var isFormControl = import_constants.isWeb ? button ? Boolean(button.closest("form")) : true : false;
+	var checked = groupValue === value;
+	var labelId = (0, import_label.useLabelContext)(button);
+	var labelledBy = ariaLabelledby || labelId;
+	(0, import_react.useEffect)(function() {
+		if (import_constants.isWeb) {
+			var handleKeyDown = function(event) {
+				if (ARROW_KEYS.includes(event.key)) isArrowKeyPressedRef.current = true;
+			};
+			var handleKeyUp = function() {
+				isArrowKeyPressedRef.current = false;
+			};
+			document.addEventListener("keydown", handleKeyDown);
+			document.addEventListener("keyup", handleKeyUp);
+			return function() {
+				document.removeEventListener("keydown", handleKeyDown);
+				document.removeEventListener("keyup", handleKeyUp);
+			};
+		}
+	}, []);
+	(0, import_react.useEffect)(function() {
+		if (!id) return;
+		if (disabled) return;
+		return (0, import_focusable.registerFocusable)(id, {
+			focusAndSelect: function() {
+				onChange === null || onChange === void 0 || onChange(value);
+			},
+			focus: function() {}
+		});
+	}, [
+		id,
+		value,
+		disabled
+	]);
+	var isDisabled = disabled || itemDisabled;
+	return {
+		providerValue: { checked },
+		checked,
+		isFormControl,
+		bubbleInput: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BubbleInput.BubbleInput, {
+			isHidden: !native,
+			control: button,
+			bubbles: !hasConsumerStoppedPropagationRef.current,
+			name,
+			value,
+			checked,
+			required,
+			disabled: isDisabled,
+			...import_constants.isWeb && native && {
+				accentColor,
+				id
+			}
+		}),
+		native,
+		frameAttrs: {
+			"data-state": (0, import_utils.getState)(checked),
+			"data-disabled": isDisabled ? "" : void 0,
+			role: "radio",
+			"aria-labelledby": labelledBy,
+			"aria-checked": checked,
+			"aria-required": required,
+			disabled: isDisabled,
+			ref: composedRefs,
+			...import_constants.isWeb && {
+				type: "button",
+				value
+			},
+			id,
+			onPress: (0, import_helpers.composeEventHandlers)(onPress, function(event) {
+				if (!checked) onChange === null || onChange === void 0 || onChange(value);
+				if (isFormControl) {
+					hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+					if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
+				}
+			}),
+			...import_constants.isWeb && {
+				onKeyDown: (0, import_helpers.composeEventHandlers)(onKeyDown, function(event) {
+					if (event.key === "Enter" || event.key === " ") {
+						if (!checked) onChange === null || onChange === void 0 || onChange(value);
+					}
+				}),
+				onFocus: (0, import_helpers.composeEventHandlers)(onFocus, function() {
+					if (isArrowKeyPressedRef.current) {
+						var _ref_current;
+						(_ref_current = ref.current) === null || _ref_current === void 0 || _ref_current.click();
+					}
+				})
+			}
+		},
+		rovingFocusGroupAttrs: {
+			asChild: "except-style",
+			tabIndex: isDisabled ? -1 : 0,
+			active: checked
+		}
+	};
+};
+function useRadioGroupItemIndicator(params) {
+	var { radioGroupItemContext, disabled, ...rest } = params;
+	var { checked } = (0, import_react.useContext)(radioGroupItemContext);
+	return {
+		checked,
+		"data-state": (0, import_utils.getState)(checked),
+		"data-disabled": disabled ? "" : void 0,
+		...rest
+	};
+}