@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
20 lines • 2.26 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { useId } from '../../hooks/useId/useId';
import { InputTypeType } from '../../types/inputType/inputType';
import { pickAriaProps } from '../../utils/aria/aria';
import { ROLES } from '../../types/role/role';
import { ButtonType } from '../button/types/type';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { Text } from '../text/text';
import { TextComponentType } from '../text/types/component';
import { PillAsButton, PillContentContainerStyled, PillInputStyled, PillRootContainerStyled, } from './pill.styled';
import { PillType } from './types/pillType';
const PillStandAloneComponent = ({ dataTestId = 'pill', type = PillType.BUTTON, ...props }, ref) => {
const ariaProps = pickAriaProps(props);
const id = useId('pill');
const pillContentId = `${id}-content`;
return (_jsxs(PillRootContainerStyled, { ref: ref, ...ariaProps, "aria-selected": type === PillType.TAB ? props.selected : undefined, as: ([PillType.BUTTON, PillType.TAB].includes(type) ? PillAsButton : undefined), "data-testid": dataTestId, role: type === PillType.TAB ? ROLES.TAB : undefined, styles: props.styles, type: [PillType.BUTTON, PillType.TAB].includes(type) ? ButtonType.BUTTON : undefined, onClick: props.onClick, children: [_jsxs(PillContentContainerStyled, { "data-pill-content": true, id: pillContentId, styles: props.styles, children: [_jsx(ElementOrIcon, { customIconStyles: props.styles?.leftIcon, ...props.leftIcon }), _jsx(Text, { component: TextComponentType.SPAN, customTypography: props.styles?.label, ...props.label, children: props.label?.content }), _jsx(ElementOrIcon, { customIconStyles: props.styles?.rightIcon, ...props.rightIcon })] }), [PillType.SELECTOR_SIMPLE, PillType.SELECTOR_MULTIPLE].includes(type) && (_jsx(PillInputStyled, { "aria-labelledby": pillContentId, checked: props.selected, disabled: props.disabled, name: props.name, styles: props.styles, type: type === PillType.SELECTOR_SIMPLE ? InputTypeType.RADIO : InputTypeType.CHECKBOX, value: props.value, onChange: props.onChange }))] }));
};
export const PillStandAlone = React.forwardRef(PillStandAloneComponent);
//# sourceMappingURL=pillStandAlone.js.map