@khanacademy/wonder-blocks-tabs 0.2.5 → 0.2.7
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 +20 -0
- package/dist/es/index.js +3 -192
- package/dist/index.js +3 -196
- package/package.json +4 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-tabs
|
|
2
2
|
|
|
3
|
+
## 0.2.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [b9e4946]
|
|
8
|
+
- Updated dependencies [b9e4946]
|
|
9
|
+
- @khanacademy/wonder-blocks-tokens@10.0.0
|
|
10
|
+
- @khanacademy/wonder-blocks-typography@3.2.0
|
|
11
|
+
- @khanacademy/wonder-blocks-core@12.2.1
|
|
12
|
+
|
|
13
|
+
## 0.2.6
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies [2656fd4]
|
|
18
|
+
- Updated dependencies [6018552]
|
|
19
|
+
- Updated dependencies [7bbf311]
|
|
20
|
+
- Updated dependencies [7f79943]
|
|
21
|
+
- @khanacademy/wonder-blocks-tokens@9.0.0
|
|
22
|
+
|
|
3
23
|
## 0.2.5
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
package/dist/es/index.js
CHANGED
|
@@ -1,201 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
2
|
import { addStyle, useOnMountEffect, View } from '@khanacademy/wonder-blocks-core';
|
|
4
3
|
import { sizing, semanticColor, breakpoint, border } from '@khanacademy/wonder-blocks-tokens';
|
|
5
4
|
import { StyleSheet } from 'aphrodite';
|
|
6
5
|
import * as React from 'react';
|
|
7
6
|
import { styles as styles$2 } from '@khanacademy/wonder-blocks-typography';
|
|
8
7
|
|
|
9
|
-
const
|
|
10
|
-
const StyledNav = addStyle("nav");
|
|
11
|
-
const StyledUl = addStyle("ul");
|
|
12
|
-
const StyledDiv = addStyle("div");
|
|
13
|
-
const NavigationTabs = React.forwardRef(function NavigationTabs(props, ref) {
|
|
14
|
-
const {
|
|
15
|
-
id,
|
|
16
|
-
testId,
|
|
17
|
-
children,
|
|
18
|
-
"aria-label": ariaLabel,
|
|
19
|
-
"aria-labelledby": ariaLabelledBy,
|
|
20
|
-
styles: stylesProp,
|
|
21
|
-
animated = false
|
|
22
|
-
} = props,
|
|
23
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
|
|
24
|
-
const listRef = React.useRef(null);
|
|
25
|
-
const indicatorIsReady = React.useRef(false);
|
|
26
|
-
const [underlineStyle, setUnderlineStyle] = React.useState({
|
|
27
|
-
left: 0,
|
|
28
|
-
width: 0
|
|
29
|
-
});
|
|
30
|
-
const updateUnderlineStyle = React.useCallback(() => {
|
|
31
|
-
if (!listRef.current) {
|
|
32
|
-
return;
|
|
33
|
-
}
|
|
34
|
-
const activeTab = Array.from(listRef.current.children).find(child => {
|
|
35
|
-
var _child$children$;
|
|
36
|
-
return (_child$children$ = child.children[0]) == null ? void 0 : _child$children$.ariaCurrent;
|
|
37
|
-
});
|
|
38
|
-
if (activeTab) {
|
|
39
|
-
const tabRect = activeTab.getBoundingClientRect();
|
|
40
|
-
const parentRect = listRef.current.getBoundingClientRect();
|
|
41
|
-
const zoomFactor = parentRect.width / listRef.current.offsetWidth;
|
|
42
|
-
const left = (tabRect.left - parentRect.left) / zoomFactor;
|
|
43
|
-
const width = tabRect.width / zoomFactor;
|
|
44
|
-
setUnderlineStyle({
|
|
45
|
-
left,
|
|
46
|
-
width
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
}, [setUnderlineStyle, listRef]);
|
|
50
|
-
useOnMountEffect(() => {
|
|
51
|
-
if (!listRef.current || !window.ResizeObserver) {
|
|
52
|
-
return;
|
|
53
|
-
}
|
|
54
|
-
const observer = new window.ResizeObserver(([entry]) => {
|
|
55
|
-
if (entry) {
|
|
56
|
-
updateUnderlineStyle();
|
|
57
|
-
if (!indicatorIsReady.current) {
|
|
58
|
-
indicatorIsReady.current = true;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
});
|
|
62
|
-
observer.observe(listRef.current);
|
|
63
|
-
return () => {
|
|
64
|
-
observer.disconnect();
|
|
65
|
-
};
|
|
66
|
-
});
|
|
67
|
-
React.useEffect(() => {
|
|
68
|
-
updateUnderlineStyle();
|
|
69
|
-
}, [children, updateUnderlineStyle]);
|
|
70
|
-
return React.createElement(StyledNav, _extends({
|
|
71
|
-
id: id,
|
|
72
|
-
"data-testid": testId,
|
|
73
|
-
"aria-label": ariaLabel,
|
|
74
|
-
"aria-labelledby": ariaLabelledBy,
|
|
75
|
-
ref: ref,
|
|
76
|
-
style: [styles$1.nav, stylesProp == null ? void 0 : stylesProp.root]
|
|
77
|
-
}, otherProps), React.createElement(StyledDiv, {
|
|
78
|
-
style: styles$1.contents
|
|
79
|
-
}, React.createElement(StyledUl, {
|
|
80
|
-
style: [styles$1.list, stylesProp == null ? void 0 : stylesProp.list],
|
|
81
|
-
ref: listRef
|
|
82
|
-
}, children), indicatorIsReady.current && React.createElement(View, {
|
|
83
|
-
style: [{
|
|
84
|
-
transform: `translateX(${underlineStyle.left}px)`,
|
|
85
|
-
width: `${underlineStyle.width}px`
|
|
86
|
-
}, styles$1.currentUnderline, animated && styles$1.underlineTransition],
|
|
87
|
-
role: "presentation"
|
|
88
|
-
})));
|
|
89
|
-
});
|
|
90
|
-
const styles$1 = StyleSheet.create({
|
|
91
|
-
nav: {
|
|
92
|
-
overflowX: "auto"
|
|
93
|
-
},
|
|
94
|
-
contents: {
|
|
95
|
-
position: "relative"
|
|
96
|
-
},
|
|
97
|
-
list: {
|
|
98
|
-
paddingInline: sizing.size_040,
|
|
99
|
-
paddingBlock: sizing.size_0,
|
|
100
|
-
margin: sizing.size_0,
|
|
101
|
-
display: "flex",
|
|
102
|
-
gap: sizing.size_160,
|
|
103
|
-
flexWrap: "nowrap"
|
|
104
|
-
},
|
|
105
|
-
currentUnderline: {
|
|
106
|
-
position: "absolute",
|
|
107
|
-
bottom: 0,
|
|
108
|
-
left: 0,
|
|
109
|
-
height: sizing.size_040,
|
|
110
|
-
backgroundColor: semanticColor.action.secondary.progressive.default.foreground
|
|
111
|
-
},
|
|
112
|
-
underlineTransition: {
|
|
113
|
-
transition: "transform 0.3s ease, width 0.3s ease"
|
|
114
|
-
}
|
|
115
|
-
});
|
|
8
|
+
const StyledNav=addStyle("nav");const StyledUl=addStyle("ul");const StyledDiv=addStyle("div");const NavigationTabs=React.forwardRef(function NavigationTabs(props,ref){const{id,testId,children,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,styles:stylesProp,animated=false,...otherProps}=props;const listRef=React.useRef(null);const indicatorIsReady=React.useRef(false);const[underlineStyle,setUnderlineStyle]=React.useState({left:0,width:0});const updateUnderlineStyle=React.useCallback(()=>{if(!listRef.current){return}const activeTab=Array.from(listRef.current.children).find(child=>child.children[0]?.ariaCurrent);if(activeTab){const tabRect=activeTab.getBoundingClientRect();const parentRect=listRef.current.getBoundingClientRect();const zoomFactor=parentRect.width/listRef.current.offsetWidth;const left=(tabRect.left-parentRect.left)/zoomFactor;const width=tabRect.width/zoomFactor;setUnderlineStyle({left,width});}},[setUnderlineStyle,listRef]);useOnMountEffect(()=>{if(!listRef.current||!window.ResizeObserver){return}const observer=new window.ResizeObserver(([entry])=>{if(entry){updateUnderlineStyle();if(!indicatorIsReady.current){indicatorIsReady.current=true;}}});observer.observe(listRef.current);return ()=>{observer.disconnect();}});React.useEffect(()=>{updateUnderlineStyle();},[children,updateUnderlineStyle]);return jsx(StyledNav,{id:id,"data-testid":testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,ref:ref,style:[styles$1.nav,stylesProp?.root],...otherProps,children:jsxs(StyledDiv,{style:styles$1.contents,children:[jsx(StyledUl,{style:[styles$1.list,stylesProp?.list],ref:listRef,children:children}),indicatorIsReady.current&&jsx(View,{style:[{transform:`translateX(${underlineStyle.left}px)`,width:`${underlineStyle.width}px`},styles$1.currentUnderline,animated&&styles$1.underlineTransition],role:"presentation"})]})})});const styles$1=StyleSheet.create({nav:{overflowX:"auto"},contents:{position:"relative"},list:{paddingInline:sizing.size_040,paddingBlock:sizing.size_0,margin:sizing.size_0,display:"flex",gap:sizing.size_160,flexWrap:"nowrap"},currentUnderline:{position:"absolute",bottom:0,left:0,height:sizing.size_040,backgroundColor:semanticColor.action.secondary.progressive.default.foreground},underlineTransition:{transition:"transform 0.3s ease, width 0.3s ease"}});
|
|
116
9
|
|
|
117
|
-
const
|
|
118
|
-
const StyledLi = addStyle("li");
|
|
119
|
-
const NavigationTabItem = React.forwardRef(function NavigationTabItem(props, ref) {
|
|
120
|
-
const {
|
|
121
|
-
children,
|
|
122
|
-
id,
|
|
123
|
-
testId,
|
|
124
|
-
current,
|
|
125
|
-
style
|
|
126
|
-
} = props,
|
|
127
|
-
otherProps = _objectWithoutPropertiesLoose(props, _excluded);
|
|
128
|
-
function renderChildren() {
|
|
129
|
-
const linkProps = {
|
|
130
|
-
style: [styles$2.Body, styles.link, current && styles.currentLink],
|
|
131
|
-
"aria-current": current ? "page" : undefined
|
|
132
|
-
};
|
|
133
|
-
if (typeof children === "function") {
|
|
134
|
-
return children(linkProps);
|
|
135
|
-
}
|
|
136
|
-
return React.cloneElement(children, linkProps);
|
|
137
|
-
}
|
|
138
|
-
return React.createElement(StyledLi, _extends({
|
|
139
|
-
id: id,
|
|
140
|
-
"data-testid": testId,
|
|
141
|
-
style: [styles.root, current && styles.current, style],
|
|
142
|
-
ref: ref
|
|
143
|
-
}, otherProps), renderChildren());
|
|
144
|
-
});
|
|
145
|
-
const styles = StyleSheet.create({
|
|
146
|
-
root: {
|
|
147
|
-
listStyle: "none",
|
|
148
|
-
display: "inline-flex",
|
|
149
|
-
[":has(a:hover)"]: {
|
|
150
|
-
boxShadow: `inset 0 -${sizing.size_020} 0 0 ${semanticColor.action.secondary.progressive.hover.foreground}`
|
|
151
|
-
},
|
|
152
|
-
[":has(a:active)"]: {
|
|
153
|
-
boxShadow: `inset 0 -${sizing.size_060} 0 0 ${semanticColor.action.secondary.progressive.press.foreground}`
|
|
154
|
-
},
|
|
155
|
-
paddingBlockStart: sizing.size_080,
|
|
156
|
-
paddingBlockEnd: sizing.size_180,
|
|
157
|
-
[breakpoint.mediaQuery.mdOrLarger]: {
|
|
158
|
-
paddingBlockStart: sizing.size_200,
|
|
159
|
-
paddingBlockEnd: sizing.size_240
|
|
160
|
-
}
|
|
161
|
-
},
|
|
162
|
-
current: {
|
|
163
|
-
[":has(a:hover)"]: {
|
|
164
|
-
boxShadow: "none"
|
|
165
|
-
}
|
|
166
|
-
},
|
|
167
|
-
currentLink: {
|
|
168
|
-
color: semanticColor.action.secondary.progressive.default.foreground
|
|
169
|
-
},
|
|
170
|
-
link: {
|
|
171
|
-
display: "flex",
|
|
172
|
-
margin: 0,
|
|
173
|
-
color: semanticColor.text.primary,
|
|
174
|
-
paddingInline: 0,
|
|
175
|
-
position: "relative",
|
|
176
|
-
whiteSpace: "nowrap",
|
|
177
|
-
textDecoration: "none",
|
|
178
|
-
[":hover:not([aria-disabled=true])"]: {
|
|
179
|
-
textDecoration: "none",
|
|
180
|
-
border: "none",
|
|
181
|
-
outline: "none",
|
|
182
|
-
color: semanticColor.action.secondary.progressive.default.foreground,
|
|
183
|
-
backgroundColor: "transparent"
|
|
184
|
-
},
|
|
185
|
-
[":active:not([aria-disabled=true])"]: {
|
|
186
|
-
textDecoration: "none",
|
|
187
|
-
border: "none",
|
|
188
|
-
outline: "none",
|
|
189
|
-
color: semanticColor.action.secondary.progressive.press.foreground
|
|
190
|
-
},
|
|
191
|
-
":focus-visible": {
|
|
192
|
-
color: semanticColor.action.secondary.progressive.default.foreground,
|
|
193
|
-
border: "none",
|
|
194
|
-
outline: "none",
|
|
195
|
-
boxShadow: `0 0 0 ${sizing.size_020} ${semanticColor.focus.inner}, 0 0 0 ${sizing.size_040} ${semanticColor.focus.outer}`,
|
|
196
|
-
borderRadius: border.radius.radius_0
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
});
|
|
10
|
+
const StyledLi=addStyle("li");const NavigationTabItem=React.forwardRef(function NavigationTabItem(props,ref){const{children,id,testId,current,style,...otherProps}=props;function renderChildren(){const linkProps={style:[styles$2.Body,styles.link,current&&styles.currentLink],"aria-current":current?"page":undefined};if(typeof children==="function"){return children(linkProps)}return React.cloneElement(children,linkProps)}return jsx(StyledLi,{id:id,"data-testid":testId,style:[styles.root,current&&styles.current,style],ref:ref,...otherProps,children:renderChildren()})});const styles=StyleSheet.create({root:{listStyle:"none",display:"inline-flex",[":has(a:hover)"]:{boxShadow:`inset 0 calc(${sizing.size_020}*-1) 0 0 ${semanticColor.action.secondary.progressive.hover.foreground}`},[":has(a:active)"]:{boxShadow:`inset 0 calc(${sizing.size_060}*-1) 0 0 ${semanticColor.action.secondary.progressive.press.foreground}`},paddingBlockStart:sizing.size_080,paddingBlockEnd:sizing.size_180,[breakpoint.mediaQuery.mdOrLarger]:{paddingBlockStart:sizing.size_200,paddingBlockEnd:sizing.size_240}},current:{[":has(a:hover)"]:{boxShadow:"none"}},currentLink:{color:semanticColor.action.secondary.progressive.default.foreground},link:{display:"flex",margin:0,color:semanticColor.text.primary,paddingInline:0,position:"relative",whiteSpace:"nowrap",textDecoration:"none",[":hover:not([aria-disabled=true])"]:{textDecoration:"none",border:"none",outline:"none",color:semanticColor.action.secondary.progressive.default.foreground,backgroundColor:"transparent"},[":active:not([aria-disabled=true])"]:{textDecoration:"none",border:"none",outline:"none",color:semanticColor.action.secondary.progressive.press.foreground},":focus-visible":{color:semanticColor.action.secondary.progressive.default.foreground,border:"none",outline:"none",boxShadow:`0 0 0 ${sizing.size_020} ${semanticColor.focus.inner}, 0 0 0 ${sizing.size_040} ${semanticColor.focus.outer}`,borderRadius:border.radius.radius_0}}});
|
|
200
11
|
|
|
201
12
|
export { NavigationTabItem, NavigationTabs };
|
package/dist/index.js
CHANGED
|
@@ -2,16 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
6
|
var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
|
|
8
7
|
var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
|
|
9
8
|
var aphrodite = require('aphrodite');
|
|
10
9
|
var React = require('react');
|
|
11
10
|
var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
|
|
12
11
|
|
|
13
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
|
-
|
|
15
12
|
function _interopNamespace(e) {
|
|
16
13
|
if (e && e.__esModule) return e;
|
|
17
14
|
var n = Object.create(null);
|
|
@@ -30,201 +27,11 @@ function _interopNamespace(e) {
|
|
|
30
27
|
return Object.freeze(n);
|
|
31
28
|
}
|
|
32
29
|
|
|
33
|
-
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
34
|
-
var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
|
|
35
30
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
36
31
|
|
|
37
|
-
const
|
|
38
|
-
const StyledNav = wonderBlocksCore.addStyle("nav");
|
|
39
|
-
const StyledUl = wonderBlocksCore.addStyle("ul");
|
|
40
|
-
const StyledDiv = wonderBlocksCore.addStyle("div");
|
|
41
|
-
const NavigationTabs = React__namespace.forwardRef(function NavigationTabs(props, ref) {
|
|
42
|
-
const {
|
|
43
|
-
id,
|
|
44
|
-
testId,
|
|
45
|
-
children,
|
|
46
|
-
"aria-label": ariaLabel,
|
|
47
|
-
"aria-labelledby": ariaLabelledBy,
|
|
48
|
-
styles: stylesProp,
|
|
49
|
-
animated = false
|
|
50
|
-
} = props,
|
|
51
|
-
otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
|
|
52
|
-
const listRef = React__namespace.useRef(null);
|
|
53
|
-
const indicatorIsReady = React__namespace.useRef(false);
|
|
54
|
-
const [underlineStyle, setUnderlineStyle] = React__namespace.useState({
|
|
55
|
-
left: 0,
|
|
56
|
-
width: 0
|
|
57
|
-
});
|
|
58
|
-
const updateUnderlineStyle = React__namespace.useCallback(() => {
|
|
59
|
-
if (!listRef.current) {
|
|
60
|
-
return;
|
|
61
|
-
}
|
|
62
|
-
const activeTab = Array.from(listRef.current.children).find(child => {
|
|
63
|
-
var _child$children$;
|
|
64
|
-
return (_child$children$ = child.children[0]) == null ? void 0 : _child$children$.ariaCurrent;
|
|
65
|
-
});
|
|
66
|
-
if (activeTab) {
|
|
67
|
-
const tabRect = activeTab.getBoundingClientRect();
|
|
68
|
-
const parentRect = listRef.current.getBoundingClientRect();
|
|
69
|
-
const zoomFactor = parentRect.width / listRef.current.offsetWidth;
|
|
70
|
-
const left = (tabRect.left - parentRect.left) / zoomFactor;
|
|
71
|
-
const width = tabRect.width / zoomFactor;
|
|
72
|
-
setUnderlineStyle({
|
|
73
|
-
left,
|
|
74
|
-
width
|
|
75
|
-
});
|
|
76
|
-
}
|
|
77
|
-
}, [setUnderlineStyle, listRef]);
|
|
78
|
-
wonderBlocksCore.useOnMountEffect(() => {
|
|
79
|
-
if (!listRef.current || !window.ResizeObserver) {
|
|
80
|
-
return;
|
|
81
|
-
}
|
|
82
|
-
const observer = new window.ResizeObserver(([entry]) => {
|
|
83
|
-
if (entry) {
|
|
84
|
-
updateUnderlineStyle();
|
|
85
|
-
if (!indicatorIsReady.current) {
|
|
86
|
-
indicatorIsReady.current = true;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
});
|
|
90
|
-
observer.observe(listRef.current);
|
|
91
|
-
return () => {
|
|
92
|
-
observer.disconnect();
|
|
93
|
-
};
|
|
94
|
-
});
|
|
95
|
-
React__namespace.useEffect(() => {
|
|
96
|
-
updateUnderlineStyle();
|
|
97
|
-
}, [children, updateUnderlineStyle]);
|
|
98
|
-
return React__namespace.createElement(StyledNav, _extends__default["default"]({
|
|
99
|
-
id: id,
|
|
100
|
-
"data-testid": testId,
|
|
101
|
-
"aria-label": ariaLabel,
|
|
102
|
-
"aria-labelledby": ariaLabelledBy,
|
|
103
|
-
ref: ref,
|
|
104
|
-
style: [styles$1.nav, stylesProp == null ? void 0 : stylesProp.root]
|
|
105
|
-
}, otherProps), React__namespace.createElement(StyledDiv, {
|
|
106
|
-
style: styles$1.contents
|
|
107
|
-
}, React__namespace.createElement(StyledUl, {
|
|
108
|
-
style: [styles$1.list, stylesProp == null ? void 0 : stylesProp.list],
|
|
109
|
-
ref: listRef
|
|
110
|
-
}, children), indicatorIsReady.current && React__namespace.createElement(wonderBlocksCore.View, {
|
|
111
|
-
style: [{
|
|
112
|
-
transform: `translateX(${underlineStyle.left}px)`,
|
|
113
|
-
width: `${underlineStyle.width}px`
|
|
114
|
-
}, styles$1.currentUnderline, animated && styles$1.underlineTransition],
|
|
115
|
-
role: "presentation"
|
|
116
|
-
})));
|
|
117
|
-
});
|
|
118
|
-
const styles$1 = aphrodite.StyleSheet.create({
|
|
119
|
-
nav: {
|
|
120
|
-
overflowX: "auto"
|
|
121
|
-
},
|
|
122
|
-
contents: {
|
|
123
|
-
position: "relative"
|
|
124
|
-
},
|
|
125
|
-
list: {
|
|
126
|
-
paddingInline: wonderBlocksTokens.sizing.size_040,
|
|
127
|
-
paddingBlock: wonderBlocksTokens.sizing.size_0,
|
|
128
|
-
margin: wonderBlocksTokens.sizing.size_0,
|
|
129
|
-
display: "flex",
|
|
130
|
-
gap: wonderBlocksTokens.sizing.size_160,
|
|
131
|
-
flexWrap: "nowrap"
|
|
132
|
-
},
|
|
133
|
-
currentUnderline: {
|
|
134
|
-
position: "absolute",
|
|
135
|
-
bottom: 0,
|
|
136
|
-
left: 0,
|
|
137
|
-
height: wonderBlocksTokens.sizing.size_040,
|
|
138
|
-
backgroundColor: wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground
|
|
139
|
-
},
|
|
140
|
-
underlineTransition: {
|
|
141
|
-
transition: "transform 0.3s ease, width 0.3s ease"
|
|
142
|
-
}
|
|
143
|
-
});
|
|
32
|
+
const StyledNav=wonderBlocksCore.addStyle("nav");const StyledUl=wonderBlocksCore.addStyle("ul");const StyledDiv=wonderBlocksCore.addStyle("div");const NavigationTabs=React__namespace.forwardRef(function NavigationTabs(props,ref){const{id,testId,children,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,styles:stylesProp,animated=false,...otherProps}=props;const listRef=React__namespace.useRef(null);const indicatorIsReady=React__namespace.useRef(false);const[underlineStyle,setUnderlineStyle]=React__namespace.useState({left:0,width:0});const updateUnderlineStyle=React__namespace.useCallback(()=>{if(!listRef.current){return}const activeTab=Array.from(listRef.current.children).find(child=>child.children[0]?.ariaCurrent);if(activeTab){const tabRect=activeTab.getBoundingClientRect();const parentRect=listRef.current.getBoundingClientRect();const zoomFactor=parentRect.width/listRef.current.offsetWidth;const left=(tabRect.left-parentRect.left)/zoomFactor;const width=tabRect.width/zoomFactor;setUnderlineStyle({left,width});}},[setUnderlineStyle,listRef]);wonderBlocksCore.useOnMountEffect(()=>{if(!listRef.current||!window.ResizeObserver){return}const observer=new window.ResizeObserver(([entry])=>{if(entry){updateUnderlineStyle();if(!indicatorIsReady.current){indicatorIsReady.current=true;}}});observer.observe(listRef.current);return ()=>{observer.disconnect();}});React__namespace.useEffect(()=>{updateUnderlineStyle();},[children,updateUnderlineStyle]);return jsxRuntime.jsx(StyledNav,{id:id,"data-testid":testId,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,ref:ref,style:[styles$1.nav,stylesProp?.root],...otherProps,children:jsxRuntime.jsxs(StyledDiv,{style:styles$1.contents,children:[jsxRuntime.jsx(StyledUl,{style:[styles$1.list,stylesProp?.list],ref:listRef,children:children}),indicatorIsReady.current&&jsxRuntime.jsx(wonderBlocksCore.View,{style:[{transform:`translateX(${underlineStyle.left}px)`,width:`${underlineStyle.width}px`},styles$1.currentUnderline,animated&&styles$1.underlineTransition],role:"presentation"})]})})});const styles$1=aphrodite.StyleSheet.create({nav:{overflowX:"auto"},contents:{position:"relative"},list:{paddingInline:wonderBlocksTokens.sizing.size_040,paddingBlock:wonderBlocksTokens.sizing.size_0,margin:wonderBlocksTokens.sizing.size_0,display:"flex",gap:wonderBlocksTokens.sizing.size_160,flexWrap:"nowrap"},currentUnderline:{position:"absolute",bottom:0,left:0,height:wonderBlocksTokens.sizing.size_040,backgroundColor:wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground},underlineTransition:{transition:"transform 0.3s ease, width 0.3s ease"}});
|
|
144
33
|
|
|
145
|
-
const
|
|
146
|
-
const StyledLi = wonderBlocksCore.addStyle("li");
|
|
147
|
-
const NavigationTabItem = React__namespace.forwardRef(function NavigationTabItem(props, ref) {
|
|
148
|
-
const {
|
|
149
|
-
children,
|
|
150
|
-
id,
|
|
151
|
-
testId,
|
|
152
|
-
current,
|
|
153
|
-
style
|
|
154
|
-
} = props,
|
|
155
|
-
otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
|
|
156
|
-
function renderChildren() {
|
|
157
|
-
const linkProps = {
|
|
158
|
-
style: [wonderBlocksTypography.styles.Body, styles.link, current && styles.currentLink],
|
|
159
|
-
"aria-current": current ? "page" : undefined
|
|
160
|
-
};
|
|
161
|
-
if (typeof children === "function") {
|
|
162
|
-
return children(linkProps);
|
|
163
|
-
}
|
|
164
|
-
return React__namespace.cloneElement(children, linkProps);
|
|
165
|
-
}
|
|
166
|
-
return React__namespace.createElement(StyledLi, _extends__default["default"]({
|
|
167
|
-
id: id,
|
|
168
|
-
"data-testid": testId,
|
|
169
|
-
style: [styles.root, current && styles.current, style],
|
|
170
|
-
ref: ref
|
|
171
|
-
}, otherProps), renderChildren());
|
|
172
|
-
});
|
|
173
|
-
const styles = aphrodite.StyleSheet.create({
|
|
174
|
-
root: {
|
|
175
|
-
listStyle: "none",
|
|
176
|
-
display: "inline-flex",
|
|
177
|
-
[":has(a:hover)"]: {
|
|
178
|
-
boxShadow: `inset 0 -${wonderBlocksTokens.sizing.size_020} 0 0 ${wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.foreground}`
|
|
179
|
-
},
|
|
180
|
-
[":has(a:active)"]: {
|
|
181
|
-
boxShadow: `inset 0 -${wonderBlocksTokens.sizing.size_060} 0 0 ${wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground}`
|
|
182
|
-
},
|
|
183
|
-
paddingBlockStart: wonderBlocksTokens.sizing.size_080,
|
|
184
|
-
paddingBlockEnd: wonderBlocksTokens.sizing.size_180,
|
|
185
|
-
[wonderBlocksTokens.breakpoint.mediaQuery.mdOrLarger]: {
|
|
186
|
-
paddingBlockStart: wonderBlocksTokens.sizing.size_200,
|
|
187
|
-
paddingBlockEnd: wonderBlocksTokens.sizing.size_240
|
|
188
|
-
}
|
|
189
|
-
},
|
|
190
|
-
current: {
|
|
191
|
-
[":has(a:hover)"]: {
|
|
192
|
-
boxShadow: "none"
|
|
193
|
-
}
|
|
194
|
-
},
|
|
195
|
-
currentLink: {
|
|
196
|
-
color: wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground
|
|
197
|
-
},
|
|
198
|
-
link: {
|
|
199
|
-
display: "flex",
|
|
200
|
-
margin: 0,
|
|
201
|
-
color: wonderBlocksTokens.semanticColor.text.primary,
|
|
202
|
-
paddingInline: 0,
|
|
203
|
-
position: "relative",
|
|
204
|
-
whiteSpace: "nowrap",
|
|
205
|
-
textDecoration: "none",
|
|
206
|
-
[":hover:not([aria-disabled=true])"]: {
|
|
207
|
-
textDecoration: "none",
|
|
208
|
-
border: "none",
|
|
209
|
-
outline: "none",
|
|
210
|
-
color: wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground,
|
|
211
|
-
backgroundColor: "transparent"
|
|
212
|
-
},
|
|
213
|
-
[":active:not([aria-disabled=true])"]: {
|
|
214
|
-
textDecoration: "none",
|
|
215
|
-
border: "none",
|
|
216
|
-
outline: "none",
|
|
217
|
-
color: wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground
|
|
218
|
-
},
|
|
219
|
-
":focus-visible": {
|
|
220
|
-
color: wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground,
|
|
221
|
-
border: "none",
|
|
222
|
-
outline: "none",
|
|
223
|
-
boxShadow: `0 0 0 ${wonderBlocksTokens.sizing.size_020} ${wonderBlocksTokens.semanticColor.focus.inner}, 0 0 0 ${wonderBlocksTokens.sizing.size_040} ${wonderBlocksTokens.semanticColor.focus.outer}`,
|
|
224
|
-
borderRadius: wonderBlocksTokens.border.radius.radius_0
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
});
|
|
34
|
+
const StyledLi=wonderBlocksCore.addStyle("li");const NavigationTabItem=React__namespace.forwardRef(function NavigationTabItem(props,ref){const{children,id,testId,current,style,...otherProps}=props;function renderChildren(){const linkProps={style:[wonderBlocksTypography.styles.Body,styles.link,current&&styles.currentLink],"aria-current":current?"page":undefined};if(typeof children==="function"){return children(linkProps)}return React__namespace.cloneElement(children,linkProps)}return jsxRuntime.jsx(StyledLi,{id:id,"data-testid":testId,style:[styles.root,current&&styles.current,style],ref:ref,...otherProps,children:renderChildren()})});const styles=aphrodite.StyleSheet.create({root:{listStyle:"none",display:"inline-flex",[":has(a:hover)"]:{boxShadow:`inset 0 calc(${wonderBlocksTokens.sizing.size_020}*-1) 0 0 ${wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.foreground}`},[":has(a:active)"]:{boxShadow:`inset 0 calc(${wonderBlocksTokens.sizing.size_060}*-1) 0 0 ${wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground}`},paddingBlockStart:wonderBlocksTokens.sizing.size_080,paddingBlockEnd:wonderBlocksTokens.sizing.size_180,[wonderBlocksTokens.breakpoint.mediaQuery.mdOrLarger]:{paddingBlockStart:wonderBlocksTokens.sizing.size_200,paddingBlockEnd:wonderBlocksTokens.sizing.size_240}},current:{[":has(a:hover)"]:{boxShadow:"none"}},currentLink:{color:wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground},link:{display:"flex",margin:0,color:wonderBlocksTokens.semanticColor.text.primary,paddingInline:0,position:"relative",whiteSpace:"nowrap",textDecoration:"none",[":hover:not([aria-disabled=true])"]:{textDecoration:"none",border:"none",outline:"none",color:wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground,backgroundColor:"transparent"},[":active:not([aria-disabled=true])"]:{textDecoration:"none",border:"none",outline:"none",color:wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground},":focus-visible":{color:wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground,border:"none",outline:"none",boxShadow:`0 0 0 ${wonderBlocksTokens.sizing.size_020} ${wonderBlocksTokens.semanticColor.focus.inner}, 0 0 0 ${wonderBlocksTokens.sizing.size_040} ${wonderBlocksTokens.semanticColor.focus.outer}`,borderRadius:wonderBlocksTokens.border.radius.radius_0}}});
|
|
228
35
|
|
|
229
36
|
exports.NavigationTabItem = NavigationTabItem;
|
|
230
37
|
exports.NavigationTabs = NavigationTabs;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-tabs",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.7",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"description": "Tabs are used to control what content is shown",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -12,17 +12,16 @@
|
|
|
12
12
|
"access": "public"
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@babel/runtime": "^7.24.5",
|
|
16
15
|
"@khanacademy/wonder-blocks-core": "12.2.1",
|
|
17
|
-
"@khanacademy/wonder-blocks-tokens": "
|
|
18
|
-
"@khanacademy/wonder-blocks-typography": "3.
|
|
16
|
+
"@khanacademy/wonder-blocks-tokens": "10.0.0",
|
|
17
|
+
"@khanacademy/wonder-blocks-typography": "3.2.0"
|
|
19
18
|
},
|
|
20
19
|
"peerDependencies": {
|
|
21
20
|
"aphrodite": "^1.2.5",
|
|
22
21
|
"react": "18.2.0"
|
|
23
22
|
},
|
|
24
23
|
"devDependencies": {
|
|
25
|
-
"@khanacademy/wb-dev-build-settings": "
|
|
24
|
+
"@khanacademy/wb-dev-build-settings": "3.0.0"
|
|
26
25
|
},
|
|
27
26
|
"scripts": {
|
|
28
27
|
"test": "echo \"Error: no test specified\" && exit 1"
|