@ucam/design-system/TextField/TextField.js

University of Cambridge Design System

'use strict';

var tslib = require('tslib');
var React = require('react');
var core = require('@material-ui/core');
var FormControl = require('@material-ui/core/FormControl');
var FormHelperText = require('@material-ui/core/FormHelperText');
var InputLabel = require('@material-ui/core/InputLabel');
var Input = require('../Input/Input.js');
var PropTypes = require('prop-types');
var T = require('@material-ui/core/Typography');
var autoId = require('@reach/auto-id');
var clsx = require('clsx');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var FormControl__default = /*#__PURE__*/_interopDefaultLegacy(FormControl);
var FormHelperText__default = /*#__PURE__*/_interopDefaultLegacy(FormHelperText);
var InputLabel__default = /*#__PURE__*/_interopDefaultLegacy(InputLabel);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var T__default = /*#__PURE__*/_interopDefaultLegacy(T);
var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);

const LabelContainer = core.experimentalStyled('div')(({ theme }) => ({
    marginBottom: theme.spacing(1)
}));
const LabelText = core.experimentalStyled(InputLabel__default['default'])(() => ({
    position: 'static',
    transform: 'none',
    color: 'inherit !important',
    fontWeight: 600,
    textAlign: 'left'
}));
const HintText = (props) => React__default['default'].createElement(T__default['default'], Object.assign({ variant: "body2", sx: { mt: 0.5 } }, props));
const FeedbackText = (props) => React__default['default'].createElement(FormHelperText__default['default'], Object.assign({ sx: { mt: 1 } }, props));
const TextField = React__default['default'].forwardRef(function TextField(props, ref) {
    const { label, hint, feedback, id, type = 'text', disabled, sx, formControlProps } = props, rest = tslib.__rest(props, ["label", "hint", "feedback", "id", "type", "disabled", "sx", "formControlProps"]);
    const inputId = 'UCamInput' + autoId.useId(id);
    const hintTextId = 'UCamHint' + autoId.useId();
    const feedbackTextId = 'UCamFeedback' + autoId.useId();
    const labelId = 'UCamLabel' + autoId.useId();
    return (React__default['default'].createElement(FormControl__default['default'], Object.assign({ disabled: disabled, sx: sx }, formControlProps),
        React__default['default'].createElement(LabelContainer, null,
            React__default['default'].createElement(LabelText, { shrink: true, htmlFor: inputId, id: labelId }, label),
            hint && React__default['default'].createElement(HintText, { id: hintTextId }, hint)),
        React__default['default'].createElement(Input, Object.assign({ id: inputId, type: type, inputProps: {
                'aria-labelledby': clsx__default['default'](label && labelId, hint && hintTextId),
                'aria-describedby': feedback && feedbackTextId
            } }, rest, { ref: ref })),
        feedback && (React__default['default'].createElement(FeedbackText, { id: feedbackTextId, sx: { ml: 0 } }, feedback))));
});
TextField.propTypes = Object.assign({ label: PropTypes__default['default'].string.isRequired, hint: PropTypes__default['default'].string, feedback: PropTypes__default['default'].string }, Input.propTypes);

