@laerdal/life-react-components 3.0.1-dev.9 → 3.1.0

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

package/dist/InputFields/QuickSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickSearch.js","names":["React","styled","IconButton","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","SystemIcons","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';\r\nimport styled from 'styled-components';\r\n\r\nimport IconButton from '../Button/Iconbutton';\r\nimport { SearchIconWrapper, StyledIcon } from './styling';\r\nimport { Size } from '../types';\r\nimport { COLORS, LoadingIndicator } from '..';\r\nimport { SystemIcons } from '../icons';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField, { StyledSearchField } from './components/SearchField';\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n\r\n  ${StyledSearchField} {\r\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\r\n\r\n    background-color: transparent;\r\n\r\n    &.small {\r\n      width: 48px;\r\n    }\r\n\r\n    &.medium {\r\n      width: 56px;\r\n    }\r\n\r\n    &.expanded {\r\n      width: 100%;\r\n    }\r\n\r\n    box-shadow: none;\r\n\r\n    &:hover {\r\n      box-shadow: none;\r\n    }\r\n\r\n    &.expanded {\r\n      background-color: ${COLORS.white};\r\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n    }\r\n\r\n    &.expanded:hover,\r\n    &.expanded:focus-within {\r\n      box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n    }\r\n  }\r\n`;\r\n\r\nexport type QuickSearchProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  removeSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  performSearchLabel?: string;\r\n  disabled?: boolean;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n  loading?: boolean;\r\n};\r\n\r\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\r\n  id,\r\n  searchTerm,\r\n  setSearchTerm,\r\n  enterSearch,\r\n  removeSearch,\r\n  placeholder,\r\n  performSearchLabel,\r\n  disabled,\r\n  onKeyDown,\r\n  size,\r\n  margin,\r\n  loading,\r\n}: QuickSearchProps) => {\r\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\r\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\r\n\r\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\r\n    visible: false,\r\n  });\r\n\r\n  const handleClickOutside = (e: any) => {\r\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\r\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n        setSearchFieldVisible({ visible: false });\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (onKeyDown) {\r\n      onKeyDown(e);\r\n    }\r\n    if (e.key === 'Escape') {\r\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n        setSearchFieldVisible({ visible: false });\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleBlur = (e: any) => {\r\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\r\n      setSearchFieldVisible({ visible: false });\r\n    }\r\n  };\r\n\r\n  const handleSearchIconAction = (e: any) => {\r\n    if (!searchFieldVisible?.visible) {\r\n      setSearchFieldVisible({\r\n        visible: !searchFieldVisible.visible,\r\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\r\n      });\r\n    }\r\n  };\r\n\r\n  // set search field visibility on search term change\r\n  React.useEffect(() => {\r\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\r\n      setSearchFieldVisible({ visible: true, focus: false });\r\n    }\r\n  }, [searchTerm, searchFieldVisible]);\r\n\r\n  // register click outside handler\r\n  React.useEffect(() => {\r\n    document.addEventListener('click', handleClickOutside);\r\n    return () => {\r\n      document.removeEventListener('click', handleClickOutside);\r\n    };\r\n  }, []);\r\n\r\n  // focus search input on visibility change\r\n  React.useEffect(() => {\r\n    if (searchFieldVisible?.visible) {\r\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\r\n    }\r\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\r\n\r\n  return (\r\n    <Wrapper>\r\n      <SearchField\r\n        ref={searchFieldRef}\r\n        id={id}\r\n        size={size}\r\n        searchTerm={searchTerm}\r\n        style={{\r\n          margin: margin,\r\n        }}\r\n        onBlur={handleBlur}\r\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\r\n        {searchFieldVisible?.visible && (\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            ref={searchFieldInputRef}\r\n            disabled={disabled}\r\n            onKeyDown={handleKeyDown}\r\n            size={size}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            enterSearch={enterSearch}\r\n            focusParentRefs={[searchFieldRef]}\r\n          />\r\n        )}\r\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\r\n          <IconButton\r\n            shouldNotInteract={searchFieldVisible?.visible}\r\n            id={`${id}_Searchbutton`}\r\n            dataTestId={`${id}_Searchbutton`}\r\n            variant=\"secondary\"\r\n            shape=\"circular\"\r\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\r\n            action={handleSearchIconAction}>\r\n            <SystemIcons.Search size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\r\n          </IconButton>\r\n        </SearchIconWrapper>\r\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\r\n          <IconButton\r\n            id={`${id}_Clearicon`}\r\n            dataTestId={`${id}_Clearicon`}\r\n            variant=\"secondary\"\r\n            shape=\"circular\"\r\n            action={(e) => {\r\n              removeSearch(e);\r\n              searchFieldInputRef?.current?.focus();\r\n            }}>\r\n            <SystemIcons.Clear size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\r\n          </IconButton>\r\n        </StyledIcon>\r\n        {loading && searchFieldVisible?.visible && (\r\n          <StyledIcon className={size ? size : ''}>\r\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\r\n          </StyledIcon>\r\n        )}\r\n      </SearchField>\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default QuickSearch;\r\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAOC,UAAU,MAAM,sBAAsB;AAC7C,SAASC,iBAAiB,EAAEC,UAAU,QAAQ,WAAW;AACzD,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,IAAI;AAC7C,SAASC,WAAW,QAAQ,UAAU;AACtC,OAAOC,cAAc,MAAM,6BAA6B;AACxD,OAAOC,WAAW,IAAIC,iBAAiB,QAAQ,0BAA0B;AAAC;AAAA;AAE1E,IAAMC,OAAO,GAAGX,MAAM,CAACY,GAAG,knBAGtBF,iBAAiB,EAwBKL,MAAM,CAACQ,KAAK,EACFR,MAAM,CAACS,WAAW,EAKlBT,MAAM,CAACU,WAAW,CAGrD;AAiBD,IAAMC,WAAsD,GAAG,SAAzDA,WAAsD,OAapC;EAAA,IAZtBC,EAAE,QAAFA,EAAE;IACFC,UAAU,QAAVA,UAAU;IACVC,cAAa,QAAbA,aAAa;IACbC,WAAW,QAAXA,WAAW;IACXC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,kBAAkB,QAAlBA,kBAAkB;IAClBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;EAEP,IAAMC,cAAc,GAAG9B,KAAK,CAAC+B,MAAM,CAAiB,IAAI,CAAC;EACzD,IAAMC,mBAAmB,GAAGhC,KAAK,CAAC+B,MAAM,CAAmB,IAAI,CAAC;EAEhE,sBAAoD/B,KAAK,CAACiC,QAAQ,CAAwC;MACxGC,OAAO,EAAE;IACX,CAAC,CAAC;IAAA;IAFKC,kBAAkB;IAAEC,qBAAqB;EAIhD,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,CAAM,EAAK;IACrC,IAAIR,cAAc,aAAdA,cAAc,eAAdA,cAAc,CAAES,OAAO,IAAI,CAACT,cAAc,CAACS,OAAO,CAACC,QAAQ,CAACF,CAAC,CAACG,MAAM,CAAC,EAAE;MACzE,IAAIN,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAED,OAAO,IAAI,EAACf,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAEuB,MAAM,GAAE;QACtDN,qBAAqB,CAAC;UAAEF,OAAO,EAAE;QAAM,CAAC,CAAC;MAC3C;IACF;EACF,CAAC;EAED,IAAMS,aAAa,GAAG,SAAhBA,aAAa,CAAIL,CAAM,EAAK;IAChC,IAAIZ,SAAS,EAAE;MACbA,SAAS,CAACY,CAAC,CAAC;IACd;IACA,IAAIA,CAAC,CAACM,GAAG,KAAK,QAAQ,EAAE;MACtB,IAAIT,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAED,OAAO,IAAI,EAACf,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAEuB,MAAM,GAAE;QACtDN,qBAAqB,CAAC;UAAEF,OAAO,EAAE;QAAM,CAAC,CAAC;MAC3C;IACF;EACF,CAAC;EAED,IAAMW,UAAU,GAAG,SAAbA,UAAU,CAAIP,CAAM,EAAK;IAAA;IAC7B,IAAI,CAACnB,UAAU,KAAK,CAACmB,CAAC,CAACQ,aAAa,IAAI,2BAAChB,cAAc,CAACS,OAAO,kDAAtB,sBAAwBC,QAAQ,CAACF,CAAC,CAACQ,aAAa,CAAC,EAAC,EAAE;MAC3FV,qBAAqB,CAAC;QAAEF,OAAO,EAAE;MAAM,CAAC,CAAC;IAC3C;EACF,CAAC;EAED,IAAMa,sBAAsB,GAAG,SAAzBA,sBAAsB,CAAIT,CAAM,EAAK;IACzC,IAAI,EAACH,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAED,OAAO,GAAE;MAChCE,qBAAqB,CAAC;QACpBF,OAAO,EAAE,CAACC,kBAAkB,CAACD,OAAO;QACpCc,KAAK,EAAE,CAACb,kBAAkB,CAACD,OAAO,IAAI,CAAAI,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEW,MAAM,MAAK;MACtD,CAAC,CAAC;IACJ;EACF,CAAC;;EAED;EACAjD,KAAK,CAACkD,SAAS,CAAC,YAAM;IACpB,IAAI,CAAC,EAAC/B,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAEuB,MAAM,KAAI,EAACP,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAED,OAAO,GAAE;MACxDE,qBAAqB,CAAC;QAAEF,OAAO,EAAE,IAAI;QAAEc,KAAK,EAAE;MAAM,CAAC,CAAC;IACxD;EACF,CAAC,EAAE,CAAC7B,UAAU,EAAEgB,kBAAkB,CAAC,CAAC;;EAEpC;EACAnC,KAAK,CAACkD,SAAS,CAAC,YAAM;IACpBC,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAEf,kBAAkB,CAAC;IACtD,OAAO,YAAM;MACXc,QAAQ,CAACE,mBAAmB,CAAC,OAAO,EAAEhB,kBAAkB,CAAC;IAC3D,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;;EAEN;EACArC,KAAK,CAACkD,SAAS,CAAC,YAAM;IACpB,IAAIf,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAED,OAAO,EAAE;MAAA;MAC/BF,mBAAmB,aAAnBA,mBAAmB,gDAAnBA,mBAAmB,CAAEO,OAAO,0DAA5B,sBAA8BS,KAAK,CAAC;QAAEM,YAAY,EAAEnB,kBAAkB,CAACa;MAAM,CAAC,CAAQ;IACxF;EACF,CAAC,EAAE,CAACb,kBAAkB,CAACD,OAAO,EAAEF,mBAAmB,CAAC,CAAC;EAErD,oBACE,KAAC,OAAO;IAAA,uBACN,MAAC,WAAW;MACV,GAAG,EAAEF,cAAe;MACpB,EAAE,EAAEZ,EAAG;MACP,IAAI,EAAES,IAAK;MACX,UAAU,EAAER,UAAW;MACvB,KAAK,EAAE;QACLS,MAAM,EAAEA;MACV,CAAE;MACF,MAAM,EAAEiB,UAAW;MACnB,SAAS,EAAEV,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAED,OAAO,GAAG,UAAU,GAAG,EAAG;MAAA,WACxD,CAAAC,kBAAkB,aAAlBA,kBAAkB,uBAAlBA,kBAAkB,CAAED,OAAO,kBAC1B,KAAC,cAAc;QACb,WAAW,EAAET,QAAQ,GAAG,EAAE,GAAGF,WAAY;QACzC,EAAE,EAAEL,EAAG;QACP,GAAG,EAAEc,mBAAoB;QACzB,QAAQ,EAAEP,QAAS;QACnB,SAAS,EAAEkB,aAAc;QACzB,IAAI,EAAEhB,IAAK;QACX,aAAa,EAAE,uBAAC4B,IAAY;UAAA,OAAKnC,cAAa,CAACmC,IAAI,CAAC;QAAA,CAAC;QACrD,UAAU,EAAEpC,UAAW;QACvB,WAAW,EAAEE,WAAY;QACzB,eAAe,EAAE,CAACS,cAAc;MAAE,EAErC,eACD,KAAC,iBAAiB;QAAC,SAAS,EAAEH,IAAI,GAAGA,IAAI,GAAG,EAAG;QAAC,IAAI,EAAC,QAAQ;QAAC,cAAYH,kBAAmB;QAAA,uBAC3F,KAAC,UAAU;UACT,iBAAiB,EAAEW,kBAAkB,aAAlBA,kBAAkB,uBAAlBA,kBAAkB,CAAED,OAAQ;UAC/C,EAAE,YAAKhB,EAAE,kBAAgB;UACzB,UAAU,YAAKA,EAAE,kBAAgB;UACjC,OAAO,EAAC,WAAW;UACnB,KAAK,EAAC,UAAU;UAChB,QAAQ,EAAEiB,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAED,OAAO,GAAG,CAAC,CAAC,GAAG,CAAE;UAC/C,MAAM,EAAEa,sBAAuB;UAAA,uBAC/B,KAAC,WAAW,CAAC,MAAM;YAAC,IAAI,EAAC,MAAM;YAAC,KAAK,EAAEtB,QAAQ,GAAGnB,MAAM,CAACkD,WAAW,GAAGlD,MAAM,CAACmD;UAAY;QAAG;MAClF,EACK,eACpB,KAAC,UAAU;QAAC,SAAS,EAAE9B,IAAI,GAAGA,IAAI,GAAG,EAAG;QAAC,IAAI,EAAC,QAAQ;QAAC,MAAM,EAAE,CAACR,UAAU,IAAI,EAACgB,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAED,OAAO,CAAC;QAAA,uBACzG,KAAC,UAAU;UACT,EAAE,YAAKhB,EAAE,eAAa;UACtB,UAAU,YAAKA,EAAE,eAAa;UAC9B,OAAO,EAAC,WAAW;UACnB,KAAK,EAAC,UAAU;UAChB,MAAM,EAAE,gBAACoB,CAAC,EAAK;YAAA;YACbhB,YAAY,CAACgB,CAAC,CAAC;YACfN,mBAAmB,aAAnBA,mBAAmB,iDAAnBA,mBAAmB,CAAEO,OAAO,2DAA5B,uBAA8BS,KAAK,EAAE;UACvC,CAAE;UAAA,uBACF,KAAC,WAAW,CAAC,KAAK;YAAC,IAAI,EAAC,MAAM;YAAC,KAAK,EAAEvB,QAAQ,GAAGnB,MAAM,CAACkD,WAAW,GAAGlD,MAAM,CAACmD;UAAY;QAAG;MACjF,EACF,EACZ5B,OAAO,KAAIM,kBAAkB,aAAlBA,kBAAkB,uBAAlBA,kBAAkB,CAAED,OAAO,kBACrC,KAAC,UAAU;QAAC,SAAS,EAAEP,IAAI,GAAGA,IAAI,GAAG,EAAG;QAAA,uBACtC,KAAC,gBAAgB;UAAC,IAAI,EAAEtB,IAAI,CAACqD,KAAM;UAAC,KAAK,EAAEpD,MAAM,CAACmD;QAAY;MAAG,EAEpE;IAAA;EACW,EACN;AAEd,CAAC;AAAC;EAtJAvC,EAAE;EACFC,UAAU;EACVC,aAAa;EACbC,WAAW;EACXC,YAAY;EACZC,WAAW;EACXC,kBAAkB;EAClBC,QAAQ;EACRC,SAAS;EAETE,MAAM;EACNC,OAAO;AAAA;AA6IT,eAAeZ,WAAW"}
+{"version":3,"file":"QuickSearch.js","names":["React","styled","IconButton","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","SystemIcons","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 { SystemIcons } from '../icons';\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\nexport type 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            dataTestId={`${id}_Searchbutton`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\n            action={handleSearchIconAction}>\n            <SystemIcons.Search 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            dataTestId={`${id}_Clearicon`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            action={(e) => {\n              removeSearch(e);\n              searchFieldInputRef?.current?.focus();\n            }}>\n            <SystemIcons.Clear 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

@@ -68,7 +68,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: 'radio-button-icon',
       id: id,
-      "data-testId": dataTestId,
+      "data-testid": dataTestId,
       children: [selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.RadioButtonOn, {
         className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"

package/dist/InputFields/RadioButton.cjs.map

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

package/dist/InputFields/RadioButton.d.ts

@@ -1,31 +1,31 @@
-import * as React from 'react';
-import { Size, Testable } from '../types';
-export type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {
-    id?: string;
-    selected: boolean;
-    select: (selected: boolean) => void;
-    label?: string;
-    additionalLabel?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    iconPointerEventsTransparent?: boolean;
-    margin?: string;
-    size?: Size;
-    tabIndexVal?: number;
-    className?: string;
-};
-declare const RadioButton: React.ForwardRefExoticComponent<Testable & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "tabIndex" | "onKeyDown" | "onClick" | "onMouseDown"> & {
-    id?: string | undefined;
-    selected: boolean;
-    select: (selected: boolean) => void;
-    label?: string | undefined;
-    additionalLabel?: string | undefined;
-    invalid?: boolean | undefined;
-    disabled?: boolean | undefined;
-    iconPointerEventsTransparent?: boolean | undefined;
-    margin?: string | undefined;
-    size?: Size | undefined;
-    tabIndexVal?: number | undefined;
-    className?: string | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export default RadioButton;
+import * as React from 'react';
+import { Size, Testable } from '../types';
+export type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {
+    id?: string;
+    selected: boolean;
+    select: (selected: boolean) => void;
+    label?: string;
+    additionalLabel?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    iconPointerEventsTransparent?: boolean;
+    margin?: string;
+    size?: Size;
+    tabIndexVal?: number;
+    className?: string;
+};
+declare const RadioButton: React.ForwardRefExoticComponent<Testable & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "tabIndex" | "onKeyDown" | "onClick" | "onMouseDown"> & {
+    id?: string | undefined;
+    selected: boolean;
+    select: (selected: boolean) => void;
+    label?: string | undefined;
+    additionalLabel?: string | undefined;
+    invalid?: boolean | undefined;
+    disabled?: boolean | undefined;
+    iconPointerEventsTransparent?: boolean | undefined;
+    margin?: string | undefined;
+    size?: Size | undefined;
+    tabIndexVal?: number | undefined;
+    className?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default RadioButton;

package/dist/InputFields/RadioButton.js

@@ -60,7 +60,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children: [/*#__PURE__*/_jsxs("div", {
       className: 'radio-button-icon',
       id: id,
-      "data-testId": dataTestId,
+      "data-testid": dataTestId,
       children: [selected && /*#__PURE__*/_jsx(SystemIcons.RadioButtonOn, {
         className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"

package/dist/InputFields/RadioButton.js.map

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

package/dist/InputFields/ResponsiveComponentWrapper.cjs

@@ -14,12 +14,12 @@ var _styles = require("../styles");
 var _jsxRuntime = require("react/jsx-runtime");
 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; }
-/**
- * Import React libraries.
+/**
+ * Import React libraries.
  */
 
-/**
- * Import custom styles.
+/**
+ * Import custom styles.
  */
 
 var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {

package/dist/InputFields/ResponsiveComponentWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveComponentWrapper.cjs","names":["ReponsiveComponentWrapper","children","size","React","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","removeEventListener","Size","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\r\n\r\n// Add component-specific types\r\ntype LabelProps = {\r\n  size?: Size.Small | Size.Medium;\r\n  children?: any;\r\n};\r\n\r\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\r\n\r\n  React.useEffect(() => {\r\n    const handleResize = () => {\r\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\r\n      setIsMediumView(mql.matches);\r\n    };\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n\r\n  return size && size === Size.Medium ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : size && size === Size.Small ? (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  ) : isMediumView ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  );\r\n};\r\n\r\nexport default ReponsiveComponentWrapper;\r\n"],"mappings":";;;;;;;;;;AAGA;AACA;AAKA;AAAmE;AAAA;AAAA;AATnE;AACA;AACA;;AAIA;AACA;AACA;;AASA,IAAMA,yBAA8D,GAAG,SAAjEA,yBAA8D,OAAuC;EAAA,IAAjCC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EACtF;EACA,sBAAwCC,KAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAA;IAA/DC,YAAY;IAAEC,eAAe;EAEpCH,KAAK,CAACI,SAAS,CAAC,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,WAAIC,mBAAW,CAACC,MAAM,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,EAAG;MAC7ER,eAAe,CAACG,GAAG,CAACM,OAAO,CAAC;IAC9B,CAAC;IACDL,MAAM,CAACM,gBAAgB,CAAC,QAAQ,EAAER,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAME,MAAM,CAACO,mBAAmB,CAAC,QAAQ,EAAET,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAON,IAAI,IAAIA,IAAI,KAAKgB,WAAI,CAACC,MAAM,gBACjC,qBAAC,mBAAW;IAAA,UAAElB;EAAQ,EAAe,GACnCC,IAAI,IAAIA,IAAI,KAAKgB,WAAI,CAACE,KAAK,gBAC7B,qBAAC,oBAAY;IAAA,UAAEnB;EAAQ,EAAgB,GACrCI,YAAY,gBACd,qBAAC,mBAAW;IAAA,UAAEJ;EAAQ,EAAe,gBAErC,qBAAC,oBAAY;IAAA,UAAEA;EAAQ,EACxB;AACH,CAAC;AAAC;EAzBAA,QAAQ;AAAA;AAAA,eA2BKD,yBAAyB;AAAA"}
+{"version":3,"file":"ResponsiveComponentWrapper.cjs","names":["ReponsiveComponentWrapper","children","size","React","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","removeEventListener","Size","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"mappings":";;;;;;;;;;AAGA;AACA;AAKA;AAAmE;AAAA;AAAA;AATnE;AACA;AACA;;AAIA;AACA;AACA;;AASA,IAAMA,yBAA8D,GAAG,SAAjEA,yBAA8D,OAAuC;EAAA,IAAjCC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EACtF;EACA,sBAAwCC,KAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAA;IAA/DC,YAAY;IAAEC,eAAe;EAEpCH,KAAK,CAACI,SAAS,CAAC,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,WAAIC,mBAAW,CAACC,MAAM,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,EAAG;MAC7ER,eAAe,CAACG,GAAG,CAACM,OAAO,CAAC;IAC9B,CAAC;IACDL,MAAM,CAACM,gBAAgB,CAAC,QAAQ,EAAER,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAME,MAAM,CAACO,mBAAmB,CAAC,QAAQ,EAAET,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAON,IAAI,IAAIA,IAAI,KAAKgB,WAAI,CAACC,MAAM,gBACjC,qBAAC,mBAAW;IAAA,UAAElB;EAAQ,EAAe,GACnCC,IAAI,IAAIA,IAAI,KAAKgB,WAAI,CAACE,KAAK,gBAC7B,qBAAC,oBAAY;IAAA,UAAEnB;EAAQ,EAAgB,GACrCI,YAAY,gBACd,qBAAC,mBAAW;IAAA,UAAEJ;EAAQ,EAAe,gBAErC,qBAAC,oBAAY;IAAA,UAAEA;EAAQ,EACxB;AACH,CAAC;AAAC;EAzBAA,QAAQ;AAAA;AAAA,eA2BKD,yBAAyB;AAAA"}

package/dist/InputFields/ResponsiveComponentWrapper.d.ts

@@ -1,11 +1,11 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-import { Size } from '../types';
-type LabelProps = {
-    size?: Size.Small | Size.Medium;
-    children?: any;
-};
-declare const ReponsiveComponentWrapper: React.FunctionComponent<LabelProps>;
-export default ReponsiveComponentWrapper;
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+import { Size } from '../types';
+type LabelProps = {
+    size?: Size.Small | Size.Medium;
+    children?: any;
+};
+declare const ReponsiveComponentWrapper: React.FunctionComponent<LabelProps>;
+export default ReponsiveComponentWrapper;

package/dist/InputFields/ResponsiveComponentWrapper.js

@@ -1,13 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _pt from "prop-types";
-/**
- * Import React libraries.
+/**
+ * Import React libraries.
  */
 import * as React from 'react';
 import { Size } from '../types';
 
-/**
- * Import custom styles.
+/**
+ * Import custom styles.
  */
 import { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';
 

package/dist/InputFields/ResponsiveComponentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveComponentWrapper.js","names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","MEDIUM","replace","matches","addEventListener","removeEventListener","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\r\n\r\n// Add component-specific types\r\ntype LabelProps = {\r\n  size?: Size.Small | Size.Medium;\r\n  children?: any;\r\n};\r\n\r\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\r\n\r\n  React.useEffect(() => {\r\n    const handleResize = () => {\r\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\r\n      setIsMediumView(mql.matches);\r\n    };\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n\r\n  return size && size === Size.Medium ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : size && size === Size.Small ? (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  ) : isMediumView ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  );\r\n};\r\n\r\nexport default ReponsiveComponentWrapper;\r\n"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAQ,UAAU;;AAE/B;AACA;AACA;AACA,SAASC,WAAW,EAAEC,YAAY,EAAEC,WAAW,QAAQ,WAAW;;AAElE;AAAA;AAMA,IAAMC,yBAA8D,GAAG,SAAjEA,yBAA8D,OAAuC;EAAA,IAAjCC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EACtF;EACA,sBAAwCP,KAAK,CAACQ,QAAQ,CAAU,KAAK,CAAC;IAAA;IAA/DC,YAAY;IAAEC,eAAe;EAEpCV,KAAK,CAACW,SAAS,CAAC,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,WAAIb,WAAW,CAACc,MAAM,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,EAAG;MAC7EP,eAAe,CAACG,GAAG,CAACK,OAAO,CAAC;IAC9B,CAAC;IACDJ,MAAM,CAACK,gBAAgB,CAAC,QAAQ,EAAEP,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAME,MAAM,CAACM,mBAAmB,CAAC,QAAQ,EAAER,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOL,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACoB,MAAM,gBACjC,KAAC,WAAW;IAAA,UAAEf;EAAQ,EAAe,GACnCC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACqB,KAAK,gBAC7B,KAAC,YAAY;IAAA,UAAEhB;EAAQ,EAAgB,GACrCG,YAAY,gBACd,KAAC,WAAW;IAAA,UAAEH;EAAQ,EAAe,gBAErC,KAAC,YAAY;IAAA,UAAEA;EAAQ,EACxB;AACH,CAAC;AAAC;EAzBAA,QAAQ;AAAA;AA2BV,eAAeD,yBAAyB"}
+{"version":3,"file":"ResponsiveComponentWrapper.js","names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","MEDIUM","replace","matches","addEventListener","removeEventListener","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAQ,UAAU;;AAE/B;AACA;AACA;AACA,SAASC,WAAW,EAAEC,YAAY,EAAEC,WAAW,QAAQ,WAAW;;AAElE;AAAA;AAMA,IAAMC,yBAA8D,GAAG,SAAjEA,yBAA8D,OAAuC;EAAA,IAAjCC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EACtF;EACA,sBAAwCP,KAAK,CAACQ,QAAQ,CAAU,KAAK,CAAC;IAAA;IAA/DC,YAAY;IAAEC,eAAe;EAEpCV,KAAK,CAACW,SAAS,CAAC,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,WAAIb,WAAW,CAACc,MAAM,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,EAAG;MAC7EP,eAAe,CAACG,GAAG,CAACK,OAAO,CAAC;IAC9B,CAAC;IACDJ,MAAM,CAACK,gBAAgB,CAAC,QAAQ,EAAEP,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAME,MAAM,CAACM,mBAAmB,CAAC,QAAQ,EAAER,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOL,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACoB,MAAM,gBACjC,KAAC,WAAW;IAAA,UAAEf;EAAQ,EAAe,GACnCC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACqB,KAAK,gBAC7B,KAAC,YAAY;IAAA,UAAEhB;EAAQ,EAAgB,GACrCG,YAAY,gBACd,KAAC,WAAW;IAAA,UAAEH;EAAQ,EAAe,gBAErC,KAAC,YAAY;IAAA,UAAEA;EAAQ,EACxB;AACH,CAAC;AAAC;EAzBAA,QAAQ;AAAA;AA2BV,eAAeD,yBAAyB"}

package/dist/InputFields/SearchBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.cjs","names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","useState","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","COLORS","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\r\nimport {COLORS} from '../styles/index';\r\nimport {SystemIcons} from '../icons';\r\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\r\nimport {IconButton} from '../Button';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField from './components/SearchField';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport { DropdownContent, DropdownItem } from '../Dropdown';\r\nimport { useClickOutsideRef } from '../common';\r\n\r\nexport type SearchBarProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  removeSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  performSearchLabel?: string;\r\n  disabled?: boolean;\r\n  validationMessage?: string;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n  showDropdown?: boolean;\r\n  dropdownButtonIcon?: React.ReactNode;\r\n  dropdownButtonLabel?: string;\r\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\r\n  dropdownButtonAction?: () => boolean | void | undefined;\r\n  searchList?: DropdownItem[];\r\n  addToSearchList?: (e: DropdownItem) => void;\r\n  dropdownScrollable?: boolean;\r\n};\r\n\r\nconst ClearIconWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  &.hidden {\r\n    display: none !important;\r\n  }\r\n`;\r\n\r\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\r\n                                                             id,\r\n                                                             searchTerm,\r\n                                                             setSearchTerm,\r\n                                                             enterSearch,\r\n                                                             removeSearch,\r\n                                                             placeholder,\r\n                                                             performSearchLabel,\r\n                                                             disabled,\r\n                                                             validationMessage,\r\n                                                             onKeyDown,\r\n                                                             size,\r\n                                                             margin,\r\n                                                             showDropdown,\r\n                                                             dropdownButtonIcon,\r\n                                                             dropdownButtonLabel,\r\n                                                             dropdownButtonVariant,\r\n                                                             dropdownButtonAction,\r\n                                                             searchList=[],\r\n                                                             addToSearchList,\r\n                                                             dropdownScrollable\r\n                                                           }) => {\r\n  const containerRef = React.useRef<any>(null);\r\n\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  const enteredSearchTerm = (e: any) => {\r\n    addToSearchList && addToSearchList({value:e.target.value});\r\n    enterSearch(e);\r\n  }\r\n\r\n  const dropdownAction = () => {\r\n    if(dropdownButtonAction)\r\n      dropdownButtonAction();    \r\n  }\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        disabled={disabled}\r\n        margin={margin}>\r\n        <SearchField id={'id'} size={size}\r\n                     ref={containerRef}\r\n                     searchTerm={searchTerm}\r\n                     disabled={disabled}\r\n                     validationMessage={validationMessage}>\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            size={size}\r\n            disabled={disabled}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            onKeyDown={onKeyDown}\r\n            enterSearch={enteredSearchTerm}\r\n            focusParentRefs={[containerRef]}\r\n            onClick={()=>setIsOpen(!isOpen)}\r\n            ref={dropdownRef}\r\n          />\r\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\r\n            <IconButton id={`${id}_Search`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={enterSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\r\n              <SystemIcons.Search size=\"24px\"/>\r\n            </IconButton>\r\n          </SearchIconWrapper>\r\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\r\n            <IconButton id={`${id}_Clear`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={removeSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\r\n              <SystemIcons.Clear size=\"24px\"/>\r\n            </IconButton>\r\n          </ClearIconWrapper>\r\n        </SearchField>\r\n\r\n      {showDropdown && <DropdownContent id={'search'}\r\n                                        containerRef={containerRef}\r\n          size={size}\r\n          isButton={false}\r\n          ariaRolesType=\"input\"\r\n          customizationProps={{\r\n            items:searchList,\r\n            action: dropdownAction,\r\n            actionLabel: dropdownButtonLabel,\r\n            actionIcon: dropdownButtonIcon,\r\n            actionVariant: dropdownButtonVariant,\r\n            onValueUpdate:(e)=>{},\r\n            scrollable: dropdownScrollable,\r\n            pinTopItem: true\r\n          }}\r\n          isOpen={isOpen}\r\n          setIsOpen={setIsOpen}\r\n          filter={''}\r\n          selectedValues={searchTerm ? [searchTerm] : []}\r\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\r\n          messageOnNoResults={''}\r\n          focused={null}\r\n          setFocused={()=>{}}\r\n        />}\r\n\r\n      </InputWrapper>\r\n      {validationMessage && (\r\n        <ErrorMessage className={size || ''}>\r\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default SearchBar;\r\n"],"mappings":"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"}
+{"version":3,"file":"SearchBar.cjs","names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","useState","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","COLORS","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {SystemIcons} from '../icons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\nexport type SearchBarProps = {\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  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin,\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\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  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SystemIcons.Search size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <SystemIcons.Clear size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          ariaRolesType=\"input\"\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}

package/dist/InputFields/SearchBar.d.ts

@@ -1,27 +1,27 @@
-import React from 'react';
-import { Size } from '../types';
-import { DropdownItem } from '../Dropdown';
-export type SearchBarProps = {
-    id: string;
-    searchTerm?: string;
-    setSearchTerm: (term: string) => void;
-    enterSearch: (e: any) => void;
-    removeSearch: (e: any) => void;
-    placeholder?: string;
-    performSearchLabel?: string;
-    disabled?: boolean;
-    validationMessage?: string;
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-    size?: Size.Small | Size.Medium;
-    margin?: string;
-    showDropdown?: boolean;
-    dropdownButtonIcon?: React.ReactNode;
-    dropdownButtonLabel?: string;
-    dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';
-    dropdownButtonAction?: () => boolean | void | undefined;
-    searchList?: DropdownItem[];
-    addToSearchList?: (e: DropdownItem) => void;
-    dropdownScrollable?: boolean;
-};
-declare const SearchBar: React.FunctionComponent<SearchBarProps>;
-export default SearchBar;
+import React from 'react';
+import { Size } from '../types';
+import { DropdownItem } from '../Dropdown';
+export type SearchBarProps = {
+    id: string;
+    searchTerm?: string;
+    setSearchTerm: (term: string) => void;
+    enterSearch: (e: any) => void;
+    removeSearch: (e: any) => void;
+    placeholder?: string;
+    performSearchLabel?: string;
+    disabled?: boolean;
+    validationMessage?: string;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    size?: Size.Small | Size.Medium;
+    margin?: string;
+    showDropdown?: boolean;
+    dropdownButtonIcon?: React.ReactNode;
+    dropdownButtonLabel?: string;
+    dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';
+    dropdownButtonAction?: () => boolean | void | undefined;
+    searchList?: DropdownItem[];
+    addToSearchList?: (e: DropdownItem) => void;
+    dropdownScrollable?: boolean;
+};
+declare const SearchBar: React.FunctionComponent<SearchBarProps>;
+export default SearchBar;