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

package/{docs/ids → generated/docs}/components-richselect-docs.md

@@ -1146,6 +1146,65 @@ export const SelectNewOption \= () \=> (
 
 Copy
 
+### [](#header-and-footer)Header and Footer
+
+Use the `header` `footer` prop to add a header/footer to the select panel. They can be any component you like, but you need to manage the styling on your own. If you want to keep the padding align with option items, try to wrap inside `<IressMenuText>` (it's essentially a div container, see the example below):
+
+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; }
+
+<IressRichSelect
+  container\={document.body}
+  footer\={<\><IressDivider style\={{marginBottom: 0}} /><IressMenuText\><IressInline gutter\="sm"\><IressButton\>Button 1</IressButton\><IressButton\>Button 2</IressButton\></IressInline\></IressMenuText\></\>}
+  header\={<\><IressMenuText\><IressText element\="h3" style\={{margin: 0}}\>Header</IressText\></IressMenuText\><IressDivider style\={{marginTop: 0}} /></\>}
+  options\={\[
+    {
+      label: 'Option 1',
+      meta: \[
+        'Some',
+        <IressText key\="0-active" mode\="success"\>Active</IressText\>
+      \],
+      value: '1'
+    },
+    {
+      label: 'Option 2',
+      meta: \[
+        'Some',
+        <IressText key\="1-active" mode\="success"\>Active</IressText\>
+      \],
+      value: '2'
+    },
+    {
+      label: 'Option 3',
+      meta: \[
+        'Some',
+        <IressText key\="2-active" mode\="success"\>Active</IressText\>
+      \],
+      value: '3'
+    },
+    {
+      label: 'Option 4',
+      meta: \[
+        'Some',
+        <IressText key\="3-active" mode\="success"\>Active</IressText\>
+      \],
+      value: '4'
+    },
+    {
+      label: 'Option 5',
+      meta: \[
+        'Some',
+        <IressText key\="4-active" mode\="success"\>Active</IressText\>
+      \],
+      value: '5'
+    }
+  \]}
+  placeholder\=""
+/>
+
+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.
@@ -1260,7 +1319,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/Users/ming.fang/code/design-system/packages/components/src/components/RichSelect/assets/ids-rich-select--sub-component-mapping.svg)
+![](/@fs/Users/mellisa.hankins/projects/design-system/packages/components/src/components/RichSelect/assets/ids-rich-select--sub-component-mapping.svg)
 
 ### [](#iressselectbody)IressSelectBody
 
@@ -1605,63 +1664,60 @@ Copy
 
 #### [](#select-label-props)Props
 
-Name
-
-Description
-
-Default
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Append content.
 
-Control
+ReactNode
 
-append
 
-Append content.
 
-ReactNode
+ | 
 
 <IressIcon />
 
-Set object
 
-placeholder
+
+ | Set object |
+| placeholder | 
 
 Placeholder, shown when there is nothing selected.
 
 ReactNode
 
-\-
+
+
+ | \- | 
 
 ""
 
-prepend
+ |
+| prepend | 
 
 Prepend content.
 
 ReactNode
 
-\-
 
-Set object
 
-selected
+ | \- | Set object |
+| selected | 
 
 Selected items.
 
 LabelValueMeta | LabelValueMeta\[\] | undefined
 
-\-
-
-Set object
-
-selectedOptionsText
+ | \- | Set object |
+| selectedOptionsText | 
 
 Text displayed next to label when two or more options are selected.
 
 stringundefined
 
-{{numOptions}} selected
 
-Set object
+
+ | {{numOptions}} selected | Set object |
 
 ### [](#iressselectmenu)IressSelectMenu
 
@@ -1728,51 +1784,45 @@ Copy
 
 #### [](#select-menu-props)Props
 
-Name
-
-Description
-
-Default
-
-Control
-
-defaultSelected
-
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultSelected | 
 Initially selected values of menu when `role` is listbox. Used for uncontrolled menus.
 
 MenuSelectedundefined
 
-\-
 
-Set object
 
-heading
+ | \- | Set object |
+| heading | 
 
 Heading slot. Often used for a title or description. If a string, will automatically provide an id for aria-labelledby.
 
 ReactNode
 
-\-
+
+
+ | \- | 
 
 "Search results"
 
-hideSelectedItems
+ |
+| hideSelectedItems | 
 
 Hide selected items from menu. Useful for autocomplete scenarios.
 
 booleanundefined
 
-\-
 
-Set object
 
-items
+ | \- | Set object |
+| items | 
 
 Items to be displayed in the menu, array of FormattedLabelValueMeta.
 
 FormattedLabelValueMeta\[\] | undefined
 
-\[\]
+ | \[\] | 
 
 RAW
 
@@ -1790,79 +1840,75 @@ items : \[
 
 \]
 
-limitDesktop
+
+
+
+
+ |
+| limitDesktop | 
 
 Maximum number of results displayed on larger screen sizes (>= 768).
 
 numberundefined
 
-\-
 
-Set object
 
-limitMobile
+ | \- | Set object |
+| limitMobile | 
 
 Maximum number of results displayed on mobile screen sizes (< 768).
 
 numberundefined
 
-\-
 
-Set object
 
-multiSelect
+ | \- | Set object |
+| multiSelect | 
 
 If set to true, menu items will contain checkboxes.
 
 booleanundefined
 
-\-
 
-Set object
 
-noResults
+ | \- | Set object |
+| noResults | 
 
 No results text to display when no items are found.
 
 ReactNode
 
-\-
+
+
+ | \- | 
 
 "No results found"
 
