Skip to content

Commit 2e1202c

Browse files
SutuSebastianSebastian Sutu
SutuSebastian
and
Sebastian Sutu
authored
RSC - patches (#1075)
* fix: add `'use client'` to `Banner.CollapseButton` due to having event handlers * fix: add `'use client'` to `Sidebar` due to having context * fix: add `'use client'` to `SidebarItemGroup` due to having context * fix: add support for individual import since compound components do not work in server components * fix: tests + imports of deprecated `Tabs.Group` compound component; update docs --------- Co-authored-by: Sebastian Sutu <sebastian.sutu@sensidev.com>
1 parent cac6148 commit 2e1202c

17 files changed

Lines changed: 82 additions & 70 deletions

File tree

‎app/docs/components/tabs/tabs.mdx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { Tabs } from 'flowbite-react';
2020

2121
## Default tabs
2222

23-
Add the `<Tabs.Item>` child component to the `<Tabs.Group>` component to create a tab item and you can add any type of markup and React components inside of it and it will be shown when clicking on the associated tab item.
23+
Add the `<Tabs.Item>` child component to the `<Tabs>` component to create a tab item and you can add any type of markup and React components inside of it and it will be shown when clicking on the associated tab item.
2424

2525
You can also choose to add the `active` prop to the `<Tabs.Item>` component to make it active by default and set the title of the tab item using the `title` prop.
2626

@@ -33,7 +33,7 @@ import { MdDashboard } from 'react-icons/md';"
3333
importFlowbiteReact="Tabs"
3434
title="Default tabs"
3535
>
36-
<Tabs.Group aria-label="Default tabs" style="default">
36+
<Tabs aria-label="Default tabs" style="default">
3737
<Tabs.Item active title="Profile" icon={HiUserCircle}>
3838
This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
3939
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
@@ -57,12 +57,12 @@ import { MdDashboard } from 'react-icons/md';"
5757
<Tabs.Item disabled title="Disabled">
5858
Disabled content
5959
</Tabs.Item>
60-
</Tabs.Group>
60+
</Tabs>
6161
</CodePreview>
6262

6363
## Tabs with underline
6464

65-
Pass the `style="underline"` prop to the `<Tabs.Group>` component to make the tabs have an underline style.
65+
Pass the `style="underline"` prop to the `<Tabs>` component to make the tabs have an underline style.
6666

6767
<CodePreview
6868
githubPage="Tab/Tabs"
@@ -71,7 +71,7 @@ import { MdDashboard } from 'react-icons/md';"
7171
importFlowbiteReact="Tabs"
7272
title="Tabs with underline"
7373
>
74-
<Tabs.Group aria-label="Tabs with underline" style="underline">
74+
<Tabs aria-label="Tabs with underline" style="underline">
7575
<Tabs.Item active title="Profile" icon={HiUserCircle}>
7676
This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
7777
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
@@ -95,7 +95,7 @@ import { MdDashboard } from 'react-icons/md';"
9595
<Tabs.Item disabled title="Disabled">
9696
Disabled content
9797
</Tabs.Item>
98-
</Tabs.Group>
98+
</Tabs>
9999
</CodePreview>
100100

101101
## Tabs with icons
@@ -109,7 +109,7 @@ import { MdDashboard } from 'react-icons/md';"
109109
importFlowbiteReact="Tabs"
110110
title="Tabs with icons"
111111
>
112-
<Tabs.Group aria-label="Tabs with icons" style="underline">
112+
<Tabs aria-label="Tabs with icons" style="underline">
113113
<Tabs.Item active title="Profile" icon={HiUserCircle}>
114114
This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
115115
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
@@ -133,15 +133,15 @@ import { MdDashboard } from 'react-icons/md';"
133133
<Tabs.Item disabled title="Disabled">
134134
Disabled content
135135
</Tabs.Item>
136-
</Tabs.Group>
136+
</Tabs>
137137
</CodePreview>
138138

139139
## Tabs with pills
140140

141-
Add the `style="pills"` prop to the `<Tabs.Group>` component to make the tabs have a pills style with rounded corners as an alternative style.
141+
Add the `style="pills"` prop to the `<Tabs>` component to make the tabs have a pills style with rounded corners as an alternative style.
142142

143143
<CodePreview githubPage="Tab/Tabs" importFlowbiteReact="Tabs" title="Pills tabs">
144-
<Tabs.Group aria-label="Pills" style="pills">
144+
<Tabs aria-label="Pills" style="pills">
145145
<Tabs.Item active title="Tab 1">
146146
<p className="text-sm text-gray-500 dark:text-gray-400">Content 1</p>
147147
</Tabs.Item>
@@ -157,12 +157,12 @@ Add the `style="pills"` prop to the `<Tabs.Group>` component to make the tabs ha
157157
<Tabs.Item disabled title="Tab 5">
158158
<p className="text-sm text-gray-500 dark:text-gray-400">Content 5</p>
159159
</Tabs.Item>
160-
</Tabs.Group>
160+
</Tabs>
161161
</CodePreview>
162162

163163
## Full width tabs
164164

165-
Make the tabs span the full width of their container, pass the `style="fullWidth"` prop to the `<Tabs.Group>`
165+
Make the tabs span the full width of their container, pass the `style="fullWidth"` prop to the `<Tabs>`
166166

167167
<CodePreview
168168
githubPage="Tab/Tabs"
@@ -171,7 +171,7 @@ import { MdDashboard } from 'react-icons/md';"
171171
importFlowbiteReact="Tabs"
172172
title="Full width tabs"
173173
>
174-
<Tabs.Group aria-label="Full width tabs" style="fullWidth">
174+
<Tabs aria-label="Full width tabs" style="fullWidth">
175175
<Tabs.Item active title="Profile" icon={HiUserCircle}>
176176
This is <span className="font-medium text-gray-800 dark:text-white">Profile tab's associated content</span>.
177177
Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to
@@ -195,15 +195,15 @@ import { MdDashboard } from 'react-icons/md';"
195195
<Tabs.Item disabled title="Disabled">
196196
Disabled content
197197
</Tabs.Item>
198-
</Tabs.Group>
198+
</Tabs>
199199
</CodePreview>
200200

201201
## React state options
202202

203203
Here's an example on how you can set the activate tab programatically using the React state variables and functions of `activateTab` and `setActivateTab`.
204204

205205
<CodePreview
206-
code={`<Tabs.Group
206+
code={`<Tabs
207207
aria-label="Default tabs"
208208
style="default"
209209
ref={props.tabsRef}
@@ -232,7 +232,7 @@ Here's an example on how you can set the activate tab programatically using the
232232
<Tabs.Item disabled title="Disabled">
233233
Disabled content
234234
</Tabs.Item>
235-
</Tabs.Group>
235+
</Tabs>
236236
<div className="pb-4 pt-2 text-sm text-gray-500 dark:text-gray-400">Active tab: {props.activeTab}</div>
237237
<Button.Group>
238238
<Button color="gray" onClick={() => props.tabsRef.current?.setActiveTab(0)}>
@@ -259,7 +259,7 @@ import { MdDashboard } from 'react-icons/md';"
259259
importFlowbiteReact="Button, Tabs, type TabsRef"
260260
title="Set active tab programmatically"
261261
>
262-
<Tabs.Group
262+
<Tabs
263263
aria-label="Default tabs"
264264
style="default"
265265
ref={props.tabsRef}
@@ -288,7 +288,7 @@ import { MdDashboard } from 'react-icons/md';"
288288
<Tabs.Item disabled title="Disabled">
289289
Disabled content
290290
</Tabs.Item>
291-
</Tabs.Group>
291+
</Tabs>
292292
<div className="pb-4 pt-2 text-sm text-gray-500 dark:text-gray-400">Active tab: {props.activeTab}</div>
293293
<Button.Group>
294294
<Button color="gray" onClick={() => props.tabsRef.current?.setActiveTab(0)}>

‎src/components/Accordion/index.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * from './Accordion';
2-
export type { AccordionPanelProps } from './AccordionPanel';
3-
export type { AccordionTitleProps } from './AccordionTitle';
2+
export * from './AccordionContent';
3+
export * from './AccordionPanel';
4+
export * from './AccordionTitle';

‎src/components/Banner/BannerCollapseButton.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import type { FC, MouseEventHandler } from 'react';
24
import type { ButtonProps } from '../Button';
35
import { Button } from '../Button';

‎src/components/Datepicker/index.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,2 @@
1-
import { WeekStart } from './helpers';
2-
31
export * from './Datepicker';
4-
export { WeekStart };
2+
export { WeekStart } from './helpers';

‎src/components/Dropdown/index.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
export * from './Dropdown';
2-
export type { DropdownItemProps } from './DropdownItem';
2+
export * from './DropdownDivider';
3+
export * from './DropdownHeader';
4+
export * from './DropdownItem';

‎src/components/Navbar/index.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export * from './Navbar';
2-
export type { NavbarBrandProps } from './NavbarBrand';
3-
export type { NavbarCollapseProps } from './NavbarCollapse';
4-
export type { NavbarLinkProps } from './NavbarLink';
5-
export type { NavbarToggleProps } from './NavbarToggle';
2+
export * from './NavbarBrand';
3+
export * from './NavbarCollapse';
4+
export * from './NavbarLink';
5+
export * from './NavbarToggle';

‎src/components/Rating/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
export * from './Rating';
2-
export type { RatingAdvancedProps } from './RatingAdvanced';
3-
export type { RatingStarProps } from './RatingStar';
2+
export * from './RatingAdvanced';
3+
export * from './RatingStar';

‎src/components/Sidebar/Sidebar.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import type { ComponentProps, ElementType, FC, PropsWithChildren } from 'react';
24
import { twMerge } from 'tailwind-merge';
35
import { mergeDeep } from '../../helpers/merge-deep';

‎src/components/Sidebar/SidebarItemGroup.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client';
2+
13
import type { ComponentProps, FC, PropsWithChildren } from 'react';
24
import { twMerge } from 'tailwind-merge';
35
import { getTheme } from '../../theme-store';

‎src/components/Sidebar/index.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
export * from './Sidebar';
2-
export type { SidebarCTAProps } from './SidebarCTA';
3-
export type { SidebarCollapseProps } from './SidebarCollapse';
4-
export type { SidebarItemProps } from './SidebarItem';
5-
export type { SidebarLogoProps } from './SidebarLogo';
2+
export * from './SidebarCTA';
3+
export * from './SidebarCollapse';
4+
export * from './SidebarItem';
5+
export * from './SidebarItemGroup';
6+
export * from './SidebarItems';
7+
export * from './SidebarLogo';

0 commit comments

Comments
 (0)