@rango-dev/ui 0.39.1-next.2 → 0.39.1-next.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.js.map +4 -4
  3. package/dist/ui.build.json +1 -1
  4. package/dist/widget/ui/src/components/Tabs/Tabs.d.ts.map +1 -1
  5. package/dist/widget/ui/src/components/Tabs/Tabs.styles.d.ts +973 -0
  6. package/dist/widget/ui/src/components/Tabs/Tabs.styles.d.ts.map +1 -1
  7. package/dist/widget/ui/src/components/Tabs/Tabs.types.d.ts +2 -0
  8. package/dist/widget/ui/src/components/Tabs/Tabs.types.d.ts.map +1 -1
  9. package/dist/widget/ui/src/icons/Chart.d.ts +5 -0
  10. package/dist/widget/ui/src/icons/Chart.d.ts.map +1 -0
  11. package/dist/widget/ui/src/icons/index.d.ts +1 -0
  12. package/dist/widget/ui/src/icons/index.d.ts.map +1 -1
  13. package/package.json +2 -2
  14. package/src/components/Tabs/Tabs.styles.tsx +50 -2
  15. package/src/components/Tabs/Tabs.tsx +177 -57
  16. package/src/components/Tabs/Tabs.types.tsx +2 -0
  17. package/src/icons/Chart.tsx +21 -0
  18. package/src/icons/index.ts +1 -0
package/dist/widget/ui/src/components/Tabs/Tabs.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/Tabs.styles.tsx"],"names":[],"mappings":";;;AAGA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAuCf,CAAC;AAEH,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEA4Gd,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAmCtB,CAAC"}
1
+ {"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/Tabs.styles.tsx"],"names":[],"mappings":";;;AAIA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEASpB,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAYhB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAErB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAEpB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAiDf,CAAC;AAEH,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEA8Gd,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kEAqCtB,CAAC"}
package/dist/widget/ui/src/components/Tabs/Tabs.types.d.ts CHANGED
@@ -25,6 +25,8 @@ export interface TabsPropTypes {
25
25
  type: BaseType;
26
26
  borderRadius?: BaseBorderRadius;
27
27
  className?: string;
28
+ scrollable?: boolean;
29
+ scrollButtons?: boolean;
28
30
  }
29
31
  export {};
30
32
  //# sourceMappingURL=Tabs.types.d.ts.map
package/dist/widget/ui/src/components/Tabs/Tabs.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/Tabs.types.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,KAAK,QAAQ,MAAM,iBAAiB,CAAC;AAEjD,KAAK,QAAQ,GAAG;IACd,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,KAAK,aAAa,GAAG,QAAQ,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF,KAAK,YAAY,GAAG,QAAQ,GAAG;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,IAAI,GAAG,aAAa,GAAG,YAAY,CAAC;AACzC,KAAK,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACpD,KAAK,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AACnD,KAAK,gBAAgB,GAAG,OAAO,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,CAAC;AAEnE,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
1
+ {"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tabs/Tabs.types.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,KAAK,QAAQ,MAAM,iBAAiB,CAAC;AAEjD,KAAK,QAAQ,GAAG;IACd,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,KAAK,aAAa,GAAG,QAAQ,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF,KAAK,YAAY,GAAG,QAAQ,GAAG;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,IAAI,GAAG,aAAa,GAAG,YAAY,CAAC;AACzC,KAAK,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,CAAC;AACpD,KAAK,QAAQ,GAAG,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;AACnD,KAAK,gBAAgB,GAAG,OAAO,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,CAAC;AAEnE,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}
package/dist/widget/ui/src/icons/Chart.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
2
+ import React from 'react';
3
+ declare function SvgChart(props: SvgIconPropsWithChildren): React.FunctionComponentElement<SvgIconPropsWithChildren>;
4
+ export default SvgChart;
5
+ //# sourceMappingURL=Chart.d.ts.map
package/dist/widget/ui/src/icons/Chart.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../../../src/icons/Chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAE/E,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,iBAAS,QAAQ,CAAC,KAAK,EAAE,wBAAwB,4DAahD;AACD,eAAe,QAAQ,CAAC"}
package/dist/widget/ui/src/icons/index.d.ts CHANGED
@@ -87,6 +87,7 @@ export { default as WidgetIcon } from './Widget.js';
87
87
  export { default as WidthIcon } from './Width.js';
88
88
  export { default as BullhornIcon } from './Bullhorn.js';
89
89
  export { default as ChainsIcon } from './Chains.js';
90
+ export { default as ChartIcon } from './Chart.js';
90
91
  export { default as ColorsIcon } from './Colors.js';
91
92
  export { default as DiscordIcon } from './Discord.js';
92
93
  export { default as InfinityIcon } from './Infinity.js';
package/dist/widget/ui/src/icons/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/icons/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/icons/index.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rango-dev/ui",
3
- "version": "0.39.1-next.2",
3
+ "version": "0.39.1-next.4",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "source": "./src/index.ts",
@@ -62,4 +62,4 @@
62
62
  "publishConfig": {
63
63
  "access": "public"
64
64
  }
65
- }
65
+ }
package/src/components/Tabs/Tabs.styles.tsx CHANGED
@@ -1,5 +1,39 @@
1
1
  import { darkTheme, styled } from '../../theme.js';
