@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

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

@@ -0,0 +1,955 @@
+Tab Set
+=======
+
+Overview
+--------
+
+Tabs are used to display modular pieces of related data that do not need to be compared or accessed simultaneously.
+
+* * *
+
+Updated
+
+**Recently updated**
+
+This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
+
+[](./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'
+
+ | 
+
+top-lefttop-centertop-right
+
+ |
+| onChange | 
+
+Emitted when a tab changes.
+
+(event: TabSetChangedEventDetail) => void
+
+ | \- | \- |
+| panelStyle | 
+
+Custom style for the panel (the area that contains the tab content).
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |
+| 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 |
+| tabHolderStyle | 
+
+Custom style for the tab holder (the area that contains the tabs).
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |
+
+Usage
+-----
+
+The `IressTabSet` is a wrapper for `IressTab` components to make a up a set of tabs.
+
+### 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)
+
+[Iress](https://iress.com)
+
+[Google](https://google.com)
+
+```
+
+<IressTabSet\>
+  <IressTab
+    href\="https://iress.com"
+    label\="Iress"
+  />
+  <IressTab
+    href\="https://google.com"
+    label\="Google"
+  />
+</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'
+
+ | 
+
+top-lefttop-centertop-right
+
+ |
+| onChange | 
+
+Emitted when a tab changes.
+
+(event: TabSetChangedEventDetail) => void
+
+ | \- | \- |
+| panelStyle | 
+
+Custom style for the panel (the area that contains the tab content).
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |
+| 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 |
+| tabHolderStyle | 
+
+Custom style for the tab holder (the area that contains the tabs).
+
+IressCustomiseSlot
+
+
+
+ | \- | 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'
+
+ | 
+
+top-lefttop-centertop-right
+
+ |
+| onChange | 
+
+Emitted when a tab changes.
+
+(event: TabSetChangedEventDetail) => void
+
+ | \- | \- |
+| panelStyle | 
+
+Custom style for the panel (the area that contains the tab content).
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |
+| 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 |
+| tabHolderStyle | 
+
+Custom style for the tab holder (the area that contains the tabs).
+
+IressCustomiseSlot
+
+
+
+ | \- | 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)
+
+[Iress](https://iress.com)
+
+[Google](https://google.com)
+
+```
+
+<IressTabSet defaultSelected\={1}\>
+  <IressTab
+    href\="https://iress.com"
+    label\="Iress"
+  />
+  <IressTab
+    href\="https://google.com"
+    label\="Google"
+  />
+</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
+
+
+
+ | \- | 
+
+1
+
+ |
+| layout | 
+
+Layout options for the positioning of tabs.
+
+union
+
+
+
+ | 
+
+'top-left'
+
+ | 
+
+top-lefttop-centertop-right
+
+ |
+| onChange | 
+
+Emitted when a tab changes.
+
+(event: TabSetChangedEventDetail) => void
+
+ | \- | \- |
+| panelStyle | 
+
+Custom style for the panel (the area that contains the tab content).
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |
+| 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 |
+| tabHolderStyle | 
+
+Custom style for the tab holder (the area that contains the tabs).
+
+IressCustomiseSlot
+
+
+
+ | \- | 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 gap\="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'
+
+ | 
+
+top-lefttop-centertop-right
+
+ |
+| onChange | 
+
+Emitted when a tab changes.
+
+(event: TabSetChangedEventDetail) => void
+
+ | \- | \- |
+| panelStyle | 
+
+Custom style for the panel (the area that contains the tab content).
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |
+| selected | 
+
+Set the selected tab for controlled tabs. If the `IressTab` does not have a `value` prop, it will match by index.
+
+FormControlValue
+
+
+
+ | \- | \- |
+| tabHolderStyle | 
+
+Custom style for the tab holder (the area that contains the tabs).
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |
+
+### 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 gap\="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
+
+ | \- | \- |
+| panelStyle | 
+
+Custom style for the panel (the area that contains the tab content).
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |
+| 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 |
+| tabHolderStyle | 
+
+Custom style for the tab holder (the area that contains the tabs).
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |
+
+### Lazy Loading
+
+Tabs can be lazy loaded via state, allowing you to add/remove tabs as needed.
+
+[](./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 gap\="md"\>
+      <IressButton onClick\={() \=> setLoadTabs(!loadTabs)}\>
+        Toggle tabs      </IressButton\>
+      <IressTabSet {...{
+  defaultSelected: 2,
+}}\>
+        {loadTabs && (
+          <\>
+            <IressTab label\="Address"\>Address information goes here</IressTab\>
+            <IressTab label\="Employment"\>
+              Employment information goes here            </IressTab\>
+            <IressTab label\="Medical 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
+
+
+
+ | \- | 
+
+2
+
+ |
+| layout | 
+
+Layout options for the positioning of tabs.
+
+union
+
+
+
+ | 
+
+'top-left'
+
+ | 
+
+top-lefttop-centertop-right
+
+ |
+| onChange | 
+
+Emitted when a tab changes.
+
+(event: TabSetChangedEventDetail) => void
+
+ | \- | \- |
+| panelStyle | 
+
+Custom style for the panel (the area that contains the tab content).
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |
+| 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 |
+| tabHolderStyle | 
+
+Custom style for the tab holder (the area that contains the tabs).
+
+IressCustomiseSlot
+
+
+
+ | \- | 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 gap\="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'
+
+ | 
+
+top-lefttop-centertop-right
+
+ |
+| onChange | 
+
+Emitted when a tab changes.
+
+(event: TabSetChangedEventDetail) => void
+
+ | \- | \- |
+| panelStyle | 
+
+Custom style for the panel (the area that contains the tab content).
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |
+| 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 |
+| tabHolderStyle | 
+
+Custom style for the tab holder (the area that contains the tabs).
+
+IressCustomiseSlot
+
+
+
+ | \- | Set object |