@dmsi/wedgekit-react 0.0.84 → 0.0.86

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 (4) hide show
  1. package/dist/components/ContentTabs.cjs +14 -9
  2. package/dist/components/ContentTabs.js +15 -10
  3. package/package.json +1 -1
  4. package/src/components/ContentTabs.tsx +21 -10
package/dist/components/ContentTabs.cjs CHANGED
@@ -412,14 +412,19 @@ ContentTab.displayName = "ContentTab";
412
412
  // src/components/ContentTabs.tsx
413
413
  var import_jsx_runtime3 = require("react/jsx-runtime");
414
414
  var afterClasses = "after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-border-primary-normal z-0";
415
- var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id }) => {
415
+ var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, selectedTab }) => {
416
416
  var _a, _b;
417
- const [selectedTab, setSelectedTab] = (0, import_react2.useState)(((_a = tabs[0]) == null ? void 0 : _a.id) || "");
417
+ const [selectedTabId, setSelectedTabId] = (0, import_react2.useState)(((_a = tabs[0]) == null ? void 0 : _a.id) || "");
418
418
  const [focusedTabIndex, setFocusedTabIndex] = (0, import_react2.useState)(0);
419
419
  const tabRefs = (0, import_react2.useRef)([]);
420
+ (0, import_react2.useEffect)(() => {
421
+ if (selectedTab) {
422
+ handleTabClick(selectedTab.id, selectedTab.index);
423
+ }
424
+ }, [selectedTab]);
420
425
  const handleTabClick = (0, import_react2.useCallback)(
421
426
  (id2, index) => {
422
- setSelectedTab(id2);
427
+ setSelectedTabId(id2);
423
428
  setFocusedTabIndex(index);
424
429
  onTabChange == null ? void 0 : onTabChange(id2);
425
430
  },
@@ -438,12 +443,12 @@ var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id }) => {
438
443
  return;
439
444
  }
440
445
  const tabId = tabs[newIndex].id;
441
- setSelectedTab(tabId);
446
+ setSelectedTabId(tabId);
442
447
  onTabChange == null ? void 0 : onTabChange(tabId);
443
448
  (_a2 = tabRefs.current[newIndex]) == null ? void 0 : _a2.focus();
444
449
  setFocusedTabIndex(newIndex);
445
450
  };
446
- const selectedContent = (_b = tabs.find((tab) => tab.id === selectedTab)) == null ? void 0 : _b.content;
451
+ const selectedContent = (_b = tabs.find((tab) => tab.id === selectedTabId)) == null ? void 0 : _b.content;
447
452
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { id, children: [
448
453
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "overflow-x-auto pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
449
454
  "div",
@@ -454,7 +459,7 @@ var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id }) => {
454
459
  className: (0, import_clsx4.default)("flex relative", afterClasses),
455
460
  onKeyDown: handleKeyDown,
456
461
  children: tabs.map((tab, index) => {
457
- const isSelected = selectedTab === tab.id;
462
+ const isSelected = selectedTabId === tab.id;
458
463
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
459
464
  ContentTab,
460
465
  {
@@ -464,7 +469,7 @@ var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id }) => {
464
469
  selected: isSelected,
465
470
  onClick: () => handleTabClick(tab.id, index),
466
471
  onFocus: () => {
467
- setSelectedTab(tab.id);
472
+ setSelectedTabId(tab.id);
468
473
  setFocusedTabIndex(index);
469
474
  onTabChange == null ? void 0 : onTabChange(tab.id);
470
475
  },
@@ -485,10 +490,10 @@ var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id }) => {
485
490
  selectedContent && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
486
491
  "div",
487
492
  {
488
- id: (id ? `${id}-` : "") + `panel-${selectedTab}`,
493
+ id: (id ? `${id}-` : "") + `panel-${selectedTabId}`,
489
494
  className: "mt-2",
490
495
  role: "tabpanel",
491
- "aria-labelledby": `tab-${selectedTab}`,
496
+ "aria-labelledby": `tab-${selectedTabId}`,
492
497
  tabIndex: 0,
493
498
  children: selectedContent
494
499
  }
package/dist/components/ContentTabs.js CHANGED
@@ -8,17 +8,22 @@ import "../chunk-ORMEWXMH.js";
8
8
 
9
9
  // src/components/ContentTabs.tsx
10
10
  import clsx from "clsx";
11
- import { useState, useRef, useCallback } from "react";
11
+ import { useState, useRef, useCallback, useEffect } from "react";
12
12
  import { jsx, jsxs } from "react/jsx-runtime";
13
13
  var afterClasses = "after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-border-primary-normal z-0";
14
- var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id }) => {
14
+ var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, selectedTab }) => {
15
15
  var _a, _b;
16
- const [selectedTab, setSelectedTab] = useState(((_a = tabs[0]) == null ? void 0 : _a.id) || "");
16
+ const [selectedTabId, setSelectedTabId] = useState(((_a = tabs[0]) == null ? void 0 : _a.id) || "");
17
17
  const [focusedTabIndex, setFocusedTabIndex] = useState(0);
18
18
  const tabRefs = useRef([]);
19
+ useEffect(() => {
20
+ if (selectedTab) {
21
+ handleTabClick(selectedTab.id, selectedTab.index);
22
+ }
23
+ }, [selectedTab]);
19
24
  const handleTabClick = useCallback(
20
25
  (id2, index) => {
21
- setSelectedTab(id2);
26
+ setSelectedTabId(id2);
22
27
  setFocusedTabIndex(index);
23
28
  onTabChange == null ? void 0 : onTabChange(id2);
24
29
  },
@@ -37,12 +42,12 @@ var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id }) => {
37
42
  return;
38
43
  }
