@laerdal/life-react-components 1.7.0 → 1.8.0-dev.2.full

package/dist/InputFields/QuickSearch.js

@@ -12,16 +12,10 @@ import { Size } from '../types';
 import { COLORS, LoadingIndicator } from '..';
 import { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';
 import SearchBarInput from './components/SearchBarInput';
-import { StyledSearchField } from './components/SearchField';
+import SearchField, { StyledSearchField } from './components/SearchField';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var QuickSearchField = styled(StyledSearchField)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  -webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n  transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n  background-color: transparent;\n  &.small {\n    width: 48px;\n  }\n\n  &.medium {\n    width: 56px;\n  }\n  \n  &.expanded{\n    width: 100%;\n    background-color: ", ";\n  }\n\n  input {\n    ::placeholder {\n      font-style: italic;\n      color: ", ";\n    }\n  }\n\n  box-shadow: ", ";\n\n  &:hover {\n    box-shadow: ", ";\n  }\n"])), function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
-}, COLORS.white, COLORS.neutral_600, function (props) {
-  return props.expanded ? "inset 0px 0px 0px 2px ".concat(COLORS.primary_800) : 'none !important';
-}, function (props) {
-  return props.expanded ? "inset 0px 0px 0px 2px ".concat(COLORS.primary_700) : 'none !important';
-});
+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"])), StyledSearchField, COLORS.white, COLORS.neutral_400, COLORS.primary_800);
 
 var QuickSearch = function QuickSearch(_ref) {
   var id = _ref.id,
@@ -39,121 +33,150 @@ var QuickSearch = function QuickSearch(_ref) {
   var searchFieldRef = React.useRef(null);
   var searchFieldInputRef = React.useRef(null);
 
-  var _React$useState = React.useState(false),
+  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 && !(searchTerm !== null && searchTerm !== void 0 && searchTerm.length)) {
-        setSearchFieldVisible(false);
+      if (searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible && !(searchTerm !== null && searchTerm !== void 0 && searchTerm.length)) {
+        setSearchFieldVisible({
+          visible: false
+        });
       }
     }
   };
 
