@toptal/picasso-dropzone 3.0.0 → 3.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"Dropzone.d.ts","sourceRoot":"","sources":["../../../src/Dropzone/Dropzone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAOvD,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG1D,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAA;IAClC,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,8CAA8C;IAC9C,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAA;IAClD,8CAA8C;IAC9C,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAA;IAClD,8CAA8C;IAC9C,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAA;IAClC,iCAAiC;IACjC,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;IACxC,qCAAqC;IACrC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAID,eAAO,MAAM,QAAQ,gFA6EnB,CAAA;AAWF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"Dropzone.d.ts","sourceRoot":"","sources":["../../../src/Dropzone/Dropzone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAGlD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAQvD,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE1D,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAA;IAClC,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,8CAA8C;IAC9C,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAA;IAClD,8CAA8C;IAC9C,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAA;IAClD,8CAA8C;IAC9C,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAA;IAClC,iCAAiC;IACjC,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;IACxC,qCAAqC;IACrC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAgDD,eAAO,MAAM,QAAQ,gFAgGnB,CAAA;AAWF,eAAe,QAAQ,CAAA"}

package/dist-package/src/Dropzone/Dropzone.js

@@ -1,16 +1,33 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { useDropzone } from 'react-dropzone';
-import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
+import { twJoin } from '@toptal/picasso-tailwind-merge';
 import { Upload24 } from '@toptal/picasso-icons';
 import { FormHint } from '@toptal/picasso-form';
 import { Container } from '@toptal/picasso-container';
 import { FileList } from '@toptal/picasso-file-input';
 import { Typography } from '@toptal/picasso-typography';
-import styles from './styles';
-const useStyles = makeStyles(styles, { name: 'Dropzone' });
+import { SPACING_6 } from '@toptal/picasso-utils';
+const getCursorClasses = ({ isDisabled, isHovered, isFocused, isDragActive, }) => {
+    if (isDisabled) {
+        return 'cursor-not-allowed';
+    }
+    if (isHovered || isFocused || isDragActive) {
+        return 'cursor-pointer';
+    }
+    return 'hover:cursor-pointer focus:cursor-pointer';
+};
+const getBorderColorClasses = ({ isDisabled, isHovered, isFocused, isDragActive, }) => {
+    if (isDisabled) {
+        return 'border-gray-400 hover:border-gray-400';
+    }
+    if (isHovered || isFocused || isDragActive) {
+        return 'border-blue-500';
+    }
+    return 'border-gray-400 hover:border-blue-500 focus:border-blue-500';
+};
+const getBackgroundColorClasses = ({ isDisabled }) => isDisabled ? 'bg-gray-100' : 'bg-white';
 export const Dropzone = forwardRef(function Dropzone(props, ref) {
-    const { hint, hideContentText, onRemove, value, className, style, 'data-testid': dataTestId, focused, hovered, 
+    const { hint, hideContentText, onRemove, value, className, style, 'data-testid': dataTestId, focused: isFocused, hovered: isHovered, 
     // dropzoneOptions
     accept, minSize, maxSize, multiple, disabled, onDrop, onDropAccepted, onDropRejected, validator, } = props;
     const isDisabled = Boolean(disabled || (!multiple && value && value.length > 0));
@@ -25,20 +42,18 @@ export const Dropzone = forwardRef(function Dropzone(props, ref) {
         onDropRejected,
         validator,
     });
-    const classes = useStyles();
+    const componentState = useMemo(() => ({
+        isDisabled,
+        isHovered,
+        isFocused,
+        isDragActive,
+    }), [isDisabled, isHovered, isFocused, isDragActive]);
     return (React.createElement(Container, { style: style, ref: ref, className: className },
-        React.createElement(Container, Object.assign({ flex: true, direction: 'column', alignItems: 'center', "data-testid": dataTestId }, getRootProps({
-            className: cx(classes.root, {
-                [classes.dragActive]: isDragActive,
-                [classes.hovered]: hovered,
-                [classes.disabled]: isDisabled,
-                [classes.focused]: focused,
-            }),
-        })),
-            React.createElement("input", Object.assign({}, getInputProps({ className: classes.nativeInput }))),
+        React.createElement(Container, Object.assign({ flex: true, direction: 'column', alignItems: 'center', rounded: true, "aria-disabled": isDisabled, padded: SPACING_6, "data-testid": dataTestId }, getRootProps({}), { className: twJoin('border border-dashed', 'box-border', 'text-graphite-700', 'gap-2', 'transition-all ease-out duration-350', getCursorClasses(componentState), getBorderColorClasses(componentState), getBackgroundColorClasses(componentState), isDisabled && 'hover:no-drop') }),
+            React.createElement("input", Object.assign({}, getInputProps())),
             React.createElement(Upload24, { color: 'darkGrey' }),
             !hideContentText && (React.createElement(Typography, { size: 'medium', color: 'black', weight: 'semibold' }, "Click or drag to upload")),
-            hint && React.createElement(FormHint, { className: cx(classes.hint) }, hint)),
+            hint && (React.createElement(FormHint, { className: twJoin('m-0', '[&>*]:leading-4') }, hint))),
         value && value.length > 0 && (React.createElement(Container, { top: 'xsmall' },
             React.createElement(FileList, { files: value, onItemRemove: onRemove })))));
 });

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-dropzone",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Toptal UI components library - Dropzone",
   "publishConfig": {
     "access": "public"
@@ -36,7 +36,7 @@
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
+    "@toptal/picasso-tailwind-merge": "^1.0.1",
     "@toptal/picasso-tailwind": ">=2.7",
     "react": ">=16.12.0 < 19.0.0"
   },

package/src/Dropzone/Dropzone.tsx

@@ -1,17 +1,15 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useMemo } from 'react'
 import { useDropzone } from 'react-dropzone'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { Upload24 } from '@toptal/picasso-icons'
 import { FormHint } from '@toptal/picasso-form'
 import { Container } from '@toptal/picasso-container'
 import { FileList } from '@toptal/picasso-file-input'
 import { Typography } from '@toptal/picasso-typography'
+import { SPACING_6 } from '@toptal/picasso-utils'
 
 import type { FileUpload, DropzoneOptions } from './types'
-import styles from './styles'
 
 export interface Props extends BaseProps {
   /**
@@ -46,7 +44,51 @@ export interface Props extends BaseProps {
   hovered?: boolean
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'Dropzone' })
+type DropzoneState = {
+  isDisabled?: boolean
+  isHovered?: boolean
+  isFocused?: boolean
+  isDragActive?: boolean
+}
+
+type StateToClassMatcher = (currentState: DropzoneState) => string
+
+const getCursorClasses: StateToClassMatcher = ({
+  isDisabled,
+  isHovered,
+  isFocused,
+  isDragActive,
+}) => {
+  if (isDisabled) {
+    return 'cursor-not-allowed'
+  }
+
+  if (isHovered || isFocused || isDragActive) {
+    return 'cursor-pointer'
+  }
+
+  return 'hover:cursor-pointer focus:cursor-pointer'
+}
+
+const getBorderColorClasses: StateToClassMatcher = ({
+  isDisabled,
+  isHovered,
+  isFocused,
+  isDragActive,
+}) => {
+  if (isDisabled) {
+    return 'border-gray-400 hover:border-gray-400'
+  }
+
+  if (isHovered || isFocused || isDragActive) {
+    return 'border-blue-500'
+  }
+
+  return 'border-gray-400 hover:border-blue-500 focus:border-blue-500'
+}
+
+const getBackgroundColorClasses: StateToClassMatcher = ({ isDisabled }) =>
+  isDisabled ? 'bg-gray-100' : 'bg-white'
 
 export const Dropzone = forwardRef<HTMLInputElement, Props>(function Dropzone(
   props,
@@ -60,8 +102,8 @@ export const Dropzone = forwardRef<HTMLInputElement, Props>(function Dropzone(
     className,
     style,
     'data-testid': dataTestId,
-    focused,
-    hovered,
+    focused: isFocused,
+    hovered: isHovered,
 
     // dropzoneOptions
     accept,
@@ -91,7 +133,15 @@ export const Dropzone = forwardRef<HTMLInputElement, Props>(function Dropzone(
     validator,
   })
 
-  const classes = useStyles()
+  const componentState = useMemo(
+    () => ({
+      isDisabled,
+      isHovered,
+      isFocused,
+      isDragActive,
+    }),
+    [isDisabled, isHovered, isFocused, isDragActive]
+  )
 
   return (
     <Container style={style} ref={ref} className={className}>
@@ -99,24 +149,35 @@ export const Dropzone = forwardRef<HTMLInputElement, Props>(function Dropzone(
         flex
         direction='column'
         alignItems='center'
+        rounded
+        aria-disabled={isDisabled}
+        padded={SPACING_6}
         data-testid={dataTestId}
-        {...getRootProps({
-          className: cx(classes.root, {
-            [classes.dragActive]: isDragActive,
-            [classes.hovered]: hovered,
-            [classes.disabled]: isDisabled,
-            [classes.focused]: focused,
-          }),
-        })}
+        {...getRootProps({})}
+        className={twJoin(
+          'border border-dashed',
+          'box-border',
+          'text-graphite-700',
+          'gap-2',
+          'transition-all ease-out duration-350',
+          getCursorClasses(componentState),
+          getBorderColorClasses(componentState),
+          getBackgroundColorClasses(componentState),
+          isDisabled && 'hover:no-drop'
+        )}
       >
-        <input {...getInputProps({ className: classes.nativeInput })} />
+        <input {...getInputProps()} />
         <Upload24 color='darkGrey' />
         {!hideContentText && (
           <Typography size='medium' color='black' weight='semibold'>
             Click or drag to upload
           </Typography>
         )}
-        {hint && <FormHint className={cx(classes.hint)}>{hint}</FormHint>}
+        {hint && (
+          <FormHint className={twJoin('m-0', '[&>*]:leading-4')}>
+            {hint}
+          </FormHint>
+        )}
       </Container>
       {value && value.length > 0 && (
         <Container top='xsmall'>

package/src/Dropzone/__snapshots__/test.tsx.snap

@@ -9,7 +9,8 @@ exports[`Dropzone renders 1`] = `
       class=""
     >
       <div
-        class="items-center flex flex-col Dropzone-root"
+        aria-disabled="false"
+        class="p-6 items-center rounded-md flex flex-col border border-dashed box-border text-graphite gap-2 transition-all ease-out duration-350 hover:cursor-pointer focus:cursor-pointer border-gray hover:border-blue focus:border-blue bg-white"
         role="presentation"
         tabindex="0"
       >

package/src/Dropzone/test.tsx

@@ -53,7 +53,7 @@ describe('Dropzone', () => {
         ],
       })
 
-      expect(getByTestId('dropzone').className).toContain('disabled')
+      expect(getByTestId('dropzone').getAttribute('aria-disabled')).toBe('true')
     })
   })
 

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

@@ -1,4 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, sizes, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "disabled" | "hint" | "completed" | "error" | "dragActive" | "hovered" | "focused">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Dropzone/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;0DAGJ,KAAK;AAAtD,wBAwCI"}

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

@@ -1,42 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default ({ palette, sizes, transitions }) => createStyles({
-    root: {
-        padding: '20px',
-        borderWidth: sizes.borderWidth,
-        borderRadius: sizes.borderRadius.medium,
-        borderColor: palette.grey.light2,
-        borderStyle: 'dashed',
-        backgroundColor: palette.common.white,
-        color: palette.grey.dark,
-        outline: 'none',
-        transition: `all ${transitions.duration.short}ms ${transitions.easing.easeOut}`,
-        transitionProperty: 'border, background-color',
-        gap: '0.5rem',
-        '&:hover, &$hovered, &:focus, &$focused, &$dragActive': {
-            borderColor: palette.blue.main,
-            cursor: 'pointer',
-        },
-        '&$disabled': {
-            backgroundColor: palette.grey.lighter,
-            '&:hover': {
-                cursor: 'no-drop',
-                borderColor: palette.grey.light2,
-            },
-        },
-    },
-    hint: {
-        margin: 0,
-        '& > *': {
-            lineHeight: '1rem',
-        },
-    },
-    completed: {},
-    error: {
-        margin: 0,
-    },
-    dragActive: {},
-    hovered: {},
-    disabled: {},
-    focused: {},
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Dropzone/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAS,EAAE,EAAE,CACxD,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,WAAW,EAAE,KAAK,CAAC,WAAW;QAC9B,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM;QACvC,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;QAChC,WAAW,EAAE,QAAQ;QACrB,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;QACrC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;QACxB,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,OAAO,WAAW,CAAC,QAAQ,CAAC,KAAK,MAAM,WAAW,CAAC,MAAM,CAAC,OAAO,EAAE;QAC/E,kBAAkB,EAAE,0BAA0B;QAC9C,GAAG,EAAE,QAAQ;QACb,sDAAsD,EAAE;YACtD,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAC9B,MAAM,EAAE,SAAS;SAClB;QACD,YAAY,EAAE;YACZ,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;YACrC,SAAS,EAAE;gBACT,MAAM,EAAE,SAAS;gBACjB,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;aACjC;SACF;KACF;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC;QACT,OAAO,EAAE;YACP,UAAU,EAAE,MAAM;SACnB;KACF;IACD,SAAS,EAAE,EAAE;IACb,KAAK,EAAE;QACL,MAAM,EAAE,CAAC;KACV;IACD,UAAU,EAAE,EAAE;IACd,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,EAAE;IACZ,OAAO,EAAE,EAAE;CACZ,CAAC,CAAA"}

package/src/Dropzone/styles.ts

@@ -1,44 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-
-export default ({ palette, sizes, transitions }: Theme) =>
-  createStyles({
-    root: {
-      padding: '20px',
-      borderWidth: sizes.borderWidth,
-      borderRadius: sizes.borderRadius.medium,
-      borderColor: palette.grey.light2,
-      borderStyle: 'dashed',
-      backgroundColor: palette.common.white,
-      color: palette.grey.dark,
-      outline: 'none',
-      transition: `all ${transitions.duration.short}ms ${transitions.easing.easeOut}`,
-      transitionProperty: 'border, background-color',
-      gap: '0.5rem',
-      '&:hover, &$hovered, &:focus, &$focused, &$dragActive': {
-        borderColor: palette.blue.main,
-        cursor: 'pointer',
-      },
-      '&$disabled': {
-        backgroundColor: palette.grey.lighter,
-        '&:hover': {
-          cursor: 'no-drop',
-          borderColor: palette.grey.light2,
-        },
-      },
-    },
-    hint: {
-      margin: 0,
-      '& > *': {
-        lineHeight: '1rem',
-      },
-    },
-    completed: {},
-    error: {
-      margin: 0,
-    },
-    dragActive: {},
-    hovered: {},
-    disabled: {},
-    focused: {},
-  })