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

package/dist/InputFields/SearchBar.d.ts

@@ -1,26 +1,90 @@
 import React from 'react';
 import { Size } from '../types';
 import { DropdownItem } from '../Dropdown';
-export type SearchBarProps = {
+export declare 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>;

package/dist/InputFields/SearchBar.js

@@ -1,187 +1,63 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _templateObject;
-import React from 'react';
-import { COLORS } from '../styles/index';
-import { SystemIcons } from '../icons';
-import { ErrorMessage, InputWrapper, SearchIconWrapper } from './styling';
-import { IconButton } from '../Button';
-import SearchBarInput from './components/SearchBarInput';
-import SearchField from './components/SearchField';
-import styled from 'styled-components';
-import { DropdownContent } from '../Dropdown';
-import { useClickOutsideRef } from '../common';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-var ClearIconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"])));
-var SearchBar = function SearchBar(_ref) {
-  var id = _ref.id,
-    searchTerm = _ref.searchTerm,
-    _setSearchTerm = _ref.setSearchTerm,
-    enterSearch = _ref.enterSearch,
-    removeSearch = _ref.removeSearch,
-    placeholder = _ref.placeholder,
-    performSearchLabel = _ref.performSearchLabel,
-    disabled = _ref.disabled,
-    validationMessage = _ref.validationMessage,
-    onKeyDown = _ref.onKeyDown,
-    size = _ref.size,
-    margin = _ref.margin,
-    showDropdown = _ref.showDropdown,
-    dropdownButtonIcon = _ref.dropdownButtonIcon,
-    dropdownButtonLabel = _ref.dropdownButtonLabel,
-    dropdownButtonVariant = _ref.dropdownButtonVariant,
-    dropdownButtonAction = _ref.dropdownButtonAction,
-    _ref$searchList = _ref.searchList,
-    searchList = _ref$searchList === void 0 ? [] : _ref$searchList,
-    addToSearchList = _ref.addToSearchList,
-    dropdownScrollable = _ref.dropdownScrollable;
-  var containerRef = React.useRef(null);
-  var topLevelRef = React.useRef(null);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isOpen = _React$useState2[0],
-    setIsOpen = _React$useState2[1];
-  var dropdownRef = useClickOutsideRef(function () {
-    return setIsOpen(false);
-  }, [containerRef, topLevelRef]);
-  var isPressingEnter = function isPressingEnter(e) {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      e.stopPropagation();
-      return true;
-    }
-    return false;
-  };
-  var enteredSearchTerm = function enteredSearchTerm(e) {
-    addToSearchList && addToSearchList({
-      value: e.target.value
-    });
-    enterSearch(e);
-  };
-  var dropdownAction = function dropdownAction() {
-    if (dropdownButtonAction) dropdownButtonAction();
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(InputWrapper, {
-      disabled: disabled,
-      ref: topLevelRef,
-      margin: margin,
-      children: [/*#__PURE__*/_jsxs(SearchField, {
-        id: 'id',
-        size: size,
-        ref: containerRef,
-        searchTerm: searchTerm,
-        disabled: disabled,
-        validationMessage: validationMessage,
-        children: [/*#__PURE__*/_jsx(SearchBarInput, {
-          placeholder: disabled ? '' : placeholder,
-          id: id,
-          size: size,
-          disabled: disabled,
-          setSearchTerm: function setSearchTerm(term) {
-            return _setSearchTerm(term);
-          },
-          searchTerm: searchTerm,
-          onKeyDown: onKeyDown,
-          enterSearch: enteredSearchTerm,
-          focusParentRefs: [containerRef],
-          onClick: function onClick() {
-            return setIsOpen(!isOpen);
-          },
-          ref: dropdownRef
-        }), /*#__PURE__*/_jsx(SearchIconWrapper, {
-          className: size ? size : '',
-          "aria-label": performSearchLabel,
-          children: /*#__PURE__*/_jsx(IconButton, {
-            id: "".concat(id, "_Search"),
-            variant: "secondary",
-            shape: "circular",
-            action: enterSearch,
-            disabled: disabled,
-            onKeyPress: function onKeyPress(e) {
-              return isPressingEnter(e) ? enterSearch(e) : null;
-            },
-            children: /*#__PURE__*/_jsx(SystemIcons.Search, {
-              size: "24px"
-            })
-          })
-        }), /*#__PURE__*/_jsx(ClearIconWrapper, {
-          className: (size ? size : '').concat(!searchTerm ? ' hidden' : ''),
-          children: /*#__PURE__*/_jsx(IconButton, {
-            id: "".concat(id, "_Clear"),
-            variant: "secondary",
-            shape: "circular",
-            action: removeSearch,
-            disabled: disabled,
-            onKeyPress: function onKeyPress(e) {
-              return isPressingEnter(e) ? removeSearch(e) : null;
-            },
-            children: /*#__PURE__*/_jsx(SystemIcons.Clear, {
-              size: "24px"
-            })
-          })
-        })]
-      }), showDropdown && /*#__PURE__*/_jsx(DropdownContent, {
-        id: 'search',
-        containerRef: containerRef,
-        size: size,
-        isButton: false,
-        ariaRolesType: "input",
-        customizationProps: {
-          items: searchList,
-          action: dropdownAction,
-          actionLabel: dropdownButtonLabel,
-          actionIcon: dropdownButtonIcon,
-          actionVariant: dropdownButtonVariant,
-          onValueUpdate: function onValueUpdate(e) {},
-          scrollable: dropdownScrollable,
-          pinTopItem: true
-        },
-        isOpen: isOpen,
-        setIsOpen: setIsOpen,
-        filter: '',
-        selectedValues: searchTerm ? [searchTerm] : [],
-        setSelectedValues: function setSelectedValues(e) {
-          return _setSearchTerm(e[0]);
-        },
-        messageOnNoResults: '',
-        focused: null,
-        setFocused: function setFocused() {}
-      })]
-    }), validationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
-      className: size || '',
-      children: [/*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
-        color: COLORS.critical_400,
-        className: size || ''
-      }), /*#__PURE__*/_jsx("span", {
-        children: validationMessage
-      })]
-    })]
-  });
-};
-SearchBar.propTypes = {
-  id: _pt.string.isRequired,
-  searchTerm: _pt.string,
-  setSearchTerm: _pt.func.isRequired,
-  enterSearch: _pt.func.isRequired,
-  removeSearch: _pt.func.isRequired,
-  placeholder: _pt.string,
-  performSearchLabel: _pt.string,
-  disabled: _pt.bool,
-  validationMessage: _pt.string,
-  onKeyDown: _pt.func,
-  margin: _pt.string,
-  showDropdown: _pt.bool,
-  dropdownButtonIcon: _pt.node,
-  dropdownButtonLabel: _pt.string,
-  dropdownButtonVariant: _pt.oneOf(['primary', 'secondary', 'tertiary']),
-  dropdownButtonAction: _pt.func,
-  searchList: _pt.array,
-  addToSearchList: _pt.func,
-  dropdownScrollable: _pt.bool
-};
-export default SearchBar;
-//# sourceMappingURL=SearchBar.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import { COLORS } from '../styles/index';
+import { SystemIcons } from '../icons';
+import { ErrorMessage, InputWrapper, SearchIconWrapper } from './styling';
+import { IconButton } from '../Button';
+import SearchBarInput from './components/SearchBarInput';
+import SearchField from './components/SearchField';
+import styled from 'styled-components';
+import { DropdownContent } from '../Dropdown';
+import { useClickOutsideRef } from '../common';
+var ClearIconWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"])));
+var SearchBar = function (_a) {
+    var id = _a.id, searchTerm = _a.searchTerm, setSearchTerm = _a.setSearchTerm, enterSearch = _a.enterSearch, removeSearch = _a.removeSearch, placeholder = _a.placeholder, performSearchLabel = _a.performSearchLabel, disabled = _a.disabled, validationMessage = _a.validationMessage, onKeyDown = _a.onKeyDown, size = _a.size, margin = _a.margin, showDropdown = _a.showDropdown, dropdownButtonIcon = _a.dropdownButtonIcon, dropdownButtonLabel = _a.dropdownButtonLabel, dropdownButtonVariant = _a.dropdownButtonVariant, dropdownButtonAction = _a.dropdownButtonAction, _b = _a.searchList, searchList = _b === void 0 ? [] : _b, addToSearchList = _a.addToSearchList, dropdownScrollable = _a.dropdownScrollable;
+    var containerRef = React.useRef(null);
+    var topLevelRef = React.useRef(null);
+    var _c = React.useState(false), isOpen = _c[0], setIsOpen = _c[1];
+    var dropdownRef = useClickOutsideRef(function () { return setIsOpen(false); }, [containerRef, topLevelRef]);
+    var isPressingEnter = function (e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            return true;
+        }
+        return false;
+    };
+    var enteredSearchTerm = function (e) {
+        addToSearchList && addToSearchList({ value: e.target.value });
+        enterSearch(e);
+    };
+    var dropdownAction = function () {
+        if (dropdownButtonAction)
+            dropdownButtonAction();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InputWrapper, { disabled: disabled, ref: topLevelRef, margin: margin },
+            React.createElement(SearchField, { id: 'id', size: size, ref: containerRef, searchTerm: searchTerm, disabled: disabled, validationMessage: validationMessage },
+                React.createElement(SearchBarInput, { placeholder: disabled ? '' : placeholder, id: id, size: size, disabled: disabled, setSearchTerm: function (term) { return setSearchTerm(term); }, searchTerm: searchTerm, onKeyDown: onKeyDown, enterSearch: enteredSearchTerm, focusParentRefs: [containerRef], onClick: function () { return setIsOpen(!isOpen); }, ref: dropdownRef }),
+                React.createElement(SearchIconWrapper, { className: size ? size : '', "aria-label": performSearchLabel },
+                    React.createElement(IconButton, { id: "".concat(id, "_Search"), variant: "secondary", shape: "circular", action: enterSearch, disabled: disabled, onKeyPress: function (e) { return (isPressingEnter(e) ? enterSearch(e) : null); } },
+                        React.createElement(SystemIcons.Search, { size: "24px" }))),
+                React.createElement(ClearIconWrapper, { className: (size ? size : '').concat(!searchTerm ? ' hidden' : '') },
+                    React.createElement(IconButton, { id: "".concat(id, "_Clear"), variant: "secondary", shape: "circular", action: removeSearch, disabled: disabled, onKeyPress: function (e) { return (isPressingEnter(e) ? removeSearch(e) : null); } },
+                        React.createElement(SystemIcons.Clear, { size: "24px" })))),
+            showDropdown && React.createElement(DropdownContent, { id: 'search', containerRef: containerRef, size: size, isButton: false, ariaRolesType: "input", customizationProps: {
+                    items: searchList,
+                    action: dropdownAction,
+                    actionLabel: dropdownButtonLabel,
+                    actionIcon: dropdownButtonIcon,
+                    actionVariant: dropdownButtonVariant,
+                    onValueUpdate: function (e) { },
+                    scrollable: dropdownScrollable,
+                    pinTopItem: true
+                }, isOpen: isOpen, setIsOpen: setIsOpen, filter: '', selectedValues: searchTerm ? [searchTerm] : [], setSelectedValues: function (e) { return setSearchTerm(e[0]); }, messageOnNoResults: '', focused: null, setFocused: function () { } })),
+        validationMessage && (React.createElement(ErrorMessage, { className: size || '' },
+            React.createElement(SystemIcons.TechnicalWarning, { color: COLORS.critical_400, className: size || '' }),
+            React.createElement("span", null, validationMessage)))));
+};
+export default SearchBar;
+var templateObject_1;