2
2
  import { Button } from '../Button/index.js';
3
+ import { IconButton } from '../IconButton/IconButton.js';
4
+
5
+ export const Container = styled('div', {
6
+ position: 'relative',
7
+ variants: {
8
+ hasPadding: {
9
+ true: {
10
+ padding: '0 $32',
11
+ },
12
+ },
13
+ },
14
+ });
15
+
16
+ export const Arrow = styled(IconButton, {
17
+ position: 'absolute',
18
+ height: '100%',
19
+ zIndex: 20,
20
+ borderRadius: '$xs !important',
21
+ variants: {
22
+ hidden: {
23
+ true: {
24
+ visibility: 'hidden',
25
+ },
26
+ },
27
+ },
28
+ });
29
+
30
+ export const ArrowRight = styled(Arrow, {
31
+ right: 0,
32
+ });
33
+
34
+ export const ArrowLeft = styled(Arrow, {
35
+ left: 0,
36
+ });
3
37
 
4
38
  export const Tabs = styled('div', {
5
39
  display: 'flex',
@@ -23,7 +57,7 @@ export const Tabs = styled('div', {
23
57
  borderStyle: 'solid',
24
58
  backgroundColor: '$$color',
25
59
  },
26
- bordered: { backgroundColor: 'inherit' },
60
+ bordered: {},
27
61
  },
28
62
  borderRadius: {
29
63
  small: {
@@ -39,6 +73,16 @@ export const Tabs = styled('div', {
39
73
  borderRadius: 'unset',
40
74
  },
41
75
  },
76
+ scrollable: {
77
+ true: {
78
+ overflowX: 'auto',
79
+ scrollBehavior: 'smooth',
80
+ scrollbarWidth: 'none',
81
+ '&::webkit-scrollbar': {
82
+ display: 'none',
83
+ },
84
+ },
85
+ },
42
86
  },
43
87
  });
44
88
 
@@ -75,7 +119,9 @@ export const Tab = styled(Button, {
75
119
  height: '100%',
76
120
  },
77
121
  secondary: {},
78
- bordered: {},
122
+ bordered: {
123
+ padding: '$10 $20',
124
+ },
79
125
  },
80
126
  isActive: {
81
127
  true: {
@@ -154,6 +200,7 @@ export const Tab = styled(Button, {
154
200
 
155
201
  export const BackdropTab = styled('div', {
156
202
  padding: '$4',
203
+ boxSizing: 'border-box',
157
204
  position: 'absolute',
158
205
  inset: 0,
159
206
  transition: 'transform 0.2s cubic-bezier(0, 0, 0.86, 1.2)',
@@ -169,6 +216,7 @@ export const BackdropTab = styled('div', {
169
216
  backgroundColor: '$background',
170
217
  },
171
218
  bordered: {
219
+ borderRadius: '0 !important',
172
220
  borderBottom: '$secondary500 solid 2px',
173
221
  },
174
222
  },
package/src/components/Tabs/Tabs.tsx CHANGED
@@ -1,11 +1,19 @@
1
1
  import type { TabsPropTypes } from './Tabs.types.js';
2
2
 
3
3
  import React, { useEffect, useRef, useState } from 'react';
4
+ import { ChevronLeftIcon, ChevronRightIcon } from 'src/icons/index.js';
4
5
 
5
6
  import { Divider } from '../Divider/index.js';
6
7
  import { Tooltip } from '../Tooltip/index.js';
7
8
 
8
- import { BackdropTab, Tab, Tabs } from './Tabs.styles.js';
9
+ import {
10
+ ArrowLeft,
11
+ ArrowRight,
12
+ BackdropTab,
13
+ Container,
14
+ Tab,
15
+ Tabs,
16
+ } from './Tabs.styles.js';
9
17
 
10
18
  const INITIAL_RENDER_DELAY = 100;
11
19
  export function TabsComponent(props: TabsPropTypes) {
@@ -16,34 +24,68 @@ export function TabsComponent(props: TabsPropTypes) {
16
24
  value,
17
25
  type,
18
26
  className,
27
+ scrollable,
28
+ scrollButtons = true,
19
29
  } = props;
20
30
  const [tabWidth, setTabWidth] = useState(0);
21
- const tabRef: React.Ref<HTMLButtonElement> = useRef(null);
31
+ const tabRef = useRef<HTMLButtonElement | null>(null);
32
+ const containerRef = useRef<HTMLDivElement | null>(null);
33
+ const leftArrowRef = useRef<HTMLButtonElement | null>(null);
22
34
  const currentIndex = tabItems.findIndex((item) => item.id === value);
23
-
24
35
  // State variable to track the initial render
25
36
  const [initialRender, setInitialRender] = useState(true);
26
- const transformPosition = currentIndex * tabWidth;
37
+ const [transformPosition, setTransformPosition] = useState(0);
38
+ const [leftArrowDisabled, setLeftArrowDisabled] = useState(true);
39
+ const [rightArrowDisabled, setRightArrowDisabled] = useState(false);
40
+ const [showArrows, setShowArrows] = useState(false);
41
+
27
42
  let borderRadius: TabsPropTypes['borderRadius'] = 'medium';
28
43
  if (type === 'bordered') {
29
44
  borderRadius = 'none';
30
- } else if (props.borderRadius) {
45
+ } else if (type && props.borderRadius) {
31
46
  borderRadius = props.borderRadius;
32
47
  }
33
48
 
34
- useEffect(() => {
35
- const updateTabWidth = () => {
36
- if (tabRef.current) {
37
- const tabRect = tabRef.current.getBoundingClientRect();
38
- setTabWidth(tabRect.width);
49
+ const handleScroll = (to: 'right' | 'left') => {
50
+ if (!containerRef.current) {
51
+ return;
52
+ }
53
+ const SCROLL_MULTIPLIER = 1.5;
54
+ const scrollWidth =
55
+ (containerRef.current.scrollWidth / tabItems.length) * SCROLL_MULTIPLIER;
56
+
57
+ if (to === 'right') {
58
+ containerRef.current.scrollLeft -= scrollWidth;
59
+ } else {
60
+ containerRef.current.scrollLeft += scrollWidth;
61
+ }
62
+ };
63
+
64
+ const updateIndicator = (currentIndex: number) => {
65
+ if (tabRef.current && containerRef.current) {
66
+ const tabRect = tabRef.current.getBoundingClientRect();
67
+ const containerRect = containerRef.current.getBoundingClientRect();
68
+ setTabWidth(tabRect.width);
69
+ setTransformPosition(
70
+ scrollable ? tabRef.current.offsetLeft : currentIndex * tabWidth
71
+ );
72
+ const itemPartiallyVisibleOnLeft = tabRect.left < containerRect.left;
73
+ const itemPartiallyVisibleOnRight = tabRect.right > containerRect.right;
74
+
75
+ if (itemPartiallyVisibleOnLeft) {
76
+ containerRef.current.scrollLeft = tabRef.current.offsetLeft;
77
+ } else if (itemPartiallyVisibleOnRight) {
78
+ const containerComputedStyles = window.getComputedStyle(
79
+ containerRef.current
80
+ );
81
+ containerRef.current.scrollLeft =
82
+ containerRef.current.scrollLeft +
83
+ tabRect.right -
84
+ containerRect.right +
85
+ parseFloat(containerComputedStyles.borderRightWidth);
39
86
  }
40
- };
41
- updateTabWidth();
42
- window.addEventListener('resize', updateTabWidth);
43
- return () => {
44
- window.removeEventListener('resize', updateTabWidth);
45
- };
46
- }, []);
87
+ }
88
+ };
47
89
 
48
90
  useEffect(() => {
49
91
  // Set initialRender to false after a short delay
@@ -53,48 +95,126 @@ export function TabsComponent(props: TabsPropTypes) {
53
95
  }, INITIAL_RENDER_DELAY);
54
96
  }, []);
55
97
 
98
+ useEffect(() => {
99
+ updateIndicator(currentIndex);
100
+
101
+ const updateArrowsVisibility = () => {
102
+ if (scrollable && containerRef.current) {
103
+ const startOfTheScroll = containerRef.current.scrollLeft === 0;
104
+ const endOfTheScroll =
105
+ containerRef.current.scrollLeft + containerRef.current.clientWidth ===
106
+ containerRef.current.scrollWidth;
107
+
108
+ if (startOfTheScroll) {
109
+ setLeftArrowDisabled(true);
110
+ } else {
111
+ setLeftArrowDisabled(false);
112
+ }
113
+ if (endOfTheScroll) {
114
+ setRightArrowDisabled(true);
115
+ } else {
116
+ setRightArrowDisabled(false);
117
+ }
118
+ }
119
+ };
120
+
121
+ const resizeHandler: ResizeObserverCallback = (event) => {
122
+ if (scrollable && containerRef.current) {
123
+ const TOTAL_WIDTH_OF_ARROWS = 64;
124
+ updateIndicator(currentIndex);
125
+ updateArrowsVisibility();
126
+ const element = event[0].target;
127
+ if (showArrows) {
128
+ const tabsContainerOverflown =
129
+ element.scrollWidth - TOTAL_WIDTH_OF_ARROWS > element.clientWidth;
130
+ if (!tabsContainerOverflown) {
131
+ setShowArrows(false);
132
+ }
133
+ } else if (element.scrollWidth > element.clientWidth) {
134
+ setShowArrows(true);
135
+ }
136
+ }
137
+ };
138
+
139
+ containerRef.current?.addEventListener('scroll', updateArrowsVisibility);
140
+
141
+ const resizeObserver = new ResizeObserver(resizeHandler);
142
+ if (containerRef.current) {
143
+ resizeObserver.observe(containerRef.current);
144
+ }
145
+
146
+ return () => {
147
+ if (containerRef.current) {
148
+ resizeObserver.unobserve(containerRef.current);
149
+ containerRef.current.removeEventListener(
150
+ 'scroll',
151
+ updateArrowsVisibility
152
+ );
153
+ }
154
+ };
155
+ }, [containerRef.current, showArrows, currentIndex]);
156
+
56
157
  return (
57
- <Tabs
58
- className={`_tabs ${className || ''}`}
59
- type={type}
60
- borderRadius={borderRadius}>
61
- {tabItems.map((item, index) => (
62
- <Tooltip
63
- key={item.id}
64
- styles={{ root: { width: '100%' } }}
65
- container={container}
66
- side="bottom"
67
- sideOffset={2}
68
- content={item.tooltip}
69
- open={!item.tooltip ? false : undefined}>
70
- <Tab
71
- className="_tab"
72
- ref={index === 0 ? tabRef : null} // Set ref on the first tab
73
- type={type}
74
- fullWidth
75
- disableRipple={true}
76
- borderRadius={borderRadius}
77
- onClick={() => onChange(item)}
78
- size="small"
79
- isActive={item.id === value}
80
- variant="default">
81
- {item.icon}
82
- {!!item.icon && !!item.title && (
83
- <Divider direction="horizontal" size="2" />
84
- )}
85
- {item.title}
86
- </Tab>
87
- </Tooltip>
88
- ))}
89
- <BackdropTab
158
+ <Container hasPadding={scrollButtons && showArrows}>
159
+ {scrollable && showArrows && scrollButtons && (
160
+ <>
161
+ <ArrowLeft
162
+ ref={leftArrowRef}
163
+ hidden={leftArrowDisabled}
164
+ onClick={() => handleScroll('right')}>
165
+ <ChevronLeftIcon size={16} color="secondary" />
166
+ </ArrowLeft>
167
+ <ArrowRight
168
+ hidden={rightArrowDisabled}
169
+ onClick={() => handleScroll('left')}>
170
+ <ChevronRightIcon size={16} color="secondary" />
171
+ </ArrowRight>
172
+ </>
173
+ )}
174
+ <Tabs
175
+ ref={containerRef}
176
+ className={`_tabs ${className || ''}`}
90
177
  type={type}
91
178
  borderRadius={borderRadius}
92
- className={`_backdrop-tab ${initialRender ? 'no-transition' : ''}`}
93
- css={{
94
- width: tabWidth,
95
- transform: `translateX(${transformPosition}px)`,
96
- }}
97
- />
98
- </Tabs>
179
+ scrollable={scrollable}>
180
+ {tabItems.map((item, index) => (
181
+ <Tooltip
182
+ key={item.id}
183
+ styles={{ root: { width: '100%' } }}
184
+ container={container}
185
+ side="bottom"
186
+ sideOffset={2}
187
+ content={item.tooltip}
188
+ open={!item.tooltip ? false : undefined}>
189
+ <Tab
190
+ className="_tab"
191
+ ref={index === currentIndex ? tabRef : null}
192
+ type={type}
193
+ fullWidth={scrollable ? false : true}
194
+ disableRipple={true}
195
+ borderRadius={borderRadius}
196
+ onClick={() => onChange(item)}
197
+ size="small"
198
+ isActive={item.id === value}
199
+ variant="default">
200
+ {item.icon}
201
+ {!!item.icon && !!item.title && (
202
+ <Divider direction="horizontal" size="2" />
203
+ )}
204
+ {item.title}
205
+ </Tab>
206
+ </Tooltip>
207
+ ))}
208
+ <BackdropTab
209
+ type={type}
210
+ borderRadius={borderRadius}
211
+ className={`_backdrop-tab ${initialRender ? 'no-transition' : ''}`}
212
+ css={{
213
+ width: tabWidth,
214
+ transform: `translateX(${transformPosition}px)`,
215
+ }}
216
+ />
217
+ </Tabs>
218
+ </Container>
99
219
  );
100
220
  }
package/src/components/Tabs/Tabs.types.tsx CHANGED
@@ -29,4 +29,6 @@ export interface TabsPropTypes {
29
29
  type: BaseType;
30
30
  borderRadius?: BaseBorderRadius;
31
31
  className?: string;
32
+ scrollable?: boolean;
33
+ scrollButtons?: boolean;
32
34
  }
package/src/icons/Chart.tsx ADDED
@@ -0,0 +1,21 @@
1
+ import type { SvgIconPropsWithChildren } from '../components/SvgIcon/index.js';
2
+
3
+ import React, { createElement } from 'react';
4
+
5
+ import { SvgIcon } from '../components/SvgIcon/index.js';
6
+
7
+ function SvgChart(props: SvgIconPropsWithChildren) {
8
+ return createElement(
9
+ SvgIcon,
10
+ props,
11
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
12
+ <path
13
+ fillRule="evenodd"
14
+ clipRule="evenodd"
15
+ d="M2.32065 2.32065C3.74249 0.898821 5.88475 0.339844 8.69984 0.339844H15.2998C18.1149 0.339844 20.2572 0.898821 21.679 2.32065C23.1009 3.74249 23.6598 5.88475 23.6598 8.69984V15.2998C23.6598 18.1149 23.1009 20.2572 21.679 21.679C20.2572 23.1009 18.1149 23.6598 15.2998 23.6598H8.69984C5.88475 23.6598 3.74249 23.1009 2.32065 21.679C0.898821 20.2572 0.339844 18.1149 0.339844 15.2998V8.69984C0.339844 5.88475 0.898821 3.74249 2.32065 2.32065ZM3.25403 3.25403C2.20087 4.3072 1.65984 6.01494 1.65984 8.69984V15.2998C1.65984 17.9847 2.20087 19.6925 3.25403 20.7457C4.3072 21.7988 6.01494 22.3398 8.69984 22.3398H15.2998C17.9847 22.3398 19.6925 21.7988 20.7457 20.7457C21.7988 19.6925 22.3398 17.9847 22.3398 15.2998V8.69984C22.3398 6.01494 21.7988 4.3072 20.7457 3.25403C19.6925 2.20087 17.9847 1.65984 15.2998 1.65984H8.69984C6.01494 1.65984 4.3072 2.20087 3.25403 3.25403ZM11.9998 8.03984C12.3644 8.03984 12.6598 8.33534 12.6598 8.69984V16.0478C12.6598 16.4124 12.3644 16.7078 11.9998 16.7078C11.6353 16.7078 11.3398 16.4124 11.3398 16.0478V8.69984C11.3398 8.33534 11.6353 8.03984 11.9998 8.03984ZM6.49984 9.95384C6.86435 9.95384 7.15984 10.2493 7.15984 10.6138V14.1338C7.15984 14.4984 6.86435 14.7938 6.49984 14.7938C6.13534 14.7938 5.83984 14.4984 5.83984 14.1338V10.6138C5.83984 10.2493 6.13534 9.95384 6.49984 9.95384ZM17.4998 9.95384C17.8644 9.95384 18.1598 10.2493 18.1598 10.6138V14.1338C18.1598 14.4984 17.8644 14.7938 17.4998 14.7938C17.1353 14.7938 16.8398 14.4984 16.8398 14.1338V10.6138C16.8398 10.2493 17.1353 9.95384 17.4998 9.95384Z"
16
+ fill="currentColor"
17
+ />
18
+ </svg>
19
+ );
20
+ }
21
+ export default SvgChart;
package/src/icons/index.ts CHANGED
@@ -87,6 +87,7 @@ export { default as WidgetIcon } from './Widget.js';
87
87
  export { default as WidthIcon } from './Width.js';
88
88
  export { default as BullhornIcon } from './Bullhorn.js';
89
89
  export { default as ChainsIcon } from './Chains.js';
90
+ export { default as ChartIcon } from './Chart.js';
90
91
  export { default as ColorsIcon } from './Colors.js';
91
92
  export { default as DiscordIcon } from './Discord.js';
92
93
  export { default as InfinityIcon } from './Infinity.js';