@laerdal/life-react-components 2.0.1-dev.9.full → 2.1.0-dev.7

package/dist/InputFields/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":["React","styled","COLORS","InputFieldStyling","InputWrapper","ErrorMessage","Z_INDEXES","useFocusVisibleRef","IconButton","SystemIcons","TechnicalWarning","StyledPassSwitch","div","badge","PasswordRow","PasswordField","forwardRef","ref","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","className","name","rest","useState","passwordHidden","setPasswordHidden","inputRef","useImperativeHandle","current","handleKeyDown","e","keyCode","cls","display","target","critical_400"],"sources":["../../src/InputFields/PasswordField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport { Z_INDEXES } from '../styles';\nimport { useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\ntype PasswordFieldProps =\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'>\n  & {\n  id: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  invalid?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = React.forwardRef(({\n                                          id,\n                                          disabled,\n                                          onChange,\n                                          invalid,\n                                          value,\n                                          validationMessage,\n                                          autoComplete,\n                                          placeholder,\n                                          required,\n                                          readOnly,\n                                          size,\n                                          margin,\n                                          className,\n                                          name = 'password',\n                                          ...rest\n                                        }: PasswordFieldProps, ref) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n\n  const cls = `${invalid ? 'invalid' : ''}  ${size || ''} ${className}`;\n\n  return (\n    <>\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\n        <div style={{ display: 'block', margin: '4px 0px'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name={name}\n              value={value}\n              className={cls}\n              tabIndex={disabled || readOnly ? -1 : 0}\n              autoComplete={autoComplete}\n              activeErrorMessage={!!validationMessage}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              {...rest}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !readOnly ? (\n                passwordHidden ? (\n                  <IconButton\n                    id={`${id}_Visible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff />\n                  </IconButton>\n                ) : (\n                  <IconButton\n                    id={`${id}_NotVisible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn />\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default PasswordField;\n"],"mappings":"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"}
+{"version":3,"file":"PasswordField.js","names":["React","styled","COLORS","InputFieldStyling","InputWrapper","ErrorMessage","Z_INDEXES","useFocusVisibleRef","IconButton","SystemIcons","TechnicalWarning","StyledPassSwitch","div","badge","PasswordRow","PasswordField","forwardRef","ref","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","className","name","rest","useState","passwordHidden","setPasswordHidden","inputRef","useImperativeHandle","current","handleKeyDown","e","keyCode","cls","display","target","critical_400"],"sources":["../../src/InputFields/PasswordField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport { Z_INDEXES } from '../styles';\nimport { useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\ntype PasswordFieldProps =\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'>\n  & {\n  id: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  invalid?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = React.forwardRef(({\n                                          id,\n                                          disabled,\n                                          onChange,\n                                          invalid,\n                                          value,\n                                          validationMessage,\n                                          autoComplete,\n                                          placeholder,\n                                          required,\n                                          readOnly,\n                                          size,\n                                          margin,\n                                          className,\n                                          name = 'password',\n                                          ...rest\n                                        }: PasswordFieldProps, ref) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n\n  const cls = `${invalid ? 'invalid' : ''}  ${size || ''} ${className}`;\n\n  return (\n    <>\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\n        <div style={{ display: 'block', margin: '4px 0px'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name={name}\n              value={value}\n              className={cls}\n              tabIndex={disabled || readOnly ? -1 : 0}\n              autoComplete={autoComplete}\n              activeErrorMessage={!!validationMessage}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              {...rest}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !readOnly ? (\n                passwordHidden ? (\n                  <IconButton\n                    id={`${id}_Visible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff />\n                  </IconButton>\n                ) : (\n                  <IconButton\n                    id={`${id}_NotVisible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn />\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default PasswordField;\n"],"mappings":"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"}

package/dist/InputFields/QuickSearch.cjs

@@ -1,71 +1,49 @@
 "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"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _Iconbutton = _interopRequireDefault(require("../Button/Iconbutton"));
-
 var _styling = require("./styling");
-
 var _types = require("../types");
-
 var _ = require("..");
-
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
-
 var _SearchBarInput = _interopRequireDefault(require("./components/SearchBarInput"));
-
 var _SearchField = _interopRequireWildcard(require("./components/SearchField"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 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 Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n\n  ", " {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n"])), _SearchField.StyledSearchField, _.COLORS.white, _.COLORS.neutral_400, _.COLORS.primary_800);
-
 var QuickSearch = function QuickSearch(_ref) {
   var id = _ref.id,
-      searchTerm = _ref.searchTerm,
-      _setSearchTerm = _ref.setSearchTerm,
-      enterSearch = _ref.enterSearch,
-      removeSearch = _ref.removeSearch,
-      placeholder = _ref.placeholder,
-      performSearchLabel = _ref.performSearchLabel,
-      disabled = _ref.disabled,
-      onKeyDown = _ref.onKeyDown,
-      size = _ref.size,
-      margin = _ref.margin,
-      loading = _ref.loading;
+    searchTerm = _ref.searchTerm,
+    _setSearchTerm = _ref.setSearchTerm,
+    enterSearch = _ref.enterSearch,
+    removeSearch = _ref.removeSearch,
+    placeholder = _ref.placeholder,
+    performSearchLabel = _ref.performSearchLabel,
+    disabled = _ref.disabled,
+    onKeyDown = _ref.onKeyDown,
+    size = _ref.size,
+    margin = _ref.margin,
+    loading = _ref.loading;
   var searchFieldRef = React.useRef(null);
   var searchFieldInputRef = React.useRef(null);
-
   var _React$useState = React.useState({
-    visible: false
-  }),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      searchFieldVisible = _React$useState2[0],
-      setSearchFieldVisible = _React$useState2[1];
-
+      visible: false
+    }),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    searchFieldVisible = _React$useState2[0],
+    setSearchFieldVisible = _React$useState2[1];
   var handleClickOutside = function handleClickOutside(e) {
     if (searchFieldRef !== null && searchFieldRef !== void 0 && searchFieldRef.current && !searchFieldRef.current.contains(e.target)) {
       if (searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible && !(searchTerm !== null && searchTerm !== void 0 && searchTerm.length)) {
@@ -75,12 +53,10 @@ var QuickSearch = function QuickSearch(_ref) {
       }
     }
   };
-
   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({
@@ -89,17 +65,14 @@ var QuickSearch = function QuickSearch(_ref) {
       }
     }
   };
-
   var handleBlur = function handleBlur(e) {
     var _searchFieldRef$curre;
-
     if (!searchTerm && (!e.relatedTarget || !((_searchFieldRef$curre = searchFieldRef.current) !== null && _searchFieldRef$curre !== void 0 && _searchFieldRef$curre.contains(e.relatedTarget)))) {
       setSearchFieldVisible({
         visible: false
       });
     }
   };
-
   var handleSearchIconAction = function handleSearchIconAction(e) {
     if (!(searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible)) {
       setSearchFieldVisible({
@@ -107,9 +80,9 @@ var QuickSearch = function QuickSearch(_ref) {
         focus: !searchFieldVisible.visible && (e === null || e === void 0 ? void 0 : e.detail) !== 1
       });
     }
-  }; // set search field visibility on search term change
-
+  };
 
+  // set search field visibility on search term change
   React.useEffect(function () {
     if (!!(searchTerm !== null && searchTerm !== void 0 && searchTerm.length) && !(searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible)) {
       setSearchFieldVisible({
@@ -117,19 +90,20 @@ var QuickSearch = function QuickSearch(_ref) {
         focus: false
       });
     }
-  }, [searchTerm, searchFieldVisible]); // register click outside handler
+  }, [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
+  }, []);
 
+  // focus search input on visibility change
   React.useEffect(function () {
     if (searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible) {
       var _searchFieldInputRef$;
-
       searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : (_searchFieldInputRef$ = searchFieldInputRef.current) === null || _searchFieldInputRef$ === void 0 ? void 0 : _searchFieldInputRef$.focus({
         focusVisible: searchFieldVisible.focus
       });
@@ -185,7 +159,6 @@ var QuickSearch = function QuickSearch(_ref) {
           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();
           },
@@ -204,7 +177,6 @@ var QuickSearch = function QuickSearch(_ref) {
     })
   });
 };
-
 QuickSearch.propTypes = {
   id: _propTypes.default.string.isRequired,
   searchTerm: _propTypes.default.string,

package/dist/InputFields/QuickSearch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"QuickSearch.cjs","names":["Wrapper","styled","div","StyledSearchField","COLORS","white","neutral_400","primary_800","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","React","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","Size","Small"],"sources":["../../src/InputFields/QuickSearch.tsx"],"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      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  return (\n    <Wrapper>\n      <SearchField\n        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            shouldNotInteract={searchFieldVisible?.visible}\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\" 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"],"mappings":"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"}
+{"version":3,"file":"QuickSearch.cjs","names":["Wrapper","styled","div","StyledSearchField","COLORS","white","neutral_400","primary_800","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","React","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","Size","Small"],"sources":["../../src/InputFields/QuickSearch.tsx"],"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      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  return (\n    <Wrapper>\n      <SearchField\n        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            shouldNotInteract={searchFieldVisible?.visible}\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\" 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"],"mappings":"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"}

