@laerdal/life-react-components 3.5.1-dev.11 → 3.5.1-dev.13

package/dist/Popover/Popover.d.ts

@@ -1,27 +1,95 @@
 import * as React from 'react';
 import { Position, Size } from '../types';
-type topSectionProps = {
+export declare const PopoverContainer: import("styled-components").StyledComponent<"div", any, {
+    size: Size;
+    position: Position;
+    showArrowPointer: boolean;
+}, never>;
+export declare const PopoverTopSectionContainer: import("styled-components").StyledComponent<"div", any, {
+    size: Size;
+}, never>;
+export declare const PopoverMiddleSectionContainer: import("styled-components").StyledComponent<"div", any, {
+    size: Size;
+}, never>;
+export declare const PopoverBottomSectionContainer: import("styled-components").StyledComponent<"div", any, {
+    size: Size;
+}, never>;
+export declare const PopoverWrapper: import("styled-components").StyledComponent<"div", any, {
+    position: Position;
+    showOnClick: boolean;
+    showPopover: boolean;
+}, never>;
+export interface PopoverTopSectionProps {
+    /**
+     * Required. The main text to be displayed in the top section of the popover.
+     */
     text: string;
+    /**
+     * Optional. A note to be displayed below the main text in the top section of the popover.
+     */
     note?: string;
-};
-type actionButtonProps = {
+}
+export interface PopoverActionButtonProps {
+    /**
+     * Required. The icon to be displayed on the button.
+     */
     icon: React.ReactNode;
+    /**
+     * Required. The handler function to be called when the button is clicked.
+     */
     action: () => void;
+    /**
+     * Optional. The label for the button. If provided, the button will display this text.
+     */
     label?: string;
-};
-type bottomSectionProps = {
-    iconButtons?: actionButtonProps[];
-    textButton?: actionButtonProps;
-};
-type PopoverProps = {
+}
+export interface PopoverBottomSectionProps {
+    /**
+     * Optional. An array of PopoverActionButtonProps objects.
+     * Each object represents an icon button to be displayed in the bottom section of the popover.
+     */
+    iconButtons?: PopoverActionButtonProps[];
+    /**
+     * Optional. A PopoverActionButtonProps object representing a text button to be displayed in the bottom section of the popover.
+     */
+    textButton?: PopoverActionButtonProps;
+}
+export interface PopoverProps {
+    /**
+     * Optional. The size of the popover. It can be 'Small', 'Medium', or 'Large'.
+     * Defaults to 'Medium' if not specified.
+     */
     size?: Size.Small | Size.Medium | Size.Large;
-    topSectionProps?: topSectionProps;
-    bottomSectionProps?: bottomSectionProps;
+    /**
+     * Optional. Properties for the top section of the popover.
+     */
+    topSectionProps?: PopoverTopSectionProps;
+    /**
+     * Optional. Properties for the bottom section of the popover.
+     */
+    bottomSectionProps?: PopoverBottomSectionProps;
+    /**
+     * Required. The main content to be displayed in the popover.
+     */
     mainContent: React.ReactNode;
+    /**
+     * Required. The children to be rendered inside the popover.
+     */
     children: React.ReactNode;
+    /**
+     * Required. The position of the popover relative to the target element.
+     * It can be 'Top', 'Bottom', 'Right', or 'Left'.
+     */
     position: Position.Top | Position.Bottom | Position.Right | Position.Left;
+    /**
+     * Required. A boolean indicating whether the popover should be shown when the target element is clicked. Defaults to 'false', meaning that popover will be shown on mouse hover.
+     */
     showOnClick: boolean;
+    /**
+     * Optional. A boolean indicating whether an arrow pointer should be shown on the popover.
+     * Defaults to 'false' if not specified.
+     */
     showArrowPointer?: boolean;
-};
+}
 declare const Popover: React.FunctionComponent<PopoverProps>;
 export default Popover;

package/dist/ProfileButton/ProfileButton.d.ts

