fix: clear button rendering + input trailing-icon transition

[rohanchkrabrty]

Summary

• Always render the Search clear button when showClearButton is set; CSS (:has(input:placeholder-shown)) hides it while the field is empty, avoiding mount/unmount flicker as the user types.
• Default value to '' in DataTable.Search and DataViewSearch so the underlying Search stays controlled even before any input.
• Drop the redundant background on .input-field:focus; the wrapper already animates the focused background via :focus-within, so the trailing-icon area no longer lags behind the input during the hover → focus transition.
• Add a DataTable.Search live example to the docs (demo component, preview export, MDX section).

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	May 18, 2026 8:10am

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR introduces a DataTable Search demo feature by first improving the underlying Search component's clear button behavior. The Search component now always renders the clear button when showClearButton is enabled, using CSS to hide it when the input shows a placeholder. The DataTable and DataView search consumers are updated to normalize undefined search values to empty strings. A new DataTableSearchDemo component demonstrates the search functionality, integrated into the demo scope and documented with a code preview. A test verifies the clear button behavior within a DataTable context, and input focus styling is simplified.

Suggested reviewers

• rsbh
• paanSinghCoder
• rohilsurana

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: fixing clear button rendering behavior and input trailing-icon transition issues, which are the core technical improvements in this PR.
Description check	✅ Passed	The description is directly related to the changeset, providing clear bullet points that explain the technical rationale behind each modification made in the PR.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/www/src/content/docs/components/datatable/demo.ts`:
- Line 68: The preview snippet omits the showClearButton prop causing
inconsistency with the live demo; update the demo preview so DataTable.Search
includes showClearButton (matching DataTableSearchDemo) by adding the
showClearButton prop to the DataTable.Search element and ensure its placeholder
remains "Search payments…", so the preview and the component DataTableSearchDemo
render identically.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ed52be2b-5f83-48f3-bbe3-44fa383629cc

📥 Commits

Reviewing files that changed from the base of the PR and between dc6e8c8 and ddfd3ed.

📒 Files selected for processing (11)

• apps/www/src/components/datatable-demo.tsx
• apps/www/src/components/demo/demo.tsx
• apps/www/src/content/docs/components/datatable/demo.ts
• apps/www/src/content/docs/components/datatable/index.mdx
• packages/raystack/components/data-table/__tests__/data-table.test.tsx
• packages/raystack/components/data-table/components/search.tsx
• packages/raystack/components/data-view-beta/components/search.tsx
• packages/raystack/components/input/input.module.css
• packages/raystack/components/search/__tests__/search.test.tsx
• packages/raystack/components/search/search.module.css
• packages/raystack/components/search/search.tsx

💤 Files with no reviewable changes (1)

• packages/raystack/components/input/input.module.css

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Keep preview snippet consistent with the live demo behavior.

Line 68 omits showClearButton, while DataTableSearchDemo renders it. This makes the docs code preview inconsistent with what users see in the demo.

Suggested doc snippet fix

-        <DataTable.Search placeholder="Search payments…" />
+        <DataTable.Search placeholder="Search payments…" showClearButton />

📝 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

	<DataTable.Search placeholder="Search payments…" />
	<DataTable.Search placeholder="Search payments…" showClearButton />

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/www/src/content/docs/components/datatable/demo.ts` at line 68, The
preview snippet omits the showClearButton prop causing inconsistency with the
live demo; update the demo preview so DataTable.Search includes showClearButton
(matching DataTableSearchDemo) by adding the showClearButton prop to the
DataTable.Search element and ensure its placeholder remains "Search payments…",
so the preview and the component DataTableSearchDemo render identically.