@digital-b2c/coreui-kit 0.11.0 → 0.11.1
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/index.cjs +60 -61
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.mjs +7 -8
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var clsx15 = require('clsx');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var
|
|
5
|
+
var React63 = require('react');
|
|
6
6
|
var gsap = require('gsap');
|
|
7
7
|
var react = require('@gsap/react');
|
|
8
8
|
var ScrollTrigger = require('gsap/ScrollTrigger');
|
|
@@ -13,7 +13,7 @@ require('swiper/css');
|
|
|
13
13
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
14
|
|
|
15
15
|
var clsx15__default = /*#__PURE__*/_interopDefault(clsx15);
|
|
16
|
-
var
|
|
16
|
+
var React63__default = /*#__PURE__*/_interopDefault(React63);
|
|
17
17
|
var gsap__default = /*#__PURE__*/_interopDefault(gsap);
|
|
18
18
|
|
|
19
19
|
var __defProp = Object.defineProperty;
|
|
@@ -376,7 +376,7 @@ var svgs = {
|
|
|
376
376
|
xBlack: icon_x_black_default,
|
|
377
377
|
xWhite: icon_x_white_default
|
|
378
378
|
};
|
|
379
|
-
var Icon =
|
|
379
|
+
var Icon = React63__default.default.memo(
|
|
380
380
|
(_a) => {
|
|
381
381
|
var _b = _a, { type, size } = _b, props = __objRest(_b, ["type", "size"]);
|
|
382
382
|
if (type) {
|
|
@@ -489,21 +489,21 @@ var getDeviceType = (width) => {
|
|
|
489
489
|
return "desktop";
|
|
490
490
|
};
|
|
491
491
|
var useViewPort = () => {
|
|
492
|
-
const [device, setDevice] =
|
|
492
|
+
const [device, setDevice] = React63.useState(
|
|
493
493
|
() => typeof window !== "undefined" ? getDeviceType(window.innerWidth) : "desktop"
|
|
494
494
|
);
|
|
495
|
-
const getOtherDevices =
|
|
495
|
+
const getOtherDevices = React63.useCallback(
|
|
496
496
|
(list, what, includeSelf = false) => {
|
|
497
497
|
const deviceIndex = list.indexOf(what) + (!includeSelf ? 1 : 0);
|
|
498
498
|
return [...list].slice(deviceIndex);
|
|
499
499
|
},
|
|
500
500
|
[]
|
|
501
501
|
);
|
|
502
|
-
const onWindowResize =
|
|
502
|
+
const onWindowResize = React63.useCallback(() => {
|
|
503
503
|
setDevice(getDeviceType(window.innerWidth));
|
|
504
504
|
}, []);
|
|
505
505
|
const onWindowResizeDebounce = useDebounce_default(onWindowResize, 100);
|
|
506
|
-
|
|
506
|
+
React63.useEffect(() => {
|
|
507
507
|
window.addEventListener("resize", onWindowResizeDebounce);
|
|
508
508
|
return () => window.removeEventListener("resize", onWindowResizeDebounce);
|
|
509
509
|
}, [onWindowResizeDebounce]);
|
|
@@ -556,13 +556,13 @@ var BrandsStrip = ({
|
|
|
556
556
|
cta,
|
|
557
557
|
size
|
|
558
558
|
}) => {
|
|
559
|
-
const [show, setShow] =
|
|
560
|
-
const [shouldAnimate, setShouldAnimate] =
|
|
559
|
+
const [show, setShow] = React63.useState(false);
|
|
560
|
+
const [shouldAnimate, setShouldAnimate] = React63.useState(false);
|
|
561
561
|
const { is } = useViewPort_default();
|
|
562
562
|
const isTabletBelow = is("tablet", "below");
|
|
563
|
-
const containerRef =
|
|
564
|
-
const marqueeRef =
|
|
565
|
-
const timeline =
|
|
563
|
+
const containerRef = React63.useRef(null);
|
|
564
|
+
const marqueeRef = React63.useRef(null);
|
|
565
|
+
const timeline = React63.useRef(null);
|
|
566
566
|
const horizontalLoop = (items, config) => {
|
|
567
567
|
const itemsArray = gsap__default.default.utils.toArray(items);
|
|
568
568
|
const cfg = config || {};
|
|
@@ -656,7 +656,7 @@ var BrandsStrip = ({
|
|
|
656
656
|
timeline.current.play();
|
|
657
657
|
}
|
|
658
658
|
};
|
|
659
|
-
const duplicatedLogos =
|
|
659
|
+
const duplicatedLogos = React63.useMemo(() => {
|
|
660
660
|
if (logos.length === 0) return [];
|
|
661
661
|
if (!shouldAnimate) return [...logos];
|
|
662
662
|
return [...logos, ...logos];
|
|
@@ -709,8 +709,8 @@ var CardSubtitle = ({ children }) => {
|
|
|
709
709
|
};
|
|
710
710
|
function resolveCompoundSlots(children, slots) {
|
|
711
711
|
const resolved = {};
|
|
712
|
-
|
|
713
|
-
if (!
|
|
712
|
+
React63.Children.forEach(children, (child) => {
|
|
713
|
+
if (!React63.isValidElement(child)) return;
|
|
714
714
|
Object.entries(slots).forEach(([key, Component]) => {
|
|
715
715
|
if (child.type === Component) {
|
|
716
716
|
resolved[key] = child.props.children;
|
|
@@ -724,7 +724,7 @@ function resolveCompoundSlots(children, slots) {
|
|
|
724
724
|
var Container_module_default = {
|
|
725
725
|
container: "Container_module_container"
|
|
726
726
|
};
|
|
727
|
-
var Container =
|
|
727
|
+
var Container = React63.forwardRef(
|
|
728
728
|
(_a, ref) => {
|
|
729
729
|
var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
|
|
730
730
|
return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({ ref, className: clsx15__default.default(Container_module_default.container, className) }, props), { children }));
|
|
@@ -865,11 +865,11 @@ function FilterBar({
|
|
|
865
865
|
searchValue,
|
|
866
866
|
onSearchChange
|
|
867
867
|
}) {
|
|
868
|
-
const [openDropdown, setOpenDropdown] =
|
|
869
|
-
const [searchState, setSearchState] =
|
|
870
|
-
const filterRef =
|
|
871
|
-
const sortRef =
|
|
872
|
-
const searchInputRef =
|
|
868
|
+
const [openDropdown, setOpenDropdown] = React63.useState(null);
|
|
869
|
+
const [searchState, setSearchState] = React63.useState("closed");
|
|
870
|
+
const filterRef = React63.useRef(null);
|
|
871
|
+
const sortRef = React63.useRef(null);
|
|
872
|
+
const searchInputRef = React63.useRef(null);
|
|
873
873
|
const closeSearch = () => {
|
|
874
874
|
setSearchState("closing");
|
|
875
875
|
onSearchChange("");
|
|
@@ -879,7 +879,7 @@ function FilterBar({
|
|
|
879
879
|
onSearchChange("");
|
|
880
880
|
(_a = searchInputRef.current) == null ? void 0 : _a.focus();
|
|
881
881
|
};
|
|
882
|
-
|
|
882
|
+
React63.useEffect(() => {
|
|
883
883
|
const handleMouseDown = (e) => {
|
|
884
884
|
var _a, _b;
|
|
885
885
|
const target = e.target;
|
|
@@ -889,7 +889,7 @@ function FilterBar({
|
|
|
889
889
|
document.addEventListener("mousedown", handleMouseDown);
|
|
890
890
|
return () => document.removeEventListener("mousedown", handleMouseDown);
|
|
891
891
|
}, []);
|
|
892
|
-
|
|
892
|
+
React63.useEffect(() => {
|
|
893
893
|
var _a;
|
|
894
894
|
if (searchState === "open") (_a = searchInputRef.current) == null ? void 0 : _a.focus();
|
|
895
895
|
}, [searchState]);
|
|
@@ -1133,7 +1133,7 @@ var Pagination = ({
|
|
|
1133
1133
|
disableArrows = false,
|
|
1134
1134
|
onPageChange
|
|
1135
1135
|
}) => {
|
|
1136
|
-
const [activePage, setActivePage] =
|
|
1136
|
+
const [activePage, setActivePage] = React63.useState(currentPage);
|
|
1137
1137
|
const goToPage = (page) => {
|
|
1138
1138
|
if (page < 1 || page > totalPages) return;
|
|
1139
1139
|
setActivePage(page);
|
|
@@ -1452,7 +1452,7 @@ var Badge_module_default = {
|
|
|
1452
1452
|
icon: "Badge_module_icon",
|
|
1453
1453
|
iconOnly: "Badge_module_iconOnly"
|
|
1454
1454
|
};
|
|
1455
|
-
var Badge =
|
|
1455
|
+
var Badge = React63.forwardRef(
|
|
1456
1456
|
(_a, ref) => {
|
|
1457
1457
|
var _b = _a, {
|
|
1458
1458
|
children,
|
|
@@ -1526,7 +1526,7 @@ var Input_module_default = {
|
|
|
1526
1526
|
error: "Input_module_error",
|
|
1527
1527
|
"input-field--error": "Input_module_input-field--error",
|
|
1528
1528
|
"input-field--disabled": "Input_module_input-field--disabled"};
|
|
1529
|
-
var Input =
|
|
1529
|
+
var Input = React63.forwardRef(
|
|
1530
1530
|
(_a, ref) => {
|
|
1531
1531
|
var _b = _a, {
|
|
1532
1532
|
id,
|
|
@@ -1557,7 +1557,7 @@ var Input = React62.forwardRef(
|
|
|
1557
1557
|
"hideLabel",
|
|
1558
1558
|
"type"
|
|
1559
1559
|
]);
|
|
1560
|
-
const generatedId =
|
|
1560
|
+
const generatedId = React63.useId();
|
|
1561
1561
|
const inputId = id || generatedId;
|
|
1562
1562
|
const helperTextId = `${inputId}-helper`;
|
|
1563
1563
|
const errorId = `${inputId}-error`;
|
|
@@ -1741,10 +1741,10 @@ var CardCollection = ({
|
|
|
1741
1741
|
children
|
|
1742
1742
|
}) => {
|
|
1743
1743
|
var _a, _b;
|
|
1744
|
-
const container =
|
|
1745
|
-
const revealWrapper =
|
|
1746
|
-
const extraCard =
|
|
1747
|
-
const [isExpanded, setIsExpanded] =
|
|
1744
|
+
const container = React63.useRef(null);
|
|
1745
|
+
const revealWrapper = React63.useRef(null);
|
|
1746
|
+
const extraCard = React63.useRef(null);
|
|
1747
|
+
const [isExpanded, setIsExpanded] = React63.useState(false);
|
|
1748
1748
|
const slots = resolveCompoundSlots(children, {
|
|
1749
1749
|
title: CardCollectionTitle,
|
|
1750
1750
|
subtitle: CardCollectionSubtitle
|
|
@@ -1755,7 +1755,7 @@ var CardCollection = ({
|
|
|
1755
1755
|
const visibleCards = isExamCard ? cards.slice(0, 8) : cards;
|
|
1756
1756
|
const hiddenCards = isExamCard ? cards.slice(8) : [];
|
|
1757
1757
|
const { contextSafe } = react.useGSAP({ scope: container });
|
|
1758
|
-
const handleShowMore =
|
|
1758
|
+
const handleShowMore = React63.useCallback(() => {
|
|
1759
1759
|
contextSafe(() => {
|
|
1760
1760
|
setIsExpanded(true);
|
|
1761
1761
|
const tl = gsap__default.default.timeline({ defaults: { ease: "power3.inOut" } });
|
|
@@ -1859,8 +1859,8 @@ var ContactModule = ({
|
|
|
1859
1859
|
animateBlur = true
|
|
1860
1860
|
}) => {
|
|
1861
1861
|
var _a, _b;
|
|
1862
|
-
const containerRef =
|
|
1863
|
-
const blurRef =
|
|
1862
|
+
const containerRef = React63.useRef(null);
|
|
1863
|
+
const blurRef = React63.useRef(null);
|
|
1864
1864
|
const slots = resolveCompoundSlots(children, {
|
|
1865
1865
|
title: ContactModuleTitle,
|
|
1866
1866
|
subtitle: ContactModuleSubtitle
|
|
@@ -2178,8 +2178,8 @@ var HeroBannerCarousel = ({
|
|
|
2178
2178
|
}) => {
|
|
2179
2179
|
const { is } = useViewPort_default();
|
|
2180
2180
|
const isMobile = is("tablet", "below");
|
|
2181
|
-
const [swiperInstance, setSwiperInstance] =
|
|
2182
|
-
const [activeIndex, setActiveIndex] =
|
|
2181
|
+
const [swiperInstance, setSwiperInstance] = React63.useState(null);
|
|
2182
|
+
const [activeIndex, setActiveIndex] = React63.useState(0);
|
|
2183
2183
|
if (!items.length) return null;
|
|
2184
2184
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx15__default.default(HeroBannerCarousel_module_default.heroBannerCarousel, className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: HeroBannerCarousel_module_default.inner, children: [
|
|
2185
2185
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: HeroBannerCarousel_module_default.swiperContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -2268,16 +2268,16 @@ var AccordionItem = ({
|
|
|
2268
2268
|
onToggle,
|
|
2269
2269
|
className
|
|
2270
2270
|
}) => {
|
|
2271
|
-
const contentRef =
|
|
2272
|
-
const contentInnerRef =
|
|
2273
|
-
const timelineRef =
|
|
2274
|
-
const [contentHeight, setContentHeight] =
|
|
2275
|
-
|
|
2271
|
+
const contentRef = React63.useRef(null);
|
|
2272
|
+
const contentInnerRef = React63.useRef(null);
|
|
2273
|
+
const timelineRef = React63.useRef(null);
|
|
2274
|
+
const [contentHeight, setContentHeight] = React63.useState(0);
|
|
2275
|
+
React63.useEffect(() => {
|
|
2276
2276
|
if (contentInnerRef.current) {
|
|
2277
2277
|
setContentHeight(contentInnerRef.current.scrollHeight);
|
|
2278
2278
|
}
|
|
2279
2279
|
}, [children]);
|
|
2280
|
-
|
|
2280
|
+
React63.useEffect(() => {
|
|
2281
2281
|
if (contentRef.current && contentHeight > 0) {
|
|
2282
2282
|
if (timelineRef.current) {
|
|
2283
2283
|
timelineRef.current.kill();
|
|
@@ -2362,7 +2362,7 @@ var Accordion = ({
|
|
|
2362
2362
|
allowMultiple = false,
|
|
2363
2363
|
onItemToggle
|
|
2364
2364
|
}) => {
|
|
2365
|
-
const [openIds, setOpenIds] =
|
|
2365
|
+
const [openIds, setOpenIds] = React63.useState(defaultOpenIds);
|
|
2366
2366
|
const handleToggle = (id) => {
|
|
2367
2367
|
setOpenIds((prev) => {
|
|
2368
2368
|
let newOpenIds;
|
|
@@ -2423,10 +2423,10 @@ var InternalBrandsTab_module_default = {
|
|
|
2423
2423
|
var InternalBrandsTab = (props) => {
|
|
2424
2424
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A;
|
|
2425
2425
|
const { title, subTitle, className, tabs } = props;
|
|
2426
|
-
const [activeIndex, setActiveIndex] =
|
|
2426
|
+
const [activeIndex, setActiveIndex] = React63.useState(0);
|
|
2427
2427
|
const { is } = useViewPort_default();
|
|
2428
2428
|
const isTabletBelow = is("tablet", "below");
|
|
2429
|
-
const accordionItems =
|
|
2429
|
+
const accordionItems = React63.useMemo(() => {
|
|
2430
2430
|
return (tabs == null ? void 0 : tabs.map((tab, index) => {
|
|
2431
2431
|
var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2;
|
|
2432
2432
|
return {
|
|
@@ -3209,13 +3209,13 @@ var ResourcesGridList = ({
|
|
|
3209
3209
|
defaultSort = "latest"
|
|
3210
3210
|
}) => {
|
|
3211
3211
|
var _a;
|
|
3212
|
-
const [view, setView] =
|
|
3213
|
-
const [isSidebarOpen, setIsSidebarOpen] =
|
|
3214
|
-
const [filterValue, setFilterValue] =
|
|
3215
|
-
const [sortValue, setSortValue] =
|
|
3216
|
-
const [searchQuery, setSearchQuery] =
|
|
3217
|
-
const [currentPage, setCurrentPage] =
|
|
3218
|
-
const [selectedCategory, setSelectedCategory] =
|
|
3212
|
+
const [view, setView] = React63.useState(defaultView);
|
|
3213
|
+
const [isSidebarOpen, setIsSidebarOpen] = React63.useState(false);
|
|
3214
|
+
const [filterValue, setFilterValue] = React63.useState(defaultFilter);
|
|
3215
|
+
const [sortValue, setSortValue] = React63.useState(defaultSort);
|
|
3216
|
+
const [searchQuery, setSearchQuery] = React63.useState("");
|
|
3217
|
+
const [currentPage, setCurrentPage] = React63.useState(1);
|
|
3218
|
+
const [selectedCategory, setSelectedCategory] = React63.useState(() => {
|
|
3219
3219
|
const activeIndex = categories.findIndex((cat) => cat.active);
|
|
3220
3220
|
return activeIndex === -1 ? 0 : activeIndex;
|
|
3221
3221
|
});
|
|
@@ -3760,6 +3760,7 @@ var BlogSearchResultsList = ({
|
|
|
3760
3760
|
onSearchSubmit,
|
|
3761
3761
|
searchValue,
|
|
3762
3762
|
className,
|
|
3763
|
+
renderLink,
|
|
3763
3764
|
children
|
|
3764
3765
|
}) => {
|
|
3765
3766
|
var _a;
|
|
@@ -3768,11 +3769,9 @@ var BlogSearchResultsList = ({
|
|
|
3768
3769
|
});
|
|
3769
3770
|
const searchNode = (_a = slots.search) != null ? _a : searchResult;
|
|
3770
3771
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx15__default.default("search-results-list", BlogSearchResultsList_module_default["search-results-list"], className), children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: clsx15__default.default("container", BlogSearchResultsList_module_default["container"]), children: [
|
|
3771
|
-
|
|
3772
|
-
|
|
3773
|
-
|
|
3774
|
-
'":'
|
|
3775
|
-
] }) : searchNode,
|
|
3772
|
+
typeof searchNode === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx15__default.default("search-result", BlogSearchResultsList_module_default["search-result"]), children: searchNode }) : React63__default.default.isValidElement(searchNode) ? React63__default.default.cloneElement(searchNode, {
|
|
3773
|
+
className: clsx15__default.default("search-result", BlogSearchResultsList_module_default["search-result"])
|
|
3774
|
+
}) : null,
|
|
3776
3775
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx15__default.default("wrapper", BlogSearchResultsList_module_default["wrapper"]), children: [
|
|
3777
3776
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3778
3777
|
Input,
|
|
@@ -3796,7 +3795,7 @@ var BlogSearchResultsList = ({
|
|
|
3796
3795
|
}
|
|
3797
3796
|
}
|
|
3798
3797
|
),
|
|
3799
|
-
/* @__PURE__ */ jsxRuntime.jsx(BlogCardGrid2, { items, hasContainer: false })
|
|
3798
|
+
/* @__PURE__ */ jsxRuntime.jsx(BlogCardGrid2, { items, hasContainer: false, renderLink })
|
|
3800
3799
|
] })
|
|
3801
3800
|
] }) });
|
|
3802
3801
|
};
|
|
@@ -3809,13 +3808,13 @@ function useIntersectionObserver({
|
|
|
3809
3808
|
animateOnce = false,
|
|
3810
3809
|
options = {}
|
|
3811
3810
|
} = {}) {
|
|
3812
|
-
const observeRef =
|
|
3813
|
-
const [isVisible, setIsVisible] =
|
|
3811
|
+
const observeRef = React63.useRef(null);
|
|
3812
|
+
const [isVisible, setIsVisible] = React63.useState(false);
|
|
3814
3813
|
if (typeof IntersectionObserver === "undefined") {
|
|
3815
3814
|
console.warn("IntersectionObserver is not supported in this browser.");
|
|
3816
3815
|
return { observeRef, isVisible: true };
|
|
3817
3816
|
}
|
|
3818
|
-
|
|
3817
|
+
React63.useEffect(() => {
|
|
3819
3818
|
const currentRef = observeRef.current;
|
|
3820
3819
|
if (!currentRef) return;
|
|
3821
3820
|
const observer = new IntersectionObserver((entries) => {
|