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

package/generated/docs/components_components-tabset-tab-docs.md

@@ -0,0 +1,262 @@
+Tab
+===
+
+Overview
+--------
+
+A tab is an interactive element that controls the display of other content, usually a panel
+
+[](./iframe.html?id=components-tabset-tab--inactive)
+
+Tab
+
+```
+
+<IressTab label\="Tab" />
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| active | 
+Sets the active styling of the tab.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Text to be displayed inside the tab panel.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| label\* | 
+
+The label of this tab.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Tab"
+
+ |
+| value | 
+
+You can provide your own value to allow you to control its active state when used in `IressTabSet`.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+Examples
+--------
+
+### Active
+
+The tab can be set to active using the `active` prop.
+
+**Note:** If you are using `IressTabSet`, you should use the `selected` prop on the `IressTabSet` to set the active state of its `<IressTab />` children, as the `active` prop will be ignored.
+
+[](./iframe.html?id=components-tabset-tab--active)
+
+Tab
+
+```
+
+<IressTab
+  active
+  label\="Tab"
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| active | 
+Sets the active styling of the tab.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| children | 
+
+Text to be displayed inside the tab panel.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| label\* | 
+
+The label of this tab.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Tab"
+
+ |
+| value | 
+
+You can provide your own value to allow you to control its active state when used in `IressTabSet`.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### Value
+
+A tab can have a unique value set to it, used to determine its active state in a `IressTabSet` component. The value is not visible to end users.
+
+[](./iframe.html?id=components-tabset-tab--value)
+
+Tab with value
+
+```
+
+<IressTabSet\>
+  <IressTab
+    label\="Tab with value"
+    value\="some-tab-name"
+  />
+</IressTabSet\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| active | 
+Sets the active styling of the tab.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Text to be displayed inside the tab panel.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| label\* | 
+
+The label of this tab.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Tab with value"
+
+ |
+| value | 
+
+You can provide your own value to allow you to control its active state when used in `IressTabSet`.
+
+FormControlValue
+
+
+
+ | \- | 
+
+"some-tab-name"
+
+ |
+
+### Panel
+
+A tab can set its `children` when used inside an `IressTabSet` component, and it will render as its panel. If the tab is not used inside an `IressTabSet` component, `children` will not render.
+
+[](./iframe.html?id=components-tabset-tab--panel)
+
+Tab
+
+Some content for this tab
+
+```
+
+<IressTabSet\>
+  <IressTab label\="Tab"\>
+    Some content for this tab  </IressTab\>
+</IressTabSet\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| active | 
+Sets the active styling of the tab.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| children | 
+
+Text to be displayed inside the tab panel.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Some content for this tab"
+
+ |
+| label\* | 
+
+The label of this tab.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Tab"
+
+ |
+| value | 
+
+You can provide your own value to allow you to control its active state when used in `IressTabSet`.
+
+FormControlValue
+
+
+
+ | \- | Set object |

package/generated/docs/components_components-tag-docs.md

