@onesy/ui-react
Version:
UI for React
973 lines (964 loc) • 43.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _IconMaterialPassword2W = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialPassword2W100"));
var _IconMaterialPassword2OffW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialPassword2OffW100"));
var _IconMaterialCloseW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloseW100"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Type = _interopRequireDefault(require("../Type"));
var _Line = _interopRequireDefault(require("../Line"));
var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "tonal", "color", "version", "size", "rootRef", "valueDefault", "value", "onChange", "name", "label", "align", "start", "startVerticalAlign", "end", "endVerticalAlign", "placeholder", "fullWidth", "helperText", "counter", "prefix", "sufix", "noPrefixMargin", "noSufixMargin", "enabled", "autoFocus", "autoComplete", "type", "required", "optional", "optionalText", "error", "multiline", "rows", "minRows", "maxRows", "clear", "focus", "footer", "subscription", "controlled", "minimal", "restoreSelection", "minWidth", "readOnly", "disabled", "onInput", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "inputProps", "InputWrapperProps", "HelperTextProps", "IconProps", "IconClear", "InputComponent", "WrapperComponent", "Component", "className", "style", "children", "colorUnchecked"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const useStyle = (0, _styleReact.style)(theme => {
const other = {
pointerEvents: 'none',
borderRadius: 'inherit',
boxSizing: 'border-box',
position: 'absolute',
inset: '0',
width: '100%',
height: '100%'
};
const overflow = {
width: '100%',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
};
return {
wrapper: {
position: 'relative',
display: 'inline-flex',
flexDirection: 'column'
},
root: {
display: 'inline-flex',
alignItems: 'center',
position: 'relative',
borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`,
'& > *': {
'&::-webkit-scrollbar': {
width: '0px',
height: '0px'
}
}
},
// Color
color_default: {
color: theme.palette.text.default.primary
},
color_neutral: {
color: theme.palette.color.neutral.main
},
color_primary: {
color: theme.palette.color.primary.main
},
color_secondary: {
color: theme.palette.color.secondary.main
},
color_tertiary: {
color: theme.palette.color.tertiary.main
},
color_quaternary: {
color: theme.palette.color.quaternary.main
},
color_info: {
color: theme.palette.color.info.main
},
color_success: {
color: theme.palette.color.success.main
},
color_warning: {
color: theme.palette.color.warning.main
},
color_error: {
color: theme.palette.color.error.main
},
error_color: {
color: [theme.palette.light ? theme.palette.color.error[40] : theme.palette.color.error[80], '!important']
},
error_hover_color: {
color: [theme.palette.light ? theme.palette.color.error[20] : theme.palette.color.error[90], '!important']
},
inputWrapper: _objectSpread({
// Reset
margin: '0',
border: '0',
fontFamily: 'inherit',
fontSize: '100%',
lineHeight: '1.15',
overflow: 'visible',
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
opacity: '0',
transition: theme.methods.transitions.make('opacity'),
borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`,
cursor: 'text',
zIndex: '1',
flex: '1 1 auto'
}, theme.typography.values.b2),
inputWrapper_focus: {
opacity: '1'
},
input: _objectSpread({
// Reset
margin: '0',
border: '0',
outline: 'none',
color: theme.palette.text.default.primary,
background: 'transparent',
'-webkit-tap-highlight-color': 'transparent',
textAlign: 'start'
}, overflow),
input_size_small: _objectSpread({}, theme.typography.values.b2),
input_size_regular: _objectSpread({}, theme.typography.values.b2),
input_size_large: _objectSpread({}, theme.typography.values.b1),
multiline: {
resize: 'none',
overflow: 'auto',
whiteSpace: 'normal'
},
inputWrapper_size_small: {
// height: '48px',
padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2, 'px')}`,
paddingTop: theme.methods.space.value(2.5, 'px')
},
inputWrapper_size_regular: {
// height: '56px',
padding: `11px ${theme.methods.space.value(2, 'px')}`,
paddingTop: theme.methods.space.value(3, 'px')
},
inputWrapper_size_large: {
// height: '64px',
padding: theme.methods.space.value(2, 'px'),
paddingTop: theme.methods.space.value(3.5, 'px')
},
inputWrapper_without_label_size_small: {
paddingTop: `${theme.methods.space.value(1, 'px')}`
},
inputWrapper_without_label_size_regular: {
paddingTop: `${theme.methods.space.value(2, 'px')}`
},
inputWrapper_without_label_size_large: {
paddingTop: `${theme.methods.space.value(2, 'px')}`
},
input_version_text: {
'&:not($input_start_icon)': {
paddingInline: '0'
}
},
input_start_icon: {
paddingInlineStart: '0'
},
input_end_icon: {
paddingInlineEnd: '0'
},
input_version_outlined_size_small: {
paddingTop: theme.methods.space.value(1.75, 'px'),
paddingBottom: theme.methods.space.value(1.75, 'px')
},
input_version_outlined_size_regular: {
paddingTop: theme.methods.space.value(2.25, 'px'),
paddingBottom: theme.methods.space.value(2.25, 'px')
},
input_version_outlined_size_large: {
paddingTop: theme.methods.space.value(2.75, 'px'),
paddingBottom: theme.methods.space.value(2.75, 'px')
},
input_align_start: {
textAlign: 'start'
},
input_align_center: {
textAlign: 'center'
},
input_align_end: {
textAlign: 'end'
},
label: _objectSpread(_objectSpread({
position: 'absolute',
insetInlineStart: '16px',
transformOrigin: 'top left',
transition: theme.methods.transitions.make(['color', 'inset', 'margin', 'transform']),
pointerEvents: 'none',
userSelect: 'none',
zIndex: '1'
}, overflow), {}, {
width: 'auto'
}),
label_regular: {
top: '50%',
transform: 'translate(0px, -50%) scale(1)'
},
label_multiline: {
top: '0px'
},
label_rtl: {
transformOrigin: 'top right'
},
label_version_text: {
insetInlineStart: '0px'
},
label_icon_start: {
insetInlineStart: theme.methods.space.value(6.5, 'px')
},
label_size_small_multiline: {
transform: 'translate(4px, 14px) scale(1)'
},
label_size_regular_multiline: {
transform: 'translate(4px, 18px) scale(1)'
},
label_size_large_multiline: {
transform: 'translate(4px, 22px) scale(1)'
},
// Focus
label_version_text_focus: {
top: '0px',
insetInlineStart: '0px',
transform: 'translate(0, 6px) scale(0.667)'
},
label_version_outlined_focus: {
top: '0px',
insetInlineStart: '15px',
marginInlineStart: '4px',
transform: 'translate(0, -6px) scale(0.667)'
},
label_version_filled_focus: {
top: '0px',
insetInlineStart: '15px',
transform: 'translate(0, 6px) scale(0.667)'
},
background: _objectSpread(_objectSpread({}, other), {}, {
background: 'currentColor',
borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`,
opacity: theme.palette.light ? theme.palette.visual_contrast.default.opacity.hover : theme.palette.visual_contrast.default.opacity.selected,
zIndex: '0',
transition: theme.methods.transitions.make(['opacity'])
}),
background_hover: {
opacity: theme.palette.visual_contrast.default.opacity.focus
},
background_focus: {
opacity: theme.palette.light ? theme.palette.visual_contrast.default.opacity.hover : theme.palette.visual_contrast.default.opacity.selected
},
border: _objectSpread(_objectSpread({}, other), {}, {
borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`,
boxShadow: 'inset 0px -1px 0px 0px currentColor',
zIndex: '1',
transition: theme.methods.transitions.make(['box-shadow'])
}),
border_focus: {
boxShadow: 'inset 0px -2px 0px 0px currentColor'
},
fieldset: _objectSpread(_objectSpread({}, other), {}, {
top: '-5px',
height: 'calc(100% + 5px)',
borderRadius: `${theme.shape.radius.unit}px`,
border: '1px solid currentColor',
padding: '0',
paddingInline: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2, 'px')}`,
transition: theme.methods.transitions.make(['border', 'padding'])
}),
fieldset_focus: {
borderWidth: '2px',
paddingInline: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2, 'px')}`
},
legend: _objectSpread(_objectSpread({
display: 'inline-flex',
height: '11px',
width: 'auto',
padding: '0px',
maxWidth: '0.001px',
whiteSpace: 'nowrap',
visibility: 'hidden',
overflow: 'hidden',
transition: theme.methods.transitions.make(['max-width', 'padding'], {
duration: 'xxs'
})
}, theme.typography.values.b2), {}, {
fontSize: '0.64rem',
letterSpacing: 'normal'
}),
legend_focus: {
maxWidth: '100%',
padding: `0 ${theme.methods.space.value(0.5, 'px')}`,
transition: theme.methods.transitions.make(['max-width', 'padding'], {
duration: 'xs'
})
},
footer: {
marginTop: '4px',
paddingInline: theme.methods.space.value(2, 'px')
},
footer_version_text: {
paddingInline: '0'
},
helperText: {
display: 'inline-flex',
color: theme.palette.text.default.secondary,
userSelect: 'none'
},
counterText: {
display: 'inline-flex',
justifyContent: 'flex-end',
color: theme.palette.text.default.secondary,
userSelect: 'none',
flex: '1 0 auto'
},
// Start and end icon
icon: {
display: 'inline-flex',
alignItems: 'center',
flex: '0 0 auto'
},
icon_size_small: {
paddingBlock: '12px'
},
icon_size_regular: {
paddingBlock: '16px'
},
icon_size_large: {
paddingBlock: '24px'
},
icon_version_text_size_small: {
paddingBlock: '6px'
},
icon_version_text_size_regular: {
paddingBlock: '8px'
},
icon_version_text_size_large: {
paddingBlock: '12px'
},
icon_version_outlined_size_small: {
paddingBlock: '9px'
},
icon_version_outlined_size_regular: {
paddingBlock: '12px'
},
icon_version_outlined_size_large: {
paddingBlock: '17px'
},
icon_version_filled_size_small: {
paddingBlock: '9px'
},
icon_version_filled_size_regular: {
paddingBlock: '12px'
},
icon_version_filled_size_large: {
paddingBlock: '17px'
},
icon_button_size_small: {
paddingBlock: '4px'
},
icon_button_size_regular: {
paddingBlock: '8px'
},
icon_button_size_large: {
paddingBlock: '12px'
},
icon_start: {
maxWidth: '40%',
overflow: 'auto hidden',
paddingInlineEnd: '16px',
paddingInlineStart: '12px'
},
icon_vertical_align_start: {
alignSelf: 'flex-start'
},
icon_vertical_align_center: {
alignSelf: 'center',
paddingBlock: '0px !important'
},
icon_vertical_align_end: {
alignSelf: 'flex-end'
},
icon_end: {
maxWidth: '40%',
overflow: 'auto hidden',
paddingInlineStart: theme.methods.space.value(2, 'px'),
paddingInlineEnd: theme.methods.space.value(1.5, 'px')
},
addition: {
color: theme.palette.text.default.secondary
},
addition_size_small: {
paddingBottom: theme.methods.space.value(1, 'px'),
paddingTop: theme.methods.space.value(2.5, 'px')
},
addition_size_regular: {
paddingBottom: theme.methods.space.value(2, 'px'),
paddingTop: theme.methods.space.value(3, 'px')
},
addition_size_large: {
paddingBottom: theme.methods.space.value(2, 'px'),
paddingTop: theme.methods.space.value(3.5, 'px')
},
addition_version_outlined_size_small: {
paddingTop: theme.methods.space.value(1.75, 'px'),
paddingBottom: theme.methods.space.value(1.75, 'px')
},
addition_version_outlined_size_regular: {
paddingTop: theme.methods.space.value(2.25, 'px'),
paddingBottom: theme.methods.space.value(2.25, 'px')
},
addition_version_outlined_size_large: {
paddingTop: theme.methods.space.value(2.75, 'px'),
paddingBottom: theme.methods.space.value(2.75, 'px')
},
addition_without_label_size_small: {
paddingTop: `${theme.methods.space.value(1, 'px')}`
},
addition_without_label_size_regular: {
paddingTop: `${theme.methods.space.value(2, 'px')}`
},
addition_without_label_size_large: {
paddingTop: `${theme.methods.space.value(2, 'px')}`
},
prefix: {
flex: '0 0 auto',
marginInlineStart: '16px',
marginInlineEnd: '8px',
opacity: '0',
transition: theme.methods.transitions.make('opacity')
},
prefix_noStartMargin: {
marginInlineStart: '0px'
},
prefix_focus: {
opacity: '1'
},
noPrefixMargin: {
marginInlineEnd: '0'
},
sufix: {
flex: '0 0 auto',
marginInlineEnd: '16px',
marginInlineStart: '8px',
opacity: '0',
transition: theme.methods.transitions.make('opacity')
},
sufix_focus: {
opacity: '1'
},
sufix_noEndMargin: {
marginInlineEnd: '0px'
},
noSufixMargin: {
marginInlineStart: '0'
},
fullWidth: {
width: '100%'
},
clear: {
cursor: 'pointer',
pointerEvents: 'all !important',
userSelect: 'none',
transition: theme.methods.transitions.make('transform', {
duration: 'xs'
}),
'&:active': {
transform: 'scale(0.87)'
}
},
disabled: {
opacity: '0.54',
pointerEvents: 'none',
cursor: 'default'
}
};
}, {
name: 'onesy-TextField'
});
const TextField = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _ComponentProps, _type, _type2, _String;
const theme = (0, _styleReact.useOnesyTheme)();
const l = theme.l;
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyTextField) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
const Tooltip = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Tooltip) || _Tooltip.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
const {
ref,
tonal = true,
color = 'primary',
version = 'filled',
size = 'regular',
rootRef,
valueDefault,
value: value_,
onChange,
name,
label: label_,
align,
start,
startVerticalAlign: startVerticalAlign_ = 'start',
end: end_,
endVerticalAlign: endVerticalAlign_ = 'start',
placeholder,
fullWidth: fullWidth_,
helperText,
counter,
prefix,
sufix,
noPrefixMargin,
noSufixMargin,
enabled,
autoFocus,
autoComplete,
type: type_ = 'text',
required,
optional,
optionalText = 'optional',
error,
multiline,
rows: rows_,
minRows = 1,
maxRows,
clear,
focus: focus_,
footer: footer_,
subscription,
controlled,
minimal,
restoreSelection = false,
minWidth,
readOnly,
disabled,
onInput: onInput_,
onFocus: onFocus_,
onBlur: onBlur_,
onMouseEnter: onMouseEnter_,
onMouseLeave: onMouseLeave_,
inputProps = {},
InputWrapperProps = {},
HelperTextProps,
IconProps,
IconClear = _IconMaterialCloseW.default,
InputComponent: InputComponent_,
WrapperComponent = 'div',
Component = 'div',
className,
style,
children,
// Other
colorUnchecked
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const refs = {
root: _react.default.useRef(undefined),
input: _react.default.useRef(undefined),
carret: _react.default.useRef(undefined),
restoreSelection: _react.default.useRef(restoreSelection),
controlled: _react.default.useRef(controlled),
ids: {
label: _react.default.useId(),
clear: _react.default.useId()
}
};
refs.controlled.current = controlled;
const keys = _react.default.useMemo(() => {
const result = [];
const items = [fullWidth_];
items.forEach(item => {
if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
});
return (0, _utils.unique)(result);
}, [fullWidth_]);
const breakpoints = {};
keys.forEach(key_1 => {
breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
element: refs.root.current
});
});
const label = name !== undefined ? name : label_;
let startVerticalAlign = startVerticalAlign_;
let endVerticalAlign = endVerticalAlign_;
const fullWidth = (0, _utils2.valueBreakpoints)(fullWidth_, undefined, breakpoints, theme);
const rowValue = () => {
var _refs$root$current;
const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
const htmlFontSize = (0, _utils.isEnvironment)('browser') ? +window.getComputedStyle(rootDocument.documentElement).fontSize.slice(0, -2) : 16;
const padding = size === 'small' ? 28 : size === 'regular' ? 36 : 44;
const row_ = Math.round(htmlFontSize * 0.875 * 1.4285714285714286);
return {
height: row_,
padding
};
};
const [value, setValue] = _react.default.useState(valueDefault !== undefined ? valueDefault : value_);
const [focus, setFocus] = _react.default.useState(focus_);
const [mouseDown, setMouseDown] = _react.default.useState(false);
const [hover, setHover] = _react.default.useState(false);
const [row, setRow] = _react.default.useState(rowValue);
const [rows, setRows] = _react.default.useState(1);
const [visible, setVisible] = _react.default.useState(false);
let type = type_;
const styles = {
root: {},
input: {},
inputWrapper: {},
background: {
color: theme.palette.text.default.secondary
}
};
refs.restoreSelection.current = restoreSelection;
_react.default.useEffect(() => {
var _refs$root$current2;
const rootDocument_0 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
const htmlObserver = new MutationObserver(() => setRow(rowValue));
htmlObserver.observe(rootDocument_0.documentElement, {
attributes: true,
attributeFilter: ['style']
});
rootDocument_0.addEventListener('mouseup', onInputWrapperMouseUp);
return () => {
// Clean up
rootDocument_0.removeEventListener('mouseup', onInputWrapperMouseUp);
htmlObserver.disconnect();
};
}, []);
_react.default.useEffect(() => {
setTimeout(() => {
if (refs.restoreSelection.current && refs.carret.current) {
// Carret restore previous value
try {
refs.input.current.selectionStart = refs.carret.current.start;
refs.input.current.selectionEnd = refs.carret.current.end;
} catch (error_0) {}
}
});
}, [value]);
_react.default.useEffect(() => {
if (value_ !== undefined && value_ !== value) {
setValue(value_);
}
}, [value_]);
_react.default.useEffect(() => {
if (focus_ !== focus && focus_ !== undefined) setFocus(focus_);
}, [focus_]);
_react.default.useEffect(() => {
const method = event => {
if (event === 'clear') onClear();
};
if (subscription) subscription.subscribe(method);
return () => {
if (subscription) subscription.unsubscribe(method);
};
}, [subscription]);
const onToggleVisible = () => {
setVisible(item_0 => !item_0);
};
const onUpdateRows = () => {
if (multiline && row !== undefined) {
const heightValue = refs.input.current.style.height;
// Get actual height with auto
refs.input.current.style.height = 'auto';
const scrollHeight = refs.input.current.scrollHeight;
// Revert back to previous value
refs.input.current.style.height = heightValue;
const newRows = Math.floor(scrollHeight / row.height);
setRows(newRows);
}
};
const onUpdate = event_0 => {
const inputValue = event_0.target.value;
// Carret save previous value
refs.carret.current = {
start: refs.input.current.selectionStart,
end: refs.input.current.selectionEnd
};
// Only restore if it's not regular carret value
if (refs.carret.current.start === inputValue.length) refs.carret.current = undefined;
onUpdateRows();
// Inner controlled value
if (!refs.controlled.current) setValue(inputValue);
if ((0, _utils.is)('function', onChange)) onChange(inputValue, event_0);
};
const onInput = event_1 => {
onUpdateRows();
if ((0, _utils.is)('function', onInput_)) onInput_(event_1);
};
const onClear = () => {
if (!disabled) {
const valueNew = '';
// Inner controlled value
if (!refs.controlled.current) setValue(valueNew);
if ((0, _utils.is)('function', onChange)) onChange(valueNew);
}
};
const onInputWrapperMouseDown = event_2 => {
if (!disabled) {
setMouseDown(true);
refs.input.current.focus();
if ((0, _utils.is)('function', InputWrapperProps.onMouseDown)) InputWrapperProps.onMouseDown(event_2);
}
};
const onInputWrapperMouseUp = event_3 => {
if (!disabled) {
setMouseDown(false);
if ((0, _utils.is)('function', InputWrapperProps.onMouseUp)) InputWrapperProps.onMouseUp(event_3);
}
};
const onInputWrapperClick = event_4 => {
if (!disabled) {
var _refs$input$current;
if (event_4.target === event_4.currentTarget) (_refs$input$current = refs.input.current) === null || _refs$input$current === void 0 || _refs$input$current.focus();
if ((0, _utils.is)('function', InputWrapperProps === null || InputWrapperProps === void 0 ? void 0 : InputWrapperProps.onClick)) InputWrapperProps.onClick(event_4);
}
};
const onFocus = event_5 => {
if (!disabled) {
setFocus(focus_ !== undefined ? focus_ : true);
if ((0, _utils.is)('function', onFocus_)) onFocus_(event_5);
}
};
const onBlur = event_6 => {
if (!disabled) {
setFocus(focus_ !== undefined ? focus_ : false);
if ((0, _utils.is)('function', onBlur_)) onBlur_(event_6);
}
};
const onMouseEnter = event_7 => {
if (!disabled) {
setHover(true);
if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event_7);
}
};
const onMouseLeave = event_8 => {
if (!disabled) {
setHover(false);
if ((0, _utils.is)('function', onMouseLeave_)) onMouseLeave_(event_8);
}
};
const palette = color === 'default' ? theme.palette.color.neutral : !theme.palette.color[color] ? theme.methods.color(color) : theme.palette.color[color];
if (!focus) {
styles.root.color = theme.palette.text.default.secondary;
} else {
var _theme$palette$color$;
styles.root.color = styles.input.caretColor = tonal ? theme.methods.palette.color.value(color, 30, true, palette) : color === 'default' ? theme.palette.text.default.primary : ((_theme$palette$color$ = theme.palette.color[color]) === null || _theme$palette$color$ === void 0 ? void 0 : _theme$palette$color$.main) || color;
}
if (error) {
styles.input.caretColor = theme.palette.light ? theme.palette.color.error[40] : theme.palette.color.error[80];
}
if (tonal) styles.background.color = theme.methods.palette.color.value(color, 20, true, palette);
const footer = footer_ || !!helperText || counter !== undefined || required;
const Wrapper = footer ? WrapperComponent : _react.default.Fragment;
let ComponentProps = {};
let WrapperProps = {};
if (footer) {
WrapperProps = _objectSpread({}, other);
WrapperProps.ref = item_1 => {
if (rootRef) {
if ((0, _utils.is)('function', rootRef)) rootRef(item_1);else rootRef.current = item_1;
}
refs.root.current = item_1;
};
WrapperProps['className'] = (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-wrapper', fullWidth && 'onesy-TextField-full-width', disabled && 'onesy-TextField-disabled', fullWidth && 'onesy-full-width'], className, classes.wrapper, fullWidth && classes.fullWidth, disabled && classes.disabled]);
WrapperProps.style = _objectSpread({}, style);
} else {
ComponentProps = _objectSpread({}, other);
ComponentProps.ref = item_2 => {
if (rootRef) {
if ((0, _utils.is)('function', rootRef)) rootRef(item_2);else rootRef.current = item_2;
}
refs.root.current = item_2;
};
ComponentProps.className = className;
ComponentProps.style = _objectSpread({}, style);
}
ComponentProps.style = _objectSpread(_objectSpread({}, ComponentProps.style), styles.root);
let InputComponent = 'input';
if (multiline) {
InputComponent = 'textarea';
inputProps.rows = 1;
type = undefined;
if (row) {
if (rows_) {
styles.input.height = rows_ * row.height;
styles.inputWrapper.height = rows_ * row.height + row.padding;
} else {
styles.input.height = row.height * (0, _utils.clamp)(rows, minRows, maxRows);
styles.inputWrapper.height = row.height * (0, _utils.clamp)(rows, minRows, maxRows) + row.padding;
}
}
}
// override the input element
// with a custom value
if (InputComponent_) InputComponent = InputComponent_;
// onInput
if (!['input', 'textarea'].includes(InputComponent)) {
inputProps.onInput = onInput;
}
const iconProps = {
size
};
const isTypePassword = type === 'password';
const end = (Array.isArray(end_) ? end_ : [end_]).filter(Boolean);
if (value && clear) {
const exists = end === null || end === void 0 ? void 0 : end.find(item_3 => item_3.key === refs.ids.clear);
if (!exists) {
end.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(IconClear, _objectSpread(_objectSpread({
color: "inherit",
onClick: onClear
}, IconProps), {}, {
className: (0, _styleReact.classNames)([IconProps === null || IconProps === void 0 ? void 0 : IconProps.className, classes.clear])
}), refs.ids.clear));
}
}
if (value && isTypePassword) {
end.unshift(/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
name: visible ? l('Hide password') : l('View password'),
color: "inverted",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
onClick: onToggleVisible,
color: "default",
size: size === 'large' ? 'regular' : 'small',
children: visible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialPassword2OffW.default, _objectSpread({}, iconProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMaterialPassword2W.default, _objectSpread({}, iconProps))
})
}));
}
if (!multiline) {
if (props.startVerticalAlign === undefined) startVerticalAlign = version === 'text' ? 'end' : 'center';
if (props.endVerticalAlign === undefined) endVerticalAlign = version === 'text' ? 'end' : 'center';
}
const valueWithData = value !== undefined && String(value);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({}, WrapperProps), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, _objectSpread(_objectSpread({
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
onTouchStart: onMouseEnter,
onTouchEnd: onMouseLeave,
role: "textbox",
"aria-multiline": multiline,
"aria-labelledby": refs.ids.label
}, ComponentProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-root',, `onesy-TextField-version-${version}`, `onesy-TextField-size-${size}`, multiline && `onesy-TextField-multiline`, valueWithData && 'onesy-TextField-value', error && `onesy-TextField-error`, required && 'onesy-TextField-required', enabled && 'onesy-TextField-enabled', hover && `onesy-TextField-hover`, mouseDown && `onesy-TextField-mouse-down`, focus && `onesy-TextField-focus`, readOnly && `onesy-TextField-read-only`, disabled && 'onesy-TextField-disabled', fullWidth && 'onesy-full-width'], ComponentProps.className, classes.root, classes[`color_${color}`], fullWidth && classes.fullWidth, error && (hover ? classes.error_hover_color : classes.error_color), !footer && disabled && classes.disabled]),
style: _objectSpread({
minWidth
}, (_ComponentProps = ComponentProps) === null || _ComponentProps === void 0 ? void 0 : _ComponentProps.style),
children: [!minimal && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [['filled'].includes(version) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-background'], classes.background, (enabled || valueWithData || focus) && classes.background_focus, hover && classes.background_hover]),
style: styles.background
}), ['text', 'filled'].includes(version) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-border'], classes.border, focus && classes.border_focus]),
style: styles.border
}), ['outlined'].includes(version) && /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-fieldset'], classes.fieldset, focus && classes.fieldset_focus]),
style: styles.fieldset,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("legend", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-legend'], classes.legend, (enabled || valueWithData || focus) && label !== undefined && classes.legend_focus]),
children: [label, required ? '*' : '', optional ? ` (${optionalText})` : '']
})
})]
}), label && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
id: refs.ids.label,
Component: "label",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-label'], classes.label, classes[`label_${multiline ? 'multiline' : 'regular'}`], classes[`label_version_${version}`], classes[`label_size_${size}`], multiline && classes[`label_size_${size}_multiline`], classes[`label_version_${version}_size_${size}`], (enabled || valueWithData || focus) && [classes[`label_focus`], classes[`label_version_${version}_focus`], classes[`label_version_${version}_size_${size}${multiline ? '_multiline' : ''}_focus`], multiline && classes.label_multiline_focus], theme.direction === 'rtl' && classes.label_rtl, start && [classes.label_icon_start, classes[`label_version_${version}_icon_start`]]]),
children: [label, required ? '*' : '', optional ? ` (${optionalText})` : '']
}), !minimal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: !!_react.default.Children.toArray(start).length && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-icon', 'onesy-TextField-icon-start'], classes.icon, classes.icon_start, classes[`icon${start !== null && start !== void 0 && (_type = start.type) !== null && _type !== void 0 && (_type = _type.displayName) !== null && _type !== void 0 && _type.includes('IconButton') ? '_button' : ''}_size_${size}`], classes[`icon_version_${version}`], classes[`icon_version_${version}_size_${size}`], classes[`icon_vertical_align_${startVerticalAlign}`]]),
children: _react.default.Children.toArray(start).map((item_4, index) => {
var _item_4$props, _item_4$props2, _item_4$props3, _item_4$props4;
return /*#__PURE__*/_react.default.cloneElement(item_4, {
key: index,
size: ((_item_4$props = item_4.props) === null || _item_4$props === void 0 ? void 0 : _item_4$props.size) !== undefined ? (_item_4$props2 = item_4.props) === null || _item_4$props2 === void 0 ? void 0 : _item_4$props2.size : 'regular',
color: ((_item_4$props3 = item_4.props) === null || _item_4$props3 === void 0 ? void 0 : _item_4$props3.color) !== undefined ? (_item_4$props4 = item_4.props) === null || _item_4$props4 === void 0 ? void 0 : _item_4$props4.color : theme.palette.text.default.secondary,
style: _objectSpread(_objectSpread({}, item_4.props.style), styles.icon)
});
})
})
}), prefix !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-addition', 'onesy-TextField-prefix'], classes.addition, classes.prefix, (start || version === 'text') && classes.prefix_noStartMargin, classes[`addition_size_${size}`], classes[`addition_version_${version}_size_${size}`], (enabled || valueWithData || focus) && classes.prefix_focus, noPrefixMargin && classes.noPrefixMargin, minimal && !label && classes[`addition_without_label_size_${size}`]]),
children: prefix
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({}, InputWrapperProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-input-wrapper'], classes.inputWrapper, InputWrapperProps === null || InputWrapperProps === void 0 ? void 0 : InputWrapperProps.className, (enabled || label === undefined || valueWithData || focus) && classes.inputWrapper_focus, classes[`input_version_${version}`], classes[`inputWrapper_size_${size}`], classes[`input_version_${version}_size_${size}`], (prefix || start) && classes.input_start_icon, (sufix || end) && classes.input_end_icon, minimal && !label && classes[`inputWrapper_without_label_size_${size}`]]),
onClick: onInputWrapperClick,
onMouseUp: onInputWrapperMouseUp,
onMouseDown: onInputWrapperMouseDown,
style: _objectSpread(_objectSpread({}, styles.inputWrapper), InputWrapperProps.style),
children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(InputComponent, _objectSpread(_objectSpread({}, inputProps), {}, {
ref: item_5 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_5);else ref.current = item_5;
}
refs.input.current = item_5;
if (inputProps.ref) {
if ((0, _utils.is)('function', inputProps.ref)) inputProps.ref(item_5);else inputProps.ref.current = item_5;
}
},
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-input'], classes.input, classes[`input_size_${size}`], inputProps === null || inputProps === void 0 ? void 0 : inputProps.className, multiline && classes.multiline, align && classes[`input_align_${align}`]]),
onFocus: onFocus,
onBlur: onBlur,
placeholder: placeholder,
onChange: onUpdate,
value: value !== undefined ? value : '',
type: type === 'password' && visible ? 'text' : type,
autoFocus: autoFocus,
autoComplete: autoComplete,
readOnly: readOnly,
disabled: disabled,
style: _objectSpread(_objectSpread({}, styles.input), inputProps.style)
}))]
})), sufix !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: ['small', 'regular'].includes(size) ? 'b2' : 'b1',
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-addition', 'onesy-TextField-sufix'], classes.addition, classes.sufix, (end || version === 'text') && classes.sufix_noEndMargin, classes[`addition_size_${size}`], classes[`addition_version_${version}_size_${size}`], (enabled || valueWithData || focus) && classes.sufix_focus, noSufixMargin && classes.noSufixMargin]),
children: sufix
}), !minimal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: !!_react.default.Children.toArray(end).length && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-icon', 'onesy-TextField-icon-end'], classes.icon, classes.icon_end, classes[`icon${end !== null && end !== void 0 && (_type2 = end.type) !== null && _type2 !== void 0 && (_type2 = _type2.displayName) !== null && _type2 !== void 0 && _type2.includes('IconButton') ? '_button' : ''}_size_${size}`], classes[`icon_version_${version}`], classes[`icon_version_${version}_size_${size}`], classes[`icon_vertical_align_${endVerticalAlign}`]]),
children: _react.default.Children.toArray(end).map((item_6, index_0) => {
var _item_6$props, _item_6$props2, _item_6$props3, _item_6$props4;
return /*#__PURE__*/_react.default.cloneElement(item_6, {
key: index_0,
size: ((_item_6$props = item_6.props) === null || _item_6$props === void 0 ? void 0 : _item_6$props.size) !== undefined ? (_item_6$props2 = item_6.props) === null || _item_6$props2 === void 0 ? void 0 : _item_6$props2.size : size,
color: ((_item_6$props3 = item_6.props) === null || _item_6$props3 === void 0 ? void 0 : _item_6$props3.color) !== undefined ? (_item_6$props4 = item_6.props) === null || _item_6$props4 === void 0 ? void 0 : _item_6$props4.color : error ? theme.palette.light ? theme.palette.color.error[hover ? 20 : 40] : theme.palette.color.error[hover ? 90 : 80] : theme.palette.text.default.secondary,
style: _objectSpread(_objectSpread({}, item_6.props.style), styles.icon)
});
})
})
})]
})), footer && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [(!!helperText || counter !== undefined || required) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 2,
direction: "row",
justify: "space-between",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-footer'], classes.footer, classes[`footer_version_${version}`]]),
children: [(helperText || required) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
version: ['small', 'regular'].includes(size) ? 'b3' : 'b2'
}, HelperTextProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-helper-text', error && 'onesy-TextField-error'], HelperTextProps === null || HelperTextProps === void 0 ? void 0 : HelperTextProps.className, classes.helperText, error && classes.error_color]),
children: helperText !== undefined ? helperText : required ? `*${l('required')}` : ''
})), counter && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
version: ['small', 'regular'].includes(size) ? 'b3' : 'b2',
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TextField', theme) && ['onesy-TextField-counter'], classes.counterText, error && classes.error_color]),
children: [((_String = String(value)) === null || _String === void 0 ? void 0 : _String.length) || 0, "/", counter]
})]
}), footer_]
})]
}));
};
TextField.displayName = 'onesy-TextField';
var _default = exports.default = TextField;