@laerdal/life-react-components 5.0.8-dev.2.full → 5.0.9

package/dist/InputFields/QuickSearch.cjs

@@ -1,10 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
@@ -18,31 +20,40 @@ var _SearchBarInput = _interopRequireDefault(require("./components/SearchBarInpu
 var _SearchField = _interopRequireWildcard(require("./components/SearchField"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _SearchField.StyledSearchField, props => _.COLORS.getColor('white', props.theme), props => _.COLORS.getColor('neutral_400', props.theme), props => _.COLORS.getColor('primary_800', props.theme), _Iconbutton.IconButtonStyledSecondary, props => props.$shouldNotInteract ? 'none' : 'auto');
-const QuickSearch = _ref => {
-  let {
-    id,
-    searchTerm,
-    setSearchTerm,
-    enterSearch,
-    removeSearch,
-    placeholder,
-    performSearchLabel,
-    disabled,
-    onKeyDown,
-    size,
-    margin,
-    loading
-  } = _ref;
-  const theme = (0, _styledComponents.useTheme)();
-  const searchFieldRef = React.useRef(null);
-  const searchFieldInputRef = React.useRef(null);
-  const [searchFieldVisible, setSearchFieldVisible] = React.useState({
-    visible: false
-  });
-  const handleClickOutside = e => {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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"])), _SearchField.StyledSearchField, function (props) {
+  return _.COLORS.getColor('white', props.theme);
+}, function (props) {
+  return _.COLORS.getColor('neutral_400', props.theme);
+}, function (props) {
+  return _.COLORS.getColor('primary_800', props.theme);
+}, _Iconbutton.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 theme = (0, _styledComponents.useTheme)();
+  var searchFieldRef = React.useRef(null);
+  var searchFieldInputRef = React.useRef(null);
+  var _React$useState = React.useState({
+      visible: false
+    }),
+    _React$useState2 = (0, _slicedToArray2["default"])(_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({
@@ -51,7 +62,7 @@ const QuickSearch = _ref => {
       }
     }
   };
-  const handleKeyDown = e => {
+  var handleKeyDown = function handleKeyDown(e) {
     if (onKeyDown) {
       onKeyDown(e);
     }
@@ -63,7 +74,7 @@ const QuickSearch = _ref => {
       }
     }
   };
-  const handleBlur = e => {
+  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({
@@ -71,7 +82,7 @@ const QuickSearch = _ref => {
       });
     }
   };
-  const handleSearchIconAction = e => {
+  var handleSearchIconAction = function handleSearchIconAction(e) {
     if (!(searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible)) {
       setSearchFieldVisible({
         visible: !searchFieldVisible.visible,
@@ -81,7 +92,7 @@ const QuickSearch = _ref => {
   };
 
   // set search field visibility on search term change
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (!!(searchTerm !== null && searchTerm !== void 0 && searchTerm.length) && !(searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible)) {
       setSearchFieldVisible({
         visible: true,
@@ -91,25 +102,25 @@ const QuickSearch = _ref => {
   }, [searchTerm, searchFieldVisible]);
 
   // register click outside handler
-  React.useEffect(() => {
+  React.useEffect(function () {
     document.addEventListener('click', handleClickOutside);
-    return () => {
+    return function () {
       document.removeEventListener('click', handleClickOutside);
     };
   });
 
   // focus search input on visibility change
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible) {
       var _searchFieldInputRef$;
-      searchFieldInputRef === null || searchFieldInputRef === void 0 || (_searchFieldInputRef$ = searchFieldInputRef.current) === null || _searchFieldInputRef$ === void 0 || _searchFieldInputRef$.focus({
+      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__*/(0, _jsxRuntime.jsx)(Wrapper, {
     $shouldNotInteract: searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SearchField.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SearchField["default"], {
       ref: searchFieldRef,
       id: id,
       size: size,
@@ -119,14 +130,16 @@ const QuickSearch = _ref => {
       },
       onBlur: handleBlur,
       className: searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible ? 'expanded' : '',
-      children: [(searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBarInput.default, {
+      children: [(searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBarInput["default"], {
         placeholder: disabled ? '' : placeholder,
         id: id,
         ref: searchFieldInputRef,
         disabled: disabled,
         onKeyDown: handleKeyDown,
         size: size,
-        setSearchTerm: term => setSearchTerm(term),
+        setSearchTerm: function setSearchTerm(term) {
+          return _setSearchTerm(term);
+        },
         searchTerm: searchTerm,
         enterSearch: enterSearch,
         focusParentRefs: [searchFieldRef]
@@ -134,7 +147,7 @@ const QuickSearch = _ref => {
         className: size ? size : '',
         role: "button",
         "aria-label": performSearchLabel,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Iconbutton.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Iconbutton["default"], {
           id: "".concat(id, "_Searchbutton"),
           dataTestId: "".concat(id, "_Searchbutton"),
           variant: "secondary",
@@ -150,15 +163,15 @@ const QuickSearch = _ref => {
         className: size ? size : '',
         role: "button",
         hidden: !searchTerm || !(searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Iconbutton.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Iconbutton["default"], {
           id: "".concat(id, "_Clearicon"),
           dataTestId: "".concat(id, "_Clearicon"),
           variant: "secondary",
           shape: "circular",
-          action: e => {
+          action: function action(e) {
             var _searchFieldInputRef$2;
             removeSearch(e);
-            searchFieldInputRef === null || searchFieldInputRef === void 0 || (_searchFieldInputRef$2 = searchFieldInputRef.current) === null || _searchFieldInputRef$2 === void 0 || _searchFieldInputRef$2.focus();
+            searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : (_searchFieldInputRef$2 = searchFieldInputRef.current) === null || _searchFieldInputRef$2 === void 0 ? void 0 : _searchFieldInputRef$2.focus();
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Clear, {
             size: "24px",
@@ -176,17 +189,18 @@ const QuickSearch = _ref => {
   });
 };
 QuickSearch.propTypes = {
-  id: _propTypes.default.string.isRequired,
-  searchTerm: _propTypes.default.string,
-  setSearchTerm: _propTypes.default.func.isRequired,
-  enterSearch: _propTypes.default.func.isRequired,
-  removeSearch: _propTypes.default.func.isRequired,
-  placeholder: _propTypes.default.string,
-  performSearchLabel: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  onKeyDown: _propTypes.default.func,
-  margin: _propTypes.default.string,
-  loading: _propTypes.default.bool
+  id: _propTypes["default"].string.isRequired,
+  searchTerm: _propTypes["default"].string,
+  setSearchTerm: _propTypes["default"].func.isRequired,
+  enterSearch: _propTypes["default"].func.isRequired,
+  removeSearch: _propTypes["default"].func.isRequired,
+  placeholder: _propTypes["default"].string,
+  performSearchLabel: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  onKeyDown: _propTypes["default"].func,
+  margin: _propTypes["default"].string,
+  loading: _propTypes["default"].bool
 };
-var _default = exports.default = QuickSearch;
+var _default = QuickSearch;
+exports["default"] = _default;
 //# sourceMappingURL=QuickSearch.cjs.map

package/dist/InputFields/QuickSearch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"QuickSearch.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_Iconbutton","_styling","_types","_","_icons","_SearchBarInput","_interopRequireDefault","_SearchField","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Wrapper","styled","div","_taggedTemplateLiteral2","StyledSearchField","props","COLORS","getColor","theme","IconButtonStyledSecondary","$shouldNotInteract","QuickSearch","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","useTheme","searchFieldRef","useRef","searchFieldInputRef","searchFieldVisible","setSearchFieldVisible","useState","visible","handleClickOutside","current","contains","target","length","handleKeyDown","key","handleBlur","_searchFieldRef$curre","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","_searchFieldInputRef$","focusVisible","jsx","children","jsxs","ref","style","onBlur","className","term","focusParentRefs","SearchIconWrapper","role","concat","dataTestId","variant","shape","tabIndex","action","SystemIcons","Search","color","StyledIcon","hidden","_searchFieldInputRef$2","Clear","LoadingIndicator","Size","Small","propTypes","_propTypes","string","isRequired","func","bool","_default","exports"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport IconButton, { IconButtonStyledSecondary } from '../Button/Iconbutton';\r\nimport { SearchIconWrapper, StyledIcon } from './styling';\r\nimport { Size } from '../types';\r\nimport { COLORS, LoadingIndicator } from '..';\r\nimport { SystemIcons } from '../icons';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField, { StyledSearchField } from './components/SearchField';\r\n\r\nconst Wrapper = styled.div<{$shouldNotInteract: boolean}>`\r\n  width: 100%;\r\n\r\n  ${StyledSearchField} {\r\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\r\n\r\n    background-color: transparent;\r\n\r\n    &.small {\r\n      width: 48px;\r\n    }\r\n\r\n    &.medium {\r\n      width: 56px;\r\n    }\r\n\r\n    &.expanded {\r\n      width: 100%;\r\n    }\r\n\r\n    box-shadow: none;\r\n\r\n    &:hover {\r\n      box-shadow: none;\r\n    }\r\n\r\n    &.expanded {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n    }\r\n\r\n    &.expanded:hover,\r\n    &.expanded:focus-within {\r\n      box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  ${IconButtonStyledSecondary} {\r\n    pointer-events: ${(props) => (props.$shouldNotInteract ? 'none' : 'auto')};\r\n  }\r\n`;\r\n\r\nexport type QuickSearchProps = {\r\n  /** Required. Id of the component. */\r\n  id: string;\r\n  /** Optional. Current search term entered by the user. */\r\n  searchTerm?: string;\r\n  /** Required. Handler to be called when user modified input. */\r\n  setSearchTerm: (term: string) => void;\r\n  /** Required. Handler to be called when user triggers search. */\r\n  enterSearch: (e: any) => void;\r\n  /** Required. Handler to be called when user clears input field. */\r\n  removeSearch: (e: any) => void;\r\n  /** Optional. Placeholder text to be shown in the input field when there is no input. */\r\n  placeholder?: string;\r\n  /** Optional. ARIA label to set on the input field. */\r\n  performSearchLabel?: string;\r\n  /** Optional. If disabled user can not interact with the search bar. */\r\n  disabled?: boolean;\r\n  /** Optional. Optional onkeydown handler to be set on the input field. */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /** Optional. Size of the component. Defaults to 'medium'.   */\r\n  size?: Size.Small | Size.Medium;\r\n  /** Optional. Margin style attribute to be set on the input field. */\r\n  margin?: string;\r\n  /** Optional. If set then loading indicator will be shown on the right side of the input field. */\r\n  loading?: boolean;\r\n};\r\n\r\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\r\n  id,\r\n  searchTerm,\r\n  setSearchTerm,\r\n  enterSearch,\r\n  removeSearch,\r\n  placeholder,\r\n  performSearchLabel,\r\n  disabled,\r\n  onKeyDown,\r\n  size,\r\n  margin,\r\n  loading,\r\n}: QuickSearchProps) => {\r\n  const theme = useTheme();\r\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\r\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\r\n\r\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\r\n    visible: false,\r\n  });\r\n\r\n  const handleClickOutside = (e: any) => {\r\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\r\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n        setSearchFieldVisible({ visible: false });\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (onKeyDown) {\r\n      onKeyDown(e);\r\n    }\r\n    if (e.key === 'Escape') {\r\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n        setSearchFieldVisible({ visible: false });\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleBlur = (e: any) => {\r\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\r\n      setSearchFieldVisible({ visible: false });\r\n    }\r\n  };\r\n\r\n  const handleSearchIconAction = (e: any) => {\r\n    if (!searchFieldVisible?.visible) {\r\n      setSearchFieldVisible({\r\n        visible: !searchFieldVisible.visible,\r\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\r\n      });\r\n    }\r\n  };\r\n\r\n  // set search field visibility on search term change\r\n  React.useEffect(() => {\r\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\r\n      setSearchFieldVisible({ visible: true, focus: false });\r\n    }\r\n  }, [searchTerm, searchFieldVisible]);\r\n\r\n  // register click outside handler\r\n  React.useEffect(() => {\r\n    document.addEventListener('click', handleClickOutside);\r\n    return () => {\r\n      document.removeEventListener('click', handleClickOutside);\r\n    };\r\n  });\r\n\r\n  // focus search input on visibility change\r\n  React.useEffect(() => {\r\n    if (searchFieldVisible?.visible) {\r\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\r\n    }\r\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\r\n\r\n  return (\r\n    <Wrapper $shouldNotInteract={searchFieldVisible?.visible}>\r\n      <SearchField\r\n        ref={searchFieldRef}\r\n        id={id}\r\n        size={size}\r\n        searchTerm={searchTerm}\r\n        style={{\r\n          margin: margin,\r\n        }}\r\n        onBlur={handleBlur}\r\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\r\n        {searchFieldVisible?.visible && (\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            ref={searchFieldInputRef}\r\n            disabled={disabled}\r\n            onKeyDown={handleKeyDown}\r\n            size={size}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            enterSearch={enterSearch}\r\n            focusParentRefs={[searchFieldRef]}\r\n          />\r\n        )}\r\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\r\n          <IconButton\r\n            id={`${id}_Searchbutton`}\r\n            dataTestId={`${id}_Searchbutton`}\r\n            variant=\"secondary\"\r\n            shape=\"circular\"\r\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\r\n            action={handleSearchIconAction}>\r\n            <SystemIcons.Search size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\r\n          </IconButton>\r\n        </SearchIconWrapper>\r\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\r\n          <IconButton\r\n            id={`${id}_Clearicon`}\r\n            dataTestId={`${id}_Clearicon`}\r\n            variant=\"secondary\"\r\n            shape=\"circular\"\r\n            action={(e) => {\r\n              removeSearch(e);\r\n              searchFieldInputRef?.current?.focus();\r\n            }}>\r\n            <SystemIcons.Clear size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\r\n          </IconButton>\r\n        </StyledIcon>\r\n        {loading && searchFieldVisible?.visible && (\r\n          <StyledIcon className={size ? size : ''}>\r\n            <LoadingIndicator size={Size.Small} color={COLORS.getColor('neutral_600', theme)} />\r\n          </StyledIcon>\r\n        )}\r\n      </SearchField>\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default QuickSearch;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"QuickSearch.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_Iconbutton","_styling","_types","_","_icons","_SearchBarInput","_interopRequireDefault","_SearchField","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Wrapper","styled","div","_taggedTemplateLiteral2","StyledSearchField","props","COLORS","getColor","theme","IconButtonStyledSecondary","$shouldNotInteract","QuickSearch","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","useTheme","searchFieldRef","useRef","searchFieldInputRef","_React$useState","useState","visible","_React$useState2","_slicedToArray2","searchFieldVisible","setSearchFieldVisible","handleClickOutside","current","contains","target","length","handleKeyDown","key","handleBlur","_searchFieldRef$curre","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","_searchFieldInputRef$","focusVisible","jsx","children","jsxs","ref","style","onBlur","className","term","focusParentRefs","SearchIconWrapper","role","concat","dataTestId","variant","shape","tabIndex","action","SystemIcons","Search","color","StyledIcon","hidden","_searchFieldInputRef$2","Clear","LoadingIndicator","Size","Small","propTypes","_propTypes","string","isRequired","func","bool","_default","exports"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport IconButton, { IconButtonStyledSecondary } from '../Button/Iconbutton';\r\nimport { SearchIconWrapper, StyledIcon } from './styling';\r\nimport { Size } from '../types';\r\nimport { COLORS, LoadingIndicator } from '..';\r\nimport { SystemIcons } from '../icons';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField, { StyledSearchField } from './components/SearchField';\r\n\r\nconst Wrapper = styled.div<{$shouldNotInteract: boolean}>`\r\n  width: 100%;\r\n\r\n  ${StyledSearchField} {\r\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\r\n\r\n    background-color: transparent;\r\n\r\n    &.small {\r\n      width: 48px;\r\n    }\r\n\r\n    &.medium {\r\n      width: 56px;\r\n    }\r\n\r\n    &.expanded {\r\n      width: 100%;\r\n    }\r\n\r\n    box-shadow: none;\r\n\r\n    &:hover {\r\n      box-shadow: none;\r\n    }\r\n\r\n    &.expanded {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n    }\r\n\r\n    &.expanded:hover,\r\n    &.expanded:focus-within {\r\n      box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  ${IconButtonStyledSecondary} {\r\n    pointer-events: ${(props) => (props.$shouldNotInteract ? 'none' : 'auto')};\r\n  }\r\n`;\r\n\r\nexport type QuickSearchProps = {\r\n  /** Required. Id of the component. */\r\n  id: string;\r\n  /** Optional. Current search term entered by the user. */\r\n  searchTerm?: string;\r\n  /** Required. Handler to be called when user modified input. */\r\n  setSearchTerm: (term: string) => void;\r\n  /** Required. Handler to be called when user triggers search. */\r\n  enterSearch: (e: any) => void;\r\n  /** Required. Handler to be called when user clears input field. */\r\n  removeSearch: (e: any) => void;\r\n  /** Optional. Placeholder text to be shown in the input field when there is no input. */\r\n  placeholder?: string;\r\n  /** Optional. ARIA label to set on the input field. */\r\n  performSearchLabel?: string;\r\n  /** Optional. If disabled user can not interact with the search bar. */\r\n  disabled?: boolean;\r\n  /** Optional. Optional onkeydown handler to be set on the input field. */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /** Optional. Size of the component. Defaults to 'medium'.   */\r\n  size?: Size.Small | Size.Medium;\r\n  /** Optional. Margin style attribute to be set on the input field. */\r\n  margin?: string;\r\n  /** Optional. If set then loading indicator will be shown on the right side of the input field. */\r\n  loading?: boolean;\r\n};\r\n\r\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\r\n  id,\r\n  searchTerm,\r\n  setSearchTerm,\r\n  enterSearch,\r\n  removeSearch,\r\n  placeholder,\r\n  performSearchLabel,\r\n  disabled,\r\n  onKeyDown,\r\n  size,\r\n  margin,\r\n  loading,\r\n}: QuickSearchProps) => {\r\n  const theme = useTheme();\r\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\r\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\r\n\r\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\r\n    visible: false,\r\n  });\r\n\r\n  const handleClickOutside = (e: any) => {\r\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\r\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n        setSearchFieldVisible({ visible: false });\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (onKeyDown) {\r\n      onKeyDown(e);\r\n    }\r\n    if (e.key === 'Escape') {\r\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n        setSearchFieldVisible({ visible: false });\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleBlur = (e: any) => {\r\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\r\n      setSearchFieldVisible({ visible: false });\r\n    }\r\n  };\r\n\r\n  const handleSearchIconAction = (e: any) => {\r\n    if (!searchFieldVisible?.visible) {\r\n      setSearchFieldVisible({\r\n        visible: !searchFieldVisible.visible,\r\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\r\n      });\r\n    }\r\n  };\r\n\r\n  // set search field visibility on search term change\r\n  React.useEffect(() => {\r\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\r\n      setSearchFieldVisible({ visible: true, focus: false });\r\n    }\r\n  }, [searchTerm, searchFieldVisible]);\r\n\r\n  // register click outside handler\r\n  React.useEffect(() => {\r\n    document.addEventListener('click', handleClickOutside);\r\n    return () => {\r\n      document.removeEventListener('click', handleClickOutside);\r\n    };\r\n  });\r\n\r\n  // focus search input on visibility change\r\n  React.useEffect(() => {\r\n    if (searchFieldVisible?.visible) {\r\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\r\n    }\r\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\r\n\r\n  return (\r\n    <Wrapper $shouldNotInteract={searchFieldVisible?.visible}>\r\n      <SearchField\r\n        ref={searchFieldRef}\r\n        id={id}\r\n        size={size}\r\n        searchTerm={searchTerm}\r\n        style={{\r\n          margin: margin,\r\n        }}\r\n        onBlur={handleBlur}\r\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\r\n        {searchFieldVisible?.visible && (\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            ref={searchFieldInputRef}\r\n            disabled={disabled}\r\n            onKeyDown={handleKeyDown}\r\n            size={size}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            enterSearch={enterSearch}\r\n            focusParentRefs={[searchFieldRef]}\r\n          />\r\n        )}\r\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\r\n          <IconButton\r\n            id={`${id}_Searchbutton`}\r\n            dataTestId={`${id}_Searchbutton`}\r\n            variant=\"secondary\"\r\n            shape=\"circular\"\r\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\r\n            action={handleSearchIconAction}>\r\n            <SystemIcons.Search size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\r\n          </IconButton>\r\n        </SearchIconWrapper>\r\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\r\n          <IconButton\r\n            id={`${id}_Clearicon`}\r\n            dataTestId={`${id}_Clearicon`}\r\n            variant=\"secondary\"\r\n            shape=\"circular\"\r\n            action={(e) => {\r\n              removeSearch(e);\r\n              searchFieldInputRef?.current?.focus();\r\n            }}>\r\n            <SystemIcons.Clear size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\r\n          </IconButton>\r\n        </StyledIcon>\r\n        {loading && searchFieldVisible?.visible && (\r\n          <StyledIcon className={size ? size : ''}>\r\n            <LoadingIndicator size={Size.Small} color={COLORS.getColor('neutral_600', theme)} />\r\n          </StyledIcon>\r\n        )}\r\n      </SearchField>\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default QuickSearch;\r\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAF,uBAAA,CAAAC,OAAA;AAEA,IAAAE,WAAA,GAAAH,uBAAA,CAAAC,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,CAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,eAAA,GAAAC,sBAAA,CAAAR,OAAA;AACA,IAAAS,YAAA,GAAAV,uBAAA,CAAAC,OAAA;AAA0E,IAAAU,WAAA,GAAAV,OAAA;AAAA,IAAAW,eAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAd,wBAAAc,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,cAAAR,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAE1E,IAAMW,OAAO,GAAGC,4BAAM,CAACC,GAAG,CAAAvB,eAAA,KAAAA,eAAA,OAAAwB,uBAAA,6mBAGtBC,8BAAiB,EAwBK,UAAAC,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GACpC,UAAAH,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAKpD,UAAAH,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAIpFC,qCAAyB,EACP,UAACJ,KAAK;EAAA,OAAMA,KAAK,CAACK,kBAAkB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,CAE5E;AA6BD,IAAMC,WAAsD,GAAG,SAAzDA,WAAsDA,CAAAC,IAAA,EAapC;EAAA,IAZtBC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,UAAU,GAAAF,IAAA,CAAVE,UAAU;IACVC,cAAa,GAAAH,IAAA,CAAbG,aAAa;IACbC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,YAAY,GAAAL,IAAA,CAAZK,YAAY;IACZC,WAAW,GAAAN,IAAA,CAAXM,WAAW;IACXC,kBAAkB,GAAAP,IAAA,CAAlBO,kBAAkB;IAClBC,QAAQ,GAAAR,IAAA,CAARQ,QAAQ;IACRC,SAAS,GAAAT,IAAA,CAATS,SAAS;IACTC,IAAI,GAAAV,IAAA,CAAJU,IAAI;IACJC,MAAM,GAAAX,IAAA,CAANW,MAAM;IACNC,OAAO,GAAAZ,IAAA,CAAPY,OAAO;EAEP,IAAMhB,KAAK,GAAG,IAAAiB,0BAAQ,EAAC,CAAC;EACxB,IAAMC,cAAc,GAAG5D,KAAK,CAAC6D,MAAM,CAAiB,IAAI,CAAC;EACzD,IAAMC,mBAAmB,GAAG9D,KAAK,CAAC6D,MAAM,CAAmB,IAAI,CAAC;EAEhE,IAAAE,eAAA,GAAoD/D,KAAK,CAACgE,QAAQ,CAAwC;MACxGC,OAAO,EAAE;IACX,CAAC,CAAC;IAAAC,gBAAA,OAAAC,eAAA,aAAAJ,eAAA;IAFKK,kBAAkB,GAAAF,gBAAA;IAAEG,qBAAqB,GAAAH,gBAAA;EAIhD,IAAMI,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIvD,CAAM,EAAK;IACrC,IAAI6C,cAAc,aAAdA,cAAc,eAAdA,cAAc,CAAEW,OAAO,IAAI,CAACX,cAAc,CAACW,OAAO,CAACC,QAAQ,CAACzD,CAAC,CAAC0D,MAAM,CAAC,EAAE;MACzE,IAAIL,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAEH,OAAO,IAAI,EAACjB,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAE0B,MAAM,GAAE;QACtDL,qBAAqB,CAAC;UAAEJ,OAAO,EAAE;QAAM,CAAC,CAAC;MAC3C;IACF;EACF,CAAC;EAED,IAAMU,aAAa,GAAG,SAAhBA,aAAaA,CAAI5D,CAAM,EAAK;IAChC,IAAIwC,SAAS,EAAE;MACbA,SAAS,CAACxC,CAAC,CAAC;IACd;IACA,IAAIA,CAAC,CAAC6D,GAAG,KAAK,QAAQ,EAAE;MACtB,IAAIR,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAEH,OAAO,IAAI,EAACjB,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAE0B,MAAM,GAAE;QACtDL,qBAAqB,CAAC;UAAEJ,OAAO,EAAE;QAAM,CAAC,CAAC;MAC3C;IACF;EACF,CAAC;EAED,IAAMY,UAAU,GAAG,SAAbA,UAAUA,CAAI9D,CAAM,EAAK;IAAA,IAAA+D,qBAAA;IAC7B,IAAI,CAAC9B,UAAU,KAAK,CAACjC,CAAC,CAACgE,aAAa,IAAI,GAAAD,qBAAA,GAAClB,cAAc,CAACW,OAAO,cAAAO,qBAAA,eAAtBA,qBAAA,CAAwBN,QAAQ,CAACzD,CAAC,CAACgE,aAAa,CAAC,EAAC,EAAE;MAC3FV,qBAAqB,CAAC;QAAEJ,OAAO,EAAE;MAAM,CAAC,CAAC;IAC3C;EACF,CAAC;EAED,IAAMe,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAIjE,CAAM,EAAK;IACzC,IAAI,EAACqD,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAEH,OAAO,GAAE;MAChCI,qBAAqB,CAAC;QACpBJ,OAAO,EAAE,CAACG,kBAAkB,CAACH,OAAO;QACpCgB,KAAK,EAAE,CAACb,kBAAkB,CAACH,OAAO,IAAI,CAAAlD,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEmE,MAAM,MAAK;MACtD,CAAC,CAAC;IACJ;EACF,CAAC;;EAED;EACAlF,KAAK,CAACmF,SAAS,CAAC,YAAM;IACpB,IAAI,CAAC,EAACnC,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAE0B,MAAM,KAAI,EAACN,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAEH,OAAO,GAAE;MACxDI,qBAAqB,CAAC;QAAEJ,OAAO,EAAE,IAAI;QAAEgB,KAAK,EAAE;MAAM,CAAC,CAAC;IACxD;EACF,CAAC,EAAE,CAACjC,UAAU,EAAEoB,kBAAkB,CAAC,CAAC;;EAEpC;EACApE,KAAK,CAACmF,SAAS,CAAC,YAAM;IACpBC,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAEf,kBAAkB,CAAC;IACtD,OAAO,YAAM;MACXc,QAAQ,CAACE,mBAAmB,CAAC,OAAO,EAAEhB,kBAAkB,CAAC;IAC3D,CAAC;EACH,CAAC,CAAC;;EAEF;EACAtE,KAAK,CAACmF,SAAS,CAAC,YAAM;IACpB,IAAIf,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAEH,OAAO,EAAE;MAAA,IAAAsB,qBAAA;MAC/BzB,mBAAmB,aAAnBA,mBAAmB,wBAAAyB,qBAAA,GAAnBzB,mBAAmB,CAAES,OAAO,cAAAgB,qBAAA,uBAA5BA,qBAAA,CAA8BN,KAAK,CAAC;QAAEO,YAAY,EAAEpB,kBAAkB,CAACa;MAAM,CAAQ,CAAC;IACxF;EACF,CAAC,EAAE,CAACb,kBAAkB,CAACH,OAAO,EAAEH,mBAAmB,CAAC,CAAC;EAErD,oBACE,IAAAlD,WAAA,CAAA6E,GAAA,EAACvD,OAAO;IAACU,kBAAkB,EAAEwB,kBAAkB,aAAlBA,kBAAkB,uBAAlBA,kBAAkB,CAAEH,OAAQ;IAAAyB,QAAA,eACvD,IAAA9E,WAAA,CAAA+E,IAAA,EAAChF,YAAA,WAAW;MACViF,GAAG,EAAEhC,cAAe;MACpBb,EAAE,EAAEA,EAAG;MACPS,IAAI,EAAEA,IAAK;MACXR,UAAU,EAAEA,UAAW;MACvB6C,KAAK,EAAE;QACLpC,MAAM,EAAEA;MACV,CAAE;MACFqC,MAAM,EAAEjB,UAAW;MACnBkB,SAAS,EAAE3B,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAEH,OAAO,GAAG,UAAU,GAAG,EAAG;MAAAyB,QAAA,GACxD,CAAAtB,kBAAkB,aAAlBA,kBAAkB,uBAAlBA,kBAAkB,CAAEH,OAAO,kBAC1B,IAAArD,WAAA,CAAA6E,GAAA,EAAChF,eAAA,WAAc;QACb2C,WAAW,EAAEE,QAAQ,GAAG,EAAE,GAAGF,WAAY;QACzCL,EAAE,EAAEA,EAAG;QACP6C,GAAG,EAAE9B,mBAAoB;QACzBR,QAAQ,EAAEA,QAAS;QACnBC,SAAS,EAAEoB,aAAc;QACzBnB,IAAI,EAAEA,IAAK;QACXP,aAAa,EAAE,SAAAA,cAAC+C,IAAY;UAAA,OAAK/C,cAAa,CAAC+C,IAAI,CAAC;QAAA,CAAC;QACrDhD,UAAU,EAAEA,UAAW;QACvBE,WAAW,EAAEA,WAAY;QACzB+C,eAAe,EAAE,CAACrC,cAAc;MAAE,CACnC,CACF,eACD,IAAAhD,WAAA,CAAA6E,GAAA,EAACpF,QAAA,CAAA6F,iBAAiB;QAACH,SAAS,EAAEvC,IAAI,GAAGA,IAAI,GAAG,EAAG;QAAC2C,IAAI,EAAC,QAAQ;QAAC,cAAY9C,kBAAmB;QAAAqC,QAAA,eAC3F,IAAA9E,WAAA,CAAA6E,GAAA,EAACrF,WAAA,WAAU;UACT2C,EAAE,KAAAqD,MAAA,CAAKrD,EAAE,kBAAgB;UACzBsD,UAAU,KAAAD,MAAA,CAAKrD,EAAE,kBAAgB;UACjCuD,OAAO,EAAC,WAAW;UACnBC,KAAK,EAAC,UAAU;UAChBC,QAAQ,EAAEpC,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAEH,OAAO,GAAG,CAAC,CAAC,GAAG,CAAE;UAC/CwC,MAAM,EAAEzB,sBAAuB;UAAAU,QAAA,eAC/B,IAAA9E,WAAA,CAAA6E,GAAA,EAACjF,MAAA,CAAAkG,WAAW,CAACC,MAAM;YAACnD,IAAI,EAAC,MAAM;YAACoD,KAAK,EAAEtD,QAAQ,GAAGd,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEC,KAAK,CAAC,GAAGF,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEC,KAAK;UAAE,CAAE;QAAC,CACzH;MAAC,CACI,CAAC,eACpB,IAAA9B,WAAA,CAAA6E,GAAA,EAACpF,QAAA,CAAAwG,UAAU;QAACd,SAAS,EAAEvC,IAAI,GAAGA,IAAI,GAAG,EAAG;QAAC2C,IAAI,EAAC,QAAQ;QAACW,MAAM,EAAE,CAAC9D,UAAU,IAAI,EAACoB,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAEH,OAAO,CAAC;QAAAyB,QAAA,eACzG,IAAA9E,WAAA,CAAA6E,GAAA,EAACrF,WAAA,WAAU;UACT2C,EAAE,KAAAqD,MAAA,CAAKrD,EAAE,eAAa;UACtBsD,UAAU,KAAAD,MAAA,CAAKrD,EAAE,eAAa;UAC9BuD,OAAO,EAAC,WAAW;UACnBC,KAAK,EAAC,UAAU;UAChBE,MAAM,EAAE,SAAAA,OAAC1F,CAAC,EAAK;YAAA,IAAAgG,sBAAA;YACb5D,YAAY,CAACpC,CAAC,CAAC;YACf+C,mBAAmB,aAAnBA,mBAAmB,wBAAAiD,sBAAA,GAAnBjD,mBAAmB,CAAES,OAAO,cAAAwC,sBAAA,uBAA5BA,sBAAA,CAA8B9B,KAAK,CAAC,CAAC;UACvC,CAAE;UAAAS,QAAA,eACF,IAAA9E,WAAA,CAAA6E,GAAA,EAACjF,MAAA,CAAAkG,WAAW,CAACM,KAAK;YAACxD,IAAI,EAAC,MAAM;YAACoD,KAAK,EAAEtD,QAAQ,GAAGd,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEC,KAAK,CAAC,GAAGF,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEC,KAAK;UAAE,CAAE;QAAC,CACxH;MAAC,CACH,CAAC,EACZgB,OAAO,KAAIU,kBAAkB,aAAlBA,kBAAkB,uBAAlBA,kBAAkB,CAAEH,OAAO,kBACrC,IAAArD,WAAA,CAAA6E,GAAA,EAACpF,QAAA,CAAAwG,UAAU;QAACd,SAAS,EAAEvC,IAAI,GAAGA,IAAI,GAAG,EAAG;QAAAkC,QAAA,eACtC,IAAA9E,WAAA,CAAA6E,GAAA,EAAClF,CAAA,CAAA0G,gBAAgB;UAACzD,IAAI,EAAE0D,WAAI,CAACC,KAAM;UAACP,KAAK,EAAEpE,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEC,KAAK;QAAE,CAAE;MAAC,CAC1E,CACb;IAAA,CACU;EAAC,CACP,CAAC;AAEd,CAAC;AAACG,WAAA,CAAAuE,SAAA;EAjKArE,EAAE,EAAAsE,UAAA,YAAAC,MAAA,CAAAC,UAAA;EAEFvE,UAAU,EAAAqE,UAAA,YAAAC,MAAA;EAEVrE,aAAa,EAAAoE,UAAA,YAAAG,IAAA,CAAAD,UAAA;EAEbrE,WAAW,EAAAmE,UAAA,YAAAG,IAAA,CAAAD,UAAA;EAEXpE,YAAY,EAAAkE,UAAA,YAAAG,IAAA,CAAAD,UAAA;EAEZnE,WAAW,EAAAiE,UAAA,YAAAC,MAAA;EAEXjE,kBAAkB,EAAAgE,UAAA,YAAAC,MAAA;EAElBhE,QAAQ,EAAA+D,UAAA,YAAAI,IAAA;EAERlE,SAAS,EAAA8D,UAAA,YAAAG,IAAA;EAIT/D,MAAM,EAAA4D,UAAA,YAAAC,MAAA;EAEN5D,OAAO,EAAA2D,UAAA,YAAAI;AAAA;AAAA,IAAAC,QAAA,GA6IM7E,WAAW;AAAA8E,OAAA,cAAAD,QAAA","ignoreList":[]}

package/dist/InputFields/QuickSearch.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _templateObject;
@@ -10,30 +11,40 @@ import { COLORS, LoadingIndicator } from '..';
 import { SystemIcons } from '../icons';
 import SearchBarInput from './components/SearchBarInput';
 import SearchField, { StyledSearchField } from './components/SearchField';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const 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, props => COLORS.getColor('white', props.theme), props => COLORS.getColor('neutral_400', props.theme), props => COLORS.getColor('primary_800', props.theme), IconButtonStyledSecondary, props => props.$shouldNotInteract ? 'none' : 'auto');
-const QuickSearch = _ref => {
-  let {
-    id,
-    searchTerm,
-    setSearchTerm,
-    enterSearch,
-    removeSearch,
-    placeholder,
-    performSearchLabel,
-    disabled,
-    onKeyDown,
-    size,
-    margin,
-    loading
-  } = _ref;
-  const theme = useTheme();
-  const searchFieldRef = React.useRef(null);
-  const searchFieldInputRef = React.useRef(null);
-  const [searchFieldVisible, setSearchFieldVisible] = React.useState({
-    visible: false
-  });
-  const handleClickOutside = e => {
+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, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_400', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, 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 theme = useTheme();
+  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({
@@ -42,7 +53,7 @@ const QuickSearch = _ref => {
       }
     }
   };
-  const handleKeyDown = e => {
+  var handleKeyDown = function handleKeyDown(e) {
     if (onKeyDown) {
       onKeyDown(e);
     }
@@ -54,7 +65,7 @@ const QuickSearch = _ref => {
       }
     }
   };
-  const handleBlur = e => {
+  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({
@@ -62,7 +73,7 @@ const QuickSearch = _ref => {
       });
     }
   };
-  const handleSearchIconAction = e => {
+  var handleSearchIconAction = function handleSearchIconAction(e) {
     if (!(searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible)) {
       setSearchFieldVisible({
         visible: !searchFieldVisible.visible,
@@ -72,7 +83,7 @@ const QuickSearch = _ref => {
   };
 
   // set search field visibility on search term change
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (!!(searchTerm !== null && searchTerm !== void 0 && searchTerm.length) && !(searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible)) {
       setSearchFieldVisible({
         visible: true,
@@ -82,18 +93,18 @@ const QuickSearch = _ref => {
   }, [searchTerm, searchFieldVisible]);
 
   // register click outside handler
-  React.useEffect(() => {
+  React.useEffect(function () {
     document.addEventListener('click', handleClickOutside);
-    return () => {
+    return function () {
       document.removeEventListener('click', handleClickOutside);
     };
   });
 
   // focus search input on visibility change
-  React.useEffect(() => {
+  React.useEffect(function () {
     if (searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible) {
       var _searchFieldInputRef$;
-      searchFieldInputRef === null || searchFieldInputRef === void 0 || (_searchFieldInputRef$ = searchFieldInputRef.current) === null || _searchFieldInputRef$ === void 0 || _searchFieldInputRef$.focus({
+      searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : (_searchFieldInputRef$ = searchFieldInputRef.current) === null || _searchFieldInputRef$ === void 0 ? void 0 : _searchFieldInputRef$.focus({
         focusVisible: searchFieldVisible.focus
       });
     }
@@ -117,7 +128,9 @@ const QuickSearch = _ref => {
         disabled: disabled,
         onKeyDown: handleKeyDown,
         size: size,
-        setSearchTerm: term => setSearchTerm(term),
+        setSearchTerm: function setSearchTerm(term) {
+          return _setSearchTerm(term);
+        },
         searchTerm: searchTerm,
         enterSearch: enterSearch,
         focusParentRefs: [searchFieldRef]
@@ -146,10 +159,10 @@ const QuickSearch = _ref => {
           dataTestId: "".concat(id, "_Clearicon"),
           variant: "secondary",
           shape: "circular",
-          action: e => {
+          action: function action(e) {
             var _searchFieldInputRef$2;
             removeSearch(e);
-            searchFieldInputRef === null || searchFieldInputRef === void 0 || (_searchFieldInputRef$2 = searchFieldInputRef.current) === null || _searchFieldInputRef$2 === void 0 || _searchFieldInputRef$2.focus();
+            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",

package/dist/InputFields/QuickSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickSearch.js","names":["React","styled","useTheme","IconButton","IconButtonStyledSecondary","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","SystemIcons","SearchBarInput","SearchField","StyledSearchField","jsx","_jsx","jsxs","_jsxs","Wrapper","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","$shouldNotInteract","QuickSearch","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","useRef","searchFieldInputRef","searchFieldVisible","setSearchFieldVisible","useState","visible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","_searchFieldRef$curre","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","_searchFieldInputRef$","focusVisible","children","ref","style","onBlur","className","term","focusParentRefs","role","concat","dataTestId","variant","shape","tabIndex","action","Search","color","hidden","_searchFieldInputRef$2","Clear","Small","propTypes","_pt","string","isRequired","func","bool"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport IconButton, { IconButtonStyledSecondary } from '../Button/Iconbutton';\r\nimport { SearchIconWrapper, StyledIcon } from './styling';\r\nimport { Size } from '../types';\r\nimport { COLORS, LoadingIndicator } from '..';\r\nimport { SystemIcons } from '../icons';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField, { StyledSearchField } from './components/SearchField';\r\n\r\nconst Wrapper = styled.div<{$shouldNotInteract: boolean}>`\r\n  width: 100%;\r\n\r\n  ${StyledSearchField} {\r\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\r\n\r\n    background-color: transparent;\r\n\r\n    &.small {\r\n      width: 48px;\r\n    }\r\n\r\n    &.medium {\r\n      width: 56px;\r\n    }\r\n\r\n    &.expanded {\r\n      width: 100%;\r\n    }\r\n\r\n    box-shadow: none;\r\n\r\n    &:hover {\r\n      box-shadow: none;\r\n    }\r\n\r\n    &.expanded {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n    }\r\n\r\n    &.expanded:hover,\r\n    &.expanded:focus-within {\r\n      box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  ${IconButtonStyledSecondary} {\r\n    pointer-events: ${(props) => (props.$shouldNotInteract ? 'none' : 'auto')};\r\n  }\r\n`;\r\n\r\nexport type QuickSearchProps = {\r\n  /** Required. Id of the component. */\r\n  id: string;\r\n  /** Optional. Current search term entered by the user. */\r\n  searchTerm?: string;\r\n  /** Required. Handler to be called when user modified input. */\r\n  setSearchTerm: (term: string) => void;\r\n  /** Required. Handler to be called when user triggers search. */\r\n  enterSearch: (e: any) => void;\r\n  /** Required. Handler to be called when user clears input field. */\r\n  removeSearch: (e: any) => void;\r\n  /** Optional. Placeholder text to be shown in the input field when there is no input. */\r\n  placeholder?: string;\r\n  /** Optional. ARIA label to set on the input field. */\r\n  performSearchLabel?: string;\r\n  /** Optional. If disabled user can not interact with the search bar. */\r\n  disabled?: boolean;\r\n  /** Optional. Optional onkeydown handler to be set on the input field. */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /** Optional. Size of the component. Defaults to 'medium'.   */\r\n  size?: Size.Small | Size.Medium;\r\n  /** Optional. Margin style attribute to be set on the input field. */\r\n  margin?: string;\r\n  /** Optional. If set then loading indicator will be shown on the right side of the input field. */\r\n  loading?: boolean;\r\n};\r\n\r\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\r\n  id,\r\n  searchTerm,\r\n  setSearchTerm,\r\n  enterSearch,\r\n  removeSearch,\r\n  placeholder,\r\n  performSearchLabel,\r\n  disabled,\r\n  onKeyDown,\r\n  size,\r\n  margin,\r\n  loading,\r\n}: QuickSearchProps) => {\r\n  const theme = useTheme();\r\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\r\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\r\n\r\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\r\n    visible: false,\r\n  });\r\n\r\n  const handleClickOutside = (e: any) => {\r\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\r\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n        setSearchFieldVisible({ visible: false });\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (onKeyDown) {\r\n      onKeyDown(e);\r\n    }\r\n    if (e.key === 'Escape') {\r\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n        setSearchFieldVisible({ visible: false });\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleBlur = (e: any) => {\r\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\r\n      setSearchFieldVisible({ visible: false });\r\n    }\r\n  };\r\n\r\n  const handleSearchIconAction = (e: any) => {\r\n    if (!searchFieldVisible?.visible) {\r\n      setSearchFieldVisible({\r\n        visible: !searchFieldVisible.visible,\r\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\r\n      });\r\n    }\r\n  };\r\n\r\n  // set search field visibility on search term change\r\n  React.useEffect(() => {\r\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\r\n      setSearchFieldVisible({ visible: true, focus: false });\r\n    }\r\n  }, [searchTerm, searchFieldVisible]);\r\n\r\n  // register click outside handler\r\n  React.useEffect(() => {\r\n    document.addEventListener('click', handleClickOutside);\r\n    return () => {\r\n      document.removeEventListener('click', handleClickOutside);\r\n    };\r\n  });\r\n\r\n  // focus search input on visibility change\r\n  React.useEffect(() => {\r\n    if (searchFieldVisible?.visible) {\r\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\r\n    }\r\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\r\n\r\n  return (\r\n    <Wrapper $shouldNotInteract={searchFieldVisible?.visible}>\r\n      <SearchField\r\n        ref={searchFieldRef}\r\n        id={id}\r\n        size={size}\r\n        searchTerm={searchTerm}\r\n        style={{\r\n          margin: margin,\r\n        }}\r\n        onBlur={handleBlur}\r\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\r\n        {searchFieldVisible?.visible && (\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            ref={searchFieldInputRef}\r\n            disabled={disabled}\r\n            onKeyDown={handleKeyDown}\r\n            size={size}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            enterSearch={enterSearch}\r\n            focusParentRefs={[searchFieldRef]}\r\n          />\r\n        )}\r\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\r\n          <IconButton\r\n            id={`${id}_Searchbutton`}\r\n            dataTestId={`${id}_Searchbutton`}\r\n            variant=\"secondary\"\r\n            shape=\"circular\"\r\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\r\n            action={handleSearchIconAction}>\r\n            <SystemIcons.Search size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\r\n          </IconButton>\r\n        </SearchIconWrapper>\r\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\r\n          <IconButton\r\n            id={`${id}_Clearicon`}\r\n            dataTestId={`${id}_Clearicon`}\r\n            variant=\"secondary\"\r\n            shape=\"circular\"\r\n            action={(e) => {\r\n              removeSearch(e);\r\n              searchFieldInputRef?.current?.focus();\r\n            }}>\r\n            <SystemIcons.Clear size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\r\n          </IconButton>\r\n        </StyledIcon>\r\n        {loading && searchFieldVisible?.visible && (\r\n          <StyledIcon className={size ? size : ''}>\r\n            <LoadingIndicator size={Size.Small} color={COLORS.getColor('neutral_600', theme)} />\r\n          </StyledIcon>\r\n        )}\r\n      </SearchField>\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default QuickSearch;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"QuickSearch.js","names":["React","styled","useTheme","IconButton","IconButtonStyledSecondary","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","SystemIcons","SearchBarInput","SearchField","StyledSearchField","jsx","_jsx","jsxs","_jsxs","Wrapper","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","$shouldNotInteract","QuickSearch","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","useRef","searchFieldInputRef","_React$useState","useState","visible","_React$useState2","_slicedToArray","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","_searchFieldRef$curre","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","_searchFieldInputRef$","focusVisible","children","ref","style","onBlur","className","term","focusParentRefs","role","concat","dataTestId","variant","shape","tabIndex","action","Search","color","hidden","_searchFieldInputRef$2","Clear","Small","propTypes","_pt","string","isRequired","func","bool"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport IconButton, { IconButtonStyledSecondary } from '../Button/Iconbutton';\r\nimport { SearchIconWrapper, StyledIcon } from './styling';\r\nimport { Size } from '../types';\r\nimport { COLORS, LoadingIndicator } from '..';\r\nimport { SystemIcons } from '../icons';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField, { StyledSearchField } from './components/SearchField';\r\n\r\nconst Wrapper = styled.div<{$shouldNotInteract: boolean}>`\r\n  width: 100%;\r\n\r\n  ${StyledSearchField} {\r\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\r\n\r\n    background-color: transparent;\r\n\r\n    &.small {\r\n      width: 48px;\r\n    }\r\n\r\n    &.medium {\r\n      width: 56px;\r\n    }\r\n\r\n    &.expanded {\r\n      width: 100%;\r\n    }\r\n\r\n    box-shadow: none;\r\n\r\n    &:hover {\r\n      box-shadow: none;\r\n    }\r\n\r\n    &.expanded {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n    }\r\n\r\n    &.expanded:hover,\r\n    &.expanded:focus-within {\r\n      box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  ${IconButtonStyledSecondary} {\r\n    pointer-events: ${(props) => (props.$shouldNotInteract ? 'none' : 'auto')};\r\n  }\r\n`;\r\n\r\nexport type QuickSearchProps = {\r\n  /** Required. Id of the component. */\r\n  id: string;\r\n  /** Optional. Current search term entered by the user. */\r\n  searchTerm?: string;\r\n  /** Required. Handler to be called when user modified input. */\r\n  setSearchTerm: (term: string) => void;\r\n  /** Required. Handler to be called when user triggers search. */\r\n  enterSearch: (e: any) => void;\r\n  /** Required. Handler to be called when user clears input field. */\r\n  removeSearch: (e: any) => void;\r\n  /** Optional. Placeholder text to be shown in the input field when there is no input. */\r\n  placeholder?: string;\r\n  /** Optional. ARIA label to set on the input field. */\r\n  performSearchLabel?: string;\r\n  /** Optional. If disabled user can not interact with the search bar. */\r\n  disabled?: boolean;\r\n  /** Optional. Optional onkeydown handler to be set on the input field. */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /** Optional. Size of the component. Defaults to 'medium'.   */\r\n  size?: Size.Small | Size.Medium;\r\n  /** Optional. Margin style attribute to be set on the input field. */\r\n  margin?: string;\r\n  /** Optional. If set then loading indicator will be shown on the right side of the input field. */\r\n  loading?: boolean;\r\n};\r\n\r\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\r\n  id,\r\n  searchTerm,\r\n  setSearchTerm,\r\n  enterSearch,\r\n  removeSearch,\r\n  placeholder,\r\n  performSearchLabel,\r\n  disabled,\r\n  onKeyDown,\r\n  size,\r\n  margin,\r\n  loading,\r\n}: QuickSearchProps) => {\r\n  const theme = useTheme();\r\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\r\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\r\n\r\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\r\n    visible: false,\r\n  });\r\n\r\n  const handleClickOutside = (e: any) => {\r\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\r\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n        setSearchFieldVisible({ visible: false });\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (onKeyDown) {\r\n      onKeyDown(e);\r\n    }\r\n    if (e.key === 'Escape') {\r\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n        setSearchFieldVisible({ visible: false });\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleBlur = (e: any) => {\r\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\r\n      setSearchFieldVisible({ visible: false });\r\n    }\r\n  };\r\n\r\n  const handleSearchIconAction = (e: any) => {\r\n    if (!searchFieldVisible?.visible) {\r\n      setSearchFieldVisible({\r\n        visible: !searchFieldVisible.visible,\r\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\r\n      });\r\n    }\r\n  };\r\n\r\n  // set search field visibility on search term change\r\n  React.useEffect(() => {\r\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\r\n      setSearchFieldVisible({ visible: true, focus: false });\r\n    }\r\n  }, [searchTerm, searchFieldVisible]);\r\n\r\n  // register click outside handler\r\n  React.useEffect(() => {\r\n    document.addEventListener('click', handleClickOutside);\r\n    return () => {\r\n      document.removeEventListener('click', handleClickOutside);\r\n    };\r\n  });\r\n\r\n  // focus search input on visibility change\r\n  React.useEffect(() => {\r\n    if (searchFieldVisible?.visible) {\r\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\r\n    }\r\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\r\n\r\n  return (\r\n    <Wrapper $shouldNotInteract={searchFieldVisible?.visible}>\r\n      <SearchField\r\n        ref={searchFieldRef}\r\n        id={id}\r\n        size={size}\r\n        searchTerm={searchTerm}\r\n        style={{\r\n          margin: margin,\r\n        }}\r\n        onBlur={handleBlur}\r\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\r\n        {searchFieldVisible?.visible && (\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            ref={searchFieldInputRef}\r\n            disabled={disabled}\r\n            onKeyDown={handleKeyDown}\r\n            size={size}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            enterSearch={enterSearch}\r\n            focusParentRefs={[searchFieldRef]}\r\n          />\r\n        )}\r\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\r\n          <IconButton\r\n            id={`${id}_Searchbutton`}\r\n            dataTestId={`${id}_Searchbutton`}\r\n            variant=\"secondary\"\r\n            shape=\"circular\"\r\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\r\n            action={handleSearchIconAction}>\r\n            <SystemIcons.Search size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\r\n          </IconButton>\r\n        </SearchIconWrapper>\r\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\r\n          <IconButton\r\n            id={`${id}_Clearicon`}\r\n            dataTestId={`${id}_Clearicon`}\r\n            variant=\"secondary\"\r\n            shape=\"circular\"\r\n            action={(e) => {\r\n              removeSearch(e);\r\n              searchFieldInputRef?.current?.focus();\r\n            }}>\r\n            <SystemIcons.Clear size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\r\n          </IconButton>\r\n        </StyledIcon>\r\n        {loading && searchFieldVisible?.visible && (\r\n          <StyledIcon className={size ? size : ''}>\r\n            <LoadingIndicator size={Size.Small} color={COLORS.getColor('neutral_600', theme)} />\r\n          </StyledIcon>\r\n        )}\r\n      </SearchField>\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default QuickSearch;\r\n"],"mappings":"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","ignoreList":[]}