@kubit-ui-web/react-components/dist/cjs/components/virtualKeyboard/virtualKeyboardStandAlone.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.VirtualKeyboardStandAlone = exports.VirtualKeyboardStandAloneComponent = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const useId_1 = require("../../hooks/useId/useId");
const type_1 = require("../button/types/type");
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
const digitButton_1 = require("./components/digitButton");
// styles
const virtualKeyboard_styled_1 = require("./virtualKeyboard.styled");
const VirtualKeyboardStandAloneComponent = ({ dataTestId = 'virtual-keyboard', ...props }, ref) => {
    const uniqueId = (0, useId_1.useId)('virtualKeyboard');
    const virtualKeyboardId = props.id ?? uniqueId;
    return ((0, jsx_runtime_1.jsxs)(virtualKeyboard_styled_1.VirtualKeyboardStyled, { ref: ref, "data-testid": dataTestId, id: virtualKeyboardId, styles: props.styles?.[props.state], onBlur: props.onVirtualKeyboardBlur, onFocus: props.onVirtualKeyboardFocus, children: [(0, jsx_runtime_1.jsx)(virtualKeyboard_styled_1.DigitButtonGrid, { styles: props.styles?.[props.state], children: props.digits.map((digit, index) => {
                    return ((0, jsx_runtime_1.jsx)(digitButton_1.DigitButton, { dataTestId: `${dataTestId}-digit-button-${index}`, digit: digit, styles: props.styles?.[props.state], onClick: props.onDigitButtonClick }, digit));
                }) }), (0, jsx_runtime_1.jsx)(virtualKeyboard_styled_1.RemoveButtonStyled, { styles: props.styles?.[props.state], type: type_1.ButtonType.BUTTON, onClick: props.onRemoveButtonClick, children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: props.styles?.[props.state]?.container?.icon, ...props.icon }) })] }));
};
exports.VirtualKeyboardStandAloneComponent = VirtualKeyboardStandAloneComponent;
/**
 * @description
 * VirtualKeyboardStandAlone component
 */
exports.VirtualKeyboardStandAlone = react_1.default.forwardRef(exports.VirtualKeyboardStandAloneComponent);
//# sourceMappingURL=virtualKeyboardStandAlone.js.map