@laerdal/life-react-components 5.0.9 → 5.1.0

package/dist/InputFields/SearchBar.cjs

@@ -1,12 +1,10 @@
 "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;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
@@ -21,42 +19,38 @@ var _Dropdown = require("../Dropdown");
 var _common = require("../common");
 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 _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 ClearIconWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"])));
-var SearchBar = function SearchBar(_ref) {
-  var id = _ref.id,
-    searchTerm = _ref.searchTerm,
-    _setSearchTerm = _ref.setSearchTerm,
-    enterSearch = _ref.enterSearch,
-    removeSearch = _ref.removeSearch,
-    placeholder = _ref.placeholder,
-    performSearchLabel = _ref.performSearchLabel,
-    disabled = _ref.disabled,
-    validationMessage = _ref.validationMessage,
-    onKeyDown = _ref.onKeyDown,
-    size = _ref.size,
-    margin = _ref.margin,
-    showDropdown = _ref.showDropdown,
-    dropdownButtonIcon = _ref.dropdownButtonIcon,
-    dropdownButtonLabel = _ref.dropdownButtonLabel,
-    dropdownButtonVariant = _ref.dropdownButtonVariant,
-    dropdownButtonAction = _ref.dropdownButtonAction,
-    _ref$searchList = _ref.searchList,
-    searchList = _ref$searchList === void 0 ? [] : _ref$searchList,
-    addToSearchList = _ref.addToSearchList,
-    dropdownScrollable = _ref.dropdownScrollable;
-  var containerRef = _react["default"].useRef(null);
-  var theme = (0, _styledComponents.useTheme)();
-  var topLevelRef = _react["default"].useRef(null);
-  var _React$useState = _react["default"].useState(false),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    isOpen = _React$useState2[0],
-    setIsOpen = _React$useState2[1];
-  var dropdownRef = (0, _common.useClickOutsideRef)(function () {
-    return setIsOpen(false);
-  }, [containerRef, topLevelRef]);
-  var isPressingEnter = function isPressingEnter(e) {
+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 ClearIconWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"])));
+const SearchBar = _ref => {
+  let {
+    id,
+    searchTerm,
+    setSearchTerm,
+    enterSearch,
+    removeSearch,
+    placeholder,
+    performSearchLabel,
+    disabled,
+    validationMessage,
+    onKeyDown,
+    size,
+    margin,
+    showDropdown,
+    dropdownButtonIcon,
+    dropdownButtonLabel,
+    dropdownButtonVariant,
+    dropdownButtonAction,
+    searchList = [],
+    addToSearchList,
+    dropdownScrollable
+  } = _ref;
+  const containerRef = _react.default.useRef(null);
+  const theme = (0, _styledComponents.useTheme)();
+  const topLevelRef = _react.default.useRef(null);
+  const [isOpen, setIsOpen] = _react.default.useState(false);
+  const dropdownRef = (0, _common.useClickOutsideRef)(() => setIsOpen(false), [containerRef, topLevelRef]);
+  const isPressingEnter = e => {
     if (e.key === 'Enter') {
       e.preventDefault();
       e.stopPropagation();
@@ -64,13 +58,13 @@ var SearchBar = function SearchBar(_ref) {
     }
     return false;
   };
-  var enteredSearchTerm = function enteredSearchTerm(e) {
+  const enteredSearchTerm = e => {
     addToSearchList && addToSearchList({
       value: e.target.value
     });
     enterSearch(e);
   };
-  var dropdownAction = function dropdownAction() {
+  const dropdownAction = () => {
     if (dropdownButtonAction) dropdownButtonAction();
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -78,28 +72,24 @@ var SearchBar = function SearchBar(_ref) {
       $disabled: disabled,
       ref: topLevelRef,
       $margin: margin,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SearchField["default"], {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SearchField.default, {
         id: 'id',
         size: size,
         ref: containerRef,
         searchTerm: searchTerm,
         disabled: disabled,
         validationMessage: validationMessage,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBarInput["default"], {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBarInput.default, {
           placeholder: disabled ? '' : placeholder,
           id: id,
           size: size,
           disabled: disabled,
-          setSearchTerm: function setSearchTerm(term) {
-            return _setSearchTerm(term);
-          },
+          setSearchTerm: term => setSearchTerm(term),
           searchTerm: searchTerm,
           onKeyDown: onKeyDown,
           enterSearch: enteredSearchTerm,
           focusParentRefs: [containerRef],
-          onClick: function onClick() {
-            return setIsOpen(!isOpen);
-          },
+          onClick: () => setIsOpen(!isOpen),
           ref: dropdownRef
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styling.SearchIconWrapper, {
           className: size ? size : '',
@@ -110,9 +100,7 @@ var SearchBar = function SearchBar(_ref) {
             shape: "circular",
             action: enterSearch,
             disabled: disabled,
-            onKeyPress: function onKeyPress(e) {
-              return isPressingEnter(e) ? enterSearch(e) : null;
-            },
+            onKeyPress: e => isPressingEnter(e) ? enterSearch(e) : null,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Search, {
               size: "24px"
             })
@@ -125,9 +113,7 @@ var SearchBar = function SearchBar(_ref) {
             shape: "circular",
             action: removeSearch,
             disabled: disabled,
-            onKeyPress: function onKeyPress(e) {
-              return isPressingEnter(e) ? removeSearch(e) : null;
-            },
+            onKeyPress: e => isPressingEnter(e) ? removeSearch(e) : null,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Clear, {
               size: "24px"
             })
@@ -145,7 +131,7 @@ var SearchBar = function SearchBar(_ref) {
           actionLabel: dropdownButtonLabel,
           actionIcon: dropdownButtonIcon,
           actionVariant: dropdownButtonVariant,
-          onValueUpdate: function onValueUpdate(e) {},
+          onValueUpdate: e => {},
           scrollable: dropdownScrollable,
           pinTopItem: true
         },
@@ -153,12 +139,10 @@ var SearchBar = function SearchBar(_ref) {
         setIsOpen: setIsOpen,
         filter: '',
         selectedValues: searchTerm ? [searchTerm] : [],
-        setSelectedValues: function setSelectedValues(e) {
-          return _setSearchTerm(e[0]);
-        },
+        setSelectedValues: e => setSearchTerm(e[0]),
         messageOnNoResults: '',
         focused: null,
-        setFocused: function setFocused() {}
+        setFocused: () => {}
       })]
     }), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
       className: size || '',
@@ -172,26 +156,25 @@ var SearchBar = function SearchBar(_ref) {
   });
 };
 SearchBar.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,
-  validationMessage: _propTypes["default"].string,
-  onKeyDown: _propTypes["default"].func,
-  margin: _propTypes["default"].string,
-  showDropdown: _propTypes["default"].bool,
-  dropdownButtonIcon: _propTypes["default"].node,
-  dropdownButtonLabel: _propTypes["default"].string,
-  dropdownButtonVariant: _propTypes["default"].oneOf(['primary', 'secondary', 'tertiary']),
-  dropdownButtonAction: _propTypes["default"].func,
-  searchList: _propTypes["default"].array,
-  addToSearchList: _propTypes["default"].func,
-  dropdownScrollable: _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,
+  validationMessage: _propTypes.default.string,
+  onKeyDown: _propTypes.default.func,
+  margin: _propTypes.default.string,
+  showDropdown: _propTypes.default.bool,
+  dropdownButtonIcon: _propTypes.default.node,
+  dropdownButtonLabel: _propTypes.default.string,
+  dropdownButtonVariant: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary']),
+  dropdownButtonAction: _propTypes.default.func,
+  searchList: _propTypes.default.array,
+  addToSearchList: _propTypes.default.func,
+  dropdownScrollable: _propTypes.default.bool
 };
-var _default = SearchBar;
-exports["default"] = _default;
+var _default = exports.default = SearchBar;
 //# sourceMappingURL=SearchBar.cjs.map

package/dist/InputFields/SearchBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.cjs","names":["_react","_interopRequireDefault","require","_index","_icons","_styling","_Button","_SearchBarInput","_SearchField","_styledComponents","_interopRequireWildcard","_Dropdown","_common","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ClearIconWrapper","styled","div","_taggedTemplateLiteral2","SearchBar","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","_ref$searchList","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","theme","useTheme","topLevelRef","_React$useState","useState","_React$useState2","_slicedToArray2","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","jsxs","Fragment","children","InputWrapper","$disabled","ref","$margin","jsx","term","focusParentRefs","onClick","SearchIconWrapper","className","IconButton","concat","variant","shape","action","onKeyPress","SystemIcons","Search","Clear","DropdownContent","isButton","ariaRolesType","customizationProps","items","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","filter","selectedValues","setSelectedValues","messageOnNoResults","focused","setFocused","ErrorMessage","TechnicalWarning","color","COLORS","getColor","propTypes","_propTypes","string","isRequired","func","bool","node","oneOf","array","_default","exports"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\r\nimport {COLORS} from '../styles/index';\r\nimport {SystemIcons} from '../icons';\r\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\r\nimport {IconButton} from '../Button';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField from './components/SearchField';\r\nimport {Size} from '../types';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { DropdownContent, DropdownItem } from '../Dropdown';\r\nimport { useClickOutsideRef } from '../common';\r\n\r\nexport type SearchBarProps = {\r\n  /**\r\n   * Required. The ID of the search bar.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. The current search term in the search bar.\r\n   */\r\n  searchTerm?: string;\r\n  /**\r\n   * Required. A function to be called when the search term changes.\r\n   * It should take a string representing the new search term.\r\n   */\r\n  setSearchTerm: (term: string) => void;\r\n  /**\r\n   * Required. A function to be called when the enter key is pressed in the search bar.\r\n   * It should take an event object as a parameter.\r\n   */\r\n  enterSearch: (e: any) => void;\r\n  /**\r\n   * Required. A function to be called when the search term is removed.\r\n   * It should take an event object as a parameter.\r\n   */\r\n  removeSearch: (e: any) => void;\r\n  /**\r\n   * Optional. The placeholder text to be displayed in the search bar when it is empty.\r\n   */\r\n  placeholder?: string;\r\n  /**\r\n   * Optional. The label for the search button in the search bar.\r\n   */\r\n  performSearchLabel?: string;\r\n  /**\r\n   * Optional. A boolean indicating whether the search bar is disabled.\r\n   */\r\n  disabled?: boolean;\r\n  /**\r\n   * Optional. The validation message to be displayed when the search bar is in an error state.\r\n   */\r\n  validationMessage?: string;\r\n  /**\r\n   * Optional. A function to be called when a keydown event occurs in the search bar.\r\n   */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /**\r\n   * Optional. The size of the search bar. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n  /**\r\n   * Optional. The margin of the search bar. Can be any valid CSS margin value.\r\n   */\r\n  margin?: string;\r\n  /**\r\n   * Optional. A boolean indicating whether the dropdown in the search bar should be shown.\r\n   */\r\n  showDropdown?: boolean;\r\n  /**\r\n   * Optional. The icon for the dropdown button in the search bar.\r\n   */\r\n  dropdownButtonIcon?: React.ReactNode;\r\n  /**\r\n   * Optional. The label for the dropdown button in the search bar.\r\n   */  \r\n  dropdownButtonLabel?: string;\r\n  /**\r\n   * Optional. The variant of the dropdown button in the search bar. Can be 'primary', 'secondary', or 'tertiary'.\r\n   */  \r\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\r\n  /**\r\n   * Optional. A function to be called when the dropdown button in the search bar is clicked.\r\n   */  \r\n  dropdownButtonAction?: () => boolean | void | undefined;\r\n  /**\r\n   * Optional. An array of DropdownItem objects representing the items in the dropdown.\r\n   */\r\n  searchList?: DropdownItem[];\r\n  /**\r\n   * Optional. A function to be called when an item is added to the dropdown.\r\n   * It should take a DropdownItem object as a parameter.\r\n   */\r\n  addToSearchList?: (e: DropdownItem) => void;\r\n  /**\r\n   * Optional. A boolean indicating whether the dropdown in the search bar is scrollable.\r\n   */\r\n  dropdownScrollable?: boolean;\r\n};\r\n\r\nconst ClearIconWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  &.hidden {\r\n    display: none !important;\r\n  }\r\n`;\r\n\r\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\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                                                             validationMessage,\r\n                                                             onKeyDown,\r\n                                                             size,\r\n                                                             margin,\r\n                                                             showDropdown,\r\n                                                             dropdownButtonIcon,\r\n                                                             dropdownButtonLabel,\r\n                                                             dropdownButtonVariant,\r\n                                                             dropdownButtonAction,\r\n                                                             searchList=[],\r\n                                                             addToSearchList,\r\n                                                             dropdownScrollable\r\n                                                           }) => {\r\n  const containerRef = React.useRef<any>(null);\r\n  const theme = useTheme();\r\n  const topLevelRef = React.useRef<any>(null);\r\n\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef, topLevelRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  const enteredSearchTerm = (e: any) => {\r\n    addToSearchList && addToSearchList({value:e.target.value});\r\n    enterSearch(e);\r\n  }\r\n\r\n  const dropdownAction = () => {\r\n    if(dropdownButtonAction)\r\n      dropdownButtonAction();    \r\n  }\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        $disabled={disabled}\r\n        ref={topLevelRef}\r\n        $margin={margin}>\r\n        <SearchField id={'id'} size={size}\r\n                     ref={containerRef}\r\n                     searchTerm={searchTerm}\r\n                     disabled={disabled}\r\n                     validationMessage={validationMessage}>\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            size={size}\r\n            disabled={disabled}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            onKeyDown={onKeyDown}\r\n            enterSearch={enteredSearchTerm}\r\n            focusParentRefs={[containerRef]}\r\n            onClick={()=>setIsOpen(!isOpen)}\r\n            ref={dropdownRef}\r\n          />\r\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\r\n            <IconButton id={`${id}_Search`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={enterSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\r\n              <SystemIcons.Search size=\"24px\"/>\r\n            </IconButton>\r\n          </SearchIconWrapper>\r\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\r\n            <IconButton id={`${id}_Clear`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={removeSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\r\n              <SystemIcons.Clear size=\"24px\"/>\r\n            </IconButton>\r\n          </ClearIconWrapper>\r\n        </SearchField>\r\n\r\n      {showDropdown && <DropdownContent id={'search'}\r\n                                        containerRef={containerRef}\r\n          size={size}\r\n          isButton={false}\r\n          ariaRolesType=\"input\"\r\n          customizationProps={{\r\n            items:searchList,\r\n            action: dropdownAction,\r\n            actionLabel: dropdownButtonLabel,\r\n            actionIcon: dropdownButtonIcon,\r\n            actionVariant: dropdownButtonVariant,\r\n            onValueUpdate:(e)=>{},\r\n            scrollable: dropdownScrollable,\r\n            pinTopItem: true\r\n          }}\r\n          isOpen={isOpen}\r\n          setIsOpen={setIsOpen}\r\n          filter={''}\r\n          selectedValues={searchTerm ? [searchTerm] : []}\r\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\r\n          messageOnNoResults={''}\r\n          focused={null}\r\n          setFocused={()=>{}}\r\n        />}\r\n\r\n      </InputWrapper>\r\n      {validationMessage && (\r\n        <ErrorMessage className={size || ''}>\r\n          <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)} className={size || ''}/>\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default SearchBar;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchBar.cjs","names":["_react","_interopRequireDefault","require","_index","_icons","_styling","_Button","_SearchBarInput","_SearchField","_styledComponents","_interopRequireWildcard","_Dropdown","_common","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ClearIconWrapper","styled","div","_taggedTemplateLiteral2","SearchBar","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","theme","useTheme","topLevelRef","isOpen","setIsOpen","useState","dropdownRef","useClickOutsideRef","isPressingEnter","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","jsxs","Fragment","children","InputWrapper","$disabled","ref","$margin","jsx","term","focusParentRefs","onClick","SearchIconWrapper","className","IconButton","concat","variant","shape","action","onKeyPress","SystemIcons","Search","Clear","DropdownContent","isButton","ariaRolesType","customizationProps","items","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","filter","selectedValues","setSelectedValues","messageOnNoResults","focused","setFocused","ErrorMessage","TechnicalWarning","color","COLORS","getColor","propTypes","_propTypes","string","isRequired","func","bool","node","oneOf","array","_default","exports"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\r\nimport {COLORS} from '../styles/index';\r\nimport {SystemIcons} from '../icons';\r\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\r\nimport {IconButton} from '../Button';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField from './components/SearchField';\r\nimport {Size} from '../types';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { DropdownContent, DropdownItem } from '../Dropdown';\r\nimport { useClickOutsideRef } from '../common';\r\n\r\nexport type SearchBarProps = {\r\n  /**\r\n   * Required. The ID of the search bar.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. The current search term in the search bar.\r\n   */\r\n  searchTerm?: string;\r\n  /**\r\n   * Required. A function to be called when the search term changes.\r\n   * It should take a string representing the new search term.\r\n   */\r\n  setSearchTerm: (term: string) => void;\r\n  /**\r\n   * Required. A function to be called when the enter key is pressed in the search bar.\r\n   * It should take an event object as a parameter.\r\n   */\r\n  enterSearch: (e: any) => void;\r\n  /**\r\n   * Required. A function to be called when the search term is removed.\r\n   * It should take an event object as a parameter.\r\n   */\r\n  removeSearch: (e: any) => void;\r\n  /**\r\n   * Optional. The placeholder text to be displayed in the search bar when it is empty.\r\n   */\r\n  placeholder?: string;\r\n  /**\r\n   * Optional. The label for the search button in the search bar.\r\n   */\r\n  performSearchLabel?: string;\r\n  /**\r\n   * Optional. A boolean indicating whether the search bar is disabled.\r\n   */\r\n  disabled?: boolean;\r\n  /**\r\n   * Optional. The validation message to be displayed when the search bar is in an error state.\r\n   */\r\n  validationMessage?: string;\r\n  /**\r\n   * Optional. A function to be called when a keydown event occurs in the search bar.\r\n   */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /**\r\n   * Optional. The size of the search bar. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n  /**\r\n   * Optional. The margin of the search bar. Can be any valid CSS margin value.\r\n   */\r\n  margin?: string;\r\n  /**\r\n   * Optional. A boolean indicating whether the dropdown in the search bar should be shown.\r\n   */\r\n  showDropdown?: boolean;\r\n  /**\r\n   * Optional. The icon for the dropdown button in the search bar.\r\n   */\r\n  dropdownButtonIcon?: React.ReactNode;\r\n  /**\r\n   * Optional. The label for the dropdown button in the search bar.\r\n   */  \r\n  dropdownButtonLabel?: string;\r\n  /**\r\n   * Optional. The variant of the dropdown button in the search bar. Can be 'primary', 'secondary', or 'tertiary'.\r\n   */  \r\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\r\n  /**\r\n   * Optional. A function to be called when the dropdown button in the search bar is clicked.\r\n   */  \r\n  dropdownButtonAction?: () => boolean | void | undefined;\r\n  /**\r\n   * Optional. An array of DropdownItem objects representing the items in the dropdown.\r\n   */\r\n  searchList?: DropdownItem[];\r\n  /**\r\n   * Optional. A function to be called when an item is added to the dropdown.\r\n   * It should take a DropdownItem object as a parameter.\r\n   */\r\n  addToSearchList?: (e: DropdownItem) => void;\r\n  /**\r\n   * Optional. A boolean indicating whether the dropdown in the search bar is scrollable.\r\n   */\r\n  dropdownScrollable?: boolean;\r\n};\r\n\r\nconst ClearIconWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  &.hidden {\r\n    display: none !important;\r\n  }\r\n`;\r\n\r\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\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                                                             validationMessage,\r\n                                                             onKeyDown,\r\n                                                             size,\r\n                                                             margin,\r\n                                                             showDropdown,\r\n                                                             dropdownButtonIcon,\r\n                                                             dropdownButtonLabel,\r\n                                                             dropdownButtonVariant,\r\n                                                             dropdownButtonAction,\r\n                                                             searchList=[],\r\n                                                             addToSearchList,\r\n                                                             dropdownScrollable\r\n                                                           }) => {\r\n  const containerRef = React.useRef<any>(null);\r\n  const theme = useTheme();\r\n  const topLevelRef = React.useRef<any>(null);\r\n\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef, topLevelRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  const enteredSearchTerm = (e: any) => {\r\n    addToSearchList && addToSearchList({value:e.target.value});\r\n    enterSearch(e);\r\n  }\r\n\r\n  const dropdownAction = () => {\r\n    if(dropdownButtonAction)\r\n      dropdownButtonAction();    \r\n  }\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        $disabled={disabled}\r\n        ref={topLevelRef}\r\n        $margin={margin}>\r\n        <SearchField id={'id'} size={size}\r\n                     ref={containerRef}\r\n                     searchTerm={searchTerm}\r\n                     disabled={disabled}\r\n                     validationMessage={validationMessage}>\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            size={size}\r\n            disabled={disabled}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            onKeyDown={onKeyDown}\r\n            enterSearch={enteredSearchTerm}\r\n            focusParentRefs={[containerRef]}\r\n            onClick={()=>setIsOpen(!isOpen)}\r\n            ref={dropdownRef}\r\n          />\r\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\r\n            <IconButton id={`${id}_Search`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={enterSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\r\n              <SystemIcons.Search size=\"24px\"/>\r\n            </IconButton>\r\n          </SearchIconWrapper>\r\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\r\n            <IconButton id={`${id}_Clear`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={removeSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\r\n              <SystemIcons.Clear size=\"24px\"/>\r\n            </IconButton>\r\n          </ClearIconWrapper>\r\n        </SearchField>\r\n\r\n      {showDropdown && <DropdownContent id={'search'}\r\n                                        containerRef={containerRef}\r\n          size={size}\r\n          isButton={false}\r\n          ariaRolesType=\"input\"\r\n          customizationProps={{\r\n            items:searchList,\r\n            action: dropdownAction,\r\n            actionLabel: dropdownButtonLabel,\r\n            actionIcon: dropdownButtonIcon,\r\n            actionVariant: dropdownButtonVariant,\r\n            onValueUpdate:(e)=>{},\r\n            scrollable: dropdownScrollable,\r\n            pinTopItem: true\r\n          }}\r\n          isOpen={isOpen}\r\n          setIsOpen={setIsOpen}\r\n          filter={''}\r\n          selectedValues={searchTerm ? [searchTerm] : []}\r\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\r\n          messageOnNoResults={''}\r\n          focused={null}\r\n          setFocused={()=>{}}\r\n        />}\r\n\r\n      </InputWrapper>\r\n      {validationMessage && (\r\n        <ErrorMessage className={size || ''}>\r\n          <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)} className={size || ''}/>\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default SearchBar;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/SearchBar.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _templateObject;
@@ -12,43 +11,37 @@ import SearchField from './components/SearchField';
 import styled, { useTheme } from 'styled-components';
 import { DropdownContent } from '../Dropdown';
 import { useClickOutsideRef } from '../common';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-var ClearIconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"])));
-var SearchBar = function SearchBar(_ref) {
-  var id = _ref.id,
-    searchTerm = _ref.searchTerm,
-    _setSearchTerm = _ref.setSearchTerm,
-    enterSearch = _ref.enterSearch,
-    removeSearch = _ref.removeSearch,
-    placeholder = _ref.placeholder,
-    performSearchLabel = _ref.performSearchLabel,
-    disabled = _ref.disabled,
-    validationMessage = _ref.validationMessage,
-    onKeyDown = _ref.onKeyDown,
-    size = _ref.size,
-    margin = _ref.margin,
-    showDropdown = _ref.showDropdown,
-    dropdownButtonIcon = _ref.dropdownButtonIcon,
-    dropdownButtonLabel = _ref.dropdownButtonLabel,
-    dropdownButtonVariant = _ref.dropdownButtonVariant,
-    dropdownButtonAction = _ref.dropdownButtonAction,
-    _ref$searchList = _ref.searchList,
-    searchList = _ref$searchList === void 0 ? [] : _ref$searchList,
-    addToSearchList = _ref.addToSearchList,
-    dropdownScrollable = _ref.dropdownScrollable;
-  var containerRef = React.useRef(null);
-  var theme = useTheme();
-  var topLevelRef = React.useRef(null);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isOpen = _React$useState2[0],
-    setIsOpen = _React$useState2[1];
-  var dropdownRef = useClickOutsideRef(function () {
-    return setIsOpen(false);
-  }, [containerRef, topLevelRef]);
-  var isPressingEnter = function isPressingEnter(e) {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ClearIconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"])));
+const SearchBar = _ref => {
+  let {
+    id,
+    searchTerm,
+    setSearchTerm,
+    enterSearch,
+    removeSearch,
+    placeholder,
+    performSearchLabel,
+    disabled,
+    validationMessage,
+    onKeyDown,
+    size,
+    margin,
+    showDropdown,
+    dropdownButtonIcon,
+    dropdownButtonLabel,
+    dropdownButtonVariant,
+    dropdownButtonAction,
+    searchList = [],
+    addToSearchList,
+    dropdownScrollable
+  } = _ref;
+  const containerRef = React.useRef(null);
+  const theme = useTheme();
+  const topLevelRef = React.useRef(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const dropdownRef = useClickOutsideRef(() => setIsOpen(false), [containerRef, topLevelRef]);
+  const isPressingEnter = e => {
     if (e.key === 'Enter') {
       e.preventDefault();
       e.stopPropagation();
@@ -56,13 +49,13 @@ var SearchBar = function SearchBar(_ref) {
     }
     return false;
   };
-  var enteredSearchTerm = function enteredSearchTerm(e) {
+  const enteredSearchTerm = e => {
     addToSearchList && addToSearchList({
       value: e.target.value
     });
     enterSearch(e);
   };
-  var dropdownAction = function dropdownAction() {
+  const dropdownAction = () => {
     if (dropdownButtonAction) dropdownButtonAction();
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
@@ -82,16 +75,12 @@ var SearchBar = function SearchBar(_ref) {
           id: id,
           size: size,
           disabled: disabled,
-          setSearchTerm: function setSearchTerm(term) {
-            return _setSearchTerm(term);
-          },
+          setSearchTerm: term => setSearchTerm(term),
           searchTerm: searchTerm,
           onKeyDown: onKeyDown,
           enterSearch: enteredSearchTerm,
           focusParentRefs: [containerRef],
-          onClick: function onClick() {
-            return setIsOpen(!isOpen);
-          },
+          onClick: () => setIsOpen(!isOpen),
           ref: dropdownRef
         }), /*#__PURE__*/_jsx(SearchIconWrapper, {
           className: size ? size : '',
@@ -102,9 +91,7 @@ var SearchBar = function SearchBar(_ref) {
             shape: "circular",
             action: enterSearch,
             disabled: disabled,
-            onKeyPress: function onKeyPress(e) {
-              return isPressingEnter(e) ? enterSearch(e) : null;
-            },
+            onKeyPress: e => isPressingEnter(e) ? enterSearch(e) : null,
             children: /*#__PURE__*/_jsx(SystemIcons.Search, {
               size: "24px"
             })
@@ -117,9 +104,7 @@ var SearchBar = function SearchBar(_ref) {
             shape: "circular",
             action: removeSearch,
             disabled: disabled,
-            onKeyPress: function onKeyPress(e) {
-              return isPressingEnter(e) ? removeSearch(e) : null;
-            },
+            onKeyPress: e => isPressingEnter(e) ? removeSearch(e) : null,
             children: /*#__PURE__*/_jsx(SystemIcons.Clear, {
               size: "24px"
             })
@@ -137,7 +122,7 @@ var SearchBar = function SearchBar(_ref) {
           actionLabel: dropdownButtonLabel,
           actionIcon: dropdownButtonIcon,
           actionVariant: dropdownButtonVariant,
-          onValueUpdate: function onValueUpdate(e) {},
+          onValueUpdate: e => {},
           scrollable: dropdownScrollable,
           pinTopItem: true
         },
@@ -145,12 +130,10 @@ var SearchBar = function SearchBar(_ref) {
         setIsOpen: setIsOpen,
         filter: '',
         selectedValues: searchTerm ? [searchTerm] : [],
-        setSelectedValues: function setSelectedValues(e) {
-          return _setSearchTerm(e[0]);
-        },
+        setSelectedValues: e => setSearchTerm(e[0]),
         messageOnNoResults: '',
         focused: null,
-        setFocused: function setFocused() {}
+        setFocused: () => {}
       })]
     }), validationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
       className: size || '',

package/dist/InputFields/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","names":["React","COLORS","SystemIcons","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","useTheme","DropdownContent","useClickOutsideRef","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ClearIconWrapper","div","_templateObject","_taggedTemplateLiteral","SearchBar","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","_ref$searchList","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","theme","topLevelRef","_React$useState","useState","_React$useState2","_slicedToArray","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","children","$disabled","ref","$margin","term","focusParentRefs","onClick","className","concat","variant","shape","action","onKeyPress","Search","Clear","isButton","ariaRolesType","customizationProps","items","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","filter","selectedValues","setSelectedValues","messageOnNoResults","focused","setFocused","TechnicalWarning","color","getColor","propTypes","_pt","string","isRequired","func","bool","node","oneOf","array"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\r\nimport {COLORS} from '../styles/index';\r\nimport {SystemIcons} from '../icons';\r\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\r\nimport {IconButton} from '../Button';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField from './components/SearchField';\r\nimport {Size} from '../types';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { DropdownContent, DropdownItem } from '../Dropdown';\r\nimport { useClickOutsideRef } from '../common';\r\n\r\nexport type SearchBarProps = {\r\n  /**\r\n   * Required. The ID of the search bar.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. The current search term in the search bar.\r\n   */\r\n  searchTerm?: string;\r\n  /**\r\n   * Required. A function to be called when the search term changes.\r\n   * It should take a string representing the new search term.\r\n   */\r\n  setSearchTerm: (term: string) => void;\r\n  /**\r\n   * Required. A function to be called when the enter key is pressed in the search bar.\r\n   * It should take an event object as a parameter.\r\n   */\r\n  enterSearch: (e: any) => void;\r\n  /**\r\n   * Required. A function to be called when the search term is removed.\r\n   * It should take an event object as a parameter.\r\n   */\r\n  removeSearch: (e: any) => void;\r\n  /**\r\n   * Optional. The placeholder text to be displayed in the search bar when it is empty.\r\n   */\r\n  placeholder?: string;\r\n  /**\r\n   * Optional. The label for the search button in the search bar.\r\n   */\r\n  performSearchLabel?: string;\r\n  /**\r\n   * Optional. A boolean indicating whether the search bar is disabled.\r\n   */\r\n  disabled?: boolean;\r\n  /**\r\n   * Optional. The validation message to be displayed when the search bar is in an error state.\r\n   */\r\n  validationMessage?: string;\r\n  /**\r\n   * Optional. A function to be called when a keydown event occurs in the search bar.\r\n   */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /**\r\n   * Optional. The size of the search bar. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n  /**\r\n   * Optional. The margin of the search bar. Can be any valid CSS margin value.\r\n   */\r\n  margin?: string;\r\n  /**\r\n   * Optional. A boolean indicating whether the dropdown in the search bar should be shown.\r\n   */\r\n  showDropdown?: boolean;\r\n  /**\r\n   * Optional. The icon for the dropdown button in the search bar.\r\n   */\r\n  dropdownButtonIcon?: React.ReactNode;\r\n  /**\r\n   * Optional. The label for the dropdown button in the search bar.\r\n   */  \r\n  dropdownButtonLabel?: string;\r\n  /**\r\n   * Optional. The variant of the dropdown button in the search bar. Can be 'primary', 'secondary', or 'tertiary'.\r\n   */  \r\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\r\n  /**\r\n   * Optional. A function to be called when the dropdown button in the search bar is clicked.\r\n   */  \r\n  dropdownButtonAction?: () => boolean | void | undefined;\r\n  /**\r\n   * Optional. An array of DropdownItem objects representing the items in the dropdown.\r\n   */\r\n  searchList?: DropdownItem[];\r\n  /**\r\n   * Optional. A function to be called when an item is added to the dropdown.\r\n   * It should take a DropdownItem object as a parameter.\r\n   */\r\n  addToSearchList?: (e: DropdownItem) => void;\r\n  /**\r\n   * Optional. A boolean indicating whether the dropdown in the search bar is scrollable.\r\n   */\r\n  dropdownScrollable?: boolean;\r\n};\r\n\r\nconst ClearIconWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  &.hidden {\r\n    display: none !important;\r\n  }\r\n`;\r\n\r\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\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                                                             validationMessage,\r\n                                                             onKeyDown,\r\n                                                             size,\r\n                                                             margin,\r\n                                                             showDropdown,\r\n                                                             dropdownButtonIcon,\r\n                                                             dropdownButtonLabel,\r\n                                                             dropdownButtonVariant,\r\n                                                             dropdownButtonAction,\r\n                                                             searchList=[],\r\n                                                             addToSearchList,\r\n                                                             dropdownScrollable\r\n                                                           }) => {\r\n  const containerRef = React.useRef<any>(null);\r\n  const theme = useTheme();\r\n  const topLevelRef = React.useRef<any>(null);\r\n\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef, topLevelRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  const enteredSearchTerm = (e: any) => {\r\n    addToSearchList && addToSearchList({value:e.target.value});\r\n    enterSearch(e);\r\n  }\r\n\r\n  const dropdownAction = () => {\r\n    if(dropdownButtonAction)\r\n      dropdownButtonAction();    \r\n  }\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        $disabled={disabled}\r\n        ref={topLevelRef}\r\n        $margin={margin}>\r\n        <SearchField id={'id'} size={size}\r\n                     ref={containerRef}\r\n                     searchTerm={searchTerm}\r\n                     disabled={disabled}\r\n                     validationMessage={validationMessage}>\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            size={size}\r\n            disabled={disabled}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            onKeyDown={onKeyDown}\r\n            enterSearch={enteredSearchTerm}\r\n            focusParentRefs={[containerRef]}\r\n            onClick={()=>setIsOpen(!isOpen)}\r\n            ref={dropdownRef}\r\n          />\r\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\r\n            <IconButton id={`${id}_Search`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={enterSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\r\n              <SystemIcons.Search size=\"24px\"/>\r\n            </IconButton>\r\n          </SearchIconWrapper>\r\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\r\n            <IconButton id={`${id}_Clear`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={removeSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\r\n              <SystemIcons.Clear size=\"24px\"/>\r\n            </IconButton>\r\n          </ClearIconWrapper>\r\n        </SearchField>\r\n\r\n      {showDropdown && <DropdownContent id={'search'}\r\n                                        containerRef={containerRef}\r\n          size={size}\r\n          isButton={false}\r\n          ariaRolesType=\"input\"\r\n          customizationProps={{\r\n            items:searchList,\r\n            action: dropdownAction,\r\n            actionLabel: dropdownButtonLabel,\r\n            actionIcon: dropdownButtonIcon,\r\n            actionVariant: dropdownButtonVariant,\r\n            onValueUpdate:(e)=>{},\r\n            scrollable: dropdownScrollable,\r\n            pinTopItem: true\r\n          }}\r\n          isOpen={isOpen}\r\n          setIsOpen={setIsOpen}\r\n          filter={''}\r\n          selectedValues={searchTerm ? [searchTerm] : []}\r\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\r\n          messageOnNoResults={''}\r\n          focused={null}\r\n          setFocused={()=>{}}\r\n        />}\r\n\r\n      </InputWrapper>\r\n      {validationMessage && (\r\n        <ErrorMessage className={size || ''}>\r\n          <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)} className={size || ''}/>\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default SearchBar;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchBar.js","names":["React","COLORS","SystemIcons","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","useTheme","DropdownContent","useClickOutsideRef","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ClearIconWrapper","div","_templateObject","_taggedTemplateLiteral","SearchBar","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","theme","topLevelRef","isOpen","setIsOpen","useState","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","children","$disabled","ref","$margin","term","focusParentRefs","onClick","className","concat","variant","shape","action","onKeyPress","Search","Clear","isButton","ariaRolesType","customizationProps","items","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","filter","selectedValues","setSelectedValues","messageOnNoResults","focused","setFocused","TechnicalWarning","color","getColor","propTypes","_pt","string","isRequired","func","bool","node","oneOf","array"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\r\nimport {COLORS} from '../styles/index';\r\nimport {SystemIcons} from '../icons';\r\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\r\nimport {IconButton} from '../Button';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField from './components/SearchField';\r\nimport {Size} from '../types';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { DropdownContent, DropdownItem } from '../Dropdown';\r\nimport { useClickOutsideRef } from '../common';\r\n\r\nexport type SearchBarProps = {\r\n  /**\r\n   * Required. The ID of the search bar.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. The current search term in the search bar.\r\n   */\r\n  searchTerm?: string;\r\n  /**\r\n   * Required. A function to be called when the search term changes.\r\n   * It should take a string representing the new search term.\r\n   */\r\n  setSearchTerm: (term: string) => void;\r\n  /**\r\n   * Required. A function to be called when the enter key is pressed in the search bar.\r\n   * It should take an event object as a parameter.\r\n   */\r\n  enterSearch: (e: any) => void;\r\n  /**\r\n   * Required. A function to be called when the search term is removed.\r\n   * It should take an event object as a parameter.\r\n   */\r\n  removeSearch: (e: any) => void;\r\n  /**\r\n   * Optional. The placeholder text to be displayed in the search bar when it is empty.\r\n   */\r\n  placeholder?: string;\r\n  /**\r\n   * Optional. The label for the search button in the search bar.\r\n   */\r\n  performSearchLabel?: string;\r\n  /**\r\n   * Optional. A boolean indicating whether the search bar is disabled.\r\n   */\r\n  disabled?: boolean;\r\n  /**\r\n   * Optional. The validation message to be displayed when the search bar is in an error state.\r\n   */\r\n  validationMessage?: string;\r\n  /**\r\n   * Optional. A function to be called when a keydown event occurs in the search bar.\r\n   */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /**\r\n   * Optional. The size of the search bar. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n  /**\r\n   * Optional. The margin of the search bar. Can be any valid CSS margin value.\r\n   */\r\n  margin?: string;\r\n  /**\r\n   * Optional. A boolean indicating whether the dropdown in the search bar should be shown.\r\n   */\r\n  showDropdown?: boolean;\r\n  /**\r\n   * Optional. The icon for the dropdown button in the search bar.\r\n   */\r\n  dropdownButtonIcon?: React.ReactNode;\r\n  /**\r\n   * Optional. The label for the dropdown button in the search bar.\r\n   */  \r\n  dropdownButtonLabel?: string;\r\n  /**\r\n   * Optional. The variant of the dropdown button in the search bar. Can be 'primary', 'secondary', or 'tertiary'.\r\n   */  \r\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\r\n  /**\r\n   * Optional. A function to be called when the dropdown button in the search bar is clicked.\r\n   */  \r\n  dropdownButtonAction?: () => boolean | void | undefined;\r\n  /**\r\n   * Optional. An array of DropdownItem objects representing the items in the dropdown.\r\n   */\r\n  searchList?: DropdownItem[];\r\n  /**\r\n   * Optional. A function to be called when an item is added to the dropdown.\r\n   * It should take a DropdownItem object as a parameter.\r\n   */\r\n  addToSearchList?: (e: DropdownItem) => void;\r\n  /**\r\n   * Optional. A boolean indicating whether the dropdown in the search bar is scrollable.\r\n   */\r\n  dropdownScrollable?: boolean;\r\n};\r\n\r\nconst ClearIconWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  &.hidden {\r\n    display: none !important;\r\n  }\r\n`;\r\n\r\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\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                                                             validationMessage,\r\n                                                             onKeyDown,\r\n                                                             size,\r\n                                                             margin,\r\n                                                             showDropdown,\r\n                                                             dropdownButtonIcon,\r\n                                                             dropdownButtonLabel,\r\n                                                             dropdownButtonVariant,\r\n                                                             dropdownButtonAction,\r\n                                                             searchList=[],\r\n                                                             addToSearchList,\r\n                                                             dropdownScrollable\r\n                                                           }) => {\r\n  const containerRef = React.useRef<any>(null);\r\n  const theme = useTheme();\r\n  const topLevelRef = React.useRef<any>(null);\r\n\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef, topLevelRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  const enteredSearchTerm = (e: any) => {\r\n    addToSearchList && addToSearchList({value:e.target.value});\r\n    enterSearch(e);\r\n  }\r\n\r\n  const dropdownAction = () => {\r\n    if(dropdownButtonAction)\r\n      dropdownButtonAction();    \r\n  }\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        $disabled={disabled}\r\n        ref={topLevelRef}\r\n        $margin={margin}>\r\n        <SearchField id={'id'} size={size}\r\n                     ref={containerRef}\r\n                     searchTerm={searchTerm}\r\n                     disabled={disabled}\r\n                     validationMessage={validationMessage}>\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            size={size}\r\n            disabled={disabled}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            onKeyDown={onKeyDown}\r\n            enterSearch={enteredSearchTerm}\r\n            focusParentRefs={[containerRef]}\r\n            onClick={()=>setIsOpen(!isOpen)}\r\n            ref={dropdownRef}\r\n          />\r\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\r\n            <IconButton id={`${id}_Search`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={enterSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\r\n              <SystemIcons.Search size=\"24px\"/>\r\n            </IconButton>\r\n          </SearchIconWrapper>\r\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\r\n            <IconButton id={`${id}_Clear`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={removeSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\r\n              <SystemIcons.Clear size=\"24px\"/>\r\n            </IconButton>\r\n          </ClearIconWrapper>\r\n        </SearchField>\r\n\r\n      {showDropdown && <DropdownContent id={'search'}\r\n                                        containerRef={containerRef}\r\n          size={size}\r\n          isButton={false}\r\n          ariaRolesType=\"input\"\r\n          customizationProps={{\r\n            items:searchList,\r\n            action: dropdownAction,\r\n            actionLabel: dropdownButtonLabel,\r\n            actionIcon: dropdownButtonIcon,\r\n            actionVariant: dropdownButtonVariant,\r\n            onValueUpdate:(e)=>{},\r\n            scrollable: dropdownScrollable,\r\n            pinTopItem: true\r\n          }}\r\n          isOpen={isOpen}\r\n          setIsOpen={setIsOpen}\r\n          filter={''}\r\n          selectedValues={searchTerm ? [searchTerm] : []}\r\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\r\n          messageOnNoResults={''}\r\n          focused={null}\r\n          setFocused={()=>{}}\r\n        />}\r\n\r\n      </InputWrapper>\r\n      {validationMessage && (\r\n        <ErrorMessage className={size || ''}>\r\n          <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)} className={size || ''}/>\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default SearchBar;\r\n"],"mappings":"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","ignoreList":[]}