Open
Conversation
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughA new Toolbar component is introduced to the raystack UI library with CSS styling, React implementation, comprehensive tests, and documentation including demos and props reference. Additionally, Toast-related exports are refactored in the public API from ToastContainer and toast to Toast and toastManager. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
rohanchkrabrty
changed the title
|
|
||
| Use the `render` prop on `Toolbar.Button` to compose with Apsara components like `Button` and `IconButton`. | ||
|
|
||
| <Demo data={compositionDemo} /> |
Contributor
There was a problem hiding this comment.
This is showing blank in the docs. Please check.
| .separator { | ||
| flex-shrink: 0; | ||
| width: 0.5px; | ||
| height: 16px; |
Contributor
There was a problem hiding this comment.
We can use var(--rs-space-5) for the height.
Contributor
There was a problem hiding this comment.
Suggestion: We will have to introduce 0.5px var if we plan to use it frequently. @p4suhag
|
|
||
| <Demo data={compositionDemo} /> | ||
|
|
||
| ### Disabled |
Contributor
There was a problem hiding this comment.
We can add an example for the vertical orientation as well.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/www/src/content/docs/components/toolbar/index.mdx`:
- Around line 57-67: The docs reference Toolbar Link and Input components that
are not exported; update toolbar.tsx to implement and export components matching
the documented API names (e.g., ToolbarLink and ToolbarInput) and ensure their
props align with ToolbarLinkProps and ToolbarInputProps from props.ts; add the
components (or re-export existing implementations) with the expected prop types,
keyboard/navigation behavior, and named exports so the MDX auto-type-table
resolves correctly.
- Around line 16-29: The docs reference Toolbar.Link and Toolbar.Input which
don't exist; update the Toolbar implementation to provide these subcomponents or
remove them from docs. Add two new exports on the Toolbar object (e.g.,
Toolbar.Link and Toolbar.Input) implemented as functional components that
forward props and refs to an anchor and input respectively, accept and pass
through className and children, mirror the existing API/prop types used by
Toolbar.Button/Toolbar.Group, and include the same styling/role semantics as
other subcomponents so the example in the docs works; alternatively, if you
prefer not to implement them now, remove the Toolbar.Link and Toolbar.Input
lines from the example in the docs to avoid referencing unimplemented
components.
In `@apps/www/src/content/docs/components/toolbar/props.ts`:
- Around line 1-95: This file uses React types (React.ReactElement and
React.HTMLAttributes<HTMLElement>) but doesn't import React; add an explicit
import for React at the top of the file (e.g., import * as React from 'react')
so the types used in ToolbarButtonProps.render, ToolbarLinkProps.render, and any
other React type references resolve correctly.
In `@packages/raystack/components/toolbar/__tests__/toolbar.test.tsx`:
- Around line 128-172: Tests fail because Toolbar.Link and Toolbar.Input are not
exported, causing "Element type is invalid"; implement and export these
subcomponents in the Toolbar component (toolbar.tsx). Add a Toolbar.Link
component that renders an anchor, accepts href and children, and forwards its
ref (use forwardRef) so createRef<HTMLAnchorElement>() works; add a
Toolbar.Input component that renders an input, accepts common input props and
data-testid, and forwards its ref (forwardRef<HTMLInputElement>) so
createRef<HTMLInputElement>() works; finally attach them to the main Toolbar
export as static properties (Toolbar.Link and Toolbar.Input) so existing tests
can import and render them.
- Around line 54-63: The test in toolbar.test.tsx incorrectly asserts that the
composed Toolbar.Button includes toolbar.module.css's styles
(expect(button.className).toContain(styles.button)); remove that assertion and
only verify the custom class is applied (or alternatively assert the Button
component's own CSS class if you prefer by referencing the Button's style
symbol), keeping the render using Toolbar and the element lookup via
screen.getByRole('button').
In `@packages/raystack/components/toolbar/toolbar.module.css`:
- Around line 25-28: The .group CSS rule uses an invalid value
"background-color: none"; update the .group declaration in toolbar.module.css
(the .group selector) to use a valid value such as "background-color:
transparent" or "background-color: unset" instead of "none" so the stylesheet is
valid and behaves as intended.
In `@packages/raystack/components/toolbar/toolbar.tsx`:
- Around line 57-61: The Toolbar export is missing the Link and Input
subcomponents referenced by docs/tests, causing "Element type is invalid:
undefined"; import or define the corresponding components (e.g., ToolbarLink,
ToolbarInput or Toolbar.Link/Toolbar.Input implementations) and add them to the
Object.assign call that builds Toolbar (alongside ToolbarButton, ToolbarGroup,
ToolbarSeparator) so the final export includes Button, Group, Separator, Link,
and Input; ensure the imported symbol names match what you add to the object
(e.g., ToolbarLink as Link, ToolbarInput as Input) and export defaults
consistently from ToolbarRoot.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 7f194d49-01b7-4118-9bbf-ef6e67566d6c
📒 Files selected for processing (9)
apps/www/src/components/playground/toolbar-examples.tsxapps/www/src/content/docs/components/toolbar/demo.tsapps/www/src/content/docs/components/toolbar/index.mdxapps/www/src/content/docs/components/toolbar/props.tspackages/raystack/components/toolbar/__tests__/toolbar.test.tsxpackages/raystack/components/toolbar/index.tsxpackages/raystack/components/toolbar/toolbar.module.csspackages/raystack/components/toolbar/toolbar.tsxpackages/raystack/index.tsx
Comment on lines
+16
to
+29
| ```tsx | ||
| import { Toolbar } from '@raystack/apsara' | ||
|
|
||
| <Toolbar> | ||
| <Toolbar.Button /> | ||
| <Toolbar.Group> | ||
| <Toolbar.Button /> | ||
| <Toolbar.Button /> | ||
| </Toolbar.Group> | ||
| <Toolbar.Separator /> | ||
| <Toolbar.Link /> | ||
| <Toolbar.Input /> | ||
| </Toolbar> | ||
| ``` |
Contributor
There was a problem hiding this comment.
Documentation references unimplemented components.
The anatomy section shows Toolbar.Link and Toolbar.Input usage, but these components are not yet implemented in toolbar.tsx. Update the implementation to include these components, or remove them from the documentation until they're available.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/www/src/content/docs/components/toolbar/index.mdx` around lines 16 - 29,
The docs reference Toolbar.Link and Toolbar.Input which don't exist; update the
Toolbar implementation to provide these subcomponents or remove them from docs.
Add two new exports on the Toolbar object (e.g., Toolbar.Link and Toolbar.Input)
implemented as functional components that forward props and refs to an anchor
and input respectively, accept and pass through className and children, mirror
the existing API/prop types used by Toolbar.Button/Toolbar.Group, and include
the same styling/role semantics as other subcomponents so the example in the
docs works; alternatively, if you prefer not to implement them now, remove the
Toolbar.Link and Toolbar.Input lines from the example in the docs to avoid
referencing unimplemented components.
Comment on lines
+57
to
+67
| ### Link | ||
|
|
||
| An anchor element for navigation within the toolbar. | ||
|
|
||
| <auto-type-table path="./props.ts" name="ToolbarLinkProps" /> | ||
|
|
||
| ### Input | ||
|
|
||
| A native input element with integrated keyboard navigation. | ||
|
|
||
| <auto-type-table path="./props.ts" name="ToolbarInputProps" /> |
Contributor
There was a problem hiding this comment.
API reference documents missing Link and Input components.
The API reference sections for Link and Input document components that don't exist in the implementation. This will cause confusion when users try to use these documented features. Ensure the implementation in toolbar.tsx exports these components.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/www/src/content/docs/components/toolbar/index.mdx` around lines 57 - 67,
The docs reference Toolbar Link and Input components that are not exported;
update toolbar.tsx to implement and export components matching the documented
API names (e.g., ToolbarLink and ToolbarInput) and ensure their props align with
ToolbarLinkProps and ToolbarInputProps from props.ts; add the components (or
re-export existing implementations) with the expected prop types,
keyboard/navigation behavior, and named exports so the MDX auto-type-table
resolves correctly.
Comment on lines
+1
to
+95
| export interface ToolbarProps { | ||
| /** | ||
| * Whether keyboard navigation loops from the last item back to the first. | ||
| * @defaultValue true | ||
| */ | ||
| loopFocus?: boolean; | ||
|
|
||
| /** | ||
| * The orientation of the toolbar layout. | ||
| * @defaultValue "horizontal" | ||
| */ | ||
| orientation?: 'horizontal' | 'vertical'; | ||
|
|
||
| /** | ||
| * Whether the toolbar and all its items are disabled. | ||
| * @defaultValue false | ||
| */ | ||
| disabled?: boolean; | ||
|
|
||
| /** Additional CSS class names. */ | ||
| className?: string; | ||
| } | ||
|
|
||
| export interface ToolbarButtonProps { | ||
| /** | ||
| * Whether the button remains focusable when disabled. | ||
| * @defaultValue true | ||
| */ | ||
| focusableWhenDisabled?: boolean; | ||
|
|
||
| /** | ||
| * Whether the button is disabled. | ||
| * @defaultValue false | ||
| */ | ||
| disabled?: boolean; | ||
|
|
||
| /** | ||
| * Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ||
| * | ||
| * @remarks `ReactElement | function` | ||
| */ | ||
| render?: | ||
| | React.ReactElement | ||
| | ((props: React.HTMLAttributes<HTMLElement>) => React.ReactElement); | ||
|
|
||
| /** Additional CSS class names. */ | ||
| className?: string; | ||
| } | ||
|
|
||
| export interface ToolbarGroupProps { | ||
| /** | ||
| * Whether the group and all its items are disabled. | ||
| * @defaultValue false | ||
| */ | ||
| disabled?: boolean; | ||
|
|
||
| /** Additional CSS class names. */ | ||
| className?: string; | ||
| } | ||
|
|
||
| export interface ToolbarSeparatorProps { | ||
| /** Additional CSS class names. */ | ||
| className?: string; | ||
| } | ||
|
|
||
| export interface ToolbarLinkProps { | ||
| /** | ||
| * Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ||
| * | ||
| * @remarks `ReactElement | function` | ||
| */ | ||
| render?: | ||
| | React.ReactElement | ||
| | ((props: React.HTMLAttributes<HTMLElement>) => React.ReactElement); | ||
|
|
||
| /** Additional CSS class names. */ | ||
| className?: string; | ||
| } | ||
|
|
||
| export interface ToolbarInputProps { | ||
| /** | ||
| * Whether the input remains focusable when disabled. | ||
| * @defaultValue true | ||
| */ | ||
| focusableWhenDisabled?: boolean; | ||
|
|
||
| /** | ||
| * Whether the input is disabled. | ||
| * @defaultValue false | ||
| */ | ||
| disabled?: boolean; | ||
|
|
||
| /** Additional CSS class names. */ | ||
| className?: string; | ||
| } |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify if other props.ts files in the docs import React or rely on global types
fd -e ts 'props.ts' apps/www/src/content/docs/components --exec head -20 {}Repository: raystack/apsara
Length of output: 27427
Add missing React type import.
The file uses React.ReactElement and React.HTMLAttributes<HTMLElement> (lines 43-44, 73-74) without importing React. Add the explicit import:
Proposed fix
+import type React from 'react';
+
export interface ToolbarProps {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export interface ToolbarProps { | |
| /** | |
| * Whether keyboard navigation loops from the last item back to the first. | |
| * @defaultValue true | |
| */ | |
| loopFocus?: boolean; | |
| /** | |
| * The orientation of the toolbar layout. | |
| * @defaultValue "horizontal" | |
| */ | |
| orientation?: 'horizontal' | 'vertical'; | |
| /** | |
| * Whether the toolbar and all its items are disabled. | |
| * @defaultValue false | |
| */ | |
| disabled?: boolean; | |
| /** Additional CSS class names. */ | |
| className?: string; | |
| } | |
| export interface ToolbarButtonProps { | |
| /** | |
| * Whether the button remains focusable when disabled. | |
| * @defaultValue true | |
| */ | |
| focusableWhenDisabled?: boolean; | |
| /** | |
| * Whether the button is disabled. | |
| * @defaultValue false | |
| */ | |
| disabled?: boolean; | |
| /** | |
| * Allows you to replace the component's HTML element with a different tag, or compose it with another component. | |
| * | |
| * @remarks `ReactElement | function` | |
| */ | |
| render?: | |
| | React.ReactElement | |
| | ((props: React.HTMLAttributes<HTMLElement>) => React.ReactElement); | |
| /** Additional CSS class names. */ | |
| className?: string; | |
| } | |
| export interface ToolbarGroupProps { | |
| /** | |
| * Whether the group and all its items are disabled. | |
| * @defaultValue false | |
| */ | |
| disabled?: boolean; | |
| /** Additional CSS class names. */ | |
| className?: string; | |
| } | |
| export interface ToolbarSeparatorProps { | |
| /** Additional CSS class names. */ | |
| className?: string; | |
| } | |
| export interface ToolbarLinkProps { | |
| /** | |
| * Allows you to replace the component's HTML element with a different tag, or compose it with another component. | |
| * | |
| * @remarks `ReactElement | function` | |
| */ | |
| render?: | |
| | React.ReactElement | |
| | ((props: React.HTMLAttributes<HTMLElement>) => React.ReactElement); | |
| /** Additional CSS class names. */ | |
| className?: string; | |
| } | |
| export interface ToolbarInputProps { | |
| /** | |
| * Whether the input remains focusable when disabled. | |
| * @defaultValue true | |
| */ | |
| focusableWhenDisabled?: boolean; | |
| /** | |
| * Whether the input is disabled. | |
| * @defaultValue false | |
| */ | |
| disabled?: boolean; | |
| /** Additional CSS class names. */ | |
| className?: string; | |
| } | |
| import type React from 'react'; | |
| export interface ToolbarProps { | |
| /** | |
| * Whether keyboard navigation loops from the last item back to the first. | |
| * `@defaultValue` true | |
| */ | |
| loopFocus?: boolean; | |
| /** | |
| * The orientation of the toolbar layout. | |
| * `@defaultValue` "horizontal" | |
| */ | |
| orientation?: 'horizontal' | 'vertical'; | |
| /** | |
| * Whether the toolbar and all its items are disabled. | |
| * `@defaultValue` false | |
| */ | |
| disabled?: boolean; | |
| /** Additional CSS class names. */ | |
| className?: string; | |
| } | |
| export interface ToolbarButtonProps { | |
| /** | |
| * Whether the button remains focusable when disabled. | |
| * `@defaultValue` true | |
| */ | |
| focusableWhenDisabled?: boolean; | |
| /** | |
| * Whether the button is disabled. | |
| * `@defaultValue` false | |
| */ | |
| disabled?: boolean; | |
| /** | |
| * Allows you to replace the component's HTML element with a different tag, or compose it with another component. | |
| * | |
| * `@remarks` `ReactElement | function` | |
| */ | |
| render?: | |
| | React.ReactElement | |
| | ((props: React.HTMLAttributes<HTMLElement>) => React.ReactElement); | |
| /** Additional CSS class names. */ | |
| className?: string; | |
| } | |
| export interface ToolbarGroupProps { | |
| /** | |
| * Whether the group and all its items are disabled. | |
| * `@defaultValue` false | |
| */ | |
| disabled?: boolean; | |
| /** Additional CSS class names. */ | |
| className?: string; | |
| } | |
| export interface ToolbarSeparatorProps { | |
| /** Additional CSS class names. */ | |
| className?: string; | |
| } | |
| export interface ToolbarLinkProps { | |
| /** | |
| * Allows you to replace the component's HTML element with a different tag, or compose it with another component. | |
| * | |
| * `@remarks` `ReactElement | function` | |
| */ | |
| render?: | |
| | React.ReactElement | |
| | ((props: React.HTMLAttributes<HTMLElement>) => React.ReactElement); | |
| /** Additional CSS class names. */ | |
| className?: string; | |
| } | |
| export interface ToolbarInputProps { | |
| /** | |
| * Whether the input remains focusable when disabled. | |
| * `@defaultValue` true | |
| */ | |
| focusableWhenDisabled?: boolean; | |
| /** | |
| * Whether the input is disabled. | |
| * `@defaultValue` false | |
| */ | |
| disabled?: boolean; | |
| /** Additional CSS class names. */ | |
| className?: string; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/www/src/content/docs/components/toolbar/props.ts` around lines 1 - 95,
This file uses React types (React.ReactElement and
React.HTMLAttributes<HTMLElement>) but doesn't import React; add an explicit
import for React at the top of the file (e.g., import * as React from 'react')
so the types used in ToolbarButtonProps.render, ToolbarLinkProps.render, and any
other React type references resolve correctly.
Comment on lines
+128
to
+172
| describe('Link', () => { | ||
| it('renders a link', () => { | ||
| render( | ||
| <Toolbar> | ||
| <Toolbar.Link href='https://example.com'>Example</Toolbar.Link> | ||
| </Toolbar> | ||
| ); | ||
| const link = screen.getByRole('link', { name: 'Example' }); | ||
| expect(link).toBeInTheDocument(); | ||
| expect(link).toHaveAttribute('href', 'https://example.com'); | ||
| }); | ||
|
|
||
| it('forwards ref', () => { | ||
| const ref = createRef<HTMLAnchorElement>(); | ||
| render( | ||
| <Toolbar> | ||
| <Toolbar.Link ref={ref} href='#'> | ||
| Link | ||
| </Toolbar.Link> | ||
| </Toolbar> | ||
| ); | ||
| expect(ref.current).toBeInstanceOf(HTMLAnchorElement); | ||
| }); | ||
| }); | ||
|
|
||
| describe('Input', () => { | ||
| it('renders an input', () => { | ||
| render( | ||
| <Toolbar> | ||
| <Toolbar.Input data-testid='input' /> | ||
| </Toolbar> | ||
| ); | ||
| expect(screen.getByTestId('input')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('forwards ref', () => { | ||
| const ref = createRef<HTMLInputElement>(); | ||
| render( | ||
| <Toolbar> | ||
| <Toolbar.Input ref={ref} data-testid='input' /> | ||
| </Toolbar> | ||
| ); | ||
| expect(ref.current).toBeInstanceOf(HTMLInputElement); | ||
| }); | ||
| }); |
Contributor
There was a problem hiding this comment.
Tests for Link and Input will fail until components are implemented.
These test blocks reference Toolbar.Link and Toolbar.Input, which are not yet exported from the Toolbar component. The pipeline failures confirm these tests fail with "Element type is invalid: undefined".
Once the missing subcomponents are added to toolbar.tsx (as noted in that file's review), these tests should pass.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/raystack/components/toolbar/__tests__/toolbar.test.tsx` around lines
128 - 172, Tests fail because Toolbar.Link and Toolbar.Input are not exported,
causing "Element type is invalid"; implement and export these subcomponents in
the Toolbar component (toolbar.tsx). Add a Toolbar.Link component that renders
an anchor, accepts href and children, and forwards its ref (use forwardRef) so
createRef<HTMLAnchorElement>() works; add a Toolbar.Input component that renders
an input, accepts common input props and data-testid, and forwards its ref
(forwardRef<HTMLInputElement>) so createRef<HTMLInputElement>() works; finally
attach them to the main Toolbar export as static properties (Toolbar.Link and
Toolbar.Input) so existing tests can import and render them.
Comment on lines
+25
to
+28
| .group { | ||
| padding: 0; | ||
| background-color: none; | ||
| } |
Contributor
There was a problem hiding this comment.
Invalid CSS value: background-color: none.
none is not a valid value for background-color. Use transparent or unset instead.
🐛 Proposed fix
.group {
padding: 0;
- background-color: none;
+ background-color: transparent;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| .group { | |
| padding: 0; | |
| background-color: none; | |
| } | |
| .group { | |
| padding: 0; | |
| background-color: transparent; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/raystack/components/toolbar/toolbar.module.css` around lines 25 -
28, The .group CSS rule uses an invalid value "background-color: none"; update
the .group declaration in toolbar.module.css (the .group selector) to use a
valid value such as "background-color: transparent" or "background-color: unset"
instead of "none" so the stylesheet is valid and behaves as intended.
Comment on lines
+57
to
+61
| export const Toolbar = Object.assign(ToolbarRoot, { | ||
| Button: ToolbarButton, | ||
| Group: ToolbarGroup, | ||
| Separator: ToolbarSeparator | ||
| }); |
Contributor
There was a problem hiding this comment.
Missing Link and Input subcomponents cause test failures.
The PR description, documentation, and tests reference Toolbar.Link and Toolbar.Input subcomponents, but they are not implemented or exported here. This causes the pipeline failures where tests for these components fail with "Element type is invalid: undefined".
Add the missing subcomponents:
🔧 Proposed fix to add missing subcomponents
+const ToolbarLink = forwardRef<
+ ElementRef<typeof ToolbarPrimitive.Link>,
+ ToolbarPrimitive.Link.Props
+>(({ className, ...props }, ref) => (
+ <ToolbarPrimitive.Link
+ ref={ref}
+ className={cx(styles.link, className)}
+ {...props}
+ />
+));
+ToolbarLink.displayName = 'Toolbar.Link';
+
+const ToolbarInput = forwardRef<
+ ElementRef<typeof ToolbarPrimitive.Input>,
+ ToolbarPrimitive.Input.Props
+>(({ className, ...props }, ref) => (
+ <ToolbarPrimitive.Input
+ ref={ref}
+ className={cx(styles.input, className)}
+ {...props}
+ />
+));
+ToolbarInput.displayName = 'Toolbar.Input';
+
export const Toolbar = Object.assign(ToolbarRoot, {
Button: ToolbarButton,
Group: ToolbarGroup,
- Separator: ToolbarSeparator
+ Separator: ToolbarSeparator,
+ Link: ToolbarLink,
+ Input: ToolbarInput
});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| export const Toolbar = Object.assign(ToolbarRoot, { | |
| Button: ToolbarButton, | |
| Group: ToolbarGroup, | |
| Separator: ToolbarSeparator | |
| }); | |
| const ToolbarLink = forwardRef< | |
| ElementRef<typeof ToolbarPrimitive.Link>, | |
| ToolbarPrimitive.Link.Props | |
| >(({ className, ...props }, ref) => ( | |
| <ToolbarPrimitive.Link | |
| ref={ref} | |
| className={cx(styles.link, className)} | |
| {...props} | |
| /> | |
| )); | |
| ToolbarLink.displayName = 'Toolbar.Link'; | |
| const ToolbarInput = forwardRef< | |
| ElementRef<typeof ToolbarPrimitive.Input>, | |
| ToolbarPrimitive.Input.Props | |
| >(({ className, ...props }, ref) => ( | |
| <ToolbarPrimitive.Input | |
| ref={ref} | |
| className={cx(styles.input, className)} | |
| {...props} | |
| /> | |
| )); | |
| ToolbarInput.displayName = 'Toolbar.Input'; | |
| export const Toolbar = Object.assign(ToolbarRoot, { | |
| Button: ToolbarButton, | |
| Group: ToolbarGroup, | |
| Separator: ToolbarSeparator, | |
| Link: ToolbarLink, | |
| Input: ToolbarInput | |
| }); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/raystack/components/toolbar/toolbar.tsx` around lines 57 - 61, The
Toolbar export is missing the Link and Input subcomponents referenced by
docs/tests, causing "Element type is invalid: undefined"; import or define the
corresponding components (e.g., ToolbarLink, ToolbarInput or
Toolbar.Link/Toolbar.Input implementations) and add them to the Object.assign
call that builds Toolbar (alongside ToolbarButton, ToolbarGroup,
ToolbarSeparator) so the final export includes Button, Group, Separator, Link,
and Input; ensure the imported symbol names match what you add to the object
(e.g., ToolbarLink as Link, ToolbarInput as Input) and export defaults
consistently from ToolbarRoot.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Toolbarcomponent wrapping Base UIToolbarprimitiveRoot,Button,Group,Separator,Link,InputToolbar.Buttonsupportsrenderprop for composition withButton/IconButtonSummary by CodeRabbit
New Features
Documentation
Breaking Changes
ToastContainerandtoastreplaced withToastandtoastManager.