@laerdal/life-react-components 1.4.0 → 1.4.1-dev.11

package/dist/esm/InputFields/PasswordField.js

@@ -1,136 +1,110 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+
+var _templateObject, _templateObject2;
+
 import * as React from 'react';
 import styled from 'styled-components';
-import { BREAKPOINTS } from '../styles';
 import { InputFieldStyling, InputWrapper } from './styling';
-const StyledPassSwitch = styled.div`
-  float: right;
-  margin-left: -40px;
-  margin-top: 8px;
-  position: relative;
-  z-index: 1;
-  height: 30px;
-  width: 30px;
-
-  ${BREAKPOINTS.MEDIUM} {
-    margin-top: 12px;
-  }
-
-  &.small {
-    margin-top: 8px;
-  }
+import { Z_INDEXES } from '../styles/z-indexes';
+import { useFocusVisibleRef } from '../common/FocusVisible';
+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"])));
 
-  &.medium {
-    margin-top: 12px;
-  }
+var PasswordField = function PasswordField(_ref) {
+  var id = _ref.id,
+      disabled = _ref.disabled,
+      locked = _ref.locked,
+      _onChange = _ref.onChange,
+      hasError = _ref.hasError,
+      value = _ref.value,
+      validationMessage = _ref.validationMessage,
+      autoComplete = _ref.autoComplete,
+      placeholder = _ref.placeholder,
+      required = _ref.required,
+      readOnly = _ref.readOnly,
+      size = _ref.size,
+      margin = _ref.margin;
 
-  svg {
-    cursor: pointer;
-  }
-  div {
-    &:focus {
-      outline: none;
-      svg {
-        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
-        border-radius: 4px;
-      }
-    }
-  }
-`;
-const PasswordRow = styled.div`
-  display: flex;
-  flex-direction: row;
-`;
+  var _React$useState = React.useState(true),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      passwordHidden = _React$useState2[0],
+      setPasswordHidden = _React$useState2[1];
 
