@toptal/picasso-pagination 3.0.10 → 4.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAA8B,MAAM,OAAO,CAAA;AAGlD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAavD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAA;IAClB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uDAAuD;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,gFAAgF;IAChF,UAAU,EAAE,MAAM,CAAA;IAClB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gDAAgD;IAChD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAChC;AAED,eAAO,MAAM,UAAU,8EA8ErB,CAAA;AAUF,eAAe,UAAU,CAAA"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAA8B,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAQvD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC;IACtE,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAA;IAClB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uDAAuD;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,gFAAgF;IAChF,UAAU,EAAE,MAAM,CAAA;IAClB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gDAAgD;IAChD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAChC;AAED,eAAO,MAAM,UAAU,8EA6ErB,CAAA;AAUF,eAAe,UAAU,CAAA"}

package/dist-package/src/Pagination/Pagination.js

@@ -10,19 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef, useMemo } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import { Button } from '@toptal/picasso-button';
 import { Container } from '@toptal/picasso-container';
 import { Typography } from '@toptal/picasso-typography';
 import { getRange, ELLIPSIS } from './utils';
-import styles from './styles';
 import { PaginationButton } from '../PaginationButton';
-const useStyles = makeStyles(styles, {
-    name: 'PicassoPagination',
-});
 export const Pagination = forwardRef(function Pagination(props, ref) {
     const { activePage, disabled, totalPages, onPageChange, siblingCount = 2, variant } = props, rest = __rest(props, ["activePage", "disabled", "totalPages", "onPageChange", "siblingCount", "variant"]);
-    const classes = useStyles();
     const pages = useMemo(() => getRange({ activePage, totalPages, siblingCount }), [activePage, totalPages, siblingCount]);
     if (pages.length <= 1) {
         return null;
@@ -33,7 +27,7 @@ export const Pagination = forwardRef(function Pagination(props, ref) {
     const handleNextClick = () => onPageChange(activePage + 1);
     const pageButtons = pages.map((page, index) => {
         if (page === ELLIPSIS) {
-            return (React.createElement(Container, { key: index, className: classes.ellipsis },
+            return (React.createElement(Container, { key: index, className: 'py-0 px-[0.5em] cursor-default' },
                 React.createElement(Typography, { size: 'xsmall', weight: 'semibold', color: 'black' }, ELLIPSIS)));
         }
         return (React.createElement(PaginationButton, { key: index, className: '[&+&]:ml-2', page: Number(page), activePage: activePage, disabled: disabled, onClick: onPageChange }));

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-pagination",
-  "version": "3.0.10",
+  "version": "4.0.0",
   "description": "Toptal UI components library - Pagination",
   "publishConfig": {
     "access": "public"
@@ -22,27 +22,25 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-button": "3.0.10",
-    "@toptal/picasso-container": "2.0.0",
-    "@toptal/picasso-typography": "3.0.0",
-    "@toptal/picasso-utils": "1.0.3",
-    "classnames": "^2.5.1"
+    "@toptal/picasso-button": "4.0.0",
+    "@toptal/picasso-container": "3.0.0",
+    "@toptal/picasso-typography": "4.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-merge": "^2.0.0",
     "@toptal/picasso-tailwind": ">=2.7"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-tailwind-merge": "1.2.0",
+    "@toptal/picasso-tailwind-merge": "2.0.0",
     "@toptal/picasso-test-utils": "1.1.1"
   },
   "files": [

package/src/Pagination/Pagination.tsx

@@ -1,21 +1,14 @@
 /* eslint-disable react/no-array-index-key */
 import type { HTMLAttributes } from 'react'
 import React, { forwardRef, useMemo } 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 { Button } from '@toptal/picasso-button'
 import { Container } from '@toptal/picasso-container'
 import { Typography } from '@toptal/picasso-typography'
 
 import { getRange, ELLIPSIS } from './utils'
-import styles from './styles'
 import { PaginationButton } from '../PaginationButton'
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoPagination',
-})
-
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   /** Value of the current highlighted page */
   activePage: number
@@ -44,7 +37,6 @@ export const Pagination = forwardRef<HTMLDivElement, Props>(function Pagination(
     variant,
     ...rest
   } = props
-  const classes = useStyles()
 
   const pages = useMemo(
     () => getRange({ activePage, totalPages, siblingCount }),
@@ -64,7 +56,7 @@ export const Pagination = forwardRef<HTMLDivElement, Props>(function Pagination(
   const pageButtons = pages.map((page, index) => {
     if (page === ELLIPSIS) {
       return (
-        <Container key={index} className={classes.ellipsis}>
+        <Container key={index} className='py-0 px-[0.5em] cursor-default'>
           <Typography size='xsmall' weight='semibold' color='black'>
             {ELLIPSIS}
           </Typography>

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

@@ -38,7 +38,7 @@ exports[`Pagination renders 1`] = `
         </span>
       </button>
       <div
-        class="PicassoPagination-ellipsis"
+        class="py-0 px-[0.5em] cursor-default"
       >
         <p
           class="m-0 text-xxs text-black font-semibold"
@@ -122,7 +122,7 @@ exports[`Pagination renders 1`] = `
         </span>
       </button>
       <div
-        class="PicassoPagination-ellipsis"
+        class="py-0 px-[0.5em] cursor-default"
       >
         <p
           class="m-0 text-xxs text-black font-semibold"
@@ -204,7 +204,7 @@ exports[`Pagination renders disabled 1`] = `
         </span>
       </button>
       <div
-        class="PicassoPagination-ellipsis"
+        class="py-0 px-[0.5em] cursor-default"
       >
         <p
           class="m-0 text-xxs text-black font-semibold"
@@ -293,7 +293,7 @@ exports[`Pagination renders disabled 1`] = `
         </span>
       </button>
       <div
-        class="PicassoPagination-ellipsis"
+        class="py-0 px-[0.5em] cursor-default"
       >
         <p
           class="m-0 text-xxs text-black font-semibold"

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

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

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

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

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

@@ -1,8 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    ellipsis: {
-        padding: '0 0.5em',
-        cursor: 'default',
-    },
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Pagination/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,QAAQ,EAAE;QACR,OAAO,EAAE,SAAS;QAClB,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAA"}

package/src/Pagination/styles.ts

@@ -1,9 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    ellipsis: {
-      padding: '0 0.5em',
-      cursor: 'default',
-    },
-  })