Files
avz-site/node_modules/.vite/deps/@radix-ui_react-radio-group.js
T

530 lines
18 KiB
JavaScript

"use client";
import {
Presence
} from "./chunk-INCCO7S4.js";
import {
createCollection,
useDirection,
usePrevious,
useSize
} from "./chunk-L2OGOWTU.js";
import {
Primitive,
composeEventHandlers,
createContextScope,
useCallbackRef,
useControllableState,
useId
} from "./chunk-MOFDO34C.js";
import {
useComposedRefs
} from "./chunk-2VUH7NEY.js";
import "./chunk-YF4B4G2L.js";
import {
require_jsx_runtime
} from "./chunk-2YVA4HRZ.js";
import {
require_react
} from "./chunk-WUR7D6NS.js";
import {
__toESM
} from "./chunk-G3PMV62Z.js";
// node_modules/@radix-ui/react-radio-group/dist/index.mjs
var React2 = __toESM(require_react(), 1);
// node_modules/@radix-ui/react-roving-focus/dist/index.mjs
var React = __toESM(require_react(), 1);
var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
var EVENT_OPTIONS = { bubbles: false, cancelable: true };
var GROUP_NAME = "RovingFocusGroup";
var [Collection, useCollection, createCollectionScope] = createCollection(GROUP_NAME);
var [createRovingFocusGroupContext, createRovingFocusGroupScope] = createContextScope(
GROUP_NAME,
[createCollectionScope]
);
var [RovingFocusProvider, useRovingFocusContext] = createRovingFocusGroupContext(GROUP_NAME);
var RovingFocusGroup = React.forwardRef(
(props, forwardedRef) => {
return (0, import_jsx_runtime.jsx)(Collection.Provider, { scope: props.__scopeRovingFocusGroup, children: (0, import_jsx_runtime.jsx)(Collection.Slot, { scope: props.__scopeRovingFocusGroup, children: (0, import_jsx_runtime.jsx)(RovingFocusGroupImpl, { ...props, ref: forwardedRef }) }) });
}
);
RovingFocusGroup.displayName = GROUP_NAME;
var RovingFocusGroupImpl = React.forwardRef((props, forwardedRef) => {
const {
__scopeRovingFocusGroup,
orientation,
loop = false,
dir,
currentTabStopId: currentTabStopIdProp,
defaultCurrentTabStopId,
onCurrentTabStopIdChange,
onEntryFocus,
preventScrollOnEntryFocus = false,
...groupProps
} = props;
const ref = React.useRef(null);
const composedRefs = useComposedRefs(forwardedRef, ref);
const direction = useDirection(dir);
const [currentTabStopId, setCurrentTabStopId] = useControllableState({
prop: currentTabStopIdProp,
defaultProp: defaultCurrentTabStopId ?? null,
onChange: onCurrentTabStopIdChange,
caller: GROUP_NAME
});
const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);
const handleEntryFocus = useCallbackRef(onEntryFocus);
const getItems = useCollection(__scopeRovingFocusGroup);
const isClickFocusRef = React.useRef(false);
const [focusableItemsCount, setFocusableItemsCount] = React.useState(0);
React.useEffect(() => {
const node = ref.current;
if (node) {
node.addEventListener(ENTRY_FOCUS, handleEntryFocus);
return () => node.removeEventListener(ENTRY_FOCUS, handleEntryFocus);
}
}, [handleEntryFocus]);
return (0, import_jsx_runtime.jsx)(
RovingFocusProvider,
{
scope: __scopeRovingFocusGroup,
orientation,
dir: direction,
loop,
currentTabStopId,
onItemFocus: React.useCallback(
(tabStopId) => setCurrentTabStopId(tabStopId),
[setCurrentTabStopId]
),
onItemShiftTab: React.useCallback(() => setIsTabbingBackOut(true), []),
onFocusableItemAdd: React.useCallback(
() => setFocusableItemsCount((prevCount) => prevCount + 1),
[]
),
onFocusableItemRemove: React.useCallback(
() => setFocusableItemsCount((prevCount) => prevCount - 1),
[]
),
children: (0, import_jsx_runtime.jsx)(
Primitive.div,
{
tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
"data-orientation": orientation,
...groupProps,
ref: composedRefs,
style: { outline: "none", ...props.style },
onMouseDown: composeEventHandlers(props.onMouseDown, () => {
isClickFocusRef.current = true;
}),
onFocus: composeEventHandlers(props.onFocus, (event) => {
const isKeyboardFocus = !isClickFocusRef.current;
if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
event.currentTarget.dispatchEvent(entryFocusEvent);
if (!entryFocusEvent.defaultPrevented) {
const items = getItems().filter((item) => item.focusable);
const activeItem = items.find((item) => item.active);
const currentItem = items.find((item) => item.id === currentTabStopId);
const candidateItems = [activeItem, currentItem, ...items].filter(
Boolean
);
const candidateNodes = candidateItems.map((item) => item.ref.current);
focusFirst(candidateNodes, preventScrollOnEntryFocus);
}
}
isClickFocusRef.current = false;
}),
onBlur: composeEventHandlers(props.onBlur, () => setIsTabbingBackOut(false))
}
)
}
);
});
var ITEM_NAME = "RovingFocusGroupItem";
var RovingFocusGroupItem = React.forwardRef(
(props, forwardedRef) => {
const {
__scopeRovingFocusGroup,
focusable = true,
active = false,
tabStopId,
children,
...itemProps
} = props;
const autoId = useId();
const id = tabStopId || autoId;
const context = useRovingFocusContext(ITEM_NAME, __scopeRovingFocusGroup);
const isCurrentTabStop = context.currentTabStopId === id;
const getItems = useCollection(__scopeRovingFocusGroup);
const { onFocusableItemAdd, onFocusableItemRemove, currentTabStopId } = context;
React.useEffect(() => {
if (focusable) {
onFocusableItemAdd();
return () => onFocusableItemRemove();
}
}, [focusable, onFocusableItemAdd, onFocusableItemRemove]);
return (0, import_jsx_runtime.jsx)(
Collection.ItemSlot,
{
scope: __scopeRovingFocusGroup,
id,
focusable,
active,
children: (0, import_jsx_runtime.jsx)(
Primitive.span,
{
tabIndex: isCurrentTabStop ? 0 : -1,
"data-orientation": context.orientation,
...itemProps,
ref: forwardedRef,
onMouseDown: composeEventHandlers(props.onMouseDown, (event) => {
if (!focusable) event.preventDefault();
else context.onItemFocus(id);
}),
onFocus: composeEventHandlers(props.onFocus, () => context.onItemFocus(id)),
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
if (event.key === "Tab" && event.shiftKey) {
context.onItemShiftTab();
return;
}
if (event.target !== event.currentTarget) return;
const focusIntent = getFocusIntent(event, context.orientation, context.dir);
if (focusIntent !== void 0) {
if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
event.preventDefault();
const items = getItems().filter((item) => item.focusable);
let candidateNodes = items.map((item) => item.ref.current);
if (focusIntent === "last") candidateNodes.reverse();
else if (focusIntent === "prev" || focusIntent === "next") {
if (focusIntent === "prev") candidateNodes.reverse();
const currentIndex = candidateNodes.indexOf(event.currentTarget);
candidateNodes = context.loop ? wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
}
setTimeout(() => focusFirst(candidateNodes));
}
}),
children: typeof children === "function" ? children({ isCurrentTabStop, hasTabStop: currentTabStopId != null }) : children
}
)
}
);
}
);
RovingFocusGroupItem.displayName = ITEM_NAME;
var MAP_KEY_TO_FOCUS_INTENT = {
ArrowLeft: "prev",
ArrowUp: "prev",
ArrowRight: "next",
ArrowDown: "next",
PageUp: "first",
Home: "first",
PageDown: "last",
End: "last"
};
function getDirectionAwareKey(key, dir) {
if (dir !== "rtl") return key;
return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
}
function getFocusIntent(event, orientation, dir) {
const key = getDirectionAwareKey(event.key, dir);
if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
return MAP_KEY_TO_FOCUS_INTENT[key];
}
function focusFirst(candidates, preventScroll = false) {
const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
for (const candidate of candidates) {
if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
candidate.focus({ preventScroll });
if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
}
}
function wrapArray(array, startIndex) {
return array.map((_, index) => array[(startIndex + index) % array.length]);
}
var Root = RovingFocusGroup;
var Item = RovingFocusGroupItem;
// node_modules/@radix-ui/react-radio-group/dist/index.mjs
var React3 = __toESM(require_react(), 1);
var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
var RADIO_NAME = "Radio";
var [createRadioContext, createRadioScope] = createContextScope(RADIO_NAME);
var [RadioProvider, useRadioContext] = createRadioContext(RADIO_NAME);
var Radio = React3.forwardRef(
(props, forwardedRef) => {
const {
__scopeRadio,
name,
checked = false,
required,
disabled,
value = "on",
onCheck,
form,
...radioProps
} = props;
const [button, setButton] = React3.useState(null);
const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node));
const hasConsumerStoppedPropagationRef = React3.useRef(false);
const isFormControl = button ? form || !!button.closest("form") : true;
return (0, import_jsx_runtime2.jsxs)(RadioProvider, { scope: __scopeRadio, checked, disabled, children: [
(0, import_jsx_runtime2.jsx)(
Primitive.button,
{
type: "button",
role: "radio",
"aria-checked": checked,
"data-state": getState(checked),
"data-disabled": disabled ? "" : void 0,
disabled,
value,
...radioProps,
ref: composedRefs,
onClick: composeEventHandlers(props.onClick, (event) => {
if (!checked) onCheck?.();
if (isFormControl) {
hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation();
}
})
}
),
isFormControl && (0, import_jsx_runtime2.jsx)(
RadioBubbleInput,
{
control: button,
bubbles: !hasConsumerStoppedPropagationRef.current,
name,
value,
checked,
required,
disabled,
form,
style: { transform: "translateX(-100%)" }
}
)
] });
}
);
Radio.displayName = RADIO_NAME;
var INDICATOR_NAME = "RadioIndicator";
var RadioIndicator = React3.forwardRef(
(props, forwardedRef) => {
const { __scopeRadio, forceMount, ...indicatorProps } = props;
const context = useRadioContext(INDICATOR_NAME, __scopeRadio);
return (0, import_jsx_runtime2.jsx)(Presence, { present: forceMount || context.checked, children: (0, import_jsx_runtime2.jsx)(
Primitive.span,
{
"data-state": getState(context.checked),
"data-disabled": context.disabled ? "" : void 0,
...indicatorProps,
ref: forwardedRef
}
) });
}
);
RadioIndicator.displayName = INDICATOR_NAME;
var BUBBLE_INPUT_NAME = "RadioBubbleInput";
var RadioBubbleInput = React3.forwardRef(
({
__scopeRadio,
control,
checked,
bubbles = true,
...props
}, forwardedRef) => {
const ref = React3.useRef(null);
const composedRefs = useComposedRefs(ref, forwardedRef);
const prevChecked = usePrevious(checked);
const controlSize = useSize(control);
React3.useEffect(() => {
const input = ref.current;
if (!input) return;
const inputProto = window.HTMLInputElement.prototype;
const descriptor = Object.getOwnPropertyDescriptor(
inputProto,
"checked"
);
const setChecked = descriptor.set;
if (prevChecked !== checked && setChecked) {
const event = new Event("click", { bubbles });
setChecked.call(input, checked);
input.dispatchEvent(event);
}
}, [prevChecked, checked, bubbles]);
return (0, import_jsx_runtime2.jsx)(
Primitive.input,
{
type: "radio",
"aria-hidden": true,
defaultChecked: checked,
...props,
tabIndex: -1,
ref: composedRefs,
style: {
...props.style,
...controlSize,
position: "absolute",
pointerEvents: "none",
opacity: 0,
margin: 0
}
}
);
}
);
RadioBubbleInput.displayName = BUBBLE_INPUT_NAME;
function getState(checked) {
return checked ? "checked" : "unchecked";
}
var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
var RADIO_GROUP_NAME = "RadioGroup";
var [createRadioGroupContext, createRadioGroupScope] = createContextScope(RADIO_GROUP_NAME, [
createRovingFocusGroupScope,
createRadioScope
]);
var useRovingFocusGroupScope = createRovingFocusGroupScope();
var useRadioScope = createRadioScope();
var [RadioGroupProvider, useRadioGroupContext] = createRadioGroupContext(RADIO_GROUP_NAME);
var RadioGroup = React2.forwardRef(
(props, forwardedRef) => {
const {
__scopeRadioGroup,
name,
defaultValue,
value: valueProp,
required = false,
disabled = false,
orientation,
dir,
loop = true,
onValueChange,
...groupProps
} = props;
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup);
const direction = useDirection(dir);
const [value, setValue] = useControllableState({
prop: valueProp,
defaultProp: defaultValue ?? null,
onChange: onValueChange,
caller: RADIO_GROUP_NAME
});
return (0, import_jsx_runtime3.jsx)(
RadioGroupProvider,
{
scope: __scopeRadioGroup,
name,
required,
disabled,
value,
onValueChange: setValue,
children: (0, import_jsx_runtime3.jsx)(
Root,
{
asChild: true,
...rovingFocusGroupScope,
orientation,
dir: direction,
loop,
children: (0, import_jsx_runtime3.jsx)(
Primitive.div,
{
role: "radiogroup",
"aria-required": required,
"aria-orientation": orientation,
"data-disabled": disabled ? "" : void 0,
dir: direction,
...groupProps,
ref: forwardedRef
}
)
}
)
}
);
}
);
RadioGroup.displayName = RADIO_GROUP_NAME;
var ITEM_NAME2 = "RadioGroupItem";
var RadioGroupItem = React2.forwardRef(
(props, forwardedRef) => {
const { __scopeRadioGroup, disabled, ...itemProps } = props;
const context = useRadioGroupContext(ITEM_NAME2, __scopeRadioGroup);
const isDisabled = context.disabled || disabled;
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeRadioGroup);
const radioScope = useRadioScope(__scopeRadioGroup);
const ref = React2.useRef(null);
const composedRefs = useComposedRefs(forwardedRef, ref);
const checked = context.value === itemProps.value;
const isArrowKeyPressedRef = React2.useRef(false);
React2.useEffect(() => {
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);
};
}, []);
return (0, import_jsx_runtime3.jsx)(
Item,
{
asChild: true,
...rovingFocusGroupScope,
focusable: !isDisabled,
active: checked,
children: (0, import_jsx_runtime3.jsx)(
Radio,
{
disabled: isDisabled,
required: context.required,
checked,
...radioScope,
...itemProps,
name: context.name,
ref: composedRefs,
onCheck: () => context.onValueChange(itemProps.value),
onKeyDown: composeEventHandlers((event) => {
if (event.key === "Enter") event.preventDefault();
}),
onFocus: composeEventHandlers(itemProps.onFocus, () => {
if (isArrowKeyPressedRef.current) ref.current?.click();
})
}
)
}
);
}
);
RadioGroupItem.displayName = ITEM_NAME2;
var INDICATOR_NAME2 = "RadioGroupIndicator";
var RadioGroupIndicator = React2.forwardRef(
(props, forwardedRef) => {
const { __scopeRadioGroup, ...indicatorProps } = props;
const radioScope = useRadioScope(__scopeRadioGroup);
return (0, import_jsx_runtime3.jsx)(RadioIndicator, { ...radioScope, ...indicatorProps, ref: forwardedRef });
}
);
RadioGroupIndicator.displayName = INDICATOR_NAME2;
var Root2 = RadioGroup;
var Item2 = RadioGroupItem;
var Indicator = RadioGroupIndicator;
export {
Indicator,
Item2 as Item,
RadioGroup,
RadioGroupIndicator,
RadioGroupItem,
Root2 as Root,
createRadioGroupScope
};
//# sourceMappingURL=@radix-ui_react-radio-group.js.map