@dmsi/wedgekit-react 0.0.761 → 0.0.763
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.
|
@@ -479,7 +479,8 @@ var ContentTabs = ({
|
|
|
479
479
|
id,
|
|
480
480
|
testid,
|
|
481
481
|
selectedTab,
|
|
482
|
-
contentPadding = true
|
|
482
|
+
contentPadding = true,
|
|
483
|
+
disabledWithColor
|
|
483
484
|
}) => {
|
|
484
485
|
var _a, _b;
|
|
485
486
|
const [selectedTabId, setSelectedTabId] = (0, import_react2.useState)(((_a = tabs[0]) == null ? void 0 : _a.id) || "");
|
|
@@ -487,35 +488,40 @@ var ContentTabs = ({
|
|
|
487
488
|
const tabRefs = (0, import_react2.useRef)([]);
|
|
488
489
|
const handleTabClick = (0, import_react2.useCallback)(
|
|
489
490
|
(id2, index) => {
|
|
491
|
+
if (disabledWithColor) return;
|
|
490
492
|
setSelectedTabId(id2);
|
|
491
493
|
setFocusedTabIndex(index);
|
|
492
494
|
onTabChange == null ? void 0 : onTabChange(id2);
|
|
493
495
|
},
|
|
494
|
-
[onTabChange]
|
|
496
|
+
[disabledWithColor, onTabChange]
|
|
495
497
|
);
|
|
496
498
|
(0, import_react2.useEffect)(() => {
|
|
497
499
|
if (selectedTab) {
|
|
498
500
|
handleTabClick(selectedTab.id, selectedTab.index);
|
|
499
501
|
}
|
|
500
502
|
}, [selectedTab, handleTabClick]);
|
|
501
|
-
const handleKeyDown = (
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
503
|
+
const handleKeyDown = (0, import_react2.useCallback)(
|
|
504
|
+
(e) => {
|
|
505
|
+
var _a2;
|
|
506
|
+
if (disabledWithColor) return;
|
|
507
|
+
let newIndex = focusedTabIndex;
|
|
508
|
+
if (e.key === "ArrowRight") {
|
|
509
|
+
e.preventDefault();
|
|
510
|
+
newIndex = (focusedTabIndex + 1) % tabs.length;
|
|
511
|
+
} else if (e.key === "ArrowLeft") {
|
|
512
|
+
e.preventDefault();
|
|
513
|
+
newIndex = (focusedTabIndex - 1 + tabs.length) % tabs.length;
|
|
514
|
+
} else {
|
|
515
|
+
return;
|
|
516
|
+
}
|
|
517
|
+
const tabId = tabs[newIndex].id;
|
|
518
|
+
setSelectedTabId(tabId);
|
|
519
|
+
onTabChange == null ? void 0 : onTabChange(tabId);
|
|
520
|
+
(_a2 = tabRefs.current[newIndex]) == null ? void 0 : _a2.focus();
|
|
521
|
+
setFocusedTabIndex(newIndex);
|
|
522
|
+
},
|
|
523
|
+
[disabledWithColor, focusedTabIndex, onTabChange, tabs]
|
|
524
|
+
);
|
|
519
525
|
const selectedContent = (_b = tabs.find((tab) => tab.id === selectedTabId)) == null ? void 0 : _b.content;
|
|
520
526
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { id, "data-testid": testid, children: [
|
|
521
527
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_clsx4.default)("overflow-x-auto", contentPadding && "pb-2"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
@@ -540,6 +546,7 @@ var ContentTabs = ({
|
|
|
540
546
|
selected: isSelected,
|
|
541
547
|
onClick: () => handleTabClick(tab.id, index),
|
|
542
548
|
onFocus: () => {
|
|
549
|
+
if (disabledWithColor) return;
|
|
543
550
|
setSelectedTabId(tab.id);
|
|
544
551
|
setFocusedTabIndex(index);
|
|
545
552
|
onTabChange == null ? void 0 : onTabChange(tab.id);
|
|
@@ -19,7 +19,8 @@ var ContentTabs = ({
|
|
|
19
19
|
id,
|
|
20
20
|
testid,
|
|
21
21
|
selectedTab,
|
|
22
|
-
contentPadding = true
|
|
22
|
+
contentPadding = true,
|
|
23
|
+
disabledWithColor
|
|
23
24
|
}) => {
|
|
24
25
|
var _a, _b;
|
|
25
26
|
const [selectedTabId, setSelectedTabId] = useState(((_a = tabs[0]) == null ? void 0 : _a.id) || "");
|
|
@@ -27,35 +28,40 @@ var ContentTabs = ({
|
|
|
27
28
|
const tabRefs = useRef([]);
|
|
28
29
|
const handleTabClick = useCallback(
|
|
29
30
|
(id2, index) => {
|
|
31
|
+
if (disabledWithColor) return;
|
|
30
32
|
setSelectedTabId(id2);
|
|
31
33
|
setFocusedTabIndex(index);
|
|
32
34
|
onTabChange == null ? void 0 : onTabChange(id2);
|
|
33
35
|
},
|
|
34
|
-
[onTabChange]
|
|
36
|
+
[disabledWithColor, onTabChange]
|
|
35
37
|
);
|
|
36
38
|
useEffect(() => {
|
|
37
39
|
if (selectedTab) {
|
|
38
40
|
handleTabClick(selectedTab.id, selectedTab.index);
|
|
39
41
|
}
|
|
40
42
|
}, [selectedTab, handleTabClick]);
|
|
41
|
-
const handleKeyDown = (
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
43
|
+
const handleKeyDown = useCallback(
|
|
44
|
+
(e) => {
|
|
45
|
+
var _a2;
|
|
46
|
+
if (disabledWithColor) return;
|
|
47
|
+
let newIndex = focusedTabIndex;
|
|
48
|
+
if (e.key === "ArrowRight") {
|
|
49
|
+
e.preventDefault();
|
|
50
|
+
newIndex = (focusedTabIndex + 1) % tabs.length;
|
|
51
|
+
} else if (e.key === "ArrowLeft") {
|
|
52
|
+
e.preventDefault();
|
|
53
|
+
newIndex = (focusedTabIndex - 1 + tabs.length) % tabs.length;
|
|
54
|
+
} else {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
const tabId = tabs[newIndex].id;
|
|
58
|
+
setSelectedTabId(tabId);
|
|
59
|
+
onTabChange == null ? void 0 : onTabChange(tabId);
|
|
60
|
+
(_a2 = tabRefs.current[newIndex]) == null ? void 0 : _a2.focus();
|
|
61
|
+
setFocusedTabIndex(newIndex);
|
|
62
|
+
},
|
|
63
|
+
[disabledWithColor, focusedTabIndex, onTabChange, tabs]
|
|
64
|
+
);
|
|
59
65
|
const selectedContent = (_b = tabs.find((tab) => tab.id === selectedTabId)) == null ? void 0 : _b.content;
|
|
60
66
|
return /* @__PURE__ */ jsxs("div", { id, "data-testid": testid, children: [
|
|
61
67
|
/* @__PURE__ */ jsx("div", { className: clsx("overflow-x-auto", contentPadding && "pb-2"), children: /* @__PURE__ */ jsx(
|
|
@@ -80,6 +86,7 @@ var ContentTabs = ({
|
|
|
80
86
|
selected: isSelected,
|
|
81
87
|
onClick: () => handleTabClick(tab.id, index),
|
|
82
88
|
onFocus: () => {
|
|
89
|
+
if (disabledWithColor) return;
|
|
83
90
|
setSelectedTabId(tab.id);
|
|
84
91
|
setFocusedTabIndex(index);
|
|
85
92
|
onTabChange == null ? void 0 : onTabChange(tab.id);
|