@iress-oss/ids-mcp-server 0.0.1-dev.4 → 0.0.1-dev.6

package/generated/docs/components-richselect-docs.md

@@ -274,6 +274,79 @@ export const SelectAsync \= () \=> (
 
 Copy
 
+### [](#minimum-search-length-for-async-options)Minimum search length for async options
+
+When using asynchronous options, you can set a minimum number of characters required before triggering the search using the `minSearchLength` prop. This prevents unnecessary API calls and loading states for very short queries.
+
+By default, async searches are triggered after 1 character. Setting a higher value (e.g., 3) means no search request will be made and no loading spinner will appear until the user types at least that many characters.
+
+Default behavior (1 character)
+
+Type any character...
+
+Search requires 3+ characters
+
+Type at least 3 characters...
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+interface StarWarsCharacter {
+  name: string;
+  gender: string;
+}
+interface StarWarsCharacterApi {
+  results: StarWarsCharacter\[\];
+}
+const options \= async (query: string) \=> {
+  if (!query) return \[\];
+  if (query \=== 'error') {
+    throw new Error();
+  }
+  const data \= await fetch(
+    \`https://swapi.py4e.com/api/people/?search=${query}\`,
+  ).then((response) \=> response.json() as Promise<StarWarsCharacterApi\>);
+  return data.results.map((character: StarWarsCharacter) \=> ({
+    label: character.name,
+    value: character.name,
+    meta: character.gender,
+  }));
+};
+export const SelectAsyncMinLength \= () \=> (
+  <IressRow gutter\="md"\>
+    <IressCol\>
+      <IressField
+        label\="Default behavior (1 character)"
+        htmlFor\="default-select"
+      \>
+        <IressRichSelect
+          container\={document.body}
+          options\={options}
+          id\="default-select"
+          placeholder\="Type any character..."
+        />
+      </IressField\>
+    </IressCol\>
+    <IressCol\>
+      <IressField
+        label\="Search requires 3+ characters"
+        htmlFor\="min-length-select"
+      \>
+        <IressRichSelect
+          container\={document.body}
+          options\={options}
+          id\="min-length-select"
+          minSearchLength\={3}
+          placeholder\="Type at least 3 characters..."
+        />
+      </IressField\>
+    </IressCol\>
+  </IressRow\>
+);
+
+Copy
+
 ### [](#initial-options)Initial options
 
 If you are using asynchronous options, you can provide an initial set of options to display before the user has interacted with the select using the `initialOptions` prop.
@@ -307,6 +380,200 @@ export const SelectInitialOptions \= () \=> (
 
 Copy
 
+### [](#long-text-content-in-select-options)Long text content in select options
+
+When working with options that contain long text content, you can control how the dropdown width behaves using the `matchActivatorWidth` prop.
+
+By default (`matchActivatorWidth={true}`), the dropdown width matches the width of the select input, which constrains long text content and may cause truncation. This is ideal for consistent layouts where you want the dropdown to align with the input size.
+
+Setting `matchActivatorWidth={false}` allows the dropdown to expand to accommodate the content width, which is useful when displaying long option labels or when content readability is more important than layout consistency.
+
+This example demonstrates both single-select and multi-select behavior with long text content, allowing you to toggle between the two width behaviors to see the difference.
+
+**matchActivatorWidth: True**
+
+Match input width (default)
+
+Single select with long text
+
+Type anything to start search
+
+Multi-select with long text
+
+Type anything to start search
+
+Selected: None
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+interface LongTextItem {
+  id: string;
+  title: string;
+  description: string;
+  category: string;
+}
+// Mock data with long text content
+const longTextItems: LongTextItem\[\] \= \[
+  {
+    id: '1',
+    title:
+      'Strategic Enterprise Architecture Implementation and Digital Transformation Framework',
+    description:
+      'A comprehensive approach to modernizing legacy systems while maintaining operational continuity across multiple business units and geographical locations with complex regulatory requirements',
+    category: 'Enterprise Solutions',
+  },
+  {
+    id: '2',
+    title:
+      'Advanced Machine Learning Pipeline for Predictive Analytics in Financial Services',
+    description:
+      'Implementation of sophisticated algorithms for risk assessment, fraud detection, and customer behavior analysis using neural networks and deep learning methodologies',
+    category: 'Artificial Intelligence',
+  },
+  {
+    id: '3',
+    title:
+      'Cloud-Native Microservices Architecture with Containerized Deployment Strategy',
+    description:
+      'Scalable distributed system design utilizing Kubernetes orchestration, service mesh technology, and automated CI/CD pipelines for high-availability applications',
+    category: 'Cloud Computing',
+  },
+  {
+    id: '4',
+    title:
+      'Cybersecurity Framework for Multi-Tenant SaaS Applications with Zero-Trust Architecture',
+    description:
+      'Comprehensive security implementation including identity management, threat detection, vulnerability assessment, and compliance monitoring for enterprise-grade applications',
+    category: 'Security',
+  },
+  {
+    id: '5',
+    title:
+      'Real-Time Data Processing and Analytics Platform for Internet of Things Devices',
+    description:
+      'High-throughput data ingestion and processing system capable of handling millions of sensor readings per second with edge computing capabilities',
+    category: 'IoT & Analytics',
+  },
+  {
+    id: '6',
+    title:
+      'Blockchain-Based Supply Chain Management System with Smart Contract Integration',
+    description:
+      'Decentralized tracking and verification system ensuring transparency, authenticity, and compliance throughout the entire supply chain lifecycle',
+    category: 'Blockchain',
+  },
+  {
+    id: '7',
+    title:
+      'Advanced Natural Language Processing Engine for Document Analysis and Information Extraction',
+    description:
+      'AI-powered system for parsing complex documents, extracting key information, and generating automated summaries with multi-language support',
+    category: 'Natural Language Processing',
+  },
+  {
+    id: '8',
+    title:
+      'Augmented Reality Mobile Application Development for Industrial Training and Maintenance',
+    description:
+      'Immersive training platform utilizing AR technology to provide hands-on learning experiences for complex machinery operation and maintenance procedures',
+    category: 'Augmented Reality',
+  },
+  {
+    id: '9',
+    title:
+      'High-Performance Computing Cluster for Scientific Research and Mathematical Modeling',
+    description:
+      'Parallel processing infrastructure designed for complex simulations, weather modeling, genome sequencing, and other computationally intensive research applications',
+    category: 'High Performance Computing',
+  },
+  {
+    id: '10',
+    title:
+      'Automated DevSecOps Pipeline with Continuous Security Testing and Compliance Monitoring',
+    description:
+      'Integrated development and operations workflow incorporating security scanning, vulnerability assessment, and regulatory compliance checks at every stage',
+    category: 'DevSecOps',
+  },
+\];
+const options \= async (query: string) \=> {
+  // Simulate network delay
+  await new Promise((resolve) \=> setTimeout(resolve, 300));
+  if (!query) return \[\];
+  if (query \=== 'error') {
+    throw new Error('Simulated search error');
+  }
+  // Filter items based on search query (case-insensitive)
+  const filteredItems \= longTextItems.filter(
+    (item) \=>
+      item.title.toLowerCase().includes(query.toLowerCase()) ||
+      item.description.toLowerCase().includes(query.toLowerCase()) ||
+      item.category.toLowerCase().includes(query.toLowerCase()),
+  );
+  return filteredItems.map((item) \=> ({
+    label: item.title,
+    value: item.id,
+    meta: item.category,
+    // Include description in a data attribute for potential tooltip use
+    description: item.description,
+  }));
+};
+export const SelectOptionLongText \= () \=> {
+  const \[matchActivatorWidth, setMatchActivatorWidth\] \= useState(true);
+  return (
+    <IressStack gutter\="md"\>
+      <IressField
+        label\={\`matchActivatorWidth: ${matchActivatorWidth ? 'True' : 'False'}\`}
+      \>
+        <IressToggle
+          checked\={matchActivatorWidth}
+          onChange\={setMatchActivatorWidth}
+        \>
+          <IressText\>
+            {matchActivatorWidth
+              ? 'Match input width (default)'
+              : 'Auto-size to content'}
+          </IressText\>
+        </IressToggle\>
+      </IressField\>
+      <div style\={{ display: 'flex', gap: '1rem' }}\>
+        <div style\={{ width: '400px' }}\>
+          <IressField
+            label\="Single select with long text"
+            htmlFor\="single-select-long"
+          \>
+            <IressRichSelect
+              container\={document.body}
+              options\={options}
+              id\="single-select-long"
+              placeholder\="Type anything to start search"
+              matchActivatorWidth\={matchActivatorWidth}
+            />
+          </IressField\>
+        </div\>
+        <div style\={{ width: '400px' }}\>
+          <IressField
+            label\="Multi-select with long text"
+            htmlFor\="multi-select-long"
+          \>
+            <IressRichSelect
+              container\={document.body}
+              options\={options}
+              id\="multi-select-long"
+              multiSelect
+              placeholder\="Type anything to start search"
+              matchActivatorWidth\={matchActivatorWidth}
+            />
+          </IressField\>
+        </div\>
+      </div\>
+    </IressStack\>
+  );
+};
+
+Copy
+
 ### [](#sizing)Sizing
 
 Rich selects can be resized to suit a specific number of characters. This sets an expectation of what data is to be presented; for example using the `16` width for a credit card number.
@@ -1205,6 +1472,57 @@ Hide code
 
 Copy
 
+### [](#reactive-footer)Reactive footer
+
+You can also make the footer reactive to the search results by using the `renderOptionsFooter` prop. It expects a function that returns a ReactNode.
+
+Has a custom footer that uses render props
+
+Hide code
+
+\[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
+
+interface StarWarsCharacter {
+  name: string;
+  gender: string;
+}
+interface StarWarsCharacterApi {
+  results: StarWarsCharacter\[\];
+}
+const options \= async (query: string) \=> {
+  if (!query) return \[\];
+  if (query \=== 'error') {
+    throw new Error();
+  }
+  const data \= await fetch(
+    \`https://swapi.py4e.com/api/people/?search=${query}\`,
+  ).then((response) \=> response.json() as Promise<StarWarsCharacterApi\>);
+  return data.results.map((character: StarWarsCharacter) \=> ({
+    label: character.name,
+    value: character.name,
+    meta: character.gender,
+  }));
+};
+export const SelectOptionsFooter \= () \=> (
+  <IressField
+    label\="Has a custom footer that uses render props"
+    htmlFor\="single-select"
+  \>
+    <IressRichSelect
+      container\={document.body}
+      options\={options}
+      id\="single-select"
+      renderOptionsFooter\={({ results }) \=>
+        results.length \> 0 && (
+          <IressPanel noBorderRadius\>Found {results.length} results</IressPanel\>
+        )
+      }
+    />
+  </IressField\>
+);
+
+Copy
+
 ### [](#readonly)Readonly
 
 The `readonly` prop can be set to `true` to prevent the user from changing the value of the select. This will change the select to a custom read-only style, and will display multiple values seperated with a comma.
@@ -1319,7 +1637,7 @@ These are completely optional, the default behaviour should be sufficient for mo
 
 Below is a mapping of the available sub-components to the previous [Create new option example](#create-new-option).
 
-![](/@fs/app/packages/components/src/components/RichSelect/assets/ids-rich-select--sub-component-mapping.svg)
+![](/@fs/workspace/packages/components/src/components/RichSelect/assets/ids-rich-select--sub-component-mapping.svg)
 
 ### [](#iressselectbody)IressSelectBody
 
@@ -2413,12 +2731,15 @@ On this page
     *   [Single select](#single-select)
     *   [Multi-select](#multi-select)
     *   [Asynchronous options](#asynchronous-options)
+    *   [Minimum search length for async options](#minimum-search-length-for-async-options)
     *   [Initial options](#initial-options)
+    *   [Long text content in select options](#long-text-content-in-select-options)
     *   [Sizing](#sizing)
     *   [Custom label](#custom-label)
     *   [Custom options](#custom-options)
     *   [Create new option](#create-new-option)
     *   [Header and Footer](#header-and-footer)
+    *   [Reactive footer](#reactive-footer)
     *   [Readonly](#readonly)
 *   [Sub-components](#sub-components)
     *   [IressSelectBody](#iressselectbody)

package/generated/docs/components-row-docs.md

@@ -749,7 +749,7 @@ Hide code
     <IressText element\="h2"\>
       Vertical align: top    </IressText\>
     <IressRow
-      className\="ids-styles--set-height-v5150"
+      className\="ids-styles--set-height-v5200"
       verticalAlign\="top"
     \>
       <React.Fragment key\=".0"\>
@@ -778,7 +778,7 @@ Hide code
     <IressText element\="h2"\>
       Vertical align: middle    </IressText\>
     <IressRow
-      className\="ids-styles--set-height-v5150"
+      className\="ids-styles--set-height-v5200"
       verticalAlign\="middle"
     \>
       <React.Fragment key\=".0"\>
@@ -807,7 +807,7 @@ Hide code
     <IressText element\="h2"\>
       Vertical align: bottom    </IressText\>
     <IressRow
-      className\="ids-styles--set-height-v5150"
+      className\="ids-styles--set-height-v5200"
       verticalAlign\="bottom"
     \>
       <React.Fragment key\=".0"\>
@@ -836,7 +836,7 @@ Hide code
     <IressText element\="h2"\>
       Vertical align: stretch    </IressText\>
     <IressRow
-      className\="ids-styles--set-height-v5150"
+      className\="ids-styles--set-height-v5200"
       verticalAlign\="stretch"
     \>
       <React.Fragment key\=".0"\>

package/generated/docs/components-skiplink-docs.md

@@ -25,7 +25,7 @@ Hide code
     }}
   />
   <main
-    className\="iress-u-container iress-u-text iress-u-panel ids-styles--highlight-on-focus-v5150"
+    className\="iress-u-container iress-u-text iress-u-panel ids-styles--highlight-on-focus-v5200"
     id\="main"
     tabIndex\={\-1}
   \>