@@ -1,21 +1,49 @@
 import * as React from 'react';
 export type ProfileButtonProps = {
+    /**
+     * Optional. The source URL of the profile picture.
+     */
     portraitSrc?: string;
+    /**
+     * Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.
+     */
     icon?: React.ReactNode;
+    /**
+     * Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.
+     */
     initials?: string;
+    /**
+     * Required. The handler function to be called when the button is clicked.
+     */
     onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.
+     */
     notificationVariant?: 'positive' | 'critical';
-    hideOnLowWidth?: boolean;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
 export declare const ProfileButtonContainer: import("styled-components").StyledComponent<"div", any, {
     hideOnLowWidth?: boolean | undefined;
 }, never>;
 declare const ProfileButton: React.ForwardRefExoticComponent<{
+    /**
+     * Optional. The source URL of the profile picture.
+     */
     portraitSrc?: string | undefined;
+    /**
+     * Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.
+     */
     icon?: React.ReactNode;
+    /**
+     * Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.
+     */
     initials?: string | undefined;
+    /**
+     * Required. The handler function to be called when the button is clicked.
+     */
     onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;
-    notificationVariant?: "positive" | "critical" | undefined;
-    hideOnLowWidth?: boolean | undefined;
+    /**
+     * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.
+     */
+    notificationVariant?: "critical" | "positive" | undefined;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> & React.RefAttributes<HTMLButtonElement>>;
 export default ProfileButton;

package/dist/QuizButton/QuizButton.d.ts

@@ -1,13 +1,37 @@
 import * as React from 'react';
 import { Size } from '..';
-type QuizButtonProps = {
+export type QuizButtonProps = {
+    /**
+     * Optional. The result type of the quiz button. Can be 'correct', 'incorrect', or 'partial'.
+     */
     resultType?: 'correct' | 'incorrect' | 'partial';
+    /**
+     * Required. The text to be displayed on the quiz button.
+     */
     text: string;
+    /**
+     * Optional. A function to be called when the quiz button is clicked.
+     */
     onClick?: (arg: any) => void;
+    /**
+     * Required. The ID of the quiz button.
+     */
     id: string;
+    /**
+     * Optional. A boolean indicating whether the quiz button is selected.
+     */
     selected?: boolean;
+    /**
+     * Optional. A boolean indicating whether the quiz button is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Optional. The size of the quiz button. Can be 'Small', 'Medium', or 'Large'.
+     */
     size?: Size.Small | Size.Medium | Size.Large;
+    /**
+     * Required. The type of the quiz button. Can be 'radio' or 'checkbox'.
+     */
     type: 'radio' | 'checkbox';
 } & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>;
 declare const QuizButton: React.FunctionComponent<QuizButtonProps>;

package/dist/SegmentControl/SegmentControl.d.ts

@@ -4,15 +4,38 @@ export declare const SegmentControlItemContent: import("styled-components").Styl
 export declare const SegmentControlItemBackground: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SegmentControlItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SegmentControlWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {
+export interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'content' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {
+    /**
+     * Required. The key of the segment control item. This should be unique among all items in the segment control.
+     */
     key: string;
+    /**
+     * Optional. A boolean indicating whether the segment control item is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Required. The content of the segment control item. This can be a string or a React node.
+     */
     content: React.ReactNode | string;
 }
-interface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Required. An array of SegmentControlItem objects representing the items in the segment control.
+     */
     items: SegmentControlItem[];
+    /**
+     * Optional. The key of the currently selected item in the segment control. In order to change selected item
+     * when user clicks on it, you should update this prop to display item as 'selected'.
+     */
     selected: string;
+    /**
+     * Required. A function to be called when the selected item in the segment control changes.
+     * It should take a string representing the key of the new selected item.
+     */
     onChange: (value: string) => void;
+    /**
+     * Optional. The size of the segment control. Can be 'Small' or 'Medium'.
+     */
     size?: Size.Small | Size.Medium;
 }
 declare const SegmentControl: React.FunctionComponent<SegmentControlProps>;

package/dist/SegmentControl/index.d.ts

@@ -1,3 +1,3 @@
-import { SegmentControlItem, default as SegmentControl } from './SegmentControl';
-export type { SegmentControlItem };
+import { SegmentControlItem, default as SegmentControl, SegmentControlProps } from './SegmentControl';
+export type { SegmentControlItem, SegmentControlProps };
 export { SegmentControl };

package/dist/SideMenu/SideMenuBody.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { SideMenuProps } from './types';
-export declare const SideMenuBody: (props: SideMenuProps) => JSX.Element;
+export declare const SideMenuBody: (props: SideMenuProps) => React.JSX.Element;

package/dist/SideMenu/SideMenuFooter.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { SideMenuProps } from './types';
-export declare const SideMenuFooter: (props: SideMenuProps) => JSX.Element;
+export declare const SideMenuFooter: (props: SideMenuProps) => React.JSX.Element;

package/dist/SideMenu/SideMenuHeader.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { SideMenuProps } from './types';
-export declare const SideMenuHeader: (props: SideMenuProps) => JSX.Element;
+export declare const SideMenuHeader: (props: SideMenuProps) => React.JSX.Element;

package/dist/Switcher/MobileSwitcherMenu.d.ts

@@ -9,5 +9,5 @@ interface Props {
     footerAction?: MenuButton;
     customContent?: React.ReactNode;
 }
-declare const MobileSwitcherMenu: ({ label, header, note, onMenuClose, customContent, items, footerAction }: Props) => JSX.Element;
+declare const MobileSwitcherMenu: ({ label, header, note, onMenuClose, customContent, items, footerAction }: Props) => React.JSX.Element;
 export default MobileSwitcherMenu;

package/dist/Switcher/SwitcherMenuItem.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export interface SwitcherNavItem {
     label: string;
     url: string;
@@ -7,5 +7,5 @@ export interface SwitcherNavItem {
     as?: any;
     testId?: string;
 }
-declare const SwitcherMenuItem: ({ label, url, disabled, icon, as, testId }: SwitcherNavItem) => JSX.Element;
+declare const SwitcherMenuItem: ({ label, url, disabled, icon, as, testId }: SwitcherNavItem) => React.JSX.Element;
 export default SwitcherMenuItem;

package/dist/Switcher/__tests__/SwitcherMenuItem.js

@@ -0,0 +1,53 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React from 'react';
+import { render } from '@testing-library/react';
+import { SwitcherMenuItem } from '../index';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+describe('<SwitcherMenuItem />', function () {
+    it('Renders SwitcherMenuItem', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, queryByText, getByTestId, testMenuItem;
+        return __generator(this, function (_b) {
+            _a = render(React.createElement(SwitcherMenuItem, { label: "TestLabel", url: "/test", testId: "TestSwitcherMenuItem" })), queryByText = _a.queryByText, getByTestId = _a.getByTestId;
+            expect(queryByText('TestLabel')).toBeDefined();
+            testMenuItem = getByTestId('TestSwitcherMenuItem');
+            expect(testMenuItem).toHaveStyleRule('color', COLORS.neutral_600);
+            return [2 /*return*/];
+        });
+    }); });
+});

package/dist/Table/TableTypes.d.ts

@@ -7,32 +7,119 @@ import { ButtonProps } from '../Button/Button';
 import { IconButtonProps } from '../Button/Iconbutton';
 import { HyperlinkProps } from '../HyperLink/HyperLink';
 export interface TableProps {
+    /**
+     * Optional. The title of the table. If provided, a header row will be rendered.
+     */
     title?: string;
+    /**
+     * Required. An array of TableColumn objects, each representing a column in the table.
+     */
     columns: TableColumn[];
+    /**
+     * Required. An array of objects, each representing a row in the table.
+     */
     rows: any[];
+    /**
+     * Optional. A boolean indicating whether the table should have borders.
+     */
     border?: boolean;
+    /**
+     * Optional. A boolean indicating whether the table should be rendered as an accordion table.
+     * If set to 'true' then there will be no pagination, and all rows will be shown on the first page without pagination controls.
+     */
     accordion?: boolean;
+    /**
+     * Optional. A boolean indicating initial state of the table if it is shown in 'accordion' mode, if set to true, it will be collapsed.
+     */
     collapsed?: boolean;
+    /**
+     * Optional. The number of rows to show when the table is shown in accordion mode and collapsed.
+     */
     collapsedRows?: number;
+    /**
+     * Optional. An object of type TableSortProps, representing the properties for sorting the table.
+     */
     sortProps?: TableSortProps;
+    /**
+     * Optional. A boolean indicating whether pagination should be done remotely.
+     */
     remoteOperations?: boolean;
+    /**
+     * Optional. An object of type TablePagination, representing the properties for paginating the table.
+     * Required only if 'remoteOperations' is set to true.
+     */
     pagination?: TablePagination;
+    /**
+     * Optional. A function to be called when the previous page button is clicked.
+     * Will be called only if 'remoteOperations' is set to true.
+     */
     onPreviousPageClick?: () => void;
+    /**
+     * Optional. A function to be called when the next page button is clicked.
+     * Will be called only if 'remoteOperations' is set to true.
+     */
     onNextPageClick?: () => void;
+    /**
+     * Optional. A function to be called when the number of rows per page changes.
+     * Will be called only if 'remoteOperations' is set to true.
+     */
     onRowsPerPageChange?: (count: number) => void;
+    /**
+     * Optional. A function to be called when the sorting direction changes.
+     * Will be called only if 'remoteOperations' is set to true.
+     */
     onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void;
+    /**
+     * Optional. A boolean indicating whether a loading indicator should be shown.
+     */
     showLoadingIndicator?: boolean;
+    /**
+     * Optional. The label to be shown next to the rows per page selector.
+     * Defaults to 'Rows per page'.
+     */
     rowsPerPageLabel?: string;
+    /**
+     * Optional. The label to be shown when there are no rows in the grid.
+     * Defaults to 'There are no rows to display'
+     */
     noRowsLabel?: string;
+    /**
+     * Optional. The label to be shown for 'accordion' grid when table is in collapsed state.
+     * Defaults to 'Show more'
+     */
     showMoreLabel?: string;
+    /**
+     * Optional. The label to be shown for 'accordion' grid when user can 'collapse' some of the rows.
+     * Defaults to 'Show more'
+     */
     showFewerLabel?: string;
+    /**
+     * Optional. An object representing the properties for a dropdown menu shown in the header of table.
+     */
     menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;
+    /**
+     * Optional. A boolean indicating whether the rows in the table should be selectable.
+     */
     selectable?: boolean;
+    /**
+     * Optional. A function to be called when some of the rows get selected or unselected.
+     */
     onSelectionChange?: (value: any | any[]) => void;
+    /**
+     * Optional. A boolean indicating whether multiple rows can be selected at once.
+     */
     multiSelect?: boolean;
+    /**
+     * Optional. The key to be used as the unique identifier for each row.
+     */
     keyExpr?: string;
+    /** Optional. Defines initial state of rows (selected/unselected). */
     selectedRows?: any[];
+    /** Optional. Z-Index html attribute to be set to loading indicator. */
     loaderZIndex?: string;
+    /** Optional. Sets value for 'table-layout' css props of Table tag.
+     * If not provided then 'table-layout' will not be set.
+      */
     layout?: TableLayout;
 }
 export interface TableSortProps {
@@ -41,19 +128,62 @@ export interface TableSortProps {
     allowClearingSort?: boolean;
 }
 export interface TableColumn {
+    /**
+     * Required. The key of the column. This should match a key in the row data.
+     */
     key: string;
+    /**
+     * Optional. The key of the note to be displayed in the column.
+     */
     noteKey?: string;
+    /**
+     * Required. The name of the column. This will be displayed in the column header.
+     */
     name: string;
+    /**
+     * Optional. The value to be used for filtering the column.
+     */
     filterValue?: string;
+    /**
+     * Optional. The icon to be displayed in the column.
+     */
     icon?: React.ReactNode;
+    /**
+     * Optional. The width of the column. Can be specified as a string (e.g., '100px') or a number (e.g., 100).
+     */
     width?: string | number;
+    /**
+     * Optional. A function that returns the color for a cell in the column.
+     */
     colorFn?: (row: any, key: string) => string;
+    /**
+     * Optional. The text alignment for the column. Can be 'right', 'left', or 'center'.
+     */
     justify?: TableJustification;
+    /**
+     * Optional. A boolean indicating whether the text in the column should be shortened.
+     */
     shortenText?: boolean;
+    /**
+     * Optional. A function to be called when an action is performed on a cell in the column.
+     */
     action?: (row: any, event: any) => void;
+    /**
+     * Optional. The type of the column. Can be 'text', 'boolean', 'number', 'custom', 'button', 'icon', or 'link'.
+     */
     type?: TableColumnTypes;
+    /**
+     * Optional. Additional properties for the column.
+     */
     additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled' | 'tooltip'> | Pick<HyperlinkProps, 'variant'>;
+    /**
+     * Optional. A function that returns custom content for a cell in the column.
+     * Will be used only for button of type 'custom'
+     */
     customContent?: (row: any, key: string) => any;
+    /**
+     * Optional. A boolean indicating whether the column is sortable.
+     */
     sortable?: boolean;
 }
 export type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';

package/dist/Tabs/HorizontalTabs.d.ts

@@ -3,18 +3,29 @@
  */
 import * as React from 'react';
 import { Size } from '../types';
-interface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {
-    size: Size;
+export interface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Required. Size of the Tabs */
+    size: Size.XSmall | Size.Small | Size.Medium | Size.Large;
+    /** Required: Array of Tabs to show */
     tabs: HorizontalTab[];
+    /** Optional. For 'default' variant of tabs if this flag is set, then white background will be added to the tabs  */
     sideFill?: boolean;
+    /** Optional. If set, then whole width of the parent container will be equally split between Tabs, otherwise each tab will take width
+     * required for its content.
+     */
     fullWidth?: boolean;
+    /** Required. Handler to be called when user tries to change the tab */
     onTabChange: (to: string) => void;
+    /** Optional. Display variant of the tabs. If not set, then 'default' is used */
     variant?: 'default' | 'floating';
 }
 export interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {
+    /** Required. Value of the tab */
     value: string;
+    /** Required. State of the tab, selected or not. Use it to set initial state of the tabs. */
     selected: boolean;
+    /** Required. URL related with the Tab */
     to: string;
 }
-declare const HorizontalTabs: ({ size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest }: HorizontalTabProps) => JSX.Element;
+declare const HorizontalTabs: ({ size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest }: HorizontalTabProps) => React.JSX.Element;
 export default HorizontalTabs;

package/dist/Tabs/TabLink.d.ts

@@ -13,7 +13,7 @@ declare const TabLink: React.ForwardRefExoticComponent<{
     onActiveStateChanged?: ((state: boolean) => void) | undefined;
     showNotificationDot?: boolean | undefined;
     size?: Size.Small | Size.Medium | Size.Large | undefined;
-    variant?: "positive" | "critical" | undefined;
+    variant?: "critical" | "positive" | undefined;
     containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
     containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
 } & NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/Tabs/VerticalTabs.d.ts

@@ -1,19 +1,47 @@
 import * as React from 'react';
 import { Size } from '../types';
 export interface VerticalTabEntry {
+    /**
+     * Required. The main text to be displayed on the tab.
+     */
     requiredLine: string;
+    /**
+     * Optional. The secondary text to be displayed on the tab link under the required line.
+     */
     optionalLine?: string;
+    /**
+     * Optional. The icon to be displayed next to the secondary text on the tab link under the required line.
+     */
     optionalLineIcon?: React.ReactNode;
+    /**
+     * Optional. The icon to be displayed at the end of the tab.
+     */
     endLineIcon?: React.ReactNode;
+    /**
+     * Required. The URL to which the tab links.
+     */
     to: string;
+    /**
+     * Optional. A boolean indicating whether the tab is disabled.
+     * If true, the tab will be unclickable and will have a disabled appearance.
+     */
     disabled?: boolean;
+    /**
+     * Optional. The handler function to be called when the tab is clicked.
+     */
     onClick?: (e: React.MouseEvent) => void;
+    /**
+     * Optional. A boolean indicating whether a notification dot should be shown on the tab.
+     */
     showNotificationDot?: boolean;
+    /**
+     * Optional. The variant of the notification dot. It can be 'critical' or 'positive'. Defaults to 'Critical'
+     */
     variant?: 'critical' | 'positive';
 }
-interface VerticalTabsProps {
+export interface VerticalTabsProps {
     size?: Size.Small | Size.Medium | Size.Large;
     entries: VerticalTabEntry[];
 }
-declare const VerticalTabs: ({ size, entries }: VerticalTabsProps) => JSX.Element;
+declare const VerticalTabs: ({ size, entries }: VerticalTabsProps) => React.JSX.Element;
 export default VerticalTabs;