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

package/dist/InputFields/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/InputFields/NumberField.tsx"],"names":["React","styled","IconButton","SystemIcons","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXXSStyling","Size","Container","div","LabelContainer","neutral_500","Regular","LabelText","LabelIcon","props","size","Small","InputWrapper","PrefixContainer","OperatorWrapper","Medium","neutral_200","NumberInput","input","fieldSize","Italic","NoteLabel","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","neutral_400","primary_700","primary_800","neutral_100","neutral_300","correct_400","critical_400","NumberField","label","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","disabled","readOnly","valid","defaultVal","useState","toString","userInput","setUserInput","fieldState","undefined","handleKeyPress","e","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","negativeAndDecimalRegex","val","target","value","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nconst Container = styled.div``;\n\nconst LabelContainer = styled.div`\n    margin-bottom: 4px;\n    color: ${COLORS.neutral_500};\n    display: flex;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst LabelText = styled.div``;\n\nconst LabelIcon = styled.div<{size: Size}>`\n    margin-right: ${props => props.size === Size.Small?'6px':'8px'};\n    svg {\n        height: 9px;\n        width: 9px;\n    }\n`;\n\nconst InputWrapper = styled.div<{size: Size}>`\n    margin: ${props => props.size === Size.Small?'14px 0 14px 16px':'16px 0 16px 16px'};\n    display: flex;\n    flex-grow: 1;\n`;\n\nconst PrefixContainer = styled.div<{size: Size}>`\n    margin-right: 4px;\n    width: ${props => props.size === Size.Small?'10px':'11px'};\n    height: ${props => props.size === Size.Small?'20px':'24px'};\n    color: ${COLORS.neutral_500};\n    ${props=>props.size===Size.Small?ComponentSStyling(ComponentTextStyle.Regular,null):ComponentMStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst OperatorWrapper = styled.div<{size: Size}>`\n    display: flex;\n    margin:${props => props.size === Size.Medium?'4px 0':''};\n    svg {\n        height: 14px;\n        width: 14px;\n    }\n    .divider {\n        border: 1px solid ${COLORS.neutral_200};\n        margin: 16px 0;\n        background: ${COLORS.neutral_200};\n    }\n`;\n\nconst NumberInput = styled.input<{fieldSize: Size}>`\n    width: 100%;\n    height: ${props => props.fieldSize === Size.Small?'20px':'24px'};\n    border: none;\n    color: ${COLORS.neutral_500};\n    ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Italic, null):ComponentMStyling(ComponentTextStyle.Italic, null)}\n\n    &:hover, &:focus, &:active {\n        outline: none;\n    }\n`;\n\nconst NoteLabel = styled.div`\n    color: ${COLORS.neutral_500};\n    ${ComponentXXSStyling(ComponentTextStyle.Regular,null)}    \n`;\n\nconst NoteIcon = styled.div`\n    svg {\n        height: 16px;\n    }\n`;\n\nconst NoteContainer = styled.div`\n    display: flex;\n    margin-top: 5px;\n\n    &.valid {\n        ${NoteLabel} {\n            color: ${COLORS.correct_500};\n        }\n\n        ${NoteIcon} {\n            svg path {\n                fill: ${COLORS.correct_500};\n            }\n        }\n    }\n\n    &.invalid {\n        ${NoteLabel} {\n            color: ${COLORS.critical_500};\n        }\n\n        ${NoteIcon} {\n            svg path {\n                fill: ${COLORS.critical_500};\n            }\n        }\n    }\n`;\n\nconst InputContainer = styled.div<{size: Size}>`\n    min-width: 280px;\n    height: ${props => props.size === Size.Small?'48px':'56px'};\n    display: flex;    \n    border: 1px solid ${COLORS.neutral_400};\n    border-radius: 4px;\n\n    &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        border: 2px solid ${COLORS.primary_700};\n    }\n\n    &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        border: 2px solid ${COLORS.primary_800};\n    }\n\n    &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        border: 2px solid ${COLORS.primary_800};\n    }\n\n    &.disabled {\n        border: 1px solid ${COLORS.neutral_100};\n        cursor: not-allowed;\n        \n        ${PrefixContainer}{\n            color: ${COLORS.neutral_300};\n        }\n\n        ${NumberInput}{\n            color: ${COLORS.neutral_300};\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.readOnly {\n        background: ${COLORS.neutral_100};\n        border: 1px solid ${COLORS.neutral_300};\n        cursor: not-allowed;\n\n        ${NumberInput}{\n            background: ${COLORS.neutral_100};\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.valid {\n        border: 2px solid ${COLORS.correct_400};\n    }\n\n    &.invalid {\n        border: 2px solid ${COLORS.critical_400};\n    }\n`;\n\ntype NumberFieldProps = {\n    size: Size.Small | Size.Medium;\n    prefix?: string;\n    interval?: number;\n    label: string;\n    note?: string;\n    noteIcon?: React.ReactNode;\n    required?: boolean;\n    minValue?: number;\n    maxValue?: number;\n    allowNegative?: boolean;\n    decimalPrecision?: number;\n    disabled?: boolean;\n    readOnly?: boolean;\n    valid?: boolean;\n    defaultVal?: number;\n}\n\nconst NumberField: React.FunctionComponent<NumberFieldProps> = (\n    {size=Size.Small, \n     label,\n     note, \n     noteIcon, \n     required, \n     prefix,\n     interval=1, \n     minValue, \n     maxValue, \n     allowNegative, \n     decimalPrecision, \n     disabled=false, \n     readOnly=false, \n     valid,\n     defaultVal}) => {\n    const [userInput, setUserInput] = React.useState(defaultVal?defaultVal.toString():'');\n    let fieldState = (valid!==undefined) ? (valid===true?'valid':'invalid') : undefined;\n\n    const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        switch(e.key){\n            case 'ArrowUp': addInterval();\n                            break;\n            case 'ArrowDown': subtractInterval();\n                            break;\n            default: break;\n        }\n    }\n\n    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        let simpleRegex = new RegExp(/^[0-9]\\d*$/);\n        let decimalFormationRegEx = new RegExp(/^[0-9]\\d*\\.$/); \n        let negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\\d*\\.$/);\n        \n        let allowNegativeRegex = new RegExp(/^[-][0-9]\\d*$/);        \n        let decimalPrecisionRegex = decimalPrecision ? new RegExp(`^[0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\n        let negativeAndDecimalRegex =  (decimalPrecision && allowNegative) ? new RegExp(`^[-][0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`): undefined;\n        \n        let val = e.target.value;    \n        if(val!==''){\n            if(allowNegative && decimalPrecision){\n                if(val.length===1 && val.charAt(0)==='-')\n                    setUserInput(val);\n                else{\n                    if((negativeAndDecimalRegex!.test(val) || decimalPrecisionRegex!.test(val)) && isInRange(val,true))\n                        setUserInput(val);\n\n                    else if((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.',''),true))\n                        setUserInput(val);\n                    \n                    else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,true))\n                        setUserInput(val);\n                }\n            }\n\n            else if(allowNegative){\n                if(val.length===1 && val.charAt(0)==='-')\n                    setUserInput(val);\n                else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,false))\n                    setUserInput(val);\n            }\n\n            else if(decimalPrecision && (val.indexOf('.')===val.lastIndexOf('.')) && isInRange(val,true)){\n                if(decimalPrecisionRegex!.test(val))\n                    setUserInput(val);\n                else if(decimalFormationRegEx.test(val))\n                    setUserInput(val);\n                else if(!val.includes('.') && simpleRegex.test(val))\n                    setUserInput(val);\n            }\n\n            else if(simpleRegex.test(val) && isInRange(val, false)){\n                setUserInput(val);\n            }\n        }\n\n        if(val==='')\n            setUserInput('');\n    }\n\n    const isInRange = (value: string, isDecimal: boolean): boolean => {\n        let x = isDecimal ? parseFloat(value).toFixed(decimalPrecision) : parseInt(value);\n        if(minValue && minValue>x)\n            return false;\n        else if(maxValue && maxValue<x)\n            return false;\n        else\n            return true;\n    }\n\n    const addInterval = () => {\n        let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n        val = isNaN(val) && userInput === '' ? (minValue ?? 0) : val;\n        if(!isNaN(val)){\n            if(decimalPrecision)\n                val = Math.round((val+interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n            else\n                val +=1;\n\n            if(maxValue && maxValue>=val)\n                setUserInput(val.toString());\n            else if(!maxValue)\n                setUserInput(val.toString());\n        }\n    }\n\n    const subtractInterval = () => {\n        let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n        val = isNaN(val) && userInput === '' ? (maxValue ?? 0) : val;\n        if(!isNaN(val)){\n            if(decimalPrecision)\n                val = Math.round((val-interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n            else\n                val -=1;\n            \n            if(minValue && minValue<=val)\n                allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n            else if(!minValue)\n                allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n        }\n    }\n\n    const isLocked = (input: string, operator: string): boolean => {\n        let val = decimalPrecision ? parseFloat(input) : parseInt(input);\n        let operatorState = false;\n        if(operator === 'add' && maxValue)\n            operatorState = val < maxValue ? false : true;\n        \n        if(operator === 'subtract' && minValue)\n            operatorState =  val > minValue ? false : true;\n\n        return operatorState;\n    }\n\n    return (\n        <Container>\n            <LabelContainer>\n                {required && <LabelIcon size={size} data-testid={'labelIcon'}>\n                    <SystemIcons.Asterisk color={COLORS.critical_500}/>\n                </LabelIcon>\n                }\n                <LabelText>\n                    {label}\n                </LabelText>\n            </LabelContainer>\n\n            <InputContainer size={size} data-testid={'inputContainer'} tabIndex={-1} className={'numberField'.concat(disabled?' disabled':'')\n                                                                .concat(readOnly?' readOnly':'')\n                                                                .concat(fieldState?` ${fieldState}`:'')}>\n                <InputWrapper size={size}>\n                    {prefix && <PrefixContainer size={size}>\n                        {prefix}\n                    </PrefixContainer>}\n                    <NumberInput fieldSize={size} placeholder='Enter number' value={userInput} tabIndex={(disabled || readOnly) ? -1 : 0} onChange={e=>handleInput(e)} onKeyDown={e=>handleKeyPress(e)}/>\n                </InputWrapper>\n\n                <OperatorWrapper data-testid={'operators'} size={size}>\n                    <IconButton variant='secondary' shape='square' action={()=>subtractInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'subtract')}>\n                        <SystemIcons.Minus size='14px'/>\n                    </IconButton>                    \n                    <div className='divider'></div>\n                    <IconButton variant='secondary' shape='square' action={()=>addInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'add')}>\n                        <SystemIcons.Plus size='14px'/>\n                    </IconButton>\n                </OperatorWrapper>\n            </InputContainer>\n\n            {note && <NoteContainer className={'noteField'.concat(fieldState?` ${fieldState}`:'')}>\n                <NoteIcon>\n                    {noteIcon}\n                </NoteIcon>\n                <NoteLabel>\n                    {note}\n                </NoteLabel>                \n            </NoteContainer>\n            }\n        </Container>\n    );    \n}\n\nexport default NumberField;"],"file":"NumberField.js"}

package/dist/InputFields/QuickSearch.cjs

@@ -31,7 +31,7 @@ var _SystemIcons = require("../icons/systemicons/SystemIcons");
 
 var _SearchBarInput = _interopRequireDefault(require("./components/SearchBarInput"));
 
-var _SearchField = require("./components/SearchField");
+var _SearchField = _interopRequireWildcard(require("./components/SearchField"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -41,13 +41,7 @@ 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 QuickSearchField = (0, _styledComponents.default)(_SearchField.StyledSearchField)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 = _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,
@@ -65,121 +59,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 = (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 && !(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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_SearchBarInput.default, {
-      placeholder: disabled ? '' : placeholder,
+  }, [searchFieldVisible.visible, searchFieldInputRef]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SearchField.default, {
+      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__*/(0, _jsxRuntime.jsx)(_styling.SearchIconWrapper, {
-      className: size ? size : '',
-      role: "button",
-      "aria-label": performSearchLabel,
-      tabIndex: -1,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Iconbutton.default, {
-        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__*/(0, _jsxRuntime.jsx)(_SearchBarInput.default, {
+        placeholder: disabled ? '' : placeholder,
+        id: id,
+        ref: searchFieldInputRef,
+        disabled: disabled,
+        onKeyDown: handleKeyDown,
+        size: size,
+        setSearchTerm: function setSearchTerm(term) {
+          return _setSearchTerm(term);
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Search, {
-          size: "24px",
-          color: disabled ? _.COLORS.neutral_300 : _.COLORS.neutral_600
+        searchTerm: searchTerm,
+        enterSearch: enterSearch,
+        focusParentRefs: [searchFieldRef]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styling.SearchIconWrapper, {
+        className: size ? size : '',
+        role: "button",
+        "aria-label": performSearchLabel,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Iconbutton.default, {
+          id: "".concat(id, "_Searchbutton"),
+          variant: "secondary",
+          shape: "circular",
+          tabIndex: searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible ? -1 : 0,
+          action: handleSearchIconAction,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.Search, {
+            size: "24px",
+            color: disabled ? _.COLORS.neutral_300 : _.COLORS.neutral_600
+          })
         })
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styling.StyledIcon, {
-      className: size ? size : '',
-      role: "button",
-      tabIndex: -1,
-      hidden: searchTerm === '' || searchTerm === undefined || !searchFieldVisible,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Iconbutton.default, {
-        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__*/(0, _jsxRuntime.jsx)(_SystemIcons.Clear, {
-          size: "24px",
-          color: disabled ? _.COLORS.neutral_300 : _.COLORS.neutral_600
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styling.StyledIcon, {
+        className: size ? size : '',
+        role: "button",
+        hidden: !searchTerm || !(searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Iconbutton.default, {
+          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__*/(0, _jsxRuntime.jsx)(_SystemIcons.Clear, {
+            size: "24px",
+            color: disabled ? _.COLORS.neutral_300 : _.COLORS.neutral_600
+          })
+        })
+      }), loading && (searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styling.StyledIcon, {
+        className: size ? size : '',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LoadingIndicator, {
+          size: _types.Size.Small,
+          color: _.COLORS.neutral_600
         })
-      })
-    }), loading && searchFieldVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styling.StyledIcon, {
-      className: size ? size : '',
-      tabIndex: -1,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LoadingIndicator, {
-        size: _types.Size.Small,
-        color: _.COLORS.neutral_600
-      })
-    })]
+      })]
+    })
   });
 };
 

package/dist/InputFields/QuickSearch.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/QuickSearch.tsx"],"names":["QuickSearchField","StyledSearchField","props","margin","COLORS","white","neutral_600","expanded","primary_800","primary_700","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","loading","searchFieldRef","React","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","Size","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.cjs"}
+{"version":3,"sources":["../../src/InputFields/QuickSearch.tsx"],"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"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,goBAGTC,8BAHS,EA2BaC,SAAOC,KA3BpB,EA4BuBD,SAAOE,WA5B9B,EAiCuBF,SAAOG,WAjC9B,CAAb;;AAqDA,IAAMC,WAAsD,GAAG,SAAzDA,WAAyD,OAayB;AAAA,MAZtBC,EAYsB,QAZtBA,EAYsB;AAAA,MAXtBC,UAWsB,QAXtBA,UAWsB;AAAA,MAVtBC,cAUsB,QAVtBA,aAUsB;AAAA,MATtBC,WASsB,QATtBA,WASsB;AAAA,MARtBC,YAQsB,QARtBA,YAQsB;AAAA,MAPtBC,WAOsB,QAPtBA,WAOsB;AAAA,MANtBC,kBAMsB,QANtBA,kBAMsB;AAAA,MALtBC,QAKsB,QALtBA,QAKsB;AAAA,MAJtBC,SAIsB,QAJtBA,SAIsB;AAAA,MAHtBC,IAGsB,QAHtBA,IAGsB;AAAA,MAFtBC,MAEsB,QAFtBA,MAEsB;AAAA,MADtBC,OACsB,QADtBA,OACsB;AACtF,MAAMC,cAAc,GAAGC,KAAK,CAACC,MAAN,CAA6B,IAA7B,CAAvB;AACA,MAAMC,mBAAmB,GAAGF,KAAK,CAACC,MAAN,CAA+B,IAA/B,CAA5B;;AAEA,wBAAoDD,KAAK,CAACG,QAAN,CAAsD;AACxGC,IAAAA,OAAO,EAAE;AAD+F,GAAtD,CAApD;AAAA;AAAA,MAAOC,kBAAP;AAAA,MAA2BC,qBAA3B;;AAIA,MAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,CAAD,EAAY;AACrC,QAAIT,cAAc,SAAd,IAAAA,cAAc,WAAd,IAAAA,cAAc,CAAEU,OAAhB,IAA2B,CAACV,cAAc,CAACU,OAAf,CAAuBC,QAAvB,CAAgCF,CAAC,CAACG,MAAlC,CAAhC,EAA2E;AACzE,UAAIN,kBAAkB,SAAlB,IAAAA,kBAAkB,WAAlB,IAAAA,kBAAkB,CAAED,OAApB,IAA+B,EAAChB,UAAD,aAACA,UAAD,eAACA,UAAU,CAAEwB,MAAb,CAAnC,EAAwD;AACtDN,QAAAA,qBAAqB,CAAC;AAACF,UAAAA,OAAO,EAAE;AAAV,SAAD,CAArB;AACD;AACF;AACF,GAND;;AAQA,MAAMS,aAAa,GAAG,SAAhBA,aAAgB,CAACL,CAAD,EAAY;AAChC,QAAIb,SAAJ,EAAe;AACbA,MAAAA,SAAS,CAACa,CAAD,CAAT;AACD;;AACD,QAAIA,CAAC,CAACM,GAAF,KAAU,QAAd,EAAwB;AACtB,UAAIT,kBAAkB,SAAlB,IAAAA,kBAAkB,WAAlB,IAAAA,kBAAkB,CAAED,OAApB,IAA+B,EAAChB,UAAD,aAACA,UAAD,eAACA,UAAU,CAAEwB,MAAb,CAAnC,EAAwD;AACtDN,QAAAA,qBAAqB,CAAC;AAACF,UAAAA,OAAO,EAAE;AAAV,SAAD,CAArB;AACD;AACF;AACF,GATD;;AAWA,MAAMW,UAAU,GAAG,SAAbA,UAAa,CAACP,CAAD,EAAY;AAAA;;AAC7B,QAAI,CAACpB,UAAD,KAAgB,CAACoB,CAAC,CAACQ,aAAH,IAAoB,2BAACjB,cAAc,CAACU,OAAhB,kDAAC,sBAAwBC,QAAxB,CAAiCF,CAAC,CAACQ,aAAnC,CAAD,CAApC,CAAJ,EAA6F;AAC3FV,MAAAA,qBAAqB,CAAC;AAACF,QAAAA,OAAO,EAAE;AAAV,OAAD,CAArB;AACD;AACF,GAJD;;AAMA,MAAMa,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACT,CAAD,EAAY;AACzC,QAAIH,kBAAJ,aAAIA,kBAAJ,eAAIA,kBAAkB,CAAED,OAAxB,EAAiC;AAC/Bd,MAAAA,WAAW,CAACF,UAAD,CAAX;AACD,KAFD,MAEO;AACLkB,MAAAA,qBAAqB,CAAC;AACpBF,QAAAA,OAAO,EAAE,CAACC,kBAAkB,CAACD,OADT;AAEpBc,QAAAA,KAAK,EAAE,CAACb,kBAAkB,CAACD,OAApB,IAA+B,CAAAI,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEW,MAAH,MAAc;AAFhC,OAAD,CAArB;AAID;AACF,GATD,CAjCsF,CA4CtF;;;AACAnB,EAAAA,KAAK,CAACoB,SAAN,CAAgB,YAAM;AACpB,QAAI,CAAC,EAAChC,UAAD,aAACA,UAAD,eAACA,UAAU,CAAEwB,MAAb,CAAD,IAAwB,EAACP,kBAAD,aAACA,kBAAD,eAACA,kBAAkB,CAAED,OAArB,CAA5B,EAA0D;AACxDE,MAAAA,qBAAqB,CAAC;AAACF,QAAAA,OAAO,EAAE,IAAV;AAAgBc,QAAAA,KAAK,EAAE;AAAvB,OAAD,CAArB;AACD;AACF,GAJD,EAIG,CAAC9B,UAAD,EAAaiB,kBAAb,CAJH,EA7CsF,CAmDtF;;AACAL,EAAAA,KAAK,CAACoB,SAAN,CAAgB,YAAM;AACpBC,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,OAA1B,EAAmCf,kBAAnC;AACA,WAAO,YAAM;AACXc,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,OAA7B,EAAsChB,kBAAtC;AACD,KAFD;AAGD,GALD,EApDsF,CA2DtF;;AACAP,EAAAA,KAAK,CAACoB,SAAN,CAAgB,YAAM;AACpB,QAAIf,kBAAJ,aAAIA,kBAAJ,eAAIA,kBAAkB,CAAED,OAAxB,EAAiC;AAAA;;AAC/BF,MAAAA,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,qCAAAA,mBAAmB,CAAEO,OAArB,gFAA8BS,KAA9B,CAAoC;AAACM,QAAAA,YAAY,EAAEnB,kBAAkB,CAACa;AAAlC,OAApC;AACD;AACF,GAJD,EAIG,CAACb,kBAAkB,CAACD,OAApB,EAA6BF,mBAA7B,CAJH;AAOA,sBACE,qBAAC,OAAD;AAAA,2BACE,sBAAC,oBAAD;AAAa,MAAA,GAAG,EAAEH,cAAlB;AACa,MAAA,EAAE,EAAEZ,EADjB;AAEa,MAAA,IAAI,EAAES,IAFnB;AAGa,MAAA,UAAU,EAAER,UAHzB;AAIa,MAAA,KAAK,EAAE;AACLS,QAAAA,MAAM,EAAEA;AADH,OAJpB;AAOa,MAAA,MAAM,EAAEkB,UAPrB;AAQa,MAAA,SAAS,EAAEV,kBAAkB,SAAlB,IAAAA,kBAAkB,WAAlB,IAAAA,kBAAkB,CAAED,OAApB,GAA8B,UAA9B,GAA2C,EARnE;AAAA,iBASG,CAAAC,kBAAkB,SAAlB,IAAAA,kBAAkB,WAAlB,YAAAA,kBAAkB,CAAED,OAApB,kBACC,qBAAC,uBAAD;AACE,QAAA,WAAW,EAAEV,QAAQ,GAAG,EAAH,GAAQF,WAD/B;AAEE,QAAA,EAAE,EAAEL,EAFN;AAGE,QAAA,GAAG,EAAEe,mBAHP;AAIE,QAAA,QAAQ,EAAER,QAJZ;AAKE,QAAA,SAAS,EAAEmB,aALb;AAME,QAAA,IAAI,EAAEjB,IANR;AAOE,QAAA,aAAa,EAAE,uBAAC6B,IAAD;AAAA,iBAAkBpC,cAAa,CAACoC,IAAD,CAA/B;AAAA,SAPjB;AAQE,QAAA,UAAU,EAAErC,UARd;AASE,QAAA,WAAW,EAAEE,WATf;AAUE,QAAA,eAAe,EAAE,CAACS,cAAD;AAVnB,QAVJ,eAuBE,qBAAC,0BAAD;AAAmB,QAAA,SAAS,EAAEH,IAAI,GAAGA,IAAH,GAAU,EAA5C;AAAgD,QAAA,IAAI,EAAC,QAArD;AAA8D,sBAAYH,kBAA1E;AAAA,+BACE,qBAAC,mBAAD;AACE,UAAA,EAAE,YAAKN,EAAL,kBADJ;AAEE,UAAA,OAAO,EAAC,WAFV;AAGE,UAAA,KAAK,EAAC,UAHR;AAIE,UAAA,QAAQ,EAAEkB,kBAAkB,SAAlB,IAAAA,kBAAkB,WAAlB,IAAAA,kBAAkB,CAAED,OAApB,GAA8B,CAAC,CAA/B,GAAmC,CAJ/C;AAKE,UAAA,MAAM,EAAEa,sBALV;AAAA,iCAME,qBAAC,mBAAD;AAAY,YAAA,IAAI,EAAC,MAAjB;AAAwB,YAAA,KAAK,EAAEvB,QAAQ,GAAGZ,SAAO4C,WAAV,GAAwB5C,SAAO6C;AAAtE;AANF;AADF,QAvBF,eAiCE,qBAAC,mBAAD;AAAY,QAAA,SAAS,EAAE/B,IAAI,GAAGA,IAAH,GAAU,EAArC;AAAyC,QAAA,IAAI,EAAC,QAA9C;AACY,QAAA,MAAM,EAAE,CAACR,UAAD,IAAe,EAACiB,kBAAD,aAACA,kBAAD,eAACA,kBAAkB,CAAED,OAArB,CADnC;AAAA,+BAEE,qBAAC,mBAAD;AACE,UAAA,EAAE,YAAKjB,EAAL,eADJ;AAEE,UAAA,OAAO,EAAC,WAFV;AAGE,UAAA,KAAK,EAAC,UAHR;AAIE,UAAA,MAAM,EAAE,gBAACqB,CAAD,EAAO;AAAA;;AACbjB,YAAAA,YAAY,CAACiB,CAAD,CAAZ;AACAN,YAAAA,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,sCAAAA,mBAAmB,CAAEO,OAArB,kFAA8BS,KAA9B;AACD,WAPH;AAAA,iCAQE,qBAAC,kBAAD;AAAW,YAAA,IAAI,EAAC,MAAhB;AAAuB,YAAA,KAAK,EAAExB,QAAQ,GAAGZ,SAAO4C,WAAV,GAAwB5C,SAAO6C;AAArE;AARF;AAFF,QAjCF,EA8CG7B,OAAO,KAAIO,kBAAJ,aAAIA,kBAAJ,uBAAIA,kBAAkB,CAAED,OAAxB,CAAP,iBACC,qBAAC,mBAAD;AAAY,QAAA,SAAS,EAAER,IAAI,GAAGA,IAAH,GAAU,EAArC;AAAA,+BACE,qBAAC,kBAAD;AAAkB,UAAA,IAAI,EAAEgC,YAAKC,KAA7B;AAAoC,UAAA,KAAK,EAAE/C,SAAO6C;AAAlD;AADF,QA/CJ;AAAA;AADF,IADF;AAwDD,CAxID;;;AAdExC,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,a;AACAC,EAAAA,W;AACAC,EAAAA,Y;AACAC,EAAAA,W;AACAC,EAAAA,kB;AACAC,EAAAA,Q;AACAC,EAAAA,S;AAEAE,EAAAA,M;AACAC,EAAAA,O;;eA6IaZ,W","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.cjs"}