@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
31 lines • 2.74 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import { useUniqueId } from '@awsui/component-toolkit/internal';
import { getAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import { getBaseProps } from '../internal/base-component';
import RadioButton from '../internal/components/radio-button';
import { useFormFieldContext } from '../internal/context/form-field-context';
import { fireNonCancelableEvent } from '../internal/events';
import useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';
import analyticsSelectors from './analytics-metadata/styles.css.js';
import styles from './styles.css.js';
import testUtilStyles from './test-classes/styles.css.js';
const InternalRadioGroup = React.forwardRef(({ name, value, items, ariaLabel, ariaRequired, ariaControls, onChange, readOnly, __internalRootRef, style, direction, ...props }, ref) => {
const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(props);
const baseProps = getBaseProps(props);
const generatedName = useUniqueId('awsui-radio-');
const [radioButtonRef, radioButtonRefIndex] = useRadioGroupForwardFocus(ref, items, value);
return (React.createElement("div", { role: "radiogroup", "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired, "aria-controls": ariaControls, "aria-readonly": readOnly ? 'true' : undefined, ...baseProps, className: clsx(baseProps.className, testUtilStyles.root, styles.root, styles['radio-group'], direction === 'horizontal' && styles['horizontal-group']), ref: __internalRootRef }, items &&
items.map((item, index) => (React.createElement(RadioButton, { key: item.value, ref: index === radioButtonRefIndex ? radioButtonRef : undefined, className: clsx(styles.radio, item.description && styles['radio--has-description'], direction === 'horizontal' && styles.horizontal, item.value === value && analyticsSelectors.selected), checked: item.value === value, name: name || generatedName, value: item.value, description: item.description, disabled: item.disabled, onSelect: () => fireNonCancelableEvent(onChange, { value: item.value }), controlId: item.controlId, readOnly: readOnly, style: style, ...getAnalyticsMetadataAttribute(!item.disabled && !readOnly
? {
detail: {
position: `${index + 1}`,
value: item.value,
},
}
: {}) }, item.label)))));
});
export default InternalRadioGroup;
//# sourceMappingURL=internal.js.map