@dekk-ui/input-field
Version:
86 lines (74 loc) • 9.95 kB
JavaScript
/*!
* Copyright (c) Dekk
* @author Gregor Adams
* @license MIT
* @name @dekk-ui/input-field
* @version 0.8.0
* @see git+https://github.com/dekk-app/design-system.git
*/
import React, { forwardRef } from 'react';
import _styled from '@emotion/styled/base';
import { focus } from '@dekk-ui/focus-ring';
import { pxToRem } from '@dekk-ui/utils/px-to-rem';
import { css } from '@emotion/react';
function getDefaultExportFromCjs (x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
var _extends$1 = {exports: {}};
(function (module) {
function _extends() {
module.exports = _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
module.exports["default"] = module.exports, module.exports.__esModule = true;
return _extends.apply(this, arguments);
}
module.exports = _extends;
module.exports["default"] = module.exports, module.exports.__esModule = true;
}(_extends$1));
var _extends = /*@__PURE__*/getDefaultExportFromCjs(_extends$1.exports);
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
const StyledInput = _styled("input", process.env.NODE_ENV === "production" ? {
target: "eeflk211"
} : {
target: "eeflk211",
label: "StyledInput"
})("display:flex;align-content:center;align-items:center;overflow:hidden;position:relative;border:0;appearance:none;font-size:", pxToRem(16), ";font-family:inherit;&:focus{outline:0;}&[disabled]{opacity:0.5;pointer-events:none;}", ({
theme,
fullWidth,
width,
textAlign
}) => /*#__PURE__*/css("width:", fullWidth ? "100%" : width || "auto", ";min-width:", pxToRem(theme.space.l), ";height:", pxToRem(theme.space.l), ";padding:", pxToRem(theme.space.xxs), " ", pxToRem(theme.space.xs), ";border-radius:", pxToRem(theme.radius.s), ";background:", theme.ui.fill["2"], ";color:", theme.ui.text["1"], ";box-shadow:inset 0 0 0 1px ", theme.ui.outline["1"], ";text-align:", textAlign, ";&:focus{", focus, ";}&:invalid{box-shadow:inset 0 0 0 1px red;}" + (process.env.NODE_ENV === "production" ? "" : ";label:StyledInput;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3Qm1EIiwiZmlsZSI6InN0eWxlZC50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGZvY3VzIH0gZnJvbSBcIkBkZWtrLXVpL2ZvY3VzLXJpbmdcIjtcbmltcG9ydCB7IHB4VG9SZW0gfSBmcm9tIFwiQGRla2stdWkvdXRpbHMvcHgtdG8tcmVtXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IGNvbnN0IFN0eWxlZElucHV0ID0gc3R5bGVkLmlucHV0IGBcblx0ZGlzcGxheTogZmxleDtcblx0YWxpZ24tY29udGVudDogY2VudGVyO1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdGJvcmRlcjogMDtcblx0YXBwZWFyYW5jZTogbm9uZTtcblx0Zm9udC1zaXplOiAke3B4VG9SZW0oMTYpfTtcblx0Zm9udC1mYW1pbHk6IGluaGVyaXQ7XG5cblx0Jjpmb2N1cyB7XG5cdFx0b3V0bGluZTogMDtcblx0fVxuXG5cdCZbZGlzYWJsZWRdIHtcblx0XHRvcGFjaXR5OiAwLjU7XG5cdFx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdH1cblxuXHQkeyh7IHRoZW1lLCBmdWxsV2lkdGgsIHdpZHRoLCB0ZXh0QWxpZ24gfSkgPT4gY3NzIGBcblx0XHR3aWR0aDogJHtmdWxsV2lkdGggPyBcIjEwMCVcIiA6IHdpZHRoIHx8IFwiYXV0b1wifTtcblx0XHRtaW4td2lkdGg6ICR7cHhUb1JlbSh0aGVtZS5zcGFjZS5sKX07XG5cdFx0aGVpZ2h0OiAke3B4VG9SZW0odGhlbWUuc3BhY2UubCl9O1xuXHRcdHBhZGRpbmc6ICR7cHhUb1JlbSh0aGVtZS5zcGFjZS54eHMpfSAke3B4VG9SZW0odGhlbWUuc3BhY2UueHMpfTtcblx0XHRib3JkZXItcmFkaXVzOiAke3B4VG9SZW0odGhlbWUucmFkaXVzLnMpfTtcblx0XHRiYWNrZ3JvdW5kOiAke3RoZW1lLnVpLmZpbGxbXCIyXCJdfTtcblx0XHRjb2xvcjogJHt0aGVtZS51aS50ZXh0W1wiMVwiXX07XG5cdFx0Ym94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4ICR7dGhlbWUudWkub3V0bGluZVtcIjFcIl19O1xuXHRcdHRleHQtYWxpZ246ICR7dGV4dEFsaWdufTtcblxuXHRcdCY6Zm9jdXMge1xuXHRcdFx0JHtmb2N1c307XG5cdFx0fVxuXG5cdFx0JjppbnZhbGlkIHtcblx0XHRcdGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIDFweCByZWQ7IC8vIEB0b2RvIGFkZCBicmFuZCBjb2xvclxuXHRcdH1cblx0YH07XG5gO1xuZXhwb3J0IGNvbnN0IFN0eWxlZE51bWJlcklucHV0ID0gc3R5bGVkKFN0eWxlZElucHV0KSBgXG5cdCZbdHlwZT1cIm51bWJlclwiXSB7XG5cdFx0LW1vei1hcHBlYXJhbmNlOiB0ZXh0ZmllbGQ7XG5cblx0XHQmOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uLFxuXHRcdCY6Oi13ZWJraXQtb3V0ZXItc3Bpbi1idXR0b24ge1xuXHRcdFx0bWFyZ2luOiAwO1xuXHRcdFx0YXBwZWFyYW5jZTogbm9uZTtcblx0XHR9XG5cdH1cbmA7XG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZWQuanMubWFwIl19 */"), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJd0MiLCJmaWxlIjoic3R5bGVkLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZm9jdXMgfSBmcm9tIFwiQGRla2stdWkvZm9jdXMtcmluZ1wiO1xuaW1wb3J0IHsgcHhUb1JlbSB9IGZyb20gXCJAZGVray11aS91dGlscy9weC10by1yZW1cIjtcbmltcG9ydCB7IGNzcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5leHBvcnQgY29uc3QgU3R5bGVkSW5wdXQgPSBzdHlsZWQuaW5wdXQgYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRhbGlnbi1jb250ZW50OiBjZW50ZXI7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Ym9yZGVyOiAwO1xuXHRhcHBlYXJhbmNlOiBub25lO1xuXHRmb250LXNpemU6ICR7cHhUb1JlbSgxNil9O1xuXHRmb250LWZhbWlseTogaW5oZXJpdDtcblxuXHQmOmZvY3VzIHtcblx0XHRvdXRsaW5lOiAwO1xuXHR9XG5cblx0JltkaXNhYmxlZF0ge1xuXHRcdG9wYWNpdHk6IDAuNTtcblx0XHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0fVxuXG5cdCR7KHsgdGhlbWUsIGZ1bGxXaWR0aCwgd2lkdGgsIHRleHRBbGlnbiB9KSA9PiBjc3MgYFxuXHRcdHdpZHRoOiAke2Z1bGxXaWR0aCA/IFwiMTAwJVwiIDogd2lkdGggfHwgXCJhdXRvXCJ9O1xuXHRcdG1pbi13aWR0aDogJHtweFRvUmVtKHRoZW1lLnNwYWNlLmwpfTtcblx0XHRoZWlnaHQ6ICR7cHhUb1JlbSh0aGVtZS5zcGFjZS5sKX07XG5cdFx0cGFkZGluZzogJHtweFRvUmVtKHRoZW1lLnNwYWNlLnh4cyl9ICR7cHhUb1JlbSh0aGVtZS5zcGFjZS54cyl9O1xuXHRcdGJvcmRlci1yYWRpdXM6ICR7cHhUb1JlbSh0aGVtZS5yYWRpdXMucyl9O1xuXHRcdGJhY2tncm91bmQ6ICR7dGhlbWUudWkuZmlsbFtcIjJcIl19O1xuXHRcdGNvbG9yOiAke3RoZW1lLnVpLnRleHRbXCIxXCJdfTtcblx0XHRib3gtc2hhZG93OiBpbnNldCAwIDAgMCAxcHggJHt0aGVtZS51aS5vdXRsaW5lW1wiMVwiXX07XG5cdFx0dGV4dC1hbGlnbjogJHt0ZXh0QWxpZ259O1xuXG5cdFx0Jjpmb2N1cyB7XG5cdFx0XHQke2ZvY3VzfTtcblx0XHR9XG5cblx0XHQmOmludmFsaWQge1xuXHRcdFx0Ym94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4IHJlZDsgLy8gQHRvZG8gYWRkIGJyYW5kIGNvbG9yXG5cdFx0fVxuXHRgfTtcbmA7XG5leHBvcnQgY29uc3QgU3R5bGVkTnVtYmVySW5wdXQgPSBzdHlsZWQoU3R5bGVkSW5wdXQpIGBcblx0Jlt0eXBlPVwibnVtYmVyXCJdIHtcblx0XHQtbW96LWFwcGVhcmFuY2U6IHRleHRmaWVsZDtcblxuXHRcdCY6Oi13ZWJraXQtaW5uZXItc3Bpbi1idXR0b24sXG5cdFx0Jjo6LXdlYmtpdC1vdXRlci1zcGluLWJ1dHRvbiB7XG5cdFx0XHRtYXJnaW46IDA7XG5cdFx0XHRhcHBlYXJhbmNlOiBub25lO1xuXHRcdH1cblx0fVxuYDtcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPXN0eWxlZC5qcy5tYXAiXX0= */"));
/*#__PURE__*/_styled(StyledInput, process.env.NODE_ENV === "production" ? {
target: "eeflk210"
} : {
target: "eeflk210",
label: "StyledNumberInput"
})(process.env.NODE_ENV === "production" ? {
name: "12sv7th",
styles: "&[type=\"number\"]{-moz-appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{margin:0;appearance:none;}}"
} : {
name: "12sv7th",
styles: "&[type=\"number\"]{-moz-appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{margin:0;appearance:none;}}",
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0Q3FEIiwiZmlsZSI6InN0eWxlZC50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGZvY3VzIH0gZnJvbSBcIkBkZWtrLXVpL2ZvY3VzLXJpbmdcIjtcbmltcG9ydCB7IHB4VG9SZW0gfSBmcm9tIFwiQGRla2stdWkvdXRpbHMvcHgtdG8tcmVtXCI7XG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuZXhwb3J0IGNvbnN0IFN0eWxlZElucHV0ID0gc3R5bGVkLmlucHV0IGBcblx0ZGlzcGxheTogZmxleDtcblx0YWxpZ24tY29udGVudDogY2VudGVyO1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdGJvcmRlcjogMDtcblx0YXBwZWFyYW5jZTogbm9uZTtcblx0Zm9udC1zaXplOiAke3B4VG9SZW0oMTYpfTtcblx0Zm9udC1mYW1pbHk6IGluaGVyaXQ7XG5cblx0Jjpmb2N1cyB7XG5cdFx0b3V0bGluZTogMDtcblx0fVxuXG5cdCZbZGlzYWJsZWRdIHtcblx0XHRvcGFjaXR5OiAwLjU7XG5cdFx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdH1cblxuXHQkeyh7IHRoZW1lLCBmdWxsV2lkdGgsIHdpZHRoLCB0ZXh0QWxpZ24gfSkgPT4gY3NzIGBcblx0XHR3aWR0aDogJHtmdWxsV2lkdGggPyBcIjEwMCVcIiA6IHdpZHRoIHx8IFwiYXV0b1wifTtcblx0XHRtaW4td2lkdGg6ICR7cHhUb1JlbSh0aGVtZS5zcGFjZS5sKX07XG5cdFx0aGVpZ2h0OiAke3B4VG9SZW0odGhlbWUuc3BhY2UubCl9O1xuXHRcdHBhZGRpbmc6ICR7cHhUb1JlbSh0aGVtZS5zcGFjZS54eHMpfSAke3B4VG9SZW0odGhlbWUuc3BhY2UueHMpfTtcblx0XHRib3JkZXItcmFkaXVzOiAke3B4VG9SZW0odGhlbWUucmFkaXVzLnMpfTtcblx0XHRiYWNrZ3JvdW5kOiAke3RoZW1lLnVpLmZpbGxbXCIyXCJdfTtcblx0XHRjb2xvcjogJHt0aGVtZS51aS50ZXh0W1wiMVwiXX07XG5cdFx0Ym94LXNoYWRvdzogaW5zZXQgMCAwIDAgMXB4ICR7dGhlbWUudWkub3V0bGluZVtcIjFcIl19O1xuXHRcdHRleHQtYWxpZ246ICR7dGV4dEFsaWdufTtcblxuXHRcdCY6Zm9jdXMge1xuXHRcdFx0JHtmb2N1c307XG5cdFx0fVxuXG5cdFx0JjppbnZhbGlkIHtcblx0XHRcdGJveC1zaGFkb3c6IGluc2V0IDAgMCAwIDFweCByZWQ7IC8vIEB0b2RvIGFkZCBicmFuZCBjb2xvclxuXHRcdH1cblx0YH07XG5gO1xuZXhwb3J0IGNvbnN0IFN0eWxlZE51bWJlcklucHV0ID0gc3R5bGVkKFN0eWxlZElucHV0KSBgXG5cdCZbdHlwZT1cIm51bWJlclwiXSB7XG5cdFx0LW1vei1hcHBlYXJhbmNlOiB0ZXh0ZmllbGQ7XG5cblx0XHQmOjotd2Via2l0LWlubmVyLXNwaW4tYnV0dG9uLFxuXHRcdCY6Oi13ZWJraXQtb3V0ZXItc3Bpbi1idXR0b24ge1xuXHRcdFx0bWFyZ2luOiAwO1xuXHRcdFx0YXBwZWFyYW5jZTogbm9uZTtcblx0XHR9XG5cdH1cbmA7XG4vLyMgc291cmNlTWFwcGluZ1VSTD1zdHlsZWQuanMubWFwIl19 */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
const TextInput = /*#__PURE__*/forwardRef((props, ref) => {
return /*#__PURE__*/React.createElement(StyledInput, _extends({}, props, {
ref: ref,
type: "text",
autoComplete: "off",
autoCorrect: "off",
autoCapitalize: "off",
spellCheck: "false"
}));
});
export { TextInput };