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

package/dist/InputFields/PasswordField.js

@@ -1,60 +1,129 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { COLORS } from '../styles';
-import { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';
-import { Z_INDEXES } from '../styles';
-import { useFocusVisibleRef } from '../common';
-import { IconButton } from '../Button';
-import { SystemIcons } from '../icons';
-var StyledPassSwitch = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: ", ";\n  right: 0;\n  position: absolute;\n"], ["\n  z-index: ", ";\n  right: 0;\n  position: absolute;\n"])), Z_INDEXES.badge);
-var PasswordRow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
-var PasswordField = React.forwardRef(function (_a, ref) {
-    var id = _a.id, disabled = _a.disabled, onChange = _a.onChange, invalid = _a.invalid, value = _a.value, validationMessage = _a.validationMessage, autoComplete = _a.autoComplete, placeholder = _a.placeholder, required = _a.required, readOnly = _a.readOnly, size = _a.size, margin = _a.margin, className = _a.className, dataTestId = _a.dataTestId, _b = _a.name, name = _b === void 0 ? 'password' : _b, rest = __rest(_a, ["id", "disabled", "onChange", "invalid", "value", "validationMessage", "autoComplete", "placeholder", "required", "readOnly", "size", "margin", "className", "dataTestId", "name"]);
-    var _c = React.useState(true), passwordHidden = _c[0], setPasswordHidden = _c[1];
-    var inputRef = useFocusVisibleRef();
-    React.useImperativeHandle(ref, function () { return inputRef.current; }, [inputRef]);
-    var handleKeyDown = function (e) {
-        if (e.keyCode === 13) {
-            setPasswordHidden(!passwordHidden);
-        }
-    };
-    var cls = "".concat(invalid ? 'invalid' : '', "  ").concat(size || '', " ").concat(className);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(InputWrapper, { disabled: disabled, readOnly: readOnly, margin: margin },
-            React.createElement(PasswordRow, null,
-                React.createElement(InputFieldStyling, __assign({ id: id, "data-testid": dataTestId, ref: inputRef, type: passwordHidden ? 'password' : 'text', name: name, value: value, className: cls, tabIndex: disabled || readOnly ? -1 : 0, autoComplete: autoComplete, activeErrorMessage: !!validationMessage, placeholder: placeholder, disabled: disabled, required: required, readOnly: readOnly, onChange: function (e) { var _a; return onChange && onChange(((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) || ''); } }, rest)),
-                React.createElement(StyledPassSwitch, { className: size ? size : '' }, !disabled && !readOnly ? (passwordHidden ? (React.createElement(IconButton, { id: "".concat(id, "_Visible"), iconColor: '#666666', variant: 'secondary', shape: 'circular', onKeyPress: handleKeyDown, action: function () { return setPasswordHidden(!passwordHidden); } },
-                    React.createElement(SystemIcons.VisibleOff, null))) : (React.createElement(IconButton, { id: "".concat(id, "_NotVisible"), iconColor: '#666666', variant: 'secondary', shape: 'circular', onKeyPress: handleKeyDown, action: function () { return setPasswordHidden(!passwordHidden); } },
-                    React.createElement(SystemIcons.VisibleOn, null)))) : null))),
-        validationMessage && (React.createElement(ErrorMessage, { className: size || '' },
-            React.createElement(SystemIcons.TechnicalWarning, { color: COLORS.critical_400 }),
-            React.createElement("span", null, validationMessage)))));
-});
-export default PasswordField;
-var templateObject_1, templateObject_2;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _excluded = ["id", "disabled", "onChange", "invalid", "value", "validationMessage", "autoComplete", "placeholder", "required", "readOnly", "size", "margin", "className", "dataTestId", "name"];
+var _templateObject, _templateObject2;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS } from '../styles';
+import { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';
+import { Z_INDEXES } from '../styles';
+import { useFocusVisibleRef } from '../common';
+import { IconButton } from '../Button';
+import { SystemIcons } from '../icons';
+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 StyledPassSwitch = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  right: 0;\n  position: absolute;\n"])), Z_INDEXES.badge);
+var PasswordRow = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
+var PasswordField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+    disabled = _ref.disabled,
+    _onChange = _ref.onChange,
+    invalid = _ref.invalid,
+    value = _ref.value,
+    validationMessage = _ref.validationMessage,
+    autoComplete = _ref.autoComplete,
+    placeholder = _ref.placeholder,
+    required = _ref.required,
+    readOnly = _ref.readOnly,
+    size = _ref.size,
+    margin = _ref.margin,
+    className = _ref.className,
+    dataTestId = _ref.dataTestId,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? 'password' : _ref$name,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _React$useState = React.useState(true),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    passwordHidden = _React$useState2[0],
+    setPasswordHidden = _React$useState2[1];
+  var inputRef = useFocusVisibleRef();
+  React.useImperativeHandle(ref, function () {
+    return inputRef.current;
+  }, [inputRef]);
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.keyCode === 13) {
+      setPasswordHidden(!passwordHidden);
+    }
+  };
+  var cls = "".concat(invalid ? 'invalid' : '', "  ").concat(size || '', " ").concat(className);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(InputWrapper, {
+      disabled: disabled,
+      readOnly: readOnly,
+      margin: margin,
+      children: /*#__PURE__*/_jsxs(PasswordRow, {
+        children: [/*#__PURE__*/_jsx(InputFieldStyling, _objectSpread({
+          id: id,
+          "data-testid": dataTestId,
+          ref: inputRef,
+          type: passwordHidden ? 'password' : 'text',
+          name: name,
+          value: value,
+          className: cls,
+          tabIndex: disabled || readOnly ? -1 : 0,
+          autoComplete: autoComplete,
+          activeErrorMessage: !!validationMessage,
+          placeholder: placeholder,
+          disabled: disabled,
+          required: required,
+          readOnly: readOnly,
+          onChange: function onChange(e) {
+            var _e$target;
+            return _onChange && _onChange((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
+          }
+        }, rest)), /*#__PURE__*/_jsx(StyledPassSwitch, {
+          className: size ? size : '',
+          children: !disabled && !readOnly ? passwordHidden ? /*#__PURE__*/_jsx(IconButton, {
+            id: "".concat(id, "_Visible"),
+            iconColor: '#666666',
+            variant: 'secondary',
+            shape: 'circular',
+            onKeyPress: handleKeyDown,
+            action: function action() {
+              return setPasswordHidden(!passwordHidden);
+            },
+            children: /*#__PURE__*/_jsx(SystemIcons.VisibleOff, {})
+          }) : /*#__PURE__*/_jsx(IconButton, {
+            id: "".concat(id, "_NotVisible"),
+            iconColor: '#666666',
+            variant: 'secondary',
+            shape: 'circular',
+            onKeyPress: handleKeyDown,
+            action: function action() {
+              return setPasswordHidden(!passwordHidden);
+            },
+            children: /*#__PURE__*/_jsx(SystemIcons.VisibleOn, {})
+          }) : null
+        })]
+      })
+    }), validationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
+      className: size || '',
+      children: [/*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
+        color: COLORS.critical_400
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    })]
+  });
+});
+PasswordField.propTypes = {
+  id: _pt.string.isRequired,
+  disabled: _pt.bool,
+  onChange: _pt.func,
+  invalid: _pt.bool,
+  value: _pt.string,
+  validationMessage: _pt.string,
+  autoComplete: _pt.string,
+  placeholder: _pt.string,
+  required: _pt.bool,
+  readOnly: _pt.bool,
+  margin: _pt.string
+};
+export default PasswordField;
+//# sourceMappingURL=PasswordField.js.map

package/dist/InputFields/QuickSearch.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from '../types';
-export declare type QuickSearchProps = {
+export type QuickSearchProps = {
     /** Required. Id of the component. */
     id: string;
     /** Optional. Current search term entered by the user. */

package/dist/InputFields/QuickSearch.js

@@ -1,92 +1,189 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import IconButton, { IconButtonStyledSecondary } from '../Button/Iconbutton';
-import { SearchIconWrapper, StyledIcon } from './styling';
-import { Size } from '../types';
-import { COLORS, LoadingIndicator } from '..';
-import { SystemIcons } from '../icons';
-import SearchBarInput from './components/SearchBarInput';
-import SearchField, { StyledSearchField } from './components/SearchField';
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n\n  ", " {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n\n  ", " {\n    pointer-events: ", ";\n  }\n"], ["\n  width: 100%;\n\n  ", " {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n\n  ", " {\n    pointer-events: ", ";\n  }\n"])), StyledSearchField, COLORS.white, COLORS.neutral_400, COLORS.primary_800, IconButtonStyledSecondary, function (props) { return (props.shouldNotInteract ? 'none' : 'auto'); });
-var QuickSearch = 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, onKeyDown = _a.onKeyDown, size = _a.size, margin = _a.margin, loading = _a.loading;
-    var searchFieldRef = React.useRef(null);
-    var searchFieldInputRef = React.useRef(null);
-    var _b = React.useState({
-        visible: false,
-    }), searchFieldVisible = _b[0], setSearchFieldVisible = _b[1];
-    var handleClickOutside = function (e) {
-        if ((searchFieldRef === null || searchFieldRef === void 0 ? void 0 : searchFieldRef.current) && !searchFieldRef.current.contains(e.target)) {
-            if ((searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && !(searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length)) {
-                setSearchFieldVisible({ visible: false });
-            }
-        }
-    };
-    var handleKeyDown = function (e) {
-        if (onKeyDown) {
-            onKeyDown(e);
-        }
-        if (e.key === 'Escape') {
-            if ((searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && !(searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length)) {
-                setSearchFieldVisible({ visible: false });
-            }
-        }
-    };
-    var handleBlur = function (e) {
-        var _a;
-        if (!searchTerm && (!e.relatedTarget || !((_a = searchFieldRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)))) {
-            setSearchFieldVisible({ visible: false });
-        }
-    };
-    var handleSearchIconAction = function (e) {
-        if (!(searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible)) {
-            setSearchFieldVisible({
-                visible: !searchFieldVisible.visible,
-                focus: !searchFieldVisible.visible && (e === null || e === void 0 ? void 0 : e.detail) !== 1,
-            });
-        }
-    };
-    // set search field visibility on search term change
-    React.useEffect(function () {
-        if (!!(searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length) && !(searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible)) {
-            setSearchFieldVisible({ visible: true, focus: false });
-        }
-    }, [searchTerm, searchFieldVisible]);
-    // register click outside handler
-    React.useEffect(function () {
-        document.addEventListener('click', handleClickOutside);
-        return function () {
-            document.removeEventListener('click', handleClickOutside);
-        };
-    }, []);
-    // focus search input on visibility change
-    React.useEffect(function () {
-        var _a;
-        if (searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) {
-            (_a = searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : searchFieldInputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ focusVisible: searchFieldVisible.focus });
-        }
-    }, [searchFieldVisible.visible, searchFieldInputRef]);
-    return (React.createElement(Wrapper, { shouldNotInteract: searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible },
-        React.createElement(SearchField, { ref: searchFieldRef, id: id, size: size, searchTerm: searchTerm, style: {
-                margin: margin,
-            }, onBlur: handleBlur, className: (searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) ? 'expanded' : '' },
-            (searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && (React.createElement(SearchBarInput, { placeholder: disabled ? '' : placeholder, id: id, ref: searchFieldInputRef, disabled: disabled, onKeyDown: handleKeyDown, size: size, setSearchTerm: function (term) { return setSearchTerm(term); }, searchTerm: searchTerm, enterSearch: enterSearch, focusParentRefs: [searchFieldRef] })),
-            React.createElement(SearchIconWrapper, { className: size ? size : '', role: "button", "aria-label": performSearchLabel },
-                React.createElement(IconButton, { id: "".concat(id, "_Searchbutton"), dataTestId: "".concat(id, "_Searchbutton"), variant: "secondary", shape: "circular", tabIndex: (searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) ? -1 : 0, action: handleSearchIconAction },
-                    React.createElement(SystemIcons.Search, { size: "24px", color: disabled ? COLORS.neutral_300 : COLORS.neutral_600 }))),
-            React.createElement(StyledIcon, { className: size ? size : '', role: "button", hidden: !searchTerm || !(searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) },
-                React.createElement(IconButton, { id: "".concat(id, "_Clearicon"), dataTestId: "".concat(id, "_Clearicon"), variant: "secondary", shape: "circular", action: function (e) {
-                        var _a;
-                        removeSearch(e);
-                        (_a = searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : searchFieldInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                    } },
-                    React.createElement(SystemIcons.Clear, { size: "24px", color: disabled ? COLORS.neutral_300 : COLORS.neutral_600 }))),
-            loading && (searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && (React.createElement(StyledIcon, { className: size ? size : '' },
-                React.createElement(LoadingIndicator, { size: Size.Small, color: COLORS.neutral_600 }))))));
-};
-export default QuickSearch;
-var templateObject_1;
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject;
+import * as React from 'react';
+import styled from 'styled-components';
+import IconButton, { IconButtonStyledSecondary } from '../Button/Iconbutton';
+import { SearchIconWrapper, StyledIcon } from './styling';
+import { Size } from '../types';
+import { COLORS, LoadingIndicator } from '..';
+import { SystemIcons } from '../icons';
+import SearchBarInput from './components/SearchBarInput';
+import SearchField, { StyledSearchField } from './components/SearchField';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n\n  ", " {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n\n  ", " {\n    pointer-events: ", ";\n  }\n"])), StyledSearchField, COLORS.white, COLORS.neutral_400, COLORS.primary_800, IconButtonStyledSecondary, function (props) {
+  return props.shouldNotInteract ? 'none' : 'auto';
+});
+var QuickSearch = function QuickSearch(_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,
+    onKeyDown = _ref.onKeyDown,
+    size = _ref.size,
+    margin = _ref.margin,
+    loading = _ref.loading;
+  var searchFieldRef = React.useRef(null);
+  var searchFieldInputRef = React.useRef(null);
+  var _React$useState = React.useState({
+      visible: false
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    searchFieldVisible = _React$useState2[0],
+    setSearchFieldVisible = _React$useState2[1];
+  var handleClickOutside = function handleClickOutside(e) {
+    if (searchFieldRef !== null && searchFieldRef !== void 0 && searchFieldRef.current && !searchFieldRef.current.contains(e.target)) {
+      if (searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible && !(searchTerm !== null && searchTerm !== void 0 && searchTerm.length)) {
+        setSearchFieldVisible({
+          visible: false
+        });
+      }
+    }
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+    if (e.key === 'Escape') {
+      if (searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible && !(searchTerm !== null && searchTerm !== void 0 && searchTerm.length)) {
+        setSearchFieldVisible({
+          visible: false
+        });
+      }
+    }
+  };
+  var handleBlur = function handleBlur(e) {
+    var _searchFieldRef$curre;
+    if (!searchTerm && (!e.relatedTarget || !((_searchFieldRef$curre = searchFieldRef.current) !== null && _searchFieldRef$curre !== void 0 && _searchFieldRef$curre.contains(e.relatedTarget)))) {
+      setSearchFieldVisible({
+        visible: false
+      });
+    }
+  };
+  var handleSearchIconAction = function handleSearchIconAction(e) {
+    if (!(searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible)) {
+      setSearchFieldVisible({
+        visible: !searchFieldVisible.visible,
+        focus: !searchFieldVisible.visible && (e === null || e === void 0 ? void 0 : e.detail) !== 1
+      });
+    }
+  };
+
+  // set search field visibility on search term change
+  React.useEffect(function () {
+    if (!!(searchTerm !== null && searchTerm !== void 0 && searchTerm.length) && !(searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible)) {
+      setSearchFieldVisible({
+        visible: true,
+        focus: false
+      });
+    }
+  }, [searchTerm, searchFieldVisible]);
+
+  // register click outside handler
+  React.useEffect(function () {
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
+  // focus search input on visibility change
+  React.useEffect(function () {
+    if (searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible) {
+      var _searchFieldInputRef$;
+      searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : (_searchFieldInputRef$ = searchFieldInputRef.current) === null || _searchFieldInputRef$ === void 0 ? void 0 : _searchFieldInputRef$.focus({
+        focusVisible: searchFieldVisible.focus
+      });
+    }
+  }, [searchFieldVisible.visible, searchFieldInputRef]);
+  return /*#__PURE__*/_jsx(Wrapper, {
+    shouldNotInteract: searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible,
+    children: /*#__PURE__*/_jsxs(SearchField, {
+      ref: searchFieldRef,
+      id: id,
+      size: size,
+      searchTerm: searchTerm,
+      style: {
+        margin: margin
+      },
+      onBlur: handleBlur,
+      className: searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible ? 'expanded' : '',
+      children: [(searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && /*#__PURE__*/_jsx(SearchBarInput, {
+        placeholder: disabled ? '' : placeholder,
+        id: id,
+        ref: searchFieldInputRef,
+        disabled: disabled,
+        onKeyDown: handleKeyDown,
+        size: size,
+        setSearchTerm: function setSearchTerm(term) {
+          return _setSearchTerm(term);
+        },
+        searchTerm: searchTerm,
+        enterSearch: enterSearch,
+        focusParentRefs: [searchFieldRef]
+      }), /*#__PURE__*/_jsx(SearchIconWrapper, {
+        className: size ? size : '',
+        role: "button",
+        "aria-label": performSearchLabel,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          id: "".concat(id, "_Searchbutton"),
+          dataTestId: "".concat(id, "_Searchbutton"),
+          variant: "secondary",
+          shape: "circular",
+          tabIndex: searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible ? -1 : 0,
+          action: handleSearchIconAction,
+          children: /*#__PURE__*/_jsx(SystemIcons.Search, {
+            size: "24px",
+            color: disabled ? COLORS.neutral_300 : COLORS.neutral_600
+          })
+        })
+      }), /*#__PURE__*/_jsx(StyledIcon, {
+        className: size ? size : '',
+        role: "button",
+        hidden: !searchTerm || !(searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible),
+        children: /*#__PURE__*/_jsx(IconButton, {
+          id: "".concat(id, "_Clearicon"),
+          dataTestId: "".concat(id, "_Clearicon"),
+          variant: "secondary",
+          shape: "circular",
+          action: function action(e) {
+            var _searchFieldInputRef$2;
+            removeSearch(e);
+            searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : (_searchFieldInputRef$2 = searchFieldInputRef.current) === null || _searchFieldInputRef$2 === void 0 ? void 0 : _searchFieldInputRef$2.focus();
+          },
+          children: /*#__PURE__*/_jsx(SystemIcons.Clear, {
+            size: "24px",
+            color: disabled ? COLORS.neutral_300 : COLORS.neutral_600
+          })
+        })
+      }), loading && (searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && /*#__PURE__*/_jsx(StyledIcon, {
+        className: size ? size : '',
+        children: /*#__PURE__*/_jsx(LoadingIndicator, {
+          size: Size.Small,
+          color: COLORS.neutral_600
+        })
+      })]
+    })
+  });
+};
+QuickSearch.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,
+  onKeyDown: _pt.func,
+  margin: _pt.string,
+  loading: _pt.bool
+};
+export default QuickSearch;
+//# sourceMappingURL=QuickSearch.js.map

package/dist/InputFields/RadioButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size, Testable } from '../types';
-export declare type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {
+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. */