Version bump 1.8.0 - #478
Merged
Merged
Conversation
Mark component entries with "use client" so the directive survives the build into each dist chunk, and expose compound sub-components as named exports so they work in React Server Components without dot access (which does not cross the client boundary). - Add 'use client' to all 43 component entry files (previously only on the barrel, where Rollup flattened it away so no directive reached dist/) - Remove the now-dead 'use client' from src/components/index.ts - Expose named subpart exports (dot-matching aliases) for all 17 compound components (Select, Accordion, Sidebar, RadioButton, Dialog, Drawer, Table, DropdownMenu, SearchBox, Breadcrumb, Pagination, Tabs, Menu, Topbar, HamburgerMenu, Container, ProgressSteps) - Add 'use client' to Drawer sub-part files so the bundler cannot hoist past the client boundary - Guard render-path window access in Sidebar and getOperatingSystem() for SSR safety
Add a "Next.js Usage" MDX doc page for every component (41), nested under each component below its Docs page. Each documents Server Component usage; compound components show the named subpart-export pattern (required in RSC) plus a dot-notation note, backed by a hidden example story that powers an isolated Canvas live preview. - 41 *.nextjs.mdx doc pages (one per component) - 17 *.nextjs.stories.tsx hidden example stories (tags: !dev, !autodocs) - .storybook/main.ts: allow MDX to build under the library vite config (strip lib/externals/output, drop lib-only plugins vite:dts + preserve-directives, normalize the addon-docs mdx-react-shim file:// import); order *.stories before *.mdx so Docs sorts above Next.js Usage
Fix the live previews and make the Next.js docs approachable for all levels. Previews: match each compound example to its main story's layout/sizing; drop docs.story.height (it clipped shadows/dropdowns); wrap Dialog/Drawer Title + CloseButton in flex justify-between so the X sits top-right. Clarity: add a plain-language TL;DR callout to every page; add an 'Event handlers & state' section (the client-component gotcha) to simple + non-stateful-compound pages; add a shared 'Guides / Using force-ui with Next.js' overview (Server vs Client components, install, CSS import, named-export rule with the real errors).
The Select Next.js example story rendered the combobox button with no accessible name, failing the test-runner's axe button-name rule. Add a label (matching the main Select story) so the button has discernible text.
ButtonGroup's default export is a compound object ({ Group, Button }) used via dot notation, which the earlier compound rollout missed (its scan only matched Object.assign and X.Sub = patterns). Dot access fails in Server Components, so expose ButtonGroupContainer (.Group) and ButtonGroupButton (.Button) as named exports, and add its Next.js Usage doc + hidden example story. Completes coverage: every public component now has a Next.js Usage page.
- Anchor the selection control at left-3 (mirroring the default right-3 inset) instead of left-0 + right-3, which stretched the control wrapper across the card and pinned it flush against the border. - Mirror the horizontal padding when reversed (pl-12 radio / pl-16 switch) instead of the hardcoded pr-12, and drop the ml-4/ml-10 label margin hacks. - Wrap label heading/description with overflow-wrap:anywhere so long unbroken words no longer overflow the bordered card in narrow containers. - Add missing 1.5px borderWidth to the theme scale so the radio and checkbox !border-1.5 class resolves (previously fell back to the 3px browser default). - Add bordered reverse-position stories for radio and switch variants. Closes brainstormforce/surerank#1905 (SUR-488)
Button-styled file input mirroring Input type="file" styling, with controlled value support (File, File[], or saved filename string), keyboard-accessible hidden native input, and opt-in clearable action.
Input's file branch now renders FilePicker, so existing consumers get controlled value support and the filename preview without code changes. Removes the file-only class constants that became unused.
…ound-exports feat: Next.js (React Server Components) support
…e-position-bordered [SUR-488] [ForceUI] Add reverse position support for the bordered variant radio-button component
…ePicker API
Public InputProps is now a discriminated union on `type`:
- text branch ('text' | 'password' | 'email'): string value/onChange,
prefix/suffix, placeholder
- file branch ('file'): extends FilePickerProps (clearable, accept,
multiple, File | File[] | string value, FileList onChange); FilePicker-only
props are rejected on text inputs and vice versa
FilePickerProps now declares accept and multiple explicitly. Storybook
argTypes show file-only props only when type="file" (and hide text-only
props in file mode) via conditional controls.
Docs generation: react-docgen-typescript is layered on top of the default
react-docgen for input.tsx and file-picker.tsx only, so their composed prop
types (Omit/Pick/extends) still yield full prop descriptions. It is scoped
because RDT fails to detect many other components (compound exports,
generics) and would wipe their props tables; audited all 64 docs pages for
regressions - none.
… the FilePicker API" This reverts commit c43d706.
This reverts commit 291b157. FilePicker stays a standalone component; Input keeps its own type="file" rendering.
[SUR-930] [Upload] No File Found placeholder should be replaced with file name
Ports the inlineSearch feature (select.tsx, select-types.ts, stories, readme) onto a clean base branched from combined-prs. Replaces the old select-component/inline-search branch, whose history contained a malicious payload force-pushed into tailwind.config.js.
Add an inline search variant for the Combobox
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -1,3 +1,4 @@ | |||
| 'use client'; | |||
There was a problem hiding this comment.
What: The addition of the string 'use client'; at the top of the file may have implications on the rendering behavior of components.
Why: In Next.js or similar frameworks, 'use client'; indicates that the component should be rendered on the client-side only. This should be used carefully as it can affect the overall performance and SEO of the application if server-side rendering is needed for this component.
How: Ensure that this component does not require server-side rendering by reviewing its dependencies and usage. If it does not, the addition is justified. Otherwise, consider removing 'use client'; to enable server-side rendering for better performance and SEO.
imnavanath
approved these changes
Jul 17, 2026
The decorative thumb span overlaid the checkbox input and swallowed clicks; pointer-events-none lets clicks pass through to the input.
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.
Description
Screenshots | Video with voice-over
Link to Figma (If applicable)
How has this been tested?
Checklist: