@purpurds/tabs 3.0.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/dist/LICENSE.txt +201 -0
- package/dist/__mocks__/intersectionObserverMock.d.ts +2 -0
- package/dist/__mocks__/intersectionObserverMock.d.ts.map +1 -0
- package/dist/styles.css +1 -0
- package/dist/tab-content.d.ts +21 -0
- package/dist/tab-content.d.ts.map +1 -0
- package/dist/tab-header.d.ts +13 -0
- package/dist/tab-header.d.ts.map +1 -0
- package/dist/tabs.cjs.js +10 -0
- package/dist/tabs.cjs.js.map +1 -0
- package/dist/tabs.d.ts +17 -0
- package/dist/tabs.d.ts.map +1 -0
- package/dist/tabs.es.js +988 -0
- package/dist/tabs.es.js.map +1 -0
- package/dist/tabs.system.js +10 -0
- package/dist/tabs.system.js.map +1 -0
- package/dist/tabs.utils.d.ts +12 -0
- package/dist/tabs.utils.d.ts.map +1 -0
- package/package.json +62 -0
- package/readme.mdx +68 -0
- package/src/__mocks__/intersectionObserverMock.ts +8 -0
- package/src/global.d.ts +4 -0
- package/src/tab-content.module.scss +20 -0
- package/src/tab-content.stories.tsx +43 -0
- package/src/tab-content.test.tsx +40 -0
- package/src/tab-content.tsx +67 -0
- package/src/tab-header.module.scss +121 -0
- package/src/tab-header.tsx +37 -0
- package/src/tabs.module.scss +158 -0
- package/src/tabs.stories.tsx +81 -0
- package/src/tabs.test.tsx +163 -0
- package/src/tabs.tsx +253 -0
- package/src/tabs.utils.ts +14 -0
package/dist/LICENSE.txt
ADDED
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
Name: @purpurds/icon
|
|
2
|
+
Version: 2.8.0
|
|
3
|
+
License: AGPL-3.0-only
|
|
4
|
+
Private: false
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
Name: @babel/runtime
|
|
9
|
+
Version: 7.23.5
|
|
10
|
+
License: MIT
|
|
11
|
+
Private: false
|
|
12
|
+
Description: babel's modular runtime helpers
|
|
13
|
+
Repository: https://github.com/babel/babel.git
|
|
14
|
+
Homepage: https://babel.dev/docs/en/next/babel-runtime
|
|
15
|
+
Author: The Babel Team (https://babel.dev/team)
|
|
16
|
+
License Copyright:
|
|
17
|
+
===
|
|
18
|
+
|
|
19
|
+
MIT License
|
|
20
|
+
|
|
21
|
+
Copyright (c) 2014-present Sebastian McKenzie and other contributors
|
|
22
|
+
|
|
23
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
|
24
|
+
a copy of this software and associated documentation files (the
|
|
25
|
+
"Software"), to deal in the Software without restriction, including
|
|
26
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
|
27
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
|
28
|
+
permit persons to whom the Software is furnished to do so, subject to
|
|
29
|
+
the following conditions:
|
|
30
|
+
|
|
31
|
+
The above copyright notice and this permission notice shall be
|
|
32
|
+
included in all copies or substantial portions of the Software.
|
|
33
|
+
|
|
34
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
35
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
36
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
37
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
38
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
|
39
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
40
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
Name: @radix-ui/primitive
|
|
46
|
+
Version: 1.0.1
|
|
47
|
+
License: MIT
|
|
48
|
+
Private: false
|
|
49
|
+
Repository: git+https://github.com/radix-ui/primitives.git
|
|
50
|
+
Homepage: https://radix-ui.com/primitives
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
Name: @radix-ui/react-context
|
|
55
|
+
Version: 1.0.1
|
|
56
|
+
License: MIT
|
|
57
|
+
Private: false
|
|
58
|
+
Repository: git+https://github.com/radix-ui/primitives.git
|
|
59
|
+
Homepage: https://radix-ui.com/primitives
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
Name: @radix-ui/react-compose-refs
|
|
64
|
+
Version: 1.0.1
|
|
65
|
+
License: MIT
|
|
66
|
+
Private: false
|
|
67
|
+
Repository: git+https://github.com/radix-ui/primitives.git
|
|
68
|
+
Homepage: https://radix-ui.com/primitives
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
Name: @radix-ui/react-slot
|
|
73
|
+
Version: 1.0.2
|
|
74
|
+
License: MIT
|
|
75
|
+
Private: false
|
|
76
|
+
Repository: git+https://github.com/radix-ui/primitives.git
|
|
77
|
+
Homepage: https://radix-ui.com/primitives
|
|
78
|
+
|
|
79
|
+
---
|
|
80
|
+
|
|
81
|
+
Name: @radix-ui/react-collection
|
|
82
|
+
Version: 1.0.3
|
|
83
|
+
License: MIT
|
|
84
|
+
Private: false
|
|
85
|
+
Repository: git+https://github.com/radix-ui/primitives.git
|
|
86
|
+
Homepage: https://radix-ui.com/primitives
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
Name: @radix-ui/react-use-layout-effect
|
|
91
|
+
Version: 1.0.1
|
|
92
|
+
License: MIT
|
|
93
|
+
Private: false
|
|
94
|
+
Repository: git+https://github.com/radix-ui/primitives.git
|
|
95
|
+
Homepage: https://radix-ui.com/primitives
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
Name: @radix-ui/react-id
|
|
100
|
+
Version: 1.0.1
|
|
101
|
+
License: MIT
|
|
102
|
+
Private: false
|
|
103
|
+
Repository: git+https://github.com/radix-ui/primitives.git
|
|
104
|
+
Homepage: https://radix-ui.com/primitives
|
|
105
|
+
|
|
106
|
+
---
|
|
107
|
+
|
|
108
|
+
Name: @radix-ui/react-primitive
|
|
109
|
+
Version: 1.0.3
|
|
110
|
+
License: MIT
|
|
111
|
+
Private: false
|
|
112
|
+
Repository: git+https://github.com/radix-ui/primitives.git
|
|
113
|
+
Homepage: https://radix-ui.com/primitives
|
|
114
|
+
|
|
115
|
+
---
|
|
116
|
+
|
|
117
|
+
Name: @radix-ui/react-use-callback-ref
|
|
118
|
+
Version: 1.0.1
|
|
119
|
+
License: MIT
|
|
120
|
+
Private: false
|
|
121
|
+
Repository: git+https://github.com/radix-ui/primitives.git
|
|
122
|
+
Homepage: https://radix-ui.com/primitives
|
|
123
|
+
|
|
124
|
+
---
|
|
125
|
+
|
|
126
|
+
Name: @radix-ui/react-use-controllable-state
|
|
127
|
+
Version: 1.0.1
|
|
128
|
+
License: MIT
|
|
129
|
+
Private: false
|
|
130
|
+
Repository: git+https://github.com/radix-ui/primitives.git
|
|
131
|
+
Homepage: https://radix-ui.com/primitives
|
|
132
|
+
|
|
133
|
+
---
|
|
134
|
+
|
|
135
|
+
Name: @radix-ui/react-direction
|
|
136
|
+
Version: 1.0.1
|
|
137
|
+
License: MIT
|
|
138
|
+
Private: false
|
|
139
|
+
Repository: git+https://github.com/radix-ui/primitives.git
|
|
140
|
+
Homepage: https://radix-ui.com/primitives
|
|
141
|
+
|
|
142
|
+
---
|
|
143
|
+
|
|
144
|
+
Name: @radix-ui/react-roving-focus
|
|
145
|
+
Version: 1.0.4
|
|
146
|
+
License: MIT
|
|
147
|
+
Private: false
|
|
148
|
+
Repository: git+https://github.com/radix-ui/primitives.git
|
|
149
|
+
Homepage: https://radix-ui.com/primitives
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
Name: @radix-ui/react-presence
|
|
154
|
+
Version: 1.0.1
|
|
155
|
+
License: MIT
|
|
156
|
+
Private: false
|
|
157
|
+
Repository: git+https://github.com/radix-ui/primitives.git
|
|
158
|
+
Homepage: https://radix-ui.com/primitives
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
Name: @radix-ui/react-tabs
|
|
163
|
+
Version: 1.0.4
|
|
164
|
+
License: MIT
|
|
165
|
+
Private: false
|
|
166
|
+
Repository: git+https://github.com/radix-ui/primitives.git
|
|
167
|
+
Homepage: https://radix-ui.com/primitives
|
|
168
|
+
|
|
169
|
+
---
|
|
170
|
+
|
|
171
|
+
Name: classnames
|
|
172
|
+
Version: 2.5.1
|
|
173
|
+
License: MIT
|
|
174
|
+
Private: false
|
|
175
|
+
Description: A simple utility for conditionally joining classNames together
|
|
176
|
+
Repository: git+https://github.com/JedWatson/classnames.git
|
|
177
|
+
Author: Jed Watson
|
|
178
|
+
License Copyright:
|
|
179
|
+
===
|
|
180
|
+
|
|
181
|
+
The MIT License (MIT)
|
|
182
|
+
|
|
183
|
+
Copyright (c) 2018 Jed Watson
|
|
184
|
+
|
|
185
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
186
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
187
|
+
in the Software without restriction, including without limitation the rights
|
|
188
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
189
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
190
|
+
furnished to do so, subject to the following conditions:
|
|
191
|
+
|
|
192
|
+
The above copyright notice and this permission notice shall be included in all
|
|
193
|
+
copies or substantial portions of the Software.
|
|
194
|
+
|
|
195
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
196
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
197
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
198
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
199
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
200
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
201
|
+
SOFTWARE.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"intersectionObserverMock.d.ts","sourceRoot":"","sources":["../../src/__mocks__/intersectionObserverMock.ts"],"names":[],"mappings":""}
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._purpur-tab-content_rbfjg_1{position:relative}._purpur-tab-content_rbfjg_1:focus{outline:0}._purpur-tab-content_rbfjg_1:focus:before{content:"";position:absolute;inset:calc(-1 * var(--purpur-border-width-sm) * 2);display:block;border:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);border-radius:var(--purpur-border-radius-sm)}._purpur-tab-content_rbfjg_1:focus:not(:focus-visible):before{border:0}._purpur-tab-header_1hk4f_1{position:relative;width:100%;padding:calc(var(--purpur-spacing-100) + var(--purpur-spacing-25)) var(--purpur-spacing-200);border:0;border-radius:var(--purpur-border-radius-sm) var(--purpur-border-radius-sm) 0 0;background:transparent;font-family:var(--purpur-typography-family-default),Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:var(--purpur-typography-weight-normal);font-size:var(--purpur-typography-scale-100);line-height:var(--purpur-typography-line-height-loose);font-weight:500;white-space:nowrap;cursor:pointer;transition:all var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out)}._purpur-tab-header_1hk4f_1[aria-selected=true]{cursor:auto}._purpur-tab-header_1hk4f_1:focus{outline:0}._purpur-tab-header_1hk4f_1:focus:focus-visible:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;border:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);border-radius:var(--purpur-border-radius-sm);pointer-events:none}._purpur-tab-header--contained_1hk4f_32:focus:focus-visible:after,._purpur-tab-header--contained-negative_1hk4f_32:focus:focus-visible:after{top:calc(-1 * var(--purpur-border-width-sm))}._purpur-tab-header--line_1hk4f_35{color:var(--purpur-color-text-interactive-primary);background:var(--purpur-color-functional-transparent)}._purpur-tab-header--line_1hk4f_35:not(._purpur-tab-header_1hk4f_1[aria-selected=true]):hover{color:var(--purpur-color-text-interactive-primary-hover);background:var(--purpur-color-background-interactive-transparent-hover)}._purpur-tab-header--line_1hk4f_35:not(._purpur-tab-header_1hk4f_1[aria-selected=true]):active{color:var(--purpur-color-text-interactive-primary-active);background:var(--purpur-color-background-interactive-transparent-active)}._purpur-tab-header--line-negative_1hk4f_47{color:var(--purpur-color-text-interactive-primary-negative);background:var(--purpur-color-functional-transparent)}._purpur-tab-header--line-negative_1hk4f_47:not(._purpur-tab-header_1hk4f_1[aria-selected=true]):hover{color:var(--purpur-color-text-interactive-primary-negative-hover);background:var(--purpur-color-background-interactive-transparent-negative-hover)}._purpur-tab-header--line-negative_1hk4f_47:not(._purpur-tab-header_1hk4f_1[aria-selected=true]):active{color:var(--purpur-color-text-interactive-primary-negative-active);background:var(--purpur-color-background-interactive-transparent-negative-active)}._purpur-tab-header--contained_1hk4f_32{padding-top:calc(var(--purpur-spacing-100) + var(--purpur-spacing-25) - var(--purpur-border-width-sm));border-top:var(--purpur-border-width-sm) solid transparent;color:var(--purpur-color-text-interactive-primary);background:var(--purpur-color-background-interactive-inactive)}._purpur-tab-header--contained_1hk4f_32._purpur-tab-header_1hk4f_1[aria-selected=true]{border-color:var(--purpur-color-border-interactive-primary);background:var(--purpur-color-background-primary)}._purpur-tab-header--contained_1hk4f_32:not(._purpur-tab-header_1hk4f_1[aria-selected=true]):hover{color:var(--purpur-color-text-interactive-primary-hover);background:var(--purpur-color-background-interactive-transparent-hover)}._purpur-tab-header--contained_1hk4f_32:not(._purpur-tab-header_1hk4f_1[aria-selected=true]):active{color:var(--purpur-color-text-interactive-primary-active);background:var(--purpur-color-background-interactive-transparent-active)}._purpur-tab-header--contained-negative_1hk4f_32{padding-top:calc(var(--purpur-spacing-100) + var(--purpur-spacing-25) - var(--purpur-border-width-sm));border-top:var(--purpur-border-width-sm) solid transparent;color:var(--purpur-color-text-interactive-primary-negative);background:var(--purpur-color-background-interactive-inactive-negative)}._purpur-tab-header--contained-negative_1hk4f_32._purpur-tab-header_1hk4f_1[aria-selected=true]{border-color:var(--purpur-color-border-interactive-primary-negative);color:var(--purpur-color-text-interactive-primary);background:var(--purpur-color-background-primary)}._purpur-tab-header--contained-negative_1hk4f_32:not(._purpur-tab-header_1hk4f_1[aria-selected=true]):hover{color:var(--purpur-color-text-interactive-primary-negative-hover);background:var(--purpur-color-background-interactive-transparent-negative-hover)}._purpur-tab-header--contained-negative_1hk4f_32:not(._purpur-tab-header_1hk4f_1[aria-selected=true]):active{color:var(--purpur-color-text-interactive-primary-negative-active);background:var(--purpur-color-background-interactive-transparent-negative-active)}._purpur-tabs__wrapper_1dpqy_1{position:relative;-ms-overflow-style:none;scrollbar-width:none}._purpur-tabs__wrapper_1dpqy_1 ::-webkit-scrollbar{display:none}._purpur-tabs__wrapper_1dpqy_1 ._purpur-tabs__scroll-button_1dpqy_9{display:none;align-items:center;position:absolute;top:0;z-index:10;height:100%;padding:0;border:var(--purpur-border-width-xs) solid var(--purpur-color-border-interactive-subtle);border-radius:var(--purpur-border-radius-xs);color:var(--purpur-color-text-default);background:var(--purpur-color-background-primary);box-shadow:var(--purpur-shadow-md);transition:all var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out);cursor:pointer}._purpur-tabs__wrapper_1dpqy_1 ._purpur-tabs__scroll-button_1dpqy_9:after{content:"";position:absolute;inset:calc(-1 * var(--purpur-border-width-xs));border:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-subtle-hover);border-radius:var(--purpur-border-radius-xs);box-sizing:border-box;opacity:0;transition:all var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out)}._purpur-tabs__wrapper_1dpqy_1 ._purpur-tabs__scroll-button_1dpqy_9:hover{box-shadow:none;border-color:transparent;color:var(--purpur-color-text-interactive-primary-hover)}._purpur-tabs__wrapper_1dpqy_1 ._purpur-tabs__scroll-button_1dpqy_9:hover:after{opacity:1}._purpur-tabs__wrapper_1dpqy_1 ._purpur-tabs__scroll-button_1dpqy_9:active:after{border-width:var(--purpur-border-width-xs)}._purpur-tabs__wrapper_1dpqy_1 ._purpur-tabs__scroll-button_1dpqy_9:focus{outline:0}._purpur-tabs__wrapper_1dpqy_1 ._purpur-tabs__scroll-button_1dpqy_9:focus-visible{outline:0;border-color:var(--purpur-color-border-interactive-subtle);box-shadow:none}._purpur-tabs__wrapper_1dpqy_1 ._purpur-tabs__scroll-button_1dpqy_9:focus-visible:after{left:calc(-1 * var(--purpur-border-width-sm) * 2);top:calc(-1 * var(--purpur-border-width-sm) * 2);width:calc(100% + var(--purpur-border-width-sm) * 4);height:calc(100% + var(--purpur-border-width-sm) * 4);border-color:var(--purpur-color-border-interactive-focus);opacity:1;pointer-events:none}._purpur-tabs__wrapper_1dpqy_1 ._purpur-tabs__scroll-button--left_1dpqy_63{left:0}._purpur-tabs__wrapper_1dpqy_1 ._purpur-tabs__scroll-button--right_1dpqy_66{right:0}._purpur-tabs__wrapper--scroll-end_1dpqy_69 ._purpur-tabs__scroll-button--left_1dpqy_63,._purpur-tabs__wrapper--scroll-start_1dpqy_72 ._purpur-tabs__scroll-button--right_1dpqy_66{display:flex}._purpur-tabs--line_1dpqy_75 ._purpur-tabs__wrapper_1dpqy_1:after,._purpur-tabs--line-negative_1dpqy_75 ._purpur-tabs__wrapper_1dpqy_1:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:var(--purpur-border-width-sm)}._purpur-tabs--line_1dpqy_75 ._purpur-tabs__selected-border_1dpqy_83,._purpur-tabs--line-negative_1dpqy_75 ._purpur-tabs__selected-border_1dpqy_83{position:absolute;bottom:0;left:0;z-index:10;height:var(--purpur-border-width-sm);transition:all var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out)}._purpur-tabs--line_1dpqy_75 ._purpur-tabs__wrapper_1dpqy_1:after{background:var(--purpur-color-border-weak)}._purpur-tabs--line_1dpqy_75 ._purpur-tabs__selected-border_1dpqy_83{background:var(--purpur-color-border-interactive-primary)}._purpur-tabs--line-negative_1dpqy_75 ._purpur-tabs__wrapper_1dpqy_1:after{background:var(--purpur-color-border-weak-negative)}._purpur-tabs--line-negative_1dpqy_75 ._purpur-tabs__selected-border_1dpqy_83{background:var(--purpur-color-border-interactive-primary-negative)}._purpur-tabs--contained_1dpqy_103 ._purpur-tabs__list_1dpqy_103,._purpur-tabs--contained-negative_1dpqy_103 ._purpur-tabs__list_1dpqy_103{gap:var(--purpur-spacing-100)}._purpur-tabs--contained_1dpqy_103 ._purpur-tabs__content-container_1dpqy_106,._purpur-tabs--contained-negative_1dpqy_103 ._purpur-tabs__content-container_1dpqy_106{background:var(--purpur-color-background-primary)}._purpur-tabs__list_1dpqy_103{position:relative;display:inline-flex;max-width:100%;overflow:auto}._purpur-tabs--fullWidth_1dpqy_115 ._purpur-tabs__list_1dpqy_103{min-width:100%}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React, { ComponentPropsWithoutRef, ReactChild, ReactElement, ReactFragment, ReactNode, ReactPortal } from "react";
|
|
2
|
+
export type TabContentProps = {
|
|
3
|
+
/**
|
|
4
|
+
* The text that will be displayed in the tab.
|
|
5
|
+
* */
|
|
6
|
+
name: string;
|
|
7
|
+
/**
|
|
8
|
+
* A unique ID that associates the tab with a content.
|
|
9
|
+
* */
|
|
10
|
+
tabId: string;
|
|
11
|
+
className?: string;
|
|
12
|
+
"data-testid"?: string;
|
|
13
|
+
};
|
|
14
|
+
export type TabContentPropsWithChildren = ComponentPropsWithoutRef<"div"> & TabContentProps & {
|
|
15
|
+
children: ReactNode;
|
|
16
|
+
};
|
|
17
|
+
export declare const TabContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & TabContentProps & {
|
|
18
|
+
children: ReactNode;
|
|
19
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
20
|
+
export declare const isTabContent: (child: ReactChild | ReactElement | ReactFragment | ReactPortal | string | number | boolean | null | undefined) => child is React.ReactElement<TabContentProps, string | React.JSXElementConstructor<any>>;
|
|
21
|
+
//# sourceMappingURL=tab-content.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tab-content.d.ts","sourceRoot":"","sources":["../src/tab-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EAIxB,UAAU,EACV,YAAY,EACZ,aAAa,EACb,SAAS,EACT,WAAW,EACZ,MAAM,OAAO,CAAC;AAMf,MAAM,MAAM,eAAe,GAAG;IAC5B;;SAEK;IACL,IAAI,EAAE,MAAM,CAAC;IACb;;SAEK;IACL,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,wBAAwB,CAAC,KAAK,CAAC,GACvE,eAAe,GAAG;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAKJ,eAAO,MAAM,UAAU;cANT,SAAS;wCAqBtB,CAAC;AAEF,eAAO,MAAM,YAAY,UAEnB,UAAU,GACV,YAAY,GACZ,aAAa,GACb,WAAW,GACX,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,4FAEiF,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React, { FocusEventHandler, ReactNode } from "react";
|
|
2
|
+
import { TabsVariant } from "./tabs.utils";
|
|
3
|
+
type TabHeaderProps = {
|
|
4
|
+
"data-testid"?: string;
|
|
5
|
+
index: number;
|
|
6
|
+
tabId: string;
|
|
7
|
+
variant: TabsVariant;
|
|
8
|
+
onFocus: FocusEventHandler<HTMLButtonElement>;
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
};
|
|
11
|
+
export declare const TabHeader: React.ForwardRefExoticComponent<TabHeaderProps & React.RefAttributes<HTMLButtonElement>>;
|
|
12
|
+
export {};
|
|
13
|
+
//# sourceMappingURL=tab-header.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tab-header.d.ts","sourceRoot":"","sources":["../src/tab-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAA4B,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,KAAK,cAAc,GAAG;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC9C,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAKF,eAAO,MAAM,SAAS,0FAiBrB,CAAC"}
|
package/dist/tabs.cjs.js
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),r=require("react"),ge=require("react-dom");function Ce(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const ee=Ce(r);function xe(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var te={exports:{}};/*!
|
|
2
|
+
Copyright (c) 2018 Jed Watson.
|
|
3
|
+
Licensed under the MIT License (MIT), see
|
|
4
|
+
http://jedwatson.github.io/classnames
|
|
5
|
+
*/(function(e){(function(){var t={}.hasOwnProperty;function n(){for(var c="",s=0;s<arguments.length;s++){var i=arguments[s];i&&(c=a(c,o.call(this,i)))}return c}function o(c){if(typeof c=="string"||typeof c=="number")return this&&this[c]||c;if(typeof c!="object")return"";if(Array.isArray(c))return n.apply(this,c);if(c.toString!==Object.prototype.toString&&!c.toString.toString().includes("[native code]"))return c.toString();var s="";for(var i in c)t.call(c,i)&&c[i]&&(s=a(s,this&&this[i]||i));return s}function a(c,s){return s?c?c+" "+s:c+s:c}e.exports?(n.default=n,e.exports=n):window.classNames=n})()})(te);var Ee=te.exports;const ye=xe(Ee),we={"purpur-icon":"_purpur-icon_8u1lq_1","purpur-icon--xxs":"_purpur-icon--xxs_8u1lq_4","purpur-icon--xs":"_purpur-icon--xs_8u1lq_8","purpur-icon--sm":"_purpur-icon--sm_8u1lq_12","purpur-icon--md":"_purpur-icon--md_8u1lq_16","purpur-icon--lg":"_purpur-icon--lg_8u1lq_20","purpur-icon--xl":"_purpur-icon--xl_8u1lq_24"},Se={name:"chevron-left",svg:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M16.175 3.905a.9.9 0 0 1-.08 1.27L8.36 12l7.736 6.825a.9.9 0 0 1-1.191 1.35l-8.5-7.5a.9.9 0 0 1 0-1.35l8.5-7.5a.9.9 0 0 1 1.27.08Z" clip-rule="evenodd"/></svg>',keywords:["chevron-left"],category:"utility"},Ie={name:"chevron-right",svg:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M7.809 3.924a.9.9 0 0 0 .115 1.267L16.094 12l-8.17 6.809a.9.9 0 0 0 1.152 1.382l9-7.5a.9.9 0 0 0 0-1.382l-9-7.5a.9.9 0 0 0-1.267.115Z" clip-rule="evenodd"/></svg>',keywords:["chevron-right"],category:"utility"},Te=ye.bind(we),J="purpur-icon",Ne="md",Re=e=>e.filter(t=>Object.keys(t).length>=1).map(t=>`${t.name}="${t.value}"`).join(" "),Ae=({content:e="",title:t}={})=>{const n=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},{name:"viewBox",value:"0 0 24 24"},t?{name:"role",value:"img"}:{name:"aria-hidden",value:"true"}],o=t?`<title>${t}</title>`:"";return`<svg ${Re(n)}>${o}${e}</svg>`},Pe=e=>e.replace(/<(\/?)svg([^>]*)>/g,"").trim(),Me=({["data-testid"]:e,svg:t,allyTitle:n,className:o="",size:a=Ne,...c})=>{const s=Ae({content:Pe(t.svg),title:n}),i=Te(o,J,`${J}--${a}`);return y.jsx("span",{"aria-label":n,className:i,"data-testid":e,dangerouslySetInnerHTML:{__html:s},...c})};function w(){return w=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},w.apply(this,arguments)}function N(e,t,{checkForDefaultPrevented:n=!0}={}){return function(a){if(e==null||e(a),n===!1||!a.defaultPrevented)return t==null?void 0:t(a)}}function W(e,t=[]){let n=[];function o(c,s){const i=r.createContext(s),l=n.length;n=[...n,s];function u(d){const{scope:m,children:_,...f}=d,$=(m==null?void 0:m[e][l])||i,h=r.useMemo(()=>f,Object.values(f));return r.createElement($.Provider,{value:h},_)}function p(d,m){const _=(m==null?void 0:m[e][l])||i,f=r.useContext(_);if(f)return f;if(s!==void 0)return s;throw new Error(`\`${d}\` must be used within \`${c}\``)}return u.displayName=c+"Provider",[u,p]}const a=()=>{const c=n.map(s=>r.createContext(s));return function(i){const l=(i==null?void 0:i[e])||c;return r.useMemo(()=>({[`__scope${e}`]:{...i,[e]:l}}),[i,l])}};return a.scopeName=e,[o,Oe(a,...t)]}function Oe(...e){const t=e[0];if(e.length===1)return t;const n=()=>{const o=e.map(a=>({useScope:a(),scopeName:a.scopeName}));return function(c){const s=o.reduce((i,{useScope:l,scopeName:u})=>{const d=l(c)[`__scope${u}`];return{...i,...d}},{});return r.useMemo(()=>({[`__scope${t.scopeName}`]:s}),[s])}};return n.scopeName=t.scopeName,n}function Fe(e,t){typeof e=="function"?e(t):e!=null&&(e.current=t)}function ne(...e){return t=>e.forEach(n=>Fe(n,t))}function k(...e){return r.useCallback(ne(...e),e)}const L=r.forwardRef((e,t)=>{const{children:n,...o}=e,a=r.Children.toArray(n),c=a.find(je);if(c){const s=c.props.children,i=a.map(l=>l===c?r.Children.count(s)>1?r.Children.only(null):r.isValidElement(s)?s.props.children:null:l);return r.createElement(G,w({},o,{ref:t}),r.isValidElement(s)?r.cloneElement(s,void 0,i):null)}return r.createElement(G,w({},o,{ref:t}),n)});L.displayName="Slot";const G=r.forwardRef((e,t)=>{const{children:n,...o}=e;return r.isValidElement(n)?r.cloneElement(n,{...qe(o,n.props),ref:t?ne(t,n.ref):n.ref}):r.Children.count(n)>1?r.Children.only(null):null});G.displayName="SlotClone";const De=({children:e})=>r.createElement(r.Fragment,null,e);function je(e){return r.isValidElement(e)&&e.type===De}function qe(e,t){const n={...t};for(const o in t){const a=e[o],c=t[o];/^on[A-Z]/.test(o)?a&&c?n[o]=(...i)=>{c(...i),a(...i)}:a&&(n[o]=a):o==="style"?n[o]={...a,...c}:o==="className"&&(n[o]=[a,c].filter(Boolean).join(" "))}return{...e,...n}}function Ve(e){const t=e+"CollectionProvider",[n,o]=W(t),[a,c]=n(t,{collectionRef:{current:null},itemMap:new Map}),s=_=>{const{scope:f,children:$}=_,h=r.useRef(null),v=r.useRef(new Map).current;return r.createElement(a,{scope:f,itemMap:v,collectionRef:h},$)},i=e+"CollectionSlot",l=r.forwardRef((_,f)=>{const{scope:$,children:h}=_,v=c(i,$),g=k(f,v.collectionRef);return r.createElement(L,{ref:g},h)}),u=e+"CollectionItemSlot",p="data-radix-collection-item",d=r.forwardRef((_,f)=>{const{scope:$,children:h,...v}=_,g=r.useRef(null),R=k(f,g),T=c(u,$);return r.useEffect(()=>(T.itemMap.set(g,{ref:g,...v}),()=>void T.itemMap.delete(g))),r.createElement(L,{[p]:"",ref:R},h)});function m(_){const f=c(e+"CollectionConsumer",_);return r.useCallback(()=>{const h=f.collectionRef.current;if(!h)return[];const v=Array.from(h.querySelectorAll(`[${p}]`));return Array.from(f.itemMap.values()).sort((T,M)=>v.indexOf(T.ref.current)-v.indexOf(M.ref.current))},[f.collectionRef,f.itemMap])}return[{Provider:s,Slot:l,ItemSlot:d},m,o]}const z=globalThis!=null&&globalThis.document?r.useLayoutEffect:()=>{},ke=ee.useId||(()=>{});let Le=0;function re(e){const[t,n]=ee.useState(ke());return z(()=>{e||n(o=>o??String(Le++))},[e]),e||(t?`radix-${t}`:"")}const Ue=["a","button","div","form","h2","h3","img","input","label","li","nav","ol","p","span","svg","ul"],D=Ue.reduce((e,t)=>{const n=r.forwardRef((o,a)=>{const{asChild:c,...s}=o,i=c?L:t;return r.useEffect(()=>{window[Symbol.for("radix-ui")]=!0},[]),r.createElement(i,w({},s,{ref:a}))});return n.displayName=`Primitive.${t}`,{...e,[t]:n}},{});function Y(e){const t=r.useRef(e);return r.useEffect(()=>{t.current=e}),r.useMemo(()=>(...n)=>{var o;return(o=t.current)===null||o===void 0?void 0:o.call(t,...n)},[])}function oe({prop:e,defaultProp:t,onChange:n=()=>{}}){const[o,a]=Be({defaultProp:t,onChange:n}),c=e!==void 0,s=c?e:o,i=Y(n),l=r.useCallback(u=>{if(c){const d=typeof u=="function"?u(e):u;d!==e&&i(d)}else a(u)},[c,e,a,i]);return[s,l]}function Be({defaultProp:e,onChange:t}){const n=r.useState(e),[o]=n,a=r.useRef(o),c=Y(t);return r.useEffect(()=>{a.current!==o&&(c(o),a.current=o)},[o,a,c]),n}const Ge=r.createContext(void 0);function ce(e){const t=r.useContext(Ge);return e||t||"ltr"}const B="rovingFocusGroup.onEntryFocus",ze={bubbles:!1,cancelable:!0},Z="RovingFocusGroup",[K,se,Ke]=Ve(Z),[We,ae]=W(Z,[Ke]),[Ye,Ze]=We(Z),He=r.forwardRef((e,t)=>r.createElement(K.Provider,{scope:e.__scopeRovingFocusGroup},r.createElement(K.Slot,{scope:e.__scopeRovingFocusGroup},r.createElement(Xe,w({},e,{ref:t}))))),Xe=r.forwardRef((e,t)=>{const{__scopeRovingFocusGroup:n,orientation:o,loop:a=!1,dir:c,currentTabStopId:s,defaultCurrentTabStopId:i,onCurrentTabStopIdChange:l,onEntryFocus:u,...p}=e,d=r.useRef(null),m=k(t,d),_=ce(c),[f=null,$]=oe({prop:s,defaultProp:i,onChange:l}),[h,v]=r.useState(!1),g=Y(u),R=se(n),T=r.useRef(!1),[M,O]=r.useState(0);return r.useEffect(()=>{const C=d.current;if(C)return C.addEventListener(B,g),()=>C.removeEventListener(B,g)},[g]),r.createElement(Ye,{scope:n,orientation:o,dir:_,loop:a,currentTabStopId:f,onItemFocus:r.useCallback(C=>$(C),[$]),onItemShiftTab:r.useCallback(()=>v(!0),[]),onFocusableItemAdd:r.useCallback(()=>O(C=>C+1),[]),onFocusableItemRemove:r.useCallback(()=>O(C=>C-1),[])},r.createElement(D.div,w({tabIndex:h||M===0?-1:0,"data-orientation":o},p,{ref:m,style:{outline:"none",...e.style},onMouseDown:N(e.onMouseDown,()=>{T.current=!0}),onFocus:N(e.onFocus,C=>{const U=!T.current;if(C.target===C.currentTarget&&U&&!h){const j=new CustomEvent(B,ze);if(C.currentTarget.dispatchEvent(j),!j.defaultPrevented){const F=R().filter(x=>x.focusable),b=F.find(x=>x.active),E=F.find(x=>x.id===f),q=[b,E,...F].filter(Boolean).map(x=>x.ref.current);ie(q)}}T.current=!1}),onBlur:N(e.onBlur,()=>v(!1))})))}),Je="RovingFocusGroupItem",Qe=r.forwardRef((e,t)=>{const{__scopeRovingFocusGroup:n,focusable:o=!0,active:a=!1,tabStopId:c,...s}=e,i=re(),l=c||i,u=Ze(Je,n),p=u.currentTabStopId===l,d=se(n),{onFocusableItemAdd:m,onFocusableItemRemove:_}=u;return r.useEffect(()=>{if(o)return m(),()=>_()},[o,m,_]),r.createElement(K.ItemSlot,{scope:n,id:l,focusable:o,active:a},r.createElement(D.span,w({tabIndex:p?0:-1,"data-orientation":u.orientation},s,{ref:t,onMouseDown:N(e.onMouseDown,f=>{o?u.onItemFocus(l):f.preventDefault()}),onFocus:N(e.onFocus,()=>u.onItemFocus(l)),onKeyDown:N(e.onKeyDown,f=>{if(f.key==="Tab"&&f.shiftKey){u.onItemShiftTab();return}if(f.target!==f.currentTarget)return;const $=nt(f,u.orientation,u.dir);if($!==void 0){f.preventDefault();let v=d().filter(g=>g.focusable).map(g=>g.ref.current);if($==="last")v.reverse();else if($==="prev"||$==="next"){$==="prev"&&v.reverse();const g=v.indexOf(f.currentTarget);v=u.loop?rt(v,g+1):v.slice(g+1)}setTimeout(()=>ie(v))}})})))}),et={ArrowLeft:"prev",ArrowUp:"prev",ArrowRight:"next",ArrowDown:"next",PageUp:"first",Home:"first",PageDown:"last",End:"last"};function tt(e,t){return t!=="rtl"?e:e==="ArrowLeft"?"ArrowRight":e==="ArrowRight"?"ArrowLeft":e}function nt(e,t,n){const o=tt(e.key,n);if(!(t==="vertical"&&["ArrowLeft","ArrowRight"].includes(o))&&!(t==="horizontal"&&["ArrowUp","ArrowDown"].includes(o)))return et[o]}function ie(e){const t=document.activeElement;for(const n of e)if(n===t||(n.focus(),document.activeElement!==t))return}function rt(e,t){return e.map((n,o)=>e[(t+o)%e.length])}const ot=He,ct=Qe;function st(e,t){return r.useReducer((n,o)=>{const a=t[n][o];return a??n},e)}const ue=e=>{const{present:t,children:n}=e,o=at(t),a=typeof n=="function"?n({present:o.isPresent}):r.Children.only(n),c=k(o.ref,a.ref);return typeof n=="function"||o.isPresent?r.cloneElement(a,{ref:c}):null};ue.displayName="Presence";function at(e){const[t,n]=r.useState(),o=r.useRef({}),a=r.useRef(e),c=r.useRef("none"),s=e?"mounted":"unmounted",[i,l]=st(s,{mounted:{UNMOUNT:"unmounted",ANIMATION_OUT:"unmountSuspended"},unmountSuspended:{MOUNT:"mounted",ANIMATION_END:"unmounted"},unmounted:{MOUNT:"mounted"}});return r.useEffect(()=>{const u=V(o.current);c.current=i==="mounted"?u:"none"},[i]),z(()=>{const u=o.current,p=a.current;if(p!==e){const m=c.current,_=V(u);e?l("MOUNT"):_==="none"||(u==null?void 0:u.display)==="none"?l("UNMOUNT"):l(p&&m!==_?"ANIMATION_OUT":"UNMOUNT"),a.current=e}},[e,l]),z(()=>{if(t){const u=d=>{const _=V(o.current).includes(d.animationName);d.target===t&&_&&ge.flushSync(()=>l("ANIMATION_END"))},p=d=>{d.target===t&&(c.current=V(o.current))};return t.addEventListener("animationstart",p),t.addEventListener("animationcancel",u),t.addEventListener("animationend",u),()=>{t.removeEventListener("animationstart",p),t.removeEventListener("animationcancel",u),t.removeEventListener("animationend",u)}}else l("ANIMATION_END")},[t,l]),{isPresent:["mounted","unmountSuspended"].includes(i),ref:r.useCallback(u=>{u&&(o.current=getComputedStyle(u)),n(u)},[])}}function V(e){return(e==null?void 0:e.animationName)||"none"}const le="Tabs",[it,Ot]=W(le,[ae]),de=ae(),[ut,H]=it(le),lt=r.forwardRef((e,t)=>{const{__scopeTabs:n,value:o,onValueChange:a,defaultValue:c,orientation:s="horizontal",dir:i,activationMode:l="automatic",...u}=e,p=ce(i),[d,m]=oe({prop:o,onChange:a,defaultProp:c});return r.createElement(ut,{scope:n,baseId:re(),value:d,onValueChange:m,orientation:s,dir:p,activationMode:l},r.createElement(D.div,w({dir:p,"data-orientation":s},u,{ref:t})))}),dt="TabsList",ft=r.forwardRef((e,t)=>{const{__scopeTabs:n,loop:o=!0,...a}=e,c=H(dt,n),s=de(n);return r.createElement(ot,w({asChild:!0},s,{orientation:c.orientation,dir:c.dir,loop:o}),r.createElement(D.div,w({role:"tablist","aria-orientation":c.orientation},a,{ref:t})))}),pt="TabsTrigger",bt=r.forwardRef((e,t)=>{const{__scopeTabs:n,value:o,disabled:a=!1,...c}=e,s=H(pt,n),i=de(n),l=fe(s.baseId,o),u=pe(s.baseId,o),p=o===s.value;return r.createElement(ct,w({asChild:!0},i,{focusable:!a,active:p}),r.createElement(D.button,w({type:"button",role:"tab","aria-selected":p,"aria-controls":u,"data-state":p?"active":"inactive","data-disabled":a?"":void 0,disabled:a,id:l},c,{ref:t,onMouseDown:N(e.onMouseDown,d=>{!a&&d.button===0&&d.ctrlKey===!1?s.onValueChange(o):d.preventDefault()}),onKeyDown:N(e.onKeyDown,d=>{[" ","Enter"].includes(d.key)&&s.onValueChange(o)}),onFocus:N(e.onFocus,()=>{const d=s.activationMode!=="manual";!p&&!a&&d&&s.onValueChange(o)})})))}),$t="TabsContent",mt=r.forwardRef((e,t)=>{const{__scopeTabs:n,value:o,forceMount:a,children:c,...s}=e,i=H($t,n),l=fe(i.baseId,o),u=pe(i.baseId,o),p=o===i.value,d=r.useRef(p);return r.useEffect(()=>{const m=requestAnimationFrame(()=>d.current=!1);return()=>cancelAnimationFrame(m)},[]),r.createElement(ue,{present:a||p},({present:m})=>r.createElement(D.div,w({"data-state":p?"active":"inactive","data-orientation":i.orientation,role:"tabpanel","aria-labelledby":l,hidden:!m,id:u,tabIndex:0},s,{ref:t,style:{...e.style,animationDuration:d.current?"0s":void 0}}),m&&c))});function fe(e,t){return`${e}-trigger-${t}`}function pe(e,t){return`${e}-content-${t}`}const vt=lt,_t=ft,ht=bt,gt=mt;function Ct(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var be={exports:{}};/*!
|
|
6
|
+
Copyright (c) 2018 Jed Watson.
|
|
7
|
+
Licensed under the MIT License (MIT), see
|
|
8
|
+
http://jedwatson.github.io/classnames
|
|
9
|
+
*/(function(e){(function(){var t={}.hasOwnProperty;function n(){for(var c="",s=0;s<arguments.length;s++){var i=arguments[s];i&&(c=a(c,o.call(this,i)))}return c}function o(c){if(typeof c=="string"||typeof c=="number")return this&&this[c]||c;if(typeof c!="object")return"";if(Array.isArray(c))return n.apply(this,c);if(c.toString!==Object.prototype.toString&&!c.toString.toString().includes("[native code]"))return c.toString();var s="";for(var i in c)t.call(c,i)&&c[i]&&(s=a(s,this&&this[i]||i));return s}function a(c,s){return s?c?c+" "+s:c+s:c}e.exports?(n.default=n,e.exports=n):window.classNames=n})()})(be);var xt=be.exports;const X=Ct(xt),Et={"purpur-tab-content":"_purpur-tab-content_rbfjg_1"},yt=X.bind(Et),wt="purpur-tab-content",St=r.forwardRef(({children:e,tabId:t,"data-testid":n,className:o,...a},c)=>y.jsx(gt,{ref:c,className:yt([wt,o]),"data-testid":n,value:t,...a,children:e})),It=e=>!!e&&r.isValidElement(e)&&!!e.props.name&&!!e.props.tabId,Tt={"purpur-tab-header":"_purpur-tab-header_1hk4f_1","purpur-tab-header--contained":"_purpur-tab-header--contained_1hk4f_32","purpur-tab-header--contained-negative":"_purpur-tab-header--contained-negative_1hk4f_32","purpur-tab-header--line":"_purpur-tab-header--line_1hk4f_35","purpur-tab-header--line-negative":"_purpur-tab-header--line-negative_1hk4f_47"},Nt=X.bind(Tt),Q="purpur-tab-header",Rt=r.forwardRef(({index:e,tabId:t,variant:n,onFocus:o,"data-testid":a,children:c},s)=>y.jsx(ht,{id:`${t}-trigger`,className:Nt([Q,`${Q}--${n}`]),value:t,"data-testid":a,"data-index":e,ref:s,onFocus:o,children:c})),At={"purpur-tabs__wrapper":"_purpur-tabs__wrapper_1dpqy_1","purpur-tabs__scroll-button":"_purpur-tabs__scroll-button_1dpqy_9","purpur-tabs__scroll-button--left":"_purpur-tabs__scroll-button--left_1dpqy_63","purpur-tabs__scroll-button--right":"_purpur-tabs__scroll-button--right_1dpqy_66","purpur-tabs__wrapper--scroll-end":"_purpur-tabs__wrapper--scroll-end_1dpqy_69","purpur-tabs__wrapper--scroll-start":"_purpur-tabs__wrapper--scroll-start_1dpqy_72","purpur-tabs--line":"_purpur-tabs--line_1dpqy_75","purpur-tabs--line-negative":"_purpur-tabs--line-negative_1dpqy_75","purpur-tabs__selected-border":"_purpur-tabs__selected-border_1dpqy_83","purpur-tabs--contained":"_purpur-tabs--contained_1dpqy_103","purpur-tabs__list":"_purpur-tabs__list_1dpqy_103","purpur-tabs--contained-negative":"_purpur-tabs--contained-negative_1dpqy_103","purpur-tabs__content-container":"_purpur-tabs__content-container_1dpqy_106","purpur-tabs--fullWidth":"_purpur-tabs--fullWidth_1dpqy_115"},Pt=["line","line-negative","contained","contained-negative"],$e=e=>new CustomEvent("tabChangeDetail",{detail:{value:e}}),P=X.bind(At),I="purpur-tabs",Mt=(e,t)=>{var l;if(typeof(e==null?void 0:e.getBoundingClientRect)!="function"||typeof(t==null?void 0:t.scroll)!="function")return;const n=e.getBoundingClientRect(),o=t.getBoundingClientRect(),a=t.clientWidth,c=parseInt((l=getComputedStyle(t).borderLeftWidth)==null?void 0:l.split("px")[0],10),s=o.left+(isNaN(c)?0:c);let i;n.right>o.right&&(i=n.left+t.scrollLeft,i=i+n.width-a+a*.1,i=i-s),n.left<o.left&&(i=n.left+t.scrollLeft,i=i-a*.1,i=i-s),i!==void 0&&t.scroll({left:i,behavior:"smooth"})},me=({children:e,variant:t="line",fullWidth:n=!1,onChange:o,className:a,"data-testid":c,...s})=>{const[i,l]=r.useState(0),[u,p]=r.useState({}),[d,m]=r.useState(0),[_,f]=r.useState(0),$=r.Children.toArray(e).filter(It),h=r.useRef(),v=r.useRef(new Array($.length)),g=200,R=t==="line"||t==="line-negative",T=P([I,`${I}--${t}`,{[`${I}--fullWidth`]:n},a]),M=r.Children.map($,({props:{tabId:b}})=>b);if(new Set(M).size!==M.length)throw new Error("tabId must be unique");const O=(b,E)=>E||c?`${E||c}-${b}`:void 0,C=()=>{if(!R)return;const b=v.current[i];m((b==null?void 0:b.offsetLeft)||0),f((b==null?void 0:b.getBoundingClientRect().width)||0)},U=b=>{R&&l($.findIndex(E=>E.props.tabId===b)),o==null||o($e(b))},j=b=>{if(h!=null&&h.current){const{scrollLeft:E}=h.current,S=b==="left"?-g:g;h.current.scroll({left:E+S,behavior:"smooth"})}},F=({side:b})=>y.jsx("button",{className:P(`${I}__scroll-button`,`${I}__scroll-button--${b}`),onClick:()=>j(b),type:"button","aria-hidden":"true",tabIndex:-1,"data-testid":O("scroll-button"),children:y.jsx(Me,{svg:b==="left"?Se:Ie,size:"md"})});return r.useEffect(()=>(window.addEventListener("resize",C),()=>{window.removeEventListener("resize",C)}),[]),r.useEffect(()=>{C()},[i,n,$,t]),r.useEffect(()=>{const b=S=>{if(S.every(x=>x.isIntersecting)&&S.length===$.length){p({});return}S.forEach(x=>{const A=Number(x.target.getAttribute("data-index")),ve=A===0,_e=A===$.length-1;p(he=>({...he,...ve&&{[`${I}__wrapper--scroll-end`]:!x.isIntersecting},..._e&&{[`${I}__wrapper--scroll-start`]:!x.isIntersecting}}))})},E=new IntersectionObserver(b,{threshold:[.99],root:h.current});return v.current.forEach(S=>E.observe(S)),()=>{v.current.forEach(S=>E.unobserve(S))}},[$.length]),y.jsx(vt,{defaultValue:$[0].props.tabId,onValueChange:U,"data-testid":c,className:T,...s,children:y.jsxs("div",{className:P(`${I}__container`),children:[y.jsxs("div",{className:P([`${I}__wrapper`,u]),children:[y.jsxs(_t,{ref:b=>{h.current=b},className:P(`${I}__list`),children:[r.Children.map($,(b,E)=>{const{name:S,tabId:q,"data-testid":x}=b.props;return y.jsx(Rt,{"data-testid":O("header",x),index:E,tabId:q,ref:A=>{A&&(v.current[E]=A)},onFocus:A=>{Mt(A.target,h.current)},variant:t,children:S})}),R&&y.jsx("div",{className:P(`${I}__selected-border`),style:{width:_,transform:`translateX(${d}px)`},"data-testid":O("selected-border")})]}),y.jsx(F,{side:"left"}),y.jsx(F,{side:"right"})]}),y.jsx("div",{className:P(`${I}__content-container`),children:r.Children.map($,b=>b)})]})})};me.Content=St;exports.Tabs=me;exports.createTabChangeDetailEvent=$e;exports.tabsVariants=Pt;
|
|
10
|
+
//# sourceMappingURL=tabs.cjs.js.map
|