-const PasswordField = ({
-  id,
-  disabled,
-  locked,
-  onChange,
-  hasError,
-  value,
-  validationMessage,
-  autoComplete,
-  placeholder,
-  required,
-  readOnly,
-  size,
-  margin
-}) => {
-  const [passwordHidden, setPasswordHidden] = React.useState(true);
-  const inputRef = React.useRef(null);
-  const [tabbedHere, setTabbedHere] = React.useState(false);
+  var inputRef = useFocusVisibleRef();
 
-  const handleKeyDown = e => {
+  var handleKeyDown = function handleKeyDown(e) {
     if (e.keyCode === 13) {
       setPasswordHidden(!passwordHidden);
     }
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputWrapper, {
-    disabled: disabled,
-    locked: locked,
-    margin: margin,
-    tabIndex: disabled ? -1 : 0,
-    onFocus: e => {
-      if (!e?.target?.id.includes(id) && !disabled && !locked) {
-        setTabbedHere(true);
-        inputRef.current.focus();
-      }
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'block'
-    }
-  }, /*#__PURE__*/React.createElement(PasswordRow, null, /*#__PURE__*/React.createElement(InputFieldStyling, {
-    id: id,
-    ref: inputRef,
-    type: passwordHidden ? 'password' : 'text',
-    name: "password",
-    value: value,
-    className: (hasError ? 'error' : '').concat(size ? size : ''),
-    tabIndex: -1,
-    autoComplete: autoComplete,
-    placeholder: placeholder,
-    disabled: disabled,
-    locked: locked,
-    required: required,
-    readOnly: readOnly,
-    onChange: e => onChange && onChange(e?.target?.value || ''),
-    tabbedHere: tabbedHere,
-    onBlur: () => setTabbedHere(false)
-  }), /*#__PURE__*/React.createElement(StyledPassSwitch, {
-    className: size ? size : ''
-  }, !disabled && !locked ? passwordHidden ? /*#__PURE__*/React.createElement("div", {
-    id: `${id}_Visible`,
-    tabIndex: 0,
-    onKeyDown: handleKeyDown,
-    onClick: () => setPasswordHidden(!passwordHidden)
-  }, /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 25 25",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z",
-    fill: "#666666"
-  }))) : /*#__PURE__*/React.createElement("div", {
-    id: `${id}_NotVisible`,
-    tabIndex: 0,
-    onKeyDown: handleKeyDown,
-    onClick: () => setPasswordHidden(!passwordHidden)
-  }, /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 25 25",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z",
-    fill: "#666666"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z",
-    fill: "#666666"
-  }))) : null)))), validationMessage && /*#__PURE__*/React.createElement("span", {
-    className: "error-msg"
-  }, validationMessage));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(InputWrapper, {
+      disabled: disabled,
+      locked: locked,
+      margin: margin,
+      children: /*#__PURE__*/_jsx("div", {
+        style: {
+          display: 'block'
+        },
+        children: /*#__PURE__*/_jsxs(PasswordRow, {
+          children: [/*#__PURE__*/_jsx(InputFieldStyling, {
+            id: id,
+            ref: inputRef,
+            type: passwordHidden ? 'password' : 'text',
+            name: "password",
+            value: value,
+            className: (hasError ? 'error' : '').concat(size ? size : ''),
+            tabIndex: disabled || locked ? -1 : 0,
+            autoComplete: autoComplete,
+            placeholder: placeholder,
+            disabled: disabled,
+            locked: locked,
+            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) || '');
+            }
+          }), /*#__PURE__*/_jsx(StyledPassSwitch, {
+            className: size ? size : '',
+            children: !disabled && !locked ? 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__*/_jsx("span", {
+      className: "error-msg",
+      children: validationMessage
+    })]
+  });
 };
 
 PasswordField.propTypes = {

package/dist/esm/InputFields/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["React","styled","BREAKPOINTS","InputFieldStyling","InputWrapper","StyledPassSwitch","div","MEDIUM","PasswordRow","PasswordField","id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","passwordHidden","setPasswordHidden","useState","inputRef","useRef","tabbedHere","setTabbedHere","handleKeyDown","e","keyCode","target","includes","current","focus","display","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { Size} from '../types';\nimport { InputFieldStyling, InputWrapper } from './styling';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  float: right;\n  margin-left: -40px;\n  margin-top: 8px;\n  position: relative;\n  z-index: 1;\n  height: 30px;\n  width: 30px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 12px;\n  }\n\n  &.small {\n    margin-top: 8px;\n  }\n\n  &.medium {\n    margin-top: 12px;\n  }\n\n  svg {\n    cursor: pointer;\n  }\n  div {\n    &:focus {\n      outline: none;\n      svg {\n        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        border-radius: 4px;\n      }\n    }\n  }\n`;\n\nconst PasswordRow = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        locked={locked}\n        margin={margin}\n        tabIndex={disabled ? -1 : 0}\n        onFocus={(e: any) => {\n          if (!e?.target?.id.includes(id) && !disabled && !locked) {\n            setTabbedHere(true);\n            inputRef.current.focus();\n          }\n        }}>\n        <div style={{ display: 'block' }}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(hasError ? 'error' : '').concat(size ? size : '')}\n              tabIndex={-1}\n              autoComplete={autoComplete}\n              placeholder={placeholder}\n              disabled={disabled}\n              locked={locked}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              tabbedHere={tabbedHere}\n              onBlur={() => setTabbedHere(false)}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !locked ? (\n                passwordHidden ? (\n                  <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n                        fill=\"#666666\"></path>\n                    </svg>\n                  </div>\n                ) : (\n                  <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n                        fill=\"#666666\"\n                      />\n                      <path\n                        d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n                        fill=\"#666666\"\n                      />\n                    </svg>\n                  </div>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}
+{"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["React","styled","InputFieldStyling","InputWrapper","Z_INDEXES","useFocusVisibleRef","IconButton","SystemIcons","StyledPassSwitch","div","badge","PasswordRow","PasswordField","id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","useState","passwordHidden","setPasswordHidden","inputRef","handleKeyDown","e","keyCode","display","concat","target"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS} from '../styles';\nimport {Size} from '../types';\nimport {InputFieldStyling, InputWrapper} from './styling';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useFocusVisibleRef} from '../common/FocusVisible';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = ({\n                         id,\n                         disabled,\n                         locked,\n                         onChange,\n                         hasError,\n                         value,\n                         validationMessage,\n                         autoComplete,\n                         placeholder,\n                         required,\n                         readOnly,\n                         size,\n                         margin\n                       }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        locked={locked}\n        margin={margin}>\n        <div style={{display: 'block'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(hasError ? 'error' : '').concat(size ? size : '')}\n              tabIndex={disabled || locked ? -1 : 0}\n              autoComplete={autoComplete}\n              placeholder={placeholder}\n              disabled={disabled}\n              locked={locked}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !locked ? (\n                passwordHidden ? (\n                  <IconButton id={`${id}_Visible`}\n                              iconColor={'#666666'}\n                              variant={'secondary'}\n                              shape={'circular'}\n                              onKeyPress={handleKeyDown}\n                              action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff/>\n                  </IconButton>\n                ) : (\n                  <IconButton id={`${id}_NotVisible`}\n                              iconColor={'#666666'}\n                              variant={'secondary'}\n                              shape={'circular'}\n                              onKeyPress={handleKeyDown}\n                              action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn/>\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}

package/dist/esm/InputFields/QuickSearch.js

@@ -1,4 +1,9 @@
+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 from '../Button/Iconbutton';
@@ -8,157 +13,148 @@ import { COLORS, LoadingIndicator } from '..';
 import { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';
 import SearchBarInput from './components/SearchBarInput';
 import { StyledSearchField } from './components/SearchField';
-const QuickSearchField = styled(StyledSearchField)`
-  ${props => props.margin ? `margin: ${props.margin};` : ''}
-  -webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;
-  transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;
-
-  background-color: transparent;
-  &.small {
-    width: 48px;
-  }
-
-  &.medium {
-    width: 56px;
-  }
-  
-  &.expanded{
-    width: 100%;
-    background-color: ${COLORS.white};
-  }
-
-  input {
-    ::placeholder {
-      font-style: italic;
-      color: ${COLORS.neutral_600};
-    }
-  }
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var QuickSearchField = styled(StyledSearchField)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  -webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n  transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n  background-color: transparent;\n  &.small {\n    width: 48px;\n  }\n\n  &.medium {\n    width: 56px;\n  }\n  \n  &.expanded{\n    width: 100%;\n    background-color: ", ";\n  }\n\n  input {\n    ::placeholder {\n      font-style: italic;\n      color: ", ";\n    }\n  }\n\n  box-shadow: ", ";\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), function (props) {
+  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+}, COLORS.white, COLORS.neutral_600, function (props) {
+  return props.expanded ? "inset 0px 0px 0px 2px ".concat(COLORS.primary_800) : 'none !important';
+}, function (props) {
+  return props.expanded ? "inset 0px 0px 0px 2px ".concat(COLORS.primary_700) : 'none !important';
+});
 
-  box-shadow: ${props => props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_800}` : 'none !important'};
+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);
 
-  &:hover {
-    box-shadow: ${props => props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_700}` : 'none !important'};
-  }
-`;
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      searchFieldVisible = _React$useState2[0],
+      setSearchFieldVisible = _React$useState2[1];
 
-const QuickSearch = ({
-  id,
-  searchTerm,
-  setSearchTerm,
-  enterSearch,
-  removeSearch,
-  placeholder,
-  performSearchLabel,
-  disabled,
-  onKeyDown,
-  size,
-  margin,
-  loading
-}) => {
-  const searchFieldRef = React.useRef(null);
-  const searchFieldInputRef = React.useRef(null);
-  const [searchFieldVisible, setSearchFieldVisible] = React.useState(false);
-  const [tabbedHere, setTabbedHere] = React.useState(false);
-
-  const handleClickOutside = e => {
-    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {
-      if (searchFieldVisible && !searchTerm?.length) {
+  var handleClickOutside = function handleClickOutside(e) {
+    if (searchFieldRef !== null && searchFieldRef !== void 0 && searchFieldRef.current && !searchFieldRef.current.contains(e.target)) {
+      if (searchFieldVisible && !(searchTerm !== null && searchTerm !== void 0 && searchTerm.length)) {
         setSearchFieldVisible(false);
       }
     }
   };
 
-  React.useEffect(() => {
-    if (searchTerm?.length) {
+  React.useEffect(function () {
+    if (searchTerm !== null && searchTerm !== void 0 && searchTerm.length) {
       setSearchFieldVisible(true);
     }
   }, [searchTerm]);
-  React.useEffect(() => {
+  React.useEffect(function () {
     document.addEventListener('click', handleClickOutside);
-    return () => {
+    return function () {
       document.removeEventListener('click', handleClickOutside);
     };
   });
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (searchFieldVisible) {
-      searchFieldInputRef?.current?.focus();
+      var _searchFieldInputRef$;
+
+      searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : (_searchFieldInputRef$ = searchFieldInputRef.current) === null || _searchFieldInputRef$ === void 0 ? void 0 : _searchFieldInputRef$.focus();
     }
   }, [searchFieldVisible, searchFieldInputRef, id]);
 
-  const handleKeyDown = e => {
+  var handleKeyDown = function handleKeyDown(e) {
     if (onKeyDown) {
       onKeyDown(e);
     }
 
     if (e.key === 'Escape') {
-      if (searchFieldVisible && !searchTerm?.length) {
+      if (searchFieldVisible && !(searchTerm !== null && searchTerm !== void 0 && searchTerm.length)) {
         setSearchFieldVisible(false);
       }
     }
   };
 
-  return /*#__PURE__*/React.createElement(QuickSearchField, {
+  return /*#__PURE__*/_jsxs(QuickSearchField, {
     ref: searchFieldRef,
     expanded: searchFieldVisible,
-    id: `${id}_main`,
-    onBlur: event => {
-      if (event.relatedTarget && searchFieldRef?.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {
+    id: "".concat(id, "_main"),
+    onBlur: function onBlur(event) {
+      if (event.relatedTarget && searchFieldRef !== null && searchFieldRef !== void 0 && searchFieldRef.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {
         setSearchFieldVisible(false);
       }
     },
-    "data-testid": `${id}_main`,
+    "data-testid": "".concat(id, "_main"),
     className: (searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '').concat(searchFieldVisible ? ' expanded' : ''),
-    tabbedHere: tabbedHere,
-    tabIndex: -1,
-    margin: margin
-  }, searchFieldVisible && /*#__PURE__*/React.createElement(SearchBarInput, {
-    placeholder: disabled ? '' : placeholder,
-    id: id,
-    ref: searchFieldInputRef,
-    disabled: disabled,
-    onKeyDown: handleKeyDown,
-    size: size,
-    setTabbedHere: setTabbedHere,
-    setSearchTerm: term => setSearchTerm(term),
-    searchTerm: searchTerm,
-    enterSearch: enterSearch
-  }), /*#__PURE__*/React.createElement(SearchIconWrapper, {
-    className: size ? size : '',
-    role: "button",
-    "aria-label": performSearchLabel,
-    tabIndex: -1
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    id: `${id}_Searchbutton`,
-    variant: "secondary",
-    shape: "circular",
-    tabIndex: searchFieldVisible ? -1 : 0,
-    action: e => searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(searchFieldVisible ? false : true)
-  }, /*#__PURE__*/React.createElement(SearchIcon, {
-    size: "24px",
-    color: disabled ? COLORS.neutral_300 : COLORS.neutral_600
-  }))), /*#__PURE__*/React.createElement(StyledIcon, {
-    className: size ? size : '',
-    role: "button",
-    tabIndex: -1,
-    hidden: searchTerm === '' || searchTerm === undefined || !searchFieldVisible
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    id: `${id}_Clearicon`,
-    variant: "secondary",
-    shape: "circular",
-    action: e => {
-      removeSearch(e);
-      searchFieldInputRef?.current?.focus();
-    }
-  }, /*#__PURE__*/React.createElement(ClearIcon, {
-    size: "24px",
-    color: disabled ? COLORS.neutral_300 : COLORS.neutral_600
-  }))), loading && searchFieldVisible && /*#__PURE__*/React.createElement(StyledIcon, {
-    className: size ? size : '',
-    tabIndex: -1
-  }, /*#__PURE__*/React.createElement(LoadingIndicator, {
-    size: Size.Small,
-    color: COLORS.neutral_600
-  })));
+    margin: margin,
+    children: [searchFieldVisible && /*#__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,
+      tabIndex: -1,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        id: "".concat(id, "_Searchbutton"),
+        variant: "secondary",
+        shape: "circular",
+        tabIndex: searchFieldVisible ? -1 : 0,
+        action: function action(e) {
+          return searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(!searchFieldVisible);
+        },
+        children: /*#__PURE__*/_jsx(SearchIcon, {
+          size: "24px",
+          color: disabled ? COLORS.neutral_300 : COLORS.neutral_600
+        })
+      })
+    }), /*#__PURE__*/_jsx(StyledIcon, {
+      className: size ? size : '',
+      role: "button",
+      tabIndex: -1,
+      hidden: searchTerm === '' || searchTerm === undefined || !searchFieldVisible,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        id: "".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(ClearIcon, {
+          size: "24px",
+          color: disabled ? COLORS.neutral_300 : COLORS.neutral_600
+        })
+      })
+    }), loading && searchFieldVisible && /*#__PURE__*/_jsx(StyledIcon, {
+      className: size ? size : '',
+      tabIndex: -1,
+      children: /*#__PURE__*/_jsx(LoadingIndicator, {
+        size: Size.Small,
+        color: COLORS.neutral_600
+      })
+    })]
+  });
 };
 
 QuickSearch.propTypes = {

package/dist/esm/InputFields/QuickSearch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/QuickSearch.tsx"],"names":["React","styled","IconButton","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","Search","SearchIcon","Clear","ClearIcon","SearchBarInput","StyledSearchField","QuickSearchField","props","margin","white","neutral_600","expanded","primary_800","primary_700","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","loading","searchFieldRef","useRef","searchFieldInputRef","searchFieldVisible","setSearchFieldVisible","useState","tabbedHere","setTabbedHere","handleClickOutside","e","current","contains","target","length","useEffect","document","addEventListener","removeEventListener","focus","handleKeyDown","key","event","relatedTarget","concat","term","neutral_300","undefined","Small"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport { StyledSearchField } from './components/SearchField';\n\nconst QuickSearchField = styled(StyledSearchField)<{ expanded: boolean; margin?: string }>`\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  -webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n  transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n  background-color: transparent;\n  &.small {\n    width: 48px;\n  }\n\n  &.medium {\n    width: 56px;\n  }\n  \n  &.expanded{\n    width: 100%;\n    background-color: ${COLORS.white};\n  }\n\n  input {\n    ::placeholder {\n      font-style: italic;\n      color: ${COLORS.neutral_600};\n    }\n  }\n\n  box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_800}` : 'none !important')};\n\n  &:hover {\n    box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_700}` : 'none !important')};\n  }\n`;\n\ntype QuickSearchProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<boolean>(false);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (searchTerm?.length) {\n      setSearchFieldVisible(true);\n    }\n  }, [searchTerm]);\n\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  React.useEffect(() => {\n    if (searchFieldVisible) {\n      searchFieldInputRef?.current?.focus();\n    }\n  }, [searchFieldVisible, searchFieldInputRef, id]);\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  return (\n    <QuickSearchField\n      ref={searchFieldRef}\n      expanded={searchFieldVisible}\n      id={`${id}_main`}\n      onBlur={(event: any) => {\n        if (event.relatedTarget && searchFieldRef?.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {\n          setSearchFieldVisible(false);\n        }\n      }}\n      data-testid={`${id}_main`}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '').concat( searchFieldVisible ? ' expanded' : '')}\n      tabbedHere={tabbedHere}\n      tabIndex={-1}\n      margin={margin}>\n      {searchFieldVisible && (\n        <SearchBarInput\n          placeholder={disabled ? '' : placeholder}\n          id={id}\n          ref={searchFieldInputRef}\n          disabled={disabled}\n          onKeyDown={handleKeyDown}\n          size={size}\n          setTabbedHere={setTabbedHere}\n          setSearchTerm={(term: string) => setSearchTerm(term)}\n          searchTerm={searchTerm}\n          enterSearch={enterSearch}\n        />\n      )}\n      <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel} tabIndex={-1}>\n        <IconButton\n          id={`${id}_Searchbutton`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          tabIndex={searchFieldVisible ? -1 : 0}\n          action={(e) => (searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(searchFieldVisible ? false : true))}>\n          <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </SearchIconWrapper>\n      <StyledIcon className={size ? size : ''} role=\"button\" tabIndex={-1} hidden={searchTerm === '' || searchTerm === undefined || !searchFieldVisible}>\n        <IconButton\n          id={`${id}_Clearicon`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          action={(e) => {\n            removeSearch(e);\n            searchFieldInputRef?.current?.focus();\n          }}>\n          <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </StyledIcon>\n      {loading && searchFieldVisible && (\n        <StyledIcon className={size ? size : ''} tabIndex={-1}>\n          <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n        </StyledIcon>\n      )}\n    </QuickSearchField>\n  );\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.js"}
+{"version":3,"sources":["../../../src/InputFields/QuickSearch.tsx"],"names":["React","styled","IconButton","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","Search","SearchIcon","Clear","ClearIcon","SearchBarInput","StyledSearchField","QuickSearchField","props","margin","white","neutral_600","expanded","primary_800","primary_700","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","loading","searchFieldRef","useRef","searchFieldInputRef","useState","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","useEffect","document","addEventListener","removeEventListener","focus","handleKeyDown","key","event","relatedTarget","concat","term","neutral_300","undefined","Small"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,OAAOC,UAAP,MAAuB,sBAAvB;AACA,SAASC,iBAAT,EAA4BC,UAA5B,QAA8C,WAA9C;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,MAAT,EAAiBC,gBAAjB,QAAyC,IAAzC;AACA,SAASC,MAAM,IAAIC,UAAnB,EAA+BC,KAAK,IAAIC,SAAxC,QAAyD,kCAAzD;AACA,OAAOC,cAAP,MAA2B,6BAA3B;AACA,SAASC,iBAAT,QAAkC,0BAAlC;;;AAEA,IAAMC,gBAAgB,GAAGb,MAAM,CAACY,iBAAD,CAAT,qjBAClB,UAACE,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CADkB,EAgBEV,MAAM,CAACW,KAhBT,EAsBPX,MAAM,CAACY,WAtBA,EA0BN,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACI,QAAN,mCAA0Cb,MAAM,CAACc,WAAjD,IAAiE,iBAA7E;AAAA,CA1BM,EA6BJ,UAACL,KAAD;AAAA,SAAYA,KAAK,CAACI,QAAN,mCAA0Cb,MAAM,CAACe,WAAjD,IAAiE,iBAA7E;AAAA,CA7BI,CAAtB;;AAgDA,IAAMC,WAAsD,GAAG,SAAzDA,WAAyD,OAavC;AAAA,MAZtBC,EAYsB,QAZtBA,EAYsB;AAAA,MAXtBC,UAWsB,QAXtBA,UAWsB;AAAA,MAVtBC,cAUsB,QAVtBA,aAUsB;AAAA,MATtBC,WASsB,QATtBA,WASsB;AAAA,MARtBC,YAQsB,QARtBA,YAQsB;AAAA,MAPtBC,WAOsB,QAPtBA,WAOsB;AAAA,MANtBC,kBAMsB,QANtBA,kBAMsB;AAAA,MALtBC,QAKsB,QALtBA,QAKsB;AAAA,MAJtBC,SAIsB,QAJtBA,SAIsB;AAAA,MAHtBC,IAGsB,QAHtBA,IAGsB;AAAA,MAFtBhB,MAEsB,QAFtBA,MAEsB;AAAA,MADtBiB,OACsB,QADtBA,OACsB;AACtB,MAAMC,cAAc,GAAGlC,KAAK,CAACmC,MAAN,CAA6B,IAA7B,CAAvB;AACA,MAAMC,mBAAmB,GAAGpC,KAAK,CAACmC,MAAN,CAA+B,IAA/B,CAA5B;;AAEA,wBAAoDnC,KAAK,CAACqC,QAAN,CAAwB,KAAxB,CAApD;AAAA;AAAA,MAAOC,kBAAP;AAAA,MAA2BC,qBAA3B;;AAEA,MAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,CAAD,EAAY;AACrC,QAAIP,cAAc,SAAd,IAAAA,cAAc,WAAd,IAAAA,cAAc,CAAEQ,OAAhB,IAA2B,CAACR,cAAc,CAACQ,OAAf,CAAuBC,QAAvB,CAAgCF,CAAC,CAACG,MAAlC,CAAhC,EAA2E;AACzE,UAAIN,kBAAkB,IAAI,EAACd,UAAD,aAACA,UAAD,eAACA,UAAU,CAAEqB,MAAb,CAA1B,EAA+C;AAC7CN,QAAAA,qBAAqB,CAAC,KAAD,CAArB;AACD;AACF;AACF,GAND;;AAQAvC,EAAAA,KAAK,CAAC8C,SAAN,CAAgB,YAAM;AACpB,QAAItB,UAAJ,aAAIA,UAAJ,eAAIA,UAAU,CAAEqB,MAAhB,EAAwB;AACtBN,MAAAA,qBAAqB,CAAC,IAAD,CAArB;AACD;AACF,GAJD,EAIG,CAACf,UAAD,CAJH;AAMAxB,EAAAA,KAAK,CAAC8C,SAAN,CAAgB,YAAM;AACpBC,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,OAA1B,EAAmCR,kBAAnC;AACA,WAAO,YAAM;AACXO,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,OAA7B,EAAsCT,kBAAtC;AACD,KAFD;AAGD,GALD;AAOAxC,EAAAA,KAAK,CAAC8C,SAAN,CAAgB,YAAM;AACpB,QAAIR,kBAAJ,EAAwB;AAAA;;AACtBF,MAAAA,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,qCAAAA,mBAAmB,CAAEM,OAArB,gFAA8BQ,KAA9B;AACD;AACF,GAJD,EAIG,CAACZ,kBAAD,EAAqBF,mBAArB,EAA0Cb,EAA1C,CAJH;;AAMA,MAAM4B,aAAa,GAAG,SAAhBA,aAAgB,CAACV,CAAD,EAAY;AAChC,QAAIV,SAAJ,EAAe;AACbA,MAAAA,SAAS,CAACU,CAAD,CAAT;AACD;;AACD,QAAIA,CAAC,CAACW,GAAF,KAAU,QAAd,EAAwB;AACtB,UAAId,kBAAkB,IAAI,EAACd,UAAD,aAACA,UAAD,eAACA,UAAU,CAAEqB,MAAb,CAA1B,EAA+C;AAC7CN,QAAAA,qBAAqB,CAAC,KAAD,CAArB;AACD;AACF;AACF,GATD;;AAWA,sBACE,MAAC,gBAAD;AACE,IAAA,GAAG,EAAEL,cADP;AAEE,IAAA,QAAQ,EAAEI,kBAFZ;AAGE,IAAA,EAAE,YAAKf,EAAL,UAHJ;AAIE,IAAA,MAAM,EAAE,gBAAC8B,KAAD,EAAgB;AACtB,UAAIA,KAAK,CAACC,aAAN,IAAuBpB,cAAvB,aAAuBA,cAAvB,eAAuBA,cAAc,CAAEQ,OAAvC,IAAkD,CAACR,cAAc,CAACQ,OAAf,CAAuBC,QAAvB,CAAgCU,KAAK,CAACC,aAAtC,CAAnD,IAA2G,CAAC9B,UAAhH,EAA4H;AAC1He,QAAAA,qBAAqB,CAAC,KAAD,CAArB;AACD;AACF,KARH;AASE,6BAAgBhB,EAAhB,UATF;AAUE,IAAA,SAAS,EAAE,CAACC,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EAAvC,EAA2C+B,MAA3C,CAAkDvB,IAAI,GAAGA,IAAH,GAAU,EAAhE,EAAoEuB,MAApE,CAA4EjB,kBAAkB,GAAG,WAAH,GAAiB,EAA/G,CAVb;AAWE,IAAA,MAAM,EAAEtB,MAXV;AAAA,eAYGsB,kBAAkB,iBACjB,KAAC,cAAD;AACE,MAAA,WAAW,EAAER,QAAQ,GAAG,EAAH,GAAQF,WAD/B;AAEE,MAAA,EAAE,EAAEL,EAFN;AAGE,MAAA,GAAG,EAAEa,mBAHP;AAIE,MAAA,QAAQ,EAAEN,QAJZ;AAKE,MAAA,SAAS,EAAEqB,aALb;AAME,MAAA,IAAI,EAAEnB,IANR;AAOE,MAAA,aAAa,EAAE,uBAACwB,IAAD;AAAA,eAAkB/B,cAAa,CAAC+B,IAAD,CAA/B;AAAA,OAPjB;AAQE,MAAA,UAAU,EAAEhC,UARd;AASE,MAAA,WAAW,EAAEE,WATf;AAUE,MAAA,eAAe,EAAE,CAACQ,cAAD;AAVnB,MAbJ,eA0BE,KAAC,iBAAD;AAAmB,MAAA,SAAS,EAAEF,IAAI,GAAGA,IAAH,GAAU,EAA5C;AAAgD,MAAA,IAAI,EAAC,QAArD;AAA8D,oBAAYH,kBAA1E;AAA8F,MAAA,QAAQ,EAAE,CAAC,CAAzG;AAAA,6BACE,KAAC,UAAD;AACE,QAAA,EAAE,YAAKN,EAAL,kBADJ;AAEE,QAAA,OAAO,EAAC,WAFV;AAGE,QAAA,KAAK,EAAC,UAHR;AAIE,QAAA,QAAQ,EAAEe,kBAAkB,GAAG,CAAC,CAAJ,GAAQ,CAJtC;AAKE,QAAA,MAAM,EAAE,gBAACG,CAAD;AAAA,iBAAQH,kBAAkB,GAAGZ,WAAW,CAACe,CAAD,CAAd,GAAoBF,qBAAqB,CAAC,CAACD,kBAAF,CAAnE;AAAA,SALV;AAAA,+BAME,KAAC,UAAD;AAAY,UAAA,IAAI,EAAC,MAAjB;AAAwB,UAAA,KAAK,EAAER,QAAQ,GAAGxB,MAAM,CAACmD,WAAV,GAAwBnD,MAAM,CAACY;AAAtE;AANF;AADF,MA1BF,eAoCE,KAAC,UAAD;AAAY,MAAA,SAAS,EAAEc,IAAI,GAAGA,IAAH,GAAU,EAArC;AAAyC,MAAA,IAAI,EAAC,QAA9C;AAAuD,MAAA,QAAQ,EAAE,CAAC,CAAlE;AAAqE,MAAA,MAAM,EAAER,UAAU,KAAK,EAAf,IAAqBA,UAAU,KAAKkC,SAApC,IAAiD,CAACpB,kBAA/H;AAAA,6BACE,KAAC,UAAD;AACE,QAAA,EAAE,YAAKf,EAAL,eADJ;AAEE,QAAA,OAAO,EAAC,WAFV;AAGE,QAAA,KAAK,EAAC,UAHR;AAIE,QAAA,MAAM,EAAE,gBAACkB,CAAD,EAAO;AAAA;;AACbd,UAAAA,YAAY,CAACc,CAAD,CAAZ;AACAL,UAAAA,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,sCAAAA,mBAAmB,CAAEM,OAArB,kFAA8BQ,KAA9B;AACD,SAPH;AAAA,+BAQE,KAAC,SAAD;AAAW,UAAA,IAAI,EAAC,MAAhB;AAAuB,UAAA,KAAK,EAAEpB,QAAQ,GAAGxB,MAAM,CAACmD,WAAV,GAAwBnD,MAAM,CAACY;AAArE;AARF;AADF,MApCF,EAgDGe,OAAO,IAAIK,kBAAX,iBACC,KAAC,UAAD;AAAY,MAAA,SAAS,EAAEN,IAAI,GAAGA,IAAH,GAAU,EAArC;AAAyC,MAAA,QAAQ,EAAE,CAAC,CAApD;AAAA,6BACE,KAAC,gBAAD;AAAkB,QAAA,IAAI,EAAE3B,IAAI,CAACsD,KAA7B;AAAoC,QAAA,KAAK,EAAErD,MAAM,CAACY;AAAlD;AADF,MAjDJ;AAAA,IADF;AAwDD,CAjHD;;;AAdEK,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,a;AACAC,EAAAA,W;AACAC,EAAAA,Y;AACAC,EAAAA,W;AACAC,EAAAA,kB;AACAC,EAAAA,Q;AACAC,EAAAA,S;AAEAf,EAAAA,M;AACAiB,EAAAA,O;;AAsHF,eAAeX,WAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport { StyledSearchField } from './components/SearchField';\n\nconst QuickSearchField = styled(StyledSearchField)<{ expanded: boolean; margin?: string }>`\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  -webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n  transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n  background-color: transparent;\n  &.small {\n    width: 48px;\n  }\n\n  &.medium {\n    width: 56px;\n  }\n  \n  &.expanded{\n    width: 100%;\n    background-color: ${COLORS.white};\n  }\n\n  input {\n    ::placeholder {\n      font-style: italic;\n      color: ${COLORS.neutral_600};\n    }\n  }\n\n  box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_800}` : 'none !important')};\n\n  &:hover {\n    box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_700}` : 'none !important')};\n  }\n`;\n\ntype QuickSearchProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<boolean>(false);\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (searchTerm?.length) {\n      setSearchFieldVisible(true);\n    }\n  }, [searchTerm]);\n\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  React.useEffect(() => {\n    if (searchFieldVisible) {\n      searchFieldInputRef?.current?.focus();\n    }\n  }, [searchFieldVisible, searchFieldInputRef, id]);\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  return (\n    <QuickSearchField\n      ref={searchFieldRef}\n      expanded={searchFieldVisible}\n      id={`${id}_main`}\n      onBlur={(event: any) => {\n        if (event.relatedTarget && searchFieldRef?.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {\n          setSearchFieldVisible(false);\n        }\n      }}\n      data-testid={`${id}_main`}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '').concat( searchFieldVisible ? ' expanded' : '')}\n      margin={margin}>\n      {searchFieldVisible && (\n        <SearchBarInput\n          placeholder={disabled ? '' : placeholder}\n          id={id}\n          ref={searchFieldInputRef}\n          disabled={disabled}\n          onKeyDown={handleKeyDown}\n          size={size}\n          setSearchTerm={(term: string) => setSearchTerm(term)}\n          searchTerm={searchTerm}\n          enterSearch={enterSearch}\n          focusParentRefs={[searchFieldRef]}\n        />\n      )}\n      <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel} tabIndex={-1}>\n        <IconButton\n          id={`${id}_Searchbutton`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          tabIndex={searchFieldVisible ? -1 : 0}\n          action={(e) => (searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(!searchFieldVisible))}>\n          <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </SearchIconWrapper>\n      <StyledIcon className={size ? size : ''} role=\"button\" tabIndex={-1} hidden={searchTerm === '' || searchTerm === undefined || !searchFieldVisible}>\n        <IconButton\n          id={`${id}_Clearicon`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          action={(e) => {\n            removeSearch(e);\n            searchFieldInputRef?.current?.focus();\n          }}>\n          <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </StyledIcon>\n      {loading && searchFieldVisible && (\n        <StyledIcon className={size ? size : ''} tabIndex={-1}>\n          <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n        </StyledIcon>\n      )}\n    </QuickSearchField>\n  );\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.js"}