package/dist/InputFields/TextField.d.ts

@@ -1,42 +1,154 @@
 import * as React from 'react';
 import { Size, States, Testable } from '../types';
 import { TextFieldNote } from './types';
-export type TextFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'> & {
+export declare type TextFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'> & {
+    /**
+       * Optional. The ID of the text field.
+       */
     id?: string;
+    /**
+      * Optional. A boolean indicating whether the text field is disabled.
+      */
     disabled?: boolean;
+    /**
+      * Optional. A boolean indicating whether the text field is read-only.
+      */
     readOnly?: boolean;
+    /**
+      * Optional. A function to be called when the text in the text field changes.
+      * It should take a string representing the new text.
+      */
     onChange?: (text: string) => void;
+    /**
+      * Optional. The current value of the text field.
+      */
     value?: string;
+    /**
+      * Optional. The validation message to be displayed when the text field is in an error state.
+      */
     validationMessage?: string;
+    /**
+      * Optional. The type of the text field. Can be any valid HTML input type.
+      */
     type?: string;
+    /**
+      * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.
+      */
     state?: States.Invalid | States.Valid;
+    /**
+      * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.
+      */
     autoComplete?: string;
+    /**
+      * Optional. The placeholder text to be displayed in the text field when it is empty.
+      */
     placeholder?: string;
