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

package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { MenuNavigationItemTypeItem } from '../../index';
 export declare const flowDown: import("styled-components").Keyframes;
 export declare const Menu: import("styled-components").StyledComponent<"ul", any, {}, never>;
@@ -8,5 +8,5 @@ type Props = {
     clickMenuAction: () => void;
     navigationOptions: MenuNavigationItemTypeItem[];
 };
-declare const ExtendedMainMenu: ({ clickMenuAction, navigationOptions }: Props) => JSX.Element;
+declare const ExtendedMainMenu: ({ clickMenuAction, navigationOptions }: Props) => React.JSX.Element;
 export default ExtendedMainMenu;

package/dist/GlobalNavigationBar/desktop/UserMenu.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ProfileMenu } from '../types';
 interface UserMenuProps extends ProfileMenu {
     show?: boolean;
     onHideUserMenu: () => void;
 }
-declare const UserMenu: ({ show, user, onHideUserMenu, sections, signOut, label }: UserMenuProps) => JSX.Element;
+declare const UserMenu: ({ show, user, onHideUserMenu, sections, signOut, label }: UserMenuProps) => React.JSX.Element;
 export default UserMenu;

package/dist/GlobalNavigationBar/mobile/MobileMenu.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { MobileNavigationMenuProps, ProfileMenu } from '../types';
 type Props = MobileNavigationMenuProps & {
     profile?: ProfileMenu;
     show?: boolean;
     onClose: () => void;
 };
-declare const MobileMenu: ({ show, profile, buttons, label, header, items, footer, action, onClose }: Props) => JSX.Element;
+declare const MobileMenu: ({ show, profile, buttons, label, header, items, footer, action, onClose }: Props) => React.JSX.Element;
 export default MobileMenu;

package/dist/GlobalNavigationBar/types.d.ts

@@ -53,13 +53,17 @@ export interface MenuProfileButton extends Omit<ProfileButtonProps, 'type' | 'on
     action?: (button?: EventTarget) => boolean | void;
     placement?: 'left' | 'right';
 }
+export interface MenuSearchButton {
+    type: 'search';
+    placement?: 'left' | 'right';
+}
 export interface MenuSwitcherButton extends Omit<IconButtonProps, 'id' | 'type' | 'action' | 'shape' | 'variant' | 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'iconColor' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'invertFocus'> {
     type: 'switcher';
     placement?: 'left' | 'right';
     action?: (button?: EventTarget) => boolean | void;
 }
 export type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;
-export type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton;
+export type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton | MenuSearchButton;
 export interface MobileNavigationMenuProps {
     label?: string;
     buttons?: MobileMenuButtonTypes[];

package/dist/HyperLink/HyperLink.d.ts

@@ -4,12 +4,19 @@ export declare const StyledLink: import("styled-components").StyledComponent<"a"
     margin?: string | undefined;
 }, never>;
 export interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Id of the link component. */
     id?: string;
+    /** Style variant of the link */
     variant: 'default' | 'inverted';
+    /** Href of the link component */
     href: string;
+    /** If set then user can not interact with the link. */
     disabled?: boolean;
+    /** Custom value of margin style. */
     margin?: string;
+    /** Content of the Hyperlink */
     children?: any;
+    /** Custom className to set to the link.   */
     className?: string;
 }
 declare const HyperLink: React.FunctionComponent<HyperlinkProps>;

package/dist/Image/ImageWithFallbacks.d.ts