@@ -0,0 +1,259 @@
+Tag
+===
+
+Overview
+--------
+
+Tags represent individual units in a group of selected items.
+
+[](./iframe.html?id=components-tag--tag)
+
+Tag
+
+```
+
+{
+  args: {
+    children: 'Tag'
+  }
+}
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Contents of the tag.
+
+ReactReactNode
+
+
+
+ | \- | 
+
+"Tag"
+
+ |
+| deleteButton | 
+
+You can completely replace the delete button to provide your own functionality. When this is provided, `deleteButtonText` will not be used and `onDelete` and `onDeleteButtonBlur` will not be called.
+
+ReactReactNode
+
+
+
+ | \- | Set object |
+| deleteButtonText | 
+
+Screen reader text for delete button
+
+string
+
+
+
+ | 
+
+'Delete'
+
+ | Set string |
+| onDelete | 
+
+Callback triggered when the tag is deleted
+
+(children: string, e: React.SyntheticEvent<ButtonRef>) => void
+
+ | \- | \- |
+| onDeleteButtonBlur | 
+
+Callback triggered when the close button is blurred
+
+(e: React.FocusEvent<HTMLButtonElement>) => void
+
+ | \- | \- |
+
+Usage
+-----
+
+### Deleting tags
+
+The delete button will not automatically remove the tag from the screen. Instead it will trigger the `onDelete` event. Use this event within your app to handle the display of tags.
+
+The text a screen reader will announce defaults to "Delete" but can be changed using the `deleteButtonText` prop.
+
+[](./iframe.html?id=components-tag--deleting-tags)
+
+Tag 1
+
+Tag 2
+
+Tag 3
+
+```
+
+import {
+  IressButton,
+  type IressButtonProps,
+  IressIcon,
+  IressInline,
+  IressTag,
+  type IressTagProps,
+} from '@iress-oss/ids-components';
+import { useState } from 'react';
+export const TagDeletion \= (args: IressTagProps) \=> {
+  const \[tags, setTags\] \= useState(\['Tag 1', 'Tag 2', 'Tag 3'\]);
+  const handleAdd: IressButtonProps\['onClick'\] \= () \=> {
+    setTags(\[...tags, \`Tag ${tags.length + 1}\`\]);
+  };
+  const handleDelete: IressTagProps\['onDelete'\] \= (tag) \=> {
+    setTags((existingTags) \=>
+      existingTags.filter((existingTag) \=> existingTag !== tag),
+    );
+  };
+  return (
+    <IressInline gutter\="sm" verticalAlign\="middle"\>
+      {tags.map((tag) \=> (
+        <IressTag
+          {...args}
+          key\={tag}
+          deleteButtonText\={args.deleteButtonText ?? \`Delete ${tag}\`}
+          onDelete\={handleDelete}
+        \>
+          {tag}
+        </IressTag\>
+      ))}
+      <IressButton onClick\={handleAdd}\>
+        <IressIcon name\="plus" />
+      </IressButton\>
+    </IressInline\>
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Contents of the tag.
+
+ReactReactNode
+
+
+
+ | \- | Set object |
+| deleteButton | 
+
+You can completely replace the delete button to provide your own functionality. When this is provided, `deleteButtonText` will not be used and `onDelete` and `onDeleteButtonBlur` will not be called.
+
+ReactReactNode
+
+
+
+ | \- | Set object |
+| deleteButtonText | 
+
+Screen reader text for delete button
+
+string
+
+
+
+ | 
+
+'Delete'
+
+ | Set string |
+| onDelete | 
+
+Callback triggered when the tag is deleted
+
+(children: string, e: React.SyntheticEvent<ButtonRef>) => void
+
+ | \- | \- |
+| onDeleteButtonBlur | 
+
+Callback triggered when the close button is blurred
+
+(e: React.FocusEvent<HTMLButtonElement>) => void
+
+ | \- | \- |
+
+IressTagInput
+-------------
+
+* * *
+
+Beta
+
+**New component**
+
+This component is new, please provide feedback to the Frontend Enablement team if you encounter any issues.
+
+`IressTagInput` allows you to manage multiple tags, and is often used for managing email addresses, domains or other simple metadata that does not have to be selected from a list.
+
+If you need to manage tags that are selected from a existing list, use `IressRichSelect` with the `multiple` prop.
+
+[](./iframe.html?id=components-tag-taginput--tag-input)
+
+Tag
+
+```
+
+<IressTagInput
+ defaultValue\={\[
+   'Tag'
+ \]}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Tags to display (uncontrolled)
+
+string\[\]
+
+ | \- | 
+
+RAW
+
+*   defaultValue :
+    
+    \[
+    
+    *   0 : "Tag"
+    
+    \]
+    
+
+
+
+ |
+| onChange | 
+
+Emitted when the value changes.
+
+(e?: SyntheticEvent<InputBaseElement>, value?: string\[\]) => void
+
+ | \- | \- |
+| onExistingTag | 
+
+Emitted when the user attempts to add a tag that already exists.
+
+(tag: string) => void
+
+ | \- | \- |
+| value | 
+
+Tags to display (controlled)
+
+string\[\]
+
+ | \- | Set object |