{
- setTimeout( () => {
- refs?.setFloating( node );
- }, ( ( transitionDuration?.duration || 0.3 ) + 0.1 ) * 1000 );
- } }
- aria-label="drawer"
- role="dialog"
- aria-modal="true"
- { ...getFloatingProps?.() }
>
{
exit="exit"
variants={ animationVariants[ position! ] }
transition={ transitionDuration }
+ ref={ ( node ) => {
+ setTimeout( () => {
+ refs?.setFloating( node );
+ }, ( ( transitionDuration?.duration || 0.3 ) + 0.1 ) * 1000 );
+ } }
+ aria-label="drawer"
+ role="dialog"
+ aria-modal="true"
+ { ...getFloatingProps?.() }
>
{ typeof children === 'function'
? children( { close: handleClose! } )
From 61f6ca3f721cd4885294e670e893ef94b4eea6b2 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Thu, 12 Jun 2025 16:49:29 +0600
Subject: [PATCH 3/4] imprv: Enhance search functionality in Select component
---
changelog.txt | 3 +-
src/components/select/select.tsx | 87 ++++++++++++++++++++++++++------
2 files changed, 74 insertions(+), 16 deletions(-)
diff --git a/changelog.txt b/changelog.txt
index 8a4d2697..5bb99568 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,4 +1,5 @@
-Version 1.7.4 - 16th June, 2025
+Version 1.7.4 - 13th June, 2025
+- Improvement: Atom - Select: Improved search option functionality of the Select (combobox) component.
- Fix: Organism - Drawer: Resolved an issue where clicking outside the drawer did not trigger an exit.
Version 1.7.3 - 3rd June, 2025
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index 472ebc19..5e5fc283 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -445,25 +445,37 @@ export function SelectOptions( {
// First pass - count total visible groups
Children.forEach( children, ( child ) => {
if ( isValidElement( child ) && child.type === SelectOptionGroup ) {
- const hasVisibleChildren = Children.toArray(
- child.props.children
- ).some( ( groupChild ) => {
- if ( ! isValidElement( groupChild ) ) {
- return false;
- }
+ let hasVisibleChildren = false;
+
+ // If there's a search term and no external search function
+ if ( searchKeyword && ! searchFn ) {
+ const searchTerm = searchKeyword.toLowerCase();
+ const groupLabel = child.props.label?.toLowerCase() || '';
+
+ // Check if group label matches search term
+ const groupLabelMatches = groupLabel.includes( searchTerm );
+
+ // Check if any child option matches search term
+ const hasMatchingChildren = Children.toArray(
+ child.props.children
+ ).some( ( groupChild ) => {
+ if ( ! isValidElement( groupChild ) ) {
+ return false;
+ }
- // Handle option groups when searchFn is not provided
- // Search functionality will be handled outside of the select component
- if ( searchKeyword && ! searchFn ) {
const textContent = getTextContent(
groupChild.props.children
)?.toLowerCase();
- const searchTerm = searchKeyword.toLowerCase();
return textContent.includes( searchTerm );
- }
- return true;
- } );
+ } );
+
+ // Show group if either group label matches or any child matches
+ hasVisibleChildren = groupLabelMatches || hasMatchingChildren;
+ } else {
+ // No search term, show all groups
+ hasVisibleChildren = true;
+ }
if ( hasVisibleChildren ) {
visibleGroups++;
@@ -483,13 +495,58 @@ export function SelectOptions( {
// Handle option groups
if ( child.type === SelectOptionGroup ) {
+ let groupLabelMatches = false;
+
+ // Check if group label matches search term
+ if ( searchKeyword && ! searchFn ) {
+ const searchTerm = searchKeyword.toLowerCase();
+ const groupLabel = child.props.label?.toLowerCase() || '';
+ groupLabelMatches = groupLabel.includes( searchTerm );
+ }
+
// Recursively process children of the option group
const groupChildren = Children.map(
child.props.children,
- processChild
+ ( groupChild ) => {
+ if ( ! isValidElement( groupChild ) ) {
+ return null;
+ }
+
+ // If group label matches, show all children regardless of their content
+ if ( groupLabelMatches ) {
+ const childProps = {
+ ...( groupChild.props as SelectOptionProps ),
+ index: childIndex++,
+ };
+
+ return cloneElement( groupChild, childProps );
+ }
+
+ // Otherwise, apply normal filtering to individual options
+ if ( searchKeyword && ! searchFn ) {
+ const textContent = getTextContent(
+ ( groupChild.props as { children?: React.ReactNode } ).children
+ )?.toLowerCase();
+ const searchTerm = searchKeyword.toLowerCase();
+
+ const textMatch = textContent?.includes( searchTerm );
+
+ if ( ! textMatch ) {
+ return null;
+ }
+ }
+
+ const childProps = {
+ ...( groupChild.props as SelectOptionProps ),
+ index: childIndex++,
+ };
+
+ return cloneElement( groupChild, childProps );
+ }
);
+
// Only render group if it has visible children
- const hasChildren = groupChildren?.some( ( c ) => c !== null );
+ const hasChildren = groupChildren?.some( ( c: React.ReactNode ) => c !== null );
if ( ! hasChildren ) {
return null;
From dcdea452a40a9edd4db643ac44596ea3d205bf48 Mon Sep 17 00:00:00 2001
From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com>
Date: Fri, 13 Jun 2025 10:19:18 +0600
Subject: [PATCH 4/4] Bump version to `v1.7.4`
---
README.md | 4 ++--
package-lock.json | 4 ++--
package.json | 2 +-
version.json | 2 +-
4 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/README.md b/README.md
index bae0595c..ee20d885 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ Using Force UI as a dependency in package.json -
```json
"dependencies": {
- "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.7.3"
+ "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.7.4"
}
```
@@ -28,7 +28,7 @@ npm install
Or you can directly run the following command to install the package -
```bash
-npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.7.3
+npm i -S @bsf/force-ui@git+https://github.com/brainstormforce/force-ui.git#1.7.4
```
diff --git a/package-lock.json b/package-lock.json
index 48947b80..8b31170a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@bsf/force-ui",
- "version": "1.7.3",
+ "version": "1.7.4",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@bsf/force-ui",
- "version": "1.7.3",
+ "version": "1.7.4",
"license": "ISC",
"dependencies": {
"@emotion/is-prop-valid": "^1.3.0",
diff --git a/package.json b/package.json
index 7e4b34bc..2e93ea13 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@bsf/force-ui",
- "version": "1.7.3",
+ "version": "1.7.4",
"description": "Library of components for the BSF project",
"main": "./dist/force-ui.cjs.js",
"module": "./dist/force-ui.es.js",
diff --git a/version.json b/version.json
index 9b391009..34527ad4 100644
--- a/version.json
+++ b/version.json
@@ -1,3 +1,3 @@
{
- "force-ui": "1.7.3"
+ "force-ui": "1.7.4"
}