@toptal/picasso-file-input 2.0.6 → 2.0.8

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

@@ -1 +1 @@
-{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAA6B,MAAM,OAAO,CAAA;AAGjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAOvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGzC,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4JAA4J;IAC5J,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,qCAAqC;IACrC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAA;IACpB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC/D,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,0BAA0B;IAC1B,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IAC3C,yBAAyB;IACzB,MAAM,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;CAC3C;AAID,eAAO,MAAM,SAAS,gFAwDpB,CAAA;AASF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAA6B,MAAM,OAAO,CAAA;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAOvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4JAA4J;IAC5J,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,qCAAqC;IACrC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAA;IACpB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC/D,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,0BAA0B;IAC1B,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IAC3C,yBAAyB;IACzB,MAAM,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;CAC3C;AAED,eAAO,MAAM,SAAS,gFAuDpB,CAAA;AASF,eAAe,SAAS,CAAA"}

package/dist-package/src/FileInput/FileInput.js

@@ -1,24 +1,20 @@
 import React, { forwardRef, useRef } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import { Container } from '@toptal/picasso-container';
 import { Button } from '@toptal/picasso-button';
 import { FormHint } from '@toptal/picasso-form';
 import { useCombinedRefs } from '@toptal/picasso-utils';
 import { FileList } from '../FileList';
-import styles from './styles';
-const useStyles = makeStyles(styles, { name: 'FileInputContent' });
 export const FileInput = forwardRef(function FileInput(props, ref) {
     const { accept, disabled, value, buttonLabel, hint, maxFiles = 1, onChange, onRemove, onFocus, onBlur, } = props;
-    const classes = useStyles();
     const isUnlimitedFiles = maxFiles === null;
     const preventAddingNewFiles = !isUnlimitedFiles && value && value.length === maxFiles;
     // if `ref` is null then we need a ref to control the input
     // so we create another ref manually if needed and merge both of them
     const inputRef = useCombinedRefs(ref, useRef(null));
-    return (React.createElement(Container, { onFocus: onFocus, onBlur: onBlur, className: classes.root },
+    return (React.createElement(Container, { onFocus: onFocus, onBlur: onBlur, className: 'max-w-[300px]' },
         React.createElement(Button, { size: 'small', variant: 'secondary', disabled: Boolean(disabled || preventAddingNewFiles), onClick: () => inputRef.current && inputRef.current.click() }, buttonLabel),
-        React.createElement("input", { type: 'file', className: classes.nativeInput, ref: inputRef, accept: accept, onChange: onChange, multiple: isUnlimitedFiles }),
-        hint && React.createElement(FormHint, { className: classes.hint }, hint),
+        React.createElement("input", { type: 'file', className: 'hidden', ref: inputRef, accept: accept, onChange: onChange, multiple: isUnlimitedFiles }),
+        hint && React.createElement(FormHint, { className: '[&>*]:leading-4' }, hint),
         value && value.length > 0 && (React.createElement(Container, { top: 'xsmall' },
             React.createElement(FileList, { files: value, disabled: disabled, onItemRemove: onRemove })))));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,OAAO,MAAM,MAAM,UAAU,CAAA;AAyB7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CAAA;AAEzE,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAA0B,SAAS,SAAS,CAC7E,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,GAAG,CAAC,EACZ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,GACP,GAAG,KAAK,CAAA;IAET,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,gBAAgB,GAAG,QAAQ,KAAK,IAAI,CAAA;IAC1C,MAAM,qBAAqB,GACzB,CAAC,gBAAgB,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAA;IAEzD,2DAA2D;IAC3D,qEAAqE;IACrE,MAAM,QAAQ,GAAG,eAAe,CAC9B,GAAG,EACH,MAAM,CAAmB,IAAI,CAAC,CAC/B,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,IAAI;QAClE,oBAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,qBAAqB,CAAC,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,IAE1D,WAAW,CACL;QAET,+BACE,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,OAAO,CAAC,WAAW,EAC9B,GAAG,EAAE,QAAQ,EACb,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,gBAAgB,GAC1B;QACD,IAAI,IAAI,oBAAC,QAAQ,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,IAAG,IAAI,CAAY;QAC5D,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAC5B,oBAAC,SAAS,IAAC,GAAG,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,GAAI,CAC5D,CACb,CACS,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,SAAS,CAAC,YAAY,GAAG;IACvB,QAAQ,EAAE,CAAC;IACX,WAAW,EAAE,aAAa;CAC3B,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,eAAe,SAAS,CAAA"}
+{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AA0BtC,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAA0B,SAAS,SAAS,CAC7E,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,MAAM,EACN,QAAQ,EACR,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,GAAG,CAAC,EACZ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,GACP,GAAG,KAAK,CAAA;IAET,MAAM,gBAAgB,GAAG,QAAQ,KAAK,IAAI,CAAA;IAC1C,MAAM,qBAAqB,GACzB,CAAC,gBAAgB,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAA;IAEzD,2DAA2D;IAC3D,qEAAqE;IACrE,MAAM,QAAQ,GAAG,eAAe,CAC9B,GAAG,EACH,MAAM,CAAmB,IAAI,CAAC,CAC/B,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAC,eAAe;QACpE,oBAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,qBAAqB,CAAC,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,IAE1D,WAAW,CACL;QAET,+BACE,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAE,QAAQ,EACb,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,gBAAgB,GAC1B;QACD,IAAI,IAAI,oBAAC,QAAQ,IAAC,SAAS,EAAC,iBAAiB,IAAE,IAAI,CAAY;QAC/D,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAC5B,oBAAC,SAAS,IAAC,GAAG,EAAC,QAAQ;YACrB,oBAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,GAAI,CAC5D,CACb,CACS,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,SAAS,CAAC,YAAY,GAAG;IACvB,QAAQ,EAAE,CAAC;IACX,WAAW,EAAE,aAAa;CAC3B,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,eAAe,SAAS,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-file-input",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "Toptal UI components library - FileInput",
   "publishConfig": {
     "access": "public"
@@ -22,9 +22,9 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-button": "3.0.6",
+    "@toptal/picasso-button": "3.0.7",
     "@toptal/picasso-container": "2.0.0",
-    "@toptal/picasso-form": "4.1.2",
+    "@toptal/picasso-form": "4.1.3",
     "@toptal/picasso-icons": "1.6.0",
     "@toptal/picasso-loader": "2.0.0",
     "@toptal/picasso-shared": "15.0.0",

package/src/FileInput/FileInput.tsx

@@ -1,7 +1,5 @@
 import type { FocusEventHandler } from 'react'
 import React, { forwardRef, useRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { Container } from '@toptal/picasso-container'
 import { Button } from '@toptal/picasso-button'
@@ -10,7 +8,6 @@ import { useCombinedRefs } from '@toptal/picasso-utils'
 
 import { FileList } from '../FileList'
 import type { FileUpload } from './types'
-import styles from './styles'
 
 export interface Props extends BaseProps {
   /** A string that defines the file types the file input should accept */
@@ -35,8 +32,6 @@ export interface Props extends BaseProps {
   onBlur?: FocusEventHandler<HTMLDivElement>
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'FileInputContent' })
-
 export const FileInput = forwardRef<HTMLInputElement, Props>(function FileInput(
   props,
   ref
@@ -54,7 +49,6 @@ export const FileInput = forwardRef<HTMLInputElement, Props>(function FileInput(
     onBlur,
   } = props
 
-  const classes = useStyles()
   const isUnlimitedFiles = maxFiles === null
   const preventAddingNewFiles =
     !isUnlimitedFiles && value && value.length === maxFiles
@@ -67,7 +61,7 @@ export const FileInput = forwardRef<HTMLInputElement, Props>(function FileInput(
   )
 
   return (
-    <Container onFocus={onFocus} onBlur={onBlur} className={classes.root}>
+    <Container onFocus={onFocus} onBlur={onBlur} className='max-w-[300px]'>
       <Button
         size='small'
         variant='secondary'
@@ -79,13 +73,13 @@ export const FileInput = forwardRef<HTMLInputElement, Props>(function FileInput(
 
       <input
         type='file'
-        className={classes.nativeInput}
+        className='hidden'
         ref={inputRef}
         accept={accept}
         onChange={onChange}
         multiple={isUnlimitedFiles}
       />
-      {hint && <FormHint className={classes.hint}>{hint}</FormHint>}
+      {hint && <FormHint className='[&>*]:leading-4'>{hint}</FormHint>}
       {value && value.length > 0 && (
         <Container top='xsmall'>
           <FileList files={value} disabled={disabled} onItemRemove={onRemove} />

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

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

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

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

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

@@ -1,16 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { rem } from '@toptal/picasso-shared';
-export default () => createStyles({
-    root: {
-        maxWidth: '300px',
-    },
-    hint: {
-        '& > *': {
-            lineHeight: rem('16px'),
-        },
-    },
-    nativeInput: {
-        display: 'none',
-    },
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/FileInput/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,OAAO;KAClB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE;YACP,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC;SACxB;KACF;IACD,WAAW,EAAE;QACX,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAA"}

package/src/FileInput/styles.ts

@@ -1,17 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-import { rem } from '@toptal/picasso-shared'
-
-export default () =>
-  createStyles({
-    root: {
-      maxWidth: '300px',
-    },
-    hint: {
-      '& > *': {
-        lineHeight: rem('16px'),
-      },
-    },
-    nativeInput: {
-      display: 'none',
-    },
-  })