@@ -16,6 +16,6 @@ declare class ImageWithFallbacks extends React.Component<ImageWithFallbacksProps
     componentDidUpdate(prevProps: ImageWithFallbacksProps): void;
     onError(): void;
     onLoad(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default ImageWithFallbacks;

package/dist/InputFields/DatepickerField.d.ts

@@ -8,33 +8,71 @@ import { Testable } from '../types';
  * Add custom types.
  */
 export type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {
+    /** Optional. Selected date. Defaults to current date */
     value?: Date;
+    /** Optional. Handler to be called when selected date was changed. */
     onChange?: (date: Date) => void;
+    /** Optional. Handler to be called when control is losing focus. */
     onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    /** Optional. Quarter picker mode. If set, then user can not select a particular date, but quarter of the year.
+     * 1st day of the quarter will be set as value.
+     */
     showQuarterYearPicker?: boolean;
+    /** Optional. If set, then input field will be shown in 'invalid' state */
     invalid?: boolean;
+    /** Optional. Format in which date will be shown in the input field. Defaults to 'MMMM Do, yyyy'.
+     * For quarter picker will be shown in 'YYYY, qqq' format.
+     */
     dateFormat?: string;
+    /** Optional. Validation message to be shown under the input field */
     validationMessage?: string;
+    /** Optional. Value for 'autocomplete' attribute of input field tag. */
     autoComplete?: string;
+    /** Optional. Placeholder text to be shown when no value is selected. */
     placeholder?: string;
+    /** Optional. If set, then user will be able to open year selector by clicking on the month in the dropdown. */
     yearPicker?: boolean;
+    /** Optional. How many years before current year will be available in the year selector mode. */
     yearsBeforeCurrentDate?: number;
+    /** Optional. How many years after current year will be available in the year selector mode. */
     yearsAfterCurrentDate?: number;
+    /** Optional. Margin value to be set to the dropdown container. */
     margin?: string;
+    /** Optional. Position where to show tooltip in case of closed datepicker and value overflowing the input field. */
+    overflowTooltipPosition?: 'top' | 'bottom';
 };
-declare const DatepickerField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onBlur" | "onChange" | "size" | "value"> & {
+declare const DatepickerField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onBlur" | "onChange" | "size"> & {
+    /** Optional. Selected date. Defaults to current date */
     value?: Date | undefined;
+    /** Optional. Handler to be called when selected date was changed. */
     onChange?: ((date: Date) => void) | undefined;
+    /** Optional. Handler to be called when control is losing focus. */
     onBlur?: ((event: React.FocusEvent<HTMLDivElement>) => void) | undefined;
+    /** Optional. Quarter picker mode. If set, then user can not select a particular date, but quarter of the year.
+     * 1st day of the quarter will be set as value.
+     */
     showQuarterYearPicker?: boolean | undefined;
+    /** Optional. If set, then input field will be shown in 'invalid' state */
     invalid?: boolean | undefined;
+    /** Optional. Format in which date will be shown in the input field. Defaults to 'MMMM Do, yyyy'.
+     * For quarter picker will be shown in 'YYYY, qqq' format.
+     */
     dateFormat?: string | undefined;
+    /** Optional. Validation message to be shown under the input field */
     validationMessage?: string | undefined;
+    /** Optional. Value for 'autocomplete' attribute of input field tag. */
     autoComplete?: string | undefined;
+    /** Optional. Placeholder text to be shown when no value is selected. */
     placeholder?: string | undefined;
+    /** Optional. If set, then user will be able to open year selector by clicking on the month in the dropdown. */
     yearPicker?: boolean | undefined;
+    /** Optional. How many years before current year will be available in the year selector mode. */
     yearsBeforeCurrentDate?: number | undefined;
+    /** Optional. How many years after current year will be available in the year selector mode. */
     yearsAfterCurrentDate?: number | undefined;
+    /** Optional. Margin value to be set to the dropdown container. */
     margin?: string | undefined;
+    /** Optional. Position where to show tooltip in case of closed datepicker and value overflowing the input field. */
+    overflowTooltipPosition?: "top" | "bottom" | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export default DatepickerField;

package/dist/InputFields/DatepickerFieldHeader.d.ts

@@ -1,4 +1,7 @@
-/// <reference types="react" />
+/**
+ * Import react libraries.
+ */
+import * as React from 'react';
 export interface DatepickerFieldHeaderParams {
     date: Date;
     changeYear(year: number): void;
@@ -16,4 +19,4 @@ export interface DatepickerFieldHeaderParams {
     setYearPickerMode(val: boolean): void;
     setActiveMonthPage(val: number): void;
 }
-export declare const DatepickerFieldHeader: ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, setYearPickerMode, yearPickerMode, setActiveMonthPage, }: DatepickerFieldHeaderParams) => JSX.Element;
+export declare const DatepickerFieldHeader: ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, setYearPickerMode, yearPickerMode, setActiveMonthPage, }: DatepickerFieldHeaderParams) => React.JSX.Element;