package/dist/InputFields/QuickSearch.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from '../types';
-declare type QuickSearchProps = {
+type QuickSearchProps = {
     id: string;
     searchTerm?: string;
     setSearchTerm: (term: string) => void;

package/dist/InputFields/QuickSearch.js

@@ -1,9 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-
 var _templateObject;
-
 import * as React from 'react';
 import styled from 'styled-components';
 import IconButton from '../Button/Iconbutton';
@@ -16,30 +14,27 @@ import SearchField, { StyledSearchField } from './components/SearchField';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n\n  ", " {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n"])), StyledSearchField, COLORS.white, COLORS.neutral_400, COLORS.primary_800);
-
 var QuickSearch = function QuickSearch(_ref) {
   var id = _ref.id,
-      searchTerm = _ref.searchTerm,
-      _setSearchTerm = _ref.setSearchTerm,
-      enterSearch = _ref.enterSearch,
-      removeSearch = _ref.removeSearch,
-      placeholder = _ref.placeholder,
-      performSearchLabel = _ref.performSearchLabel,
-      disabled = _ref.disabled,
-      onKeyDown = _ref.onKeyDown,
-      size = _ref.size,
-      margin = _ref.margin,
-      loading = _ref.loading;
+    searchTerm = _ref.searchTerm,
+    _setSearchTerm = _ref.setSearchTerm,
+    enterSearch = _ref.enterSearch,
+    removeSearch = _ref.removeSearch,
+    placeholder = _ref.placeholder,
+    performSearchLabel = _ref.performSearchLabel,
+    disabled = _ref.disabled,
+    onKeyDown = _ref.onKeyDown,
+    size = _ref.size,
+    margin = _ref.margin,
+    loading = _ref.loading;
   var searchFieldRef = React.useRef(null);
   var searchFieldInputRef = React.useRef(null);
-
   var _React$useState = React.useState({
-    visible: false
-  }),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      searchFieldVisible = _React$useState2[0],
-      setSearchFieldVisible = _React$useState2[1];
-
+      visible: false
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    searchFieldVisible = _React$useState2[0],
+    setSearchFieldVisible = _React$useState2[1];
   var handleClickOutside = function handleClickOutside(e) {
     if (searchFieldRef !== null && searchFieldRef !== void 0 && searchFieldRef.current && !searchFieldRef.current.contains(e.target)) {
       if (searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible && !(searchTerm !== null && searchTerm !== void 0 && searchTerm.length)) {
@@ -49,12 +44,10 @@ var QuickSearch = function QuickSearch(_ref) {
       }
     }
   };
-
   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({
@@ -63,17 +56,14 @@ var QuickSearch = function QuickSearch(_ref) {
       }
     }
   };
-
   var handleBlur = function handleBlur(e) {
     var _searchFieldRef$curre;
-
     if (!searchTerm && (!e.relatedTarget || !((_searchFieldRef$curre = searchFieldRef.current) !== null && _searchFieldRef$curre !== void 0 && _searchFieldRef$curre.contains(e.relatedTarget)))) {
       setSearchFieldVisible({
         visible: false
       });
     }
   };
-
   var handleSearchIconAction = function handleSearchIconAction(e) {
     if (!(searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible)) {
       setSearchFieldVisible({
@@ -81,9 +71,9 @@ var QuickSearch = function QuickSearch(_ref) {
         focus: !searchFieldVisible.visible && (e === null || e === void 0 ? void 0 : e.detail) !== 1
       });
     }
-  }; // set search field visibility on search term change
-
+  };
 
+  // set search field visibility on search term change
   React.useEffect(function () {
     if (!!(searchTerm !== null && searchTerm !== void 0 && searchTerm.length) && !(searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible)) {
       setSearchFieldVisible({
@@ -91,19 +81,20 @@ var QuickSearch = function QuickSearch(_ref) {
         focus: false
       });
     }
-  }, [searchTerm, searchFieldVisible]); // register click outside handler
+  }, [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
+  }, []);
 
+  // focus search input on visibility change
   React.useEffect(function () {
     if (searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible) {
       var _searchFieldInputRef$;
-
       searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : (_searchFieldInputRef$ = searchFieldInputRef.current) === null || _searchFieldInputRef$ === void 0 ? void 0 : _searchFieldInputRef$.focus({
         focusVisible: searchFieldVisible.focus
       });
@@ -159,7 +150,6 @@ var QuickSearch = function QuickSearch(_ref) {
           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();
           },
@@ -178,7 +168,6 @@ var QuickSearch = function QuickSearch(_ref) {
     })
   });
 };
-
 QuickSearch.propTypes = {
   id: _pt.string.isRequired,
   searchTerm: _pt.string,

package/dist/InputFields/QuickSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickSearch.js","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"],"sources":["../../src/InputFields/QuickSearch.tsx"],"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      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  return (\n    <Wrapper>\n      <SearchField\n        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            shouldNotInteract={searchFieldVisible?.visible}\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\" 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"],"mappings":"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"}
+{"version":3,"file":"QuickSearch.js","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"],"sources":["../../src/InputFields/QuickSearch.tsx"],"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      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  return (\n    <Wrapper>\n      <SearchField\n        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            shouldNotInteract={searchFieldVisible?.visible}\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\" 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"],"mappings":"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"}

package/dist/InputFields/RadioButton.cjs

@@ -1,77 +1,53 @@
 "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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
-
 var _styles = require("../styles");
-
 var _types = require("../types");
-
 var _common = require("../common");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className"];
-
 var _templateObject;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 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; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 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.invalid ? _styles.COLORS.critical_400 : _styles.COLORS.neutral_600;
 }, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _styles.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;
-
   var id = _ref.id,
-      selected = _ref.selected,
-      label = _ref.label,
-      additionalLabel = _ref.additionalLabel,
-      invalid = _ref.invalid,
-      select = _ref.select,
-      disabled = _ref.disabled,
-      margin = _ref.margin,
-      iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
-      size = _ref.size,
-      tabIndexVal = _ref.tabIndexVal,
-      className = _ref.className,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    selected = _ref.selected,
+    label = _ref.label,
+    additionalLabel = _ref.additionalLabel,
+    invalid = _ref.invalid,
+    select = _ref.select,
+    disabled = _ref.disabled,
+    margin = _ref.margin,
+    iconPointerEventsTransparent = _ref.iconPointerEventsTransparent,
+    size = _ref.size,
+    tabIndexVal = _ref.tabIndexVal,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var onKeyPress = function onKeyPress(e) {
     if (e.keyCode === 13 && !disabled) {
       select(!selected);
     }
   };
-
   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, _objectSpread(_objectSpread({