+  var handleKeyDown = function handleKeyDown(e) {
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+
+    if (e.key === 'Escape') {
+      if (searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible && !(searchTerm !== null && searchTerm !== void 0 && searchTerm.length)) {
+        setSearchFieldVisible({
+          visible: false
+        });
+      }
+    }
+  };
+
+  var handleBlur = function handleBlur(e) {
+    var _searchFieldRef$curre;
+
+    if (!searchTerm && (!e.relatedTarget || !((_searchFieldRef$curre = searchFieldRef.current) !== null && _searchFieldRef$curre !== void 0 && _searchFieldRef$curre.contains(e.relatedTarget)))) {
+      setSearchFieldVisible({
+        visible: false
+      });
+    }
+  };
+
+  var handleSearchIconAction = function handleSearchIconAction(e) {
+    if (searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible) {
+      enterSearch(searchTerm);
+    } else {
+      setSearchFieldVisible({
+        visible: !searchFieldVisible.visible,
+        focus: !searchFieldVisible.visible && (e === null || e === void 0 ? void 0 : e.detail) !== 1
+      });
+    }
+  }; // set search field visibility on search term change
+
+
   React.useEffect(function () {
-    if (searchTerm !== null && searchTerm !== void 0 && searchTerm.length) {
-      setSearchFieldVisible(true);
+    if (!!(searchTerm !== null && searchTerm !== void 0 && searchTerm.length) && !(searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible)) {
+      setSearchFieldVisible({
+        visible: true,
+        focus: false
+      });
     }
-  }, [searchTerm]);
+  }, [searchTerm, searchFieldVisible]); // register click outside handler
+
   React.useEffect(function () {
     document.addEventListener('click', handleClickOutside);
     return function () {
       document.removeEventListener('click', handleClickOutside);
     };
-  });
+  }); // focus search input on visibility change
+
   React.useEffect(function () {
-    if (searchFieldVisible) {
+    if (searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible) {
       var _searchFieldInputRef$;
 
-      searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : (_searchFieldInputRef$ = searchFieldInputRef.current) === null || _searchFieldInputRef$ === void 0 ? void 0 : _searchFieldInputRef$.focus();
-    }
-  }, [searchFieldVisible, searchFieldInputRef, id]);
-
-  var handleKeyDown = function handleKeyDown(e) {
-    if (onKeyDown) {
-      onKeyDown(e);
-    }
-
-    if (e.key === 'Escape') {
-      if (searchFieldVisible && !(searchTerm !== null && searchTerm !== void 0 && searchTerm.length)) {
-        setSearchFieldVisible(false);
-      }
+      searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : (_searchFieldInputRef$ = searchFieldInputRef.current) === null || _searchFieldInputRef$ === void 0 ? void 0 : _searchFieldInputRef$.focus({
+        focusVisible: searchFieldVisible.focus
+      });
     }
-  };
-
-  return /*#__PURE__*/_jsxs(QuickSearchField, {
-    ref: searchFieldRef,
-    expanded: searchFieldVisible,
-    id: "".concat(id, "_main"),
-    onBlur: function onBlur(event) {
-      if (event.relatedTarget && searchFieldRef !== null && searchFieldRef !== void 0 && searchFieldRef.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {
-        setSearchFieldVisible(false);
-      }
-    },
-    "data-testid": "".concat(id, "_main"),
-    className: (searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '').concat(searchFieldVisible ? ' expanded' : ''),
-    margin: margin,
-    children: [searchFieldVisible && /*#__PURE__*/_jsx(SearchBarInput, {
-      placeholder: disabled ? '' : placeholder,
+  }, [searchFieldVisible.visible, searchFieldInputRef]);
+  return /*#__PURE__*/_jsx(Wrapper, {
+    children: /*#__PURE__*/_jsxs(SearchField, {
+      ref: searchFieldRef,
       id: id,
-      ref: searchFieldInputRef,
-      disabled: disabled,
-      onKeyDown: handleKeyDown,
       size: size,
-      setSearchTerm: function setSearchTerm(term) {
-        return _setSearchTerm(term);
-      },
       searchTerm: searchTerm,
-      enterSearch: enterSearch,
-      focusParentRefs: [searchFieldRef]
-    }), /*#__PURE__*/_jsx(SearchIconWrapper, {
-      className: size ? size : '',
-      role: "button",
-      "aria-label": performSearchLabel,
-      tabIndex: -1,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        id: "".concat(id, "_Searchbutton"),
-        variant: "secondary",
-        shape: "circular",
-        tabIndex: searchFieldVisible ? -1 : 0,
-        action: function action(e) {
-          return searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(!searchFieldVisible);
+      style: {
+        margin: margin
+      },
+      onBlur: handleBlur,
+      className: searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible ? 'expanded' : '',
+      children: [(searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && /*#__PURE__*/_jsx(SearchBarInput, {
+        placeholder: disabled ? '' : placeholder,
+        id: id,
+        ref: searchFieldInputRef,
+        disabled: disabled,
+        onKeyDown: handleKeyDown,
+        size: size,
+        setSearchTerm: function setSearchTerm(term) {
+          return _setSearchTerm(term);
         },
-        children: /*#__PURE__*/_jsx(SearchIcon, {
-          size: "24px",
-          color: disabled ? COLORS.neutral_300 : COLORS.neutral_600
+        searchTerm: searchTerm,
+        enterSearch: enterSearch,
+        focusParentRefs: [searchFieldRef]
+      }), /*#__PURE__*/_jsx(SearchIconWrapper, {
+        className: size ? size : '',
+        role: "button",
+        "aria-label": performSearchLabel,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          id: "".concat(id, "_Searchbutton"),
+          variant: "secondary",
+          shape: "circular",
+          tabIndex: searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible ? -1 : 0,
+          action: handleSearchIconAction,
+          children: /*#__PURE__*/_jsx(SearchIcon, {
+            size: "24px",
+            color: disabled ? COLORS.neutral_300 : COLORS.neutral_600
+          })
         })
-      })
-    }), /*#__PURE__*/_jsx(StyledIcon, {
-      className: size ? size : '',
-      role: "button",
-      tabIndex: -1,
-      hidden: searchTerm === '' || searchTerm === undefined || !searchFieldVisible,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        id: "".concat(id, "_Clearicon"),
-        variant: "secondary",
-        shape: "circular",
-        action: function action(e) {
-          var _searchFieldInputRef$2;
-
-          removeSearch(e);
-          searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : (_searchFieldInputRef$2 = searchFieldInputRef.current) === null || _searchFieldInputRef$2 === void 0 ? void 0 : _searchFieldInputRef$2.focus();
-        },
-        children: /*#__PURE__*/_jsx(ClearIcon, {
-          size: "24px",
-          color: disabled ? COLORS.neutral_300 : COLORS.neutral_600
+      }), /*#__PURE__*/_jsx(StyledIcon, {
+        className: size ? size : '',
+        role: "button",
+        hidden: !searchTerm || !(searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible),
+        children: /*#__PURE__*/_jsx(IconButton, {
+          id: "".concat(id, "_Clearicon"),
+          variant: "secondary",
+          shape: "circular",
+          action: function action(e) {
+            var _searchFieldInputRef$2;
+
+            removeSearch(e);
+            searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : (_searchFieldInputRef$2 = searchFieldInputRef.current) === null || _searchFieldInputRef$2 === void 0 ? void 0 : _searchFieldInputRef$2.focus();
+          },
+          children: /*#__PURE__*/_jsx(ClearIcon, {
+            size: "24px",
+            color: disabled ? COLORS.neutral_300 : COLORS.neutral_600
+          })
+        })
+      }), loading && (searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && /*#__PURE__*/_jsx(StyledIcon, {
+        className: size ? size : '',
+        children: /*#__PURE__*/_jsx(LoadingIndicator, {
+          size: Size.Small,
+          color: COLORS.neutral_600
         })
-      })
-    }), loading && searchFieldVisible && /*#__PURE__*/_jsx(StyledIcon, {
-      className: size ? size : '',
-      tabIndex: -1,
-      children: /*#__PURE__*/_jsx(LoadingIndicator, {
-        size: Size.Small,
-        color: COLORS.neutral_600
-      })
-    })]
+      })]
+    })
   });
 };
 

package/dist/InputFields/QuickSearch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/QuickSearch.tsx"],"names":["React","styled","IconButton","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","Search","SearchIcon","Clear","ClearIcon","SearchBarInput","StyledSearchField","QuickSearchField","props","margin","white","neutral_600","expanded","primary_800","primary_700","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","loading","searchFieldRef","useRef","searchFieldInputRef","useState","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","useEffect","document","addEventListener","removeEventListener","focus","handleKeyDown","key","event","relatedTarget","concat","term","neutral_300","undefined","Small"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport { StyledSearchField } from './components/SearchField';\n\nconst QuickSearchField = styled(StyledSearchField)<{ expanded: boolean; margin?: string }>`\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  -webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n  transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n  background-color: transparent;\n  &.small {\n    width: 48px;\n  }\n\n  &.medium {\n    width: 56px;\n  }\n  \n  &.expanded{\n    width: 100%;\n    background-color: ${COLORS.white};\n  }\n\n  input {\n    ::placeholder {\n      font-style: italic;\n      color: ${COLORS.neutral_600};\n    }\n  }\n\n  box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_800}` : 'none !important')};\n\n  &:hover {\n    box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_700}` : 'none !important')};\n  }\n`;\n\ntype QuickSearchProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<boolean>(false);\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (searchTerm?.length) {\n      setSearchFieldVisible(true);\n    }\n  }, [searchTerm]);\n\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  React.useEffect(() => {\n    if (searchFieldVisible) {\n      searchFieldInputRef?.current?.focus();\n    }\n  }, [searchFieldVisible, searchFieldInputRef, id]);\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  return (\n    <QuickSearchField\n      ref={searchFieldRef}\n      expanded={searchFieldVisible}\n      id={`${id}_main`}\n      onBlur={(event: any) => {\n        if (event.relatedTarget && searchFieldRef?.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {\n          setSearchFieldVisible(false);\n        }\n      }}\n      data-testid={`${id}_main`}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '').concat( searchFieldVisible ? ' expanded' : '')}\n      margin={margin}>\n      {searchFieldVisible && (\n        <SearchBarInput\n          placeholder={disabled ? '' : placeholder}\n          id={id}\n          ref={searchFieldInputRef}\n          disabled={disabled}\n          onKeyDown={handleKeyDown}\n          size={size}\n          setSearchTerm={(term: string) => setSearchTerm(term)}\n          searchTerm={searchTerm}\n          enterSearch={enterSearch}\n          focusParentRefs={[searchFieldRef]}\n        />\n      )}\n      <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel} tabIndex={-1}>\n        <IconButton\n          id={`${id}_Searchbutton`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          tabIndex={searchFieldVisible ? -1 : 0}\n          action={(e) => (searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(!searchFieldVisible))}>\n          <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </SearchIconWrapper>\n      <StyledIcon className={size ? size : ''} role=\"button\" tabIndex={-1} hidden={searchTerm === '' || searchTerm === undefined || !searchFieldVisible}>\n        <IconButton\n          id={`${id}_Clearicon`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          action={(e) => {\n            removeSearch(e);\n            searchFieldInputRef?.current?.focus();\n          }}>\n          <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </StyledIcon>\n      {loading && searchFieldVisible && (\n        <StyledIcon className={size ? size : ''} tabIndex={-1}>\n          <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n        </StyledIcon>\n      )}\n    </QuickSearchField>\n  );\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.js"}
+{"version":3,"sources":["../../src/InputFields/QuickSearch.tsx"],"names":["React","styled","IconButton","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","Search","SearchIcon","Clear","ClearIcon","SearchBarInput","SearchField","StyledSearchField","Wrapper","div","white","neutral_400","primary_800","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","useRef","searchFieldInputRef","useState","visible","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","focusVisible","term","neutral_300","neutral_600","Small"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport {SearchIconWrapper, StyledIcon} from './styling';\nimport {Size} from '../types';\nimport {COLORS, LoadingIndicator} from '..';\nimport {Search as SearchIcon, Clear as ClearIcon} from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField, {StyledSearchField} from './components/SearchField';\n\nconst Wrapper = styled.div`\n  width: 100%;\n\n  ${StyledSearchField} {\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: ${COLORS.white};\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n    }\n  }\n`;\n\ntype QuickSearchProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n                                                                  id,\n                                                                  searchTerm,\n                                                                  setSearchTerm,\n                                                                  enterSearch,\n                                                                  removeSearch,\n                                                                  placeholder,\n                                                                  performSearchLabel,\n                                                                  disabled,\n                                                                  onKeyDown,\n                                                                  size,\n                                                                  margin,\n                                                                  loading,\n                                                                }: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean, focus?: boolean }>({\n    visible: false\n  });\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({visible: false});\n      }\n    }\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({visible: false});\n      }\n    }\n  };\n\n  const handleBlur = (e: any) => {\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\n      setSearchFieldVisible({visible: false});\n    }\n  };\n\n  const handleSearchIconAction = (e: any) => {\n    if (searchFieldVisible?.visible) {\n      enterSearch(searchTerm);\n    } else {\n      setSearchFieldVisible({\n        visible: !searchFieldVisible.visible,\n        focus: !searchFieldVisible.visible && e?.detail !== 1\n      });\n    }\n  };\n\n  // set search field visibility on search term change\n  React.useEffect(() => {\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\n      setSearchFieldVisible({visible: true, focus: false});\n    }\n  }, [searchTerm, searchFieldVisible]);\n\n  // register click outside handler\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  // focus search input on visibility change\n  React.useEffect(() => {\n    if (searchFieldVisible?.visible) {\n      searchFieldInputRef?.current?.focus({focusVisible: searchFieldVisible.focus} as any);\n    }\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\n\n\n  return (\n    <Wrapper>\n      <SearchField ref={searchFieldRef}\n                   id={id}\n                   size={size}\n                   searchTerm={searchTerm}\n                   style={{\n                     margin: margin,\n                   }}\n                   onBlur={handleBlur}\n                   className={searchFieldVisible?.visible ? 'expanded' : ''}>\n        {searchFieldVisible?.visible && (\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            ref={searchFieldInputRef}\n            disabled={disabled}\n            onKeyDown={handleKeyDown}\n            size={size}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            enterSearch={enterSearch}\n            focusParentRefs={[searchFieldRef]}\n          />\n        )}\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\n          <IconButton\n            id={`${id}_Searchbutton`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\n            action={handleSearchIconAction}>\n            <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600}/>\n          </IconButton>\n        </SearchIconWrapper>\n        <StyledIcon className={size ? size : ''} role=\"button\"\n                    hidden={!searchTerm || !searchFieldVisible?.visible}>\n          <IconButton\n            id={`${id}_Clearicon`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            action={(e) => {\n              removeSearch(e);\n              searchFieldInputRef?.current?.focus();\n            }}>\n            <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600}/>\n          </IconButton>\n        </StyledIcon>\n        {loading && searchFieldVisible?.visible && (\n          <StyledIcon className={size ? size : ''}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n          </StyledIcon>\n        )}\n      </SearchField>\n    </Wrapper>\n  )\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.js"}

