Skip to content

feat(json-tree): expose searchInputProps for internal TextInput customization#21

Merged
gfazioli merged 3 commits into
masterfrom
feat/searchinput-styling
May 2, 2026
Merged

feat(json-tree): expose searchInputProps for internal TextInput customization#21
gfazioli merged 3 commits into
masterfrom
feat/searchinput-styling

Conversation

@gfazioli

@gfazioli gfazioli commented May 2, 2026

Copy link
Copy Markdown
Owner

Summary

  • Adds searchInputProps?: TextInputProps on JsonTree to forward props to the internal search <TextInput>.
  • Lets consumers customize the search bar via Mantine's native classNames, styles, vars, variant, radius, size, etc. — no specificity hacks or `!important` required.
  • The prop is spread before the controlled `value`/`onChange` (still owned by JsonTree) and before the Styles API `searchInput` selector, so consumers can override defaults without breaking search.

Also bumps yarn 4.13.0 → 4.14.1 and minor dep updates (Mantine 9.1.1, Storybook 10.3.6, oxlint, TypeScript) in a separate commit.

Closes #20

Test plan

  • `yarn test` (55 tests passing, 2 new for the prop)
  • `yarn build` + `yarn docgen` + `yarn docs:build`
  • Manual visual check at http://localhost:9281
  • New demo `searchInputStyling` in docs
  • New Storybook story `WithSearchInputStyled`

Example

```tsx
<JsonTree
withSearch
searchInputProps={{
radius: 'xl',
variant: 'filled',
styles: {
input: { backgroundColor: 'var(--mantine-color-dark-7)' },
},
}}
/>
```

gfazioli added 2 commits May 2, 2026 14:51
… search TextInput

Adds the `searchInputProps` prop on JsonTree to fully customize the
internal search bar via Mantine's native `classNames`, `styles`,
`vars`, `variant`, `radius`, `size`, etc. — no specificity
workarounds or `!important` required.

The prop is spread before the controlled `value`/`onChange` (which
remain owned by JsonTree) and before the Styles API `searchInput`
selector, so consumers can override defaults but not break search.

Closes #20
Copilot AI review requested due to automatic review settings May 2, 2026 12:51

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR extends the @gfazioli/mantine-json-tree JsonTree component API to allow consumers to customize the internal search TextInput by forwarding Mantine TextInput props, addressing styling limitations introduced with Mantine v9. It also updates tooling/dependencies (Yarn, Mantine, Storybook, etc.) and updates docs/demos/stories/tests to cover the new capability.

Changes:

  • Add searchInputProps?: TextInputProps to JsonTree and forward it to the internal search input.
  • Add tests + Storybook story + docs demo/section showcasing customized search input styling.
  • Bump Yarn and several dependencies (including Mantine and Storybook) and update lockfile accordingly.

Reviewed changes

Copilot reviewed 9 out of 11 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
package/src/JsonTree.tsx Adds searchInputProps to the component props and forwards it to the search TextInput.
package/src/JsonTree.test.tsx Adds tests validating prop forwarding and that value/onChange remain controlled by JsonTree.
package/src/JsonTree.story.tsx Adds a new story demonstrating custom search input styling via searchInputProps.
docs/docs.mdx Documents how to customize the search input using searchInputProps.
docs/demos/index.ts Exports the new searchInputStyling demo.
docs/demos/JsonTree.demo.searchInputStyling.tsx Adds a new demo showing searchInputProps usage.
package.json Updates Yarn version and dev dependencies (Mantine, Storybook, etc.).
docs/package.json Updates docs-site Mantine deps and TypeScript version.
.yarnrc.yml Points to Yarn 4.14.1 release file.
yarn.lock Regenerates lockfile for updated toolchain/dependencies.

Comment thread package/src/JsonTree.tsx
Comment thread package/src/JsonTree.tsx Outdated
- Type `searchInputProps` as `Omit<TextInputProps, 'value' | 'defaultValue' | 'onChange'>` to reflect the real contract: those are owned by JsonTree (use `searchQuery`/`onSearchChange` for controlled state).
- Merge consumer-provided `className`/`style` with the Styles API selector via `getStyles('searchInput', { className, style })` so both are preserved instead of overwritten.
@gfazioli
gfazioli merged commit c9626bb into master May 2, 2026
1 check passed
@gfazioli
gfazioli deleted the feat/searchinput-styling branch May 2, 2026 13:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Search input not styleable without !important after Mantine v9

2 participants