@toptal/picasso-password-input 2.0.12 → 3.0.0

package/dist-package/src/PasswordInput/PasswordInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../../src/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,KAA4C,MAAM,OAAO,CAAA;AAGhE,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAO1E,OAAO,KAAK,EAAE,KAAK,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAIjF,MAAM,WAAW,KACf,SAAQ,IAAI,CACR,iBAAiB,CAAC,kBAAkB,CAAC,EACnC,cAAc,GACd,MAAM,GACN,MAAM,GACN,SAAS,GACT,WAAW,GACX,gBAAgB,GAChB,cAAc,CACjB,EACD,SAAS;IACX,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACzD,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,GAAG;QACxC,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB;AAMD,eAAO,MAAM,aAAa,gFA2EzB,CAAA;AAUD,eAAe,aAAa,CAAA"}
+{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../../src/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,KAA4C,MAAM,OAAO,CAAA;AAChE,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAM1E,OAAO,KAAK,EAAE,KAAK,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAGjF,MAAM,WAAW,KACf,SAAQ,IAAI,CACR,iBAAiB,CAAC,kBAAkB,CAAC,EACnC,cAAc,GACd,MAAM,GACN,MAAM,GACN,SAAS,GACT,WAAW,GACX,gBAAgB,GAChB,cAAc,CACjB,EACD,SAAS;IACX,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACzD,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,GAAG;QACxC,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;IACD,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB;AAED,eAAO,MAAM,aAAa,gFA4EzB,CAAA;AAUD,eAAe,aAAa,CAAA"}

package/dist-package/src/PasswordInput/PasswordInput.js

@@ -10,17 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef, useState, useCallback } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
 import { OutlinedInput } from '@toptal/picasso-outlined-input';
 import { InputAdornment } from '@toptal/picasso-input-adornment';
 import { Eye16, EyeHidden16 } from '@toptal/picasso-icons';
 import { ButtonCircular } from '@toptal/picasso-button';
 import { usePropDeprecationWarning } from '@toptal/picasso-utils';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoPasswordInput',
-});
+import { twMerge } from '@toptal/picasso-tailwind-merge';
 export const PasswordInput = forwardRef(function PasswordInput(props, ref) {
     const { value, onChange, disabled, error, status, size, width, style, className, testIds, enableReset, onResetClick, highlight } = props, rest = __rest(props
     // TODO: [FX-4715]
@@ -33,14 +28,14 @@ export const PasswordInput = forwardRef(function PasswordInput(props, ref) {
         description: 'Use the `status` prop instead. `error` is deprecated and will be removed in the next major release.',
     });
     const [showPassword, setShowPassword] = useState(false);
-    const classes = useStyles();
     const handleToggleVisibilityClick = useCallback(() => {
         setShowPassword(previousState => !previousState);
     }, []);
     const endAdornment = (React.createElement(InputAdornment, { position: 'end' },
         React.createElement(ButtonCircular, { className: 'mr-2', variant: 'flat', icon: showPassword ? React.createElement(Eye16, null) : React.createElement(EyeHidden16, null), onClick: handleToggleVisibilityClick, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.toggle, disabled: disabled })));
-    return (React.createElement(OutlinedInput, { style: style, className: cx(classes.root, className), highlight: highlight, classes: {
-            input: classes.input,
+    return (React.createElement(OutlinedInput, { style: style, className: twMerge('pr-0 cursor-text', className), highlight: highlight, classes: {
+            // removes up/down arrows in browsers based on WebKit and Blink (https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-inner-spin-button)
+            input: '[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 ',
         }, inputProps: Object.assign(Object.assign({}, rest), { 'data-testid': testIds === null || testIds === void 0 ? void 0 : testIds.input }), size: size, width: width, status: error ? 'error' : status, inputRef: ref, type: showPassword ? 'text' : 'password', value: value, disabled: disabled, onChange: onChange, endAdornment: endAdornment, testIds: testIds, onResetClick: onResetClick, enableReset: enableReset }));
 });
 PasswordInput.defaultProps = {

package/dist-package/src/PasswordInput/PasswordInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","sourceRoot":"","sources":["../../../src/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PasswordInput.js","sourceRoot":"","sources":["../../../src/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-password-input",
-  "version": "2.0.12",
+  "version": "3.0.0",
   "description": "Toptal UI components library - PasswordInput",
   "publishConfig": {
     "access": "public"
@@ -22,26 +22,26 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-button": "2.1.1",
+    "@toptal/picasso-button": "3.0.0",
     "@toptal/picasso-icons": "1.5.0",
-    "@toptal/picasso-input-adornment": "1.0.8",
-    "@toptal/picasso-outlined-input": "1.1.5",
-    "@toptal/picasso-utils": "1.0.3",
-    "classnames": "^2.5.1"
+    "@toptal/picasso-input-adornment": "2.0.0",
+    "@toptal/picasso-outlined-input": "2.0.0",
+    "@toptal/picasso-utils": "1.0.3"
   },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
     "react": ">=16.12.0 < 19.0.0",
+    "@toptal/picasso-tailwind-merge": "^1.0.1",
     "@toptal/picasso-tailwind": ">=2.5.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
+    "@toptal/picasso-tailwind-merge": "1.2.0",
     "@toptal/picasso-test-utils": "1.1.1"
   },
   "files": [

package/src/PasswordInput/PasswordInput.tsx

@@ -1,17 +1,13 @@
 import type { ChangeEvent } from 'react'
 import React, { forwardRef, useState, useCallback } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps, OmitInternalProps } from '@toptal/picasso-shared'
-import cx from 'classnames'
 import { OutlinedInput } from '@toptal/picasso-outlined-input'
 import { InputAdornment } from '@toptal/picasso-input-adornment'
 import { Eye16, EyeHidden16 } from '@toptal/picasso-icons'
 import { ButtonCircular } from '@toptal/picasso-button'
 import { usePropDeprecationWarning } from '@toptal/picasso-utils'
 import type { Props as OutlinedInputProps } from '@toptal/picasso-outlined-input'
-
-import styles from './styles'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 export interface Props
   extends Omit<
@@ -38,10 +34,6 @@ export interface Props
   highlight?: 'autofill'
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoPasswordInput',
-})
-
 export const PasswordInput = forwardRef<HTMLInputElement, Props>(
   function PasswordInput(props, ref) {
     const {
@@ -71,7 +63,6 @@ export const PasswordInput = forwardRef<HTMLInputElement, Props>(
     })
 
     const [showPassword, setShowPassword] = useState(false)
-    const classes = useStyles()
 
     const handleToggleVisibilityClick = useCallback(() => {
       setShowPassword(previousState => !previousState)
@@ -93,10 +84,12 @@ export const PasswordInput = forwardRef<HTMLInputElement, Props>(
     return (
       <OutlinedInput
         style={style}
-        className={cx(classes.root, className)}
+        className={twMerge('pr-0 cursor-text', className)}
         highlight={highlight}
         classes={{
-          input: classes.input,
+          // removes up/down arrows in browsers based on WebKit and Blink (https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-inner-spin-button)
+          input:
+            '[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0 ',
         }}
         inputProps={{
           ...rest,

package/dist-package/src/PasswordInput/styles.d.ts

@@ -1,3 +0,0 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "root" | "input">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/PasswordInput/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/PasswordInput/styles.ts"],"names":[],"mappings":";AAEA,wBAcC"}

package/dist-package/src/PasswordInput/styles.js

@@ -1,17 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => {
-    return createStyles({
-        root: {
-            paddingRight: 0,
-            cursor: 'text',
-        },
-        input: {
-            '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-                '-webkit-appearance': 'none',
-                appearance: 'none',
-                margin: 0,
-            },
-        },
-    });
-};
-//# sourceMappingURL=styles.js.map

package/dist-package/src/PasswordInput/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PasswordInput/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE;IAClB,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,YAAY,EAAE,CAAC;YACf,MAAM,EAAE,MAAM;SACf;QACD,KAAK,EAAE;YACL,4DAA4D,EAAE;gBAC5D,oBAAoB,EAAE,MAAM;gBAC5B,UAAU,EAAE,MAAM;gBAClB,MAAM,EAAE,CAAC;aACV;SACF;KACF,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/src/PasswordInput/styles.ts

@@ -1,17 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () => {
-  return createStyles({
-    root: {
-      paddingRight: 0,
-      cursor: 'text',
-    },
-    input: {
-      '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-        '-webkit-appearance': 'none',
-        appearance: 'none',
-        margin: 0,
-      },
-    },
-  })
-}