@flodesk/grain 11.0.9 → 11.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/components/text-input.js +64 -47
- package/package.json +1 -1
|
@@ -1,20 +1,7 @@
|
|
|
1
|
-
import "core-js/modules/es.object.keys.js";
|
|
2
|
-
import "core-js/modules/es.array.index-of.js";
|
|
3
|
-
import "core-js/modules/es.symbol.js";
|
|
4
|
-
import "core-js/modules/es.object.assign.js";
|
|
5
|
-
import "core-js/modules/es.symbol.description.js";
|
|
6
|
-
import "core-js/modules/es.object.to-string.js";
|
|
7
|
-
import "core-js/modules/es.symbol.iterator.js";
|
|
8
|
-
import "core-js/modules/es.array.iterator.js";
|
|
9
|
-
import "core-js/modules/es.string.iterator.js";
|
|
10
|
-
import "core-js/modules/web.dom-collections.iterator.js";
|
|
11
|
-
import "core-js/modules/es.array.slice.js";
|
|
12
|
-
import "core-js/modules/es.array.from.js";
|
|
13
|
-
import "core-js/modules/es.regexp.exec.js";
|
|
14
1
|
import _styled from "@emotion/styled/base";
|
|
15
2
|
var _excluded = ["children", "internalType", "setInternalType"],
|
|
16
3
|
_excluded2 = ["children"],
|
|
17
|
-
_excluded3 = ["value", "placeholder", "label", "id", "icon", "hasError", "errorMessage", "isReadOnly", "isDisabled", "type", "hint"];
|
|
4
|
+
_excluded3 = ["value", "placeholder", "label", "id", "icon", "hasError", "errorMessage", "isReadOnly", "isDisabled", "type", "hint", "onClear"];
|
|
18
5
|
|
|
19
6
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
20
7
|
|
|
@@ -30,12 +17,24 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
30
17
|
|
|
31
18
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
|
|
32
19
|
|
|
33
|
-
import "core-js/modules/es.array.concat.js";
|
|
34
|
-
|
|
35
20
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
36
21
|
|
|
37
22
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
38
23
|
|
|
24
|
+
import "core-js/modules/es.array.concat.js";
|
|
25
|
+
import "core-js/modules/es.object.keys.js";
|
|
26
|
+
import "core-js/modules/es.array.index-of.js";
|
|
27
|
+
import "core-js/modules/es.symbol.js";
|
|
28
|
+
import "core-js/modules/es.object.assign.js";
|
|
29
|
+
import "core-js/modules/es.symbol.description.js";
|
|
30
|
+
import "core-js/modules/es.object.to-string.js";
|
|
31
|
+
import "core-js/modules/es.symbol.iterator.js";
|
|
32
|
+
import "core-js/modules/es.array.iterator.js";
|
|
33
|
+
import "core-js/modules/es.string.iterator.js";
|
|
34
|
+
import "core-js/modules/web.dom-collections.iterator.js";
|
|
35
|
+
import "core-js/modules/es.array.slice.js";
|
|
36
|
+
import "core-js/modules/es.array.from.js";
|
|
37
|
+
import "core-js/modules/es.regexp.exec.js";
|
|
39
38
|
import PropTypes from 'prop-types';
|
|
40
39
|
import React from 'react';
|
|
41
40
|
import { Box, Text } from '.';
|
|
@@ -43,7 +42,7 @@ import { Icon } from './icon';
|
|
|
43
42
|
import { IconButton } from './icon-button';
|
|
44
43
|
import { componentVars, FieldHint, FieldLabel, InputField } from '../foundational';
|
|
45
44
|
import { types } from '../types';
|
|
46
|
-
import { IconHide, IconShow } from '../icons';
|
|
45
|
+
import { IconCross, IconHide, IconShow } from '../icons';
|
|
47
46
|
import { useWidth } from '../hooks';
|
|
48
47
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
49
48
|
var iconOffsetPx = 12;
|
|
@@ -54,19 +53,11 @@ var IconSection = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "producti
|
|
|
54
53
|
} : {
|
|
55
54
|
target: "e1o9e51y0",
|
|
56
55
|
label: "IconSection"
|
|
57
|
-
})("position:absolute;margin:auto;left:", iconOffsetPx, "px;top:0;bottom:0;height:fit-content;pointer-events:none;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
58
|
-
|
|
59
|
-
var VisibilityButton = function VisibilityButton(_ref) {
|
|
60
|
-
var children = _ref.children,
|
|
61
|
-
internalType = _ref.internalType,
|
|
62
|
-
setInternalType = _ref.setInternalType,
|
|
63
|
-
props = _objectWithoutProperties(_ref, _excluded);
|
|
56
|
+
})("position:absolute;margin:auto;left:", iconOffsetPx, "px;top:0;bottom:0;height:fit-content;pointer-events:none;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtaW5wdXQuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWM4QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy90ZXh0LWlucHV0LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgQm94LCBUZXh0IH0gZnJvbSAnLic7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSAnLi9pY29uJztcbmltcG9ydCB7IEljb25CdXR0b24gfSBmcm9tICcuL2ljb24tYnV0dG9uJztcbmltcG9ydCB7IGNvbXBvbmVudFZhcnMsIEZpZWxkSGludCwgRmllbGRMYWJlbCwgSW5wdXRGaWVsZCB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCB7IEljb25Dcm9zcywgSWNvbkhpZGUsIEljb25TaG93IH0gZnJvbSAnLi4vaWNvbnMnO1xuaW1wb3J0IHsgdXNlV2lkdGggfSBmcm9tICcuLi9ob29rcyc7XG5cbmNvbnN0IGljb25PZmZzZXRQeCA9IDEyO1xuY29uc3QgaWNvblRleHRHYXBQeCA9IDg7XG5cbmNvbnN0IEljb25TZWN0aW9uID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBtYXJnaW46IGF1dG87XG4gIGxlZnQ6ICR7aWNvbk9mZnNldFB4fXB4O1xuICB0b3A6IDA7XG4gIGJvdHRvbTogMDtcbiAgaGVpZ2h0OiBmaXQtY29udGVudDtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG5gO1xuXG5jb25zdCBBY3Rpb25CdXR0b25XcmFwcGVyID0gKHsgY2hpbGRyZW4gfSkgPT4ge1xuICBjb25zdCByaWdodE9mZnNldCA9IGBjYWxjKCgke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH0gLSAke2NvbXBvbmVudFZhcnMuY2xlYXJCdXR0b25IZWlnaHR9KSAvIDIpYDtcbiAgcmV0dXJuIChcbiAgICA8Qm94XG4gICAgICBwb3NpdGlvbj1cImFic29sdXRlXCJcbiAgICAgIHJpZ2h0PXtyaWdodE9mZnNldH1cbiAgICAgIHRvcD1cIjBcIlxuICAgICAgYm90dG9tPVwiMFwiXG4gICAgICBtYXJnaW49XCJhdXRvXCJcbiAgICAgIGhlaWdodD1cImZpdC1jb250ZW50XCJcbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9Cb3g+XG4gICk7XG59O1xuXG5jb25zdCBWaXNpYmlsaXR5QnV0dG9uID0gKHsgY2hpbGRyZW4sIGludGVybmFsVHlwZSwgc2V0SW50ZXJuYWxUeXBlLCAuLi5wcm9wcyB9KSA9PiB7XG4gIGNvbnN0IHR5cGVBbmRJY29uTWFwID0ge1xuICAgIHBhc3N3b3JkOiA8SWNvblNob3cgLz4sXG4gICAgdGV4dDogPEljb25IaWRlIC8+LFxuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPEFjdGlvbkJ1dHRvbldyYXBwZXI+XG4gICAgICA8SWNvbkJ1dHRvblxuICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgIGljb249e3R5cGVBbmRJY29uTWFwW2ludGVybmFsVHlwZV19XG4gICAgICAgIG9uQ2xpY2s9eygpID0+IHNldEludGVybmFsVHlwZShpbnRlcm5hbFR5cGUgPT09ICd0ZXh0JyA/ICdwYXNzd29yZCcgOiAndGV4dCcpfVxuICAgICAgLz5cbiAgICA8L0FjdGlvbkJ1dHRvbldyYXBwZXI+XG4gICk7XG59O1xuXG5jb25zdCBDbGVhckJ1dHRvbiA9ICh7IG9uQ2xpY2sgfSkgPT4gKFxuICA8QWN0aW9uQnV0dG9uV3JhcHBlcj5cbiAgICA8SWNvbkJ1dHRvbiBpY29uPXs8SWNvbkNyb3NzIC8+fSBvbkNsaWNrPXtvbkNsaWNrfSAvPlxuICA8L0FjdGlvbkJ1dHRvbldyYXBwZXI+XG4pO1xuXG5leHBvcnQgY29uc3QgVGV4dElucHV0TGFiZWwgPSAoeyBjaGlsZHJlbiwgLi4ucHJvcHMgfSkgPT4gKFxuICA8RmllbGRMYWJlbCB7Li4ucHJvcHN9PntjaGlsZHJlbn08L0ZpZWxkTGFiZWw+XG4pO1xuXG5leHBvcnQgY29uc3QgVGV4dElucHV0ID0gUmVhY3QuZm9yd2FyZFJlZihcbiAgKFxuICAgIHtcbiAgICAgIHZhbHVlLFxuICAgICAgcGxhY2Vob2xkZXIsXG4gICAgICBsYWJlbCxcbiAgICAgIGlkLFxuICAgICAgaWNvbixcbiAgICAgIGhhc0Vycm9yLFxuICAgICAgZXJyb3JNZXNzYWdlLFxuICAgICAgaXNSZWFkT25seSxcbiAgICAgIGlzRGlzYWJsZWQsXG4gICAgICB0eXBlID0gJ3RleHQnLFxuICAgICAgaGludCxcbiAgICAgIG9uQ2xlYXIsXG4gICAgICAuLi5wcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IHtcbiAgICBjb25zdCBpY29uUmVmID0gUmVhY3QudXNlUmVmKG51bGwpO1xuICAgIGNvbnN0IFtpbnRlcm5hbFR5cGUsIHNldEludGVybmFsVHlwZV0gPSBSZWFjdC51c2VTdGF0ZSh0eXBlKTtcblxuICAgIGNvbnN0IGljb25XaWR0aCA9IHVzZVdpZHRoKGljb25SZWYpO1xuICAgIGNvbnN0IGhhc1Zpc2liaWxpdHlCdXR0b24gPSB0eXBlID09PSAncGFzc3dvcmQnICYmICFpc1JlYWRPbmx5ICYmICFpc0Rpc2FibGVkO1xuICAgIGNvbnN0IGhhc0NsZWFyQnV0dG9uID0gb25DbGVhciAmJiAhaXNSZWFkT25seSAmJiAhaXNEaXNhYmxlZDtcbiAgICBjb25zdCBoYXNCdXR0b24gPSBoYXNWaXNpYmlsaXR5QnV0dG9uIHx8IGhhc0NsZWFyQnV0dG9uO1xuICAgIGNvbnN0IHBhZGRpbmdMZWZ0ID0gaWNvbiA/IGAke2ljb25PZmZzZXRQeCArIGljb25XaWR0aCArIGljb25UZXh0R2FwUHh9cHhgIDogdW5kZWZpbmVkO1xuICAgIGNvbnN0IHBhZGRpbmdSaWdodCA9IGhhc0J1dHRvbiA/IGNvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodCA6IHVuZGVmaW5lZDtcblxuICAgIGNvbnN0IGZpZWxkTWFyZ2luVG9wID0gbGFiZWwgfHwgaGludCA/ICdiZXR3ZWVuRm9ybUNvbnRyb2xBbmRMYWJlbCcgOiB1bmRlZmluZWQ7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdj5cbiAgICAgICAge2xhYmVsICYmIDxGaWVsZExhYmVsIGh0bWxGb3I9e2lkfT57bGFiZWx9PC9GaWVsZExhYmVsPn1cbiAgICAgICAge2hpbnQgJiYgPEZpZWxkSGludD57aGludH08L0ZpZWxkSGludD59XG4gICAgICAgIDxCb3ggcG9zaXRpb249XCJyZWxhdGl2ZVwiIG1hcmdpblRvcD17ZmllbGRNYXJnaW5Ub3B9PlxuICAgICAgICAgIHtpY29uICYmIChcbiAgICAgICAgICAgIDxJY29uU2VjdGlvbj5cbiAgICAgICAgICAgICAgPEljb24gcmVmPXtpY29uUmVmfSBpY29uPXtpY29ufSAvPlxuICAgICAgICAgICAgPC9JY29uU2VjdGlvbj5cbiAgICAgICAgICApfVxuICAgICAgICAgIDxJbnB1dEZpZWxkXG4gICAgICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgICAgIHR5cGU9e2ludGVybmFsVHlwZX1cbiAgICAgICAgICAgIGlkPXtpZH1cbiAgICAgICAgICAgIHZhbHVlPXt2YWx1ZX1cbiAgICAgICAgICAgIHBsYWNlaG9sZGVyPXtwbGFjZWhvbGRlcn1cbiAgICAgICAgICAgIHBhZGRpbmdMZWZ0PXtwYWRkaW5nTGVmdH1cbiAgICAgICAgICAgIHBhZGRpbmdSaWdodD17cGFkZGluZ1JpZ2h0fVxuICAgICAgICAgICAgaGFzRXJyb3I9e2hhc0Vycm9yfVxuICAgICAgICAgICAgaXNSZWFkT25seT17aXNSZWFkT25seX1cbiAgICAgICAgICAgIGlzRGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgICAgLz5cbiAgICAgICAgICB7aGFzVmlzaWJpbGl0eUJ1dHRvbiAmJiAoXG4gICAgICAgICAgICA8VmlzaWJpbGl0eUJ1dHRvbiBzZXRJbnRlcm5hbFR5cGU9e3NldEludGVybmFsVHlwZX0gaW50ZXJuYWxUeXBlPXtpbnRlcm5hbFR5cGV9IC8+XG4gICAgICAgICAgKX1cbiAgICAgICAgICB7aGFzQ2xlYXJCdXR0b24gJiYgdmFsdWUgJiYgPENsZWFyQnV0dG9uIG9uQ2xpY2s9e29uQ2xlYXJ9IC8+fVxuICAgICAgICA8L0JveD5cbiAgICAgICAge2Vycm9yTWVzc2FnZSAmJiAoXG4gICAgICAgICAgPEJveCBtYXJnaW5Ub3A9XCJiZXR3ZWVuRm9ybUNvbnRyb2xBbmRMYWJlbFwiPlxuICAgICAgICAgICAgPFRleHQgY29sb3I9XCJkYW5nZXJcIj57ZXJyb3JNZXNzYWdlfTwvVGV4dD5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgKX1cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH0sXG4pO1xuXG5UZXh0SW5wdXQuTGFiZWwgPSBUZXh0SW5wdXRMYWJlbDtcblRleHRJbnB1dC5IaW50ID0gRmllbGRIaW50O1xuXG5UZXh0SW5wdXQucHJvcFR5cGVzID0ge1xuICBpZDogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuICBwbGFjZWhvbGRlcjogUHJvcFR5cGVzLnN0cmluZyxcbiAgdmFsdWU6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5udW1iZXJdKSxcbiAgbGFiZWw6IHR5cGVzLmxhYmVsLFxuICBpY29uOiBQcm9wVHlwZXMubm9kZSxcbiAgaGFzRXJyb3I6IFByb3BUeXBlcy5ib29sLFxuICBlcnJvck1lc3NhZ2U6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGlzUmVhZE9ubHk6IFByb3BUeXBlcy5ib29sLFxuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMuYm9vbCxcbiAgdHlwZTogdHlwZXMudGV4dElucHV0LFxuICBoaW50OiB0eXBlcy5oaW50LFxufTtcbiJdfQ== */"));
|
|
64
57
|
|
|
58
|
+
var ActionButtonWrapper = function ActionButtonWrapper(_ref) {
|
|
59
|
+
var children = _ref.children;
|
|
65
60
|
var rightOffset = "calc((".concat(componentVars.textBoxHeight, " - ").concat(componentVars.clearButtonHeight, ") / 2)");
|
|
66
|
-
var typeAndIconMap = {
|
|
67
|
-
password: ___EmotionJSX(IconShow, null),
|
|
68
|
-
text: ___EmotionJSX(IconHide, null)
|
|
69
|
-
};
|
|
70
61
|
return ___EmotionJSX(Box, {
|
|
71
62
|
position: "absolute",
|
|
72
63
|
right: rightOffset,
|
|
@@ -74,7 +65,20 @@ var VisibilityButton = function VisibilityButton(_ref) {
|
|
|
74
65
|
bottom: "0",
|
|
75
66
|
margin: "auto",
|
|
76
67
|
height: "fit-content"
|
|
77
|
-
},
|
|
68
|
+
}, children);
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
var VisibilityButton = function VisibilityButton(_ref2) {
|
|
72
|
+
var children = _ref2.children,
|
|
73
|
+
internalType = _ref2.internalType,
|
|
74
|
+
setInternalType = _ref2.setInternalType,
|
|
75
|
+
props = _objectWithoutProperties(_ref2, _excluded);
|
|
76
|
+
|
|
77
|
+
var typeAndIconMap = {
|
|
78
|
+
password: ___EmotionJSX(IconShow, null),
|
|
79
|
+
text: ___EmotionJSX(IconHide, null)
|
|
80
|
+
};
|
|
81
|
+
return ___EmotionJSX(ActionButtonWrapper, null, ___EmotionJSX(IconButton, _extends({}, props, {
|
|
78
82
|
icon: typeAndIconMap[internalType],
|
|
79
83
|
onClick: function onClick() {
|
|
80
84
|
return setInternalType(internalType === 'text' ? 'password' : 'text');
|
|
@@ -82,26 +86,35 @@ var VisibilityButton = function VisibilityButton(_ref) {
|
|
|
82
86
|
})));
|
|
83
87
|
};
|
|
84
88
|
|
|
85
|
-
|
|
86
|
-
var
|
|
87
|
-
|
|
89
|
+
var ClearButton = function ClearButton(_ref3) {
|
|
90
|
+
var onClick = _ref3.onClick;
|
|
91
|
+
return ___EmotionJSX(ActionButtonWrapper, null, ___EmotionJSX(IconButton, {
|
|
92
|
+
icon: ___EmotionJSX(IconCross, null),
|
|
93
|
+
onClick: onClick
|
|
94
|
+
}));
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
export var TextInputLabel = function TextInputLabel(_ref4) {
|
|
98
|
+
var children = _ref4.children,
|
|
99
|
+
props = _objectWithoutProperties(_ref4, _excluded2);
|
|
88
100
|
|
|
89
101
|
return ___EmotionJSX(FieldLabel, props, children);
|
|
90
102
|
};
|
|
91
|
-
export var TextInput = /*#__PURE__*/React.forwardRef(function (
|
|
92
|
-
var value =
|
|
93
|
-
placeholder =
|
|
94
|
-
label =
|
|
95
|
-
id =
|
|
96
|
-
icon =
|
|
97
|
-
hasError =
|
|
98
|
-
errorMessage =
|
|
99
|
-
isReadOnly =
|
|
100
|
-
isDisabled =
|
|
101
|
-
|
|
102
|
-
type =
|
|
103
|
-
hint =
|
|
104
|
-
|
|
103
|
+
export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
|
|
104
|
+
var value = _ref5.value,
|
|
105
|
+
placeholder = _ref5.placeholder,
|
|
106
|
+
label = _ref5.label,
|
|
107
|
+
id = _ref5.id,
|
|
108
|
+
icon = _ref5.icon,
|
|
109
|
+
hasError = _ref5.hasError,
|
|
110
|
+
errorMessage = _ref5.errorMessage,
|
|
111
|
+
isReadOnly = _ref5.isReadOnly,
|
|
112
|
+
isDisabled = _ref5.isDisabled,
|
|
113
|
+
_ref5$type = _ref5.type,
|
|
114
|
+
type = _ref5$type === void 0 ? 'text' : _ref5$type,
|
|
115
|
+
hint = _ref5.hint,
|
|
116
|
+
onClear = _ref5.onClear,
|
|
117
|
+
props = _objectWithoutProperties(_ref5, _excluded3);
|
|
105
118
|
|
|
106
119
|
var iconRef = React.useRef(null);
|
|
107
120
|
|
|
@@ -112,8 +125,10 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
|
|
|
112
125
|
|
|
113
126
|
var iconWidth = useWidth(iconRef);
|
|
114
127
|
var hasVisibilityButton = type === 'password' && !isReadOnly && !isDisabled;
|
|
128
|
+
var hasClearButton = onClear && !isReadOnly && !isDisabled;
|
|
129
|
+
var hasButton = hasVisibilityButton || hasClearButton;
|
|
115
130
|
var paddingLeft = icon ? "".concat(iconOffsetPx + iconWidth + iconTextGapPx, "px") : undefined;
|
|
116
|
-
var paddingRight =
|
|
131
|
+
var paddingRight = hasButton ? componentVars.textBoxHeight : undefined;
|
|
117
132
|
var fieldMarginTop = label || hint ? 'betweenFormControlAndLabel' : undefined;
|
|
118
133
|
return ___EmotionJSX("div", null, label && ___EmotionJSX(FieldLabel, {
|
|
119
134
|
htmlFor: id
|
|
@@ -137,6 +152,8 @@ export var TextInput = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
|
|
|
137
152
|
}, props)), hasVisibilityButton && ___EmotionJSX(VisibilityButton, {
|
|
138
153
|
setInternalType: setInternalType,
|
|
139
154
|
internalType: internalType
|
|
155
|
+
}), hasClearButton && value && ___EmotionJSX(ClearButton, {
|
|
156
|
+
onClick: onClear
|
|
140
157
|
})), errorMessage && ___EmotionJSX(Box, {
|
|
141
158
|
marginTop: "betweenFormControlAndLabel"
|
|
142
159
|
}, ___EmotionJSX(Text, {
|