@laerdal/life-react-components 1.0.1-dev.28.full → 1.0.1-dev.29.full

package/dist/umd/InputFields/QuickSearch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/QuickSearch.tsx"],"names":["QuickSearchField","styled","props","margin","COLORS","neutral_600","primary_800","primary_700","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","loading","QuickSearch","searchFieldRef","React","searchFieldInputRef","handleClickOutside","e","setSearchFieldVisible","document","handleKeyDown","searchFieldVisible","term","undefined"],"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 { 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  box-shadow: none;\n  width: 48px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\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  input {\n    ::placeholder {\n      font-style: italic;\n      color: ${COLORS.neutral_600};\n    }\n  }\n\n  &:focus-within {\n    box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_800}` : 'none !important')};\n    width: 100%;\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?: 'small' | '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  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\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) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  return (\n    <QuickSearchField\n      ref={searchFieldRef}\n      expanded={searchFieldVisible}\n      id={`${id}_main`}\n      data-testid={`${id}_main`}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '')}\n      tabbedHere={tabbedHere}\n      tabIndex={-1}\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          setTabbedHere={setTabbedHere}\n          setSearchTerm={(term: string) => setSearchTerm(term)}\n          searchTerm={searchTerm}\n          enterSearch={enterSearch}\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          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}>\n        <IconButton id={`${id}_Clearicon`} variant=\"secondary\" shape=\"circular\" action={removeSearch}>\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=\"small\" color={COLORS.neutral_600} />\n        </StyledIcon>\n      )}\n    </QuickSearchField>\n  );\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.js"}
+{"version":3,"sources":["../../../src/InputFields/QuickSearch.tsx"],"names":["QuickSearchField","styled","props","margin","COLORS","neutral_600","primary_800","primary_700","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","loading","QuickSearch","searchFieldRef","React","searchFieldInputRef","handleClickOutside","e","searchFieldVisible","setSearchFieldVisible","document","handleKeyDown","event","term"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,QAAMA,gBAAgB,GAAGC,gCAAM,8BAANA,CAAkE;AAC3F,WAAYC,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAAA,MAAAA,GAA0B,MAAQ;AACzD,IAAKA,KAAD,IAAYA,KAAK,CAALA,MAAAA,GAAgB,WAAUA,KAAK,CAACC,MAAhCD,GAAAA,GAA4C,EAAI;AAChE;AACA;AACA;AACA;AACA;AACA;AACA,eAAeE,SAAOC,WAAY;AAClC;AACA;AACA;AACA,gBAAiBH,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAkB,yBAAwBE,SAAOE,WAAjDJ,EAAAA,GAAiE,iBAAmB;AAChH;AACA;AACA,kBAAmBA,KAAD,IAAYA,KAAK,CAALA,QAAAA,GAAkB,yBAAwBE,SAAOG,WAAjDL,EAAAA,GAAiE,iBAAmB;AAClH;AAjBA,CAAA;;AAmCA,QAAMiB,WAAsD,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,UAAA;AAAA,IAAA,aAAA;AAAA,IAAA,WAAA;AAAA,IAAA,YAAA;AAAA,IAAA,WAAA;AAAA,IAAA,kBAAA;AAAA,IAAA,QAAA;AAAA,IAAA,SAAA;AAAA,IAAA,IAAA;AAAA,IAAA,MAAA;AAY9DD,IAAAA;AAZ8D,GAAD,KAavC;AACtB,UAAME,cAAc,GAAGC,KAAK,CAALA,MAAAA,CAAvB,IAAuBA,CAAvB;AACA,UAAMC,mBAAmB,GAAGD,KAAK,CAALA,MAAAA,CAA5B,IAA4BA,CAA5B;AAEA,UAAM,CAAA,kBAAA,EAAA,qBAAA,IAA8CA,KAAK,CAALA,QAAAA,CAApD,KAAoDA,CAApD;AACA,UAAM,CAAA,UAAA,EAAA,aAAA,IAA8BA,KAAK,CAALA,QAAAA,CAApC,KAAoCA,CAApC;;AAEA,UAAME,kBAAkB,GAAIC,CAAD,IAAY;AACrC,UAAIJ,cAAc,EAAdA,OAAAA,IAA2B,CAACA,cAAc,CAAdA,OAAAA,CAAAA,QAAAA,CAAgCI,CAAC,CAAjE,MAAgCJ,CAAhC,EAA2E;AACzE,YAAIK,kBAAkB,IAAI,CAAChB,UAAU,EAArC,MAAA,EAA+C;AAC7CiB,UAAAA,qBAAqB,CAArBA,KAAqB,CAArBA;AACD;AACF;AALH,KAAA;;AAQAL,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAIZ,UAAU,EAAd,MAAA,EAAwB;AACtBiB,QAAAA,qBAAqB,CAArBA,IAAqB,CAArBA;AACD;AAHHL,KAAAA,EAIG,CAJHA,UAIG,CAJHA;AAMAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpBM,MAAAA,QAAQ,CAARA,gBAAAA,CAAAA,OAAAA,EAAAA,kBAAAA;AACA,aAAO,MAAM;AACXA,QAAAA,QAAQ,CAARA,mBAAAA,CAAAA,OAAAA,EAAAA,kBAAAA;AADF,OAAA;AAFFN,KAAAA;AAOAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAA,kBAAA,EAAwB;AACtBC,QAAAA,mBAAmB,EAAnBA,OAAAA,EAAAA,KAAAA;AACD;AAHHD,KAAAA,EAIG,CAAA,kBAAA,EAAA,mBAAA,EAJHA,EAIG,CAJHA;;AAMA,UAAMO,aAAa,GAAIJ,CAAD,IAAY;AAChC,UAAA,SAAA,EAAe;AACbR,QAAAA,SAAS,CAATA,CAAS,CAATA;AACD;;AACD,UAAIQ,CAAC,CAADA,GAAAA,KAAJ,QAAA,EAAwB;AACtB,YAAIC,kBAAkB,IAAI,CAAChB,UAAU,EAArC,MAAA,EAA+C;AAC7CiB,UAAAA,qBAAqB,CAArBA,KAAqB,CAArBA;AACD;AACF;AARH,KAAA;;AAWA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AACE,MAAA,GAAG,EADL,cAAA;AAEE,MAAA,QAAQ,EAFV,kBAAA;AAGE,MAAA,EAAE,EAAG,GAAElB,EAHT,OAAA;AAIE,MAAA,MAAM,EAAGqB,KAAD,IAAgB;AACtB,YAAIA,KAAK,CAALA,aAAAA,IAAuBT,cAAc,EAArCS,OAAAA,IAAkD,CAACT,cAAc,CAAdA,OAAAA,CAAAA,QAAAA,CAAgCS,KAAK,CAAxFA,aAAmDT,CAAnDS,IAA2G,CAA/G,UAAA,EAA4H;AAC1HH,UAAAA,qBAAqB,CAArBA,KAAqB,CAArBA;AACD;AAPL,OAAA;AASE,qBAAc,GAAElB,EATlB,OAAA;AAUE,MAAA,SAAS,EAAE,CAACC,UAAU,KAAVA,EAAAA,GAAAA,eAAAA,GAAD,EAAA,EAAA,MAAA,CAAkDQ,IAAI,GAAA,IAAA,GAVnE,EAUa,CAVb;AAWE,MAAA,UAAU,EAXZ,UAAA;AAYE,MAAA,QAAQ,EAAE,CAZZ,CAAA;AAaE,MAAA,MAAM,EAAEd;AAbV,KAAA,EAcGsB,kBAAkB,IAAA,aACjB,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AACE,MAAA,WAAW,EAAEV,QAAQ,GAAA,EAAA,GADvB,WAAA;AAEE,MAAA,EAAE,EAFJ,EAAA;AAGE,MAAA,GAAG,EAHL,mBAAA;AAIE,MAAA,QAAQ,EAJV,QAAA;AAKE,MAAA,SAAS,EALX,aAAA;AAME,MAAA,IAAI,EANN,IAAA;AAOE,MAAA,aAAa,EAPf,aAAA;AAQE,MAAA,aAAa,EAAGe,IAAD,IAAkBpB,aAAa,CARhD,IAQgD,CARhD;AASE,MAAA,UAAU,EATZ,UAAA;AAUE,MAAA,WAAW,EAAEC;AAVf,KAAA,CAfJ,EAAA,aA4BE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAmB,MAAA,SAAS,EAAEM,IAAI,GAAA,IAAA,GAAlC,EAAA;AAAgD,MAAA,IAAI,EAApD,QAAA;AAA8D,oBAA9D,kBAAA;AAA8F,MAAA,QAAQ,EAAE,CAAC;AAAzG,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AACE,MAAA,EAAE,EAAG,GAAET,EADT,eAAA;AAEE,MAAA,OAAO,EAFT,WAAA;AAGE,MAAA,KAAK,EAHP,UAAA;AAIE,MAAA,QAAQ,EAAEiB,kBAAkB,GAAG,CAAH,CAAA,GAJ9B,CAAA;AAKE,MAAA,MAAM,EAAGD,CAAD,IAAQC,kBAAkB,GAAGd,WAAW,CAAd,CAAc,CAAd,GAAoBe,qBAAqB,CAACD,kBAAkB,GAAA,KAAA,GAAnB,IAAA;AAL7E,KAAA,EAAA,aAME,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAY,MAAA,IAAI,EAAhB,MAAA;AAAwB,MAAA,KAAK,EAAEV,QAAQ,GAAGX,SAAH,WAAA,GAAwBA,SAAOC;AAAtE,KAAA,CANF,CADF,CA5BF,EAAA,aAsCE,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAY,MAAA,SAAS,EAAEY,IAAI,GAAA,IAAA,GAA3B,EAAA;AAAyC,MAAA,IAAI,EAA7C,QAAA;AAAuD,MAAA,QAAQ,EAAE,CAAjE,CAAA;AAAqE,MAAA,MAAM,EAAER,UAAU,KAAVA,EAAAA,IAAqBA,UAAU,KAA/BA,SAAAA,IAAiD,CAACgB;AAA/H,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AACE,MAAA,EAAE,EAAG,GAAEjB,EADT,YAAA;AAEE,MAAA,OAAO,EAFT,WAAA;AAGE,MAAA,KAAK,EAHP,UAAA;AAIE,MAAA,MAAM,EAAGgB,CAAD,IAAO;AACbZ,QAAAA,YAAY,CAAZA,CAAY,CAAZA;AACAU,QAAAA,mBAAmB,EAAnBA,OAAAA,EAAAA,KAAAA;AACD;AAPH,KAAA,EAAA,aAQE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAW,MAAA,IAAI,EAAf,MAAA;AAAuB,MAAA,KAAK,EAAEP,QAAQ,GAAGX,SAAH,WAAA,GAAwBA,SAAOC;AAArE,KAAA,CARF,CADF,CAtCF,EAkDGa,OAAO,IAAPA,kBAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAY,MAAA,SAAS,EAAED,IAAI,GAAA,IAAA,GAA3B,EAAA;AAAyC,MAAA,QAAQ,EAAE,CAAC;AAApD,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAkB,MAAA,IAAI,EAAtB,OAAA;AAA+B,MAAA,KAAK,EAAEb,SAAOC;AAA7C,KAAA,CADF,CAnDJ,CADF;AA1DF,GAAA;;;AAdEG,IAAAA,E;AACAC,IAAAA,U;AACAC,IAAAA,a;AACAC,IAAAA,W;AACAC,IAAAA,Y;AACAC,IAAAA,W;AACAC,IAAAA,kB;AACAC,IAAAA,Q;AACAC,IAAAA,S;AACAC,IAAAA,I,6BAAO,O,EAAU,Q;AACjBd,IAAAA,M;AACAe,IAAAA,O;;oBAyHF,W","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\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  width: ${(props) => (props.expanded ? '100%' : '48px')};\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  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?: 'small' | '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  const [tabbedHere, setTabbedHere] = 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 : '')}\n      tabbedHere={tabbedHere}\n      tabIndex={-1}\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          setTabbedHere={setTabbedHere}\n          setSearchTerm={(term: string) => setSearchTerm(term)}\n          searchTerm={searchTerm}\n          enterSearch={enterSearch}\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 ? false : true))}>\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=\"small\" color={COLORS.neutral_600} />\n        </StyledIcon>\n      )}\n    </QuickSearchField>\n  );\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.js"}

package/dist/umd/InputFields/components/SearchBarInput.js

@@ -173,7 +173,7 @@
       id: id,
       "data-testid": id,
       className: size ? size : '',
-      tabIndex: -1,
+      tabIndex: 0,
       disabled: disabled,
       onChange: e => setSearchTerm(e.target.value),
       value: searchTerm,

package/dist/umd/InputFields/components/SearchBarInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/InputFields/components/SearchBarInput.tsx"],"names":["Search","type","ComponentSStyling","ComponentTextStyle","COLORS","BigSearch","styled","ComponentMStyling","BREAKPOINTS","MEDIUM","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","setTabbedHere","onBlur","SearchBarInput","isPressingEnter","e"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles/index';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  /* To prevent browser putting its own cross inside the search bar */\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  &:focus {\n    outline-width: 0;\n  }\n`;\n\nexport const BigSearch = styled(Search)`\n  height: 32px;\n  border-width: 0;\n  margin-left: 50px;\n  outline: none;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.small {\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: 'small' | 'medium';\n  setTabbedHere: (tabbedHere: boolean) => void;\n  onBlur?: (e: any) => void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, setTabbedHere, onBlur } = props;\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <BigSearch\n      placeholder={disabled ? '' : placeholder}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={-1}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      ref={ref}\n      onBlur={(e) => (onBlur ? onBlur(e) : setTabbedHere(false))}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.js"}
+{"version":3,"sources":["../../../../src/InputFields/components/SearchBarInput.tsx"],"names":["Search","type","ComponentSStyling","ComponentTextStyle","COLORS","BigSearch","styled","ComponentMStyling","BREAKPOINTS","MEDIUM","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","setTabbedHere","onBlur","SearchBarInput","isPressingEnter","e"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles/typography';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  /* To prevent browser putting its own cross inside the search bar */\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  &:focus {\n    outline-width: 0;\n  }\n`;\n\nexport const BigSearch = styled(Search)`\n  height: 32px;\n  border-width: 0;\n  margin-left: 50px;\n  outline: none;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.small {\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: 'small' | 'medium';\n  setTabbedHere: (tabbedHere: boolean) => void;\n  onBlur?: (e: any) => void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, setTabbedHere, onBlur } = props;\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <BigSearch\n      placeholder={disabled ? '' : placeholder}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      ref={ref}\n      onBlur={(e) => (onBlur ? onBlur(e) : setTabbedHere(false))}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.0.1-dev.28.full",
+  "version": "1.0.1-dev.29.full",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [