@iress-oss/ids-mcp-server 5.14.2 → 5.20.1

package/generated/docs/{components-select-docs.md → components_components-select-docs.md}

@@ -1,16 +1,16 @@
-[](#select)Select
-=================
+Select
+======
 
 Overview
 --------
 
 Selects allow users to interact with data and select from a predetermined list of options.
 
-Option 1Option 2Option 3Option 4Option 5
+[](./iframe.html?id=components-select--options)
 
-Hide code
+Option 1Option 2Option 3Option 4Option 5
 
-\[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; }
+```
 
 <IressSelect\>
   <option value\="1"\>
@@ -25,33 +25,117 @@ Hide code
     Option 5  </option\>
 </IressSelect\>
 
-Copy
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The `option` and `optgroup` elements to render within the select.
+
+union
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Value of selected option for uncontrolled select.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| name | 
+
+Identifier for select.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Handles the onChange event of the select input. If you pass in a non-string value, you can access it using the second parameter of the function.
+
+( e: React.ChangeEvent<HTMLSelectElement>, value?: FormControlValue, ) => void
+
+ | \- | \- |
+| placeholder | 
+
+Adds an `option` as the first element with the placeholder text and no value.
+
+string
+
 
-[](#usage)Usage
----------------
+
+ | \- | Set string |
+| readonly | 
+
+If `true`, the user cannot modify the value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| required | 
+
+Mark the select as a required field.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of selected option for controlled select.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| width | 
+
+The width of the select.
+
+union
+
+
+
+ | \- | Set object |
+
+Usage
+-----
 
 Selects allow users to interact with data and select from a predetermined list of options, usually when you are constrained for space and have a limited number of options to choose from.
 
-### [](#when-to-use)When To Use
+### When To Use
 
 *   If you have less than 5 options to choose from, consider using `IressRadioGroup` instead.
 *   If you need to display rich content in your selects (eg. icons and metadata), you can use `IressRichSelect`.
 *   Otherwise, `IressSelect` is the way to go.
 
-[](#examples)Examples
----------------------
+Examples
+--------
 
-### [](#options)Options
+### Options
 
 Individual options can be passed directly into `IressSelect` using the native `option` element.
 
 **Note:** The `mapSelectOptions` helper function, originally used to map options to `<option>` elements, is now deprecated. Instead, you can use `array.map` to map the options to `<option>` elements.
 
-Option 1Option 2Option 3Option 4Option 5
+[](./iframe.html?id=components-select--options)
 
-Hide code
+Option 1Option 2Option 3Option 4Option 5
 
-\[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; }
+```
 
 <IressSelect\>
   <option value\="1"\>
@@ -66,17 +150,100 @@ Hide code
     Option 5  </option\>
 </IressSelect\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The `option` and `optgroup` elements to render within the select.
+
+union
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Value of selected option for uncontrolled select.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| name | 
+
+Identifier for select.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Handles the onChange event of the select input. If you pass in a non-string value, you can access it using the second parameter of the function.
+
+( e: React.ChangeEvent<HTMLSelectElement>, value?: FormControlValue, ) => void
+
+ | \- | \- |
+| placeholder | 
+
+Adds an `option` as the first element with the placeholder text and no value.
+
+string
+
 
-### [](#option-groups)Option groups
+
+ | \- | Set string |
+| readonly | 
+
+If `true`, the user cannot modify the value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| required | 
+
+Mark the select as a required field.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of selected option for controlled select.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| width | 
+
+The width of the select.
+
+union
+
+
+
+ | \- | Set object |
+
+### Option groups
 
 Just like the native `<select />` element, `IressSelect` supports option groups.
 
-Group 1 / Option 1Group 1 / Option 2Group 1 / Option 3Group 1 / Option 4Group 1 / Option 5Group 2 / Option 1Group 2 / Option 2Group 2 / Option 3Group 2 / Option 4Group 2 / Option 5
+[](./iframe.html?id=components-select--option-groups)
 
-Hide code
+Group 1 / Option 1Group 1 / Option 2Group 1 / Option 3Group 1 / Option 4Group 1 / Option 5Group 2 / Option 1Group 2 / Option 2Group 2 / Option 3Group 2 / Option 4Group 2 / Option 5
 
-\[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; }
+```
 
 <IressSelect\>
   <optgroup label\="Group 1"\>
@@ -105,19 +272,102 @@ Hide code
   </optgroup\>
 </IressSelect\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The `option` and `optgroup` elements to render within the select.
+
+union
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Value of selected option for uncontrolled select.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| name | 
+
+Identifier for select.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Handles the onChange event of the select input. If you pass in a non-string value, you can access it using the second parameter of the function.
+
+( e: React.ChangeEvent<HTMLSelectElement>, value?: FormControlValue, ) => void
+
+ | \- | \- |
+| placeholder | 
+
+Adds an `option` as the first element with the placeholder text and no value.
+
+string
+
+
 
-### [](#non-string-values)Non-string values
+ | \- | Set string |
+| readonly | 
+
+If `true`, the user cannot modify the value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| required | 
+
+Mark the select as a required field.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of selected option for controlled select.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| width | 
+
+The width of the select.
+
+union
+
+
+
+ | \- | Set object |
+
+### Non-string values
 
 If you would like to introduce options with non-string values, you can use the `IressSelectOption` component to define your options.
 
 **Note:** Since the `onChange` event of a select relies on strings, it will try to find a string representation of the value. If you are using non-string values, you will need to ensure the `toString` conversion is unique per option.
 
-Option 1Option 2Group 1 / Option 1Group 1 / Option 2Group 1 / Option 3
+[](./iframe.html?id=components-select--non-string-values)
 
-Hide code
+Option 1Option 2Group 1 / Option 1Group 1 / Option 2Group 1 / Option 3
 
-\[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; }
+```
 
 <IressSelect\>
   <IressSelectOption value\={1}\>
@@ -134,17 +384,100 @@ Hide code
   </optgroup\>
 </IressSelect\>
 
-Copy
+```
 
-### [](#placeholder)Placeholder
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The `option` and `optgroup` elements to render within the select.
+
+union
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Value of selected option for uncontrolled select.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| name | 
+
+Identifier for select.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Handles the onChange event of the select input. If you pass in a non-string value, you can access it using the second parameter of the function.
+
+( e: React.ChangeEvent<HTMLSelectElement>, value?: FormControlValue, ) => void
+
+ | \- | \- |
+| placeholder | 
+
+Adds an `option` as the first element with the placeholder text and no value.
+
+string
+
+
+
+ | \- | Set string |
+| readonly | 
+
+If `true`, the user cannot modify the value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| required | 
+
+Mark the select as a required field.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of selected option for controlled select.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| width | 
+
+The width of the select.
+
+union
+
+
+
+ | \- | Set object |
+
+### Placeholder
 
 A default placeholder option can be set using the `placeholder` prop.
 
-Please select an optionOption 1Option 2Option 3Option 4Option 5
+[](./iframe.html?id=components-select--placeholder)
 
-Hide code
+Please select an optionOption 1Option 2Option 3Option 4Option 5
 
-\[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; }
+```
 
 <IressSelect placeholder\="Please select an option"\>
   <option value\="1"\>
@@ -159,17 +492,100 @@ Hide code
     Option 5  </option\>
 </IressSelect\>
 
-Copy
+```
 
-### [](#selected-option)Selected option
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The `option` and `optgroup` elements to render within the select.
+
+union
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Value of selected option for uncontrolled select.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| name | 
+
+Identifier for select.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Handles the onChange event of the select input. If you pass in a non-string value, you can access it using the second parameter of the function.
+
+( e: React.ChangeEvent<HTMLSelectElement>, value?: FormControlValue, ) => void
+
+ | \- | \- |
+| placeholder | 
+
+Adds an `option` as the first element with the placeholder text and no value.
+
+string
+
+
+
+ | \- | Please select an option |
+| readonly | 
+
+If `true`, the user cannot modify the value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| required | 
+
+Mark the select as a required field.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of selected option for controlled select.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| width | 
+
+The width of the select.
+
+union
+
+
+
+ | \- | Set object |
+
+### Selected option
 
 An option can be selected by using either the `defaultValue` prop for uncontrolled components, or the `value` prop for controlled components.
 
-Option 1Option 2Option 3Option 4Option 5
+[](./iframe.html?id=components-select--selected-option)
 
-Hide code
+Option 1Option 2Option 3Option 4Option 5
 
-\[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; }
+```
 
 <IressSelect defaultValue\={3}\>
   <option value\="1"\>
@@ -184,14 +600,103 @@ Hide code
     Option 5  </option\>
 </IressSelect\>
 
-Copy
+```
+
+#### Props
 
-### [](#sizing)Sizing
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The `option` and `optgroup` elements to render within the select.
+
+union
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Value of selected option for uncontrolled select.
+
+FormControlValue
+
+
+
+ | \- | 
+
+3
+
+ |
+| name | 
+
+Identifier for select.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Handles the onChange event of the select input. If you pass in a non-string value, you can access it using the second parameter of the function.
+
+( e: React.ChangeEvent<HTMLSelectElement>, value?: FormControlValue, ) => void
+
+ | \- | \- |
+| placeholder | 
+
+Adds an `option` as the first element with the placeholder text and no value.
+
+string
+
+
+
+ | \- | Set string |
+| readonly | 
+
+If `true`, the user cannot modify the value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| required | 
+
+Mark the select as a required field.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of selected option for controlled select.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| width | 
+
+The width of the select.
+
+union
+
+
+
+ | \- | Set object |
+
+### Sizing
 
 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.
 
 Widths can also be set as a percentage, allowing the input to take up a proportion of the width of its container.
 
+[](./iframe.html?id=components-select--sizing)
+
 2Option 1Option 2Option 3Option 4Option 5
 
 4Option 1Option 2Option 3Option 4Option 5
@@ -214,9 +719,7 @@ Widths can also be set as a percentage, allowing the input to take up a proporti
 
 100percOption 1Option 2Option 3Option 4Option 5
 
-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; }
+```
 
 <IressStack gutter\="md"\>
   <div\>
@@ -408,19 +911,102 @@ Hide code
   </div\>
 </IressStack\>
 
-Copy
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The `option` and `optgroup` elements to render within the select.
+
+union
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Value of selected option for uncontrolled select.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| name | 
+
+Identifier for select.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Handles the onChange event of the select input. If you pass in a non-string value, you can access it using the second parameter of the function.
+
+( e: React.ChangeEvent<HTMLSelectElement>, value?: FormControlValue, ) => void
+
+ | \- | \- |
+| placeholder | 
+
+Adds an `option` as the first element with the placeholder text and no value.
+
+string
+
+
 
-### [](#readonly)Readonly
+ | \- | \- |
+| readonly | 
+
+If `true`, the user cannot modify the value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| required | 
+
+Mark the select as a required field.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of selected option for controlled select.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| width | 
+
+The width of the select.
+
+union
+
+
+
+ | \- | \- |
+
+### Readonly
 
 Unlike the standard HTML `select` element, the `IressSelect` component can be set to `readonly`. In this case, an `IressReadonly` component will render the selected label text, while the selected value is rendered in a hidden HTML `input` element for form submission.
 
 If you need more control over the read-only state (for example, rendering a stylised version of the value), you can use the [`IressReadonly` component](?path=/docs/components-readonly--docs).
 
-Option 2
+[](./iframe.html?id=components-select--readonly)
 
-Hide code
+Option 2
 
-\[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; }
+```
 
 <IressSelect
   readonly
@@ -438,19 +1024,91 @@ Hide code
     Option 5  </option\>
 </IressSelect\>
 
-Copy
-
-On this page
-
-*   [Overview](#overview)
-*   [Props](#props)
-*   [Usage](#usage)
-    *   [When To Use](#when-to-use)
-*   [Examples](#examples)
-    *   [Options](#options)
-    *   [Option groups](#option-groups)
-    *   [Non-string values](#non-string-values)
-    *   [Placeholder](#placeholder)
-    *   [Selected option](#selected-option)
-    *   [Sizing](#sizing)
-    *   [Readonly](#readonly)
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+The `option` and `optgroup` elements to render within the select.
+
+union
+
+
+
+ | \- | \- |
+| defaultValue | 
+
+Value of selected option for uncontrolled select.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| name | 
+
+Identifier for select.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Handles the onChange event of the select input. If you pass in a non-string value, you can access it using the second parameter of the function.
+
+( e: React.ChangeEvent<HTMLSelectElement>, value?: FormControlValue, ) => void
+
+ | \- | \- |
+| placeholder | 
+
+Adds an `option` as the first element with the placeholder text and no value.
+
+string
+
+
+
+ | \- | Set string |
+| readonly | 
+
+If `true`, the user cannot modify the value.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| required | 
+
+Mark the select as a required field.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| value | 
+
+Value of selected option for controlled select.
+
+FormControlValue
+
+
+
+ | \- | 
+
+"2"
+
+ |
+| width | 
+
+The width of the select.
+
+union
+
+
+
+ | \- | Set object |