kelt-ui-kit-react 2.0.5 → 2.0.6

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/index.js +1513 -1513
  2. package/package.json +1 -1
  3. package/src/expands/expand/expand.tsx +191 -186
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "kelt-ui-kit-react",
3
3
  "type": "module",
4
- "version": "2.0.5",
4
+ "version": "2.0.6",
5
5
  "private": false,
6
6
  "main": "dist/index.js",
7
7
  "types": "dist/index.d.ts",
package/src/expands/expand/expand.tsx CHANGED
@@ -1,186 +1,191 @@
1
- import { useCallback, useEffect, useRef, useState } from "react";
2
- import { Icon } from "../../icon/Icon";
3
- import { ExpandInterface } from "./expand.interface";
4
-
5
- export type ExpandProps = {
6
- currentExpand?: ExpandInterface;
7
- item: ExpandInterface;
8
- className?: string;
9
- showArrow?: boolean;
10
- catchfocusCapture?: boolean
11
- catchFocusCaptureId?: number;
12
- onChange: (item: ExpandInterface) => void;
13
- };
14
- export const Expand = ({
15
- currentExpand,
16
- item,
17
- className,
18
- showArrow = true,
19
- catchfocusCapture = false,
20
- catchFocusCaptureId,
21
- onChange,
22
- }: ExpandProps): JSX.Element => {
23
- const [active, setActive] = useState<boolean>(false);
24
- const expandRef = useRef<HTMLDivElement>(null);
25
-
26
- useEffect(() => {
27
- if (item && currentExpand) {
28
- if (currentExpand.id === item.id) {
29
- if (!active) {
30
- setActive(true);
31
- }
32
- } else {
33
- setActive(false);
34
- }
35
- } else {
36
- setActive(false);
37
- }
38
- }, [currentExpand, setActive, item, active]);
39
-
40
- const scrollToHeader = useCallback(() => {
41
- const expandElement = expandRef.current;
42
- if (!expandElement) return;
43
-
44
- let scrollParent: HTMLElement | null = expandElement.parentElement;
45
- while (scrollParent) {
46
- const style = window.getComputedStyle(scrollParent);
47
- const isScrollable =
48
- /(auto|scroll)/.test(style.overflow + style.overflowY) &&
49
- scrollParent.scrollHeight > scrollParent.clientHeight;
50
-
51
- if (isScrollable) {
52
- const parentRect = scrollParent.getBoundingClientRect();
53
- const targetRect = expandElement.getBoundingClientRect();
54
- const offsetTop =
55
- targetRect.top - parentRect.top + scrollParent.scrollTop;
56
-
57
- scrollParent.scrollTo({
58
- top: offsetTop,
59
- behavior: "smooth",
60
- });
61
- return;
62
- }
63
- scrollParent = scrollParent.parentElement;
64
- }
65
-
66
- const header =
67
- expandElement.querySelector<HTMLElement>(".expand-header") ||
68
- expandElement;
69
- header.scrollIntoView({ behavior: "smooth", block: "start" });
70
- }, []);
71
-
72
- useEffect(() => {
73
- if (!catchfocusCapture || catchFocusCaptureId && catchFocusCaptureId !== currentExpand?.id) return;
74
- if (active) {
75
- const timer1 = setTimeout(() => {
76
- scrollToHeader();
77
- }, 100);
78
- const timer2 = setTimeout(() => {
79
- scrollToHeader();
80
- }, 350);
81
- return () => {
82
- clearTimeout(timer1);
83
- clearTimeout(timer2);
84
- };
85
- }
86
- }, [active, scrollToHeader, catchfocusCapture, catchFocusCaptureId]);
87
-
88
- const handleFocusCapture = useCallback(
89
- (e: React.FocusEvent<HTMLDivElement>) => {
90
- if (!catchfocusCapture || catchFocusCaptureId && catchFocusCaptureId !== currentExpand?.id) return;
91
- const target = e.target as HTMLElement;
92
- if (
93
- active &&
94
- (target.tagName === "INPUT" ||
95
- target.tagName === "TEXTAREA" ||
96
- target.tagName === "SELECT")
97
- ) {
98
- const expandElement = expandRef.current;
99
- if (!expandElement) return;
100
-
101
- const performScroll = () => {
102
- let scrollParent: HTMLElement | null = expandElement.parentElement;
103
- while (scrollParent) {
104
- const style = window.getComputedStyle(scrollParent);
105
- const isScrollable =
106
- /(auto|scroll)/.test(style.overflow + style.overflowY) &&
107
- scrollParent.scrollHeight > scrollParent.clientHeight;
108
-
109
- if (isScrollable) {
110
- const parentRect = scrollParent.getBoundingClientRect();
111
- const headerRect = expandElement.getBoundingClientRect();
112
- const headerOffsetTop =
113
- headerRect.top - parentRect.top + scrollParent.scrollTop;
114
-
115
- // Si on a déjà scrollé vers ou au-delà du header, on ne remonte JAMAIS au header
116
- if (scrollParent.scrollTop >= headerOffsetTop - 10) {
117
- const targetRect = target.getBoundingClientRect();
118
- if (targetRect.bottom > parentRect.bottom) {
119
- target.scrollIntoView({ behavior: "smooth", block: "nearest" });
120
- }
121
- return;
122
- }
123
-
124
- // Si on n'a pas encore scrollé jusqu'au header, on y va
125
- scrollParent.scrollTo({
126
- top: headerOffsetTop,
127
- behavior: "smooth",
128
- });
129
- return;
130
- }
131
- scrollParent = scrollParent.parentElement;
132
- }
133
- };
134
-
135
- performScroll();
136
- // Répéter après l'ouverture du clavier virtuel (spécifique tablettes / mobiles Android)
137
- setTimeout(performScroll, 300);
138
- }
139
- },
140
- [active, catchfocusCapture, catchFocusCaptureId],
141
- );
142
-
143
- const handleChange = useCallback(
144
- (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
145
- e.stopPropagation();
146
- if (onChange) {
147
- onChange(item);
148
- }
149
- },
150
- [onChange, item],
151
- );
152
- return (
153
- <div
154
- ref={expandRef}
155
- onClick={handleChange}
156
- onFocusCapture={handleFocusCapture}
157
- className={`expand ${active ? "expand--active" : ""} ${className ?? ""}`}
158
- >
159
- <div className={`expand-header`}>
160
- <div className="expand-header-content">
161
- <div className="expand-header-content-default">
162
- {active && showArrow && (
163
- <Icon classIcon="bi bi-chevron-down mr-2"></Icon>
164
- )}
165
- {!active && showArrow && (
166
- <Icon classIcon="bi bi-chevron-right mr-2"></Icon>
167
- )}
168
- <span className="flex-1 expand-header-title-left">
169
- {item.title}
170
- </span>
171
- {item.description && (
172
- <span className="expand-header-title-right">
173
- {item.description}
174
- </span>
175
- )}
176
- </div>
177
- </div>
178
- </div>
179
- <div className="expand-body">
180
- <div>{item.headerContent}</div>
181
- {item.content}
182
- </div>
183
- {item.footer && <div className="expand-footer">{item.footer}</div>}
184
- </div>
185
- );
186
- };
1
+ import { useCallback, useEffect, useRef, useState } from "react";
2
+ import { Icon } from "../../icon/Icon";
3
+ import { ExpandInterface } from "./expand.interface";
4
+
5
+ export type ExpandProps = {
6
+ currentExpand?: ExpandInterface;
7
+ item: ExpandInterface;
8
+ className?: string;
9
+ showArrow?: boolean;
10
+ catchfocusCapture?: boolean
11
+ catchFocusCaptureId?: number;
12
+ onChange: (item: ExpandInterface) => void;
13
+ };
14
+ export const Expand = ({
15
+ currentExpand,
16
+ item,
17
+ className,
18
+ showArrow = true,
19
+ catchfocusCapture = false,
20
+ catchFocusCaptureId,
21
+ onChange,
22
+ }: ExpandProps): JSX.Element => {
23
+ const [active, setActive] = useState<boolean>(false);
24
+ const expandRef = useRef<HTMLDivElement>(null);
25
+
26
+ useEffect(() => {
27
+ if (item && currentExpand) {
28
+ if (currentExpand.id === item.id) {
29
+ if (!active) {
30
+ setActive(true);
31
+ }
32
+ } else {
33
+ setActive(false);
34
+ }
35
+ } else {
36
+ setActive(false);
37
+ }
38
+ }, [currentExpand, setActive, item, active]);
39
+
40
+ // Si catchFocusCaptureId est fourni, seul l'expand portant cet id gère le focus / scroll
41
+ const canCatchFocus =
42
+ catchfocusCapture &&
43
+ (catchFocusCaptureId === undefined || catchFocusCaptureId === item.id);
44
+
45
+ const scrollToHeader = useCallback(() => {
46
+ const expandElement = expandRef.current;
47
+ if (!expandElement) return;
48
+
49
+ let scrollParent: HTMLElement | null = expandElement.parentElement;
50
+ while (scrollParent) {
51
+ const style = window.getComputedStyle(scrollParent);
52
+ const isScrollable =
53
+ /(auto|scroll)/.test(style.overflow + style.overflowY) &&
54
+ scrollParent.scrollHeight > scrollParent.clientHeight;
55
+
56
+ if (isScrollable) {
57
+ const parentRect = scrollParent.getBoundingClientRect();
58
+ const targetRect = expandElement.getBoundingClientRect();
59
+ const offsetTop =
60
+ targetRect.top - parentRect.top + scrollParent.scrollTop;
61
+
62
+ scrollParent.scrollTo({
63
+ top: offsetTop,
64
+ behavior: "smooth",
65
+ });
66
+ return;
67
+ }
68
+ scrollParent = scrollParent.parentElement;
69
+ }
70
+
71
+ const header =
72
+ expandElement.querySelector<HTMLElement>(".expand-header") ||
73
+ expandElement;
74
+ header.scrollIntoView({ behavior: "smooth", block: "start" });
75
+ }, []);
76
+
77
+ useEffect(() => {
78
+ if (!canCatchFocus) return;
79
+ if (active) {
80
+ const timer1 = setTimeout(() => {
81
+ scrollToHeader();
82
+ }, 100);
83
+ const timer2 = setTimeout(() => {
84
+ scrollToHeader();
85
+ }, 350);
86
+ return () => {
87
+ clearTimeout(timer1);
88
+ clearTimeout(timer2);
89
+ };
90
+ }
91
+ }, [active, scrollToHeader, canCatchFocus]);
92
+
93
+ const handleFocusCapture = useCallback(
94
+ (e: React.FocusEvent<HTMLDivElement>) => {
95
+ if (!canCatchFocus) return;
96
+ const target = e.target as HTMLElement;
97
+ if (
98
+ active &&
99
+ (target.tagName === "INPUT" ||
100
+ target.tagName === "TEXTAREA" ||
101
+ target.tagName === "SELECT")
102
+ ) {
103
+ const expandElement = expandRef.current;
104
+ if (!expandElement) return;
105
+
106
+ const performScroll = () => {
107
+ let scrollParent: HTMLElement | null = expandElement.parentElement;
108
+ while (scrollParent) {
109
+ const style = window.getComputedStyle(scrollParent);
110
+ const isScrollable =
111
+ /(auto|scroll)/.test(style.overflow + style.overflowY) &&
112
+ scrollParent.scrollHeight > scrollParent.clientHeight;
113
+
114
+ if (isScrollable) {
115
+ const parentRect = scrollParent.getBoundingClientRect();
116
+ const headerRect = expandElement.getBoundingClientRect();
117
+ const headerOffsetTop =
118
+ headerRect.top - parentRect.top + scrollParent.scrollTop;
119
+
120
+ // Si on a déjà scrollé vers ou au-delà du header, on ne remonte JAMAIS au header
121
+ if (scrollParent.scrollTop >= headerOffsetTop - 10) {
122
+ const targetRect = target.getBoundingClientRect();
123
+ if (targetRect.bottom > parentRect.bottom) {
124
+ target.scrollIntoView({ behavior: "smooth", block: "nearest" });
125
+ }
126
+ return;
127
+ }
128
+
129
+ // Si on n'a pas encore scrollé jusqu'au header, on y va
130
+ scrollParent.scrollTo({
131
+ top: headerOffsetTop,
132
+ behavior: "smooth",
133
+ });
134
+ return;
135
+ }
136
+ scrollParent = scrollParent.parentElement;
137
+ }
138
+ };
139
+
140
+ performScroll();
141
+ // Répéter après l'ouverture du clavier virtuel (spécifique tablettes / mobiles Android)
142
+ setTimeout(performScroll, 300);
143
+ }
144
+ },
145
+ [active, canCatchFocus],
146
+ );
147
+
148
+ const handleChange = useCallback(
149
+ (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
150
+ e.stopPropagation();
151
+ if (onChange) {
152
+ onChange(item);
153
+ }
154
+ },
155
+ [onChange, item],
156
+ );
157
+ return (
158
+ <div
159
+ ref={expandRef}
160
+ onClick={handleChange}
161
+ onFocusCapture={handleFocusCapture}
162
+ className={`expand ${active ? "expand--active" : ""} ${className ?? ""}`}
163
+ >
164
+ <div className={`expand-header`}>
165
+ <div className="expand-header-content">
166
+ <div className="expand-header-content-default">
167
+ {active && showArrow && (
168
+ <Icon classIcon="bi bi-chevron-down mr-2"></Icon>
169
+ )}
170
+ {!active && showArrow && (
171
+ <Icon classIcon="bi bi-chevron-right mr-2"></Icon>
172
+ )}
173
+ <span className="flex-1 expand-header-title-left">
174
+ {item.title}
175
+ </span>
176
+ {item.description && (
177
+ <span className="expand-header-title-right">
178
+ {item.description}
179
+ </span>
180
+ )}
181
+ </div>
182
+ </div>
183
+ </div>
184
+ <div className="expand-body">
185
+ <div>{item.headerContent}</div>
186
+ {item.content}
187
+ </div>
188
+ {item.footer && <div className="expand-footer">{item.footer}</div>}
189
+ </div>
190
+ );
191
+ };