@toptal/picasso-dropdown 4.0.0 → 4.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.
Files changed (12) hide show
  1. package/dist-package/src/Dropdown/Dropdown.d.ts +12 -1
  2. package/dist-package/src/Dropdown/Dropdown.d.ts.map +1 -1
  3. package/dist-package/src/Dropdown/Dropdown.js +9 -14
  4. package/dist-package/src/Dropdown/Dropdown.js.map +1 -1
  5. package/dist-package/src/Dropdown/styles.d.ts +1 -10
  6. package/dist-package/src/Dropdown/styles.d.ts.map +1 -1
  7. package/dist-package/src/Dropdown/styles.js +14 -43
  8. package/dist-package/src/Dropdown/styles.js.map +1 -1
  9. package/package.json +3 -2
  10. package/src/Dropdown/Dropdown.tsx +30 -21
  11. package/src/Dropdown/__snapshots__/test.tsx.snap +10 -10
  12. package/src/Dropdown/styles.ts +14 -55
package/dist-package/src/Dropdown/Dropdown.d.ts CHANGED
@@ -3,8 +3,14 @@ import type { PopperPlacementType } from '@material-ui/core/Popper';
3
3
  import type { PopperOptions } from 'popper.js';
4
4
  import type { StandardProps } from '@toptal/picasso-shared';
5
5
  import type { DeprecatedSpacingType, SpacingType } from '@toptal/picasso-provider';
6
- import type { StyleProps } from './styles';
7
6
  declare type ContentOverflowType = 'scroll' | 'visible';
7
+ declare type StyleProps = {
8
+ /** Control content element style */
9
+ contentStyle?: {
10
+ height?: string;
11
+ maxHeight?: string;
12
+ };
13
+ };
8
14
  interface InternalProps extends StandardProps, HTMLAttributes<HTMLDivElement>, StyleProps {
9
15
  /** Anchor element that opens content on click */
10
16
  children: ReactNode;
@@ -29,6 +35,11 @@ interface InternalProps extends StandardProps, HTMLAttributes<HTMLDivElement>, S
29
35
  /** Sets the desired behavior for an element's overflow */
30
36
  contentOverflow?: ContentOverflowType;
31
37
  popperContainer?: HTMLElement;
38
+ /** Sets styles for the inner wrapper */
39
+ classes?: {
40
+ popper?: string;
41
+ content?: string;
42
+ };
32
43
  }
33
44
  declare type PropsWithBaseSpacing = InternalProps & {
34
45
  /** Offset of content element relative to anchor element */
package/dist-package/src/Dropdown/Dropdown.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}
package/dist-package/src/Dropdown/Dropdown.js CHANGED
@@ -10,15 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
10
10
  return t;
11
11
  };
12
12
  import React, { forwardRef, useContext, useRef, useState } from 'react';
13
- import ClickAwayListener from '@material-ui/core/ClickAwayListener';
14
13
  import Grow from '@material-ui/core/Grow';
15
- import { makeStyles } from '@material-ui/core/styles';
16
- import cx from 'classnames';
17
14
  import { makeResponsiveSpacingProps } from '@toptal/picasso-provider';
18
15
  import { Popper } from '@toptal/picasso-popper';
19
16
  import { Paper } from '@toptal/picasso-paper';
20
17
  import { noop } from '@toptal/picasso-utils';
21
- import styles from './styles';
18
+ import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge';
19
+ import { ClickAwayListener } from '@mui/base/ClickAwayListener';
20
+ import { contentClass } from './styles';
22
21
  const DropdownContext = React.createContext(null);
23
22
  export const useDropdownContext = () => {
24
23
  const context = useContext(DropdownContext);
@@ -27,9 +26,6 @@ export const useDropdownContext = () => {
27
26
  }
28
27
  return context;
29
28
  };
30
- const useStyles = makeStyles(styles, {
31
- name: 'PicassoDropdown',
32
- });
33
29
  const useResponsiveProps = makeResponsiveSpacingProps(['margin-top', 'margin-bottom', 'margin-left', 'margin-right'], 'PicassoDropdown-Responsive');