module.exports = TextField;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGV4dEZpZWxkLmpzIiwic291cmNlcyI6WyIvQHVjYW0vZGVzaWduLXN5c3RlbS9zcmMvVGV4dEZpZWxkL1RleHRGaWVsZC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IEZDIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgZXhwZXJpbWVudGFsU3R5bGVkIGFzIHN0eWxlZCB9IGZyb20gJ0BtYXRlcmlhbC11aS9jb3JlJztcbmltcG9ydCBGb3JtQ29udHJvbCwgeyBGb3JtQ29udHJvbFByb3BzIH0gZnJvbSAnQG1hdGVyaWFsLXVpL2NvcmUvRm9ybUNvbnRyb2wnO1xuaW1wb3J0IEZvcm1IZWxwZXJUZXh0LCB7IEZvcm1IZWxwZXJUZXh0UHJvcHMgfSBmcm9tICdAbWF0ZXJpYWwtdWkvY29yZS9Gb3JtSGVscGVyVGV4dCc7XG5pbXBvcnQgSW5wdXRMYWJlbCBmcm9tICdAbWF0ZXJpYWwtdWkvY29yZS9JbnB1dExhYmVsJztcbmltcG9ydCBJbnB1dCBmcm9tICcuLi9JbnB1dCc7XG5pbXBvcnQgeyBDdXN0b21JbnB1dFByb3BzIH0gZnJvbSAnLi4vSW5wdXQvSW5wdXQnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCBULCB7IFR5cG9ncmFwaHlQcm9wcyB9IGZyb20gJ0BtYXRlcmlhbC11aS9jb3JlL1R5cG9ncmFwaHknO1xuaW1wb3J0IHsgdXNlSWQgfSBmcm9tICdAcmVhY2gvYXV0by1pZCc7XG5pbXBvcnQgY2xzeCBmcm9tICdjbHN4JztcblxuY29uc3QgTGFiZWxDb250YWluZXIgPSBzdHlsZWQoJ2RpdicpKCh7IHRoZW1lIH0pID0+ICh7XG4gIG1hcmdpbkJvdHRvbTogdGhlbWUuc3BhY2luZygxKVxufSkpO1xuXG5jb25zdCBMYWJlbFRleHQgPSBzdHlsZWQoSW5wdXRMYWJlbCkoKCkgPT4gKHtcbiAgcG9zaXRpb246ICdzdGF0aWMnLFxuICB0cmFuc2Zvcm06ICdub25lJyxcbiAgY29sb3I6ICdpbmhlcml0ICFpbXBvcnRhbnQnLFxuICBmb250V2VpZ2h0OiA2MDAsXG4gIHRleHRBbGlnbjogJ2xlZnQnXG59KSk7XG5cbmNvbnN0IEhpbnRUZXh0OiBGQzxUeXBvZ3JhcGh5UHJvcHM+ID0gKHByb3BzKSA9PiA8VCB2YXJpYW50PVwiYm9keTJcIiBzeD17eyBtdDogMC41IH19IHsuLi5wcm9wc30gLz47XG5jb25zdCBGZWVkYmFja1RleHQ6IEZDPEZvcm1IZWxwZXJUZXh0UHJvcHM+ID0gKHByb3BzKSA9PiA8Rm9ybUhlbHBlclRleHQgc3g9e3sgbXQ6IDEgfX0gey4uLnByb3BzfSAvPjtcblxuZXhwb3J0IHR5cGUgVGV4dEZpZWxkUHJvcHMgPSBDdXN0b21JbnB1dFByb3BzICYge1xuICAvKipcbiAgICogTGFiZWwgdGV4dCBkaXNwbGF5ZWQgdG8gZGVzY3JpYmUgdGhlIFRleHRGaWVsZCdzIGV4cGVjdGVkIGlucHV0XG4gICAqL1xuICBsYWJlbDogc3RyaW5nO1xuICAvKipcbiAgICogSGludCB0ZXh0IGRpc3BsYXllZCB0byBhc3Npc3QgdXNlciBpbiBjb21wbGV0ZWluZyB0aGUgVGV4dEZpZWxkXG4gICAqL1xuICBoaW50Pzogc3RyaW5nO1xuICAvKipcbiAgICogRmVlZGJhY2sgdGV4dCBkaXNwbGF5ZWQgdG8gY29tbXVuaWNhdGUgc3RhdGUgY2hhbmdlc1xuICAgKi9cbiAgZmVlZGJhY2s/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBQcm9wcyB0byBvdmVycmlkZSBvbiB0aGUgRm9ybUNvbnRyb2wgY29tcG9uZW50XG4gICAqL1xuICBmb3JtQ29udHJvbFByb3BzPzogRm9ybUNvbnRyb2xQcm9wcztcbn07XG5cbmNvbnN0IFRleHRGaWVsZDogRkM8VGV4dEZpZWxkUHJvcHM+ID0gUmVhY3QuZm9yd2FyZFJlZihmdW5jdGlvbiBUZXh0RmllbGQocHJvcHMsIHJlZikge1xuICBjb25zdCB7IGxhYmVsLCBoaW50LCBmZWVkYmFjaywgaWQsIHR5cGUgPSAndGV4dCcsIGRpc2FibGVkLCBzeCwgZm9ybUNvbnRyb2xQcm9wcywgLi4ucmVzdCB9ID0gcHJvcHM7XG5cbiAgY29uc3QgaW5wdXRJZCA9ICdVQ2FtSW5wdXQnICsgdXNlSWQoaWQpO1xuICBjb25zdCBoaW50VGV4dElkID0gJ1VDYW1IaW50JyArIHVzZUlkKCk7XG4gIGNvbnN0IGZlZWRiYWNrVGV4dElkID0gJ1VDYW1GZWVkYmFjaycgKyB1c2VJZCgpO1xuICBjb25zdCBsYWJlbElkID0gJ1VDYW1MYWJlbCcgKyB1c2VJZCgpO1xuXG4gIHJldHVybiAoXG4gICAgPEZvcm1Db250cm9sIGRpc2FibGVkPXtkaXNhYmxlZH0gc3g9e3N4fSB7Li4uZm9ybUNvbnRyb2xQcm9wc30+XG4gICAgICA8TGFiZWxDb250YWluZXI+XG4gICAgICAgIDxMYWJlbFRleHQgc2hyaW5rPXt0cnVlfSBodG1sRm9yPXtpbnB1dElkfSBpZD17bGFiZWxJZH0+XG4gICAgICAgICAge2xhYmVsfVxuICAgICAgICA8L0xhYmVsVGV4dD5cbiAgICAgICAge2hpbnQgJiYgPEhpbnRUZXh0IGlkPXtoaW50VGV4dElkfT57aGludH08L0hpbnRUZXh0Pn1cbiAgICAgIDwvTGFiZWxDb250YWluZXI+XG4gICAgICA8SW5wdXRcbiAgICAgICAgaWQ9e2lucHV0SWR9XG4gICAgICAgIHR5cGU9e3R5cGV9XG4gICAgICAgIGlucHV0UHJvcHM9e3tcbiAgICAgICAgICAnYXJpYS1sYWJlbGxlZGJ5JzogY2xzeChsYWJlbCAmJiBsYWJlbElkLCBoaW50ICYmIGhpbnRUZXh0SWQpLFxuICAgICAgICAgICdhcmlhLWRlc2NyaWJlZGJ5JzogZmVlZGJhY2sgJiYgZmVlZGJhY2tUZXh0SWRcbiAgICAgICAgfX1cbiAgICAgICAgey4uLnJlc3R9XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgLz5cbiAgICAgIHtmZWVkYmFjayAmJiAoXG4gICAgICAgIDxGZWVkYmFja1RleHQgaWQ9e2ZlZWRiYWNrVGV4dElkfSBzeD17eyBtbDogMCB9fT5cbiAgICAgICAgICB7ZmVlZGJhY2t9XG4gICAgICAgIDwvRmVlZGJhY2tUZXh0PlxuICAgICAgKX1cbiAgICA8L0Zvcm1Db250cm9sPlxuICApO1xufSk7XG5cblRleHRGaWVsZC5wcm9wVHlwZXMgPSB7XG4gIGxhYmVsOiBQcm9wVHlwZXMuc3RyaW5nLmlzUmVxdWlyZWQsXG4gIGhpbnQ6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGZlZWRiYWNrOiBQcm9wVHlwZXMuc3RyaW5nLFxuICAuLi5JbnB1dC5wcm9wVHlwZXNcbn07XG5cbmV4cG9ydCBkZWZhdWx0IFRleHRGaWVsZDtcbiJdLCJuYW1lcyI6WyJzdHlsZWQiLCJJbnB1dExhYmVsIiwiUmVhY3QiLCJUIiwiRm9ybUhlbHBlclRleHQiLCJ1c2VJZCIsIkZvcm1Db250cm9sIiwiY2xzeCIsIlByb3BUeXBlcyJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBWUEsTUFBTSxjQUFjLEdBQUdBLHVCQUFNLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxFQUFFLEtBQUssRUFBRSxNQUFNO0lBQ25ELFlBQVksRUFBRSxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQztDQUMvQixDQUFDLENBQUMsQ0FBQztBQUVKLE1BQU0sU0FBUyxHQUFHQSx1QkFBTSxDQUFDQyw4QkFBVSxDQUFDLENBQUMsT0FBTztJQUMxQyxRQUFRLEVBQUUsUUFBUTtJQUNsQixTQUFTLEVBQUUsTUFBTTtJQUNqQixLQUFLLEVBQUUsb0JBQW9CO0lBQzNCLFVBQVUsRUFBRSxHQUFHO0lBQ2YsU0FBUyxFQUFFLE1BQU07Q0FDbEIsQ0FBQyxDQUFDLENBQUM7QUFFSixNQUFNLFFBQVEsR0FBd0IsQ0FBQyxLQUFLLEtBQUtDLHdDQUFDQyxxQkFBQyxrQkFBQyxPQUFPLEVBQUMsT0FBTyxFQUFDLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxHQUFHLEVBQUUsSUFBTSxLQUFLLEVBQUksQ0FBQztBQUNuRyxNQUFNLFlBQVksR0FBNEIsQ0FBQyxLQUFLLEtBQUtELHdDQUFDRSxrQ0FBYyxrQkFBQyxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLElBQU0sS0FBSyxFQUFJLENBQUM7TUFxQmhHLFNBQVMsR0FBdUJGLHlCQUFLLENBQUMsVUFBVSxDQUFDLFNBQVMsU0FBUyxDQUFDLEtBQUssRUFBRSxHQUFHO0lBQ2xGLE1BQU0sRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxFQUFFLEVBQUUsSUFBSSxHQUFHLE1BQU0sRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFLGdCQUFnQixLQUFjLEtBQUssRUFBZCxJQUFJLGdCQUFLLEtBQUssRUFBN0YsaUZBQXFGLENBQVEsQ0FBQztJQUVwRyxNQUFNLE9BQU8sR0FBRyxXQUFXLEdBQUdHLFlBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUN4QyxNQUFNLFVBQVUsR0FBRyxVQUFVLEdBQUdBLFlBQUssRUFBRSxDQUFDO0lBQ3hDLE1BQU0sY0FBYyxHQUFHLGNBQWMsR0FBR0EsWUFBSyxFQUFFLENBQUM7SUFDaEQsTUFBTSxPQUFPLEdBQUcsV0FBVyxHQUFHQSxZQUFLLEVBQUUsQ0FBQztJQUV0QyxRQUNFSCx3Q0FBQ0ksK0JBQVcsa0JBQUMsUUFBUSxFQUFFLFFBQVEsRUFBRSxFQUFFLEVBQUUsRUFBRSxJQUFNLGdCQUFnQjtRQUMzREosd0NBQUMsY0FBYztZQUNiQSx3Q0FBQyxTQUFTLElBQUMsTUFBTSxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxPQUFPLElBQ25ELEtBQUssQ0FDSTtZQUNYLElBQUksSUFBSUEsd0NBQUMsUUFBUSxJQUFDLEVBQUUsRUFBRSxVQUFVLElBQUcsSUFBSSxDQUFZLENBQ3JDO1FBQ2pCQSx3Q0FBQyxLQUFLLGtCQUNKLEVBQUUsRUFBRSxPQUFPLEVBQ1gsSUFBSSxFQUFFLElBQUksRUFDVixVQUFVLEVBQUU7Z0JBQ1YsaUJBQWlCLEVBQUVLLHdCQUFJLENBQUMsS0FBSyxJQUFJLE9BQU8sRUFBRSxJQUFJLElBQUksVUFBVSxDQUFDO2dCQUM3RCxrQkFBa0IsRUFBRSxRQUFRLElBQUksY0FBYzthQUMvQyxJQUNHLElBQUksSUFDUixHQUFHLEVBQUUsR0FBRyxJQUNSO1FBQ0QsUUFBUSxLQUNQTCx3Q0FBQyxZQUFZLElBQUMsRUFBRSxFQUFFLGNBQWMsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLElBQzVDLFFBQVEsQ0FDSSxDQUNoQixDQUNXLEVBQ2Q7QUFDSixDQUFDLEVBQUU7QUFFSCxTQUFTLENBQUMsU0FBUyxtQkFDakIsS0FBSyxFQUFFTSw2QkFBUyxDQUFDLE1BQU0sQ0FBQyxVQUFVLEVBQ2xDLElBQUksRUFBRUEsNkJBQVMsQ0FBQyxNQUFNLEVBQ3RCLFFBQVEsRUFBRUEsNkJBQVMsQ0FBQyxNQUFNLElBQ3ZCLEtBQUssQ0FBQyxTQUFTLENBQ25COzs7OyJ9