@yamada-ui/react/dist/esm/components/segmented-control/use-segmented-control.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { createContext as createContext$1 } from "../../utils/context.js";
import { visuallyHiddenAttributes } from "../../utils/dom.js";
import { mergeRefs } from "../../utils/ref.js";
import { utils_exports } from "../../utils/index.js";
import { useControllableState } from "../../hooks/use-controllable-state/index.js";
import { createDescendants } from "../../hooks/use-descendants/index.js";
import { useCallback, useId } from "react";

//#region src/components/segmented-control/use-segmented-control.ts
const [SegmentedControlContext, useSegmentedControlContext] = createContext$1({ name: "SegmentedControlContext" });
const { DescendantsContext: SegmentedControlDescendantsContext, useDescendant: useSegmentedControlDescendant, useDescendants: useSegmentedControlDescendants } = createDescendants();
const useSegmentedControl = ({ id, name, defaultValue, disabled, orientation = "horizontal", readOnly, value: valueProp, onChange: onChangeProp,...rest } = {}) => {
	const uuid = useId();
	const [value, setValue] = useControllableState({
		defaultValue,
		value: valueProp,
		onChange: onChangeProp
	});
	const descendants = useSegmentedControlDescendants();
	id ??= uuid;
	name ??= uuid;
	const getRootProps = useCallback((props) => ({
		id,
		"aria-disabled": (0, utils_exports.ariaAttr)(disabled),
		"aria-orientation": orientation,
		"data-disabled": (0, utils_exports.dataAttr)(disabled),
		"data-orientation": orientation,
		"data-readonly": (0, utils_exports.dataAttr)(readOnly),
		role: "radiogroup",
		...rest,
		...props
	}), [
		disabled,
		id,
		orientation,
		readOnly,
		rest
	]);
	return {
		id,
		name,
		descendants,
		disabled,
		orientation,
		readOnly,
		setValue,
		value,
		getRootProps
	};
};
const useSegmentedControlItem = ({ disabled, readOnly, value, inputProps,...rest }) => {
	const { name, disabled: rootDisabled, orientation, readOnly: rootReadOnly, setValue, value: selectedValue } = useSegmentedControlContext();
	const { register } = useSegmentedControlDescendant({ disabled: disabled || readOnly });
	const checked = value === selectedValue;
	const trulyDisabled = disabled ?? rootDisabled;
	const trulyReadOnly = readOnly ?? rootReadOnly;
	const interactive = !(trulyReadOnly || trulyDisabled);
	const onChange = useCallback((ev) => {
		setValue(ev.target.value);
	}, [setValue]);
	const getLabelProps = useCallback((props) => ({
		"aria-disabled": (0, utils_exports.ariaAttr)(trulyDisabled),
		"aria-readonly": (0, utils_exports.ariaAttr)(trulyReadOnly),
		"data-checked": (0, utils_exports.dataAttr)(checked),
		"data-disabled": (0, utils_exports.dataAttr)(trulyDisabled),
		"data-orientation": orientation,
		"data-readonly": (0, utils_exports.dataAttr)(trulyReadOnly),
		"data-root-disabled": (0, utils_exports.dataAttr)(rootDisabled),
		"data-root-readonly": (0, utils_exports.dataAttr)(rootReadOnly),
		...props,
		...rest
	}), [
		orientation,
		trulyDisabled,
		trulyReadOnly,
		checked,
		rootDisabled,
		rootReadOnly,
		rest
	]);
	return {
		checked,
		getInputProps: useCallback(({ ref,...props } = {}) => ({
			type: "radio",
			name,
			style: visuallyHiddenAttributes.style,
			"aria-disabled": (0, utils_exports.ariaAttr)(trulyDisabled),
			"aria-readonly": (0, utils_exports.ariaAttr)(trulyReadOnly),
			"data-checked": (0, utils_exports.dataAttr)(checked),
			"data-disabled": (0, utils_exports.dataAttr)(trulyDisabled),
			"data-orientation": orientation,
			"data-readonly": (0, utils_exports.dataAttr)(trulyReadOnly),
			checked,
			disabled: trulyDisabled || trulyReadOnly,
			readOnly: trulyReadOnly,
			tabIndex: interactive ? void 0 : -1,
			value,
			...inputProps,
			...props,
			ref: mergeRefs(register, ref),
			onChange: (0, utils_exports.handlerAll)(props.onChange, inputProps?.onChange, onChange)
		}), [
			orientation,
			name,
			trulyDisabled,
			trulyReadOnly,
			checked,
			interactive,
			value,
			inputProps,
			register,
			onChange
		]),
		getLabelProps
	};
};

//#endregion
export { SegmentedControlContext, SegmentedControlDescendantsContext, useSegmentedControl, useSegmentedControlContext, useSegmentedControlDescendant, useSegmentedControlDescendants, useSegmentedControlItem };
//# sourceMappingURL=use-segmented-control.js.map