@faststore/components 3.92.1-dev.0 → 3.93.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.
- package/dist/cjs/hooks/index.d.ts +1 -0
- package/dist/cjs/hooks/index.d.ts.map +1 -1
- package/dist/cjs/hooks/index.js +3 -1
- package/dist/cjs/hooks/index.js.map +1 -1
- package/dist/cjs/hooks/useRTL.d.ts +6 -0
- package/dist/cjs/hooks/useRTL.d.ts.map +1 -0
- package/dist/cjs/hooks/useRTL.js +39 -0
- package/dist/cjs/hooks/useRTL.js.map +1 -0
- package/dist/cjs/hooks/useSlider.d.ts +3 -1
- package/dist/cjs/hooks/useSlider.d.ts.map +1 -1
- package/dist/cjs/hooks/useSlider.js +6 -3
- package/dist/cjs/hooks/useSlider.js.map +1 -1
- package/dist/cjs/molecules/Carousel/Carousel.d.ts.map +1 -1
- package/dist/cjs/molecules/Carousel/Carousel.js +67 -16
- package/dist/cjs/molecules/Carousel/Carousel.js.map +1 -1
- package/dist/esm/hooks/index.d.ts +1 -0
- package/dist/esm/hooks/index.d.ts.map +1 -1
- package/dist/esm/hooks/index.js +1 -0
- package/dist/esm/hooks/index.js.map +1 -1
- package/dist/esm/hooks/useRTL.d.ts +6 -0
- package/dist/esm/hooks/useRTL.d.ts.map +1 -0
- package/dist/esm/hooks/useRTL.js +35 -0
- package/dist/esm/hooks/useRTL.js.map +1 -0
- package/dist/esm/hooks/useSlider.d.ts +3 -1
- package/dist/esm/hooks/useSlider.d.ts.map +1 -1
- package/dist/esm/hooks/useSlider.js +6 -3
- package/dist/esm/hooks/useSlider.js.map +1 -1
- package/dist/esm/molecules/Carousel/Carousel.d.ts.map +1 -1
- package/dist/esm/molecules/Carousel/Carousel.js +68 -17
- package/dist/esm/molecules/Carousel/Carousel.js.map +1 -1
- package/package.json +2 -2
- package/src/hooks/index.ts +1 -0
- package/src/hooks/useRTL.ts +43 -0
- package/src/hooks/useSlider.ts +9 -2
- package/src/molecules/Carousel/Carousel.tsx +108 -22
|
@@ -9,4 +9,5 @@ export type { SlideDirection, SliderDispatch, SliderState, UseSliderArgs, } from
|
|
|
9
9
|
export { useSlideVisibility } from './useSlideVisibility';
|
|
10
10
|
export { useTrapFocus } from './useTrapFocus';
|
|
11
11
|
export { useProductComparison } from './useProductComparison';
|
|
12
|
+
export { useRTL } from './useRTL';
|
|
12
13
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,KAAK,IAAI,UAAU,EACnB,OAAO,IAAI,UAAU,EACrB,KAAK,GACN,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,YAAY,EACV,cAAc,EACd,cAAc,EACd,WAAW,EACX,aAAa,GACd,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,KAAK,IAAI,UAAU,EACnB,OAAO,IAAI,UAAU,EACrB,KAAK,GACN,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,YAAY,EACV,cAAc,EACd,cAAc,EACd,WAAW,EACX,aAAa,GACd,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA"}
|
package/dist/cjs/hooks/index.js
CHANGED
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.useProductComparison = exports.useTrapFocus = exports.useSlideVisibility = exports.useSlider = exports.useSKUMatrix = exports.useSearch = exports.useScrollDirection = exports.useOnClickOutside = exports.useFadeEffect = exports.useUI = exports.UIProvider = exports.regionSliderTypes = void 0;
|
|
6
|
+
exports.useRTL = exports.useProductComparison = exports.useTrapFocus = exports.useSlideVisibility = exports.useSlider = exports.useSKUMatrix = exports.useSearch = exports.useScrollDirection = exports.useOnClickOutside = exports.useFadeEffect = exports.useUI = exports.UIProvider = exports.regionSliderTypes = void 0;
|
|
7
7
|
var UIProvider_1 = require("./UIProvider");
|
|
8
8
|
Object.defineProperty(exports, "regionSliderTypes", { enumerable: true, get: function () { return UIProvider_1.regionSliderTypes; } });
|
|
9
9
|
Object.defineProperty(exports, "UIProvider", { enumerable: true, get: function () { return __importDefault(UIProvider_1).default; } });
|
|
@@ -26,4 +26,6 @@ var useTrapFocus_1 = require("./useTrapFocus");
|
|
|
26
26
|
Object.defineProperty(exports, "useTrapFocus", { enumerable: true, get: function () { return useTrapFocus_1.useTrapFocus; } });
|
|
27
27
|
var useProductComparison_1 = require("./useProductComparison");
|
|
28
28
|
Object.defineProperty(exports, "useProductComparison", { enumerable: true, get: function () { return useProductComparison_1.useProductComparison; } });
|
|
29
|
+
var useRTL_1 = require("./useRTL");
|
|
30
|
+
Object.defineProperty(exports, "useRTL", { enumerable: true, get: function () { return useRTL_1.useRTL; } });
|
|
29
31
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;AAAA,2CAKqB;AAJnB,+GAAA,iBAAiB,OAAA;AAEjB,yHAAA,OAAO,OAAc;AACrB,mGAAA,KAAK,OAAA;AAEP,iDAA+C;AAAtC,8GAAA,aAAa,OAAA;AACtB,yDAAuD;AAA9C,sHAAA,iBAAiB,OAAA;AAC1B,2DAAyD;AAAhD,wHAAA,kBAAkB,OAAA;AAC3B,yCAAuC;AAA9B,sGAAA,SAAS,OAAA;AAClB,+CAA6C;AAApC,4GAAA,YAAY,OAAA;AACrB,yCAAuC;AAA9B,sGAAA,SAAS,OAAA;AAOlB,2DAAyD;AAAhD,wHAAA,kBAAkB,OAAA;AAC3B,+CAA6C;AAApC,4GAAA,YAAY,OAAA;AACrB,+DAA6D;AAApD,4HAAA,oBAAoB,OAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":";;;;;;AAAA,2CAKqB;AAJnB,+GAAA,iBAAiB,OAAA;AAEjB,yHAAA,OAAO,OAAc;AACrB,mGAAA,KAAK,OAAA;AAEP,iDAA+C;AAAtC,8GAAA,aAAa,OAAA;AACtB,yDAAuD;AAA9C,sHAAA,iBAAiB,OAAA;AAC1B,2DAAyD;AAAhD,wHAAA,kBAAkB,OAAA;AAC3B,yCAAuC;AAA9B,sGAAA,SAAS,OAAA;AAClB,+CAA6C;AAApC,4GAAA,YAAY,OAAA;AACrB,yCAAuC;AAA9B,sGAAA,SAAS,OAAA;AAOlB,2DAAyD;AAAhD,wHAAA,kBAAkB,OAAA;AAC3B,+CAA6C;AAApC,4GAAA,YAAY,OAAA;AACrB,+DAA6D;AAApD,4HAAA,oBAAoB,OAAA;AAC7B,mCAAiC;AAAxB,gGAAA,MAAM,OAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useRTL.d.ts","sourceRoot":"","sources":["../../../src/hooks/useRTL.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,MAAM,QAAO,OAoCzB,CAAA"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.useRTL = void 0;
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
/**
|
|
6
|
+
* Hook to detect if the document is in RTL (Right-to-Left) direction.
|
|
7
|
+
* @returns true if the document direction is RTL, false otherwise
|
|
8
|
+
*/
|
|
9
|
+
const useRTL = () => {
|
|
10
|
+
const [isRTL, setIsRTL] = (0, react_1.useState)(false);
|
|
11
|
+
(0, react_1.useEffect)(() => {
|
|
12
|
+
const checkRTL = () => {
|
|
13
|
+
if (typeof window === 'undefined') {
|
|
14
|
+
return false;
|
|
15
|
+
}
|
|
16
|
+
const dir = document.documentElement.dir || document.body.dir || 'ltr';
|
|
17
|
+
return dir === 'rtl';
|
|
18
|
+
};
|
|
19
|
+
setIsRTL(checkRTL());
|
|
20
|
+
// Watch for changes in the dir attribute
|
|
21
|
+
const observer = new MutationObserver(() => {
|
|
22
|
+
setIsRTL(checkRTL());
|
|
23
|
+
});
|
|
24
|
+
observer.observe(document.documentElement, {
|
|
25
|
+
attributes: true,
|
|
26
|
+
attributeFilter: ['dir'],
|
|
27
|
+
});
|
|
28
|
+
observer.observe(document.body, {
|
|
29
|
+
attributes: true,
|
|
30
|
+
attributeFilter: ['dir'],
|
|
31
|
+
});
|
|
32
|
+
return () => {
|
|
33
|
+
observer.disconnect();
|
|
34
|
+
};
|
|
35
|
+
}, []);
|
|
36
|
+
return isRTL;
|
|
37
|
+
};
|
|
38
|
+
exports.useRTL = useRTL;
|
|
39
|
+
//# sourceMappingURL=useRTL.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useRTL.js","sourceRoot":"","sources":["../../../src/hooks/useRTL.ts"],"names":[],"mappings":";;;AAAA,iCAA2C;AAE3C;;;GAGG;AACI,MAAM,MAAM,GAAG,GAAY,EAAE;IAClC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAEzC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,GAAG,EAAE;YACpB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;gBAClC,OAAO,KAAK,CAAA;YACd,CAAC;YAED,MAAM,GAAG,GAAG,QAAQ,CAAC,eAAe,CAAC,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,KAAK,CAAA;YACtE,OAAO,GAAG,KAAK,KAAK,CAAA;QACtB,CAAC,CAAA;QAED,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;QAEpB,yCAAyC;QACzC,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACzC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;QACtB,CAAC,CAAC,CAAA;QAEF,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;YACzC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,KAAK,CAAC;SACzB,CAAC,CAAA;QAEF,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;YAC9B,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,KAAK,CAAC;SACzB,CAAC,CAAA;QAEF,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAA;QACvB,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AApCY,QAAA,MAAM,UAoClB"}
|
|
@@ -54,8 +54,10 @@ export interface UseSliderArgs extends SwipeableProps {
|
|
|
54
54
|
infiniteMode?: boolean;
|
|
55
55
|
/** Whether or not slide after swiping left/right. */
|
|
56
56
|
shouldSlideOnSwipe?: boolean;
|
|
57
|
+
/** Whether the document is in RTL mode. */
|
|
58
|
+
isRTL?: boolean;
|
|
57
59
|
}
|
|
58
|
-
export declare const useSlider: ({ totalItems, itemsPerPage, infiniteMode, shouldSlideOnSwipe, ...swipeableConfigOverrides }: UseSliderArgs) => {
|
|
60
|
+
export declare const useSlider: ({ totalItems, itemsPerPage, infiniteMode, shouldSlideOnSwipe, isRTL, ...swipeableConfigOverrides }: UseSliderArgs) => {
|
|
59
61
|
handlers: import("react-swipeable").SwipeableHandlers;
|
|
60
62
|
slide: (page: SlideDirection | number, dispatch: Dispatch<Action>) => void;
|
|
61
63
|
sliderState: SliderState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSlider.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSlider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAGrD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,CAAA;AAEhD,UAAU,cAAc;IACtB,IAAI,EAAE,WAAW,CAAA;CAClB;AAED,UAAU,kBAAkB;IAC1B,IAAI,EAAE,eAAe,CAAA;CACtB;AAED,UAAU,cAAc;IACtB,IAAI,EAAE,YAAY,CAAA;IAClB,OAAO,EAAE;QACP,SAAS,EAAE,MAAM,CAAA;QACjB,WAAW,EAAE,OAAO,CAAA;KACrB,CAAA;CACF;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,YAAY,CAAA;CACnB;AAED,MAAM,MAAM,MAAM,GACd,cAAc,GACd,kBAAkB,GAClB,eAAe,GACf,cAAc,CAAA;AAElB,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;AAE7C,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB,4BAA4B;IAC5B,WAAW,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,cAAc,EAAE,cAAc,CAAA;IAC9B,sDAAsD;IACtD,UAAU,EAAE,MAAM,CAAA;IAClB,4CAA4C;IAC5C,YAAY,EAAE,MAAM,CAAA;IACpB,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAA;IAClB,6CAA6C;IAC7C,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,QAAQ,YAAa,MAAM,SAAS,MAAM,WAChC,CAAA;AAEvB,eAAO,MAAM,YAAY,YAAa,MAAM,SAAS,MAAM,WACR,CAAA;AA4GnD,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,sDAAsD;IACtD,UAAU,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sDAAsD;IACtD,kBAAkB,CAAC,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"useSlider.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSlider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAGrD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,CAAA;AAEhD,UAAU,cAAc;IACtB,IAAI,EAAE,WAAW,CAAA;CAClB;AAED,UAAU,kBAAkB;IAC1B,IAAI,EAAE,eAAe,CAAA;CACtB;AAED,UAAU,cAAc;IACtB,IAAI,EAAE,YAAY,CAAA;IAClB,OAAO,EAAE;QACP,SAAS,EAAE,MAAM,CAAA;QACjB,WAAW,EAAE,OAAO,CAAA;KACrB,CAAA;CACF;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,YAAY,CAAA;CACnB;AAED,MAAM,MAAM,MAAM,GACd,cAAc,GACd,kBAAkB,GAClB,eAAe,GACf,cAAc,CAAA;AAElB,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;AAE7C,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB,4BAA4B;IAC5B,WAAW,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,cAAc,EAAE,cAAc,CAAA;IAC9B,sDAAsD;IACtD,UAAU,EAAE,MAAM,CAAA;IAClB,4CAA4C;IAC5C,YAAY,EAAE,MAAM,CAAA;IACpB,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAA;IAClB,6CAA6C;IAC7C,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,QAAQ,YAAa,MAAM,SAAS,MAAM,WAChC,CAAA;AAEvB,eAAO,MAAM,YAAY,YAAa,MAAM,SAAS,MAAM,WACR,CAAA;AA4GnD,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,sDAAsD;IACtD,UAAU,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sDAAsD;IACtD,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,eAAO,MAAM,SAAS,uGAOnB,aAAa;;kBAxCK,cAAc,GAAG,MAAM,YAAY,SAAS,MAAM,CAAC;;;CA+DvE,CAAA"}
|
|
@@ -90,11 +90,14 @@ const slide = (page, dispatch) => {
|
|
|
90
90
|
});
|
|
91
91
|
}
|
|
92
92
|
};
|
|
93
|
-
const useSlider = ({ totalItems, itemsPerPage = 1, infiniteMode = false, shouldSlideOnSwipe = true, ...swipeableConfigOverrides }) => {
|
|
93
|
+
const useSlider = ({ totalItems, itemsPerPage = 1, infiniteMode = false, shouldSlideOnSwipe = true, isRTL = false, ...swipeableConfigOverrides }) => {
|
|
94
94
|
const [sliderState, sliderDispatch] = (0, react_1.useReducer)(reducer, undefined, () => defaultSliderState(totalItems, itemsPerPage, infiniteMode));
|
|
95
95
|
const handlers = (0, react_swipeable_1.useSwipeable)({
|
|
96
|
-
|
|
97
|
-
|
|
96
|
+
// In RTL, swipe directions are swapped:
|
|
97
|
+
// - Swiping right should go to next (instead of previous)
|
|
98
|
+
// - Swiping left should go to previous (instead of next)
|
|
99
|
+
onSwipedRight: () => shouldSlideOnSwipe && slide(isRTL ? 'next' : 'previous', sliderDispatch),
|
|
100
|
+
onSwipedLeft: () => shouldSlideOnSwipe && slide(isRTL ? 'previous' : 'next', sliderDispatch),
|
|
98
101
|
trackMouse: true,
|
|
99
102
|
...swipeableConfigOverrides,
|
|
100
103
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSlider.js","sourceRoot":"","sources":["../../../src/hooks/useSlider.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"useSlider.js","sourceRoot":"","sources":["../../../src/hooks/useSlider.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../src/molecules/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,iBAAiB,EACjB,SAAS,EAET,cAAc,EACf,MAAM,OAAO,CAAA;AACd,OAAO,KAA+C,MAAM,OAAO,CAAA;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;
|
|
1
|
+
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../src/molecules/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,iBAAiB,EACjB,SAAS,EAET,cAAc,EACf,MAAM,OAAO,CAAA;AACd,OAAO,KAA+C,MAAM,OAAO,CAAA;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AA0BrD,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAA;IAC3C;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,kBAAkB,GAAG,mBAAmB,CAAA;IAChE;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,QAAQ,EAAE,MAAM,CAAA;QAChB,QAAQ,EAAE,MAAM,CAAA;QAChB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;IACD;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE;QAChB,IAAI,CAAC,EAAE,SAAS,CAAA;QAChB,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,CAAA;CACF;AAED,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,YAAoB,EACpB,QAAqB,EACrB,MAAsB,EACtB,UAGC,EACD,EAAkB,EAClB,OAAkB,EAClB,YAAgB,EAChB,eAA2B,EAC3B,GAAG,wBAAwB,EAC5B,EAAE,iBAAiB,CAAC,aAAa,CAAC,qBA2YlC;AAED,eAAe,QAAQ,CAAA"}
|
|
@@ -6,12 +6,13 @@ const __1 = require("../..");
|
|
|
6
6
|
const hooks_1 = require("../../hooks");
|
|
7
7
|
const CarouselBullets_1 = tslib_1.__importDefault(require("./CarouselBullets"));
|
|
8
8
|
const CarouselItem_1 = tslib_1.__importDefault(require("./CarouselItem"));
|
|
9
|
-
const createTransformValues = (infinite, totalItems) => {
|
|
9
|
+
const createTransformValues = (infinite, totalItems, isRTL) => {
|
|
10
10
|
const transformMap = {};
|
|
11
11
|
const slideWidth = 100 / totalItems;
|
|
12
12
|
for (let idx = 0; idx < totalItems; ++idx) {
|
|
13
13
|
const currIdx = infinite ? idx - 1 : idx;
|
|
14
|
-
|
|
14
|
+
// In RTL, we need to invert the transform direction
|
|
15
|
+
const transformValue = isRTL ? slideWidth * idx : -(slideWidth * idx);
|
|
15
16
|
transformMap[currIdx] = transformValue;
|
|
16
17
|
}
|
|
17
18
|
return transformMap;
|
|
@@ -23,6 +24,7 @@ function Carousel({ children, className, 'aria-label': ariaLabel, infiniteMode =
|
|
|
23
24
|
if (itemsPerPage < 1) {
|
|
24
25
|
throw new Error('itemsPerPage must be greater than or equal to 1');
|
|
25
26
|
}
|
|
27
|
+
const isRTL = (0, hooks_1.useRTL)();
|
|
26
28
|
const carouselTrackRef = (0, react_1.useRef)(null);
|
|
27
29
|
const isSlideCarousel = variant === 'slide';
|
|
28
30
|
const isScrollCarousel = variant === 'scroll';
|
|
@@ -35,6 +37,7 @@ function Carousel({ children, className, 'aria-label': ariaLabel, infiniteMode =
|
|
|
35
37
|
infiniteMode,
|
|
36
38
|
totalItems: childrenCount,
|
|
37
39
|
shouldSlideOnSwipe: isSlideCarousel,
|
|
40
|
+
isRTL,
|
|
38
41
|
...swipeableConfigOverrides,
|
|
39
42
|
});
|
|
40
43
|
const pagesCount = Math.ceil(childrenCount / sliderState.itemsPerPage);
|
|
@@ -51,7 +54,7 @@ function Carousel({ children, className, 'aria-label': ariaLabel, infiniteMode =
|
|
|
51
54
|
(controls === 'complete' || controls === 'navigationArrows');
|
|
52
55
|
const showPaginationBullets = pagesCount !== 1 &&
|
|
53
56
|
(controls === 'complete' || controls === 'paginationBullets');
|
|
54
|
-
const transformValues = (0, react_1.useMemo)(() => createTransformValues(infiniteMode, numberOfSlides), [numberOfSlides, infiniteMode]);
|
|
57
|
+
const transformValues = (0, react_1.useMemo)(() => createTransformValues(infiniteMode, numberOfSlides, isRTL), [numberOfSlides, infiniteMode, isRTL]);
|
|
55
58
|
const postRenderedSlides = infiniteMode && children ? childrenArray.slice(0, 1) : [];
|
|
56
59
|
const preRenderedSlides = infiniteMode && children ? childrenArray.slice(childrenCount - 1) : [];
|
|
57
60
|
const slides = preRenderedSlides.concat(children ?? [], postRenderedSlides);
|
|
@@ -91,10 +94,26 @@ function Carousel({ children, className, 'aria-label': ariaLabel, infiniteMode =
|
|
|
91
94
|
if (isSlideCarousel || itemsPerPage > 1) {
|
|
92
95
|
return;
|
|
93
96
|
}
|
|
94
|
-
const
|
|
95
|
-
const
|
|
97
|
+
const element = event.currentTarget;
|
|
98
|
+
const itemWidth = Number(element.firstElementChild?.scrollWidth);
|
|
99
|
+
// In RTL, scrollLeft behavior varies by browser
|
|
100
|
+
// We need to calculate the scroll offset differently for RTL
|
|
101
|
+
let scrollOffset = element.scrollLeft;
|
|
102
|
+
if (isRTL) {
|
|
103
|
+
// In RTL, scrollLeft can be negative in some browsers
|
|
104
|
+
// We calculate the actual scroll position from the right
|
|
105
|
+
const maxScroll = element.scrollWidth - element.clientWidth;
|
|
106
|
+
// Handle negative scrollLeft (some browsers)
|
|
107
|
+
if (scrollOffset < 0) {
|
|
108
|
+
scrollOffset = Math.abs(scrollOffset);
|
|
109
|
+
}
|
|
110
|
+
else {
|
|
111
|
+
// For RTL, calculate from the right side
|
|
112
|
+
scrollOffset = maxScroll - scrollOffset;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
96
115
|
const formatter = scrollOffset > itemWidth / 2 ? Math.round : Math.floor;
|
|
97
|
-
const page = formatter(scrollOffset / itemWidth);
|
|
116
|
+
const page = Math.max(0, Math.min(sliderState.totalPages - 1, formatter(scrollOffset / itemWidth)));
|
|
98
117
|
slide(page, sliderDispatch);
|
|
99
118
|
};
|
|
100
119
|
const onTransitionTrackEnd = () => {
|
|
@@ -129,22 +148,50 @@ function Carousel({ children, className, 'aria-label': ariaLabel, infiniteMode =
|
|
|
129
148
|
return;
|
|
130
149
|
}
|
|
131
150
|
const scrollOffset = index * carouselItemsWidth * itemsPerPage;
|
|
132
|
-
carouselTrackRef.current
|
|
133
|
-
|
|
134
|
-
behavior
|
|
135
|
-
|
|
151
|
+
if (isRTL && carouselTrackRef.current) {
|
|
152
|
+
// In RTL, we need to scroll from the right
|
|
153
|
+
// The scrollLeft behavior varies by browser in RTL
|
|
154
|
+
const maxScroll = carouselTrackRef.current.scrollWidth -
|
|
155
|
+
carouselTrackRef.current.clientWidth;
|
|
156
|
+
const rtlScrollOffset = maxScroll - scrollOffset;
|
|
157
|
+
// Check if scrollLeft is negative (some browsers use negative values in RTL)
|
|
158
|
+
const currentScrollLeft = carouselTrackRef.current.scrollLeft;
|
|
159
|
+
if (currentScrollLeft < 0) {
|
|
160
|
+
// Use negative scroll offset for browsers that support it
|
|
161
|
+
carouselTrackRef.current.scrollTo({
|
|
162
|
+
left: -scrollOffset,
|
|
163
|
+
behavior: 'smooth',
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
else {
|
|
167
|
+
// Use positive scroll offset from the right
|
|
168
|
+
carouselTrackRef.current.scrollTo({
|
|
169
|
+
left: rtlScrollOffset,
|
|
170
|
+
behavior: 'smooth',
|
|
171
|
+
});
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
else {
|
|
175
|
+
carouselTrackRef.current?.scrollTo({
|
|
176
|
+
left: scrollOffset,
|
|
177
|
+
behavior: 'smooth',
|
|
178
|
+
});
|
|
179
|
+
}
|
|
136
180
|
slide(index, sliderDispatch);
|
|
137
181
|
};
|
|
138
182
|
// accessible behavior for tablist
|
|
139
183
|
const handleBulletsKeyDown = (event) => {
|
|
184
|
+
// In RTL, arrow key directions are swapped
|
|
185
|
+
const leftKey = isRTL ? 'ArrowRight' : 'ArrowLeft';
|
|
186
|
+
const rightKey = isRTL ? 'ArrowLeft' : 'ArrowRight';
|
|
140
187
|
switch (event.key) {
|
|
141
|
-
case
|
|
188
|
+
case leftKey: {
|
|
142
189
|
isSlideCarousel && slidePrevious();
|
|
143
190
|
isScrollCarousel &&
|
|
144
191
|
onScrollPagination(sliderState.currentPage - 1, 'previous');
|
|
145
192
|
break;
|
|
146
193
|
}
|
|
147
|
-
case
|
|
194
|
+
case rightKey: {
|
|
148
195
|
isSlideCarousel && slideNext();
|
|
149
196
|
isScrollCarousel &&
|
|
150
197
|
onScrollPagination(sliderState.currentPage + 1, 'next');
|
|
@@ -167,15 +214,19 @@ function Carousel({ children, className, 'aria-label': ariaLabel, infiniteMode =
|
|
|
167
214
|
overflow: 'hidden',
|
|
168
215
|
display: isScrollCarousel ? 'block' : undefined,
|
|
169
216
|
}, ...handlers },
|
|
170
|
-
react_1.default.createElement("ul", { "aria-live": "polite", ref: carouselTrackRef, style: carouselTrackStyle, "data-fs-carousel-track": true, onScroll: onScrollTrack, onTransitionEnd: onTransitionTrackEnd }, slides.map((currentSlide, idx) => (react_1.default.createElement(CarouselItem_1.default, { id: id, index: idx, key: String(idx), state: sliderState, totalItems: childrenCount, infiniteMode: infiniteMode, isScrollCarousel: isScrollCarousel, marginRightValue: marginRight }, currentSlide))))),
|
|
217
|
+
react_1.default.createElement("ul", { "aria-live": "polite", ref: carouselTrackRef, style: carouselTrackStyle, "data-fs-carousel-track": true, dir: isRTL ? 'rtl' : 'ltr', onScroll: onScrollTrack, onTransitionEnd: onTransitionTrackEnd }, slides.map((currentSlide, idx) => (react_1.default.createElement(CarouselItem_1.default, { id: id, index: idx, key: String(idx), state: sliderState, totalItems: childrenCount, infiniteMode: infiniteMode, isScrollCarousel: isScrollCarousel, marginRightValue: marginRight }, currentSlide))))),
|
|
171
218
|
showNavigationArrows && (react_1.default.createElement("div", { "data-fs-carousel-controls": true },
|
|
172
|
-
react_1.default.createElement(__1.IconButton, { "data-fs-carousel-control":
|
|
219
|
+
react_1.default.createElement(__1.IconButton, { "data-fs-carousel-control": isRTL ? 'right' : 'left', "aria-controls": id, disabled: !infiniteMode && sliderState.currentPage === 0, "aria-label": "previous", icon: isRTL
|
|
220
|
+
? (navigationIcons?.right ?? (react_1.default.createElement(__1.Icon, { name: "ArrowRight", width: 20, height: 20, weight: "bold" })))
|
|
221
|
+
: (navigationIcons?.left ?? (react_1.default.createElement(__1.Icon, { name: "ArrowLeft", width: 20, height: 20, weight: "bold" }))), onClick: () => {
|
|
173
222
|
isSlideCarousel && slidePrevious();
|
|
174
223
|
isScrollCarousel &&
|
|
175
224
|
onScrollPagination(sliderState.currentPage - 1, 'previous');
|
|
176
225
|
} }),
|
|
177
|
-
react_1.default.createElement(__1.IconButton, { "data-fs-carousel-control":
|
|
178
|
-
sliderState.currentPage === sliderState.totalPages - 1, "aria-label": "next", icon:
|
|
226
|
+
react_1.default.createElement(__1.IconButton, { "data-fs-carousel-control": isRTL ? 'left' : 'right', "aria-controls": id, disabled: !infiniteMode &&
|
|
227
|
+
sliderState.currentPage === sliderState.totalPages - 1, "aria-label": "next", icon: isRTL
|
|
228
|
+
? (navigationIcons?.left ?? (react_1.default.createElement(__1.Icon, { name: "ArrowLeft", width: 20, height: 20, weight: "bold" })))
|
|
229
|
+
: (navigationIcons?.right ?? (react_1.default.createElement(__1.Icon, { name: "ArrowRight", width: 20, height: 20, weight: "bold" }))), onClick: () => {
|
|
179
230
|
isSlideCarousel && slideNext();
|
|
180
231
|
isScrollCarousel &&
|
|
181
232
|
onScrollPagination(sliderState.currentPage + 1, 'next');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../../../src/molecules/Carousel/Carousel.tsx"],"names":[],"mappings":";;;AAQA,uDAAmE;AAGnE,6BAAwC;AACxC,
|
|
1
|
+
{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../../../src/molecules/Carousel/Carousel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,4 +9,5 @@ export type { SlideDirection, SliderDispatch, SliderState, UseSliderArgs, } from
|
|
|
9
9
|
export { useSlideVisibility } from './useSlideVisibility';
|
|
10
10
|
export { useTrapFocus } from './useTrapFocus';
|
|
11
11
|
export { useProductComparison } from './useProductComparison';
|
|
12
|
+
export { useRTL } from './useRTL';
|
|
12
13
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,KAAK,IAAI,UAAU,EACnB,OAAO,IAAI,UAAU,EACrB,KAAK,GACN,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,YAAY,EACV,cAAc,EACd,cAAc,EACd,WAAW,EACX,aAAa,GACd,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,KAAK,IAAI,UAAU,EACnB,OAAO,IAAI,UAAU,EACrB,KAAK,GACN,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,YAAY,EACV,cAAc,EACd,cAAc,EACd,WAAW,EACX,aAAa,GACd,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA"}
|
package/dist/esm/hooks/index.js
CHANGED
|
@@ -8,4 +8,5 @@ export { useSlider } from './useSlider';
|
|
|
8
8
|
export { useSlideVisibility } from './useSlideVisibility';
|
|
9
9
|
export { useTrapFocus } from './useTrapFocus';
|
|
10
10
|
export { useProductComparison } from './useProductComparison';
|
|
11
|
+
export { useRTL } from './useRTL';
|
|
11
12
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAEjB,OAAO,IAAI,UAAU,EACrB,KAAK,GACN,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAOvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAEjB,OAAO,IAAI,UAAU,EACrB,KAAK,GACN,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAOvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useRTL.d.ts","sourceRoot":"","sources":["../../../src/hooks/useRTL.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,MAAM,QAAO,OAoCzB,CAAA"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { useEffect, useState } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Hook to detect if the document is in RTL (Right-to-Left) direction.
|
|
4
|
+
* @returns true if the document direction is RTL, false otherwise
|
|
5
|
+
*/
|
|
6
|
+
export const useRTL = () => {
|
|
7
|
+
const [isRTL, setIsRTL] = useState(false);
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
const checkRTL = () => {
|
|
10
|
+
if (typeof window === 'undefined') {
|
|
11
|
+
return false;
|
|
12
|
+
}
|
|
13
|
+
const dir = document.documentElement.dir || document.body.dir || 'ltr';
|
|
14
|
+
return dir === 'rtl';
|
|
15
|
+
};
|
|
16
|
+
setIsRTL(checkRTL());
|
|
17
|
+
// Watch for changes in the dir attribute
|
|
18
|
+
const observer = new MutationObserver(() => {
|
|
19
|
+
setIsRTL(checkRTL());
|
|
20
|
+
});
|
|
21
|
+
observer.observe(document.documentElement, {
|
|
22
|
+
attributes: true,
|
|
23
|
+
attributeFilter: ['dir'],
|
|
24
|
+
});
|
|
25
|
+
observer.observe(document.body, {
|
|
26
|
+
attributes: true,
|
|
27
|
+
attributeFilter: ['dir'],
|
|
28
|
+
});
|
|
29
|
+
return () => {
|
|
30
|
+
observer.disconnect();
|
|
31
|
+
};
|
|
32
|
+
}, []);
|
|
33
|
+
return isRTL;
|
|
34
|
+
};
|
|
35
|
+
//# sourceMappingURL=useRTL.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useRTL.js","sourceRoot":"","sources":["../../../src/hooks/useRTL.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAY,EAAE;IAClC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,GAAG,EAAE;YACpB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;gBAClC,OAAO,KAAK,CAAA;YACd,CAAC;YAED,MAAM,GAAG,GAAG,QAAQ,CAAC,eAAe,CAAC,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,KAAK,CAAA;YACtE,OAAO,GAAG,KAAK,KAAK,CAAA;QACtB,CAAC,CAAA;QAED,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;QAEpB,yCAAyC;QACzC,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACzC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAA;QACtB,CAAC,CAAC,CAAA;QAEF,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;YACzC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,KAAK,CAAC;SACzB,CAAC,CAAA;QAEF,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;YAC9B,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,KAAK,CAAC;SACzB,CAAC,CAAA;QAEF,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,UAAU,EAAE,CAAA;QACvB,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}
|
|
@@ -54,8 +54,10 @@ export interface UseSliderArgs extends SwipeableProps {
|
|
|
54
54
|
infiniteMode?: boolean;
|
|
55
55
|
/** Whether or not slide after swiping left/right. */
|
|
56
56
|
shouldSlideOnSwipe?: boolean;
|
|
57
|
+
/** Whether the document is in RTL mode. */
|
|
58
|
+
isRTL?: boolean;
|
|
57
59
|
}
|
|
58
|
-
export declare const useSlider: ({ totalItems, itemsPerPage, infiniteMode, shouldSlideOnSwipe, ...swipeableConfigOverrides }: UseSliderArgs) => {
|
|
60
|
+
export declare const useSlider: ({ totalItems, itemsPerPage, infiniteMode, shouldSlideOnSwipe, isRTL, ...swipeableConfigOverrides }: UseSliderArgs) => {
|
|
59
61
|
handlers: import("react-swipeable").SwipeableHandlers;
|
|
60
62
|
slide: (page: SlideDirection | number, dispatch: Dispatch<Action>) => void;
|
|
61
63
|
sliderState: SliderState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSlider.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSlider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAGrD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,CAAA;AAEhD,UAAU,cAAc;IACtB,IAAI,EAAE,WAAW,CAAA;CAClB;AAED,UAAU,kBAAkB;IAC1B,IAAI,EAAE,eAAe,CAAA;CACtB;AAED,UAAU,cAAc;IACtB,IAAI,EAAE,YAAY,CAAA;IAClB,OAAO,EAAE;QACP,SAAS,EAAE,MAAM,CAAA;QACjB,WAAW,EAAE,OAAO,CAAA;KACrB,CAAA;CACF;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,YAAY,CAAA;CACnB;AAED,MAAM,MAAM,MAAM,GACd,cAAc,GACd,kBAAkB,GAClB,eAAe,GACf,cAAc,CAAA;AAElB,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;AAE7C,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB,4BAA4B;IAC5B,WAAW,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,cAAc,EAAE,cAAc,CAAA;IAC9B,sDAAsD;IACtD,UAAU,EAAE,MAAM,CAAA;IAClB,4CAA4C;IAC5C,YAAY,EAAE,MAAM,CAAA;IACpB,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAA;IAClB,6CAA6C;IAC7C,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,QAAQ,YAAa,MAAM,SAAS,MAAM,WAChC,CAAA;AAEvB,eAAO,MAAM,YAAY,YAAa,MAAM,SAAS,MAAM,WACR,CAAA;AA4GnD,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,sDAAsD;IACtD,UAAU,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sDAAsD;IACtD,kBAAkB,CAAC,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"useSlider.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSlider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAGrD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,CAAA;AAEhD,UAAU,cAAc;IACtB,IAAI,EAAE,WAAW,CAAA;CAClB;AAED,UAAU,kBAAkB;IAC1B,IAAI,EAAE,eAAe,CAAA;CACtB;AAED,UAAU,cAAc;IACtB,IAAI,EAAE,YAAY,CAAA;IAClB,OAAO,EAAE;QACP,SAAS,EAAE,MAAM,CAAA;QACjB,WAAW,EAAE,OAAO,CAAA;KACrB,CAAA;CACF;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,YAAY,CAAA;CACnB;AAED,MAAM,MAAM,MAAM,GACd,cAAc,GACd,kBAAkB,GAClB,eAAe,GACf,cAAc,CAAA;AAElB,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;AAE7C,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB,4BAA4B;IAC5B,WAAW,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,cAAc,EAAE,cAAc,CAAA;IAC9B,sDAAsD;IACtD,UAAU,EAAE,MAAM,CAAA;IAClB,4CAA4C;IAC5C,YAAY,EAAE,MAAM,CAAA;IACpB,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAA;IAClB,6CAA6C;IAC7C,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,QAAQ,YAAa,MAAM,SAAS,MAAM,WAChC,CAAA;AAEvB,eAAO,MAAM,YAAY,YAAa,MAAM,SAAS,MAAM,WACR,CAAA;AA4GnD,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,sDAAsD;IACtD,UAAU,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sDAAsD;IACtD,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,eAAO,MAAM,SAAS,uGAOnB,aAAa;;kBAxCK,cAAc,GAAG,MAAM,YAAY,SAAS,MAAM,CAAC;;;CA+DvE,CAAA"}
|
|
@@ -85,11 +85,14 @@ const slide = (page, dispatch) => {
|
|
|
85
85
|
});
|
|
86
86
|
}
|
|
87
87
|
};
|
|
88
|
-
export const useSlider = ({ totalItems, itemsPerPage = 1, infiniteMode = false, shouldSlideOnSwipe = true, ...swipeableConfigOverrides }) => {
|
|
88
|
+
export const useSlider = ({ totalItems, itemsPerPage = 1, infiniteMode = false, shouldSlideOnSwipe = true, isRTL = false, ...swipeableConfigOverrides }) => {
|
|
89
89
|
const [sliderState, sliderDispatch] = useReducer(reducer, undefined, () => defaultSliderState(totalItems, itemsPerPage, infiniteMode));
|
|
90
90
|
const handlers = useSwipeable({
|
|
91
|
-
|
|
92
|
-
|
|
91
|
+
// In RTL, swipe directions are swapped:
|
|
92
|
+
// - Swiping right should go to next (instead of previous)
|
|
93
|
+
// - Swiping left should go to previous (instead of next)
|
|
94
|
+
onSwipedRight: () => shouldSlideOnSwipe && slide(isRTL ? 'next' : 'previous', sliderDispatch),
|
|
95
|
+
onSwipedLeft: () => shouldSlideOnSwipe && slide(isRTL ? 'previous' : 'next', sliderDispatch),
|
|
93
96
|
trackMouse: true,
|
|
94
97
|
...swipeableConfigOverrides,
|
|
95
98
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSlider.js","sourceRoot":"","sources":["../../../src/hooks/useSlider.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"useSlider.js","sourceRoot":"","sources":["../../../src/hooks/useSlider.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../src/molecules/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,iBAAiB,EACjB,SAAS,EAET,cAAc,EACf,MAAM,OAAO,CAAA;AACd,OAAO,KAA+C,MAAM,OAAO,CAAA;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;
|
|
1
|
+
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../src/molecules/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,iBAAiB,EACjB,SAAS,EAET,cAAc,EACf,MAAM,OAAO,CAAA;AACd,OAAO,KAA+C,MAAM,OAAO,CAAA;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AA0BrD,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAA;IAC3C;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,kBAAkB,GAAG,mBAAmB,CAAA;IAChE;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,QAAQ,EAAE,MAAM,CAAA;QAChB,QAAQ,EAAE,MAAM,CAAA;QAChB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;IACD;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE;QAChB,IAAI,CAAC,EAAE,SAAS,CAAA;QAChB,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,CAAA;CACF;AAED,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,YAAoB,EACpB,QAAqB,EACrB,MAAsB,EACtB,UAGC,EACD,EAAkB,EAClB,OAAkB,EAClB,YAAgB,EAChB,eAA2B,EAC3B,GAAG,wBAAwB,EAC5B,EAAE,iBAAiB,CAAC,aAAa,CAAC,qBA2YlC;AAED,eAAe,QAAQ,CAAA"}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
2
2
|
import { Icon, IconButton } from '../..';
|
|
3
|
-
import { useSlider } from '../../hooks';
|
|
3
|
+
import { useSlider, useRTL } from '../../hooks';
|
|
4
4
|
import CarouselBullets from './CarouselBullets';
|
|
5
5
|
import CarouselItem from './CarouselItem';
|
|
6
|
-
const createTransformValues = (infinite, totalItems) => {
|
|
6
|
+
const createTransformValues = (infinite, totalItems, isRTL) => {
|
|
7
7
|
const transformMap = {};
|
|
8
8
|
const slideWidth = 100 / totalItems;
|
|
9
9
|
for (let idx = 0; idx < totalItems; ++idx) {
|
|
10
10
|
const currIdx = infinite ? idx - 1 : idx;
|
|
11
|
-
|
|
11
|
+
// In RTL, we need to invert the transform direction
|
|
12
|
+
const transformValue = isRTL ? slideWidth * idx : -(slideWidth * idx);
|
|
12
13
|
transformMap[currIdx] = transformValue;
|
|
13
14
|
}
|
|
14
15
|
return transformMap;
|
|
@@ -20,6 +21,7 @@ function Carousel({ children, className, 'aria-label': ariaLabel, infiniteMode =
|
|
|
20
21
|
if (itemsPerPage < 1) {
|
|
21
22
|
throw new Error('itemsPerPage must be greater than or equal to 1');
|
|
22
23
|
}
|
|
24
|
+
const isRTL = useRTL();
|
|
23
25
|
const carouselTrackRef = useRef(null);
|
|
24
26
|
const isSlideCarousel = variant === 'slide';
|
|
25
27
|
const isScrollCarousel = variant === 'scroll';
|
|
@@ -32,6 +34,7 @@ function Carousel({ children, className, 'aria-label': ariaLabel, infiniteMode =
|
|
|
32
34
|
infiniteMode,
|
|
33
35
|
totalItems: childrenCount,
|
|
34
36
|
shouldSlideOnSwipe: isSlideCarousel,
|
|
37
|
+
isRTL,
|
|
35
38
|
...swipeableConfigOverrides,
|
|
36
39
|
});
|
|
37
40
|
const pagesCount = Math.ceil(childrenCount / sliderState.itemsPerPage);
|
|
@@ -48,7 +51,7 @@ function Carousel({ children, className, 'aria-label': ariaLabel, infiniteMode =
|
|
|
48
51
|
(controls === 'complete' || controls === 'navigationArrows');
|
|
49
52
|
const showPaginationBullets = pagesCount !== 1 &&
|
|
50
53
|
(controls === 'complete' || controls === 'paginationBullets');
|
|
51
|
-
const transformValues = useMemo(() => createTransformValues(infiniteMode, numberOfSlides), [numberOfSlides, infiniteMode]);
|
|
54
|
+
const transformValues = useMemo(() => createTransformValues(infiniteMode, numberOfSlides, isRTL), [numberOfSlides, infiniteMode, isRTL]);
|
|
52
55
|
const postRenderedSlides = infiniteMode && children ? childrenArray.slice(0, 1) : [];
|
|
53
56
|
const preRenderedSlides = infiniteMode && children ? childrenArray.slice(childrenCount - 1) : [];
|
|
54
57
|
const slides = preRenderedSlides.concat(children ?? [], postRenderedSlides);
|
|
@@ -88,10 +91,26 @@ function Carousel({ children, className, 'aria-label': ariaLabel, infiniteMode =
|
|
|
88
91
|
if (isSlideCarousel || itemsPerPage > 1) {
|
|
89
92
|
return;
|
|
90
93
|
}
|
|
91
|
-
const
|
|
92
|
-
const
|
|
94
|
+
const element = event.currentTarget;
|
|
95
|
+
const itemWidth = Number(element.firstElementChild?.scrollWidth);
|
|
96
|
+
// In RTL, scrollLeft behavior varies by browser
|
|
97
|
+
// We need to calculate the scroll offset differently for RTL
|
|
98
|
+
let scrollOffset = element.scrollLeft;
|
|
99
|
+
if (isRTL) {
|
|
100
|
+
// In RTL, scrollLeft can be negative in some browsers
|
|
101
|
+
// We calculate the actual scroll position from the right
|
|
102
|
+
const maxScroll = element.scrollWidth - element.clientWidth;
|
|
103
|
+
// Handle negative scrollLeft (some browsers)
|
|
104
|
+
if (scrollOffset < 0) {
|
|
105
|
+
scrollOffset = Math.abs(scrollOffset);
|
|
106
|
+
}
|
|
107
|
+
else {
|
|
108
|
+
// For RTL, calculate from the right side
|
|
109
|
+
scrollOffset = maxScroll - scrollOffset;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
93
112
|
const formatter = scrollOffset > itemWidth / 2 ? Math.round : Math.floor;
|
|
94
|
-
const page = formatter(scrollOffset / itemWidth);
|
|
113
|
+
const page = Math.max(0, Math.min(sliderState.totalPages - 1, formatter(scrollOffset / itemWidth)));
|
|
95
114
|
slide(page, sliderDispatch);
|
|
96
115
|
};
|
|
97
116
|
const onTransitionTrackEnd = () => {
|
|
@@ -126,22 +145,50 @@ function Carousel({ children, className, 'aria-label': ariaLabel, infiniteMode =
|
|
|
126
145
|
return;
|
|
127
146
|
}
|
|
128
147
|
const scrollOffset = index * carouselItemsWidth * itemsPerPage;
|
|
129
|
-
carouselTrackRef.current
|
|
130
|
-
|
|
131
|
-
behavior
|
|
132
|
-
|
|
148
|
+
if (isRTL && carouselTrackRef.current) {
|
|
149
|
+
// In RTL, we need to scroll from the right
|
|
150
|
+
// The scrollLeft behavior varies by browser in RTL
|
|
151
|
+
const maxScroll = carouselTrackRef.current.scrollWidth -
|
|
152
|
+
carouselTrackRef.current.clientWidth;
|
|
153
|
+
const rtlScrollOffset = maxScroll - scrollOffset;
|
|
154
|
+
// Check if scrollLeft is negative (some browsers use negative values in RTL)
|
|
155
|
+
const currentScrollLeft = carouselTrackRef.current.scrollLeft;
|
|
156
|
+
if (currentScrollLeft < 0) {
|
|
157
|
+
// Use negative scroll offset for browsers that support it
|
|
158
|
+
carouselTrackRef.current.scrollTo({
|
|
159
|
+
left: -scrollOffset,
|
|
160
|
+
behavior: 'smooth',
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
else {
|
|
164
|
+
// Use positive scroll offset from the right
|
|
165
|
+
carouselTrackRef.current.scrollTo({
|
|
166
|
+
left: rtlScrollOffset,
|
|
167
|
+
behavior: 'smooth',
|
|
168
|
+
});
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
else {
|
|
172
|
+
carouselTrackRef.current?.scrollTo({
|
|
173
|
+
left: scrollOffset,
|
|
174
|
+
behavior: 'smooth',
|
|
175
|
+
});
|
|
176
|
+
}
|
|
133
177
|
slide(index, sliderDispatch);
|
|
134
178
|
};
|
|
135
179
|
// accessible behavior for tablist
|
|
136
180
|
const handleBulletsKeyDown = (event) => {
|
|
181
|
+
// In RTL, arrow key directions are swapped
|
|
182
|
+
const leftKey = isRTL ? 'ArrowRight' : 'ArrowLeft';
|
|
183
|
+
const rightKey = isRTL ? 'ArrowLeft' : 'ArrowRight';
|
|
137
184
|
switch (event.key) {
|
|
138
|
-
case
|
|
185
|
+
case leftKey: {
|
|
139
186
|
isSlideCarousel && slidePrevious();
|
|
140
187
|
isScrollCarousel &&
|
|
141
188
|
onScrollPagination(sliderState.currentPage - 1, 'previous');
|
|
142
189
|
break;
|
|
143
190
|
}
|
|
144
|
-
case
|
|
191
|
+
case rightKey: {
|
|
145
192
|
isSlideCarousel && slideNext();
|
|
146
193
|
isScrollCarousel &&
|
|
147
194
|
onScrollPagination(sliderState.currentPage + 1, 'next');
|
|
@@ -164,15 +211,19 @@ function Carousel({ children, className, 'aria-label': ariaLabel, infiniteMode =
|
|
|
164
211
|
overflow: 'hidden',
|
|
165
212
|
display: isScrollCarousel ? 'block' : undefined,
|
|
166
213
|
}, ...handlers },
|
|
167
|
-
React.createElement("ul", { "aria-live": "polite", ref: carouselTrackRef, style: carouselTrackStyle, "data-fs-carousel-track": true, onScroll: onScrollTrack, onTransitionEnd: onTransitionTrackEnd }, slides.map((currentSlide, idx) => (React.createElement(CarouselItem, { id: id, index: idx, key: String(idx), state: sliderState, totalItems: childrenCount, infiniteMode: infiniteMode, isScrollCarousel: isScrollCarousel, marginRightValue: marginRight }, currentSlide))))),
|
|
214
|
+
React.createElement("ul", { "aria-live": "polite", ref: carouselTrackRef, style: carouselTrackStyle, "data-fs-carousel-track": true, dir: isRTL ? 'rtl' : 'ltr', onScroll: onScrollTrack, onTransitionEnd: onTransitionTrackEnd }, slides.map((currentSlide, idx) => (React.createElement(CarouselItem, { id: id, index: idx, key: String(idx), state: sliderState, totalItems: childrenCount, infiniteMode: infiniteMode, isScrollCarousel: isScrollCarousel, marginRightValue: marginRight }, currentSlide))))),
|
|
168
215
|
showNavigationArrows && (React.createElement("div", { "data-fs-carousel-controls": true },
|
|
169
|
-
React.createElement(IconButton, { "data-fs-carousel-control":
|
|
216
|
+
React.createElement(IconButton, { "data-fs-carousel-control": isRTL ? 'right' : 'left', "aria-controls": id, disabled: !infiniteMode && sliderState.currentPage === 0, "aria-label": "previous", icon: isRTL
|
|
217
|
+
? (navigationIcons?.right ?? (React.createElement(Icon, { name: "ArrowRight", width: 20, height: 20, weight: "bold" })))
|
|
218
|
+
: (navigationIcons?.left ?? (React.createElement(Icon, { name: "ArrowLeft", width: 20, height: 20, weight: "bold" }))), onClick: () => {
|
|
170
219
|
isSlideCarousel && slidePrevious();
|
|
171
220
|
isScrollCarousel &&
|
|
172
221
|
onScrollPagination(sliderState.currentPage - 1, 'previous');
|
|
173
222
|
} }),
|
|
174
|
-
React.createElement(IconButton, { "data-fs-carousel-control":
|
|
175
|
-
sliderState.currentPage === sliderState.totalPages - 1, "aria-label": "next", icon:
|
|
223
|
+
React.createElement(IconButton, { "data-fs-carousel-control": isRTL ? 'left' : 'right', "aria-controls": id, disabled: !infiniteMode &&
|
|
224
|
+
sliderState.currentPage === sliderState.totalPages - 1, "aria-label": "next", icon: isRTL
|
|
225
|
+
? (navigationIcons?.left ?? (React.createElement(Icon, { name: "ArrowLeft", width: 20, height: 20, weight: "bold" })))
|
|
226
|
+
: (navigationIcons?.right ?? (React.createElement(Icon, { name: "ArrowRight", width: 20, height: 20, weight: "bold" }))), onClick: () => {
|
|
176
227
|
isSlideCarousel && slideNext();
|
|
177
228
|
isScrollCarousel &&
|
|
178
229
|
onScrollPagination(sliderState.currentPage + 1, 'next');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../../../src/molecules/Carousel/Carousel.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGnE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../../../src/molecules/Carousel/Carousel.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@faststore/components",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.93.0",
|
|
4
4
|
"main": "dist/cjs/index.js",
|
|
5
5
|
"module": "dist/esm/index.js",
|
|
6
6
|
"typings": "dist/esm/index.d.ts",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"volta": {
|
|
57
57
|
"extends": "../../package.json"
|
|
58
58
|
},
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "7da9a83e5e9c3bedf4072e1aeacc3626deb8e72d"
|
|
60
60
|
}
|
package/src/hooks/index.ts
CHANGED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { useEffect, useState } from 'react'
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Hook to detect if the document is in RTL (Right-to-Left) direction.
|
|
5
|
+
* @returns true if the document direction is RTL, false otherwise
|
|
6
|
+
*/
|
|
7
|
+
export const useRTL = (): boolean => {
|
|
8
|
+
const [isRTL, setIsRTL] = useState(false)
|
|
9
|
+
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
const checkRTL = () => {
|
|
12
|
+
if (typeof window === 'undefined') {
|
|
13
|
+
return false
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const dir = document.documentElement.dir || document.body.dir || 'ltr'
|
|
17
|
+
return dir === 'rtl'
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
setIsRTL(checkRTL())
|
|
21
|
+
|
|
22
|
+
// Watch for changes in the dir attribute
|
|
23
|
+
const observer = new MutationObserver(() => {
|
|
24
|
+
setIsRTL(checkRTL())
|
|
25
|
+
})
|
|
26
|
+
|
|
27
|
+
observer.observe(document.documentElement, {
|
|
28
|
+
attributes: true,
|
|
29
|
+
attributeFilter: ['dir'],
|
|
30
|
+
})
|
|
31
|
+
|
|
32
|
+
observer.observe(document.body, {
|
|
33
|
+
attributes: true,
|
|
34
|
+
attributeFilter: ['dir'],
|
|
35
|
+
})
|
|
36
|
+
|
|
37
|
+
return () => {
|
|
38
|
+
observer.disconnect()
|
|
39
|
+
}
|
|
40
|
+
}, [])
|
|
41
|
+
|
|
42
|
+
return isRTL
|
|
43
|
+
}
|
package/src/hooks/useSlider.ts
CHANGED
|
@@ -179,6 +179,8 @@ export interface UseSliderArgs extends SwipeableProps {
|
|
|
179
179
|
infiniteMode?: boolean
|
|
180
180
|
/** Whether or not slide after swiping left/right. */
|
|
181
181
|
shouldSlideOnSwipe?: boolean
|
|
182
|
+
/** Whether the document is in RTL mode. */
|
|
183
|
+
isRTL?: boolean
|
|
182
184
|
}
|
|
183
185
|
|
|
184
186
|
export const useSlider = ({
|
|
@@ -186,6 +188,7 @@ export const useSlider = ({
|
|
|
186
188
|
itemsPerPage = 1,
|
|
187
189
|
infiniteMode = false,
|
|
188
190
|
shouldSlideOnSwipe = true,
|
|
191
|
+
isRTL = false,
|
|
189
192
|
...swipeableConfigOverrides
|
|
190
193
|
}: UseSliderArgs) => {
|
|
191
194
|
const [sliderState, sliderDispatch] = useReducer(reducer, undefined, () =>
|
|
@@ -193,9 +196,13 @@ export const useSlider = ({
|
|
|
193
196
|
)
|
|
194
197
|
|
|
195
198
|
const handlers = useSwipeable({
|
|
199
|
+
// In RTL, swipe directions are swapped:
|
|
200
|
+
// - Swiping right should go to next (instead of previous)
|
|
201
|
+
// - Swiping left should go to previous (instead of next)
|
|
196
202
|
onSwipedRight: () =>
|
|
197
|
-
shouldSlideOnSwipe && slide('previous', sliderDispatch),
|
|
198
|
-
onSwipedLeft: () =>
|
|
203
|
+
shouldSlideOnSwipe && slide(isRTL ? 'next' : 'previous', sliderDispatch),
|
|
204
|
+
onSwipedLeft: () =>
|
|
205
|
+
shouldSlideOnSwipe && slide(isRTL ? 'previous' : 'next', sliderDispatch),
|
|
199
206
|
trackMouse: true,
|
|
200
207
|
...swipeableConfigOverrides,
|
|
201
208
|
})
|
|
@@ -10,17 +10,22 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'
|
|
|
10
10
|
import type { SwipeableProps } from 'react-swipeable'
|
|
11
11
|
|
|
12
12
|
import { Icon, IconButton } from '../..'
|
|
13
|
-
import { useSlider } from '../../hooks'
|
|
13
|
+
import { useSlider, useRTL } from '../../hooks'
|
|
14
14
|
import CarouselBullets from './CarouselBullets'
|
|
15
15
|
import CarouselItem from './CarouselItem'
|
|
16
16
|
|
|
17
|
-
const createTransformValues = (
|
|
17
|
+
const createTransformValues = (
|
|
18
|
+
infinite: boolean,
|
|
19
|
+
totalItems: number,
|
|
20
|
+
isRTL: boolean
|
|
21
|
+
) => {
|
|
18
22
|
const transformMap: Record<number, number> = {}
|
|
19
23
|
const slideWidth = 100 / totalItems
|
|
20
24
|
|
|
21
25
|
for (let idx = 0; idx < totalItems; ++idx) {
|
|
22
26
|
const currIdx = infinite ? idx - 1 : idx
|
|
23
|
-
|
|
27
|
+
// In RTL, we need to invert the transform direction
|
|
28
|
+
const transformValue = isRTL ? slideWidth * idx : -(slideWidth * idx)
|
|
24
29
|
|
|
25
30
|
transformMap[currIdx] = transformValue
|
|
26
31
|
}
|
|
@@ -105,6 +110,7 @@ function Carousel({
|
|
|
105
110
|
throw new Error('itemsPerPage must be greater than or equal to 1')
|
|
106
111
|
}
|
|
107
112
|
|
|
113
|
+
const isRTL = useRTL()
|
|
108
114
|
const carouselTrackRef = useRef<HTMLUListElement>(null)
|
|
109
115
|
const isSlideCarousel = variant === 'slide'
|
|
110
116
|
const isScrollCarousel = variant === 'scroll'
|
|
@@ -120,6 +126,7 @@ function Carousel({
|
|
|
120
126
|
infiniteMode,
|
|
121
127
|
totalItems: childrenCount,
|
|
122
128
|
shouldSlideOnSwipe: isSlideCarousel,
|
|
129
|
+
isRTL,
|
|
123
130
|
...swipeableConfigOverrides,
|
|
124
131
|
})
|
|
125
132
|
|
|
@@ -149,8 +156,8 @@ function Carousel({
|
|
|
149
156
|
(controls === 'complete' || controls === 'paginationBullets')
|
|
150
157
|
|
|
151
158
|
const transformValues = useMemo(
|
|
152
|
-
() => createTransformValues(infiniteMode, numberOfSlides),
|
|
153
|
-
[numberOfSlides, infiniteMode]
|
|
159
|
+
() => createTransformValues(infiniteMode, numberOfSlides, isRTL),
|
|
160
|
+
[numberOfSlides, infiniteMode, isRTL]
|
|
154
161
|
)
|
|
155
162
|
|
|
156
163
|
const postRenderedSlides =
|
|
@@ -221,10 +228,31 @@ function Carousel({
|
|
|
221
228
|
return
|
|
222
229
|
}
|
|
223
230
|
|
|
224
|
-
const
|
|
225
|
-
const
|
|
231
|
+
const element = event.currentTarget as HTMLElement
|
|
232
|
+
const itemWidth = Number(element.firstElementChild?.scrollWidth)
|
|
233
|
+
|
|
234
|
+
// In RTL, scrollLeft behavior varies by browser
|
|
235
|
+
// We need to calculate the scroll offset differently for RTL
|
|
236
|
+
let scrollOffset = element.scrollLeft
|
|
237
|
+
|
|
238
|
+
if (isRTL) {
|
|
239
|
+
// In RTL, scrollLeft can be negative in some browsers
|
|
240
|
+
// We calculate the actual scroll position from the right
|
|
241
|
+
const maxScroll = element.scrollWidth - element.clientWidth
|
|
242
|
+
// Handle negative scrollLeft (some browsers)
|
|
243
|
+
if (scrollOffset < 0) {
|
|
244
|
+
scrollOffset = Math.abs(scrollOffset)
|
|
245
|
+
} else {
|
|
246
|
+
// For RTL, calculate from the right side
|
|
247
|
+
scrollOffset = maxScroll - scrollOffset
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
|
|
226
251
|
const formatter = scrollOffset > itemWidth / 2 ? Math.round : Math.floor
|
|
227
|
-
const page =
|
|
252
|
+
const page = Math.max(
|
|
253
|
+
0,
|
|
254
|
+
Math.min(sliderState.totalPages - 1, formatter(scrollOffset / itemWidth))
|
|
255
|
+
)
|
|
228
256
|
|
|
229
257
|
slide(page, sliderDispatch)
|
|
230
258
|
}
|
|
@@ -272,25 +300,54 @@ function Carousel({
|
|
|
272
300
|
|
|
273
301
|
const scrollOffset = index * carouselItemsWidth * itemsPerPage
|
|
274
302
|
|
|
275
|
-
carouselTrackRef.current
|
|
276
|
-
|
|
277
|
-
behavior
|
|
278
|
-
|
|
303
|
+
if (isRTL && carouselTrackRef.current) {
|
|
304
|
+
// In RTL, we need to scroll from the right
|
|
305
|
+
// The scrollLeft behavior varies by browser in RTL
|
|
306
|
+
const maxScroll =
|
|
307
|
+
carouselTrackRef.current.scrollWidth -
|
|
308
|
+
carouselTrackRef.current.clientWidth
|
|
309
|
+
const rtlScrollOffset = maxScroll - scrollOffset
|
|
310
|
+
|
|
311
|
+
// Check if scrollLeft is negative (some browsers use negative values in RTL)
|
|
312
|
+
const currentScrollLeft = carouselTrackRef.current.scrollLeft
|
|
313
|
+
if (currentScrollLeft < 0) {
|
|
314
|
+
// Use negative scroll offset for browsers that support it
|
|
315
|
+
carouselTrackRef.current.scrollTo({
|
|
316
|
+
left: -scrollOffset,
|
|
317
|
+
behavior: 'smooth',
|
|
318
|
+
})
|
|
319
|
+
} else {
|
|
320
|
+
// Use positive scroll offset from the right
|
|
321
|
+
carouselTrackRef.current.scrollTo({
|
|
322
|
+
left: rtlScrollOffset,
|
|
323
|
+
behavior: 'smooth',
|
|
324
|
+
})
|
|
325
|
+
}
|
|
326
|
+
} else {
|
|
327
|
+
carouselTrackRef.current?.scrollTo({
|
|
328
|
+
left: scrollOffset,
|
|
329
|
+
behavior: 'smooth',
|
|
330
|
+
})
|
|
331
|
+
}
|
|
279
332
|
|
|
280
333
|
slide(index, sliderDispatch)
|
|
281
334
|
}
|
|
282
335
|
|
|
283
336
|
// accessible behavior for tablist
|
|
284
337
|
const handleBulletsKeyDown = (event: KeyboardEvent) => {
|
|
338
|
+
// In RTL, arrow key directions are swapped
|
|
339
|
+
const leftKey = isRTL ? 'ArrowRight' : 'ArrowLeft'
|
|
340
|
+
const rightKey = isRTL ? 'ArrowLeft' : 'ArrowRight'
|
|
341
|
+
|
|
285
342
|
switch (event.key) {
|
|
286
|
-
case
|
|
343
|
+
case leftKey: {
|
|
287
344
|
isSlideCarousel && slidePrevious()
|
|
288
345
|
isScrollCarousel &&
|
|
289
346
|
onScrollPagination(sliderState.currentPage - 1, 'previous')
|
|
290
347
|
break
|
|
291
348
|
}
|
|
292
349
|
|
|
293
|
-
case
|
|
350
|
+
case rightKey: {
|
|
294
351
|
isSlideCarousel && slideNext()
|
|
295
352
|
isScrollCarousel &&
|
|
296
353
|
onScrollPagination(sliderState.currentPage + 1, 'next')
|
|
@@ -334,6 +391,7 @@ function Carousel({
|
|
|
334
391
|
ref={carouselTrackRef}
|
|
335
392
|
style={carouselTrackStyle}
|
|
336
393
|
data-fs-carousel-track
|
|
394
|
+
dir={isRTL ? 'rtl' : 'ltr'}
|
|
337
395
|
onScroll={onScrollTrack}
|
|
338
396
|
onTransitionEnd={onTransitionTrackEnd}
|
|
339
397
|
>
|
|
@@ -357,14 +415,28 @@ function Carousel({
|
|
|
357
415
|
{showNavigationArrows && (
|
|
358
416
|
<div data-fs-carousel-controls>
|
|
359
417
|
<IconButton
|
|
360
|
-
data-fs-carousel-control=
|
|
418
|
+
data-fs-carousel-control={isRTL ? 'right' : 'left'}
|
|
361
419
|
aria-controls={id}
|
|
362
420
|
disabled={!infiniteMode && sliderState.currentPage === 0}
|
|
363
421
|
aria-label="previous"
|
|
364
422
|
icon={
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
423
|
+
isRTL
|
|
424
|
+
? (navigationIcons?.right ?? (
|
|
425
|
+
<Icon
|
|
426
|
+
name="ArrowRight"
|
|
427
|
+
width={20}
|
|
428
|
+
height={20}
|
|
429
|
+
weight="bold"
|
|
430
|
+
/>
|
|
431
|
+
))
|
|
432
|
+
: (navigationIcons?.left ?? (
|
|
433
|
+
<Icon
|
|
434
|
+
name="ArrowLeft"
|
|
435
|
+
width={20}
|
|
436
|
+
height={20}
|
|
437
|
+
weight="bold"
|
|
438
|
+
/>
|
|
439
|
+
))
|
|
368
440
|
}
|
|
369
441
|
onClick={() => {
|
|
370
442
|
isSlideCarousel && slidePrevious()
|
|
@@ -373,7 +445,7 @@ function Carousel({
|
|
|
373
445
|
}}
|
|
374
446
|
/>
|
|
375
447
|
<IconButton
|
|
376
|
-
data-fs-carousel-control=
|
|
448
|
+
data-fs-carousel-control={isRTL ? 'left' : 'right'}
|
|
377
449
|
aria-controls={id}
|
|
378
450
|
disabled={
|
|
379
451
|
!infiniteMode &&
|
|
@@ -381,9 +453,23 @@ function Carousel({
|
|
|
381
453
|
}
|
|
382
454
|
aria-label="next"
|
|
383
455
|
icon={
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
456
|
+
isRTL
|
|
457
|
+
? (navigationIcons?.left ?? (
|
|
458
|
+
<Icon
|
|
459
|
+
name="ArrowLeft"
|
|
460
|
+
width={20}
|
|
461
|
+
height={20}
|
|
462
|
+
weight="bold"
|
|
463
|
+
/>
|
|
464
|
+
))
|
|
465
|
+
: (navigationIcons?.right ?? (
|
|
466
|
+
<Icon
|
|
467
|
+
name="ArrowRight"
|
|
468
|
+
width={20}
|
|
469
|
+
height={20}
|
|
470
|
+
weight="bold"
|
|
471
|
+
/>
|
|
472
|
+
))
|
|
387
473
|
}
|
|
388
474
|
onClick={() => {
|
|
389
475
|
isSlideCarousel && slideNext()
|