@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
62 lines • 3.24 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React, { useRef, forwardRef } from 'react';
import classnames from 'classnames';
import { VisuallyHidden } from '@react-aria/visually-hidden';
import { useFocusRing } from '@react-aria/focus';
import { useId } from '@react-aria/utils';
import { STYLE, DEFAULTS } from './Checkbox.constants';
import './Checkbox.style.scss';
import { useCheckbox } from '@react-aria/checkbox';
import { useToggleState } from '@react-stately/toggle';
import Icon from '../Icon';
import Text from '../Text';
/**
* The Checkbox component.
*/
var Checkbox = function (props, providedRef) {
var _a;
var className = props.className, isDisabled = props.isDisabled, label = props.label, description = props.description, isIndeterminate = props.isIndeterminate, id = props.id, style = props.style;
var checkboxId = useId(id);
var checkboxProps = __assign(__assign({}, props), (description
? {
'aria-describedby': "checkbox-description-".concat(checkboxId, " ").concat(props['aria-describedby'] || '').trimEnd(),
}
: {}));
var state = useToggleState(props);
var internalRef = useRef();
var ref = providedRef || internalRef;
var inputProps = useCheckbox(checkboxProps, state, ref).inputProps;
var _b = useFocusRing(), isFocusVisible = _b.isFocusVisible, focusProps = _b.focusProps;
var indeterminate = isIndeterminate || DEFAULTS.IS_INDETERMINATE;
var disabled = isDisabled || DEFAULTS.IS_DISABLED;
var icon = (React.createElement(Icon, { className: STYLE.icon, name: indeterminate ? 'minus' : 'check', weight: "bold", scale: 12 }));
var filled = state.isSelected || indeterminate;
var checkbox = (React.createElement("div", { className: classnames((_a = {},
_a[STYLE.selected] = filled,
_a[STYLE.notSelected] = !filled,
_a[STYLE.focus] = isFocusVisible,
_a), 'checkbox') }, filled && icon));
// remove id from input to only apply it to the label
delete inputProps.id;
return (React.createElement("div", { className: classnames(STYLE.wrapper, className), "data-disabled": disabled, style: style },
React.createElement("label", { className: classnames(STYLE.label), id: id },
React.createElement(VisuallyHidden, null,
React.createElement("input", __assign({}, inputProps, focusProps, { "aria-label": (inputProps === null || inputProps === void 0 ? void 0 : inputProps['aria-label']) || label, ref: ref }))),
checkbox,
label),
description && (React.createElement(Text, { className: classnames(STYLE.description), id: "checkbox-description-".concat(checkboxId), type: "body-secondary", tagName: "small" }, description))));
};
var _Checkbox = forwardRef(Checkbox);
_Checkbox.displayName = 'Checkbox';
export default _Checkbox;
//# sourceMappingURL=Checkbox.js.map