@clubmed/trident-ui 1.3.0-beta.3 → 1.3.0-beta.4
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/CHANGELOG.md +8 -0
- package/molecules/Tabs/Tab.d.ts +1 -1
- package/molecules/Tabs/Tab.js +51 -49
- package/molecules/Tabs/Tab.js.map +1 -1
- package/molecules/Tabs/TabPanel.js +31 -29
- package/molecules/Tabs/TabPanel.js.map +1 -1
- package/molecules/Tabs/Tabs.js +7 -9
- package/molecules/Tabs/Tabs.js.map +1 -1
- package/molecules/Tabs/context/TabControl.d.ts +29 -27
- package/molecules/Tabs/context/TabControl.js +67 -66
- package/molecules/Tabs/context/TabControl.js.map +1 -1
- package/molecules/Tabs/hooks/tabControl.d.ts +25 -14
- package/molecules/Tabs/hooks/tabControl.js +26 -23
- package/molecules/Tabs/hooks/tabControl.js.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# ClubMed React UI components changelog
|
|
2
2
|
|
|
3
|
+
# [1.3.0-beta.4](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.3.0-beta.3...v1.3.0-beta.4) (2025-07-03)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* **tabs:** enhance accessibility by adding ARIA attributes to Tab components ([6ca327c](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/6ca327c5687e9f737ee7aa1421839f841ab7e912))
|
|
9
|
+
* **tabs:** improve TabPanel accessibility by replacing display with height for animations ([3b699fb](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/3b699fb54bbef1fd8bba4dc41dfb3a4cfb14b590))
|
|
10
|
+
|
|
3
11
|
# [1.3.0-beta.3](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.3.0-beta.2...v1.3.0-beta.3) (2025-03-21)
|
|
4
12
|
|
|
5
13
|
|
package/molecules/Tabs/Tab.d.ts
CHANGED
package/molecules/Tabs/Tab.js
CHANGED
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { c as
|
|
4
|
-
import { useRef as
|
|
5
|
-
import { animated as
|
|
6
|
-
import { useActiveTab as
|
|
7
|
-
import { getTheme as
|
|
8
|
-
import { useSafeBoop as
|
|
9
|
-
import { useKeyboardControls as
|
|
10
|
-
const f = "-z-1 rounded-pill absolute inset-0 duration-300",
|
|
11
|
-
className:
|
|
2
|
+
import { jsx as d, jsxs as j } from "react/jsx-runtime";
|
|
3
|
+
import { c as u } from "../../chunks/index.js";
|
|
4
|
+
import { useRef as m, useEffect as B, useCallback as r } from "react";
|
|
5
|
+
import { animated as I } from "@react-spring/web";
|
|
6
|
+
import { useActiveTab as P, useTabsUid as U, useRegisterTabControl as z } from "./hooks/tabControl.js";
|
|
7
|
+
import { getTheme as G } from "./theme.js";
|
|
8
|
+
import { useSafeBoop as M } from "../../hooks/useSafeBoop.js";
|
|
9
|
+
import { useKeyboardControls as O } from "../../hooks/useKeyboardControls.js";
|
|
10
|
+
const f = "-z-1 rounded-pill absolute inset-0 duration-300", X = ({
|
|
11
|
+
className: y,
|
|
12
12
|
label: a,
|
|
13
|
-
children:
|
|
14
|
-
value:
|
|
13
|
+
children: g,
|
|
14
|
+
value: o,
|
|
15
15
|
onSelect: i,
|
|
16
|
-
as:
|
|
16
|
+
as: T = "h2",
|
|
17
17
|
theme: h = "yellow"
|
|
18
18
|
}) => {
|
|
19
|
-
const p =
|
|
20
|
-
n.current =
|
|
21
|
-
const x = { "--tab-index":
|
|
22
|
-
|
|
19
|
+
const p = m(null), e = P(), b = U(), t = z({ value: o, ref: p }), l = m(e), n = m(e === o);
|
|
20
|
+
n.current = e === o;
|
|
21
|
+
const x = { "--tab-index": o }, { textColor: C, textColorActive: w, bgColor: A } = G(h), [N, c] = M({ scale: 1.02 });
|
|
22
|
+
B(() => {
|
|
23
23
|
var s;
|
|
24
|
-
l.current !==
|
|
25
|
-
}, [a,
|
|
26
|
-
const
|
|
24
|
+
l.current !== e && o === e && ((s = p.current) == null || s.focus(), i == null || i({ value: o, label: a })), l.current !== e && (l.current = e);
|
|
25
|
+
}, [a, o, i, e]);
|
|
26
|
+
const _ = r(() => {
|
|
27
27
|
n.current && c();
|
|
28
|
-
}, [c]),
|
|
28
|
+
}, [c]), k = r(() => {
|
|
29
29
|
t({ type: "start" });
|
|
30
|
-
}, [t]), k = r(() => {
|
|
31
|
-
t({ type: "end" });
|
|
32
30
|
}, [t]), L = r(() => {
|
|
33
|
-
t({ type: "
|
|
31
|
+
t({ type: "end" });
|
|
34
32
|
}, [t]), R = r(() => {
|
|
33
|
+
t({ type: "previous" });
|
|
34
|
+
}, [t]), v = r(() => {
|
|
35
35
|
t({ type: "next" });
|
|
36
36
|
}, [t]), E = r(() => {
|
|
37
37
|
const s = document.documentElement.dir === "rtl";
|
|
@@ -39,63 +39,65 @@ const f = "-z-1 rounded-pill absolute inset-0 duration-300", W = ({
|
|
|
39
39
|
}, [t]), K = r(() => {
|
|
40
40
|
const s = document.documentElement.dir === "rtl";
|
|
41
41
|
t({ type: s ? "previous" : "next" });
|
|
42
|
-
}, [t]),
|
|
43
|
-
activate:
|
|
44
|
-
start:
|
|
45
|
-
end:
|
|
46
|
-
up:
|
|
47
|
-
down:
|
|
42
|
+
}, [t]), $ = O({
|
|
43
|
+
activate: _,
|
|
44
|
+
start: k,
|
|
45
|
+
end: L,
|
|
46
|
+
up: R,
|
|
47
|
+
down: v,
|
|
48
48
|
left: E,
|
|
49
49
|
right: K
|
|
50
|
-
}),
|
|
51
|
-
t({ type: "update", payload:
|
|
52
|
-
}, [c, t,
|
|
53
|
-
return /* @__PURE__ */
|
|
54
|
-
|
|
50
|
+
}), D = r(() => {
|
|
51
|
+
t({ type: "update", payload: o }), n.current && c();
|
|
52
|
+
}, [c, t, o]);
|
|
53
|
+
return /* @__PURE__ */ d(
|
|
54
|
+
I.div,
|
|
55
55
|
{
|
|
56
|
+
id: `Tab_${o}_${b}`,
|
|
56
57
|
"data-name": "Tab",
|
|
57
58
|
ref: p,
|
|
58
59
|
role: "tab",
|
|
59
60
|
"aria-selected": n.current,
|
|
61
|
+
"aria-controls": `TabPanel_${o}_${b}`,
|
|
60
62
|
tabIndex: n.current ? 0 : -1,
|
|
61
|
-
style:
|
|
62
|
-
className:
|
|
63
|
+
style: N,
|
|
64
|
+
className: u(
|
|
63
65
|
"text-b3 group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle font-semibold outline-none",
|
|
64
|
-
|
|
66
|
+
y,
|
|
65
67
|
{
|
|
66
68
|
[C]: !n.current,
|
|
67
|
-
[
|
|
69
|
+
[w]: n.current
|
|
68
70
|
}
|
|
69
71
|
),
|
|
70
|
-
onKeyDown:
|
|
71
|
-
onClick:
|
|
72
|
-
children: /* @__PURE__ */
|
|
73
|
-
/* @__PURE__ */
|
|
72
|
+
onKeyDown: $,
|
|
73
|
+
onClick: D,
|
|
74
|
+
children: /* @__PURE__ */ j(T, { className: "relative inline-block px-20 py-12", children: [
|
|
75
|
+
/* @__PURE__ */ d(
|
|
74
76
|
"span",
|
|
75
77
|
{
|
|
76
|
-
className:
|
|
78
|
+
className: u(
|
|
77
79
|
"group-hover:bg-pearl group-focus-within:bg-pearl transition-colors",
|
|
78
80
|
f
|
|
79
81
|
)
|
|
80
82
|
}
|
|
81
83
|
),
|
|
82
|
-
/* @__PURE__ */
|
|
84
|
+
/* @__PURE__ */ d(
|
|
83
85
|
"span",
|
|
84
86
|
{
|
|
85
|
-
className:
|
|
87
|
+
className: u(
|
|
86
88
|
"tab-focus-pill ease transition-transform/colors",
|
|
87
89
|
f,
|
|
88
|
-
|
|
90
|
+
A
|
|
89
91
|
),
|
|
90
92
|
style: x
|
|
91
93
|
}
|
|
92
94
|
),
|
|
93
|
-
|
|
95
|
+
g ?? a
|
|
94
96
|
] })
|
|
95
97
|
}
|
|
96
98
|
);
|
|
97
99
|
};
|
|
98
100
|
export {
|
|
99
|
-
|
|
101
|
+
X as Tab
|
|
100
102
|
};
|
|
101
103
|
//# sourceMappingURL=Tab.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sources":["../../../lib/molecules/Tabs/Tab.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n type CSSProperties,\n type FunctionComponent,\n useCallback,\n useEffect,\n useRef,\n type PropsWithChildren,\n} from 'react';\n\nimport { animated } from 'react-spring';\n\nimport { useActiveTab, useRegisterTabControl } from './hooks/tabControl';\nimport { type Theme, getTheme } from './theme';\n\nimport { useSafeBoop } from '../../hooks/useSafeBoop';\nimport { useKeyboardControls } from '../../hooks/useKeyboardControls';\n\nimport './Tab.css';\n\nconst BACKGROUND_PILL_CLASSNAME = '-z-1 rounded-pill absolute inset-0 duration-300';\n\ninterface Props {\n className?: string;\n /**\n * Tab Heading text\n */\n label
|
|
1
|
+
{"version":3,"file":"Tab.js","sources":["../../../lib/molecules/Tabs/Tab.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n type CSSProperties,\n type FunctionComponent,\n useCallback,\n useEffect,\n useRef,\n type PropsWithChildren,\n} from 'react';\n\nimport { animated } from 'react-spring';\n\nimport { useActiveTab, useRegisterTabControl, useTabsUid } from './hooks/tabControl';\nimport { type Theme, getTheme } from './theme';\n\nimport { useSafeBoop } from '../../hooks/useSafeBoop';\nimport { useKeyboardControls } from '../../hooks/useKeyboardControls';\n\nimport './Tab.css';\n\nconst BACKGROUND_PILL_CLASSNAME = '-z-1 rounded-pill absolute inset-0 duration-300';\n\ninterface Props {\n className?: string;\n /**\n * Tab Heading text\n */\n label?: string;\n /**\n * Tab heading index<br/>\n * _Can be **0** or **1** indexed_\n */\n value: number;\n /**\n * on tab select handler\n */\n onSelect?: (context: { value: Props['value']; label: Props['label'] }) => void;\n /**\n * Tab Heading theme\n */\n theme?: Theme;\n /**\n * Heading type\n * _default: **h2**_\n */\n as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n}\n\nexport const Tab: FunctionComponent<PropsWithChildren<Props>> = ({\n className,\n label,\n children,\n value,\n onSelect,\n as: TagName = 'h2',\n theme = 'yellow',\n}) => {\n const ref = useRef<HTMLDivElement>(null);\n\n const activeTab = useActiveTab();\n const uid = useTabsUid();\n const dispatch = useRegisterTabControl({ value, ref });\n const previousActiveTab = useRef(activeTab);\n\n const isActive = useRef(activeTab === value);\n isActive.current = activeTab === value;\n\n const pillStyle = { '--tab-index': value } as CSSProperties;\n const { textColor, textColorActive, bgColor } = getTheme(theme);\n const [boopStyle, boopTrigger] = useSafeBoop({ scale: 1.02 });\n\n useEffect(() => {\n if (previousActiveTab.current !== activeTab && value === activeTab) {\n ref.current?.focus();\n onSelect?.({ value, label });\n }\n if (previousActiveTab.current !== activeTab) {\n previousActiveTab.current = activeTab;\n }\n }, [label, value, onSelect, activeTab]);\n\n const activate = useCallback(() => {\n if (isActive.current) {\n boopTrigger();\n }\n }, [boopTrigger]);\n\n const start = useCallback(() => {\n dispatch({ type: 'start' });\n }, [dispatch]);\n\n const end = useCallback(() => {\n dispatch({ type: 'end' });\n }, [dispatch]);\n\n const up = useCallback(() => {\n dispatch({ type: 'previous' });\n }, [dispatch]);\n\n const down = useCallback(() => {\n dispatch({ type: 'next' });\n }, [dispatch]);\n\n const left = useCallback(() => {\n const isRTL = document.documentElement.dir === 'rtl';\n\n dispatch({ type: isRTL ? 'next' : 'previous' });\n }, [dispatch]);\n\n const right = useCallback(() => {\n const isRTL = document.documentElement.dir === 'rtl';\n\n dispatch({ type: isRTL ? 'previous' : 'next' });\n }, [dispatch]);\n\n const handleKeyDown = useKeyboardControls({\n activate,\n start,\n end,\n up,\n down,\n left,\n right,\n });\n\n const handleClick = useCallback(() => {\n dispatch({ type: 'update', payload: value });\n\n if (isActive.current) {\n boopTrigger();\n }\n }, [boopTrigger, dispatch, value]);\n\n return (\n <animated.div\n id={`Tab_${value}_${uid}`}\n data-name=\"Tab\"\n ref={ref}\n role=\"tab\"\n aria-selected={isActive.current}\n aria-controls={`TabPanel_${value}_${uid}`}\n tabIndex={isActive.current ? 0 : -1}\n style={boopStyle}\n className={classnames(\n 'text-b3 group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle font-semibold outline-none',\n className,\n {\n [textColor]: !isActive.current,\n [textColorActive]: isActive.current,\n },\n )}\n onKeyDown={handleKeyDown}\n onClick={handleClick}\n >\n <TagName className=\"relative inline-block px-20 py-12\">\n <span\n className={classnames(\n 'group-hover:bg-pearl group-focus-within:bg-pearl transition-colors',\n BACKGROUND_PILL_CLASSNAME,\n )}\n />\n <span\n className={classnames(\n 'tab-focus-pill ease transition-transform/colors',\n BACKGROUND_PILL_CLASSNAME,\n bgColor,\n )}\n style={pillStyle}\n />\n {children ?? label}\n </TagName>\n </animated.div>\n );\n};\n"],"names":["BACKGROUND_PILL_CLASSNAME","Tab","className","label","children","value","onSelect","TagName","theme","ref","useRef","activeTab","useActiveTab","uid","useTabsUid","dispatch","useRegisterTabControl","previousActiveTab","isActive","pillStyle","textColor","textColorActive","bgColor","getTheme","boopStyle","boopTrigger","useSafeBoop","useEffect","_a","activate","useCallback","start","end","up","down","left","isRTL","right","handleKeyDown","useKeyboardControls","handleClick","jsx","animated","classnames","jsxs"],"mappings":"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"}
|
|
@@ -1,60 +1,62 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as p } from "react/jsx-runtime";
|
|
3
|
-
import { c as
|
|
4
|
-
import { useRef as
|
|
5
|
-
import { useSpring as
|
|
6
|
-
import { useActiveTab as
|
|
7
|
-
const
|
|
3
|
+
import { c as u } from "../../chunks/index.js";
|
|
4
|
+
import { useRef as b, useEffect as f } from "react";
|
|
5
|
+
import { useSpring as h, animated as l } from "@react-spring/web";
|
|
6
|
+
import { useTabsUid as T, useActiveTab as g } from "./hooks/tabControl.js";
|
|
7
|
+
const i = {
|
|
8
8
|
opacity: 0,
|
|
9
9
|
pointerEvents: "none",
|
|
10
|
-
|
|
10
|
+
height: 0
|
|
11
11
|
}, n = {
|
|
12
12
|
opacity: 1,
|
|
13
13
|
pointerEvents: "auto",
|
|
14
|
-
|
|
15
|
-
},
|
|
16
|
-
value:
|
|
17
|
-
className:
|
|
18
|
-
onSelect:
|
|
19
|
-
children:
|
|
14
|
+
height: "auto"
|
|
15
|
+
}, P = ({
|
|
16
|
+
value: e,
|
|
17
|
+
className: c,
|
|
18
|
+
onSelect: a,
|
|
19
|
+
children: m
|
|
20
20
|
}) => {
|
|
21
|
-
const
|
|
22
|
-
from: t ? n :
|
|
21
|
+
const o = T(), s = b(!1), t = g() === e, [d, r] = h(() => ({
|
|
22
|
+
from: t ? n : i
|
|
23
23
|
}));
|
|
24
24
|
return f(() => {
|
|
25
|
-
if (!
|
|
26
|
-
|
|
25
|
+
if (!s.current) {
|
|
26
|
+
s.current = !0;
|
|
27
27
|
return;
|
|
28
28
|
}
|
|
29
|
-
|
|
29
|
+
r.start({
|
|
30
30
|
to: {
|
|
31
|
-
...t ? n :
|
|
32
|
-
|
|
31
|
+
...t ? n : i,
|
|
32
|
+
height: "auto"
|
|
33
33
|
},
|
|
34
34
|
onRest: () => {
|
|
35
|
-
|
|
36
|
-
to: {
|
|
35
|
+
r.start({
|
|
36
|
+
to: { height: t ? "auto" : 0 },
|
|
37
37
|
immediate: !0
|
|
38
38
|
});
|
|
39
39
|
}
|
|
40
|
-
}), t && (
|
|
41
|
-
}, [t,
|
|
42
|
-
|
|
40
|
+
}), t && (a == null || a({ value: e }));
|
|
41
|
+
}, [t, r, e, a]), /* @__PURE__ */ p(
|
|
42
|
+
l.div,
|
|
43
43
|
{
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
style: d,
|
|
45
|
+
id: `TabPanel_${e}_${o}`,
|
|
46
|
+
"data-name": `TabPanel_${e}`,
|
|
46
47
|
role: "tabpanel",
|
|
47
48
|
"aria-hidden": !t,
|
|
49
|
+
"aria-labelledby": `Tab_${e}_${o}`,
|
|
48
50
|
tabIndex: t ? 0 : -1,
|
|
49
|
-
className:
|
|
51
|
+
className: u(c, "col-start-1 col-end-1 row-start-1 row-end-1", {
|
|
50
52
|
"z-0": !t,
|
|
51
53
|
"z-1": t
|
|
52
54
|
}),
|
|
53
|
-
children:
|
|
55
|
+
children: m
|
|
54
56
|
}
|
|
55
57
|
);
|
|
56
58
|
};
|
|
57
59
|
export {
|
|
58
|
-
|
|
60
|
+
P as TabPanel
|
|
59
61
|
};
|
|
60
62
|
//# sourceMappingURL=TabPanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPanel.js","sources":["../../../lib/molecules/Tabs/TabPanel.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport { type FunctionComponent, type PropsWithChildren, useEffect, useRef } from 'react';\nimport { animated, useSpring } from '@react-spring/web';\n\nimport { useActiveTab } from './hooks/tabControl';\n\ninterface Props {\n className?: string;\n /**\n * Tab panel index<br/>\n * _Can be **0** or **1** indexed_\n */\n value: number;\n /**\n * on panel select handler\n */\n onSelect?: (context: { value: Props['value'] }) => void;\n}\n\ninterface TabStyle {\n pointerEvents: 'none' | 'auto';\n opacity: number;\n
|
|
1
|
+
{"version":3,"file":"TabPanel.js","sources":["../../../lib/molecules/Tabs/TabPanel.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport { type FunctionComponent, type PropsWithChildren, useEffect, useRef } from 'react';\nimport { animated, useSpring } from '@react-spring/web';\n\nimport { useActiveTab, useTabsUid } from './hooks/tabControl';\n\ninterface Props {\n className?: string;\n /**\n * Tab panel index<br/>\n * _Can be **0** or **1** indexed_\n */\n value: number;\n /**\n * on panel select handler\n */\n onSelect?: (context: { value: Props['value'] }) => void;\n}\n\ninterface TabStyle {\n pointerEvents: 'none' | 'auto';\n opacity: number;\n height?: number | 'auto';\n}\n\nconst FROM: TabStyle = {\n opacity: 0,\n pointerEvents: 'none',\n height: 0,\n};\n\nconst TO: TabStyle = {\n opacity: 1,\n pointerEvents: 'auto',\n height: 'auto',\n};\n\nexport const TabPanel: FunctionComponent<PropsWithChildren<Props>> = ({\n value,\n className,\n onSelect,\n children,\n}) => {\n const uid = useTabsUid();\n const mounted = useRef(false);\n const tabSelected = useActiveTab();\n const isActive = tabSelected === value;\n\n const [style, styleApi] = useSpring<TabStyle>(() => ({\n from: isActive ? TO : FROM,\n }));\n\n useEffect(() => {\n if (!mounted.current) {\n mounted.current = true;\n return;\n }\n\n styleApi.start({\n to: {\n ...(isActive ? TO : FROM),\n height: 'auto',\n },\n onRest: () => {\n styleApi.start({\n to: { height: isActive ? 'auto' : 0 },\n immediate: true,\n });\n },\n });\n\n if (isActive) {\n onSelect?.({ value });\n }\n }, [isActive, styleApi, value, onSelect]);\n\n return (\n <animated.div\n style={style}\n id={`TabPanel_${value}_${uid}`}\n data-name={`TabPanel_${value}`}\n role=\"tabpanel\"\n aria-hidden={!isActive}\n aria-labelledby={`Tab_${value}_${uid}`}\n tabIndex={isActive ? 0 : -1}\n className={classnames(className, 'col-start-1 col-end-1 row-start-1 row-end-1', {\n 'z-0': !isActive,\n 'z-1': isActive,\n })}\n >\n {children}\n </animated.div>\n );\n};\n"],"names":["FROM","TO","TabPanel","value","className","onSelect","children","uid","useTabsUid","mounted","useRef","isActive","useActiveTab","style","styleApi","useSpring","useEffect","jsx","animated","classnames"],"mappings":";;;;;;AA2BA,MAAMA,IAAiB;AAAA,EACrB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,QAAQ;AACV,GAEMC,IAAe;AAAA,EACnB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,QAAQ;AACV,GAEaC,IAAwD,CAAC;AAAA,EACpE,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACJ,QAAMC,IAAMC,KACNC,IAAUC,EAAO,EAAK,GAEtBC,IADcC,QACaT,GAE3B,CAACU,GAAOC,CAAQ,IAAIC,EAAoB,OAAO;AAAA,IACnD,MAAMJ,IAAWV,IAAKD;AAAA,EACtB,EAAA;AAEF,SAAAgB,EAAU,MAAM;AACV,QAAA,CAACP,EAAQ,SAAS;AACpB,MAAAA,EAAQ,UAAU;AAClB;AAAA,IACF;AAEA,IAAAK,EAAS,MAAM;AAAA,MACb,IAAI;AAAA,QACF,GAAIH,IAAWV,IAAKD;AAAA,QACpB,QAAQ;AAAA,MACV;AAAA,MACA,QAAQ,MAAM;AACZ,QAAAc,EAAS,MAAM;AAAA,UACb,IAAI,EAAE,QAAQH,IAAW,SAAS,EAAE;AAAA,UACpC,WAAW;AAAA,QAAA,CACZ;AAAA,MACH;AAAA,IAAA,CACD,GAEGA,MACSN,KAAA,QAAAA,EAAA,EAAE,OAAAF;KAEd,CAACQ,GAAUG,GAAUX,GAAOE,CAAQ,CAAC,GAGtC,gBAAAY;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,OAAAL;AAAA,MACA,IAAI,YAAYV,CAAK,IAAII,CAAG;AAAA,MAC5B,aAAW,YAAYJ,CAAK;AAAA,MAC5B,MAAK;AAAA,MACL,eAAa,CAACQ;AAAA,MACd,mBAAiB,OAAOR,CAAK,IAAII,CAAG;AAAA,MACpC,UAAUI,IAAW,IAAI;AAAA,MACzB,WAAWQ,EAAWf,GAAW,+CAA+C;AAAA,QAC9E,OAAO,CAACO;AAAA,QACR,OAAOA;AAAA,MAAA,CACR;AAAA,MAEA,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
package/molecules/Tabs/Tabs.js
CHANGED
|
@@ -1,22 +1,20 @@
|
|
|
1
1
|
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
-
import { c as
|
|
3
|
-
import { TabsProvider as
|
|
4
|
-
const
|
|
2
|
+
import { c as o } from "../../chunks/index.js";
|
|
3
|
+
import { TabsProvider as l } from "./context/TabControl.js";
|
|
4
|
+
const i = ({
|
|
5
5
|
className: s,
|
|
6
6
|
compacted: r = !1,
|
|
7
7
|
selected: e,
|
|
8
|
-
|
|
9
|
-
max: o,
|
|
10
|
-
children: l
|
|
8
|
+
children: m
|
|
11
9
|
}) => /* @__PURE__ */ a(
|
|
12
10
|
"div",
|
|
13
11
|
{
|
|
14
|
-
className:
|
|
12
|
+
className: o("flex flex-col", s, { "sm:gap-y-20": !r }),
|
|
15
13
|
"data-name": "Tabs",
|
|
16
|
-
children: /* @__PURE__ */ a(
|
|
14
|
+
children: /* @__PURE__ */ a(l, { selected: e, children: m })
|
|
17
15
|
}
|
|
18
16
|
);
|
|
19
17
|
export {
|
|
20
|
-
|
|
18
|
+
i as Tabs
|
|
21
19
|
};
|
|
22
20
|
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":["../../../lib/molecules/Tabs/Tabs.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { ComponentProps, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { TabsProvider } from './context/TabControl';\n\ntype ProviderProps = ComponentProps<typeof TabsProvider>;\n\ninterface Props extends ProviderProps {\n className?: string;\n /**\n * Shrink the spacing between tabs and panels\n */\n compacted?: boolean;\n}\n\nexport const Tabs: FunctionComponent<PropsWithChildren<Props>> = ({\n className,\n compacted = false,\n selected,\n
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../../lib/molecules/Tabs/Tabs.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { ComponentProps, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { TabsProvider } from './context/TabControl';\n\ntype ProviderProps = ComponentProps<typeof TabsProvider>;\n\ninterface Props extends ProviderProps {\n className?: string;\n /**\n * Shrink the spacing between tabs and panels\n */\n compacted?: boolean;\n}\n\nexport const Tabs: FunctionComponent<PropsWithChildren<Props>> = ({\n className,\n compacted = false,\n selected,\n children,\n}) => {\n return (\n <div\n className={classnames('flex flex-col', className, { 'sm:gap-y-20': !compacted })}\n data-name=\"Tabs\"\n >\n <TabsProvider selected={selected}>{children}</TabsProvider>\n </div>\n );\n};\n"],"names":["Tabs","className","compacted","selected","children","jsx","classnames","TabsProvider"],"mappings":";;;AAeO,MAAMA,IAAoD,CAAC;AAAA,EAChE,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,UAAAC;AACF,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAW,iBAAiBL,GAAW,EAAE,eAAe,CAACC,GAAW;AAAA,IAC/E,aAAU;AAAA,IAEV,UAAA,gBAAAG,EAACE,GAAa,EAAA,UAAAJ,GAAqB,UAAAC,EAAS,CAAA;AAAA,EAAA;AAAA;"}
|
|
@@ -1,50 +1,52 @@
|
|
|
1
|
-
import { type Dispatch, type
|
|
2
|
-
type
|
|
1
|
+
import { type Dispatch, type PropsWithChildren, type RefObject } from 'react';
|
|
2
|
+
type RefTab<T extends HTMLElement = HTMLElement> = RefObject<T>;
|
|
3
|
+
type RefTabs<T extends HTMLElement = HTMLElement> = Map<number, RefTab<T>>;
|
|
4
|
+
type TabsUpdateAction = {
|
|
3
5
|
type: 'update';
|
|
4
6
|
payload: number;
|
|
5
|
-
} | {
|
|
6
|
-
type: 'next';
|
|
7
|
-
} | {
|
|
8
|
-
type: 'previous';
|
|
9
|
-
} | {
|
|
10
|
-
type: 'start';
|
|
11
|
-
} | {
|
|
12
|
-
type: 'end';
|
|
13
7
|
};
|
|
14
|
-
type
|
|
8
|
+
type TabsRegisterAction<T extends HTMLElement = HTMLElement> = {
|
|
15
9
|
type: 'register';
|
|
16
10
|
payload: {
|
|
17
11
|
value: number;
|
|
18
12
|
ref: RefObject<T>;
|
|
19
13
|
};
|
|
20
|
-
}
|
|
14
|
+
};
|
|
15
|
+
type TabsUnregisterAction = {
|
|
21
16
|
type: 'unregister';
|
|
22
17
|
payload: {
|
|
23
18
|
value: number;
|
|
24
19
|
};
|
|
25
20
|
};
|
|
26
|
-
|
|
21
|
+
type TabsAction<T extends HTMLElement = HTMLElement> = {
|
|
22
|
+
type: 'start' | 'end' | 'previous' | 'next';
|
|
23
|
+
} | TabsUpdateAction | TabsRegisterAction<T> | TabsUnregisterAction;
|
|
24
|
+
interface TabsState<T extends HTMLElement = HTMLElement> {
|
|
25
|
+
uid: string;
|
|
27
26
|
value: number;
|
|
27
|
+
refs: RefTabs<T>;
|
|
28
28
|
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
export declare const TabRefsContext: import("react").Context<TabRefs<HTMLElement>>;
|
|
34
|
-
interface TabControl<T extends HTMLElement = HTMLElement> {
|
|
29
|
+
interface TabControl<T extends HTMLElement = HTMLElement> extends TabsState<T> {
|
|
30
|
+
uid: string;
|
|
31
|
+
value: number;
|
|
32
|
+
refs: RefTabs<T>;
|
|
35
33
|
dispatch: Dispatch<TabsAction>;
|
|
36
|
-
register: (value:
|
|
37
|
-
type: 'register';
|
|
38
|
-
}>['payload']['value'], ref: Extract<ControlAction<T>, {
|
|
39
|
-
type: 'register';
|
|
40
|
-
}>['payload']['ref']) => void;
|
|
34
|
+
register: (value: number, ref: RefTab<T>) => void;
|
|
41
35
|
unregister: (value: number) => void;
|
|
42
36
|
}
|
|
43
37
|
export declare const TabControlContext: import("react").Context<TabControl<HTMLElement>>;
|
|
44
|
-
interface
|
|
38
|
+
export interface TabsProviderProps {
|
|
45
39
|
selected?: number;
|
|
40
|
+
/**
|
|
41
|
+
* The selected tab value
|
|
42
|
+
* @deprecated Min props as no effect on the Tabs component and will be removed in future versions
|
|
43
|
+
*/
|
|
46
44
|
min?: number;
|
|
47
|
-
|
|
45
|
+
/**
|
|
46
|
+
* The selected tab value
|
|
47
|
+
* @deprecated Max props as no effect on the Tabs component and will be removed in future versions
|
|
48
|
+
*/
|
|
49
|
+
max?: number;
|
|
48
50
|
}
|
|
49
|
-
export declare
|
|
51
|
+
export declare function TabsProvider({ selected, children }: PropsWithChildren<TabsProviderProps>): import("react/jsx-runtime").JSX.Element;
|
|
50
52
|
export {};
|
|
@@ -1,46 +1,64 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { createContext as
|
|
4
|
-
|
|
5
|
-
const
|
|
2
|
+
import { jsx as f } from "react/jsx-runtime";
|
|
3
|
+
import { createContext as p, useId as x, useReducer as y, useCallback as u } from "react";
|
|
4
|
+
function v(e) {
|
|
5
|
+
const n = [...e.refs.keys()], o = (n.findIndex((t) => t === e.value) + 1) % n.length;
|
|
6
|
+
return { ...e, value: n[o] };
|
|
7
|
+
}
|
|
8
|
+
function g(e) {
|
|
9
|
+
const n = [...e.refs.keys()], o = (n.findIndex((t) => t === e.value) - 1 + n.length) % n.length;
|
|
10
|
+
return { ...e, value: n[o] };
|
|
11
|
+
}
|
|
12
|
+
function C(e) {
|
|
13
|
+
const r = [...e.refs.keys()][0];
|
|
6
14
|
return {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
clamp: (n) => Math.max(Math.min(n, r), e)
|
|
15
|
+
...e,
|
|
16
|
+
value: r
|
|
10
17
|
};
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
18
|
+
}
|
|
19
|
+
function k(e) {
|
|
20
|
+
const n = [...e.refs.keys()], r = n[n.length - 1];
|
|
21
|
+
return {
|
|
22
|
+
...e,
|
|
23
|
+
value: r
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
function b(e, n) {
|
|
27
|
+
const r = new Map(e.refs);
|
|
28
|
+
return r.delete(n.payload.value), {
|
|
29
|
+
...e,
|
|
30
|
+
refs: r
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
function h(e, n) {
|
|
34
|
+
return {
|
|
35
|
+
...e,
|
|
36
|
+
refs: new Map(e.refs).set(n.payload.value, n.payload.ref)
|
|
29
37
|
};
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
38
|
+
}
|
|
39
|
+
function w(e, n) {
|
|
40
|
+
return { ...e, value: n.payload };
|
|
41
|
+
}
|
|
42
|
+
const i = {
|
|
43
|
+
next: v,
|
|
44
|
+
previous: g,
|
|
45
|
+
start: C,
|
|
46
|
+
end: k,
|
|
47
|
+
register: h,
|
|
48
|
+
unregister: b,
|
|
49
|
+
update: w
|
|
50
|
+
};
|
|
51
|
+
function I(e, n) {
|
|
52
|
+
if (n.type in i) {
|
|
53
|
+
const r = i[n.type];
|
|
54
|
+
return r(e, n);
|
|
36
55
|
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
const b = c({
|
|
56
|
+
return e;
|
|
57
|
+
}
|
|
58
|
+
const d = p({
|
|
59
|
+
uid: "",
|
|
60
|
+
value: 0,
|
|
61
|
+
refs: /* @__PURE__ */ new Map(),
|
|
44
62
|
dispatch: () => {
|
|
45
63
|
console.warn("Tab Controller Context dispatch used outside of Provider");
|
|
46
64
|
},
|
|
@@ -51,34 +69,17 @@ const b = c({
|
|
|
51
69
|
console.warn("Tab Controller Context unregister used outside of Provider");
|
|
52
70
|
}
|
|
53
71
|
});
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
})
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
{ value: r, min: t, max: e },
|
|
64
|
-
g
|
|
65
|
-
), [i, d] = v(R, /* @__PURE__ */ new Map()), M = u(() => ({ value: a }), [a]), f = u(() => ({ refs: i }), [i]), p = x(
|
|
66
|
-
(s, w) => {
|
|
67
|
-
d({ type: "register", payload: { value: s, ref: w } });
|
|
68
|
-
},
|
|
69
|
-
[]
|
|
70
|
-
), m = x(
|
|
71
|
-
(s) => {
|
|
72
|
-
d({ type: "unregister", payload: { value: s } });
|
|
73
|
-
},
|
|
74
|
-
[]
|
|
75
|
-
), T = u(() => ({ dispatch: o, register: p, unregister: m }), [p, m]);
|
|
76
|
-
return /* @__PURE__ */ l(h.Provider, { value: M, children: /* @__PURE__ */ l(y.Provider, { value: f, children: /* @__PURE__ */ l(b.Provider, { value: T, children: n }) }) });
|
|
77
|
-
};
|
|
72
|
+
d.displayName = "TabControlContext";
|
|
73
|
+
function P({ selected: e = 0, children: n }) {
|
|
74
|
+
const r = x(), [o, t] = y(I, { uid: r, value: e, refs: /* @__PURE__ */ new Map() }), a = u((s, c) => {
|
|
75
|
+
t({ type: "register", payload: { value: s, ref: c } });
|
|
76
|
+
}, []), l = u((s) => {
|
|
77
|
+
t({ type: "unregister", payload: { value: s } });
|
|
78
|
+
}, []);
|
|
79
|
+
return /* @__PURE__ */ f(d.Provider, { value: { ...o, dispatch: t, register: a, unregister: l }, children: n });
|
|
80
|
+
}
|
|
78
81
|
export {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
y as TabRefsContext,
|
|
82
|
-
A as TabsProvider
|
|
82
|
+
d as TabControlContext,
|
|
83
|
+
P as TabsProvider
|
|
83
84
|
};
|
|
84
85
|
//# sourceMappingURL=TabControl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabControl.js","sources":["../../../../lib/molecules/Tabs/context/TabControl.tsx"],"sourcesContent":["'use client';\n\nimport {\n type Dispatch,\n type
|
|
1
|
+
{"version":3,"file":"TabControl.js","sources":["../../../../lib/molecules/Tabs/context/TabControl.tsx"],"sourcesContent":["'use client';\n\nimport {\n createContext,\n type Dispatch,\n type PropsWithChildren,\n type RefObject,\n useCallback,\n useId,\n useReducer,\n} from 'react';\n\ntype RefTab<T extends HTMLElement = HTMLElement> = RefObject<T>;\ntype RefTabs<T extends HTMLElement = HTMLElement> = Map<number, RefTab<T>>;\n\ntype TabsUpdateAction = {\n type: 'update';\n payload: number;\n};\n\ntype TabsRegisterAction<T extends HTMLElement = HTMLElement> = {\n type: 'register';\n payload: { value: number; ref: RefObject<T> };\n};\n\ntype TabsUnregisterAction = {\n type: 'unregister';\n payload: { value: number };\n};\n\ntype TabsAction<T extends HTMLElement = HTMLElement> =\n | { type: 'start' | 'end' | 'previous' | 'next' }\n | TabsUpdateAction\n | TabsRegisterAction<T>\n | TabsUnregisterAction;\n\ninterface TabsState<T extends HTMLElement = HTMLElement> {\n uid: string;\n value: number;\n refs: RefTabs<T>;\n}\n\ninterface TabControl<T extends HTMLElement = HTMLElement> extends TabsState<T> {\n uid: string;\n value: number;\n refs: RefTabs<T>;\n dispatch: Dispatch<TabsAction>;\n register: (value: number, ref: RefTab<T>) => void;\n unregister: (value: number) => void;\n}\n\nfunction next(state: TabsState) {\n const keys = [...state.refs.keys()];\n const index = keys.findIndex((value) => value === state.value);\n const nextIndex = (index + 1) % keys.length;\n\n return { ...state, value: keys[nextIndex] };\n}\n\nfunction previous(state: TabsState) {\n const keys = [...state.refs.keys()];\n const index = keys.findIndex((value) => value === state.value);\n const previousIndex = (index - 1 + keys.length) % keys.length;\n\n return { ...state, value: keys[previousIndex] };\n}\n\nfunction start(state: TabsState) {\n const keys = [...state.refs.keys()];\n const firstIndex = keys[0];\n\n return {\n ...state,\n value: firstIndex,\n };\n}\n\nfunction end(state: TabsState) {\n const keys = [...state.refs.keys()];\n const lastIndex = keys[keys.length - 1];\n\n return {\n ...state,\n value: lastIndex,\n };\n}\n\nfunction unregister(state: TabsState, action: TabsUnregisterAction) {\n const deletedRefs = new Map(state.refs);\n deletedRefs.delete(action.payload.value);\n\n return {\n ...state,\n refs: deletedRefs,\n };\n}\n\nfunction register(state: TabsState, action: TabsRegisterAction) {\n return {\n ...state,\n refs: new Map(state.refs).set(action.payload.value, action.payload.ref),\n };\n}\n\nfunction update(state: TabsState, action: TabsUpdateAction) {\n return { ...state, value: action.payload };\n}\n\nconst actions = {\n next,\n previous,\n start,\n end,\n register,\n unregister,\n update,\n} as const;\n\nfunction tabsReducer(state: TabsState, action: TabsAction): TabsState {\n if (action.type in actions) {\n const actionFunction = actions[action.type] as (\n state: TabsState,\n action: TabsAction,\n ) => TabsState;\n\n return actionFunction(state, action);\n }\n\n return state;\n}\n\nexport const TabControlContext = createContext<TabControl>({\n uid: '',\n value: 0,\n refs: new Map(),\n dispatch: () => {\n console.warn('Tab Controller Context dispatch used outside of Provider');\n },\n register: () => {\n console.warn('Tab Controller Context register used outside of Provider');\n },\n unregister: () => {\n console.warn('Tab Controller Context unregister used outside of Provider');\n },\n});\n\nTabControlContext.displayName = 'TabControlContext';\n\nexport interface TabsProviderProps {\n selected?: number;\n /**\n * The selected tab value\n * @deprecated Min props as no effect on the Tabs component and will be removed in future versions\n */\n min?: number;\n\n /**\n * The selected tab value\n * @deprecated Max props as no effect on the Tabs component and will be removed in future versions\n */\n max?: number;\n}\n\nexport function TabsProvider({ selected = 0, children }: PropsWithChildren<TabsProviderProps>) {\n const uid = useId();\n const [state, dispatch] = useReducer(tabsReducer, { uid, value: selected, refs: new Map() });\n\n const register = useCallback(<T extends HTMLElement>(value: number, ref: RefTab<T>) => {\n dispatch({ type: 'register', payload: { value, ref } });\n }, []);\n\n const unregister = useCallback((value: number) => {\n dispatch({ type: 'unregister', payload: { value } });\n }, []);\n\n return (\n <TabControlContext.Provider value={{ ...state, dispatch, register, unregister }}>\n {children}\n </TabControlContext.Provider>\n );\n}\n"],"names":["next","state","keys","nextIndex","value","previous","previousIndex","start","firstIndex","end","lastIndex","unregister","action","deletedRefs","register","update","actions","tabsReducer","actionFunction","TabControlContext","createContext","TabsProvider","selected","children","uid","useId","dispatch","useReducer","useCallback","ref","jsx"],"mappings":"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"}
|
|
@@ -4,30 +4,41 @@ export declare const useTabDispatch: () => import("react").Dispatch<{
|
|
|
4
4
|
type: "update";
|
|
5
5
|
payload: number;
|
|
6
6
|
} | {
|
|
7
|
-
type: "
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
type: "unregister";
|
|
8
|
+
payload: {
|
|
9
|
+
value: number;
|
|
10
|
+
};
|
|
11
|
+
} | {
|
|
12
|
+
type: "start" | "end" | "next" | "previous";
|
|
13
|
+
} | {
|
|
14
|
+
type: "register";
|
|
15
|
+
payload: {
|
|
16
|
+
value: number;
|
|
17
|
+
ref: RefObject<HTMLElement>;
|
|
18
|
+
};
|
|
14
19
|
}>;
|
|
20
|
+
export declare const useTabsUid: () => string;
|
|
15
21
|
interface Props<T extends HTMLElement> {
|
|
16
22
|
value: number;
|
|
17
23
|
ref: RefObject<T>;
|
|
18
24
|
}
|
|
19
|
-
export declare
|
|
25
|
+
export declare function useRegisterTabControl<T extends HTMLElement>({ value, ref }: Props<T>): import("react").Dispatch<{
|
|
20
26
|
type: "update";
|
|
21
27
|
payload: number;
|
|
22
28
|
} | {
|
|
23
|
-
type: "
|
|
24
|
-
|
|
25
|
-
|
|
29
|
+
type: "unregister";
|
|
30
|
+
payload: {
|
|
31
|
+
value: number;
|
|
32
|
+
};
|
|
26
33
|
} | {
|
|
27
|
-
type: "start";
|
|
34
|
+
type: "start" | "end" | "next" | "previous";
|
|
28
35
|
} | {
|
|
29
|
-
type: "
|
|
36
|
+
type: "register";
|
|
37
|
+
payload: {
|
|
38
|
+
value: number;
|
|
39
|
+
ref: RefObject<HTMLElement>;
|
|
40
|
+
};
|
|
30
41
|
}>;
|
|
31
|
-
export declare const
|
|
42
|
+
export declare const useTabControls: () => Map<number, RefObject<HTMLElement>>;
|
|
32
43
|
export declare const useActiveTabControl: () => readonly [number, RefObject<HTMLElement> | undefined];
|
|
33
44
|
export {};
|
|
@@ -1,31 +1,34 @@
|
|
|
1
|
-
import { useContext as e, useEffect as
|
|
2
|
-
import {
|
|
3
|
-
const
|
|
4
|
-
const { value: t } = e(
|
|
1
|
+
import { useContext as e, useEffect as u } from "react";
|
|
2
|
+
import { TabControlContext as r } from "../context/TabControl.js";
|
|
3
|
+
const b = () => {
|
|
4
|
+
const { value: t } = e(r);
|
|
5
|
+
return t;
|
|
6
|
+
}, T = () => {
|
|
7
|
+
const { dispatch: t } = e(r);
|
|
5
8
|
return t;
|
|
6
9
|
}, f = () => {
|
|
7
|
-
const {
|
|
10
|
+
const { uid: t } = e(r);
|
|
8
11
|
return t;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
18
|
-
const { refs: t } = e(u);
|
|
12
|
+
};
|
|
13
|
+
function p({ value: t, ref: s }) {
|
|
14
|
+
const { dispatch: c, register: n, unregister: o } = e(r);
|
|
15
|
+
return u(() => (n(t, s), () => {
|
|
16
|
+
o(t);
|
|
17
|
+
}), [t, s, n, o]), c;
|
|
18
|
+
}
|
|
19
|
+
const C = () => {
|
|
20
|
+
const { refs: t } = e(r);
|
|
19
21
|
return t;
|
|
20
|
-
},
|
|
21
|
-
const { value: t
|
|
22
|
-
return [t,
|
|
22
|
+
}, d = () => {
|
|
23
|
+
const { value: t, refs: s } = e(r);
|
|
24
|
+
return [t, s.get(t)];
|
|
23
25
|
};
|
|
24
26
|
export {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
b as useActiveTab,
|
|
28
|
+
d as useActiveTabControl,
|
|
29
|
+
p as useRegisterTabControl,
|
|
30
|
+
C as useTabControls,
|
|
31
|
+
T as useTabDispatch,
|
|
32
|
+
f as useTabsUid
|
|
30
33
|
};
|
|
31
34
|
//# sourceMappingURL=tabControl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabControl.js","sources":["../../../../lib/molecules/Tabs/hooks/tabControl.ts"],"sourcesContent":["import { useContext, useEffect
|
|
1
|
+
{"version":3,"file":"tabControl.js","sources":["../../../../lib/molecules/Tabs/hooks/tabControl.ts"],"sourcesContent":["import { type RefObject, useContext, useEffect } from 'react';\n\nimport { TabControlContext } from '../context/TabControl';\n\nexport const useActiveTab = () => {\n const { value } = useContext(TabControlContext);\n\n return value;\n};\n\nexport const useTabDispatch = () => {\n const { dispatch } = useContext(TabControlContext);\n\n return dispatch;\n};\n\nexport const useTabsUid = () => {\n const { uid } = useContext(TabControlContext);\n\n return uid;\n};\n\ninterface Props<T extends HTMLElement> {\n value: number;\n ref: RefObject<T>;\n}\n\nexport function useRegisterTabControl<T extends HTMLElement>({ value, ref }: Props<T>) {\n const { dispatch, register, unregister } = useContext(TabControlContext);\n\n useEffect(() => {\n register(value, ref);\n\n return () => {\n unregister(value);\n };\n }, [value, ref, register, unregister]);\n\n return dispatch;\n}\n\nexport const useTabControls = () => {\n const { refs } = useContext(TabControlContext);\n\n return refs;\n};\n\nexport const useActiveTabControl = () => {\n const { value, refs } = useContext(TabControlContext);\n\n return [value, refs.get(value)] as const;\n};\n"],"names":["useActiveTab","value","useContext","TabControlContext","useTabDispatch","dispatch","useTabsUid","uid","useRegisterTabControl","ref","register","unregister","useEffect","useTabControls","refs","useActiveTabControl"],"mappings":";;AAIO,MAAMA,IAAe,MAAM;AAChC,QAAM,EAAE,OAAAC,EAAA,IAAUC,EAAWC,CAAiB;AAEvC,SAAAF;AACT,GAEaG,IAAiB,MAAM;AAClC,QAAM,EAAE,UAAAC,EAAA,IAAaH,EAAWC,CAAiB;AAE1C,SAAAE;AACT,GAEaC,IAAa,MAAM;AAC9B,QAAM,EAAE,KAAAC,EAAA,IAAQL,EAAWC,CAAiB;AAErC,SAAAI;AACT;AAOO,SAASC,EAA6C,EAAE,OAAAP,GAAO,KAAAQ,KAAiB;AACrF,QAAM,EAAE,UAAAJ,GAAU,UAAAK,GAAU,YAAAC,EAAW,IAAIT,EAAWC,CAAiB;AAEvE,SAAAS,EAAU,OACRF,EAAST,GAAOQ,CAAG,GAEZ,MAAM;AACX,IAAAE,EAAWV,CAAK;AAAA,EAAA,IAEjB,CAACA,GAAOQ,GAAKC,GAAUC,CAAU,CAAC,GAE9BN;AACT;AAEO,MAAMQ,IAAiB,MAAM;AAClC,QAAM,EAAE,MAAAC,EAAA,IAASZ,EAAWC,CAAiB;AAEtC,SAAAW;AACT,GAEaC,IAAsB,MAAM;AACvC,QAAM,EAAE,OAAAd,GAAO,MAAAa,EAAK,IAAIZ,EAAWC,CAAiB;AAEpD,SAAO,CAACF,GAAOa,EAAK,IAAIb,CAAK,CAAC;AAChC;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clubmed/trident-ui",
|
|
3
|
-
"version": "1.3.0-beta.
|
|
3
|
+
"version": "1.3.0-beta.4",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Shared ClubMed React UI components",
|
|
6
6
|
"keywords": [
|
|
@@ -51,16 +51,16 @@
|
|
|
51
51
|
"import": "./molecules/Forms/Checkboxes/index.js",
|
|
52
52
|
"default": "./molecules/Forms/Checkboxes/index.js"
|
|
53
53
|
},
|
|
54
|
-
"./molecules/Forms/Password": {
|
|
55
|
-
"types": "./molecules/Forms/Password/index.d.ts",
|
|
56
|
-
"import": "./molecules/Forms/Password/index.js",
|
|
57
|
-
"default": "./molecules/Forms/Password/index.js"
|
|
58
|
-
},
|
|
59
54
|
"./molecules/Forms/Radios": {
|
|
60
55
|
"types": "./molecules/Forms/Radios/index.d.ts",
|
|
61
56
|
"import": "./molecules/Forms/Radios/index.js",
|
|
62
57
|
"default": "./molecules/Forms/Radios/index.js"
|
|
63
58
|
},
|
|
59
|
+
"./molecules/Forms/Password": {
|
|
60
|
+
"types": "./molecules/Forms/Password/index.d.ts",
|
|
61
|
+
"import": "./molecules/Forms/Password/index.js",
|
|
62
|
+
"default": "./molecules/Forms/Password/index.js"
|
|
63
|
+
},
|
|
64
64
|
"./fonts/*": "./fonts/*",
|
|
65
65
|
"./atoms/*": {
|
|
66
66
|
"types": "./atoms/*.d.ts",
|