@kubit-ui-web/react-components/dist/cjs/components/slider/sliderStandAlone.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.SliderStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const useId_1 = require("../../hooks/useId/useId");
const text_1 = require("../text/text");
const component_1 = require("../text/types/component");
const sliderButtonStandAlone_1 = require("./components/sliderButtonStandAlone");
const sliderHelperTextStandAlone_1 = require("./components/sliderHelperTextStandAlone");
const sliderScaleStandAlone_1 = require("./components/sliderScaleStandAlone");
const sliderThumbStandAlone_1 = require("./components/sliderThumbStandAlone");
const slider_styled_1 = require("./slider.styled");
const accessibility_utils_1 = require("./utils/accessibility.utils");
const state_utils_1 = require("./utils/state.utils");
const ui_utils_1 = require("./utils/ui.utils");
const SliderStandAloneComponent = ({ 
// Original props
range, min, max, step, disabled, 
// label
label, 
// Scale
showScale, scaleOffsets, 
// Tooltip
tooltip, rightTooltip, 
// Helper Text
leftHelperText, rightHelperText, 
// Generated props
value, offset, offsetLeft, offsetRight, hover, pressed, activePointer, containerRef, 
// Modifier functions
onMouseDown, onChange, onTouchStart, setHover, onKeyPress, 
// Increment and decrement buttons
incrementButton, decrementButton, 
// Thumb icons
thumbIcon, rightThumbIcon, 
// Aria helpers
ariaLabel, rightAriaLabel, ariaLabelBy: propsAriaLabelBy, rightAriaLabelBy, 
// Styles
styles, 
// Test ID
dataTestId = 'slider', }, ref) => {
    const id = (0, useId_1.useId)('slider');
    const state = (0, state_utils_1.getState)({ disabled, hover, pressed });
    // auxiliar ids
    const labelId = label?.content && !range ? `${id}Label` : undefined;
    const leftHelperTextId = `${id}LeftHelperText`;
    const rightHelperTextId = `${id}RightHelperText`;
    const ariaLabelBy = propsAriaLabelBy ?? labelId;
    return ((0, jsx_runtime_1.jsxs)(slider_styled_1.StyledRoot, { ref: ref, "data-disabled": disabled, "data-hover": hover, "data-pressed": pressed, styles: styles, children: [label?.content && ((0, jsx_runtime_1.jsx)(slider_styled_1.StyledLabelContainer, { styles: styles, children: (0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.LABEL, customTypography: styles.states?.[state]?.label, id: labelId, ...label, children: label?.content }) })), (0, jsx_runtime_1.jsx)(sliderScaleStandAlone_1.SliderScaleStandAlone, { scaleOffsets: scaleOffsets, showScale: showScale, styles: styles }), (0, jsx_runtime_1.jsxs)(slider_styled_1.StyledButtonsTracksContainer, { styles: styles, children: [(0, jsx_runtime_1.jsx)(sliderButtonStandAlone_1.SliderButtonStandAlone, { ...decrementButton, styles: styles.states?.[state]?.decrementButton }), (0, jsx_runtime_1.jsx)(slider_styled_1.StyledWrap, { styles: styles, children: (0, jsx_runtime_1.jsx)(slider_styled_1.StyledContainer, { ref: containerRef, "data-testid": `${dataTestId}-container`, styles: styles, onMouseDown: onMouseDown, onTouchMove: onChange, onTouchStart: onTouchStart, children: range ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(slider_styled_1.StyledTrack, { "data-disabled": disabled, "data-hover": hover, "data-pressed": pressed, "data-testid": `${dataTestId}-inactive-left-track`, style: { width: `${offsetLeft}%`, left: 0 }, styles: styles }), (0, jsx_runtime_1.jsx)(slider_styled_1.StyledActiveTrack, { "data-disabled": disabled, "data-hover": hover, "data-pressed": pressed, "data-testid": `${dataTestId}-active-track`, style: { left: `${offsetLeft}%`, right: `${offsetRight}%` }, styles: styles }), (0, jsx_runtime_1.jsx)(slider_styled_1.StyledTrack, { "data-disabled": disabled, "data-hover": hover, "data-pressed": pressed, "data-testid": `${dataTestId}-inactive-right-track`, style: { width: `${offsetRight}%`, right: 0 }, styles: styles }), (0, jsx_runtime_1.jsx)(sliderThumbStandAlone_1.SliderThumbStandAlone, { ariaDescribedBy: (0, accessibility_utils_1.buildAriaDescribedBy)([
                                            { helperText: leftHelperText, helperTextId: leftHelperTextId },
                                            { helperText: rightHelperText, helperTextId: rightHelperTextId },
                                        ]), ariaLabel: ariaLabel, ariaLabelBy: ariaLabelBy, dataTestId: `${dataTestId}-left-thumb`, disabled: disabled, hover: (0, ui_utils_1.isActive)(hover, activePointer.current, 'left'), icon: thumbIcon, max: value[1] - step, min: min, pressed: (0, ui_utils_1.isActive)(pressed, activePointer.current, 'left'), state: state, style: { left: `${offsetLeft}%` }, styles: styles, tooltip: tooltip, value: value[0], onFocus: () => (activePointer.current = 'left'), onKeyDown: onKeyPress, onMouseOut: () => setHover(false), onMouseOver: () => {
                                            setHover(true);
                                            activePointer.current = 'left';
                                        }, onTouchStart: () => {
                                            activePointer.current = 'left';
                                        } }), (0, jsx_runtime_1.jsx)(sliderThumbStandAlone_1.SliderThumbStandAlone, { rightThumb: true, ariaDescribedBy: (0, accessibility_utils_1.buildAriaDescribedBy)([
                                            { helperText: leftHelperText, helperTextId: leftHelperTextId },
                                            { helperText: rightHelperText, helperTextId: rightHelperTextId },
                                        ]), ariaLabel: rightAriaLabel, ariaLabelBy: rightAriaLabelBy, dataTestId: `${dataTestId}-right-thumb`, disabled: disabled, hover: (0, ui_utils_1.isActive)(hover, activePointer.current, 'right'), icon: rightThumbIcon, max: max, min: value[0] + step, pressed: (0, ui_utils_1.isActive)(pressed, activePointer.current, 'right'), state: state, style: { right: `${offsetRight}%` }, styles: styles, tooltip: rightTooltip, value: value[1], onFocus: () => (activePointer.current = 'right'), onKeyDown: onKeyPress, onMouseOut: () => setHover(false), onMouseOver: () => {
                                            setHover(true);
                                            activePointer.current = 'right';
                                        }, onTouchStart: () => {
                                            activePointer.current = 'right';
                                        } })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(slider_styled_1.StyledActiveTrack, { "data-disabled": disabled, "data-hover": hover, "data-pressed": pressed, "data-testid": `${dataTestId}-active-track`, style: { width: `${offset}%` }, styles: styles }), (0, jsx_runtime_1.jsx)(slider_styled_1.StyledTrack, { "data-disabled": disabled, "data-hover": hover, "data-pressed": pressed, "data-testid": `${dataTestId}-inactive-track`, style: { width: `calc(${100 - offset}%)`, right: 0 }, styles: styles }), (0, jsx_runtime_1.jsx)(sliderThumbStandAlone_1.SliderThumbStandAlone, { ariaDescribedBy: (0, accessibility_utils_1.buildAriaDescribedBy)([
                                            { helperText: leftHelperText, helperTextId: leftHelperTextId },
                                            { helperText: rightHelperText, helperTextId: rightHelperTextId },
                                        ]), ariaLabel: ariaLabel, ariaLabelBy: ariaLabelBy, dataTestId: `${dataTestId}-thumb`, disabled: disabled, hover: hover, icon: thumbIcon, max: max, min: min, pressed: pressed, state: state, style: { left: `${offset}%` }, styles: styles, tooltip: tooltip, value: value, onKeyDown: onKeyPress, onMouseOut: () => setHover(false), onMouseOver: () => setHover(true) })] })) }) }), (0, jsx_runtime_1.jsx)(sliderButtonStandAlone_1.SliderButtonStandAlone, { ...incrementButton, styles: styles.states?.[state]?.incrementButton })] }), (0, jsx_runtime_1.jsx)(sliderHelperTextStandAlone_1.SliderHelperTextStandAlone, { leftHelperText: leftHelperText, leftHelperTextId: leftHelperTextId, rightHelperText: rightHelperText, rightHelperTextId: rightHelperTextId, state: state, styles: styles })] }));
};
/**
 * @description
 * SliderStandAlone component is used to render a slider component.
 */
exports.SliderStandAlone = react_1.default.forwardRef(SliderStandAloneComponent);
//# sourceMappingURL=sliderStandAlone.js.map