package/dist/InputFields/NumberField.d.ts

@@ -1,33 +1,62 @@
 import * as React from 'react';
 import { Size, States, Testable } from '../types';
-export type NumberFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onKeyDown' | 'onClick' | 'tabIndex' | 'size' | 'value' | 'prefix' | 'min' | 'max'> & {
+export interface NumberFieldProps extends Testable, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onKeyDown' | 'onClick' | 'tabIndex' | 'size' | 'value' | 'prefix' | 'min' | 'max'> {
+    /**
+     * Optional. The size of the number field. Can be 'Small' or 'Medium'.
+     */
     size?: Size.Small | Size.Medium;
+    /**
+     * Optional. The prefix to be displayed before the number in the field.
+     */
     prefix?: string;
+    /**
+     * Optional. The interval for incrementing and decrementing the number in the field.
+     */
     interval?: number;
+    /**
+     * Optional. The minimum value that can be entered in the field.
+     */
     minValue?: number;
+    /**
+     * Optional. The maximum value that can be entered in the field.
+     */
     maxValue?: number;
+    /**
+     * Optional. A boolean indicating whether negative numbers are allowed.
+     */
     allowNegative?: boolean;
+    /**
+     * Optional. The number of decimal places allowed in the number.
+     */
     decimalPrecision?: number;
+    /**
+     * Optional. The state of the number field. Can be 'Valid' or 'Invalid'.
+     */
     state?: States.Valid | States.Invalid;
+    /**
+     * Optional. A note to be displayed below the number field.
+     */
     note?: string;
+    /**
+     * Optional. An icon to be displayed next to the note.
+     */
     noteIcon?: React.ReactNode;
+    /**
+     * Optional. The type of the number field. Can be 'NumberField' or 'NumberInput'.
+     */
     type?: 'NumberField' | 'NumberInput';
+    /**
+     * Optional. The current value of the number field.
+     */
     value?: number;
+    /**
+     * Optional. A function to be called when the value of the number field changes.
+     */
     onChange?: (e: number) => void;
-};
-declare const NumberField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "tabIndex" | "prefix" | "onChange" | "onKeyDown" | "onClick" | "size" | "max" | "min" | "value"> & {
-    size?: Size.Small | Size.Medium | undefined;
-    prefix?: string | undefined;
-    interval?: number | undefined;
-    minValue?: number | undefined;
-    maxValue?: number | undefined;
-    allowNegative?: boolean | undefined;
-    decimalPrecision?: number | undefined;
-    state?: States.Valid | States.Invalid | undefined;
-    note?: string | undefined;
-    noteIcon?: React.ReactNode;
-    type?: "NumberField" | "NumberInput" | undefined;
-    value?: number | undefined;
-    onChange?: ((e: number) => void) | undefined;
-} & React.RefAttributes<HTMLInputElement>>;
+    /**
+     * Optional. The position of the tooltip when the number overflows. Can be 'top' or 'bottom'.
+     */
+    overflowTooltipPosition?: 'top' | 'bottom';
+}
+declare const NumberField: React.ForwardRefExoticComponent<NumberFieldProps & React.RefAttributes<HTMLInputElement>>;
 export default NumberField;

package/dist/InputFields/PasswordField.d.ts

@@ -1,31 +1,103 @@
 import * as React from 'react';
 import { Size, Testable } from '../types';
 export type PasswordFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'> & {
+    /**
+     * Required. The ID of the password field.
+     */
     id: string;
+    /**
+     * Optional. A boolean indicating whether the password field is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Optional. A function to be called when the value of the password field changes.
+     */
     onChange?: (text: string) => void;
+    /**
+     * Optional. A boolean indicating whether the password field is invalid.
+     */
     invalid?: boolean;
