@toptal/picasso-page 5.1.8 → 5.1.9

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

@@ -1,4 +1,4 @@
 import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, screens, layout }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "content" | "left" | "right" | "wide" | "fullWidth" | "centered">;
+declare const _default: ({ palette, screens, layout }: Theme) => import("@material-ui/styles").StyleRules<{}, "content" | "left" | "right" | "wide" | "root" | "fullWidth" | "centered">;
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageHamburger.d.ts","sourceRoot":"","sources":["../../../src/PageHamburger/PageHamburger.tsx"],"names":[],"mappings":";AAWA,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAA;IACV,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAMD,QAAA,MAAM,aAAa,sCAAuC,KAAK,gBAkD9D,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"PageHamburger.d.ts","sourceRoot":"","sources":["../../../src/PageHamburger/PageHamburger.tsx"],"names":[],"mappings":";AAOA,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAA;IACV,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,QAAA,MAAM,aAAa,sCAAuC,KAAK,gBA+C9D,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist-package/src/PageHamburger/PageHamburger.js

@@ -1,25 +1,16 @@
 import React, { useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
 import { ButtonCircular } from '@toptal/picasso-button';
 import { Dropdown } from '@toptal/picasso-dropdown';
 import { Close24, Overview24 } from '@toptal/picasso-icons';
 import { useHamburgerContext } from './PageHamburgerContext';
-import styles from './styles';
-const useStyles = makeStyles(styles, {
-    name: 'PageHamburger',
-});
 const PageHamburger = ({ id, 'data-testid': dataTestId }) => {
     const { showSidebarMenu, hamburgerRef } = useHamburgerContext();
     const [showContent, setShowContent] = useState(false);
-    const classes = useStyles();
     const handleShowContent = () => setShowContent(true);
     const handleHideContent = () => setShowContent(false);
-    return (React.createElement(Dropdown, { content: React.createElement("div", { id: id, ref: hamburgerRef }), className: cx(classes.root, {
-            [classes.hidden]: !showSidebarMenu,
-        }), classes: {
+    return (React.createElement(Dropdown, { content: React.createElement("div", { id: id, ref: hamburgerRef }), className: !showSidebarMenu ? 'hidden' : 'min-[1280px]:hidden', classes: {
             content: `!shadow-[inset_-1px_0px_0px_0px] !shadow-gray-200 max-h-[calc(100vh-var(--header-height,3.5rem))] !bg-gray-100`,
-            popper: classes.popper,
+            popper: 'mt-4',
         }, 
         // The "disablePortal" is needed for testing the dropdown hamburger menu in Cypress.
         // Without it, React fails to create portal inside of portal (via `createPortal()`), so
@@ -34,7 +25,7 @@ const PageHamburger = ({ id, 'data-testid': dataTestId }) => {
         }, popperProps: {
             role: 'navigation',
         }, onOpen: handleShowContent, onClose: handleHideContent, keepMounted: true },
-        React.createElement(ButtonCircular, { icon: showContent ? (React.createElement(Close24, null)) : (React.createElement(Overview24, { className: classes.hamburger })), "data-testid": dataTestId, variant: 'transparent' })));
+        React.createElement(ButtonCircular, { icon: showContent ? (React.createElement(Close24, null)) : (React.createElement(Overview24, { className: 'pointer-events-none' })), "data-testid": dataTestId, variant: 'transparent' })));
 };
 export default PageHamburger;
 //# sourceMappingURL=PageHamburger.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageHamburger.js","sourceRoot":"","sources":["../../../src/PageHamburger/PageHamburger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,MAAM,MAAM,UAAU,CAAA;AAO7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,eAAe;CACtB,CAAC,CAAA;AAEF,MAAM,aAAa,GAAG,CAAC,EAAE,EAAE,EAAE,aAAa,EAAE,UAAU,EAAS,EAAE,EAAE;IACjE,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAC/D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IAC9D,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;IACpD,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;IAErD,OAAO,CACL,oBAAC,QAAQ,IACP,OAAO,EAAE,6BAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,GAAI,EAC3C,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE;YAC1B,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,eAAe;SACnC,CAAC,EACF,OAAO,EAAE;YACP,OAAO,EAAE,gHAAgH;YACzH,MAAM,EAAE,OAAO,CAAC,MAAM;SACvB;QACD,oFAAoF;QACpF,uFAAuF;QACvF,gEAAgE;QAChE,aAAa,QACb,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;gBACxB,eAAe,EAAE;oBACf,OAAO,EAAE,CAAC;iBACX;aACF;SACF,EACD,WAAW,EAAE;YACX,IAAI,EAAE,YAAY;SACnB,EACD,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,iBAAiB,EAC1B,WAAW;QAEX,oBAAC,cAAc,IACb,IAAI,EACF,WAAW,CAAC,CAAC,CAAC,CACZ,oBAAC,OAAO,OAAG,CACZ,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,SAAS,EAAE,OAAO,CAAC,SAAS,GAAI,CAC7C,iBAEU,UAAU,EACvB,OAAO,EAAC,aAAa,GACrB,CACO,CACZ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"PageHamburger.js","sourceRoot":"","sources":["../../../src/PageHamburger/PageHamburger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAO5D,MAAM,aAAa,GAAG,CAAC,EAAE,EAAE,EAAE,aAAa,EAAE,UAAU,EAAS,EAAE,EAAE;IACjE,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAC/D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IAE9D,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;IACpD,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;IAErD,OAAO,CACL,oBAAC,QAAQ,IACP,OAAO,EAAE,6BAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,GAAI,EAC3C,SAAS,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,EAC9D,OAAO,EAAE;YACP,OAAO,EAAE,gHAAgH;YACzH,MAAM,EAAE,MAAM;SACf;QACD,oFAAoF;QACpF,uFAAuF;QACvF,gEAAgE;QAChE,aAAa,QACb,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;gBACxB,eAAe,EAAE;oBACf,OAAO,EAAE,CAAC;iBACX;aACF;SACF,EACD,WAAW,EAAE;YACX,IAAI,EAAE,YAAY;SACnB,EACD,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,iBAAiB,EAC1B,WAAW;QAEX,oBAAC,cAAc,IACb,IAAI,EACF,WAAW,CAAC,CAAC,CAAC,CACZ,oBAAC,OAAO,OAAG,CACZ,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,SAAS,EAAC,qBAAqB,GAAG,CAC/C,iBAEU,UAAU,EACvB,OAAO,EAAC,aAAa,GACrB,CACO,CACZ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}

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

@@ -1,4 +1,4 @@
 import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, screens, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "small" | "root" | "medium" | "dark" | "light" | "large" | "sticky" | "wrapper" | "hamburgerNotAvailable" | "scrollableContent" | "spacer" | "rootCollapsed">;
+declare const _default: ({ palette, screens, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "small" | "root" | "large" | "medium" | "dark" | "light" | "sticky" | "wrapper" | "hamburgerNotAvailable" | "scrollableContent" | "spacer" | "rootCollapsed">;
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1,4 +1,4 @@
 import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, layout, zIndex, screens }: Theme) => import("@material-ui/styles").StyleRules<{}, "title" | "root" | "content" | "left" | "right" | "grey" | "dark" | "light" | "wide" | "fullWidth" | "preventPageWidthChangeOnScrollbar" | "wrapper" | "centerContent" | "centerContentPortal" | "divider" | "dividerBlue" | "logo" | "logoEmblem">;
+declare const _default: ({ palette, layout, zIndex, screens }: Theme) => import("@material-ui/styles").StyleRules<{}, "title" | "content" | "left" | "right" | "wide" | "root" | "grey" | "dark" | "light" | "fullWidth" | "preventPageWidthChangeOnScrollbar" | "wrapper" | "centerContent" | "centerContentPortal" | "divider" | "dividerBlue" | "logo" | "logoEmblem">;
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1,4 +1,4 @@
 import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "content" | "collapsibleWrapper" | "expandIcon" | "compactDropdown" | "lightExpandIcon" | "darkExpandIcon" | "expandIconDisabled">;
+declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "content" | "root" | "collapsibleWrapper" | "expandIcon" | "compactDropdown" | "lightExpandIcon" | "darkExpandIcon" | "expandIconDisabled">;
 export default _default;
 //# sourceMappingURL=styles.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-page",
-  "version": "5.1.8",
+  "version": "5.1.9",
   "description": "Toptal UI components library - Page",
   "publishConfig": {
     "access": "public"

package/src/PageHamburger/PageHamburger.tsx

@@ -1,27 +1,18 @@
 import React, { useState } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import { ButtonCircular } from '@toptal/picasso-button'
 import { Dropdown } from '@toptal/picasso-dropdown'
 import { Close24, Overview24 } from '@toptal/picasso-icons'
 
 import { useHamburgerContext } from './PageHamburgerContext'
-import styles from './styles'
 
 interface Props {
   id: string
   'data-testid'?: string
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PageHamburger',
-})
-
 const PageHamburger = ({ id, 'data-testid': dataTestId }: Props) => {
   const { showSidebarMenu, hamburgerRef } = useHamburgerContext()
   const [showContent, setShowContent] = useState<boolean>(false)
-  const classes = useStyles()
 
   const handleShowContent = () => setShowContent(true)
   const handleHideContent = () => setShowContent(false)
@@ -29,12 +20,10 @@ const PageHamburger = ({ id, 'data-testid': dataTestId }: Props) => {
   return (
     <Dropdown
       content={<div id={id} ref={hamburgerRef} />}
-      className={cx(classes.root, {
-        [classes.hidden]: !showSidebarMenu,
-      })}
+      className={!showSidebarMenu ? 'hidden' : 'min-[1280px]:hidden'}
       classes={{
         content: `!shadow-[inset_-1px_0px_0px_0px] !shadow-gray-200 max-h-[calc(100vh-var(--header-height,3.5rem))] !bg-gray-100`,
-        popper: classes.popper,
+        popper: 'mt-4',
       }}
       // The "disablePortal" is needed for testing the dropdown hamburger menu in Cypress.
       // Without it, React fails to create portal inside of portal (via `createPortal()`), so
@@ -60,7 +49,7 @@ const PageHamburger = ({ id, 'data-testid': dataTestId }: Props) => {
           showContent ? (
             <Close24 />
           ) : (
-            <Overview24 className={classes.hamburger} />
+            <Overview24 className='pointer-events-none' />
           )
         }
         data-testid={dataTestId}

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

@@ -21,7 +21,7 @@ exports[`Page.TopBar render with custom logo 1`] = `
               class="gap-4 items-center flex"
             >
               <div
-                class="flex items-center PageHamburger-root PageHamburger-hidden"
+                class="items-center hidden"
               >
                 <div
                   class="inline-flex items-center cursor-pointer"
@@ -38,7 +38,7 @@ exports[`Page.TopBar render with custom logo 1`] = `
                       class="items-center inline-flex font-semibold whitespace-nowrap text-button"
                     >
                       <svg
-                        class="PicassoSvgOverview24-root text-[1.2em] flex-1 PageHamburger-hamburger"
+                        class="PicassoSvgOverview24-root text-[1.2em] flex-1 pointer-events"
                         style="min-width: 24px; min-height: 24px;"
                         viewBox="0 0 24 24"
                       >
@@ -50,7 +50,7 @@ exports[`Page.TopBar render with custom logo 1`] = `
                   </button>
                 </div>
                 <div
-                  class="PicassoPopper-root shadow-2 PageHamburger-popper"
+                  class="PicassoPopper-root shadow-2 mt-4"
                   role="navigation"
                   style="position: fixed; top: 0px; left: 0px; display: none;"
                 >
@@ -120,7 +120,7 @@ exports[`Page.TopBar render with link 1`] = `
               class="gap-4 items-center flex"
             >
               <div
-                class="flex items-center PageHamburger-root PageHamburger-hidden"
+                class="items-center hidden"
               >
                 <div
                   class="inline-flex items-center cursor-pointer"
@@ -137,7 +137,7 @@ exports[`Page.TopBar render with link 1`] = `
                       class="items-center inline-flex font-semibold whitespace-nowrap text-button"
                     >
                       <svg
-                        class="PicassoSvgOverview24-root text-[1.2em] flex-1 PageHamburger-hamburger"
+                        class="PicassoSvgOverview24-root text-[1.2em] flex-1 pointer-events"
                         style="min-width: 24px; min-height: 24px;"
                         viewBox="0 0 24 24"
                       >
@@ -149,7 +149,7 @@ exports[`Page.TopBar render with link 1`] = `
                   </button>
                 </div>
                 <div
-                  class="PicassoPopper-root shadow-2 PageHamburger-popper"
+                  class="PicassoPopper-root shadow-2 mt-4"
                   role="navigation"
                   style="position: fixed; top: 0px; left: 0px; display: none;"
                 >
@@ -245,7 +245,7 @@ exports[`Page.TopBar renders 1`] = `
               class="gap-4 items-center flex"
             >
               <div
-                class="flex items-center PageHamburger-root PageHamburger-hidden"
+                class="items-center hidden"
               >
                 <div
                   class="inline-flex items-center cursor-pointer"
@@ -262,7 +262,7 @@ exports[`Page.TopBar renders 1`] = `
                       class="items-center inline-flex font-semibold whitespace-nowrap text-button"
                     >
                       <svg
-                        class="PicassoSvgOverview24-root text-[1.2em] flex-1 PageHamburger-hamburger"
+                        class="PicassoSvgOverview24-root text-[1.2em] flex-1 pointer-events"
                         style="min-width: 24px; min-height: 24px;"
                         viewBox="0 0 24 24"
                       >
@@ -274,7 +274,7 @@ exports[`Page.TopBar renders 1`] = `
                   </button>
                 </div>
                 <div
-                  class="PicassoPopper-root shadow-2 PageHamburger-popper"
+                  class="PicassoPopper-root shadow-2 mt-4"
                   role="navigation"
                   style="position: fixed; top: 0px; left: 0px; display: none;"
                 >

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

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

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

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

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

@@ -1,23 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { headerBreakingPointXL } from '../PageTopBar/constants';
-export default () => {
-    return createStyles({
-        root: {
-            [headerBreakingPointXL]: {
-                //TODO: add important property here to overwrite the styles in Dropdown component. Should be removed after migrating to TailwindCSS in task https://toptal-core.atlassian.net/browse/FX-5688
-                display: 'none !important',
-            },
-        },
-        popper: {
-            marginTop: '1rem',
-        },
-        hamburger: {
-            pointerEvents: 'none',
-        },
-        hidden: {
-            //TODO: add important property here to overwrite the styles in Dropdown component. Should be removed after migrating to TailwindCSS in task https://toptal-core.atlassian.net/browse/FX-5688
-            display: 'none !important',
-        },
-    });
-};
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/PageHamburger/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE/D,eAAe,GAAG,EAAE;IAClB,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,CAAC,qBAAqB,CAAC,EAAE;gBACvB,4LAA4L;gBAC5L,OAAO,EAAE,iBAAiB;aAC3B;SACF;QACD,MAAM,EAAE;YACN,SAAS,EAAE,MAAM;SAClB;QACD,SAAS,EAAE;YACT,aAAa,EAAE,MAAM;SACtB;QACD,MAAM,EAAE;YACN,4LAA4L;YAC5L,OAAO,EAAE,iBAAiB;SAC3B;KACF,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/src/PageHamburger/styles.ts

@@ -1,24 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-import { headerBreakingPointXL } from '../PageTopBar/constants'
-
-export default () => {
-  return createStyles({
-    root: {
-      [headerBreakingPointXL]: {
-        //TODO: add important property here to overwrite the styles in Dropdown component. Should be removed after migrating to TailwindCSS in task https://toptal-core.atlassian.net/browse/FX-5688
-        display: 'none !important',
-      },
-    },
-    popper: {
-      marginTop: '1rem',
-    },
-    hamburger: {
-      pointerEvents: 'none',
-    },
-    hidden: {
-      //TODO: add important property here to overwrite the styles in Dropdown component. Should be removed after migrating to TailwindCSS in task https://toptal-core.atlassian.net/browse/FX-5688
-      display: 'none !important',
-    },
-  })
-}