-onChange
+ |
+| onChange | 
 
 Emitted when the value changes when item is selected from the menu
 
 ((selected?: LabelValueMeta | LabelValueMeta\[\] | undefined) => void) | undefined
 
-\-
-
-\-
-
-selected
+ | \- | \- |
+| selected | 
 
 Selected items.
 
 LabelValueMeta | LabelValueMeta\[\] | undefined
 
-\-
-
-Set object
-
-selectedFirst
+ | \- | Set object |
+| selectedFirst | 
 
 Set whether to display selected items first in the menu.
 
 booleanundefined
 
-\-
-
-Set object
 
-Show Menu props itemsMenu props
 
-Show Menu props items
+ | \- | Set object |
+| Show Menu props itemsMenu props | Show Menu props items |
 
 ### [](#iressselectsearch)IressSelectSearch
 
@@ -2139,103 +2185,94 @@ Copy
 
 #### [](#select-tags-props)Props
 
-Name
-
-Description
-
-Default
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| append | 
+Append content.
 
-Control
+ReactNode
 
-append
 
-Append content.
 
-ReactNode
+ | 
 
 <IressButton />
 
-Set object
 
-limit
+
+ | Set object |
+| limit | 
 
 Limit of tags to display before shortening to `selectedOptionsText`
 
 numberundefined
 
-5
 
-Set object
 
-onDelete
+ | 
 
-Emitted when a tag is deleted.
+5
 
-((item?: LabelValueMeta | undefined, e?: SyntheticEvent<ButtonRef, Event> | undefined) => void) | undefined
+ | Set object |
+| onDelete | 
 
-\-
+Emitted when a tag is deleted.
 
-\-
+((item?: LabelValueMeta | undefined, e?: SyntheticEvent<ButtonRef, Event> | undefined) => void) | undefined
 
-onDeleteAll
+ | \- | \- |
+| onDeleteAll | 
 
 Emitted when the combined tag delete button is clicked.
 
 ((e: SyntheticEvent<ButtonRef, Event>) => void) | undefined
 
-\-
-
-\-
-
-onToggleActions
+ | \- | \- |
+| onToggleActions | 
 
 Emitted when actions are toggled.
 
 ((open?: boolean | undefined) => void) | undefined
 
-\-
-
-\-
-
-placeholder
+ | \- | \- |
+| placeholder | 
 
 Placeholder, shown when there is nothing selected.
 
 ReactNode
 
-\-
+
+
+ | \- | 
 
 "Select an item"
 
-prepend
+ |
+| prepend | 
 
 Prepend content.
 
 ReactNode
 
-\-
 
-Set object
 
-selected
+ | \- | Set object |
+| selected | 
 
 Selected items.
 
 LabelValueMeta | LabelValueMeta\[\] | undefined
 
-\-
-
-Set object
-
-selectedOptionsText
+ | \- | Set object |
+| selectedOptionsText | 
 
 Text displayed next to label when two or more options are selected.
 
 stringundefined
 
-{{numOptions}} selected
 
-Set object
+
+ | {{numOptions}} selected | Set object |
 
 #### [](#maximum-tag-limit)Maximum tag limit
 
@@ -2381,6 +2418,7 @@ On this page
     *   [Custom label](#custom-label)
     *   [Custom options](#custom-options)
     *   [Create new option](#create-new-option)
+    *   [Header and Footer](#header-and-footer)
     *   [Readonly](#readonly)
 *   [Sub-components](#sub-components)
     *   [IressSelectBody](#iressselectbody)

package/{docs/ids → 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-v5130"
+      className\="ids-styles--set-height-v5142"
       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-v5130"
+      className\="ids-styles--set-height-v5142"
       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-v5130"
+      className\="ids-styles--set-height-v5142"
       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-v5130"
+      className\="ids-styles--set-height-v5142"
       verticalAlign\="stretch"
     \>
       <React.Fragment key\=".0"\>

package/{docs/ids → generated/docs}/components-skeleton-docs.md

@@ -60,7 +60,7 @@ import {
   IressStack,
   IressText,
   TEXT\_VARIANTS,
-} from '@iress/ids-components';
+} from '@iress-oss/ids-components';
 export const SkeletonText \= () \=> {
   const \[loading, setLoading\] \= useState(true);
   return (
@@ -102,7 +102,7 @@ import {
   IressSkeleton,
   IressSkeletonProps,
   IressStack,
-} from '@iress/ids-components';
+} from '@iress-oss/ids-components';
 export const SkeletonRect \= () \=> {
   const \[loading, setLoading\] \= useState(true);
   return (
@@ -144,7 +144,7 @@ import {
   IressSkeleton,
   IressSkeletonProps,
   IressStack,
-} from '@iress/ids-components';
+} from '@iress-oss/ids-components';
 export const SkeletonCircle \= () \=> {
   const \[loading, setLoading\] \= useState(true);
   return (

package/{docs/ids → generated/docs}/components-skeleton-recipes-docs.md

@@ -19,7 +19,7 @@ import {
   IressSkeleton,
   IressStack,
   IressText,
-} from '@iress/ids-components';
+} from '@iress-oss/ids-components';
 const CARD\_LINE\_SIZES \= \['100%', '91%', '95%', '89%', '83%'\];
 const CardLoading \= () \=> (
   <IressCard

package/{docs/ids → 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-v5130"
+    className\="iress-u-container iress-u-text iress-u-panel ids-styles--highlight-on-focus-v5142"
     id\="main"
     tabIndex\={\-1}
   \>