+    /**
+     * Optional. The current value of the password field.
+     */
     value?: string;
+    /**
+     * Optional. The validation message to be displayed when the password field is invalid.
+     */
     validationMessage?: string;
+    /**
+     * Optional. The autocomplete attribute for the password field.
+     */
     autoComplete?: string;
+    /**
+     * Optional. The placeholder text for the password field.
+     */
     placeholder?: string;
+    /**
+     * Optional. A boolean indicating whether the password field is required.
+     */
     required?: boolean;
+    /**
+     * Optional. A boolean indicating whether the password field is read-only.
+     */
     readOnly?: boolean;
+    /**
+     * Optional. The size of the password field. Can be 'Small' or 'Medium'.
+     */
     size?: Size.Small | Size.Medium;
+    /**
+     * Optional. The margin of the password field. Can be any valid CSS margin value.
+     */
     margin?: string;
 };
-declare const PasswordField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "id" | "placeholder" | "tabIndex" | "onChange" | "size" | "disabled" | "value" | "autoComplete" | "readOnly" | "required"> & {
+declare const PasswordField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "id" | "tabIndex" | "onChange" | "size" | "disabled" | "autoComplete" | "placeholder" | "readOnly" | "required"> & {
+    /**
+     * Required. The ID of the password field.
+     */
     id: string;
+    /**
+     * Optional. A boolean indicating whether the password field is disabled.
+     */
     disabled?: boolean | undefined;
+    /**
+     * Optional. A function to be called when the value of the password field changes.
+     */
     onChange?: ((text: string) => void) | undefined;
+    /**
+     * Optional. A boolean indicating whether the password field is invalid.
+     */
     invalid?: boolean | undefined;
+    /**
+     * Optional. The current value of the password field.
+     */
     value?: string | undefined;
+    /**
+     * Optional. The validation message to be displayed when the password field is invalid.
+     */
     validationMessage?: string | undefined;
+    /**
+     * Optional. The autocomplete attribute for the password field.
+     */
     autoComplete?: string | undefined;
+    /**
+     * Optional. The placeholder text for the password field.
+     */
     placeholder?: string | undefined;
+    /**
+     * Optional. A boolean indicating whether the password field is required.
+     */
     required?: boolean | undefined;
+    /**
+     * Optional. A boolean indicating whether the password field is read-only.
+     */
     readOnly?: boolean | undefined;
+    /**
+     * Optional. The size of the password field. Can be 'Small' or 'Medium'.
+     */
     size?: Size.Small | Size.Medium | undefined;
+    /**
+     * Optional. The margin of the password field. Can be any valid CSS margin value.
+     */
     margin?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export default PasswordField;

package/dist/InputFields/QuickSearch.d.ts

@@ -1,17 +1,29 @@
 import * as React from 'react';
 import { Size } from '../types';
 export type QuickSearchProps = {
+    /** Required. Id of the component. */
     id: string;
+    /** Optional. Current search term entered by the user. */
     searchTerm?: string;
+    /** Required. Handler to be called when user modified input. */
     setSearchTerm: (term: string) => void;
+    /** Required. Handler to be called when user triggers search. */
     enterSearch: (e: any) => void;
+    /** Required. Handler to be called when user clears input field. */
     removeSearch: (e: any) => void;
+    /** Optional. Placeholder text to be shown in the input field when there is no input. */
     placeholder?: string;
+    /** Optional. ARIA label to set on the input field. */
     performSearchLabel?: string;
+    /** Optional. If disabled user can not interact with the search bar. */
     disabled?: boolean;
+    /** Optional. Optional onkeydown handler to be set on the input field. */
     onKeyDown?: (e: React.KeyboardEvent) => void;
+    /** Optional. Size of the component. Defaults to 'medium'.   */
     size?: Size.Small | Size.Medium;
+    /** Optional. Margin style attribute to be set on the input field. */
     margin?: string;
+    /** Optional. If set then loading indicator will be shown on the right side of the input field. */
     loading?: boolean;
 };
 declare const QuickSearch: React.FunctionComponent<QuickSearchProps>;

package/dist/InputFields/RadioButton.d.ts

@@ -1,31 +1,55 @@
 import * as React from 'react';
 import { Size, Testable } from '../types';
 export type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {
+    /** Optional. Id of the component */
     id?: string;
+    /** Required. Current state of the component. */
     selected: boolean;
+    /** Required. Handler to be called when user selects/unselected the radio button. */
     select: (selected: boolean) => void;
+    /** Optional. Label to be shown on the right side of the radio button. */
     label?: string;
+    /** Optional. Secondary label to be shown under the main 'label' */
     additionalLabel?: string;
+    /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */
     invalid?: boolean;
+    /** Optional. If disabled, user can not interact with the component. */
     disabled?: boolean;
+    /** Optional. If set, then 'pointer-events: none' will be set on the component. */
     iconPointerEventsTransparent?: boolean;
+    /** Optional. Margin style attribute to be set on the top level tag of the component. */
     margin?: string;
-    size?: Size;
+    /** Optional. Size of the radio button, defaults to 'medium'. */
+    size?: Size.Small | Size.Medium | Size.Large;
+    /** Optional. TabIndex attribute to be set on the component. */
     tabIndexVal?: number;
+    /** Optional. Extra classname to be set on the container of the component. */
     className?: string;
 };
 declare const RadioButton: React.ForwardRefExoticComponent<Testable & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "tabIndex" | "onKeyDown" | "onClick" | "onMouseDown"> & {
+    /** Optional. Id of the component */
     id?: string | undefined;
+    /** Required. Current state of the component. */
     selected: boolean;
+    /** Required. Handler to be called when user selects/unselected the radio button. */
     select: (selected: boolean) => void;
+    /** Optional. Label to be shown on the right side of the radio button. */
     label?: string | undefined;
+    /** Optional. Secondary label to be shown under the main 'label' */
     additionalLabel?: string | undefined;
+    /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */
     invalid?: boolean | undefined;
+    /** Optional. If disabled, user can not interact with the component. */
     disabled?: boolean | undefined;
+    /** Optional. If set, then 'pointer-events: none' will be set on the component. */
     iconPointerEventsTransparent?: boolean | undefined;
+    /** Optional. Margin style attribute to be set on the top level tag of the component. */
     margin?: string | undefined;
-    size?: Size | undefined;
+    /** Optional. Size of the radio button, defaults to 'medium'. */
+    size?: Size.Small | Size.Medium | Size.Large | undefined;
+    /** Optional. TabIndex attribute to be set on the component. */
     tabIndexVal?: number | undefined;
+    /** Optional. Extra classname to be set on the container of the component. */
     className?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default RadioButton;

package/dist/InputFields/RichTextField.d.ts

@@ -29,24 +29,81 @@ export declare enum RichTextFieldFormats {
     Video = "video"
 }
 export interface RichTextFieldProps {
+    /**
+     * Optional. The ID of the rich text field.
+     */
     id?: string;
+    /**
+     * Optional. The CSS class name of the rich text field.
+     */
     className?: string;
+    /**
+     * Optional. The placeholder text to be displayed in the rich text field when it is empty.
+     */
     placeholder?: string;
+    /**
+     * Optional. A boolean indicating whether the rich text field is read-only.
+     */
     readOnly?: boolean;
+    /**
+     * Optional. A boolean indicating whether the rich text field is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Optional. A boolean indicating whether the rich text field is resizable.
+     */
     resizable?: boolean;
+    /**
+     * Optional. An object containing the modules to be used by the rich text field.
+     */
     modules?: StringMap;
+    /**
+     * Optional. An array of formats to be used by the rich text field.
+     */
     formats?: RichTextFieldFormats[];
+    /**
+     * Optional. A function to be called when the rich text field gains focus.
+     */
     onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;
+    /**
+     * Optional. A function to be called when the rich text field loses focus.
+     */
     onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;
+    /**
+     * Optional. A function to be called when a keydown event occurs in the rich text field.
+     */
     onKeyDown?: React.EventHandler<any>;
+    /**
+     * Optional. A function to be called when a keypress event occurs in the rich text field.
+     */
     onKeyPress?: React.EventHandler<any>;
+    /**
+     * Optional. A function to be called when a keyup event occurs in the rich text field.
+     */
     onKeyUp?: React.EventHandler<any>;
+    /**
+     * Required. The current value of the rich text field.
+     */
     value: any;
+    /**
+     * Required. A function to be called when the value of the rich text field changes.
+     */
     onChange: (value: any) => void;
+    /**
+     * Optional. The validation message to be displayed when the rich text field is in an error state.
+     */
     validationMessage?: string;
+    /**
+     * Optional. A note to be displayed below the rich text field.
+     */
     note?: TextFieldNote;
+    /**
+     * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.
+     */
     size?: Size.Small | Size.Medium;
+    /**
+     * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.
+     */
     state?: States.Invalid | States.Valid;
 }
 export declare const RichTextField: React.ForwardRefExoticComponent<RichTextFieldProps & React.RefAttributes<any>>;

package/dist/InputFields/SearchBar.d.ts

@@ -2,25 +2,89 @@ import React from 'react';
 import { Size } from '../types';
 import { DropdownItem } from '../Dropdown';
 export type SearchBarProps = {
+    /**
+     * Required. The ID of the search bar.
+     */
     id: string;
+    /**
+     * Optional. The current search term in the search bar.
+     */
     searchTerm?: string;
+    /**
+     * Required. A function to be called when the search term changes.
+     * It should take a string representing the new search term.
+     */
     setSearchTerm: (term: string) => void;
+    /**
+     * Required. A function to be called when the enter key is pressed in the search bar.
+     * It should take an event object as a parameter.
+     */
     enterSearch: (e: any) => void;
+    /**
+     * Required. A function to be called when the search term is removed.
+     * It should take an event object as a parameter.
+     */
     removeSearch: (e: any) => void;
+    /**
+     * Optional. The placeholder text to be displayed in the search bar when it is empty.
+     */
     placeholder?: string;
+    /**
+     * Optional. The label for the search button in the search bar.
+     */
     performSearchLabel?: string;
+    /**
+     * Optional. A boolean indicating whether the search bar is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Optional. The validation message to be displayed when the search bar is in an error state.
+     */
     validationMessage?: string;
+    /**
+     * Optional. A function to be called when a keydown event occurs in the search bar.
+     */
     onKeyDown?: (e: React.KeyboardEvent) => void;
+    /**
+     * Optional. The size of the search bar. Can be 'Small' or 'Medium'.
+     */
     size?: Size.Small | Size.Medium;
+    /**
+     * Optional. The margin of the search bar. Can be any valid CSS margin value.
+     */
     margin?: string;
+    /**
+     * Optional. A boolean indicating whether the dropdown in the search bar should be shown.
+     */
     showDropdown?: boolean;
+    /**
+     * Optional. The icon for the dropdown button in the search bar.
+     */
     dropdownButtonIcon?: React.ReactNode;
+    /**
+     * Optional. The label for the dropdown button in the search bar.
+     */
     dropdownButtonLabel?: string;
+    /**
+     * Optional. The variant of the dropdown button in the search bar. Can be 'primary', 'secondary', or 'tertiary'.
+     */
     dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Optional. A function to be called when the dropdown button in the search bar is clicked.
+     */
     dropdownButtonAction?: () => boolean | void | undefined;
+    /**
+     * Optional. An array of DropdownItem objects representing the items in the dropdown.
+     */
     searchList?: DropdownItem[];
+    /**
+     * Optional. A function to be called when an item is added to the dropdown.
+     * It should take a DropdownItem object as a parameter.
+     */
     addToSearchList?: (e: DropdownItem) => void;
+    /**
+     * Optional. A boolean indicating whether the dropdown in the search bar is scrollable.
+     */
     dropdownScrollable?: boolean;
 };
 declare const SearchBar: React.FunctionComponent<SearchBarProps>;