@awsui/components-react/checkbox/internal.js

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

import { __rest } from "tslib";
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useRef } from 'react';
import clsx from 'clsx';
import { getAnalyticsMetadataAttribute, } from '@awsui/component-toolkit/internal/analytics-metadata';
import { getBaseProps } from '../internal/base-component';
import AbstractSwitch from '../internal/components/abstract-switch';
import CheckboxIcon from '../internal/components/checkbox-icon';
import { useFormFieldContext } from '../internal/context/form-field-context';
import { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';
import { fireNonCancelableEvent } from '../internal/events';
import useForwardFocus from '../internal/hooks/forward-focus';
import styles from './styles.css.js';
const InternalCheckbox = React.forwardRef((_a, ref) => {
    var { controlId, name, checked, disabled, readOnly, ariaRequired, indeterminate, children, description, ariaLabel, onFocus, onBlur, onChange, tabIndex: explicitTabIndex, showOutline, ariaControls, __internalRootRef, __injectAnalyticsComponentMetadata = false } = _a, rest = __rest(_a, ["controlId", "name", "checked", "disabled", "readOnly", "ariaRequired", "indeterminate", "children", "description", "ariaLabel", "onFocus", "onBlur", "onChange", "tabIndex", "showOutline", "ariaControls", "__internalRootRef", "__injectAnalyticsComponentMetadata"]);
    const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
    const baseProps = getBaseProps(rest);
    const checkboxRef = useRef(null);
    useForwardFocus(ref, checkboxRef);
    useEffect(() => {
        if (checkboxRef.current) {
            checkboxRef.current.indeterminate = Boolean(indeterminate);
        }
    });
    const { tabIndex } = useSingleTabStopNavigation(checkboxRef, { tabIndex: explicitTabIndex });
    const analyticsMetadata = {};
    const analyticsComponentMetadata = {
        name: 'awsui.Checkbox',
        label: { root: 'self' },
    };
    if (__injectAnalyticsComponentMetadata) {
        analyticsMetadata.component = analyticsComponentMetadata;
    }
    if (!disabled && !readOnly) {
        analyticsMetadata.detail = {
            selected: `${!checked}`,
        };
    }
    return (React.createElement(AbstractSwitch, Object.assign({}, baseProps, { className: clsx(styles.root, baseProps.className), controlClassName: styles['checkbox-control'], outlineClassName: styles.outline, controlId: controlId, disabled: disabled, readOnly: readOnly, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, ariaControls: ariaControls, showOutline: showOutline, nativeControl: nativeControlProps => (React.createElement("input", Object.assign({}, nativeControlProps, { ref: checkboxRef, type: "checkbox", checked: checked, name: name, "aria-required": ariaRequired ? 'true' : undefined, "aria-disabled": readOnly && !disabled ? 'true' : undefined, tabIndex: tabIndex, onFocus: () => fireNonCancelableEvent(onFocus), onBlur: () => fireNonCancelableEvent(onBlur), 
            // empty handler to suppress React controllability warning
            onChange: () => { } }))), onClick: () => {
            var _a;
            (_a = checkboxRef.current) === null || _a === void 0 ? void 0 : _a.focus();
            fireNonCancelableEvent(onChange, 
            // for deterministic transitions "indeterminate" -> "checked" -> "unchecked"
            indeterminate ? { checked: true, indeterminate: false } : { checked: !checked, indeterminate: false });
        }, styledControl: React.createElement(CheckboxIcon, { checked: checked, indeterminate: indeterminate, disabled: disabled, readOnly: readOnly }), __internalRootRef: __internalRootRef }, getAnalyticsMetadataAttribute(analyticsMetadata))));
});
export default InternalCheckbox;
//# sourceMappingURL=internal.js.map