34
30
  // eslint-disable-next-line react/display-name
35
31
  export const Dropdown = forwardRef(function Dropdown(props, ref) {
@@ -37,7 +33,6 @@ export const Dropdown = forwardRef(function Dropdown(props, ref) {
37
33
  // Avoid passing external classes inside the rest props
38
34
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
39
35
  classes: externalClasses, contentOverflow = 'scroll' } = props, rest = __rest(props, ["className", "style", "children", "content", "offset", "placement", "disableAutoClose", "disableAutoFocus", "disablePortal", "popperOptions", "popperProps", "keepMounted", "onOpen", "popperContainer", "onClose", "contentStyle", "classes", "contentOverflow"]);
40
- const classes = useStyles(props);
41
36
  const contentRef = useRef(null);
42
37
  const [anchorEl, setAnchorEl] = useState();
43
38
  const [isOpen, setIsOpen] = useState(false);
@@ -118,9 +113,9 @@ export const Dropdown = forwardRef(function Dropdown(props, ref) {
118
113
  }
119
114
  forceClose();
120
115
  };
121
- return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: cx(classes.root, className), style: style }),
122
- React.createElement("div", { className: classes.anchor, onClick: handleAnchorClick }, typeof children === 'function' ? children({ isOpen }) : children),
123
- (isOpen || keepMounted) && (React.createElement(Popper, Object.assign({ className: cx(classes.popper, responsiveClasses), anchorEl: anchorEl !== null && anchorEl !== void 0 ? anchorEl : null, popperOptions: Object.assign({ onCreate: focus,
116
+ return (React.createElement("div", Object.assign({}, rest, { ref: ref, className: twMerge('flex items-center', className), style: style }),
117
+ React.createElement("div", { className: 'inline-flex items-center cursor-pointer', onClick: handleAnchorClick }, typeof children === 'function' ? children({ isOpen }) : children),
118
+ (isOpen || keepMounted) && (React.createElement(Popper, Object.assign({ className: twJoin('shadow-2', externalClasses === null || externalClasses === void 0 ? void 0 : externalClasses.popper, responsiveClasses), anchorEl: anchorEl !== null && anchorEl !== void 0 ? anchorEl : null, popperOptions: Object.assign({ onCreate: focus,
124
119
  /*
125
120
  Fixes https://github.com/toptal/picasso/pull/2124#issuecomment-894341054
126
121
  When the anchor goes above the viewport, popper goes to infinite flipping.
@@ -130,9 +125,9 @@ export const Dropdown = forwardRef(function Dropdown(props, ref) {
130
125
  React.createElement(ClickAwayListener, { onClickAway: handleClickAway },
131
126
  React.createElement("div", { onClick: close },
132
127
  React.createElement(Grow, { in: isOpen, appear: true },
133
- React.createElement(Paper, { style: contentStyle, className: cx(classes.content, {
134
- [classes.contentVisible]: contentOverflow === 'visible',
135
- }), onKeyDown: handleContentKeyDown, elevation: 0 },
128
+ React.createElement(Paper, { style: contentStyle, className: twMerge(contentOverflow === 'visible'
129
+ ? contentClass.contentVisible
130
+ : contentClass.content, externalClasses === null || externalClasses === void 0 ? void 0 : externalClasses.content), onKeyDown: handleContentKeyDown, elevation: 0 },
136
131
  React.createElement(DropdownContext.Provider, { value: context },
137
132
  React.createElement("div", { ref: contentRef }, content))))))))));
138
133
  });
package/dist-package/src/Dropdown/Dropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/Dropdown/Dropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvE,OAAO,IAAI,MAAM,wBAAwB,CAAA;AAQzC,OAAO,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAE/D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAwEvC,MAAM,eAAe,GAAG,KAAK,CAAC,aAAa,CAAsB,IAAI,CAAC,CAAA;AAEtE,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,CAAA;IAE3C,IAAI,CAAC,OAAO,EAAE;QACZ,MAAM,IAAI,KAAK,CACb,gFAAgF,CACjF,CAAA;KACF;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA;AAED,MAAM,kBAAkB,GAAG,0BAA0B,CACnD,CAAC,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,cAAc,CAAU,EACvE,4BAA4B,CAC7B,CAAA;AAeD,8CAA8C;AAC9C,MAAM,CAAC,MAAM,QAAQ,GAAkB,UAAU,CAG/C,SAAS,QAAQ,CAAC,KAAK,EAAE,GAAG;IAC5B,MAAM,EACJ,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,WAAW,EACX,WAAW,EACX,MAAM,GAAG,IAAI,EACb,eAAe,EACf,OAAO,GAAG,IAAI,EACd,YAAY;IACZ,uDAAuD;IACvD,6DAA6D;IAC7D,OAAO,EAAE,eAAe,EACxB,eAAe,GAAG,QAAQ,KAExB,KAAK,EADJ,IAAI,UACL,KAAK,EAtBH,kQAsBL,CAAQ,CAAA;IAET,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC/C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAA8B,CAAA;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE3C,MAAM,iBAAiB,GAAG,CACxB,KAAmD,EACnD,EAAE;QACF,IAAI,MAAM,EAAE;YACV,KAAK,EAAE,CAAA;SACR;aAAM;YACL,IAAI,CAAC,KAAK,CAAC,CAAA;SACZ;IACH,CAAC,CAAA;IAED,MAAM,oBAAoB,GAAG,CAAC,KAAuC,EAAE,EAAE;QACvE,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACvB,KAAK,CAAC,cAAc,EAAE,CAAA;SACvB;QAED,mDAAmD;QACnD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC1B,UAAU,EAAE,CAAA;SACb;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,KAAK,EAAE,CAAA;SACR;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YACrB,KAAK,EAAE,CAAA;SACR;IACH,CAAC,CAAA;IAED,MAAM,IAAI,GAAG,CAAC,KAAmD,EAAE,EAAE;QACnE,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;QAChC,SAAS,CAAC,IAAI,CAAC,CAAA;QACf,MAAM,EAAE,CAAA;IACV,CAAC,CAAA;IAED,MAAM,KAAK,GAAG,GAAG,EAAE;QACjB,IAAI,gBAAgB,EAAE;YACpB,OAAM;SACP;QACD,UAAU,EAAE,CAAA;IACd,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,WAAW,CAAC,SAAS,CAAC,CAAA;QACtB,SAAS,CAAC,KAAK,CAAC,CAAA;QAChB,OAAO,EAAE,CAAA;IACX,CAAC,CAAA;IAED,MAAM,KAAK,GAAG,GAAG,EAAE;;QACjB,IAAI,gBAAgB,EAAE;YACpB,OAAM;SACP;QAED,IAAI,CAAC,UAAU,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;YACtC,OAAM;SACP;QAED,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,OAAO,CAAA;QACzC,uFAAuF;QACvF,6DAA6D;QAC7D,aAAa;QAEb,IAAI,UAAU,KAAI,MAAA,UAAU,CAAC,UAAU,0CAAE,KAAK,CAAA,EAAE;YAC9C,6DAA6D;YAC7D,aAAa;YACb,OAAO,UAAU,CAAC,UAAU,CAAC,KAAK,EAAE,CAAA;SACrC;QAED,IAAI,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE;YAC5B,OAAO,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;SAClC;IACH,CAAC,CAAA;IAED,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,KAAK,EAAE,eAAe,EAAE,GAC5D,kBAAkB,CAAC;QACjB,YAAY,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG;QACzB,cAAc,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK;QAC7B,eAAe,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM;QAC/B,aAAa,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI;KAC5B,CAAC,CAAA;IAEJ,MAAM,OAAO,GAAG;QACd,KAAK,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE;KAC1B,CAAA;IAED,MAAM,eAAe,GAAG,CAAC,KAA8B,EAAE,EAAE;QACzD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAA;QAE3B,MAAM,gBAAgB,GACpB,QAAQ,IAAI,MAAM,YAAY,IAAI,IAAI,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;QAEjE,IAAI,gBAAgB,EAAE;YACpB,OAAM;SACP;QAED,UAAU,EAAE,CAAA;IACd,CAAC,CAAA;IAED,OAAO,CACL,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,CAAC,mBAAmB,EAAE,SAAS,CAAC,EAClD,KAAK,EAAE,KAAK;QAEZ,6BACE,SAAS,EAAC,yCAAyC,EACnD,OAAO,EAAE,iBAAiB,IAEzB,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAC7D;QAEL,CAAC,MAAM,IAAI,WAAW,CAAC,IAAI,CAC1B,oBAAC,MAAM,kBACL,SAAS,EAAE,MAAM,CACf,UAAU,EACV,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM,EACvB,iBAAiB,CAClB,EACD,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,IAAI,EAC1B,aAAa,kBACX,QAAQ,EAAE,KAAK;gBACf;;;;kBAIE;gBACF,SAAS,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,eAAe,KAAK,SAAS,EAAE,EAAE,IAC5D,aAAa,GAElB,SAAS,EAAE,SAAS,EACpB,KAAK,oBAAO,eAAe,GAC3B,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,MAAM,EACZ,iBAAiB,QACjB,SAAS,EAAE,eAAe,IACtB,WAAW;YAEf,oBAAC,iBAAiB,IAAC,WAAW,EAAE,eAAe;gBAG7C,6BAAK,OAAO,EAAE,KAAK;oBACjB,oBAAC,IAAI,IAAC,EAAE,EAAE,MAAM,EAAE,MAAM;wBACtB,oBAAC,KAAK,IACJ,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,OAAO,CAChB,eAAe,KAAK,SAAS;gCAC3B,CAAC,CAAC,YAAY,CAAC,cAAc;gCAC7B,CAAC,CAAC,YAAY,CAAC,OAAO,EACxB,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,OAAO,CACzB,EACD,SAAS,EAAE,oBAAoB,EAC/B,SAAS,EAAE,CAAC;4BAEZ,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO;gCACtC,6BAAK,GAAG,EAAE,UAAU,IAAG,OAAO,CAAO,CACZ,CACrB,CACH,CACH,CACY,CACb,CACV,CACG,CACP,CAAA;AACH,CAAC,CAAkB,CAAA;AAEnB,QAAQ,CAAC,YAAY,GAAG;IACtB,gBAAgB,EAAE,KAAK;IACvB,gBAAgB,EAAE,IAAI;IACtB,aAAa,EAAE,KAAK;IACpB,WAAW,EAAE,KAAK;IAClB,OAAO,EAAE,IAAI;IACb,MAAM,EAAE,IAAI;IACZ,SAAS,EAAE,YAAY;IACvB,aAAa,EAAE,EAAE;CAClB,CAAA;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,QAAQ,CAAA"}
package/dist-package/src/Dropdown/styles.d.ts CHANGED
@@ -1,11 +1,2 @@
1
- import type { Theme } from '@material-ui/core/styles';
2
- export declare type StyleProps = {
3
- /** Control content element style */
4
- contentStyle?: {
5
- height?: string;
6
- maxHeight?: string;
7
- };
8
- };
9
- declare const _default: ({ screens, shadows, palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "content" | "anchor" | "popper" | "contentVisible">;
10
- export default _default;
1
+ export declare const contentClass: Record<'content' | 'contentVisible', string[]>;
11
2
  //# sourceMappingURL=styles.d.ts.map
package/dist-package/src/Dropdown/styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Dropdown/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAGrD,oBAAY,UAAU,GAAG;IACvB,oCAAoC;IACpC,YAAY,CAAC,EAAE;QACb,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF,CAAA;wDAE8C,KAAK;AAApD,wBA8CI"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Dropdown/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,GAAG,gBAAgB,EAAE,MAAM,EAAE,CAgBvE,CAAA"}
package/dist-package/src/Dropdown/styles.js CHANGED
@@ -1,44 +1,15 @@
1
- import { createStyles } from '@material-ui/core/styles';
2
- export default ({ screens, shadows, palette }) => createStyles({
3
- root: {
4
- display: 'flex',
5
- alignItems: 'center',
6
- },
7
- anchor: {
8
- display: 'inline-flex',
9
- alignItems: 'center',
10
- cursor: 'pointer',
11
- },
12
- content: {
13
- fontSize: 'inherit',
14
- background: palette.common.white,
15
- maxHeight: '14.75rem',
16
- overflowY: 'auto',
17
- // height under which maxHeight menu starts to overflow
18
- // and needs to reduce height dynamically to avoid overflow
19
- '@media screen and (max-height: 585px)': {
20
- maxHeight: 'calc(50vh - 3rem)',
21
- [screens('md', 'lg', 'xl')]: {
22
- maxHeight: 'calc(50vh - 3.5rem)', // half of screen minus header and anchor
23
- },
24
- },
25
- },
26
- popper: {
27
- boxShadow: shadows[2],
28
- },
29
- contentVisible: {
30
- // Basically a whole content of a dropdown will be shown without a vertical scrollbar inside the dropdown
31
- maxHeight: 'none',
32
- // Will show a whole content on the `xs` and `sm` screens with a vertical scrollbar if needed
33
- // For non desktop devices better if we have a scrollbar when a dropdown content is pretty long
34
- [screens('xs', 'sm')]: {
35
- overflowY: 'scroll',
36
- maxHeight: '100vh',
37
- },
38
- '@media screen and (max-height: 585px)': {
39
- overflowY: 'scroll',
40
- maxHeight: '100vh',
41
- },
42
- },
43
- });
1
+ export const contentClass = {
2
+ content: [
3
+ 'overflow-y-auto',
4
+ 'max-h-[14.75rem]',
5
+ '[@media(max-height:585px)]:max-h-[calc(50vh-3rem)]',
6
+ '[@media(max-height:585px)]:md:max-h-[calc(50vh-3.5rem)]',
7
+ ],
8
+ contentVisible: [
9
+ 'max-h-screen md:max-h-none ',
10
+ 'overflow-y-scroll md:overflow-y-hidden',
11
+ '[@media(max-height:585px)]:max-h-screen',
12
+ '[@media(max-height:585px)]:overflow-y-scroll',
13
+ ],
14
+ };
44
15
  //# sourceMappingURL=styles.js.map
package/dist-package/src/Dropdown/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Dropdown/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAUvD,eAAe,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAS,EAAE,EAAE,CACtD,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;KACrB;IACD,MAAM,EAAE;QACN,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,SAAS;KAClB;IACD,OAAO,EAAE;QACP,QAAQ,EAAE,SAAS;QACnB,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;QAEhC,SAAS,EAAE,UAAU;QACrB,SAAS,EAAE,MAAM;QAEjB,uDAAuD;QACvD,2DAA2D;QAC3D,uCAAuC,EAAE;YACvC,SAAS,EAAE,mBAAmB;YAE9B,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;gBAC3B,SAAS,EAAE,qBAAqB,EAAE,yCAAyC;aAC5E;SACF;KACF;IACD,MAAM,EAAE;QACN,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;KACtB;IACD,cAAc,EAAE;QACd,yGAAyG;QACzG,SAAS,EAAE,MAAM;QAEjB,6FAA6F;QAC7F,+FAA+F;QAC/F,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE;YACrB,SAAS,EAAE,QAAQ;YACnB,SAAS,EAAE,OAAO;SACnB;QACD,uCAAuC,EAAE;YACvC,SAAS,EAAE,QAAQ;YACnB,SAAS,EAAE,OAAO;SACnB;KACF;CACF,CAAC,CAAA"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Dropdown/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAmD;IAC1E,OAAO,EAAE;QACP,iBAAiB;QAEjB,kBAAkB;QAClB,oDAAoD;QACpD,yDAAyD;KAC1D;IACD,cAAc,EAAE;QACd,8BAA8B;QAE9B,wCAAwC;QAExC,yCAAyC;QACzC,8CAA8C;KAC/C;CACF,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-dropdown",
3
- "version": "4.0.0",
3
+ "version": "4.1.0",
4
4
  "description": "Toptal UI components library - Dropdown",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -22,6 +22,7 @@
22
22
  },
23
23
  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
24
24
  "dependencies": {
25
+ "@mui/base": "5.0.0-beta.40",
25
26
  "@toptal/picasso-paper": "4.0.0",
26
27
  "@toptal/picasso-popper": "1.0.3",
27
28
  "@toptal/picasso-utils": "1.0.3",
@@ -39,8 +40,8 @@
39
40
  },
40
41
  "devDependencies": {
41
42
  "@toptal/picasso-provider": "5.0.0",
42
- "@toptal/picasso-test-utils": "1.1.1",
43
43
  "@toptal/picasso-tailwind-merge": "2.0.0",
44
+ "@toptal/picasso-test-utils": "1.1.1",
44
45
  "popper.js": "^1.16.1"
45
46
  },
46
47
  "exports": {
package/src/Dropdown/Dropdown.tsx CHANGED
@@ -1,12 +1,8 @@
1
1
  import type { HTMLAttributes, ReactElement, ReactNode, Ref } from 'react'
2
2
  import React, { forwardRef, useContext, useRef, useState } from 'react'
3
- import ClickAwayListener from '@material-ui/core/ClickAwayListener'
4
3
  import Grow from '@material-ui/core/Grow'
5
4
  import type { PopperPlacementType } from '@material-ui/core/Popper'
6
5
  import type { PopperOptions } from 'popper.js'
7
- import type { Theme } from '@material-ui/core/styles'
8
- import { makeStyles } from '@material-ui/core/styles'
9
- import cx from 'classnames'
10
6
  import type { StandardProps } from '@toptal/picasso-shared'
11
7
  import type {
12
8
  DeprecatedSpacingType,
@@ -16,12 +12,21 @@ import { makeResponsiveSpacingProps } from '@toptal/picasso-provider'
16
12
  import { Popper } from '@toptal/picasso-popper'
17
13
  import { Paper } from '@toptal/picasso-paper'
18
14
  import { noop } from '@toptal/picasso-utils'
15
+ import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
16
+ import { ClickAwayListener } from '@mui/base/ClickAwayListener'
19
17
 
20
- import type { StyleProps } from './styles'
21
- import styles from './styles'
18
+ import { contentClass } from './styles'
22
19
 
23
20
  type ContentOverflowType = 'scroll' | 'visible'
24
21
 
22
+ type StyleProps = {
23
+ /** Control content element style */
24
+ contentStyle?: {
25
+ height?: string
26
+ maxHeight?: string
27
+ }
28
+ }
29
+
25
30
  interface InternalProps
26
31
  extends StandardProps,
27
32
  HTMLAttributes<HTMLDivElement>,
@@ -49,6 +54,8 @@ interface InternalProps
49
54
  /** Sets the desired behavior for an element's overflow */
50
55
  contentOverflow?: ContentOverflowType
51
56
  popperContainer?: HTMLElement
57
+ /** Sets styles for the inner wrapper */
58
+ classes?: { popper?: string; content?: string }
52
59
  }
53
60
 
54
61
  type PropsWithBaseSpacing = InternalProps & {
@@ -94,13 +101,6 @@ export const useDropdownContext = () => {
94
101
  return context
95
102
  }
96
103
 
97
- const useStyles = makeStyles<
98
- Theme,
99
- PropsWithBaseSpacing | PropsWithDeprecatedSpacing
100
- >(styles, {
101
- name: 'PicassoDropdown',
102
- })
103
-
104
104
  const useResponsiveProps = makeResponsiveSpacingProps(
105
105
  ['margin-top', 'margin-bottom', 'margin-left', 'margin-right'] as const,
106
106
  'PicassoDropdown-Responsive'
@@ -147,7 +147,6 @@ export const Dropdown: DropdownProps = forwardRef<
147
147
  contentOverflow = 'scroll',
148
148
  ...rest
149
149
  } = props
150
- const classes = useStyles(props)
151
150
 
152
151
  const contentRef = useRef<HTMLDivElement>(null)
153
152
  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | undefined>()
@@ -238,7 +237,7 @@ export const Dropdown: DropdownProps = forwardRef<
238
237
  close: () => forceClose(),
239
238
  }
240
239
 
241
- const handleClickAway = (event: React.MouseEvent<Document>) => {
240
+ const handleClickAway = (event: MouseEvent | TouchEvent) => {
242
241
  const target = event.target
243
242
 
244
243
  const isAnchorTapEvent =
@@ -255,16 +254,23 @@ export const Dropdown: DropdownProps = forwardRef<
255
254
  <div
256
255
  {...rest}
257
256
  ref={ref}
258
- className={cx(classes.root, className)}
257
+ className={twMerge('flex items-center', className)}
259
258
  style={style}
260
259
  >
261
- <div className={classes.anchor} onClick={handleAnchorClick}>
260
+ <div
261
+ className='inline-flex items-center cursor-pointer'
262
+ onClick={handleAnchorClick}
263
+ >
262
264
  {typeof children === 'function' ? children({ isOpen }) : children}
263
265
  </div>
264
266
 
265
267
  {(isOpen || keepMounted) && (
266
268
  <Popper
267
- className={cx(classes.popper, responsiveClasses)}
269
+ className={twJoin(
270
+ 'shadow-2',
271
+ externalClasses?.popper,
272
+ responsiveClasses
273
+ )}
268
274
  anchorEl={anchorEl ?? null}
269
275
  popperOptions={{
270
276
  onCreate: focus,
@@ -293,9 +299,12 @@ export const Dropdown: DropdownProps = forwardRef<
293
299
  <Grow in={isOpen} appear>
294
300
  <Paper
295
301
  style={contentStyle}
296
- className={cx(classes.content, {
297
- [classes.contentVisible]: contentOverflow === 'visible',
298
- })}
302
+ className={twMerge(
303
+ contentOverflow === 'visible'
304
+ ? contentClass.contentVisible
305
+ : contentClass.content,
306
+ externalClasses?.content
307
+ )}
299
308
  onKeyDown={handleContentKeyDown}
300
309
  elevation={0}
301
310
  >
package/src/Dropdown/__snapshots__/test.tsx.snap CHANGED
@@ -6,10 +6,10 @@ exports[`Dropdown renders 1`] = `
6
6
  class="Picasso-root"
7
7
  >
8
8
  <div
9
- class="PicassoDropdown-root"
9
+ class="flex items-center"
10
10
  >
11
11
  <div
12
- class="PicassoDropdown-anchor"
12
+ class="inline-flex items-center cursor-pointer"
13
13
  >
14
14
  Open Dropdown
15
15
  <span
@@ -37,10 +37,10 @@ exports[`Dropdown should render menu 1`] = `
37
37
  class="Picasso-root"
38
38
  >
39
39
  <div
40
- class="PicassoDropdown-root"
40
+ class="flex items-center"
41
41
  >
42
42
  <div
43
- class="PicassoDropdown-anchor"
43
+ class="inline-flex items-center cursor-pointer"
44
44
  >
45
45
  Open Dropdown
46
46
  <span
@@ -58,14 +58,14 @@ exports[`Dropdown should render menu 1`] = `
58
58
  </div>
59
59
  </div>
60
60
  <div
61
- class="PicassoPopper-root PicassoDropdown-popper"
61
+ class="PicassoPopper-root shadow-2"
62
62
  role="tooltip"
63
63
  style="position: absolute; top: 0px; left: 0px;"
64
64
  x-placement="bottom-end"
65
65
  >
66
66
  <div>
67
67
  <div
68
- class="bg-white shadow-0 transition-shadow duration-300 delay-0 PicassoDropdown-content"
68
+ class="bg-white shadow-0 transition-shadow duration-300 delay-0 overflow-y max-h [@media(max-height:585px)]:max-h-[calc(50vh [@media(max-height:585px)]:md:max-h-[calc(50vh"
69
69
  style="opacity: 1; transform: scale(1, 1); transition: opacity 0ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 0ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
70
70
  >
71
71
  <div>
@@ -166,10 +166,10 @@ exports[`Dropdown should render menu with focus 1`] = `
166
166
  class=""
167
167
  >
168
168
  <div
169
- class="PicassoDropdown-root"
169
+ class="flex items-center"
170
170
  >
171
171
  <div
172
- class="PicassoDropdown-anchor"
172
+ class="inline-flex items-center cursor-pointer"
173
173
  >
174
174
  Open Dropdown
175
175
  <span
@@ -188,14 +188,14 @@ exports[`Dropdown should render menu with focus 1`] = `
188
188
  </div>
189
189
  </div>
190
190
  <div
191
- class="PicassoPopper-root PicassoDropdown-popper"
191
+ class="PicassoPopper-root shadow-2"
192
192
  role="tooltip"
193
193
  style="position: absolute; top: 0px; left: 0px; transform: translate3d(NaNpx, NaNpx, 0); will-change: transform;"
194
194
  x-placement="bottom-end"
195
195
  >
196
196
  <div>
197
197
  <div
198
- class="bg-white shadow-0 transition-shadow duration-300 delay-0 PicassoDropdown-content"
198
+ class="bg-white shadow-0 transition-shadow duration-300 delay-0 overflow-y max-h [@media(max-height:585px)]:max-h-[calc(50vh [@media(max-height:585px)]:md:max-h-[calc(50vh"
199
199
  style="opacity: 1; transform: scale(1, 1); transition: opacity 0ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 0ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
200
200
  >
201
201
  <div>
package/src/Dropdown/styles.ts CHANGED
@@ -1,58 +1,17 @@
1
- import type { Theme } from '@material-ui/core/styles'
2
- import { createStyles } from '@material-ui/core/styles'
1
+ export const contentClass: Record<'content' | 'contentVisible', string[]> = {
2
+ content: [
3
+ 'overflow-y-auto',
3
4
 
4
- export type StyleProps = {
5
- /** Control content element style */
6
- contentStyle?: {
7
- height?: string
8
- maxHeight?: string
9
- }
10
- }
11
-
12
- export default ({ screens, shadows, palette }: Theme) =>
13
- createStyles({
14
- root: {
15
- display: 'flex',
16
- alignItems: 'center',
17
- },
18
- anchor: {
19
- display: 'inline-flex',
20
- alignItems: 'center',
21
- cursor: 'pointer',
22
- },
23
- content: {
24
- fontSize: 'inherit',
25
- background: palette.common.white,
26
-
27
- maxHeight: '14.75rem', // 6.5 lines of menu to show
28
- overflowY: 'auto',
5
+ 'max-h-[14.75rem]',
6
+ '[@media(max-height:585px)]:max-h-[calc(50vh-3rem)]',
7
+ '[@media(max-height:585px)]:md:max-h-[calc(50vh-3.5rem)]',
8
+ ],
9
+ contentVisible: [
10
+ 'max-h-screen md:max-h-none ',
29
11
 
30
- // height under which maxHeight menu starts to overflow
31
- // and needs to reduce height dynamically to avoid overflow
32
- '@media screen and (max-height: 585px)': {
33
- maxHeight: 'calc(50vh - 3rem)', // half of viewport minus header and anchor
12
+ 'overflow-y-scroll md:overflow-y-hidden',
34
13
 
35
- [screens('md', 'lg', 'xl')]: {
36
- maxHeight: 'calc(50vh - 3.5rem)', // half of screen minus header and anchor
37
- },
38
- },
39
- },
40
- popper: {
41
- boxShadow: shadows[2],
42
- },
43
- contentVisible: {
44
- // Basically a whole content of a dropdown will be shown without a vertical scrollbar inside the dropdown
45
- maxHeight: 'none',
46
-
47
- // Will show a whole content on the `xs` and `sm` screens with a vertical scrollbar if needed
48
- // For non desktop devices better if we have a scrollbar when a dropdown content is pretty long
49
- [screens('xs', 'sm')]: {
50
- overflowY: 'scroll',
51
- maxHeight: '100vh',
52
- },
53
- '@media screen and (max-height: 585px)': {
54
- overflowY: 'scroll',
55
- maxHeight: '100vh',
56
- },
57
- },
58
- })
14
+ '[@media(max-height:585px)]:max-h-screen',
15
+ '[@media(max-height:585px)]:overflow-y-scroll',
16
+ ],
17
+ }