package/dist/InputFields/RadioButton.cjs

@@ -35,11 +35,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var StyledRadioButton = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n \n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .radio-button-icon {\n      background-color: ", ";\n      box-shadow: 0 0 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n      box-shadow: none;\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon{\n      background-color: ", ";\n    }\n    \n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+var StyledRadioButton = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ", ";\n    }\n\n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, _styles.COLORS.black, function (props) {
   return props.selected ? _styles.COLORS.primary_500 : props.showWarning ? _styles.COLORS.warning_400 : _styles.COLORS.neutral_600;
-}, (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_600, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.white, _styles.COLORS.neutral_300);
+}, (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.focusStyles, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.neutral_300, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.primary_20, _styles.COLORS.primary_700);
 
 var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _size;
@@ -54,7 +54,8 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       margin = _ref.margin,
       iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
       size = _ref.size,
-      tabIndexVal = _ref.tabIndexVal;
+      tabIndexVal = _ref.tabIndexVal,
+      className = _ref.className;
 
   var onKeyPress = function onKeyPress(e) {
     if (e.keyCode === 13 && !disabled) {
@@ -63,6 +64,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   size = (_size = size) !== null && _size !== void 0 ? _size : _types.Size.Medium;
+  var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledRadioButton, {
     margin: margin,
     ref: ref,
@@ -72,7 +74,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onMouseDown: _common.defaultOnMouseDownHandler,
     onKeyDown: onKeyPress,
     disabled: disabled,
-    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
+    className: cls,
     tabIndex: disabled ? -1 : tabIndexVal ? tabIndexVal : 0,
     showWarning: showWarning,
     selected: selected,
@@ -80,10 +82,10 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: 'radio-button-icon',
       id: id,
       children: [selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.RadioButtonOn, {
-        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"
       }), !selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.RadioButtonOff, {
-        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -107,7 +109,8 @@ RadioButton.propTypes = {
   disabled: _propTypes.default.bool,
   iconPointerEventsTransparent: _propTypes.default.bool,
   margin: _propTypes.default.string,
-  tabIndexVal: _propTypes.default.number
+  tabIndexVal: _propTypes.default.number,
+  className: _propTypes.default.string
 };
 var _default = RadioButton;
 exports.default = _default;

package/dist/InputFields/RadioButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","React","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","onKeyPress","e","keyCode","Size","Medium","defaultOnMouseDownHandler","toString","toLowerCase","concat","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n \n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon{\n      background-color: ${COLORS.white};\n    }\n    \n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n  id,\n  selected,\n  label,\n  additionalLabel,\n  showWarning,\n  select,\n  disabled,\n  margin,\n  iconPointerEventsTransparent,\n  size,\n  tabIndexVal\n}: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       showWarning={showWarning}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n        { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.cjs"}
+{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","React","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","onKeyPress","e","keyCode","Size","Medium","cls","defaultOnMouseDownHandler","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n                                                               id,\n                                                               selected,\n                                                               label,\n                                                               additionalLabel,\n                                                               showWarning,\n                                                               select,\n                                                               disabled,\n                                                               margin,\n                                                               iconPointerEventsTransparent,\n                                                               size,\n                                                               tabIndexVal,\n                                                               className\n                                                             }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={cls}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       showWarning={showWarning}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        {selected && <RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n        {!selected &&\n          <RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.cjs"}

package/dist/InputFields/RadioButton.d.ts

@@ -12,6 +12,7 @@ interface Props {
     margin?: string;
     size?: Size;
     tabIndexVal?: number;
+    className?: string;
 }
 declare const RadioButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default RadioButton;

package/dist/InputFields/RadioButton.js

@@ -6,17 +6,17 @@ var _templateObject;
 import * as React from 'react';
 import styled from 'styled-components';
 import { RadioButtonOff, RadioButtonOn } from '../icons/systemicons/SystemIcons';
-import { COLORS, ComponentTextStyle } from '../styles';
+import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
 import { Size } from '../types';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles/typography';
 import { defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var StyledRadioButton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n \n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .radio-button-icon {\n      background-color: ", ";\n      box-shadow: 0 0 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n      box-shadow: none;\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon{\n      background-color: ", ";\n    }\n    \n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+var StyledRadioButton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ", ";\n    }\n\n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, COLORS.black, function (props) {
   return props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600;
-}, ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.white, COLORS.primary_500, COLORS.neutral_600, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300, COLORS.white, COLORS.neutral_300);
+}, ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), focusStyles, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300, COLORS.white, COLORS.neutral_300, COLORS.primary_20, COLORS.primary_700);
 var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _size;
 
@@ -30,7 +30,8 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       margin = _ref.margin,
       iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
       size = _ref.size,
-      tabIndexVal = _ref.tabIndexVal;
+      tabIndexVal = _ref.tabIndexVal,
+      className = _ref.className;
 
   var onKeyPress = function onKeyPress(e) {
     if (e.keyCode === 13 && !disabled) {
@@ -39,6 +40,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
+  var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '');
   return /*#__PURE__*/_jsxs(StyledRadioButton, {
     margin: margin,
     ref: ref,
@@ -48,7 +50,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onMouseDown: defaultOnMouseDownHandler,
     onKeyDown: onKeyPress,
     disabled: disabled,
-    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
+    className: cls,
     tabIndex: disabled ? -1 : tabIndexVal ? tabIndexVal : 0,
     showWarning: showWarning,
     selected: selected,
@@ -56,10 +58,10 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: 'radio-button-icon',
       id: id,
       children: [selected && /*#__PURE__*/_jsx(RadioButtonOn, {
-        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"
       }), !selected && /*#__PURE__*/_jsx(RadioButtonOff, {
-        className: iconPointerEventsTransparent ? "pointerTransparent" : "",
+        className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"
       })]
     }), /*#__PURE__*/_jsxs("div", {
@@ -83,7 +85,8 @@ RadioButton.propTypes = {
   disabled: _pt.bool,
   iconPointerEventsTransparent: _pt.bool,
   margin: _pt.string,
-  tabIndexVal: _pt.number
+  tabIndexVal: _pt.number,
+  className: _pt.string
 };
 export default RadioButton;
 //# sourceMappingURL=RadioButton.js.map

package/dist/InputFields/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","StyledRadioButton","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","onKeyPress","e","keyCode","Medium","toString","toLowerCase","concat","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n \n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon{\n      background-color: ${COLORS.white};\n    }\n    \n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n  id,\n  selected,\n  label,\n  additionalLabel,\n  showWarning,\n  select,\n  disabled,\n  margin,\n  iconPointerEventsTransparent,\n  size,\n  tabIndexVal\n}: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       showWarning={showWarning}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n        { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}
+{"version":3,"sources":["../../src/InputFields/RadioButton.tsx"],"names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","StyledRadioButton","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","onKeyPress","e","keyCode","Medium","cls","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n                                                               id,\n                                                               selected,\n                                                               label,\n                                                               additionalLabel,\n                                                               showWarning,\n                                                               select,\n                                                               disabled,\n                                                               margin,\n                                                               iconPointerEventsTransparent,\n                                                               size,\n                                                               tabIndexVal,\n                                                               className\n                                                             }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={cls}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       showWarning={showWarning}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        {selected && <RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n        {!selected &&\n          <RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}

package/dist/InputFields/SearchBar.cjs

@@ -31,7 +31,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
 
-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 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,
@@ -65,8 +65,8 @@ var SearchBar = function SearchBar(_ref) {
       disabled: disabled,
       margin: margin,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SearchField.default, {
-        id: "".concat(id, "_main"),
-        size: size || '',
+        id: 'id',
+        size: size,
         ref: containerRef,
         searchTerm: searchTerm,
         disabled: disabled,