@extrachill/components 0.4.16 → 0.4.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/ResponsiveTabs.d.ts.map +1 -1
  2. package/dist/ResponsiveTabs.js +9 -2
  3. package/package.json +1 -1
  4. package/src/ResponsiveTabs.tsx +10 -2
  5. package/styles/components.scss +2 -16
package/dist/ResponsiveTabs.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ResponsiveTabs.d.ts","sourceRoot":"","sources":["../src/ResponsiveTabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,mBAAmB;IACnC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;IACjC,WAAW,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,SAAS,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAE,EAC/B,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,WAAW,EACX,SAAc,EACd,WAAkC,EAClC,aAAkB,EAClB,eAA2B,EAC3B,gBAAsB,EACtB,kBAAuB,EACvB,eAAsB,GACtB,EAAE,mBAAmB,kDAkFrB"}
1
+ {"version":3,"file":"ResponsiveTabs.d.ts","sourceRoot":"","sources":["../src/ResponsiveTabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,mBAAmB;IACnC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;IACjC,WAAW,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,SAAS,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAE,EAC/B,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,WAAW,EACX,SAAc,EACd,WAAkC,EAClC,aAAkB,EAClB,eAA2B,EAC3B,gBAAsB,EACtB,kBAAuB,EACvB,eAAsB,GACtB,EAAE,mBAAmB,kDA0FrB"}
package/dist/ResponsiveTabs.js CHANGED
@@ -8,6 +8,7 @@ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className
8
8
  }
9
9
  return window.innerWidth < mobileBreakpoint;
10
10
  });
