@cfx-dev/ui-components 5.0.31 → 5.0.32

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.
Files changed (3) hide show
  1. package/dist/components/Carousel/Carousel.d.ts +2 -1
  2. package/dist/components/Carousel/Carousel.js +62 -58
  3. package/package.json +1 -1
package/dist/components/Carousel/Carousel.d.ts CHANGED
@@ -10,6 +10,7 @@ export interface CarouselProps {
10
10
  showControlsTop?: boolean;
11
11
  skipFirstItem?: boolean;
12
12
  controlsClassName?: string;
13
+ controlsRootClassName?: string;
13
14
  text?: string;
14
15
  showDots?: boolean;
15
16
  trackClassName?: string;
@@ -19,6 +20,6 @@ export interface CarouselProps {
19
20
  currentPage?: number;
20
21
  onPageChange?: (page: number) => void;
21
22
  }
22
- declare function Carousel({ items, ImageComponent, visibleItems, onItemClick, showControlsBottom, showControlsTop, skipFirstItem, controlsClassName, text, showDots, trackClassName, className, rootClassName, headerClassName, currentPage: controlledCurrentPage, onPageChange, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
23
+ declare function Carousel({ items, ImageComponent, visibleItems, onItemClick, showControlsBottom, showControlsTop, skipFirstItem, controlsClassName, controlsRootClassName, text, showDots, trackClassName, className, rootClassName, headerClassName, currentPage: controlledCurrentPage, onPageChange, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
23
24
  declare const _default: React.MemoExoticComponent<typeof Carousel>;
24
25
  export default _default;
package/dist/components/Carousel/Carousel.js CHANGED
@@ -1,24 +1,25 @@
1
- import { jsxs as p, jsx as s } from "react/jsx-runtime";
2
- import G, { useMemo as H, useState as J, useCallback as B, useEffect as K } from "react";
3
- import { Dot as L } from "../Dot/Dot.js";
1
+ import { jsxs as N, jsx as s } from "react/jsx-runtime";
2
+ import H, { useMemo as J, useState as K, useCallback as Q, useEffect as L } from "react";
3
+ import { Dot as O } from "../Dot/Dot.js";
4
4
  import u from "../Flex/Flex.js";
5
- import { clsx as E } from "../../utils/clsx.js";
5
+ import { clsx as h } from "../../utils/clsx.js";
6
6
  import "../../utils/contexts/MediaQueryContext/MediaQueryContext.js";
7
7
  import "../../utils/contexts/MediaQueryContext/MediaQueryContextProvider.js";
8
- import O from "../../utils/contexts/MediaQueryContext/useMediaQuery.js";
9
- import { useCarousel as U } from "../../utils/hooks/useCarousel.js";
10
- import { s as i, C as W } from "../../CarouselControls-CJ3tupLr.js";
11
- import X from "./CarouselItem.js";
12
- function F({
8
+ import U from "../../utils/contexts/MediaQueryContext/useMediaQuery.js";
9
+ import { useCarousel as W } from "../../utils/hooks/useCarousel.js";
10
+ import { s as i, C as X } from "../../CarouselControls-CJ3tupLr.js";
11
+ import Y from "./CarouselItem.js";
12
+ function R({
13
13
  showDots: n = !1,
14
14
  pageCount: a,
15
15
  currentPage: t,
16
16
  onPageChange: o,
17
- controlsClassName: m
17
+ controlsClassName: m,
18
+ controlsRootClassName: d
18
19
  }) {
19
- return a <= 1 ? null : /* @__PURE__ */ p(u, { gap: 2, centered: !0, className: i.controls, children: [
20
- n && /* @__PURE__ */ s(u, { centered: !0, gap: 1, children: Array.from({ length: a }).map((y, c) => /* @__PURE__ */ s(
21
- L,
20
+ return a <= 1 ? null : /* @__PURE__ */ N(u, { gap: 2, centered: !0, className: h(i.controls, d), children: [
21
+ n && /* @__PURE__ */ s(u, { centered: !0, gap: 1, children: Array.from({ length: a }).map((p, c) => /* @__PURE__ */ s(
22
+ O,
22
23
  {
23
24
  className: i.dots,
24
25
  color: c === t ? "primary" : "secondary",
@@ -27,7 +28,7 @@ function F({
27
28
  c
28
29
  )) }),
29
30
  /* @__PURE__ */ s(
30
- W,
31
+ X,
31
32
  {
32
33
  currentPage: t,
33
34
  pageCount: a,
@@ -37,89 +38,92 @@ function F({
37
38
  )
38
39
  ] });
39
40
  }
40
- function Y({
41
+ function Z({
41
42
  items: n,
42
43
  ImageComponent: a,
43
44
  visibleItems: t = 4,
44
45
  onItemClick: o,
45
46
  showControlsBottom: m = !1,
46
- showControlsTop: y = !1,
47
- skipFirstItem: c = !1,
48
- controlsClassName: N,
49
- text: h,
50
- showDots: S = !1,
51
- trackClassName: Q,
52
- className: V,
53
- rootClassName: $,
54
- headerClassName: q,
55
- currentPage: d,
47
+ showControlsTop: d = !1,
48
+ skipFirstItem: p = !1,
49
+ controlsClassName: c,
50
+ controlsRootClassName: S,
51
+ text: x,
52
+ showDots: M = !1,
53
+ trackClassName: V,
54
+ className: $,
55
+ rootClassName: q,
56
+ headerClassName: w,
57
+ currentPage: y,
56
58
  onPageChange: l
57
59
  }) {
58
60
  const {
59
- isMobile: x,
60
- isTablet: M
61
- } = O(), T = H(() => typeof t == "number" ? t : x ? t.mobile : M ? t.tablet : t.desktop, [t, x, M]), w = c ? n.slice(1) : n, j = Math.ceil(w.length / T), {
62
- carouselRef: z,
61
+ isMobile: T,
62
+ isTablet: j
63
+ } = U(), _ = J(() => typeof t == "number" ? t : T ? t.mobile : j ? t.tablet : t.desktop, [t, T, j]), z = p ? n.slice(1) : n, b = Math.ceil(z.length / _), {
64
+ carouselRef: A,
63
65
  carouselApi: e
64
- } = U({
65
- slidesToScroll: T
66
- }), [A, _] = J(0), b = d ?? A, R = B(
66
+ } = W({
67
+ slidesToScroll: _
68
+ }), [D, B] = K(0), E = y ?? D, F = Q(
67
69
  (r) => {
68
- e == null || e.scrollTo(r), l == null || l(r), d == null && _(r);
70
+ e == null || e.scrollTo(r), l == null || l(r), y == null && B(r);
69
71
  },
70
- [e, l, d]
71
- ), D = B(
72
+ [e, l, y]
73
+ ), G = Q(
72
74
  (r) => {
73
75
  o == null || o(r);
74
76
  },
75
77
  [o]
76
78
  );
77
- return K(() => {
79
+ return L(() => {
78
80
  if (!e)
79
81
  return;
80
82
  const r = () => {
81
83
  const f = e.selectedScrollSnap();
82
- _(f), l == null || l(f);
84
+ B(f), l == null || l(f);
83
85
  };
84
86
  return e.on("select", r), e.on("reInit", r), () => {
85
87
  e.off("select", r), e.off("reInit", r);
86
88
  };
87
- }, [e, l]), /* @__PURE__ */ p("div", { className: $, children: [
88
- h && /* @__PURE__ */ p(u, { spaceBetween: !0, alignItems: "center", className: q, children: [
89
- /* @__PURE__ */ s("span", { children: h }),
90
- y && /* @__PURE__ */ s(
91
- F,
89
+ }, [e, l]), /* @__PURE__ */ N("div", { className: q, children: [
90
+ x && /* @__PURE__ */ N(u, { spaceBetween: !0, alignItems: "center", className: w, children: [
91
+ /* @__PURE__ */ s("span", { children: x }),
92
+ d && /* @__PURE__ */ s(
93
+ R,
92
94
  {
93
- showDots: S,
94
- pageCount: j,
95
- currentPage: b,
96
- onPageChange: R,
97
- controlsClassName: N
95
+ showDots: M,
96
+ pageCount: b,
97
+ currentPage: E,
98
+ onPageChange: F,
99
+ controlsClassName: c,
100
+ controlsRootClassName: S
98
101
  }
99
102
  )
100
103
  ] }),
101
- /* @__PURE__ */ s("div", { className: E(i.carousel, V), ref: z, children: /* @__PURE__ */ s(u, { className: E(i.carouselTrack, Q), gap: 1, children: n.map((r, f) => f === 0 && c ? null : /* @__PURE__ */ s("div", { className: i.carouselItem, children: /* @__PURE__ */ s(
102
- X,
104
+ /* @__PURE__ */ s("div", { className: h(i.carousel, $), ref: A, children: /* @__PURE__ */ s(u, { className: h(i.carouselTrack, V), gap: 1, children: n.map((r, f) => f === 0 && p ? null : /* @__PURE__ */ s("div", { className: i.carouselItem, children: /* @__PURE__ */ s(
105
+ Y,
103
106
  {
104
107
  index: f,
105
108
  item: r,
106
- onClick: D,
109
+ onClick: G,
107
110
  ImageComponent: a
108
111
  }
109
112
  ) }, r.id)) }) }),
110
113
  m && /* @__PURE__ */ s(u, { justifyContent: "flex-end", children: /* @__PURE__ */ s(
111
- F,
114
+ R,
112
115
  {
113
- showDots: S,
114
- pageCount: j,
115
- currentPage: b,
116
- onPageChange: R,
117
- controlsClassName: N
116
+ showDots: M,
117
+ pageCount: b,
118
+ currentPage: E,
119
+ onPageChange: F,
120
+ controlsClassName: c,
121
+ controlsRootClassName: S
118
122
  }
119
123
  ) })
120
124
  ] });
121
125
  }
122
- const lr = G.memo(Y);
126
+ const or = H.memo(Z);
123
127
  export {
124
- lr as default
128
+ or as default
125
129
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cfx-dev/ui-components",
3
- "version": "5.0.31",
3
+ "version": "5.0.32",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "main": "dist/main.js",