39
44
  const tabId = tabs[newIndex].id;
40
- setSelectedTab(tabId);
45
+ setSelectedTabId(tabId);
41
46
  onTabChange == null ? void 0 : onTabChange(tabId);
42
47
  (_a2 = tabRefs.current[newIndex]) == null ? void 0 : _a2.focus();
43
48
  setFocusedTabIndex(newIndex);
44
49
  };
45
- const selectedContent = (_b = tabs.find((tab) => tab.id === selectedTab)) == null ? void 0 : _b.content;
50
+ const selectedContent = (_b = tabs.find((tab) => tab.id === selectedTabId)) == null ? void 0 : _b.content;
46
51
  return /* @__PURE__ */ jsxs("div", { id, children: [
47
52
  /* @__PURE__ */ jsx("div", { className: "overflow-x-auto pb-2", children: /* @__PURE__ */ jsx(
48
53
  "div",
@@ -53,7 +58,7 @@ var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id }) => {
53
58
  className: clsx("flex relative", afterClasses),
54
59
  onKeyDown: handleKeyDown,
55
60
  children: tabs.map((tab, index) => {
56
- const isSelected = selectedTab === tab.id;
61
+ const isSelected = selectedTabId === tab.id;
57
62
  return /* @__PURE__ */ jsx(
58
63
  ContentTab,
59
64
  {
@@ -63,7 +68,7 @@ var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id }) => {
63
68
  selected: isSelected,
64
69
  onClick: () => handleTabClick(tab.id, index),
65
70
  onFocus: () => {
66
- setSelectedTab(tab.id);
71
+ setSelectedTabId(tab.id);
67
72
  setFocusedTabIndex(index);
68
73
  onTabChange == null ? void 0 : onTabChange(tab.id);
69
74
  },
@@ -84,10 +89,10 @@ var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id }) => {
84
89
  selectedContent && /* @__PURE__ */ jsx(
85
90
  "div",
86
91
  {
87
- id: (id ? `${id}-` : "") + `panel-${selectedTab}`,
92
+ id: (id ? `${id}-` : "") + `panel-${selectedTabId}`,
88
93
  className: "mt-2",
89
94
  role: "tabpanel",
90
- "aria-labelledby": `tab-${selectedTab}`,
95
+ "aria-labelledby": `tab-${selectedTabId}`,
91
96
  tabIndex: 0,
92
97
  children: selectedContent
93
98
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dmsi/wedgekit-react",
3
3
  "private": false,
4
- "version": "0.0.84",
4
+ "version": "0.0.86",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "build": "tsup",
package/src/components/ContentTabs.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import clsx from "clsx";
3
- import { ReactNode, useState, useRef, useCallback } from "react";
3
+ import { ReactNode, useState, useRef, useCallback, useEffect } from "react";
4
4
  import { ContentTab } from "./ContentTab";
5
5
 
6
6
  type Tab = {
@@ -9,24 +9,35 @@ type Tab = {
9
9
  content?: ReactNode;
10
10
  };
11
11
 
12
+ export type SelectedTab = Omit<Tab, "content" | "label"> & {
13
+ index: number;
14
+ }
15
+
12
16
  export type ContentTabsProps = {
13
17
  tabs: Tab[];
14
18
  onTabChange?: (tabId: string) => void;
15
19
  fullWidthTabs?: boolean;
16
20
  id?: string;
21
+ selectedTab?: SelectedTab | null;
17
22
  };
18
23
 
19
24
  const afterClasses =
20
25
  "after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-border-primary-normal z-0";
21
26
 
22
- export const ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id }: ContentTabsProps) => {
23
- const [selectedTab, setSelectedTab] = useState<string>(tabs[0]?.id || "");
27
+ export const ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, selectedTab }: ContentTabsProps) => {
28
+ const [selectedTabId, setSelectedTabId] = useState<string>(tabs[0]?.id || "");
24
29
  const [focusedTabIndex, setFocusedTabIndex] = useState<number>(0);
25
30
  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
26
31
 
32
+ useEffect(() => {
33
+ if (selectedTab) {
34
+ handleTabClick(selectedTab.id, selectedTab.index)
35
+ }
36
+ }, [selectedTab])
37
+
27
38
  const handleTabClick = useCallback(
28
39
  (id: string, index: number) => {
29
- setSelectedTab(id);
40
+ setSelectedTabId(id);
30
41
  setFocusedTabIndex(index);
31
42
  onTabChange?.(id);
32
43
  },
@@ -45,13 +56,13 @@ export const ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id }: ContentTab
45
56
  return;
46
57
  }
47
58
  const tabId = tabs[newIndex].id;
48
- setSelectedTab(tabId);
59
+ setSelectedTabId(tabId);
49
60
  onTabChange?.(tabId);
50
61
  tabRefs.current[newIndex]?.focus();
51
62
  setFocusedTabIndex(newIndex);
52
63
  };
53
64
 
54
- const selectedContent = tabs.find((tab) => tab.id === selectedTab)?.content;
65
+ const selectedContent = tabs.find((tab) => tab.id === selectedTabId)?.content;
55
66
 
56
67
  return (
57
68
  <div id={id}>
@@ -64,7 +75,7 @@ export const ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id }: ContentTab
64
75
  onKeyDown={handleKeyDown}
65
76
  >
66
77
  {tabs.map((tab, index) => {
67
- const isSelected = selectedTab === tab.id;
78
+ const isSelected = selectedTabId === tab.id;
68
79
  return (
69
80
  <ContentTab
70
81
  fullWidth={fullWidthTabs}
@@ -74,7 +85,7 @@ export const ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id }: ContentTab
74
85
  selected={isSelected}
75
86
  onClick={() => handleTabClick(tab.id, index)}
76
87
  onFocus={() => {
77
- setSelectedTab(tab.id);
88
+ setSelectedTabId(tab.id);
78
89
 
79
90
  setFocusedTabIndex(index);
80
91
  onTabChange?.(tab.id);
@@ -94,10 +105,10 @@ export const ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id }: ContentTab
94
105
  </div>
95
106
  {selectedContent && (
96
107
  <div
97
- id={(id ? `${id}-` : "") + `panel-${selectedTab}`}
108
+ id={(id ? `${id}-` : "") + `panel-${selectedTabId}`}
98
109
  className="mt-2"
99
110
  role="tabpanel"
100
- aria-labelledby={`tab-${selectedTab}`}
111
+ aria-labelledby={`tab-${selectedTabId}`}
101
112
  tabIndex={0}
102
113
  >
103
114
  {selectedContent}