@toptal/picasso-outlined-input 5.0.1 → 5.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/dist-package/src/OutlinedInput/OutlinedInput.d.ts.map +1 -1
- package/dist-package/src/OutlinedInput/OutlinedInput.js +9 -3
- package/dist-package/src/OutlinedInput/OutlinedInput.js.map +1 -1
- package/dist-package/src/OutlinedInput/types.d.ts +2 -0
- package/dist-package/src/OutlinedInput/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/OutlinedInput/OutlinedInput.tsx +19 -4
- package/src/OutlinedInput/types.ts +2 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OutlinedInput.d.ts","sourceRoot":"","sources":["../../../src/OutlinedInput/OutlinedInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAmBtE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"OutlinedInput.d.ts","sourceRoot":"","sources":["../../../src/OutlinedInput/OutlinedInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAmBtE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAgEpC,QAAA,MAAM,aAAa,2EAsIjB,CAAA;AAIF,eAAe,aAAa,CAAA"}
|
|
@@ -21,7 +21,13 @@ import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
|
|
|
21
21
|
import { getRootClassName } from './stylesRoot';
|
|
22
22
|
import { getInputClassName } from './stylesInput';
|
|
23
23
|
import { getRows } from './utils';
|
|
24
|
-
const
|
|
24
|
+
const getResetButtonClassName = (visibility, hasValue) => {
|
|
25
|
+
if (visibility === 'always') {
|
|
26
|
+
return 'visible';
|
|
27
|
+
}
|
|
28
|
+
return twJoin('invisible', hasValue && 'peer-focus:visible peer-active:visible group-hover:visible');
|
|
29
|
+
};
|
|
30
|
+
const ResetButton = ({ hasValue, visibility = 'hover', onClick, testIds, }) => (React.createElement(InputAdornment, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.resetButton, position: 'end', className: getResetButtonClassName(visibility, hasValue) },
|
|
25
31
|
React.createElement(ButtonCircular, { tabIndex: -1, icon: React.createElement(CloseMinor16, null), variant: 'flat', role: 'reset', onClick: onClick, onMouseDown: (event) => event.preventDefault(), onFocus: (event) => event.stopPropagation() })));
|
|
26
32
|
const Textarea = forwardRef((_a, ref) => {
|
|
27
33
|
var {
|
|
@@ -31,13 +37,13 @@ const Textarea = forwardRef((_a, ref) => {
|
|
|
31
37
|
});
|
|
32
38
|
const OutlinedInput = forwardRef(function OutlinedInput(_a, ref) {
|
|
33
39
|
var { width = 'auto', size = 'medium', onResetClick = noop, status = 'default', type = 'text' } = _a, props = __rest(_a, ["width", "size", "onResetClick", "status", "type"]);
|
|
34
|
-
const { className, style, multiline, multilineResizable, autoFocus, rows, rowsMax, inputComponent, inputProps, defaultValue, value, startAdornment, endAdornment: userDefinedEndAdornment, onChange, enableReset, disabled, inputRef, testIds, highlight, classes } = props, rest = __rest(props, ["className", "style", "multiline", "multilineResizable", "autoFocus", "rows", "rowsMax", "inputComponent", "inputProps", "defaultValue", "value", "startAdornment", "endAdornment", "onChange", "enableReset", "disabled", "inputRef", "testIds", "highlight", "classes"]);
|
|
40
|
+
const { className, style, multiline, multilineResizable, autoFocus, rows, rowsMax, inputComponent, inputProps, defaultValue, value, startAdornment, endAdornment: userDefinedEndAdornment, onChange, enableReset, resetVisibility, disabled, inputRef, testIds, highlight, classes } = props, rest = __rest(props, ["className", "style", "multiline", "multilineResizable", "autoFocus", "rows", "rowsMax", "inputComponent", "inputProps", "defaultValue", "value", "startAdornment", "endAdornment", "onChange", "enableReset", "resetVisibility", "disabled", "inputRef", "testIds", "highlight", "classes"]);
|
|
35
41
|
const { layout } = useFieldsLayoutContext();
|
|
36
42
|
const isDark = (inputProps === null || inputProps === void 0 ? void 0 : inputProps.variant) === 'dark';
|
|
37
43
|
const shouldShowReset = enableReset && !disabled;
|
|
38
44
|
const hasEndAdornment = status === 'success' || shouldShowReset;
|
|
39
45
|
const endAdornment = hasEndAdornment ? (React.createElement(React.Fragment, null,
|
|
40
|
-
shouldShowReset && (React.createElement(ResetButton, { hasValue: Boolean(value), onClick: onResetClick, testIds: testIds })),
|
|
46
|
+
shouldShowReset && (React.createElement(ResetButton, { hasValue: Boolean(value), visibility: resetVisibility, onClick: onResetClick, testIds: testIds })),
|
|
41
47
|
!multiline && status === 'success' && (React.createElement(InputValidIconAdornment, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.validIcon })),
|
|
42
48
|
userDefinedEndAdornment)) : (userDefinedEndAdornment);
|
|
43
49
|
const divRef = useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OutlinedInput.js","sourceRoot":"","sources":["../../../src/OutlinedInput/OutlinedInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACtE,OAAO,EACL,cAAc,EACd,uBAAuB,GACxB,MAAM,iCAAiC,CAAA;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAC5C,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAA;AAC7D,OAAO,EAAE,KAAK,EAAwB,MAAM,iBAAiB,CAAA;AAC7D,OAAO,EACL,gBAAgB,GAEjB,MAAM,4BAA4B,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAEhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAGjC,MAAM,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,OAAO,
|
|
1
|
+
{"version":3,"file":"OutlinedInput.js","sourceRoot":"","sources":["../../../src/OutlinedInput/OutlinedInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -44,6 +44,8 @@ export interface Props extends BaseProps, Omit<InputHTMLAttributes<HTMLInputElem
|
|
|
44
44
|
size?: Size;
|
|
45
45
|
/** Whether to render reset icon when there is a value in the input */
|
|
46
46
|
enableReset?: boolean;
|
|
47
|
+
/** Controls when the reset button is visible. `hover` shows it only on hover/focus when the input has a value; `always` keeps it visible regardless of hover or content. Only applies when `enableReset` is true. */
|
|
48
|
+
resetVisibility?: 'hover' | 'always';
|
|
47
49
|
/** Callback invoked when reset button was clicked */
|
|
48
50
|
onResetClick?: (event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => void;
|
|
49
51
|
/** Ref of the input element */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/OutlinedInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,EAClB,SAAS,EACT,SAAS,EACT,mBAAmB,EACnB,UAAU,EACX,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAEjE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;AAE1E,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;AAElD,MAAM,MAAM,IAAI,GAAG,QAAQ,CAAC,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;AAEzD,MAAM,MAAM,SAAS,GACjB,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,EAAE,GACtC,MAAM,GACN,MAAM,GACN,OAAO,GACP,MAAM,CAAA;AAEV,MAAM,MAAM,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAEhE,MAAM,MAAM,cAAc,GAAG,uBAAuB,GAAG;IACrD,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC3B,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAC5C,SAAS;IACX,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAC5C,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC/B;AAED,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,IAAI,CACF,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,OAAO,CAC5C;IACH,iCAAiC;IACjC,OAAO,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC3C,6BAA6B;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,cAAc,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAA;IACnD,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,sDAAsD;IACtD,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEtB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAA;IAC/C,qBAAqB;IACrB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,sEAAsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qDAAqD;IACrD,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KACrD,IAAI,CAAA;IACT,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;IACtC,OAAO,CAAC,EAAE;QACR,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;IACD,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/OutlinedInput/types.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -20,22 +20,35 @@ import { getInputClassName } from './stylesInput'
|
|
|
20
20
|
import { getRows } from './utils'
|
|
21
21
|
import type { Props } from './types'
|
|
22
22
|
|
|
23
|
+
const getResetButtonClassName = (
|
|
24
|
+
visibility: 'hover' | 'always',
|
|
25
|
+
hasValue: boolean
|
|
26
|
+
) => {
|
|
27
|
+
if (visibility === 'always') {
|
|
28
|
+
return 'visible'
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
return twJoin(
|
|
32
|
+
'invisible',
|
|
33
|
+
hasValue && 'peer-focus:visible peer-active:visible group-hover:visible'
|
|
34
|
+
)
|
|
35
|
+
}
|
|
36
|
+
|
|
23
37
|
const ResetButton = ({
|
|
24
38
|
hasValue,
|
|
39
|
+
visibility = 'hover',
|
|
25
40
|
onClick,
|
|
26
41
|
testIds,
|
|
27
42
|
}: {
|
|
28
43
|
hasValue: boolean
|
|
44
|
+
visibility?: 'hover' | 'always'
|
|
29
45
|
onClick: (event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => void
|
|
30
46
|
testIds?: Props['testIds']
|
|
31
47
|
}) => (
|
|
32
48
|
<InputAdornment
|
|
33
49
|
data-testid={testIds?.resetButton}
|
|
34
50
|
position='end'
|
|
35
|
-
className={
|
|
36
|
-
'invisible',
|
|
37
|
-
hasValue && 'peer-focus:visible peer-active:visible group-hover:visible'
|
|
38
|
-
)}
|
|
51
|
+
className={getResetButtonClassName(visibility, hasValue)}
|
|
39
52
|
>
|
|
40
53
|
<ButtonCircular
|
|
41
54
|
tabIndex={-1}
|
|
@@ -96,6 +109,7 @@ const OutlinedInput = forwardRef<HTMLElement, Props>(function OutlinedInput(
|
|
|
96
109
|
endAdornment: userDefinedEndAdornment,
|
|
97
110
|
onChange,
|
|
98
111
|
enableReset,
|
|
112
|
+
resetVisibility,
|
|
99
113
|
disabled,
|
|
100
114
|
inputRef,
|
|
101
115
|
testIds,
|
|
@@ -113,6 +127,7 @@ const OutlinedInput = forwardRef<HTMLElement, Props>(function OutlinedInput(
|
|
|
113
127
|
{shouldShowReset && (
|
|
114
128
|
<ResetButton
|
|
115
129
|
hasValue={Boolean(value)}
|
|
130
|
+
visibility={resetVisibility}
|
|
116
131
|
onClick={onResetClick}
|
|
117
132
|
testIds={testIds}
|
|
118
133
|
/>
|
|
@@ -68,6 +68,8 @@ export interface Props
|
|
|
68
68
|
size?: Size
|
|
69
69
|
/** Whether to render reset icon when there is a value in the input */
|
|
70
70
|
enableReset?: boolean
|
|
71
|
+
/** Controls when the reset button is visible. `hover` shows it only on hover/focus when the input has a value; `always` keeps it visible regardless of hover or content. Only applies when `enableReset` is true. */
|
|
72
|
+
resetVisibility?: 'hover' | 'always'
|
|
71
73
|
/** Callback invoked when reset button was clicked */
|
|
72
74
|
onResetClick?: (
|
|
73
75
|
event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>
|