@toptal/picasso-carousel 100.0.3-alpha-pf-react-19-improvements-970580a42.0 → 100.0.3
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.
- package/dist-package/src/Carousel/hooks/useAutoplay/use-autoplay.d.ts +1 -1
- package/dist-package/src/Carousel/hooks/useAutoplay/use-autoplay.d.ts.map +1 -1
- package/dist-package/src/Carousel/hooks/useCarousel/use-carousel.js +1 -1
- package/dist-package/src/Carousel/hooks/useCarousel/use-carousel.js.map +1 -1
- package/dist-package/src/CarouselGradient/CarouselGradient.js +2 -2
- package/dist-package/src/CarouselGradient/CarouselGradient.js.map +1 -1
- package/dist-package/src/CarouselNavigation/CarouselNavigation.d.ts.map +1 -1
- package/dist-package/src/CarouselNavigation/CarouselNavigation.js +14 -2
- package/dist-package/src/CarouselNavigation/CarouselNavigation.js.map +1 -1
- package/package.json +12 -11
- package/src/Carousel/hooks/useAutoplay/use-autoplay.ts +1 -1
- package/src/Carousel/hooks/useCarousel/use-carousel.ts +1 -1
- package/src/CarouselGradient/CarouselGradient.tsx +2 -2
- package/src/CarouselNavigation/CarouselNavigation.tsx +14 -13
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-autoplay.d.ts","sourceRoot":"","sources":["../../../../../src/Carousel/hooks/useAutoplay/use-autoplay.ts"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG;IACX,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,
|
|
1
|
+
{"version":3,"file":"use-autoplay.d.ts","sourceRoot":"","sources":["../../../../../src/Carousel/hooks/useAutoplay/use-autoplay.ts"],"names":[],"mappings":"AAEA,KAAK,KAAK,GAAG;IACX,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC3C,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,MAAM,EAAE,OAAO,CAAA;IACf,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,QAAA,MAAM,WAAW,4EAOd,KAAK,SAUP,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -8,7 +8,7 @@ const useCarousel = ({ autoplay, autoplayDelay, onSlide, rewind, slidesToScroll,
|
|
|
8
8
|
const wrapperRef = useRef(null);
|
|
9
9
|
const [isLastPage, setLastPage] = useState(false);
|
|
10
10
|
const [isFirstPage, setFirstPage] = useState(!rewind);
|
|
11
|
-
const gliderRef = useRef(
|
|
11
|
+
const gliderRef = useRef();
|
|
12
12
|
const handleOnAnimated = useCallback(() => {
|
|
13
13
|
var _a;
|
|
14
14
|
const currentSlide = ((_a = gliderRef.current) === null || _a === void 0 ? void 0 : _a.slide) || 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-carousel.js","sourceRoot":"","sources":["../../../../../src/Carousel/hooks/useCarousel/use-carousel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,MAAM,MAAM,WAAW,CAAA;AAE9B,OAAO,YAAY,MAAM,aAAa,CAAA;AACtC,OAAO,WAAW,MAAM,gBAAgB,CAAA;AA0BxC,MAAM,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,aAAa,EACb,OAAO,EACP,MAAM,EACN,cAAc,EACd,YAAY,EACZ,WAAW,EACX,OAAO,GACD,EAAE,EAAE;IACV,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5C,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC/C,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC/C,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjD,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;IACrD,MAAM,SAAS,GAAG,MAAM,
|
|
1
|
+
{"version":3,"file":"use-carousel.js","sourceRoot":"","sources":["../../../../../src/Carousel/hooks/useCarousel/use-carousel.ts"],"names":[],"mappings":"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"}
|
|
@@ -10,8 +10,8 @@ const CarouselGradient = ({ isLastPage, slidesToShow }) => {
|
|
|
10
10
|
};
|
|
11
11
|
}, [slidesToShow]);
|
|
12
12
|
return (React.createElement("div", { style: gradientStyle, className: twMerge((showNextGradient || showPrevGradient) && 'absolute h-full top-0', showNextGradient &&
|
|
13
|
-
'right-0 bg-
|
|
14
|
-
'left-0 bg-
|
|
13
|
+
'right-0 bg-gradient-to-r from-white/20 to-white to-95%', showPrevGradient &&
|
|
14
|
+
'left-0 bg-gradient-to-r from-white from-5% to-white/20') }));
|
|
15
15
|
};
|
|
16
16
|
export default React.memo(CarouselGradient);
|
|
17
17
|
//# sourceMappingURL=CarouselGradient.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselGradient.js","sourceRoot":"","sources":["../../../src/CarouselGradient/CarouselGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,aAAa,MAAM,wBAAwB,CAAA;AAOlD,MAAM,gBAAgB,GAAG,CAAC,EAAE,UAAU,EAAE,YAAY,EAAS,EAAE,EAAE;IAC/D,MAAM,gBAAgB,GAAG,CAAC,UAAU,CAAA;IACpC,MAAM,gBAAgB,GAAG,UAAU,CAAA;IAEnC,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO;YACL,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC;SACnC,CAAA;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,OAAO,CACL,6BACE,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,OAAO,CAChB,CAAC,gBAAgB,IAAI,gBAAgB,CAAC,IAAI,uBAAuB,EACjE,gBAAgB;YACd,
|
|
1
|
+
{"version":3,"file":"CarouselGradient.js","sourceRoot":"","sources":["../../../src/CarouselGradient/CarouselGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAExD,OAAO,aAAa,MAAM,wBAAwB,CAAA;AAOlD,MAAM,gBAAgB,GAAG,CAAC,EAAE,UAAU,EAAE,YAAY,EAAS,EAAE,EAAE;IAC/D,MAAM,gBAAgB,GAAG,CAAC,UAAU,CAAA;IACpC,MAAM,gBAAgB,GAAG,UAAU,CAAA;IAEnC,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO;YACL,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC;SACnC,CAAA;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,OAAO,CACL,6BACE,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,OAAO,CAChB,CAAC,gBAAgB,IAAI,gBAAgB,CAAC,IAAI,uBAAuB,EACjE,gBAAgB;YACd,wDAAwD,EAC1D,gBAAgB;YACd,wDAAwD,CAC3D,GACD,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselNavigation.d.ts","sourceRoot":"","sources":["../../../src/CarouselNavigation/CarouselNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"CarouselNavigation.d.ts","sourceRoot":"","sources":["../../../src/CarouselNavigation/CarouselNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAA;AAmBnC,KAAK,KAAK,GAAG;IACX,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;IAChB,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,OAAO,EAAE;QACP,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;CACF,CAAA;+HASE,KAAK;AAwDR,wBAAuC"}
|
|
@@ -2,7 +2,6 @@ import React, { memo } from 'react';
|
|
|
2
2
|
import { ButtonCircular } from '@toptal/picasso-button';
|
|
3
3
|
import { Container } from '@toptal/picasso-container';
|
|
4
4
|
import { ChevronRight24 } from '@toptal/picasso-icons';
|
|
5
|
-
import { twJoin } from '@toptal/picasso-tailwind-merge';
|
|
6
5
|
const getJustifyContent = (hasArrows, hasDots) => {
|
|
7
6
|
if (hasArrows && hasDots) {
|
|
8
7
|
return 'space-between';
|
|
@@ -23,7 +22,20 @@ const CarouselNavigation = ({ getDotsProps, getNextProps, getPrevProps, hasArrow
|
|
|
23
22
|
Could be removed when we migrate all styles to TailwindCSS
|
|
24
23
|
*/
|
|
25
24
|
React.createElement("div", null,
|
|
26
|
-
React.createElement("div", Object.assign({}, getDotsProps(), { "data-testid": testIds.dots, className:
|
|
25
|
+
React.createElement("div", Object.assign({}, getDotsProps(), { "data-testid": testIds.dots, className: `
|
|
26
|
+
[&_.glider-dot]:w-[10px]
|
|
27
|
+
[&_.glider-dot]:h-[10px]
|
|
28
|
+
[&_.glider-dot]:bg-blue-500
|
|
29
|
+
[&_.glider-dot]:opacity-20
|
|
30
|
+
|
|
31
|
+
[&_.glider-dot.active]:bg-blue-500 [&_.glider-dot.active]:opacity-100
|
|
32
|
+
|
|
33
|
+
[&_.glider-dot:not(.active):hover]:opacity-100
|
|
34
|
+
[&_.glider-dot:not(.active):hover]:shadow-[0_0_0_2px_rgba(32,78,207,0.2)]
|
|
35
|
+
[&_.glider-dot:not(.active):hover]:transition-[box-shadow,opacity]
|
|
36
|
+
[&_.glider-dot:not(.active):hover]:duration-300
|
|
37
|
+
[&_.glider-dot:not(.active):hover]:ease-out
|
|
38
|
+
` })))),
|
|
27
39
|
hasArrows && (React.createElement(Container, { "data-testid": testIds.arrows },
|
|
28
40
|
React.createElement(ButtonCircular, Object.assign({ className: 'rotate-180', "data-testid": testIds.prev, icon: React.createElement(ChevronRight24, null), variant: 'flat' }, getPrevProps())),
|
|
29
41
|
React.createElement(ButtonCircular, Object.assign({ "data-testid": testIds.next, icon: React.createElement(ChevronRight24, null), variant: 'flat' }, getNextProps()))))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselNavigation.js","sourceRoot":"","sources":["../../../src/CarouselNavigation/CarouselNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;
|
|
1
|
+
{"version":3,"file":"CarouselNavigation.js","sourceRoot":"","sources":["../../../src/CarouselNavigation/CarouselNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEtD,MAAM,iBAAiB,GAAG,CAAC,SAAkB,EAAE,OAAgB,EAAE,EAAE;IACjE,IAAI,SAAS,IAAI,OAAO,EAAE,CAAC;QACzB,OAAO,eAAe,CAAA;IACxB,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,UAAU,CAAA;IACnB,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,QAAQ,CAAA;IACjB,CAAC;AACH,CAAC,CAAA;AAiBD,MAAM,kBAAkB,GAAG,CAAC,EAC1B,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,OAAO,EACP,OAAO,GACD,EAAE,EAAE;IACV,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAC,qBAAqB,EAC/B,IAAI,QACJ,cAAc,EAAE,iBAAiB,CAAC,SAAS,EAAE,OAAO,CAAC,iBACxC,OAAO,CAAC,UAAU;QAE9B,OAAO,IAAI;QACV;;;;UAIE;QACF;YACE,6CACM,YAAY,EAAE,mBACL,OAAO,CAAC,IAAI,EACzB,SAAS,EAAE;;;;;;;;;;;;;aAaV,IACD,CACE,CACP;QACA,SAAS,IAAI,CACZ,oBAAC,SAAS,mBAAc,OAAO,CAAC,MAAM;YACpC,oBAAC,cAAc,kBACb,SAAS,EAAC,YAAY,iBACT,OAAO,CAAC,IAAI,EACzB,IAAI,EAAE,oBAAC,cAAc,OAAG,EACxB,OAAO,EAAC,MAAM,IACV,YAAY,EAAE,EAClB;YACF,oBAAC,cAAc,iCACA,OAAO,CAAC,IAAI,EACzB,IAAI,EAAE,oBAAC,cAAc,OAAG,EACxB,OAAO,EAAC,MAAM,IACV,YAAY,EAAE,EAClB,CACQ,CACb,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAC,kBAAkB,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-carousel",
|
|
3
|
-
"version": "100.0.3
|
|
3
|
+
"version": "100.0.3",
|
|
4
4
|
"description": "Toptal UI components library - Carousel",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -19,23 +19,23 @@
|
|
|
19
19
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"glider-js": "^1.7.8",
|
|
22
|
-
"@toptal/picasso-button": "100.0.3
|
|
23
|
-
"@toptal/picasso-container": "100.0.
|
|
24
|
-
"@toptal/picasso-
|
|
25
|
-
"@toptal/picasso-
|
|
26
|
-
"@toptal/picasso-utils": "100.0.
|
|
22
|
+
"@toptal/picasso-button": "100.0.3",
|
|
23
|
+
"@toptal/picasso-container": "100.0.1",
|
|
24
|
+
"@toptal/picasso-icons": "100.0.1",
|
|
25
|
+
"@toptal/picasso-shared": "100.1.0",
|
|
26
|
+
"@toptal/picasso-utils": "100.0.1"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@toptal/picasso-tailwind-merge": "100.0.
|
|
29
|
+
"@toptal/picasso-tailwind-merge": "100.0.0"
|
|
30
30
|
},
|
|
31
31
|
"sideEffects": [
|
|
32
32
|
"**/styles.ts",
|
|
33
33
|
"**/styles.js"
|
|
34
34
|
],
|
|
35
35
|
"peerDependencies": {
|
|
36
|
-
"react": "
|
|
37
|
-
"@toptal/picasso-tailwind": "^100.0.
|
|
38
|
-
"@toptal/picasso-tailwind-merge": "^100.0.
|
|
36
|
+
"react": ">=17.0.0 < 19.0.0",
|
|
37
|
+
"@toptal/picasso-tailwind": "^100.0.0",
|
|
38
|
+
"@toptal/picasso-tailwind-merge": "^100.0.0"
|
|
39
39
|
},
|
|
40
40
|
"exports": {
|
|
41
41
|
".": "./dist-package/src/index.js"
|
|
@@ -43,7 +43,8 @@
|
|
|
43
43
|
"files": [
|
|
44
44
|
"dist-package/**",
|
|
45
45
|
"!dist-package/tsconfig.tsbuildinfo",
|
|
46
|
-
"src"
|
|
46
|
+
"src",
|
|
47
|
+
"!src/**/*.figma.ts"
|
|
47
48
|
],
|
|
48
49
|
"scripts": {
|
|
49
50
|
"build:package": "tsc -b tsconfig.json"
|
|
@@ -43,7 +43,7 @@ const useCarousel = ({
|
|
|
43
43
|
const wrapperRef = useRef<HTMLDivElement>(null)
|
|
44
44
|
const [isLastPage, setLastPage] = useState(false)
|
|
45
45
|
const [isFirstPage, setFirstPage] = useState(!rewind)
|
|
46
|
-
const gliderRef = useRef<Glider<HTMLDivElement
|
|
46
|
+
const gliderRef = useRef<Glider<HTMLDivElement>>()
|
|
47
47
|
|
|
48
48
|
const handleOnAnimated = useCallback(() => {
|
|
49
49
|
const currentSlide = gliderRef.current?.slide || 0
|
|
@@ -24,9 +24,9 @@ const CarouselGradient = ({ isLastPage, slidesToShow }: Props) => {
|
|
|
24
24
|
className={twMerge(
|
|
25
25
|
(showNextGradient || showPrevGradient) && 'absolute h-full top-0',
|
|
26
26
|
showNextGradient &&
|
|
27
|
-
'right-0 bg-
|
|
27
|
+
'right-0 bg-gradient-to-r from-white/20 to-white to-95%',
|
|
28
28
|
showPrevGradient &&
|
|
29
|
-
'left-0 bg-
|
|
29
|
+
'left-0 bg-gradient-to-r from-white from-5% to-white/20'
|
|
30
30
|
)}
|
|
31
31
|
/>
|
|
32
32
|
)
|
|
@@ -2,7 +2,6 @@ import React, { memo } from 'react'
|
|
|
2
2
|
import { ButtonCircular } from '@toptal/picasso-button'
|
|
3
3
|
import { Container } from '@toptal/picasso-container'
|
|
4
4
|
import { ChevronRight24 } from '@toptal/picasso-icons'
|
|
5
|
-
import { twJoin } from '@toptal/picasso-tailwind-merge'
|
|
6
5
|
|
|
7
6
|
const getJustifyContent = (hasArrows: boolean, hasDots: boolean) => {
|
|
8
7
|
if (hasArrows && hasDots) {
|
|
@@ -58,18 +57,20 @@ const CarouselNavigation = ({
|
|
|
58
57
|
<div
|
|
59
58
|
{...getDotsProps()}
|
|
60
59
|
data-testid={testIds.dots}
|
|
61
|
-
className={
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
60
|
+
className={`
|
|
61
|
+
[&_.glider-dot]:w-[10px]
|
|
62
|
+
[&_.glider-dot]:h-[10px]
|
|
63
|
+
[&_.glider-dot]:bg-blue-500
|
|
64
|
+
[&_.glider-dot]:opacity-20
|
|
65
|
+
|
|
66
|
+
[&_.glider-dot.active]:bg-blue-500 [&_.glider-dot.active]:opacity-100
|
|
67
|
+
|
|
68
|
+
[&_.glider-dot:not(.active):hover]:opacity-100
|
|
69
|
+
[&_.glider-dot:not(.active):hover]:shadow-[0_0_0_2px_rgba(32,78,207,0.2)]
|
|
70
|
+
[&_.glider-dot:not(.active):hover]:transition-[box-shadow,opacity]
|
|
71
|
+
[&_.glider-dot:not(.active):hover]:duration-300
|
|
72
|
+
[&_.glider-dot:not(.active):hover]:ease-out
|
|
73
|
+
`}
|
|
73
74
|
/>
|
|
74
75
|
</div>
|
|
75
76
|
)}
|