@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
62 lines • 6.21 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckboxStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const labelStandAlone_1 = require("../../components/label/labelStandAlone");
const text_1 = require("../../components/text/text");
const component_1 = require("../../components/text/types/component");
const useId_1 = require("../../hooks/useId/useId");
const ariaLiveOption_1 = require("../../types/ariaLiveOption/ariaLiveOption");
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
const screenReaderOnly_1 = require("../screenReaderOnly/screenReaderOnly");
const checkbox_styled_1 = require("./checkbox.styled");
const checkboxErrorStandAlone_1 = require("./components/checkboxErrorStandAlone");
const aria_utils_1 = require("./utils/aria.utils");
const state_utils_1 = require("./utils/state.utils");
const CURSOR_POINTER = 'pointer';
const CURSOR_DEFAULT = 'default';
const CheckboxStandAloneComponent = ({ state, required, id, name, onBlur, onChange, styles, value, label, errorMessage, checkedIcon, errorIcon, errorAriaLiveType = ariaLiveOption_1.AriaLiveOptionType.ASSERTIVE, helperContent, dataTestId = 'checkbox', helperText, extraAriaDescribedBy = '', screenReaderText, ...props }, ref) => {
const uniqueId = (0, useId_1.useId)('checkbox');
const { isChecked, isDisabled, hasError } = (0, state_utils_1.checkboxState)(state);
const checkBoxId = id ?? uniqueId;
const checkBoxLabelId = `${checkBoxId}Label`;
const checkBoxkHelpContentId = `${checkBoxId}HelpContent`;
const checkBoxErrorId = `${checkBoxId}Error`;
const screenReaderId = `${checkBoxId}ScreenReader`;
const labelTypography = helperContent?.content ? styles?.specialLabel : styles?.label;
const helperTextTypography = helperContent?.content
? styles?.specialHelperText
: styles?.helperText;
const getLabel = () => {
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: typeof label?.content === 'string' ? ((0, jsx_runtime_1.jsx)(labelStandAlone_1.LabelStandAlone, { color: labelTypography?.color, cursor: isDisabled ? CURSOR_DEFAULT : CURSOR_POINTER, id: checkBoxLabelId, inputId: checkBoxId, required: required, textVariant: labelTypography?.font_variant, weight: labelTypography?.font_weight, ...label, children: label.content })) : (label?.content) }));
};
const getContent = () => {
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: helperContent?.content && typeof helperContent.content !== 'string' ? ((0, jsx_runtime_1.jsx)(checkbox_styled_1.CheckboxHelpContentStyled, { id: checkBoxkHelpContentId, children: helperContent.content })) : ((0, jsx_runtime_1.jsxs)(checkbox_styled_1.CheckboxHelpContentTextStyled, { id: checkBoxkHelpContentId, styles: styles, children: [(0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.SMALL, customTypography: styles?.helpContent, id: `${checkBoxId}Description`, ...helperContent, children: helperContent?.content }), (0, jsx_runtime_1.jsx)(text_1.Text, { color: helperTextTypography?.color, component: component_1.TextComponentType.SMALL, id: `${checkBoxId}HelperText`, variant: helperTextTypography?.font_variant, weight: helperTextTypography?.font_weight, ...helperText, children: helperText?.content })] })) }));
};
return ((0, jsx_runtime_1.jsxs)(checkbox_styled_1.CheckboxContainerStyled, { "data-testid": dataTestId, styles: styles, children: [(0, jsx_runtime_1.jsxs)(checkbox_styled_1.CheckboxIconLabelWrapperStyled, { styles: styles, children: [(0, jsx_runtime_1.jsxs)(checkbox_styled_1.CheckboxFrameStyled, { styles: styles, children: [(0, jsx_runtime_1.jsx)(checkbox_styled_1.CheckboxStyled, { ref: ref, "aria-describedby": (0, aria_utils_1.buildAriaDescribedBy)({
extraAriaDescribedBy,
label: label?.content,
checkBoxLabelId,
helpContent: helperContent?.content,
checkBoxkHelpContentId,
hasError,
errorText: errorMessage?.content,
checkBoxErrorId,
screenReaderText,
screenReaderId,
}), "aria-hidden": props['aria-hidden'], "aria-invalid": hasError, "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], checked: isChecked, "data-testid": `${dataTestId}-input`, disabled: isDisabled, id: checkBoxId, name: name, required: required, styles: styles, tabIndex: props.tabIndex, type: "checkbox", value: value, onBlur: onBlur, onChange: onChange }), (0, jsx_runtime_1.jsx)(checkbox_styled_1.CheckedIcon, { "$isChecked": isChecked, styles: styles, children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { color: styles?.checkedIcon?.color, complex: true, ...checkedIcon }) }), (0, jsx_runtime_1.jsx)(screenReaderOnly_1.ScreenReaderOnly, { id: screenReaderId, children: screenReaderText })] }), getLabel()] }), (0, jsx_runtime_1.jsxs)(checkbox_styled_1.CheckboxHelperContentStyled, { styles: styles, children: [(0, jsx_runtime_1.jsx)(checkboxErrorStandAlone_1.CheckboxErrorStandAlone, { dataTestId: `${dataTestId}-error-message`, error: hasError, errorAriaLiveType: errorAriaLiveType, errorIcon: errorIcon, errorMessage: errorMessage, id: checkBoxErrorId, styles: styles }), getContent()] })] }));
};
/**
* @description
* Checkbox component is a input component that can be used to select one or more options from a list of options.
* It can be used to create a list of options that can be selected.
* @param {React.PropsWithChildren<ICheckboxStandAlone>} props
* @returns {JSX.Element}
* @constructor
*/
exports.CheckboxStandAlone = react_1.default.forwardRef(CheckboxStandAloneComponent);
//# sourceMappingURL=checkboxStandAlone.js.map