11
+ const [mobileActive, setMobileActive] = useState(active);
11
12
  useEffect(() => {
12
13
  if (typeof window === 'undefined') {
13
14
  return undefined;
@@ -19,6 +20,9 @@ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className
19
20
  window.addEventListener('resize', handleResize);
20
21
  return () => window.removeEventListener('resize', handleResize);
21
22
  }, [mobileBreakpoint]);
23
+ useEffect(() => {
24
+ setMobileActive(active);
25
+ }, [active]);
22
26
  const rootClass = useMemo(() => [
23
27
  classPrefix,
24
28
  isMobile ? `${classPrefix}--mobile` : `${classPrefix}--desktop`,
@@ -33,7 +37,10 @@ export function ResponsiveTabs({ tabs, active, onChange, renderPanel, className
33
37
  return (_jsxs("div", { className: rootClass, children: [showDesktopTabs && (_jsx(Tabs, { tabs: tabs, active: active, onChange: onChange, className: tabsClassName, classPrefix: tabsClassPrefix })), _jsx("div", { className: `${classPrefix}__desktop-panel`, children: renderPanel(active) })] }));
34
38
  }
35
39
  return (_jsx("div", { className: rootClass, children: _jsx("div", { className: [`${classPrefix}__accordion`, accordionClassName].filter(Boolean).join(' '), children: tabs.map((tab) => {
36
- const isActive = tab.id === active;
37
- return (_jsxs("div", { className: `${classPrefix}__item${isActive ? ' is-active' : ''}`, children: [_jsxs("button", { type: "button", className: `${classPrefix}__trigger${isActive ? ' is-active' : ''}`, "aria-expanded": isActive, onClick: () => onChange(tab.id), children: [_jsx("span", { children: tab.label }), _jsx("span", { className: `${classPrefix}__arrow`, "aria-hidden": "true", children: isActive ? '▲' : '▼' })] }), isActive && _jsx("div", { className: `${classPrefix}__panel`, children: renderPanel(tab.id) })] }, tab.id));
40
+ const isActive = tab.id === mobileActive;
41
+ return (_jsxs("div", { className: `${classPrefix}__item${isActive ? ' is-active' : ''}`, children: [_jsxs("button", { type: "button", className: `${classPrefix}__trigger${isActive ? ' is-active' : ''}`, "aria-expanded": isActive, onClick: () => {
42
+ setMobileActive(tab.id);
43
+ onChange(tab.id);
44
+ }, children: [_jsx("span", { children: tab.label }), _jsx("span", { className: `${classPrefix}__arrow`, "aria-hidden": "true", children: isActive ? '▲' : '▼' })] }), isActive && _jsx("div", { className: `${classPrefix}__panel`, children: renderPanel(tab.id) })] }, tab.id));
38
45
  }) }) }));
39
46
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@extrachill/components",
3
- "version": "0.4.16",
3
+ "version": "0.4.18",
4
4
  "description": "Shared React components for the Extra Chill Platform.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
package/src/ResponsiveTabs.tsx CHANGED
@@ -36,6 +36,7 @@ export function ResponsiveTabs( {
36
36
 
37
37
  return window.innerWidth < mobileBreakpoint;
38
38
  } );
39
+ const [ mobileActive, setMobileActive ] = useState( active );
39
40
 
40
41
  useEffect( () => {
41
42
  if ( typeof window === 'undefined' ) {
@@ -52,6 +53,10 @@ export function ResponsiveTabs( {
52
53
  return () => window.removeEventListener( 'resize', handleResize );
53
54
  }, [ mobileBreakpoint ] );
54
55
 
56
+ useEffect( () => {
57
+ setMobileActive( active );
58
+ }, [ active ] );
59
+
55
60
  const rootClass = useMemo(
56
61
  () => [
57
62
  classPrefix,
@@ -88,7 +93,7 @@ export function ResponsiveTabs( {
88
93
  <div className={ rootClass }>
89
94
  <div className={ [ `${ classPrefix }__accordion`, accordionClassName ].filter( Boolean ).join( ' ' ) }>
90
95
  { tabs.map( ( tab ) => {
91
- const isActive = tab.id === active;
96
+ const isActive = tab.id === mobileActive;
92
97
 
93
98
  return (
94
99
  <div key={ tab.id } className={ `${ classPrefix }__item${ isActive ? ' is-active' : '' }` }>
@@ -96,7 +101,10 @@ export function ResponsiveTabs( {
96
101
  type="button"
97
102
  className={ `${ classPrefix }__trigger${ isActive ? ' is-active' : '' }` }
98
103
  aria-expanded={ isActive }
99
- onClick={ () => onChange( tab.id ) }
104
+ onClick={ () => {
105
+ setMobileActive( tab.id );
106
+ onChange( tab.id );
107
+ } }
100
108
  >
101
109
  <span>{ tab.label }</span>
102
110
  <span className={ `${ classPrefix }__arrow` } aria-hidden="true">
package/styles/components.scss CHANGED
@@ -147,6 +147,7 @@
147
147
  .ec-responsive-tabs {
148
148
  display: grid;
149
149
  gap: var(--spacing-md, 1rem);
150
+ background: var(--card-background, #f1f5f9);
150
151
  }
151
152
 
152
153
  .ec-responsive-tabs__desktop-panel {
@@ -209,7 +210,7 @@
209
210
 
210
211
  .ec-responsive-tabs__trigger:hover {
211
212
  background: var(--background-color, #fff);
212
- color: var(--link-color, #0b5394);
213
+ color: var(--link-color-hover, var(--link-color, #0b5394));
213
214
  }
214
215
 
215
216
  .ec-responsive-tabs__trigger:focus-visible {
@@ -516,7 +517,6 @@
516
517
  }
517
518
 
518
519
  .ec-panel {
519
- background: var(--background-color, #fff);
520
520
  border-radius: 0;
521
521
  border-left: 0;
522
522
  border-right: 0;
@@ -527,20 +527,6 @@
527
527
  padding-right: var(--spacing-md, 1rem);
528
528
  }
529
529
 
530
- .ec-panel--depth-0,
531
- .ec-panel--depth-2,
532
- .ec-section--depth-0,
533
- .ec-section--depth-2 {
534
- background: var(--card-background, #f1f5f9);
535
- }
536
-
537
- .ec-panel--depth-1,
538
- .ec-panel--depth-3,
539
- .ec-section--depth-1,
540
- .ec-section--depth-3 {
541
- background: var(--background-color, #fff);
542
- }
543
-
544
530
  .ec-section {
545
531
  border-radius: 0;
546
532
  border-left: 0;