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

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

@@ -0,0 +1,772 @@
+Tab Set
+=======
+
+Overview
+--------
+
+Tabs are used to display modular pieces of related data that do not need to be compared or accessed simultaneously.
+
+[](./iframe.html?id=components-tabset--panels)
+
+Address
+
+Employment
+
+History
+
+Address information goes here
+
+Employment information goes here
+
+Medical history goes here
+
+```
+
+<IressTabSet\>
+  <IressTab label\="Address"\>
+    Address information goes here  </IressTab\>
+  <IressTab label\="Employment"\>
+    Employment information goes here  </IressTab\>
+  <IressTab label\="History"\>
+    Medical history goes here  </IressTab\>
+</IressTabSet\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inside the IressTabs, usually multiple `IressTab`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultSelected | 
+
+Set the selected tab for uncontrolled tabs. If the `IressTab` does not have a `value` prop, it will match by index.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| layout | 
+
+Layout options for the positioning of tabs.
+
+union
+
+
+
+ | 
+
+'top-left'
+
+ | Set object |
+| onChange | 
+
+Emitted when a tab changes.
+
+(event: TabSetChangedEventDetail) => void
+
+ | \- | \- |
+| selected | 
+
+Set the selected tab for controlled tabs. If the `IressTab` does not have a `value` prop, it will match by index.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+Usage
+-----
+
+The `IressTabSet` is a wrapper for `IressTab` components to make a up a set of tabs.
+
+**Note:** The `mapTabs` helper function, originally used to map tabs to its sub-components, is now deprecated. Instead, you can use `array.map` to map the tabs to `IressTab`.
+
+### Navigation
+
+You can use the `IressTabSet` component to create tab navigation to control an area of the page, or even navigate between different pages.
+
+[](./iframe.html?id=components-tabset--tab-navigation)
+
+Address
+
+Employment
+
+History
+
+```
+
+<IressTabSet\>
+  <IressTab label\="Address" />
+  <IressTab label\="Employment" />
+  <IressTab label\="History" />
+</IressTabSet\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inside the IressTabs, usually multiple `IressTab`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultSelected | 
+
+Set the selected tab for uncontrolled tabs. If the `IressTab` does not have a `value` prop, it will match by index.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| layout | 
+
+Layout options for the positioning of tabs.
+
+union
+
+
+
+ | 
+
+'top-left'
+
+ | Set object |
+| onChange | 
+
+Emitted when a tab changes.
+
+(event: TabSetChangedEventDetail) => void
+
+ | \- | \- |
+| selected | 
+
+Set the selected tab for controlled tabs. If the `IressTab` does not have a `value` prop, it will match by index.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### With `children` prop
+
+Using the `children` prop will automatically inject the content as a tab panel when active, along with appropriate attributes for accessibility, ensuring the tab and its associated panel can be navigated by screenreaders.
+
+[](./iframe.html?id=components-tabset--panels)
+
+Address
+
+Employment
+
+History
+
+Address information goes here
+
+Employment information goes here
+
+Medical history goes here
+
+```
+
+<IressTabSet\>
+  <IressTab label\="Address"\>
+    Address information goes here  </IressTab\>
+  <IressTab label\="Employment"\>
+    Employment information goes here  </IressTab\>
+  <IressTab label\="History"\>
+    Medical history goes here  </IressTab\>
+</IressTabSet\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inside the IressTabs, usually multiple `IressTab`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultSelected | 
+
+Set the selected tab for uncontrolled tabs. If the `IressTab` does not have a `value` prop, it will match by index.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| layout | 
+
+Layout options for the positioning of tabs.
+
+union
+
+
+
+ | 
+
+'top-left'
+
+ | Set object |
+| onChange | 
+
+Emitted when a tab changes.
+
+(event: TabSetChangedEventDetail) => void
+
+ | \- | \- |
+| selected | 
+
+Set the selected tab for controlled tabs. If the `IressTab` does not have a `value` prop, it will match by index.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+Examples
+--------
+
+### Default selected
+
+If you would like to set a tab by default, use the `defaultSelected` prop.
+
+[](./iframe.html?id=components-tabset--default-selected)
+
+Address
+
+Employment
+
+History
+
+```
+
+<IressTabSet defaultSelected\={2}\>
+  <IressTab label\="Address" />
+  <IressTab label\="Employment" />
+  <IressTab label\="History" />
+</IressTabSet\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inside the IressTabs, usually multiple `IressTab`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultSelected | 
+
+Set the selected tab for uncontrolled tabs. If the `IressTab` does not have a `value` prop, it will match by index.
+
+FormControlValue
+
+
+
+ | \- | 
+
+2
+
+ |
+| layout | 
+
+Layout options for the positioning of tabs.
+
+union
+
+
+
+ | 
+
+'top-left'
+
+ | Set object |
+| onChange | 
+
+Emitted when a tab changes.
+
+(event: TabSetChangedEventDetail) => void
+
+ | \- | \- |
+| selected | 
+
+Set the selected tab for controlled tabs. If the `IressTab` does not have a `value` prop, it will match by index.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### Controlled
+
+You can use state to control the active tab by setting the `selected` property to which tab you would like to select. This should be the `value` of the tab you would like to select, or if you do not use the `value` prop, it's index.
+
+[](./iframe.html?id=components-tabset--controlled)
+
+Change to last tab
+
+Address
+
+Employment
+
+History
+
+Address information goes here
+
+Employment information goes here
+
+Medical history goes here
+
+```
+
+import {
+  IressButton,
+  IressStack,
+  IressTab,
+  IressTabSet,
+  type IressTabSetProps,
+} from '@iress-oss/ids-components';
+import { useState } from 'react';
+export const TabsUsingState \= () \=> {
+  const \[selected, setSelected\] \= useState<number\>();
+  return (
+    <IressStack gutter\={IressStack.Gutter.Md}\>
+      <IressButton onClick\={() \=> setSelected(selected \=== 2 ? 0 : 2)}\>
+        {selected \=== 2 ? \`Back to first tab\` : \`Change to last tab\`}
+      </IressButton\>
+      <IressTabSet
+        
+        selected\={selected}
+        onChange\={({ index }) \=> setSelected(index)}
+      \>
+        <IressTab label\="Address"\>Address information goes here</IressTab\>
+        <IressTab label\="Employment"\>Employment information goes here</IressTab\>
+        <IressTab label\="History"\>Medical history goes here</IressTab\>
+      </IressTabSet\>
+    </IressStack\>
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inside the IressTabs, usually multiple `IressTab`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultSelected | 
+
+Set the selected tab for uncontrolled tabs. If the `IressTab` does not have a `value` prop, it will match by index.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| layout | 
+
+Layout options for the positioning of tabs.
+
+union
+
+
+
+ | 
+
+'top-left'
+
+ | Set object |
+| onChange | 
+
+Emitted when a tab changes.
+
+(event: TabSetChangedEventDetail) => void
+
+ | \- | \- |
+| selected | 
+
+Set the selected tab for controlled tabs. If the `IressTab` does not have a `value` prop, it will match by index.
+
+FormControlValue
+
+
+
+ | \- | \- |
+
+### Layout
+
+`IressTabSet` controls the layout of the tab buttons. These will always appear at the top of the tab container, and can be aligned to the left (default), centrally or to the right via the `layout` prop.
+
+[](./iframe.html?id=components-tabset--layout)
+
+top-left
+--------
+
+Address
+
+Employment
+
+History
+
+Address information goes here
+
+Employment information goes here
+
+Medical history goes here
+
+top-center
+----------
+
+Address
+
+Employment
+
+History
+
+Address information goes here
+
+Employment information goes here
+
+Medical history goes here
+
+top-right
+---------
+
+Address
+
+Employment
+
+History
+
+Address information goes here
+
+Employment information goes here
+
+Medical history goes here
+
+```
+
+<IressStack gutter\="md"\>
+  <IressPanel\>
+    <IressText element\="h2"\>
+      top-left    </IressText\>
+    <IressTabSet layout\="top-left"\>
+      <IressTab label\="Address"\>
+        Address information goes here      </IressTab\>
+      <IressTab label\="Employment"\>
+        Employment information goes here      </IressTab\>
+      <IressTab label\="History"\>
+        Medical history goes here      </IressTab\>
+    </IressTabSet\>
+  </IressPanel\>
+  <IressPanel\>
+    <IressText element\="h2"\>
+      top-center    </IressText\>
+    <IressTabSet layout\="top-center"\>
+      <IressTab label\="Address"\>
+        Address information goes here      </IressTab\>
+      <IressTab label\="Employment"\>
+        Employment information goes here      </IressTab\>
+      <IressTab label\="History"\>
+        Medical history goes here      </IressTab\>
+    </IressTabSet\>
+  </IressPanel\>
+  <IressPanel\>
+    <IressText element\="h2"\>
+      top-right    </IressText\>
+    <IressTabSet layout\="top-right"\>
+      <IressTab label\="Address"\>
+        Address information goes here      </IressTab\>
+      <IressTab label\="Employment"\>
+        Employment information goes here      </IressTab\>
+      <IressTab label\="History"\>
+        Medical history goes here      </IressTab\>
+    </IressTabSet\>
+  </IressPanel\>
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inside the IressTabs, usually multiple `IressTab`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultSelected | 
+
+Set the selected tab for uncontrolled tabs. If the `IressTab` does not have a `value` prop, it will match by index.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| layout | 
+
+Layout options for the positioning of tabs.
+
+union
+
+
+
+ | 
+
+'top-left'
+
+ | \- |
+| onChange | 
+
+Emitted when a tab changes.
+
+(event: TabSetChangedEventDetail) => void
+
+ | \- | \- |
+| selected | 
+
+Set the selected tab for controlled tabs. If the `IressTab` does not have a `value` prop, it will match by index.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### Lazy Loading
+
+As of version 5, tabs can be lazy loaded. However, to ensure they work correctly you will need to set the `value` prop on each `IressTab`, as shown in this example.
+
+[](./iframe.html?id=components-tabset--lazy-loading)
+
+Toggle tabs
+
+```
+
+import {
+  IressButton,
+  IressStack,
+  IressTab,
+  IressTabSet,
+  type IressTabSetProps,
+} from '@iress-oss/ids-components';
+import { useState } from 'react';
+export const TabsLazyLoading \= () \=> {
+  const \[loadTabs, setLoadTabs\] \= useState<boolean\>();
+  return (
+    <IressStack gutter\="md"\>
+      <IressButton onClick\={() \=> setLoadTabs(!loadTabs)}\>
+        Toggle tabs      </IressButton\>
+      <IressTabSet {...{
+  defaultSelected: 'medical',
+}}\>
+        {loadTabs && (
+          <\>
+            <IressTab label\="Address" value\="address"\>
+              Address information goes here            </IressTab\>
+            <IressTab label\="Employment" value\="employment"\>
+              Employment information goes here            </IressTab\>
+            <IressTab label\="Medical history" value\="medical"\>
+              Medical history goes here            </IressTab\>
+          </\>
+        )}
+      </IressTabSet\>
+    </IressStack\>
+  );
+};
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inside the IressTabs, usually multiple `IressTab`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultSelected | 
+
+Set the selected tab for uncontrolled tabs. If the `IressTab` does not have a `value` prop, it will match by index.
+
+FormControlValue
+
+
+
+ | \- | 
+
+"medical"
+
+ |
+| layout | 
+
+Layout options for the positioning of tabs.
+
+union
+
+
+
+ | 
+
+'top-left'
+
+ | Set object |
+| onChange | 
+
+Emitted when a tab changes.
+
+(event: TabSetChangedEventDetail) => void
+
+ | \- | \- |
+| selected | 
+
+Set the selected tab for controlled tabs. If the `IressTab` does not have a `value` prop, it will match by index.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+
+### Badges and icons
+
+You can add rich content into the `label` of the `IressTab` to customise the tab further.
+
+Some common examples include:
+
+*   Adding a badge to the tab button.
+*   Adding icons to the tab button.
+
+Notes:
+
+*   For best accessibility, the `IressTab` component will find the first focusable element inside the custom label to add the tab role.
+
+[](./iframe.html?id=components-tabset--tabs-with-badges)
+
+Address
+
+3
+
+Employment
+
+History
+
+Address information goes here
+
+Employment information goes here
+
+Medical history goes here
+
+```
+
+<IressTabSet\>
+  <IressBadge
+    host\={<IressTab label\="Address"\>Address information goes here</IressTab\>}
+    mode\="info"
+    pill
+  \>
+    3  </IressBadge\>
+  <IressTab label\={<IressInline gutter\="sm"\><IressIcon name\="user" />{' '}Employment</IressInline\>}\>
+    Employment information goes here  </IressTab\>
+  <IressTab label\="History"\>
+    Medical history goes here  </IressTab\>
+</IressTabSet\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| children | 
+Content to be displayed inside the IressTabs, usually multiple `IressTab`.
+
+ReactNode
+
+
+
+ | \- | \- |
+| defaultSelected | 
+
+Set the selected tab for uncontrolled tabs. If the `IressTab` does not have a `value` prop, it will match by index.
+
+FormControlValue
+
+
+
+ | \- | Set object |
+| layout | 
+
+Layout options for the positioning of tabs.
+
+union
+
+
+
+ | 
+
+'top-left'
+
+ | Set object |
+| onChange | 
+
+Emitted when a tab changes.
+
+(event: TabSetChangedEventDetail) => void
+
+ | \- | \- |
+| selected | 
+
+Set the selected tab for controlled tabs. If the `IressTab` does not have a `value` prop, it will match by index.
+
+FormControlValue
+
+
+
+ | \- | Set object |