@kubit-ui-web/react-components/dist/cjs/components/option/optionStandAlone.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.OptionStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/* eslint-disable react/display-name */
const react_1 = __importDefault(require("react"));
const text_1 = require("../../components/text/text");
const aria_1 = require("../../utils/aria/aria");
const keyboard_utility_1 = require("../../utils/keyboard/keyboard.utility");
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
const component_1 = require("../text/types/component");
const toggleUnControlled_1 = require("../toggle/toggleUnControlled");
const optionLabelSlice_1 = require("./components.ts/optionLabelSlice");
const option_styled_1 = require("./option.styled");
const state_1 = require("./types/state");
const option_utils_1 = require("./utils/option.utils");
const OptionStandAlone = react_1.default.forwardRef(({ dataTestId = 'option', ...props }, ref) => {
    const ariaProps = (0, aria_1.pickAriaProps)(props);
    const filling = !!props.labelCharsHighlighted && props.labelCharsHighlighted?.length > 0;
    const state = (0, option_utils_1.getState)(props.disabled, props.focus, props.selected, props.multiSelect, props.hover, filling);
    const stateStyles = props.styles[state];
    const disabled = state === state_1.OptionStateType.DISABLED;
    const handleClickOption = event => {
        if (!disabled) {
            props.onClick?.(event);
        }
    };
    const hasCheckedIcon = [
        state_1.OptionStateType.MULTIPLE_SELECTED,
        state_1.OptionStateType.MULTIPLE_SELECTED_HOVER,
        state_1.OptionStateType.SELECTED,
    ].includes(state);
    const { firstHighlightedIndex, lastHighlightedIndex } = (0, option_utils_1.getHighlightedIndexes)(props.label, props.labelCharsHighlighted);
    const _firstNoHighlightedLabel = props.label.substring(0, firstHighlightedIndex);
    const _highlightedLabel = props.label.substring(firstHighlightedIndex, lastHighlightedIndex);
    const _lastNoHighlightedLabel = props.label.substring(lastHighlightedIndex);
    return ((0, jsx_runtime_1.jsxs)(option_styled_1.OptionStyled, { ref: ref, "aria-disabled": disabled, ...ariaProps, "$stateStyles": stateStyles, "$styles": props.styles, as: props.url ? props.componentLink : (props.as ?? option_styled_1.OptionDivStyled), "data-testid": dataTestId, role: props.role, tabIndex: props.tabIndex, url: props.url, onBlur: props.onBlur, onClick: handleClickOption, onFocus: props.onFocus, onKeyDown: (event) => {
            if (!disabled && ((0, keyboard_utility_1.isKeyEnterPressed)(event.key) || (0, keyboard_utility_1.isKeySpacePressed)(event.key))) {
                props.onClick?.(event);
            }
        }, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, children: [(0, jsx_runtime_1.jsxs)(option_styled_1.OptionFirstRowWrapperStyled, { children: [(0, jsx_runtime_1.jsxs)(option_styled_1.OptionLabelIconWrapper, { stateStyles: stateStyles, children: [(0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { color: stateStyles?.icon?.color, height: stateStyles?.icon?.height, width: stateStyles?.icon?.width, ...props.icon }), props.sublabel?.content && ((0, jsx_runtime_1.jsx)(option_styled_1.OptionSublabelContainer, { stateStyles: stateStyles, children: (0, jsx_runtime_1.jsx)(text_1.Text, { color: stateStyles?.sublabel?.color, component: component_1.TextComponentType.SPAN, decoration: stateStyles?.sublabel?.text_decoration, variant: stateStyles?.sublabel?.font_variant, weight: stateStyles?.sublabel?.font_weight, ...props.sublabel, children: props.sublabel?.content }) })), (0, jsx_runtime_1.jsxs)(option_styled_1.OptionLabelHighlightedLabelWrapper, { children: [(0, jsx_runtime_1.jsx)(optionLabelSlice_1.OptionLabelSlice, { color: stateStyles?.label?.color, component: component_1.TextComponentType.SPAN, dataTestId: `${dataTestId}-first-no-hightlighted-label`, decoration: stateStyles?.label?.text_decoration, variant: stateStyles?.label?.font_variant, weight: stateStyles?.label?.font_weight, children: _firstNoHighlightedLabel }), (0, jsx_runtime_1.jsx)(optionLabelSlice_1.OptionLabelSlice, { color: stateStyles?.label?.color, component: component_1.TextComponentType.SPAN, dataTestId: `${dataTestId}-highlighted-label`, decoration: stateStyles?.labelHightlighted?.text_decoration, variant: stateStyles?.labelHightlighted?.font_variant, weight: stateStyles?.labelHightlighted?.font_weight, children: _highlightedLabel }), (0, jsx_runtime_1.jsx)(optionLabelSlice_1.OptionLabelSlice, { color: stateStyles?.label?.color, component: component_1.TextComponentType.SPAN, dataTestId: `${dataTestId}-last-no-hightlighted-label`, decoration: stateStyles?.label?.text_decoration, variant: stateStyles?.label?.font_variant, weight: stateStyles?.label?.font_weight, children: _lastNoHighlightedLabel })] })] }), hasCheckedIcon && ((0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { color: stateStyles?.checkedIcon?.color, height: stateStyles?.checkedIcon?.height, width: stateStyles?.checkedIcon?.width, ...props.checkedIcon }))] }), props.toggle && (0, jsx_runtime_1.jsx)(toggleUnControlled_1.ToggleUnControlled, { ...props.toggle }), props.extraContent && props.extraContent] }));
});
exports.OptionStandAlone = OptionStandAlone;
//# sourceMappingURL=optionStandAlone.js.map