+    /**
+      * Optional. A boolean indicating whether the text field is required.
+      */
     required?: boolean;
+    /**
+      * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.
+      */
     pattern?: string;
+    /**
+      * Optional. The maximum length of the text that can be entered in the text field.
+      */
     maxLength?: number;
+    /**
+      * Optional. A boolean indicating whether the text field should be displayed without a border.
+      */
     withoutBorder?: boolean;
+    /**
+      * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.
+      */
+    overflowTooltipPosition?: 'top' | 'bottom';
+    /**
+      * Optional. The size of the text field. Can be 'Small' or 'Medium'.
+      */
     size?: Size.Small | Size.Medium;
+    /**
+      * Optional. The margin of the text field. Can be any valid CSS margin value.
+      */
     margin?: string;
+    /**
+      * Optional. A note to be displayed below the text field.
+      */
     note?: TextFieldNote;
 };
-declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "pattern" | "type" | "id" | "onChange" | "size" | "disabled" | "value" | "autoComplete" | "maxLength" | "readOnly"> & {
+declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "pattern" | "type" | "id" | "onChange" | "size" | "disabled" | "autoComplete" | "maxLength" | "readOnly"> & {
+    /**
+       * Optional. The ID of the text field.
+       */
     id?: string | undefined;
+    /**
+      * Optional. A boolean indicating whether the text field is disabled.
+      */
     disabled?: boolean | undefined;
+    /**
+      * Optional. A boolean indicating whether the text field is read-only.
+      */
     readOnly?: boolean | undefined;
+    /**
+      * Optional. A function to be called when the text in the text field changes.
+      * It should take a string representing the new text.
+      */
     onChange?: ((text: string) => void) | undefined;
+    /**
+      * Optional. The current value of the text field.
+      */
     value?: string | undefined;
+    /**
+      * Optional. The validation message to be displayed when the text field is in an error state.
+      */
     validationMessage?: string | undefined;
+    /**
+      * Optional. The type of the text field. Can be any valid HTML input type.
+      */
     type?: string | undefined;
+    /**
+      * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.
+      */
     state?: States.Valid | States.Invalid | undefined;
+    /**
+      * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.
+      */
     autoComplete?: string | undefined;
+    /**
+      * Optional. The placeholder text to be displayed in the text field when it is empty.
+      */
     placeholder?: string | undefined;
+    /**
+      * Optional. A boolean indicating whether the text field is required.
+      */
     required?: boolean | undefined;
+    /**
+      * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.
+      */
     pattern?: string | undefined;
+    /**
+      * Optional. The maximum length of the text that can be entered in the text field.
+      */
     maxLength?: number | undefined;
+    /**
+      * Optional. A boolean indicating whether the text field should be displayed without a border.
+      */
     withoutBorder?: boolean | undefined;
+    /**
+      * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.
+      */
+    overflowTooltipPosition?: "top" | "bottom" | undefined;
+    /**
+      * Optional. The size of the text field. Can be 'Small' or 'Medium'.
+      */
     size?: Size.Small | Size.Medium | undefined;
+    /**
+      * Optional. The margin of the text field. Can be any valid CSS margin value.
+      */
     margin?: string | undefined;
+    /**
+      * Optional. A note to be displayed below the text field.
+      */
     note?: TextFieldNote | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export default TextField;