@clubmed/trident-ui 1.2.0-beta.5 → 1.2.0
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 +32 -0
- package/molecules/Tabs/Tab.d.ts +33 -0
- package/molecules/Tabs/Tab.js +101 -0
- package/molecules/Tabs/Tab.js.map +1 -0
- package/molecules/Tabs/TabList.d.ts +10 -0
- package/molecules/Tabs/TabList.js +62 -0
- package/molecules/Tabs/TabList.js.map +1 -0
- package/molecules/Tabs/TabPanel.d.ts +17 -0
- package/molecules/Tabs/TabPanel.js +60 -0
- package/molecules/Tabs/TabPanel.js.map +1 -0
- package/molecules/Tabs/TabsHeader.d.ts +6 -10
- package/molecules/Tabs/TabsHeader.js +3 -59
- package/molecules/Tabs/TabsHeader.js.map +1 -1
- package/molecules/Tabs/TabsHeading.d.ts +6 -33
- package/molecules/Tabs/TabsHeading.js +3 -98
- package/molecules/Tabs/TabsHeading.js.map +1 -1
- package/molecules/Tabs/TabsPanel.d.ts +6 -17
- package/molecules/Tabs/TabsPanel.js +3 -57
- package/molecules/Tabs/TabsPanel.js.map +1 -1
- package/molecules/Tabs/index.d.ts +3 -1
- package/molecules/Tabs/index.js +12 -8
- package/molecules/Tabs/index.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,37 @@
|
|
|
1
1
|
# ClubMed React UI components changelog
|
|
2
2
|
|
|
3
|
+
# [1.2.0](https://scm.clubmed.com/clubmed/cm-trident-ui/compare/v1.1.0...v1.2.0) (2024-11-25)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* **ci:** fix external option for @clubmed/trident-icons ([2b656c6](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/2b656c652395bb1076896675c16eea8abf7a4770))
|
|
9
|
+
* **ci:** fix external option for @clubmed/trident-icons and update version ([bd69323](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/bd69323a5a4f96b61a82a948c39762c6181ca134))
|
|
10
|
+
* **icons:** clean PeopleDouble svg ([cb2e723](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/cb2e723ffd5cede6da2bc5096e1dbc0094a01dac))
|
|
11
|
+
* **icons:** fix re-exported names in barrels files ([575c2c0](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/575c2c08c26fac157cd4000bc2d216157a52c875))
|
|
12
|
+
* update vite configuration to exclude correctly trident-icons from the final build ([ba80ead](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/ba80eadbd81b4f29add98dbebdf9a70dedebe71a))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* **icons:** use @clubmed/trident-icons ([8beaf95](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/8beaf950fd2a5ceb744914d42f890aced3536a9f))
|
|
18
|
+
|
|
19
|
+
# [1.2.0-rc.1](https://scm.clubmed.com/clubmed/cm-trident-ui/compare/v1.1.0...v1.2.0-rc.1) (2024-11-25)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### Bug Fixes
|
|
23
|
+
|
|
24
|
+
* **ci:** fix external option for @clubmed/trident-icons ([2b656c6](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/2b656c652395bb1076896675c16eea8abf7a4770))
|
|
25
|
+
* **ci:** fix external option for @clubmed/trident-icons and update version ([bd69323](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/bd69323a5a4f96b61a82a948c39762c6181ca134))
|
|
26
|
+
* **icons:** clean PeopleDouble svg ([cb2e723](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/cb2e723ffd5cede6da2bc5096e1dbc0094a01dac))
|
|
27
|
+
* **icons:** fix re-exported names in barrels files ([575c2c0](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/575c2c08c26fac157cd4000bc2d216157a52c875))
|
|
28
|
+
* update vite configuration to exclude correctly trident-icons from the final build ([ba80ead](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/ba80eadbd81b4f29add98dbebdf9a70dedebe71a))
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
### Features
|
|
32
|
+
|
|
33
|
+
* **icons:** use @clubmed/trident-icons ([8beaf95](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/8beaf950fd2a5ceb744914d42f890aced3536a9f))
|
|
34
|
+
|
|
3
35
|
# [1.2.0-beta.5](https://scm.clubmed.com/clubmed/cm-trident-ui/compare/v1.2.0-beta.4...v1.2.0-beta.5) (2024-11-23)
|
|
4
36
|
|
|
5
37
|
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { type FunctionComponent, type PropsWithChildren } from 'react';
|
|
2
|
+
import { type Theme } from './theme';
|
|
3
|
+
import './Tab.css';
|
|
4
|
+
interface Props {
|
|
5
|
+
className?: string;
|
|
6
|
+
/**
|
|
7
|
+
* Tab Heading text
|
|
8
|
+
*/
|
|
9
|
+
label: string;
|
|
10
|
+
/**
|
|
11
|
+
* Tab heading index<br/>
|
|
12
|
+
* _Can be **0** or **1** indexed_
|
|
13
|
+
*/
|
|
14
|
+
value: number;
|
|
15
|
+
/**
|
|
16
|
+
* on tab select handler
|
|
17
|
+
*/
|
|
18
|
+
onSelect?: (context: {
|
|
19
|
+
value: Props['value'];
|
|
20
|
+
label: Props['label'];
|
|
21
|
+
}) => void;
|
|
22
|
+
/**
|
|
23
|
+
* Tab Heading theme
|
|
24
|
+
*/
|
|
25
|
+
theme?: Theme;
|
|
26
|
+
/**
|
|
27
|
+
* Heading type
|
|
28
|
+
* _default: **h2**_
|
|
29
|
+
*/
|
|
30
|
+
as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
|
|
31
|
+
}
|
|
32
|
+
export declare const Tab: FunctionComponent<PropsWithChildren<Props>>;
|
|
33
|
+
export {};
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as u, jsxs as B } from "react/jsx-runtime";
|
|
3
|
+
import { c as m } from "../../chunks/index.js";
|
|
4
|
+
import { useRef as d, useEffect as I, useCallback as r } from "react";
|
|
5
|
+
import { animated as _ } from "@react-spring/web";
|
|
6
|
+
import { useActiveTab as z, useRegisterTabControl as G } from "./hooks/tabControl.js";
|
|
7
|
+
import { getTheme as M } from "./theme.js";
|
|
8
|
+
import { useSafeBoop as O } from "../../hooks/useSafeBoop.js";
|
|
9
|
+
import { useKeyboardControls as P } from "../../hooks/useKeyboardControls.js";
|
|
10
|
+
const f = "-z-1 rounded-pill absolute inset-0 duration-300", W = ({
|
|
11
|
+
className: b,
|
|
12
|
+
label: a,
|
|
13
|
+
children: y,
|
|
14
|
+
value: e,
|
|
15
|
+
onSelect: i,
|
|
16
|
+
as: g = "h2",
|
|
17
|
+
theme: h = "yellow"
|
|
18
|
+
}) => {
|
|
19
|
+
const p = d(null), o = z(), t = G({ value: e, ref: p }), l = d(o), n = d(o === e);
|
|
20
|
+
n.current = o === e;
|
|
21
|
+
const x = { "--tab-index": e }, { textColor: C, textColorActive: T, bgColor: w } = M(h), [A, c] = O({ scale: 1.02 });
|
|
22
|
+
I(() => {
|
|
23
|
+
var s;
|
|
24
|
+
l.current !== o && e === o && ((s = p.current) == null || s.focus(), i == null || i({ value: e, label: a })), l.current !== o && (l.current = o);
|
|
25
|
+
}, [a, e, i, o]);
|
|
26
|
+
const v = r(() => {
|
|
27
|
+
n.current && c();
|
|
28
|
+
}, [c]), N = r(() => {
|
|
29
|
+
t({ type: "start" });
|
|
30
|
+
}, [t]), k = r(() => {
|
|
31
|
+
t({ type: "end" });
|
|
32
|
+
}, [t]), L = r(() => {
|
|
33
|
+
t({ type: "previous" });
|
|
34
|
+
}, [t]), R = r(() => {
|
|
35
|
+
t({ type: "next" });
|
|
36
|
+
}, [t]), E = r(() => {
|
|
37
|
+
const s = document.documentElement.dir === "rtl";
|
|
38
|
+
t({ type: s ? "next" : "previous" });
|
|
39
|
+
}, [t]), K = r(() => {
|
|
40
|
+
const s = document.documentElement.dir === "rtl";
|
|
41
|
+
t({ type: s ? "previous" : "next" });
|
|
42
|
+
}, [t]), D = P({
|
|
43
|
+
activate: v,
|
|
44
|
+
start: N,
|
|
45
|
+
end: k,
|
|
46
|
+
up: L,
|
|
47
|
+
down: R,
|
|
48
|
+
left: E,
|
|
49
|
+
right: K
|
|
50
|
+
}), j = r(() => {
|
|
51
|
+
t({ type: "update", payload: e }), n.current && c();
|
|
52
|
+
}, [c, t, e]);
|
|
53
|
+
return /* @__PURE__ */ u(
|
|
54
|
+
_.div,
|
|
55
|
+
{
|
|
56
|
+
"data-name": "Tab",
|
|
57
|
+
ref: p,
|
|
58
|
+
role: "tab",
|
|
59
|
+
"aria-selected": n.current,
|
|
60
|
+
tabIndex: n.current ? 0 : -1,
|
|
61
|
+
style: A,
|
|
62
|
+
className: m(
|
|
63
|
+
"text-b3 group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle font-semibold outline-none",
|
|
64
|
+
b,
|
|
65
|
+
{
|
|
66
|
+
[C]: !n.current,
|
|
67
|
+
[T]: n.current
|
|
68
|
+
}
|
|
69
|
+
),
|
|
70
|
+
onKeyDown: D,
|
|
71
|
+
onClick: j,
|
|
72
|
+
children: /* @__PURE__ */ B(g, { className: "relative inline-block px-20 py-12", children: [
|
|
73
|
+
/* @__PURE__ */ u(
|
|
74
|
+
"span",
|
|
75
|
+
{
|
|
76
|
+
className: m(
|
|
77
|
+
"group-hover:bg-pearl group-focus-within:bg-pearl transition-colors",
|
|
78
|
+
f
|
|
79
|
+
)
|
|
80
|
+
}
|
|
81
|
+
),
|
|
82
|
+
/* @__PURE__ */ u(
|
|
83
|
+
"span",
|
|
84
|
+
{
|
|
85
|
+
className: m(
|
|
86
|
+
"tab-focus-pill ease transition-transform/colors",
|
|
87
|
+
f,
|
|
88
|
+
w
|
|
89
|
+
),
|
|
90
|
+
style: x
|
|
91
|
+
}
|
|
92
|
+
),
|
|
93
|
+
y ?? a
|
|
94
|
+
] })
|
|
95
|
+
}
|
|
96
|
+
);
|
|
97
|
+
};
|
|
98
|
+
export {
|
|
99
|
+
W as Tab
|
|
100
|
+
};
|
|
101
|
+
//# sourceMappingURL=Tab.js.map
|
|
@@ -0,0 +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: 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 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 data-name=\"Tab\"\n ref={ref}\n role=\"tab\"\n aria-selected={isActive.current}\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","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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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type FunctionComponent, type PropsWithChildren } from 'react';
|
|
2
|
+
interface Props {
|
|
3
|
+
className?: string;
|
|
4
|
+
/**
|
|
5
|
+
* Remove filler placeholders
|
|
6
|
+
*/
|
|
7
|
+
constrained?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare const TabList: FunctionComponent<PropsWithChildren<Props>>;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as l, jsxs as d } from "react/jsx-runtime";
|
|
3
|
+
import { c as t } from "../../chunks/index.js";
|
|
4
|
+
import { useRef as f, useEffect as v } from "react";
|
|
5
|
+
import { useSpring as b, animated as h } from "@react-spring/web";
|
|
6
|
+
import { useActiveTabControl as L } from "./hooks/tabControl.js";
|
|
7
|
+
const k = ({
|
|
8
|
+
className: n,
|
|
9
|
+
constrained: r = !1,
|
|
10
|
+
children: i
|
|
11
|
+
}) => {
|
|
12
|
+
const s = f(null), c = f(null), [m, e] = L(), [{ scrollLeft: a }, o] = b(() => ({
|
|
13
|
+
from: { scrollLeft: 0 }
|
|
14
|
+
}));
|
|
15
|
+
v(() => {
|
|
16
|
+
if (!(e != null && e.current))
|
|
17
|
+
return;
|
|
18
|
+
const p = e.current.getBoundingClientRect().left, u = s.current.scrollLeft, w = c.current.offsetWidth;
|
|
19
|
+
o.start({
|
|
20
|
+
to: {
|
|
21
|
+
scrollLeft: u + p - w
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
}, [a, e, o]);
|
|
25
|
+
const x = { "--active-tab": m };
|
|
26
|
+
return /* @__PURE__ */ l(
|
|
27
|
+
h.div,
|
|
28
|
+
{
|
|
29
|
+
ref: s,
|
|
30
|
+
"data-name": "TabsHeader",
|
|
31
|
+
className: t(
|
|
32
|
+
"scrollbar-hide relative flex max-w-full overflow-x-scroll py-20",
|
|
33
|
+
n
|
|
34
|
+
),
|
|
35
|
+
scrollLeft: a,
|
|
36
|
+
children: /* @__PURE__ */ d("div", { role: "tablist", className: t("flex flex-row"), style: x, children: [
|
|
37
|
+
/* @__PURE__ */ l(
|
|
38
|
+
"div",
|
|
39
|
+
{
|
|
40
|
+
ref: c,
|
|
41
|
+
className: t("shrink-0", {
|
|
42
|
+
"w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !r
|
|
43
|
+
})
|
|
44
|
+
}
|
|
45
|
+
),
|
|
46
|
+
i,
|
|
47
|
+
/* @__PURE__ */ l(
|
|
48
|
+
"div",
|
|
49
|
+
{
|
|
50
|
+
className: t("shrink-0", {
|
|
51
|
+
"w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !r
|
|
52
|
+
})
|
|
53
|
+
}
|
|
54
|
+
)
|
|
55
|
+
] })
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
};
|
|
59
|
+
export {
|
|
60
|
+
k as TabList
|
|
61
|
+
};
|
|
62
|
+
//# sourceMappingURL=TabList.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TabList.js","sources":["../../../lib/molecules/Tabs/TabList.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n type CSSProperties,\n useEffect,\n useRef,\n type FunctionComponent,\n type PropsWithChildren,\n} from 'react';\nimport { animated, useSpring } from '@react-spring/web';\n\nimport { useActiveTabControl } from './hooks/tabControl';\n\ninterface Props {\n className?: string;\n /**\n * Remove filler placeholders\n */\n constrained?: boolean;\n}\n\nexport const TabList: FunctionComponent<PropsWithChildren<Props>> = ({\n className,\n constrained = false,\n children,\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const spacerRef = useRef<HTMLDivElement>(null);\n const [currentTab, currentControl] = useActiveTabControl();\n\n const [{ scrollLeft }, scrollApi] = useSpring(() => ({\n from: { scrollLeft: 0 },\n }));\n\n useEffect(() => {\n if (!currentControl?.current) {\n return;\n }\n\n const tabLeft = currentControl.current.getBoundingClientRect().left;\n const scrollLeft = containerRef.current!.scrollLeft;\n const spacerWidth = spacerRef.current!.offsetWidth;\n\n scrollApi.start({\n to: {\n scrollLeft: scrollLeft + tabLeft - spacerWidth,\n },\n });\n }, [scrollLeft, currentControl, scrollApi]);\n\n const style = { '--active-tab': currentTab } as CSSProperties;\n\n return (\n <animated.div\n ref={containerRef}\n data-name=\"TabsHeader\"\n className={classnames(\n 'scrollbar-hide relative flex max-w-full overflow-x-scroll py-20',\n className,\n )}\n scrollLeft={scrollLeft}\n >\n <div role=\"tablist\" className={classnames('flex flex-row')} style={style}>\n <div\n ref={spacerRef}\n className={classnames('shrink-0', {\n 'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n !constrained,\n })}\n />\n {children}\n <div\n className={classnames('shrink-0', {\n 'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n !constrained,\n })}\n />\n </div>\n </animated.div>\n );\n};\n"],"names":["TabList","className","constrained","children","containerRef","useRef","spacerRef","currentTab","currentControl","useActiveTabControl","scrollLeft","scrollApi","useSpring","useEffect","tabLeft","spacerWidth","style","jsx","animated","classnames","jsxs"],"mappings":";;;;;;AAsBO,MAAMA,IAAuD,CAAC;AAAA,EACnE,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC;AACF,MAAM;AACE,QAAAC,IAAeC,EAAuB,IAAI,GAC1CC,IAAYD,EAAuB,IAAI,GACvC,CAACE,GAAYC,CAAc,IAAIC,EAAoB,GAEnD,CAAC,EAAE,YAAAC,EAAA,GAAcC,CAAS,IAAIC,EAAU,OAAO;AAAA,IACnD,MAAM,EAAE,YAAY,EAAE;AAAA,EACtB,EAAA;AAEF,EAAAC,EAAU,MAAM;AACV,QAAA,EAACL,KAAA,QAAAA,EAAgB;AACnB;AAGF,UAAMM,IAAUN,EAAe,QAAQ,sBAAA,EAAwB,MACzDE,IAAaN,EAAa,QAAS,YACnCW,IAAcT,EAAU,QAAS;AAEvC,IAAAK,EAAU,MAAM;AAAA,MACd,IAAI;AAAA,QACF,YAAYD,IAAaI,IAAUC;AAAA,MACrC;AAAA,IAAA,CACD;AAAA,EACA,GAAA,CAACL,GAAYF,GAAgBG,CAAS,CAAC;AAEpC,QAAAK,IAAQ,EAAE,gBAAgBT;AAG9B,SAAA,gBAAAU;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,KAAKd;AAAA,MACL,aAAU;AAAA,MACV,WAAWe;AAAA,QACT;AAAA,QACAlB;AAAA,MACF;AAAA,MACA,YAAAS;AAAA,MAEA,UAAA,gBAAAU,EAAC,SAAI,MAAK,WAAU,WAAWD,EAAW,eAAe,GAAG,OAAAH,GAC1D,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKX;AAAA,YACL,WAAWa,EAAW,YAAY;AAAA,cAChC,0FACE,CAACjB;AAAA,YAAA,CACJ;AAAA,UAAA;AAAA,QACH;AAAA,QACCC;AAAA,QACD,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE,EAAW,YAAY;AAAA,cAChC,0FACE,CAACjB;AAAA,YAAA,CACJ;AAAA,UAAA;AAAA,QACH;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type FunctionComponent, type PropsWithChildren } from 'react';
|
|
2
|
+
interface Props {
|
|
3
|
+
className?: string;
|
|
4
|
+
/**
|
|
5
|
+
* Tab panel index<br/>
|
|
6
|
+
* _Can be **0** or **1** indexed_
|
|
7
|
+
*/
|
|
8
|
+
value: number;
|
|
9
|
+
/**
|
|
10
|
+
* on panel select handler
|
|
11
|
+
*/
|
|
12
|
+
onSelect?: (context: {
|
|
13
|
+
value: Props['value'];
|
|
14
|
+
}) => void;
|
|
15
|
+
}
|
|
16
|
+
export declare const TabPanel: FunctionComponent<PropsWithChildren<Props>>;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as p } from "react/jsx-runtime";
|
|
3
|
+
import { c as d } from "../../chunks/index.js";
|
|
4
|
+
import { useRef as l, useEffect as f } from "react";
|
|
5
|
+
import { useSpring as u, animated as b } from "@react-spring/web";
|
|
6
|
+
import { useActiveTab as y } from "./hooks/tabControl.js";
|
|
7
|
+
const a = {
|
|
8
|
+
opacity: 0,
|
|
9
|
+
pointerEvents: "none",
|
|
10
|
+
display: "none"
|
|
11
|
+
}, n = {
|
|
12
|
+
opacity: 1,
|
|
13
|
+
pointerEvents: "auto",
|
|
14
|
+
display: "block"
|
|
15
|
+
}, R = ({
|
|
16
|
+
value: o,
|
|
17
|
+
className: i,
|
|
18
|
+
onSelect: e,
|
|
19
|
+
children: c
|
|
20
|
+
}) => {
|
|
21
|
+
const r = l(!1), t = y() === o, [m, s] = u(() => ({
|
|
22
|
+
from: t ? n : a
|
|
23
|
+
}));
|
|
24
|
+
return f(() => {
|
|
25
|
+
if (!r.current) {
|
|
26
|
+
r.current = !0;
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
s.start({
|
|
30
|
+
to: {
|
|
31
|
+
...t ? n : a,
|
|
32
|
+
display: "block"
|
|
33
|
+
},
|
|
34
|
+
onRest: () => {
|
|
35
|
+
s.start({
|
|
36
|
+
to: { display: t ? "block" : "none" },
|
|
37
|
+
immediate: !0
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
}), t && (e == null || e({ value: o }));
|
|
41
|
+
}, [t, s, o, e]), /* @__PURE__ */ p(
|
|
42
|
+
b.div,
|
|
43
|
+
{
|
|
44
|
+
"data-name": "Tab",
|
|
45
|
+
style: m,
|
|
46
|
+
role: "tabpanel",
|
|
47
|
+
"aria-hidden": !t,
|
|
48
|
+
tabIndex: t ? 0 : -1,
|
|
49
|
+
className: d("col-start-1 col-end-1 row-start-1 row-end-1", i, {
|
|
50
|
+
"z-0": !t,
|
|
51
|
+
"z-1": t
|
|
52
|
+
}),
|
|
53
|
+
children: c
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
export {
|
|
58
|
+
R as TabPanel
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=TabPanel.js.map
|
|
@@ -0,0 +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 display: 'block' | 'none';\n}\n\nconst FROM: TabStyle = {\n opacity: 0,\n pointerEvents: 'none',\n display: 'none',\n};\n\nconst TO: TabStyle = {\n opacity: 1,\n pointerEvents: 'auto',\n display: 'block',\n};\n\nexport const TabPanel: FunctionComponent<PropsWithChildren<Props>> = ({\n value,\n className,\n onSelect,\n children,\n}) => {\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 display: 'block',\n },\n onRest: () => {\n styleApi.start({\n to: { display: isActive ? 'block' : 'none' },\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 data-name=\"Tab\"\n style={style}\n role=\"tabpanel\"\n aria-hidden={!isActive}\n tabIndex={isActive ? 0 : -1}\n className={classnames('col-start-1 col-end-1 row-start-1 row-end-1', className, {\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","mounted","useRef","isActive","useActiveTab","style","styleApi","useSpring","useEffect","jsx","animated","classnames"],"mappings":";;;;;;AA2BA,MAAMA,IAAiB;AAAA,EACrB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,SAAS;AACX,GAEMC,IAAe;AAAA,EACnB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,SAAS;AACX,GAEaC,IAAwD,CAAC;AAAA,EACpE,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACE,QAAAC,IAAUC,EAAO,EAAK,GAEtBC,IADcC,QACaP,GAE3B,CAACQ,GAAOC,CAAQ,IAAIC,EAAoB,OAAO;AAAA,IACnD,MAAMJ,IAAWR,IAAKD;AAAA,EACtB,EAAA;AAEF,SAAAc,EAAU,MAAM;AACV,QAAA,CAACP,EAAQ,SAAS;AACpB,MAAAA,EAAQ,UAAU;AAClB;AAAA,IACF;AAEA,IAAAK,EAAS,MAAM;AAAA,MACb,IAAI;AAAA,QACF,GAAIH,IAAWR,IAAKD;AAAA,QACpB,SAAS;AAAA,MACX;AAAA,MACA,QAAQ,MAAM;AACZ,QAAAY,EAAS,MAAM;AAAA,UACb,IAAI,EAAE,SAASH,IAAW,UAAU,OAAO;AAAA,UAC3C,WAAW;AAAA,QAAA,CACZ;AAAA,MACH;AAAA,IAAA,CACD,GAEGA,MACSJ,KAAA,QAAAA,EAAA,EAAE,OAAAF;KAEd,CAACM,GAAUG,GAAUT,GAAOE,CAAQ,CAAC,GAGtC,gBAAAU;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,aAAU;AAAA,MACV,OAAAL;AAAA,MACA,MAAK;AAAA,MACL,eAAa,CAACF;AAAA,MACd,UAAUA,IAAW,IAAI;AAAA,MACzB,WAAWQ,EAAW,+CAA+Cb,GAAW;AAAA,QAC9E,OAAO,CAACK;AAAA,QACR,OAAOA;AAAA,MAAA,CACR;AAAA,MAEA,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
constrained?: boolean;
|
|
8
|
-
}
|
|
9
|
-
export declare const TabsHeader: FunctionComponent<PropsWithChildren<Props>>;
|
|
10
|
-
export {};
|
|
1
|
+
import { TabList } from './TabList';
|
|
2
|
+
/**
|
|
3
|
+
* @deprecated Use TabList component instead. This component will be removed in the next major version.
|
|
4
|
+
* @since 2024-11-21
|
|
5
|
+
*/
|
|
6
|
+
export declare const TabsHeader: typeof TabList;
|
|
@@ -1,62 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { c as l } from "../../chunks/index.js";
|
|
4
|
-
import { useRef as f, useEffect as v } from "react";
|
|
5
|
-
import { useSpring as b, animated as h } from "@react-spring/web";
|
|
6
|
-
import { useActiveTabControl as L } from "./hooks/tabControl.js";
|
|
7
|
-
const k = ({
|
|
8
|
-
className: n,
|
|
9
|
-
constrained: t = !1,
|
|
10
|
-
children: i
|
|
11
|
-
}) => {
|
|
12
|
-
const s = f(null), c = f(null), [m, e] = L(), [{ scrollLeft: a }, o] = b(() => ({
|
|
13
|
-
from: { scrollLeft: 0 }
|
|
14
|
-
}));
|
|
15
|
-
v(() => {
|
|
16
|
-
if (!(e != null && e.current))
|
|
17
|
-
return;
|
|
18
|
-
const p = e.current.getBoundingClientRect().left, u = s.current.scrollLeft, d = c.current.offsetWidth;
|
|
19
|
-
o.start({
|
|
20
|
-
to: {
|
|
21
|
-
scrollLeft: u + p - d
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
}, [a, e, o]);
|
|
25
|
-
const x = { "--active-tab": m };
|
|
26
|
-
return /* @__PURE__ */ r(
|
|
27
|
-
h.div,
|
|
28
|
-
{
|
|
29
|
-
ref: s,
|
|
30
|
-
"data-name": "TabsHeader",
|
|
31
|
-
className: l(
|
|
32
|
-
"scrollbar-hide relative flex max-w-full overflow-x-scroll py-20",
|
|
33
|
-
n
|
|
34
|
-
),
|
|
35
|
-
scrollLeft: a,
|
|
36
|
-
children: /* @__PURE__ */ w("div", { role: "tablist", className: l("flex flex-row"), style: x, children: [
|
|
37
|
-
/* @__PURE__ */ r(
|
|
38
|
-
"div",
|
|
39
|
-
{
|
|
40
|
-
ref: c,
|
|
41
|
-
className: l("shrink-0", {
|
|
42
|
-
"w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !t
|
|
43
|
-
})
|
|
44
|
-
}
|
|
45
|
-
),
|
|
46
|
-
i,
|
|
47
|
-
/* @__PURE__ */ r(
|
|
48
|
-
"div",
|
|
49
|
-
{
|
|
50
|
-
className: l("shrink-0", {
|
|
51
|
-
"w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !t
|
|
52
|
-
})
|
|
53
|
-
}
|
|
54
|
-
)
|
|
55
|
-
] })
|
|
56
|
-
}
|
|
57
|
-
);
|
|
58
|
-
};
|
|
1
|
+
import { TabList as o } from "./TabList.js";
|
|
2
|
+
const t = o;
|
|
59
3
|
export {
|
|
60
|
-
|
|
4
|
+
t as TabsHeader
|
|
61
5
|
};
|
|
62
6
|
//# sourceMappingURL=TabsHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsHeader.js","sources":["../../../lib/molecules/Tabs/TabsHeader.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"TabsHeader.js","sources":["../../../lib/molecules/Tabs/TabsHeader.tsx"],"sourcesContent":["import { TabList } from './TabList';\n\n/**\n * @deprecated Use TabList component instead. This component will be removed in the next major version.\n * @since 2024-11-21\n */\nexport const TabsHeader: typeof TabList = TabList;\n"],"names":["TabsHeader","TabList"],"mappings":";AAMO,MAAMA,IAA6BC;"}
|
|
@@ -1,33 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
* Tab Heading text
|
|
8
|
-
*/
|
|
9
|
-
label: string;
|
|
10
|
-
/**
|
|
11
|
-
* Tab heading index<br/>
|
|
12
|
-
* _Can be **0** or **1** indexed_
|
|
13
|
-
*/
|
|
14
|
-
value: number;
|
|
15
|
-
/**
|
|
16
|
-
* on tab select handler
|
|
17
|
-
*/
|
|
18
|
-
onSelect?: (context: {
|
|
19
|
-
value: Props['value'];
|
|
20
|
-
label: Props['label'];
|
|
21
|
-
}) => void;
|
|
22
|
-
/**
|
|
23
|
-
* Tab Heading theme
|
|
24
|
-
*/
|
|
25
|
-
theme?: Theme;
|
|
26
|
-
/**
|
|
27
|
-
* Heading type
|
|
28
|
-
* _default: **h2**_
|
|
29
|
-
*/
|
|
30
|
-
as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
|
|
31
|
-
}
|
|
32
|
-
export declare const TabsHeading: FunctionComponent<PropsWithChildren<Props>>;
|
|
33
|
-
export {};
|
|
1
|
+
import { Tab } from './Tab';
|
|
2
|
+
/**
|
|
3
|
+
* @deprecated Use Tab component instead. This component will be removed in the next major version.
|
|
4
|
+
* @since 2024-11-21
|
|
5
|
+
*/
|
|
6
|
+
export declare const TabsHeading: typeof Tab;
|
|
@@ -1,101 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { c as d } from "../../chunks/index.js";
|
|
4
|
-
import { useRef as m, useEffect as H, useCallback as r } from "react";
|
|
5
|
-
import { animated as I } from "@react-spring/web";
|
|
6
|
-
import { useActiveTab as _, 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", W = ({
|
|
11
|
-
className: b,
|
|
12
|
-
label: a,
|
|
13
|
-
children: y,
|
|
14
|
-
value: e,
|
|
15
|
-
onSelect: i,
|
|
16
|
-
as: g = "h2",
|
|
17
|
-
theme: h = "yellow"
|
|
18
|
-
}) => {
|
|
19
|
-
const p = m(null), o = _(), t = z({ value: e, ref: p }), l = m(o), n = m(o === e);
|
|
20
|
-
n.current = o === e;
|
|
21
|
-
const x = { "--tab-index": e }, { textColor: C, textColorActive: T, bgColor: w } = G(h), [A, c] = M({ scale: 1.02 });
|
|
22
|
-
H(() => {
|
|
23
|
-
var s;
|
|
24
|
-
l.current !== o && e === o && ((s = p.current) == null || s.focus(), i == null || i({ value: e, label: a })), l.current !== o && (l.current = o);
|
|
25
|
-
}, [a, e, i, o]);
|
|
26
|
-
const v = r(() => {
|
|
27
|
-
n.current && c();
|
|
28
|
-
}, [c]), N = r(() => {
|
|
29
|
-
t({ type: "start" });
|
|
30
|
-
}, [t]), k = r(() => {
|
|
31
|
-
t({ type: "end" });
|
|
32
|
-
}, [t]), L = r(() => {
|
|
33
|
-
t({ type: "previous" });
|
|
34
|
-
}, [t]), R = r(() => {
|
|
35
|
-
t({ type: "next" });
|
|
36
|
-
}, [t]), E = r(() => {
|
|
37
|
-
const s = document.documentElement.dir === "rtl";
|
|
38
|
-
t({ type: s ? "next" : "previous" });
|
|
39
|
-
}, [t]), K = r(() => {
|
|
40
|
-
const s = document.documentElement.dir === "rtl";
|
|
41
|
-
t({ type: s ? "previous" : "next" });
|
|
42
|
-
}, [t]), D = O({
|
|
43
|
-
activate: v,
|
|
44
|
-
start: N,
|
|
45
|
-
end: k,
|
|
46
|
-
up: L,
|
|
47
|
-
down: R,
|
|
48
|
-
left: E,
|
|
49
|
-
right: K
|
|
50
|
-
}), j = r(() => {
|
|
51
|
-
t({ type: "update", payload: e }), n.current && c();
|
|
52
|
-
}, [c, t, e]);
|
|
53
|
-
return /* @__PURE__ */ u(
|
|
54
|
-
I.div,
|
|
55
|
-
{
|
|
56
|
-
"data-name": "TabsHeading",
|
|
57
|
-
ref: p,
|
|
58
|
-
role: "tab",
|
|
59
|
-
"aria-selected": n.current,
|
|
60
|
-
tabIndex: n.current ? 0 : -1,
|
|
61
|
-
style: A,
|
|
62
|
-
className: d(
|
|
63
|
-
"text-b3 group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle font-semibold outline-none",
|
|
64
|
-
b,
|
|
65
|
-
{
|
|
66
|
-
[C]: !n.current,
|
|
67
|
-
[T]: n.current
|
|
68
|
-
}
|
|
69
|
-
),
|
|
70
|
-
onKeyDown: D,
|
|
71
|
-
onClick: j,
|
|
72
|
-
children: /* @__PURE__ */ B(g, { className: "relative inline-block px-20 py-12", children: [
|
|
73
|
-
/* @__PURE__ */ u(
|
|
74
|
-
"span",
|
|
75
|
-
{
|
|
76
|
-
className: d(
|
|
77
|
-
"group-hover:bg-pearl group-focus-within:bg-pearl transition-colors",
|
|
78
|
-
f
|
|
79
|
-
)
|
|
80
|
-
}
|
|
81
|
-
),
|
|
82
|
-
/* @__PURE__ */ u(
|
|
83
|
-
"span",
|
|
84
|
-
{
|
|
85
|
-
className: d(
|
|
86
|
-
"tab-focus-pill ease transition-transform/colors",
|
|
87
|
-
f,
|
|
88
|
-
w
|
|
89
|
-
),
|
|
90
|
-
style: x
|
|
91
|
-
}
|
|
92
|
-
),
|
|
93
|
-
y ?? a
|
|
94
|
-
] })
|
|
95
|
-
}
|
|
96
|
-
);
|
|
97
|
-
};
|
|
1
|
+
import { Tab as o } from "./Tab.js";
|
|
2
|
+
const r = o;
|
|
98
3
|
export {
|
|
99
|
-
|
|
4
|
+
r as TabsHeading
|
|
100
5
|
};
|
|
101
6
|
//# sourceMappingURL=TabsHeading.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsHeading.js","sources":["../../../lib/molecules/Tabs/TabsHeading.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"TabsHeading.js","sources":["../../../lib/molecules/Tabs/TabsHeading.tsx"],"sourcesContent":["import { Tab } from './Tab';\n\n/**\n * @deprecated Use Tab component instead. This component will be removed in the next major version.\n * @since 2024-11-21\n */\nexport const TabsHeading: typeof Tab = Tab;\n"],"names":["TabsHeading","Tab"],"mappings":";AAMO,MAAMA,IAA0BC;"}
|
|
@@ -1,17 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
*/
|
|
8
|
-
value: number;
|
|
9
|
-
/**
|
|
10
|
-
* on panel select handler
|
|
11
|
-
*/
|
|
12
|
-
onSelect?: (context: {
|
|
13
|
-
value: Props['value'];
|
|
14
|
-
}) => void;
|
|
15
|
-
}
|
|
16
|
-
export declare const TabsPanel: FunctionComponent<PropsWithChildren<Props>>;
|
|
17
|
-
export {};
|
|
1
|
+
import { TabPanel } from './TabPanel';
|
|
2
|
+
/**
|
|
3
|
+
* @deprecated Use TabPanel component instead. This component will be removed in the next major version.
|
|
4
|
+
* @since 2024-11-21
|
|
5
|
+
*/
|
|
6
|
+
export declare const TabsPanel: typeof TabPanel;
|
|
@@ -1,60 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { c as d } from "../../chunks/index.js";
|
|
4
|
-
import { useRef as l, useEffect as f } from "react";
|
|
5
|
-
import { useSpring as u, animated as b } from "@react-spring/web";
|
|
6
|
-
import { useActiveTab as y } from "./hooks/tabControl.js";
|
|
7
|
-
const a = {
|
|
8
|
-
opacity: 0,
|
|
9
|
-
pointerEvents: "none",
|
|
10
|
-
display: "none"
|
|
11
|
-
}, n = {
|
|
12
|
-
opacity: 1,
|
|
13
|
-
pointerEvents: "auto",
|
|
14
|
-
display: "block"
|
|
15
|
-
}, R = ({
|
|
16
|
-
value: s,
|
|
17
|
-
className: i,
|
|
18
|
-
onSelect: e,
|
|
19
|
-
children: c
|
|
20
|
-
}) => {
|
|
21
|
-
const r = l(!1), t = y() === s, [m, o] = u(() => ({
|
|
22
|
-
from: t ? n : a
|
|
23
|
-
}));
|
|
24
|
-
return f(() => {
|
|
25
|
-
if (!r.current) {
|
|
26
|
-
r.current = !0;
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
o.start({
|
|
30
|
-
to: {
|
|
31
|
-
...t ? n : a,
|
|
32
|
-
display: "block"
|
|
33
|
-
},
|
|
34
|
-
onRest: () => {
|
|
35
|
-
o.start({
|
|
36
|
-
to: { display: t ? "block" : "none" },
|
|
37
|
-
immediate: !0
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
}), t && (e == null || e({ value: s }));
|
|
41
|
-
}, [t, o, s, e]), /* @__PURE__ */ p(
|
|
42
|
-
b.div,
|
|
43
|
-
{
|
|
44
|
-
"data-name": "Tab",
|
|
45
|
-
style: m,
|
|
46
|
-
role: "tabpanel",
|
|
47
|
-
"aria-hidden": !t,
|
|
48
|
-
tabIndex: t ? 0 : -1,
|
|
49
|
-
className: d("col-start-1 col-end-1 row-start-1 row-end-1", i, {
|
|
50
|
-
"z-0": !t,
|
|
51
|
-
"z-1": t
|
|
52
|
-
}),
|
|
53
|
-
children: c
|
|
54
|
-
}
|
|
55
|
-
);
|
|
56
|
-
};
|
|
1
|
+
import { TabPanel as a } from "./TabPanel.js";
|
|
2
|
+
const e = a;
|
|
57
3
|
export {
|
|
58
|
-
|
|
4
|
+
e as TabsPanel
|
|
59
5
|
};
|
|
60
6
|
//# sourceMappingURL=TabsPanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsPanel.js","sources":["../../../lib/molecules/Tabs/TabsPanel.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"TabsPanel.js","sources":["../../../lib/molecules/Tabs/TabsPanel.tsx"],"sourcesContent":["import { TabPanel } from './TabPanel';\n\n/**\n * @deprecated Use TabPanel component instead. This component will be removed in the next major version.\n * @since 2024-11-21\n */\nexport const TabsPanel: typeof TabPanel = TabPanel;\n"],"names":["TabsPanel","TabPanel"],"mappings":";AAMO,MAAMA,IAA6BC;"}
|
package/molecules/Tabs/index.js
CHANGED
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import { Tabs as e } from "./Tabs.js";
|
|
2
|
-
import { TabsBody as
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
2
|
+
import { TabsBody as t } from "./TabsBody.js";
|
|
3
|
+
import { TabList as f } from "./TabList.js";
|
|
4
|
+
import { TabsHeader as p } from "./TabsHeader.js";
|
|
5
|
+
import { Tab as T } from "./Tab.js";
|
|
6
|
+
import { TabsHeading as d } from "./TabsHeading.js";
|
|
7
|
+
import { TabPanel as n } from "./TabPanel.js";
|
|
6
8
|
export {
|
|
9
|
+
T as Tab,
|
|
10
|
+
f as TabList,
|
|
11
|
+
n as TabPanel,
|
|
7
12
|
e as Tabs,
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
x as TabsPanel
|
|
13
|
+
t as TabsBody,
|
|
14
|
+
p as TabsHeader,
|
|
15
|
+
d as TabsHeading
|
|
12
16
|
};
|
|
13
17
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
|