@laerdal/life-react-components 5.0.0-dev.4 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -29,7 +29,7 @@ var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObje
29
29
  }, function (props) {
30
30
  return _.COLORS.getColor('primary_800', props.theme);
31
31
  }, _Iconbutton.IconButtonStyledSecondary, function (props) {
32
- return props.shouldNotInteract ? 'none' : 'auto';
32
+ return props.$shouldNotInteract ? 'none' : 'auto';
33
33
  });
34
34
  var QuickSearch = function QuickSearch(_ref) {
35
35
  var id = _ref.id,
@@ -119,7 +119,7 @@ var QuickSearch = function QuickSearch(_ref) {
119
119
  }
120
120
  }, [searchFieldVisible.visible, searchFieldInputRef]);
121
121
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
122
- shouldNotInteract: searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible,
122
+ $shouldNotInteract: searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible,
123
123
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SearchField["default"], {
124
124
  ref: searchFieldRef,
125
125
  id: id,
@@ -1 +1 @@
1
- {"version":3,"file":"QuickSearch.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_Iconbutton","_styling","_types","_","_icons","_SearchBarInput","_interopRequireDefault","_SearchField","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Wrapper","styled","div","_taggedTemplateLiteral2","StyledSearchField","props","COLORS","getColor","theme","IconButtonStyledSecondary","shouldNotInteract","QuickSearch","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","useTheme","searchFieldRef","useRef","searchFieldInputRef","_React$useState","useState","visible","_React$useState2","_slicedToArray2","searchFieldVisible","setSearchFieldVisible","handleClickOutside","current","contains","target","length","handleKeyDown","key","handleBlur","_searchFieldRef$curre","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","_searchFieldInputRef$","focusVisible","jsx","children","jsxs","ref","style","onBlur","className","term","focusParentRefs","SearchIconWrapper","role","concat","dataTestId","variant","shape","tabIndex","action","SystemIcons","Search","color","StyledIcon","hidden","_searchFieldInputRef$2","Clear","LoadingIndicator","Size","Small","propTypes","_propTypes","string","isRequired","func","bool","_default","exports"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport IconButton, { IconButtonStyledSecondary } 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<{shouldNotInteract: boolean}>`\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: ${props => COLORS.getColor('white', props.theme)};\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n }\r\n\r\n &.expanded:hover,\r\n &.expanded:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n\r\n ${IconButtonStyledSecondary} {\r\n pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\r\n }\r\n`;\r\n\r\nexport type QuickSearchProps = {\r\n /** Required. Id of the component. */\r\n id: string;\r\n /** Optional. Current search term entered by the user. */\r\n searchTerm?: string;\r\n /** Required. Handler to be called when user modified input. */\r\n setSearchTerm: (term: string) => void;\r\n /** Required. Handler to be called when user triggers search. */\r\n enterSearch: (e: any) => void;\r\n /** Required. Handler to be called when user clears input field. */\r\n removeSearch: (e: any) => void;\r\n /** Optional. Placeholder text to be shown in the input field when there is no input. */\r\n placeholder?: string;\r\n /** Optional. ARIA label to set on the input field. */\r\n performSearchLabel?: string;\r\n /** Optional. If disabled user can not interact with the search bar. */\r\n disabled?: boolean;\r\n /** Optional. Optional onkeydown handler to be set on the input field. */\r\n onKeyDown?: (e: React.KeyboardEvent) => void;\r\n /** Optional. Size of the component. Defaults to 'medium'. */\r\n size?: Size.Small | Size.Medium;\r\n /** Optional. Margin style attribute to be set on the input field. */\r\n margin?: string;\r\n /** Optional. If set then loading indicator will be shown on the right side of the input field. */\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 theme = useTheme();\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 shouldNotInteract={searchFieldVisible?.visible}>\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 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.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\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.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\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.getColor('neutral_600', theme)} />\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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","ignoreList":[]}
1
+ {"version":3,"file":"QuickSearch.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_Iconbutton","_styling","_types","_","_icons","_SearchBarInput","_interopRequireDefault","_SearchField","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Wrapper","styled","div","_taggedTemplateLiteral2","StyledSearchField","props","COLORS","getColor","theme","IconButtonStyledSecondary","$shouldNotInteract","QuickSearch","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","useTheme","searchFieldRef","useRef","searchFieldInputRef","_React$useState","useState","visible","_React$useState2","_slicedToArray2","searchFieldVisible","setSearchFieldVisible","handleClickOutside","current","contains","target","length","handleKeyDown","key","handleBlur","_searchFieldRef$curre","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","_searchFieldInputRef$","focusVisible","jsx","children","jsxs","ref","style","onBlur","className","term","focusParentRefs","SearchIconWrapper","role","concat","dataTestId","variant","shape","tabIndex","action","SystemIcons","Search","color","StyledIcon","hidden","_searchFieldInputRef$2","Clear","LoadingIndicator","Size","Small","propTypes","_propTypes","string","isRequired","func","bool","_default","exports"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport IconButton, { IconButtonStyledSecondary } 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<{$shouldNotInteract: boolean}>`\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: ${props => COLORS.getColor('white', props.theme)};\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n }\r\n\r\n &.expanded:hover,\r\n &.expanded:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n\r\n ${IconButtonStyledSecondary} {\r\n pointer-events: ${(props) => (props.$shouldNotInteract ? 'none' : 'auto')};\r\n }\r\n`;\r\n\r\nexport type QuickSearchProps = {\r\n /** Required. Id of the component. */\r\n id: string;\r\n /** Optional. Current search term entered by the user. */\r\n searchTerm?: string;\r\n /** Required. Handler to be called when user modified input. */\r\n setSearchTerm: (term: string) => void;\r\n /** Required. Handler to be called when user triggers search. */\r\n enterSearch: (e: any) => void;\r\n /** Required. Handler to be called when user clears input field. */\r\n removeSearch: (e: any) => void;\r\n /** Optional. Placeholder text to be shown in the input field when there is no input. */\r\n placeholder?: string;\r\n /** Optional. ARIA label to set on the input field. */\r\n performSearchLabel?: string;\r\n /** Optional. If disabled user can not interact with the search bar. */\r\n disabled?: boolean;\r\n /** Optional. Optional onkeydown handler to be set on the input field. */\r\n onKeyDown?: (e: React.KeyboardEvent) => void;\r\n /** Optional. Size of the component. Defaults to 'medium'. */\r\n size?: Size.Small | Size.Medium;\r\n /** Optional. Margin style attribute to be set on the input field. */\r\n margin?: string;\r\n /** Optional. If set then loading indicator will be shown on the right side of the input field. */\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 theme = useTheme();\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 $shouldNotInteract={searchFieldVisible?.visible}>\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 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.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\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.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\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.getColor('neutral_600', theme)} />\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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","ignoreList":[]}
@@ -20,7 +20,7 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
20
20
  }, function (props) {
21
21
  return COLORS.getColor('primary_800', props.theme);
22
22
  }, IconButtonStyledSecondary, function (props) {
23
- return props.shouldNotInteract ? 'none' : 'auto';
23
+ return props.$shouldNotInteract ? 'none' : 'auto';
24
24
  });
25
25
  var QuickSearch = function QuickSearch(_ref) {
26
26
  var id = _ref.id,
@@ -110,7 +110,7 @@ var QuickSearch = function QuickSearch(_ref) {
110
110
  }
111
111
  }, [searchFieldVisible.visible, searchFieldInputRef]);
112
112
  return /*#__PURE__*/_jsx(Wrapper, {
113
- shouldNotInteract: searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible,
113
+ $shouldNotInteract: searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible,
114
114
  children: /*#__PURE__*/_jsxs(SearchField, {
115
115
  ref: searchFieldRef,
116
116
  id: id,
@@ -1 +1 @@
1
- {"version":3,"file":"QuickSearch.js","names":["React","styled","useTheme","IconButton","IconButtonStyledSecondary","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","SystemIcons","SearchBarInput","SearchField","StyledSearchField","jsx","_jsx","jsxs","_jsxs","Wrapper","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","shouldNotInteract","QuickSearch","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","useRef","searchFieldInputRef","_React$useState","useState","visible","_React$useState2","_slicedToArray","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","_searchFieldRef$curre","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","_searchFieldInputRef$","focusVisible","children","ref","style","onBlur","className","term","focusParentRefs","role","concat","dataTestId","variant","shape","tabIndex","action","Search","color","hidden","_searchFieldInputRef$2","Clear","Small","propTypes","_pt","string","isRequired","func","bool"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport IconButton, { IconButtonStyledSecondary } 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<{shouldNotInteract: boolean}>`\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: ${props => COLORS.getColor('white', props.theme)};\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n }\r\n\r\n &.expanded:hover,\r\n &.expanded:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n\r\n ${IconButtonStyledSecondary} {\r\n pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\r\n }\r\n`;\r\n\r\nexport type QuickSearchProps = {\r\n /** Required. Id of the component. */\r\n id: string;\r\n /** Optional. Current search term entered by the user. */\r\n searchTerm?: string;\r\n /** Required. Handler to be called when user modified input. */\r\n setSearchTerm: (term: string) => void;\r\n /** Required. Handler to be called when user triggers search. */\r\n enterSearch: (e: any) => void;\r\n /** Required. Handler to be called when user clears input field. */\r\n removeSearch: (e: any) => void;\r\n /** Optional. Placeholder text to be shown in the input field when there is no input. */\r\n placeholder?: string;\r\n /** Optional. ARIA label to set on the input field. */\r\n performSearchLabel?: string;\r\n /** Optional. If disabled user can not interact with the search bar. */\r\n disabled?: boolean;\r\n /** Optional. Optional onkeydown handler to be set on the input field. */\r\n onKeyDown?: (e: React.KeyboardEvent) => void;\r\n /** Optional. Size of the component. Defaults to 'medium'. */\r\n size?: Size.Small | Size.Medium;\r\n /** Optional. Margin style attribute to be set on the input field. */\r\n margin?: string;\r\n /** Optional. If set then loading indicator will be shown on the right side of the input field. */\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 theme = useTheme();\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 shouldNotInteract={searchFieldVisible?.visible}>\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 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.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\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.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\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.getColor('neutral_600', theme)} />\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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","ignoreList":[]}
1
+ {"version":3,"file":"QuickSearch.js","names":["React","styled","useTheme","IconButton","IconButtonStyledSecondary","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","SystemIcons","SearchBarInput","SearchField","StyledSearchField","jsx","_jsx","jsxs","_jsxs","Wrapper","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","$shouldNotInteract","QuickSearch","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","useRef","searchFieldInputRef","_React$useState","useState","visible","_React$useState2","_slicedToArray","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","_searchFieldRef$curre","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","_searchFieldInputRef$","focusVisible","children","ref","style","onBlur","className","term","focusParentRefs","role","concat","dataTestId","variant","shape","tabIndex","action","Search","color","hidden","_searchFieldInputRef$2","Clear","Small","propTypes","_pt","string","isRequired","func","bool"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport IconButton, { IconButtonStyledSecondary } 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<{$shouldNotInteract: boolean}>`\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: ${props => COLORS.getColor('white', props.theme)};\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n }\r\n\r\n &.expanded:hover,\r\n &.expanded:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n\r\n ${IconButtonStyledSecondary} {\r\n pointer-events: ${(props) => (props.$shouldNotInteract ? 'none' : 'auto')};\r\n }\r\n`;\r\n\r\nexport type QuickSearchProps = {\r\n /** Required. Id of the component. */\r\n id: string;\r\n /** Optional. Current search term entered by the user. */\r\n searchTerm?: string;\r\n /** Required. Handler to be called when user modified input. */\r\n setSearchTerm: (term: string) => void;\r\n /** Required. Handler to be called when user triggers search. */\r\n enterSearch: (e: any) => void;\r\n /** Required. Handler to be called when user clears input field. */\r\n removeSearch: (e: any) => void;\r\n /** Optional. Placeholder text to be shown in the input field when there is no input. */\r\n placeholder?: string;\r\n /** Optional. ARIA label to set on the input field. */\r\n performSearchLabel?: string;\r\n /** Optional. If disabled user can not interact with the search bar. */\r\n disabled?: boolean;\r\n /** Optional. Optional onkeydown handler to be set on the input field. */\r\n onKeyDown?: (e: React.KeyboardEvent) => void;\r\n /** Optional. Size of the component. Defaults to 'medium'. */\r\n size?: Size.Small | Size.Medium;\r\n /** Optional. Margin style attribute to be set on the input field. */\r\n margin?: string;\r\n /** Optional. If set then loading indicator will be shown on the right side of the input field. */\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 theme = useTheme();\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 $shouldNotInteract={searchFieldVisible?.visible}>\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 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.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\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.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\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.getColor('neutral_600', theme)} />\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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","ignoreList":[]}
@@ -24,11 +24,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
24
24
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
25
25
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
26
26
  var StyledRadioButton = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n width: 100%;\n min-height: 48px;\n min-width: 48px;\n\n ", "\n cursor: pointer;\n\n color: ", ";\n\n .pointerTransparent {\n pointer-events: none;\n }\n\n .radio-button-icon {\n margin: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 36px;\n min-width: 36px;\n border-radius: 50%;\n\n svg {\n color: ", ";\n }\n }\n\n .radio-button-label {\n user-select: none;\n display: flex;\n flex-direction: column;\n\n label {\n cursor: inherit;\n }\n\n span {\n ", "\n }\n }\n\n &.small {\n ", "\n .radio-button-label {\n padding-top: 14px;\n }\n }\n\n &.medium {\n ", "\n .radio-button-label {\n padding-top: 12px;\n }\n }\n\n &.large {\n ", "\n .radio-button-label {\n padding-top: 12px;\n }\n }\n\n &:not(.disabled):focus {\n ", "\n }\n\n &:not(.disabled):hover {\n .radio-button-icon {\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n }\n\n &:not(.disabled):active {\n .radio-button-icon {\n background: ", ";\n\n svg {\n color: ", ";\n }\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n color: ", ";\n\n .radio-button-icon,\n .radio-button-label {\n pointer-events: none;\n }\n\n .radio-button-icon {\n background-color: ", ";\n }\n\n .radio-button-icon svg {\n color: ", ";\n }\n }\n\n &.dropdown-hover:not(.disabled) {\n .radio-button-icon {\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n }\n"])), function (props) {
27
- return props.margin ? "margin: ".concat(props.margin, ";") : '';
27
+ return props.$margin ? "margin: ".concat(props.$margin, ";") : '';
28
28
  }, function (props) {
29
29
  return _styles.COLORS.getColor('black', props.theme);
30
30
  }, function (props) {
31
- return props.selected ? _styles.COLORS.getColor('primary_500', props.theme) : props.invalid ? _styles.COLORS.getColor('critical_400', props.theme) : _styles.COLORS.getColor('neutral_600', props.theme);
31
+ return props.$selected ? _styles.COLORS.getColor('primary_500', props.theme) : props.$invalid ? _styles.COLORS.getColor('critical_400', props.theme) : _styles.COLORS.getColor('neutral_600', props.theme);
32
32
  }, function (props) {
33
33
  return (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
34
34
  }, function (props) {
@@ -80,18 +80,18 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
80
80
  size = (_size = size) !== null && _size !== void 0 ? _size : _types.Size.Medium;
81
81
  var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '');
82
82
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledRadioButton, _objectSpread(_objectSpread({
83
- margin: margin,
83
+ $margin: margin,
84
84
  ref: ref,
85
85
  onClick: function onClick() {
86
86
  return !disabled && select(!selected);
87
87
  },
88
88
  onMouseDown: _common.defaultOnMouseDownHandler,
89
89
  onKeyDown: onKeyPress,
90
- disabled: disabled,
90
+ $disabled: disabled,
91
91
  className: cls,
92
92
  tabIndex: disabled ? -1 : tabIndexVal ? tabIndexVal : 0,
93
- invalid: invalid,
94
- selected: selected
93
+ $invalid: invalid,
94
+ $selected: selected
95
95
  }, rest), {}, {
96
96
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
97
97
  className: 'radio-button-icon',
@@ -1 +1 @@
1
- {"version":3,"file":"RadioButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_icons","_styles","_types","_common","_jsxRuntime","_excluded","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledRadioButton","styled","div","_taggedTemplateLiteral2","props","margin","concat","COLORS","getColor","theme","selected","invalid","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","ComponentMStyling","ComponentLStyling","focusStyles","RadioButton","forwardRef","_ref","ref","_size","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties2","onKeyPress","keyCode","Size","Medium","cls","jsxs","onClick","onMouseDown","defaultOnMouseDownHandler","onKeyDown","tabIndex","children","jsx","SystemIcons","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_propTypes","string","bool","isRequired","func","number","_default","exports"],"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: ${props => COLORS.getColor('black', props.theme)};\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.getColor('primary_500', props.theme) : props.invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\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 ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 14px;\r\n }\r\n }\r\n\r\n &.medium {\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &.large {\r\n ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\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: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &:not(.disabled):active {\r\n .radio-button-icon {\r\n background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\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: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n\r\n .radio-button-icon svg {\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n }\r\n }\r\n\r\n &.dropdown-hover:not(.disabled) {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\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 /** Optional. Id of the component */\r\n id?: string;\r\n /** Required. Current state of the component. */\r\n selected: boolean;\r\n /** Required. Handler to be called when user selects/unselected the radio button. */\r\n select: (selected: boolean) => void;\r\n /** Optional. Label to be shown on the right side of the radio button. */\r\n label?: string;\r\n /** Optional. Secondary label to be shown under the main 'label' */\r\n additionalLabel?: string;\r\n /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */\r\n invalid?: boolean;\r\n /** Optional. If disabled, user can not interact with the component. */\r\n disabled?: boolean;\r\n /** Optional. If set, then 'pointer-events: none' will be set on the component. */\r\n iconPointerEventsTransparent?: boolean;\r\n /** Optional. Margin style attribute to be set on the top level tag of the component. */\r\n margin?: string;\r\n /** Optional. Size of the radio button, defaults to 'medium'. */\r\n size?: Size.Small | Size.Medium | Size.Large;\r\n /** Optional. TabIndex attribute to be set on the component. */\r\n tabIndexVal?: number;\r\n /** Optional. Extra classname to be set on the container of the component. */\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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","ignoreList":[]}
1
+ {"version":3,"file":"RadioButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_icons","_styles","_types","_common","_jsxRuntime","_excluded","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledRadioButton","styled","div","_taggedTemplateLiteral2","props","$margin","concat","COLORS","getColor","theme","$selected","$invalid","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","ComponentMStyling","ComponentLStyling","focusStyles","RadioButton","forwardRef","_ref","ref","_size","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties2","onKeyPress","keyCode","Size","Medium","cls","jsxs","onClick","onMouseDown","defaultOnMouseDownHandler","onKeyDown","$disabled","tabIndex","children","jsx","SystemIcons","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_propTypes","string","bool","isRequired","func","number","_default","exports"],"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: ${props => COLORS.getColor('black', props.theme)};\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.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\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 ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 14px;\r\n }\r\n }\r\n\r\n &.medium {\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &.large {\r\n ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\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: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &:not(.disabled):active {\r\n .radio-button-icon {\r\n background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\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: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n\r\n .radio-button-icon svg {\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n }\r\n }\r\n\r\n &.dropdown-hover:not(.disabled) {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\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 /** Optional. Id of the component */\r\n id?: string;\r\n /** Required. Current state of the component. */\r\n selected: boolean;\r\n /** Required. Handler to be called when user selects/unselected the radio button. */\r\n select: (selected: boolean) => void;\r\n /** Optional. Label to be shown on the right side of the radio button. */\r\n label?: string;\r\n /** Optional. Secondary label to be shown under the main 'label' */\r\n additionalLabel?: string;\r\n /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */\r\n invalid?: boolean;\r\n /** Optional. If disabled, user can not interact with the component. */\r\n disabled?: boolean;\r\n /** Optional. If set, then 'pointer-events: none' will be set on the component. */\r\n iconPointerEventsTransparent?: boolean;\r\n /** Optional. Margin style attribute to be set on the top level tag of the component. */\r\n margin?: string;\r\n /** Optional. Size of the radio button, defaults to 'medium'. */\r\n size?: Size.Small | Size.Medium | Size.Large;\r\n /** Optional. TabIndex attribute to be set on the component. */\r\n tabIndexVal?: number;\r\n /** Optional. Extra classname to be set on the container of the component. */\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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","ignoreList":[]}
@@ -16,11 +16,11 @@ import { defaultOnMouseDownHandler } from '../common';
16
16
  import { jsx as _jsx } from "react/jsx-runtime";
17
17
  import { jsxs as _jsxs } from "react/jsx-runtime";
18
18
  var StyledRadioButton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n min-height: 48px;\n min-width: 48px;\n\n ", "\n cursor: pointer;\n\n color: ", ";\n\n .pointerTransparent {\n pointer-events: none;\n }\n\n .radio-button-icon {\n margin: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: 36px;\n min-width: 36px;\n border-radius: 50%;\n\n svg {\n color: ", ";\n }\n }\n\n .radio-button-label {\n user-select: none;\n display: flex;\n flex-direction: column;\n\n label {\n cursor: inherit;\n }\n\n span {\n ", "\n }\n }\n\n &.small {\n ", "\n .radio-button-label {\n padding-top: 14px;\n }\n }\n\n &.medium {\n ", "\n .radio-button-label {\n padding-top: 12px;\n }\n }\n\n &.large {\n ", "\n .radio-button-label {\n padding-top: 12px;\n }\n }\n\n &:not(.disabled):focus {\n ", "\n }\n\n &:not(.disabled):hover {\n .radio-button-icon {\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n }\n\n &:not(.disabled):active {\n .radio-button-icon {\n background: ", ";\n\n svg {\n color: ", ";\n }\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n color: ", ";\n\n .radio-button-icon,\n .radio-button-label {\n pointer-events: none;\n }\n\n .radio-button-icon {\n background-color: ", ";\n }\n\n .radio-button-icon svg {\n color: ", ";\n }\n }\n\n &.dropdown-hover:not(.disabled) {\n .radio-button-icon {\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n }\n"])), function (props) {
19
- return props.margin ? "margin: ".concat(props.margin, ";") : '';
19
+ return props.$margin ? "margin: ".concat(props.$margin, ";") : '';
20
20
  }, function (props) {
21
21
  return COLORS.getColor('black', props.theme);
22
22
  }, function (props) {
23
- return props.selected ? COLORS.getColor('primary_500', props.theme) : props.invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme);
23
+ return props.$selected ? COLORS.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme);
24
24
  }, function (props) {
25
25
  return ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
26
26
  }, function (props) {
@@ -72,18 +72,18 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
72
72
  size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
73
73
  var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '');
74
74
  return /*#__PURE__*/_jsxs(StyledRadioButton, _objectSpread(_objectSpread({
75
- margin: margin,
75
+ $margin: margin,
76
76
  ref: ref,
77
77
  onClick: function onClick() {
78
78
  return !disabled && select(!selected);
79
79
  },
80
80
  onMouseDown: defaultOnMouseDownHandler,
81
81
  onKeyDown: onKeyPress,
82
- disabled: disabled,
82
+ $disabled: disabled,
83
83
  className: cls,
84
84
  tabIndex: disabled ? -1 : tabIndexVal ? tabIndexVal : 0,
85
- invalid: invalid,
86
- selected: selected
85
+ $invalid: invalid,
86
+ $selected: selected
87
87
  }, rest), {}, {
88
88
  children: [/*#__PURE__*/_jsxs("div", {
89
89
  className: 'radio-button-icon',
@@ -1 +1 @@
1
- {"version":3,"file":"RadioButton.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledRadioButton","div","_templateObject","_taggedTemplateLiteral","props","margin","concat","getColor","theme","selected","invalid","Regular","RadioButton","forwardRef","_ref","ref","_size","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","Medium","cls","_objectSpread","onClick","onMouseDown","onKeyDown","tabIndex","children","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_pt","string","bool","isRequired","func","number"],"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: ${props => COLORS.getColor('black', props.theme)};\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.getColor('primary_500', props.theme) : props.invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\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 ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 14px;\r\n }\r\n }\r\n\r\n &.medium {\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &.large {\r\n ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\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: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &:not(.disabled):active {\r\n .radio-button-icon {\r\n background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\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: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n\r\n .radio-button-icon svg {\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n }\r\n }\r\n\r\n &.dropdown-hover:not(.disabled) {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\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 /** Optional. Id of the component */\r\n id?: string;\r\n /** Required. Current state of the component. */\r\n selected: boolean;\r\n /** Required. Handler to be called when user selects/unselected the radio button. */\r\n select: (selected: boolean) => void;\r\n /** Optional. Label to be shown on the right side of the radio button. */\r\n label?: string;\r\n /** Optional. Secondary label to be shown under the main 'label' */\r\n additionalLabel?: string;\r\n /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */\r\n invalid?: boolean;\r\n /** Optional. If disabled, user can not interact with the component. */\r\n disabled?: boolean;\r\n /** Optional. If set, then 'pointer-events: none' will be set on the component. */\r\n iconPointerEventsTransparent?: boolean;\r\n /** Optional. Margin style attribute to be set on the top level tag of the component. */\r\n margin?: string;\r\n /** Optional. Size of the radio button, defaults to 'medium'. */\r\n size?: Size.Small | Size.Medium | Size.Large;\r\n /** Optional. TabIndex attribute to be set on the component. */\r\n tabIndexVal?: number;\r\n /** Optional. Extra classname to be set on the container of the component. */\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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","ignoreList":[]}
1
+ {"version":3,"file":"RadioButton.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledRadioButton","div","_templateObject","_taggedTemplateLiteral","props","$margin","concat","getColor","theme","$selected","$invalid","Regular","RadioButton","forwardRef","_ref","ref","_size","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","Medium","cls","_objectSpread","onClick","onMouseDown","onKeyDown","$disabled","tabIndex","children","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_pt","string","bool","isRequired","func","number"],"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: ${props => COLORS.getColor('black', props.theme)};\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.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\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 ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 14px;\r\n }\r\n }\r\n\r\n &.medium {\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &.large {\r\n ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\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: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &:not(.disabled):active {\r\n .radio-button-icon {\r\n background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\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: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n\r\n .radio-button-icon svg {\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n }\r\n }\r\n\r\n &.dropdown-hover:not(.disabled) {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\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 /** Optional. Id of the component */\r\n id?: string;\r\n /** Required. Current state of the component. */\r\n selected: boolean;\r\n /** Required. Handler to be called when user selects/unselected the radio button. */\r\n select: (selected: boolean) => void;\r\n /** Optional. Label to be shown on the right side of the radio button. */\r\n label?: string;\r\n /** Optional. Secondary label to be shown under the main 'label' */\r\n additionalLabel?: string;\r\n /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */\r\n invalid?: boolean;\r\n /** Optional. If disabled, user can not interact with the component. */\r\n disabled?: boolean;\r\n /** Optional. If set, then 'pointer-events: none' will be set on the component. */\r\n iconPointerEventsTransparent?: boolean;\r\n /** Optional. Margin style attribute to be set on the top level tag of the component. */\r\n margin?: string;\r\n /** Optional. Size of the radio button, defaults to 'medium'. */\r\n size?: Size.Small | Size.Medium | Size.Large;\r\n /** Optional. TabIndex attribute to be set on the component. */\r\n tabIndexVal?: number;\r\n /** Optional. Extra classname to be set on the container of the component. */\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":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,WAAW,QAAO,UAAU;AACpC,SAAQC,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,QAAO,WAAW;AACjE,SAAQC,IAAI,QAAiB,UAAU;AACvC,SAAQC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,mBAAmB,QAAO,WAAW;AACtG,SAAQC,yBAAyB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEpD,IAAMC,iBAAiB,GAAGf,MAAM,CAACgB,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,4oDAMhC,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,OAAO,cAAAC,MAAA,CAAcF,KAAK,CAACC,OAAO,SAAM,EAAE;AAAA,CAAC,EAGpD,UAAAD,KAAK;EAAA,OAAIjB,MAAM,CAACoB,QAAQ,CAAC,OAAO,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAiB1C,UAAAJ,KAAK;EAAA,OAAKA,KAAK,CAACK,SAAS,GAAGtB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC,GAAGJ,KAAK,CAACM,QAAQ,GAAGvB,MAAM,CAACoB,QAAQ,CAAC,cAAc,EAAEH,KAAK,CAACI,KAAK,CAAC,GAAGrB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,CAAC,EAc7L,UAAAJ,KAAK;EAAA,OAAIV,mBAAmB,CAACN,kBAAkB,CAACuB,OAAO,EAAExB,MAAM,CAACoB,QAAQ,CAAC,OAAO,EAAEH,KAAK,CAACI,KAAK,CAAC,CAAC;AAAA,GAKjG,UAAAJ,KAAK;EAAA,OAAIX,iBAAiB,CAACL,kBAAkB,CAACuB,OAAO,EAAExB,MAAM,CAACoB,QAAQ,CAAC,OAAO,EAAEH,KAAK,CAACI,KAAK,CAAC,CAAC;AAAA,GAO7F,UAAAJ,KAAK;EAAA,OAAIZ,iBAAiB,CAACJ,kBAAkB,CAACuB,OAAO,EAAExB,MAAM,CAACoB,QAAQ,CAAC,OAAO,EAAEH,KAAK,CAACI,KAAK,CAAC,CAAC;AAAA,GAO7F,UAAAJ,KAAK;EAAA,OAAIb,iBAAiB,CAACH,kBAAkB,CAACuB,OAAO,EAAExB,MAAM,CAACoB,QAAQ,CAAC,OAAO,EAAEH,KAAK,CAACI,KAAK,CAAC,CAAC;AAAA,GAO7FnB,WAAW,EAKS,UAAAe,KAAK;EAAA,OAAIjB,MAAM,CAACoB,QAAQ,CAAC,YAAY,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAG5D,UAAAJ,KAAK;EAAA,OAAIjB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAOjD,UAAAJ,KAAK;EAAA,OAAIjB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAGvD,UAAAJ,KAAK;EAAA,OAAIjB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAQxD,UAAAJ,KAAK;EAAA,OAAIjB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAQvC,UAAAJ,KAAK;EAAA,OAAIjB,MAAM,CAACoB,QAAQ,CAAC,OAAO,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAIzD,UAAAJ,KAAK;EAAA,OAAIjB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAMzC,UAAAJ,KAAK;EAAA,OAAIjB,MAAM,CAACoB,QAAQ,CAAC,YAAY,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAG5D,UAAAJ,KAAK;EAAA,OAAIjB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,EAIpE;AA6BD,IAAMI,WAAW,gBAAG5B,KAAK,CAAC6B,UAAU,CAAmC,UAAAC,IAAA,EAeWC,GAAG,EAAK;EAAA,IAAAC,KAAA;EAAA,IAd3BC,EAAE,GAAAH,IAAA,CAAFG,EAAE;IACFC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRC,KAAK,GAAAL,IAAA,CAALK,KAAK;IACLC,eAAe,GAAAN,IAAA,CAAfM,eAAe;IACfC,OAAO,GAAAP,IAAA,CAAPO,OAAO;IACPC,MAAM,GAAAR,IAAA,CAANQ,MAAM;IACNC,QAAQ,GAAAT,IAAA,CAARS,QAAQ;IACRC,MAAM,GAAAV,IAAA,CAANU,MAAM;IACNC,4BAA4B,GAAAX,IAAA,CAA5BW,4BAA4B;IAC5BC,IAAI,GAAAZ,IAAA,CAAJY,IAAI;IACJC,WAAW,GAAAb,IAAA,CAAXa,WAAW;IACXC,SAAS,GAAAd,IAAA,CAATc,SAAS;IACTC,UAAU,GAAAf,IAAA,CAAVe,UAAU;IACPC,IAAI,GAAAC,wBAAA,CAAAjB,IAAA,EAAAkB,SAAA;EAEpE,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAIC,CAAM,EAAK;IAC7B,IAAIA,CAAC,CAACC,OAAO,KAAK,EAAE,IAAI,CAACZ,QAAQ,EAAE;MACjCD,MAAM,CAAC,CAACJ,QAAQ,CAAC;IACnB;EACF,CAAC;EAEDQ,IAAI,IAAAV,KAAA,GAAGU,IAAI,cAAAV,KAAA,cAAAA,KAAA,GAAI1B,IAAI,CAAC8C,MAAM;EAE1B,IAAMC,GAAG,MAAA/B,MAAA,CAAMoB,IAAI,OAAApB,MAAA,CAAIsB,SAAS,IAAI,EAAE,OAAAtB,MAAA,CAAIiB,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAE;EAEvE,oBACExB,KAAA,CAACC,iBAAiB,EAAAsC,aAAA,CAAAA,aAAA;IACCjC,OAAO,EAAEmB,MAAO;IAChBT,GAAG,EAAEA,GAAI;IACTwB,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAM,CAAChB,QAAQ,IAAID,MAAM,CAAC,CAACJ,QAAQ,CAAC;IAAA,CAAC;IAC9CsB,WAAW,EAAE7C,yBAA0B;IACvC8C,SAAS,EAAER,UAAW;IACtBS,SAAS,EAAEnB,QAAS;IACpBK,SAAS,EAAES,GAAI;IACfM,QAAQ,EAAEpB,QAAQ,GAAG,CAAC,CAAC,GAAII,WAAW,GAAGA,WAAW,GAAG,CAAG;IAC1DjB,QAAQ,EAAEW,OAAQ;IAClBZ,SAAS,EAAES;EAAS,GAChBY,IAAI;IAAAc,QAAA,gBACzB7C,KAAA;MAAK6B,SAAS,EAAE,mBAAoB;MAACX,EAAE,EAAEA,EAAG;MAAC,eAAaY,UAAW;MAAAe,QAAA,GAClE1B,QAAQ,iBAAIrB,IAAA,CAACX,WAAW,CAAC2D,aAAa;QAACjB,SAAS,EAAEH,4BAA4B,GAAG,oBAAoB,GAAG,EAAG;QAACC,IAAI,EAAC;MAAM,CAAC,CAAC,EACzH,CAACR,QAAQ,iBACRrB,IAAA,CAACX,WAAW,CAAC4D,cAAc;QAAClB,SAAS,EAAEH,4BAA4B,GAAG,oBAAoB,GAAG,EAAG;QAACC,IAAI,EAAC;MAAM,CAAC,CAAC;IAAA,CAC7G,CAAC,eACN3B,KAAA;MAAK6B,SAAS,EAAE,oBAAqB;MAAAgB,QAAA,GAClCzB,KAAK,iBAAItB,IAAA;QAAOkD,OAAO,EAAE9B,EAAG;QAAA2B,QAAA,EAAEzB;MAAK,CAAQ,CAAC,EAC5CC,eAAe,KAAK4B,SAAS,iBAAInD,IAAA;QAAA+C,QAAA,EAAOxB;MAAe,CAAO,CAAC;IAAA,CAC7D,CAAC;EAAA,IApBgBH,EAqBL,CAAC;AAExB,CAAC,CAAC;AAACL,WAAA,CAAAqC,SAAA;EA3EDhC,EAAE,EAAAiC,GAAA,CAAAC,MAAA;EAEFjC,QAAQ,EAAAgC,GAAA,CAAAE,IAAA,CAAAC,UAAA;EAER/B,MAAM,EAAA4B,GAAA,CAAAI,IAAA,CAAAD,UAAA;EAENlC,KAAK,EAAA+B,GAAA,CAAAC,MAAA;EAEL/B,eAAe,EAAA8B,GAAA,CAAAC,MAAA;EAEf9B,OAAO,EAAA6B,GAAA,CAAAE,IAAA;EAEP7B,QAAQ,EAAA2B,GAAA,CAAAE,IAAA;EAER3B,4BAA4B,EAAAyB,GAAA,CAAAE,IAAA;EAE5B5B,MAAM,EAAA0B,GAAA,CAAAC,MAAA;EAINxB,WAAW,EAAAuB,GAAA,CAAAK,MAAA;EAEX3B,SAAS,EAAAsB,GAAA,CAAAC;AAAA;AAuDX,eAAevC,WAAW","ignoreList":[]}
@@ -44,9 +44,14 @@ var ModalContainer = function ModalContainer(props) {
44
44
  _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
45
45
  scroll = _React$useState2[0],
46
46
  setScroll = _React$useState2[1];
47
+ var _React$useState3 = React.useState(false),
48
+ _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
49
+ wasOpened = _React$useState4[0],
50
+ setWasOpened = _React$useState4[1];
47
51
  var preventScroll = function preventScroll(offset) {
48
52
  Counter.openInstances++;
49
- if (!Counter.openInstances && document) {
53
+ setWasOpened(true);
54
+ if (document) {
50
55
  setScroll(offset);
51
56
  document.body.style.position = 'fixed';
52
57
  document.body.style.left = "0px";
@@ -74,7 +79,7 @@ var ModalContainer = function ModalContainer(props) {
74
79
  });
75
80
  React.useEffect(function () {
76
81
  //modal was opened
77
- window && !props.showModal && resetScroll();
82
+ window && !props.showModal && wasOpened && resetScroll();
78
83
  //modal was closed
79
84
  window && props.showModal && preventScroll(window.scrollY);
80
85
  }, [props.showModal]);
@@ -1 +1 @@
1
- {"version":3,"file":"ModalContainer.cjs","names":["React","_interopRequireWildcard","require","_reactModal","_interopRequireDefault","_styles","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","concat","Z_INDEXES","backdrop","modal","Counter","openInstances","ModalContainer","props","_React$useState","useState","_React$useState2","_slicedToArray2","scroll","setScroll","preventScroll","offset","document","body","style","position","resetScroll","window","scrollTo","useEffect","scrollY","showModal","ReactModal","defaultStyles","overlay","backgroundColor","querySelector","head","getElementsByTagName","createElement","setAttribute","appendChild","createTextNode","id","closeModal","children","_props$height","_props$width","_props$overflow","padding","_props$minWidth","minWidth","_props$maxWidth","maxWidth","_props$zIndex","zIndex","parseInt","zIndexValue","Math","min","max","toast","stylesConfiguration","assign","styles","setAppElement","jsx","isOpen","closeTimeoutMS","onRequestClose","propTypes","_propTypes","string","bool","isRequired","func","any","number","_default","exports"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport {BOXSHADOWS} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport styled, {keyframes} from 'styled-components';\r\n\r\nconst ModalContainerStyles = {\r\n content: {\r\n top: 'auto',\r\n left: 'auto',\r\n right: 'auto',\r\n bottom: 'auto',\r\n marginRight: '-50%',\r\n width: '640px',\r\n height: '320px',\r\n borderRadius: '8px',\r\n boxSizing: 'border-box' as any,\r\n margin: 0,\r\n overflow: 'auto',\r\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n\r\n@keyframes modalOpenAnimation {\r\n from{\r\n transform: scale(1.1, 1.1);\r\n }\r\n to {\r\n transform: scale(1, 1);\r\n }\r\n}\r\n\r\n.ReactModal__Overlay {\r\n opacity: 0;\r\n z-index: ${Z_INDEXES.backdrop};\r\n display:flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n opacity: 1;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n z-index: ${Z_INDEXES.modal};\r\n opacity:0;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n opacity: 1;\r\n animation: modalOpenAnimation 150ms ease-in-out;\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n opacity: 0;\r\n transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n opacity: 0;\r\n transform: scale(1.1, 1.1);\r\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n`;\r\n\r\n\r\ntype ModalContainerProps = {\r\n id?: string;\r\n showModal: boolean;\r\n closeModal: () => void;\r\n children: any;\r\n height?: any;\r\n width?: any;\r\n overflow?: string;\r\n padding?: string;\r\n minWidth?: string;\r\n maxWidth?: string;\r\n zIndex?: number;\r\n};\r\n\r\nconst Counter = { openInstances : 0};\r\nconst ModalContainer: React.FC<ModalContainerProps> = (props: ModalContainerProps) => {\r\n\r\n const [scroll, setScroll] = React.useState<number>();\r\n\r\n \r\n const preventScroll = (offset: number) => {\r\n Counter.openInstances++;\r\n if (!Counter.openInstances && document) {\r\n setScroll(offset);\r\n document.body.style.position = 'fixed';\r\n document.body.style.left = `0px`;\r\n document.body.style.right = `0px`;\r\n document.body.style.top = `-${offset}px`;\r\n }\r\n }\r\n\r\n const resetScroll = () => {\r\n Counter.openInstances--;\r\n if (!Counter.openInstances && document) {\r\n //@ts-ignore\r\n document.body.style.position = null;\r\n //@ts-ignore\r\n document.body.style.left = null;\r\n //@ts-ignore\r\n document.body.style.top = null;\r\n //@ts-ignore\r\n document.body.style.right = null;\r\n scroll && window.scrollTo(0, scroll);\r\n setScroll(0);\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n window && setScroll(window.scrollY);\r\n });\r\n\r\n React.useEffect(() => {\r\n //modal was opened\r\n window && !props.showModal && resetScroll();\r\n //modal was closed\r\n window && props.showModal && preventScroll(window.scrollY);\r\n }, [props.showModal]);\r\n\r\n\r\n React.useEffect(() => {\r\n if (ReactModal.defaultStyles.overlay) {\r\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n }\r\n\r\n //append style node to override modal transition classes\r\n if (document && !document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n const head = document.head || document.getElementsByTagName('head')[0];\r\n const style = document.createElement('style');\r\n style.setAttribute('modal-custom-styling', 'active');\r\n head.appendChild(style);\r\n style.appendChild(document.createTextNode(modalTransitions));\r\n }\r\n\r\n return () => resetScroll();\r\n }, []);\r\n\r\n const {\r\n id,\r\n showModal,\r\n closeModal,\r\n children,\r\n height = 'auto',\r\n width = 'auto',\r\n overflow = 'visible',\r\n padding,\r\n minWidth = '',\r\n maxWidth = '',\r\n zIndex = parseInt(Z_INDEXES.modal)\r\n } = props;\r\n\r\n // should be at least z-index of modal and below z-index of toast\r\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\r\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\r\n height,\r\n width,\r\n padding,\r\n overflow,\r\n minWidth,\r\n maxWidth,\r\n zIndex: zIndexValue\r\n });\r\n const styles = {content: stylesConfiguration};\r\n ReactModal.setAppElement('body');\r\n return (\r\n <ReactModal id={id}\r\n isOpen={showModal}\r\n closeTimeoutMS={120}\r\n onRequestClose={() => closeModal()}\r\n style={styles}>\r\n {children}\r\n </ReactModal>\r\n );\r\n}\r\n\r\nexport default ModalContainer;\r\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAAqC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAP,wBAAAO,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,cAAAR,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAW,QAAAnB,CAAA,EAAAE,CAAA,QAAAC,CAAA,GAAAQ,MAAA,CAAAS,IAAA,CAAApB,CAAA,OAAAW,MAAA,CAAAU,qBAAA,QAAAC,CAAA,GAAAX,MAAA,CAAAU,qBAAA,CAAArB,CAAA,GAAAE,CAAA,KAAAoB,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAArB,CAAA,WAAAS,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAE,CAAA,EAAAsB,UAAA,OAAArB,CAAA,CAAAsB,IAAA,CAAAC,KAAA,CAAAvB,CAAA,EAAAmB,CAAA,YAAAnB,CAAA;AAAA,SAAAwB,cAAA3B,CAAA,aAAAE,CAAA,MAAAA,CAAA,GAAA0B,SAAA,CAAAC,MAAA,EAAA3B,CAAA,UAAAC,CAAA,WAAAyB,SAAA,CAAA1B,CAAA,IAAA0B,SAAA,CAAA1B,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAR,MAAA,CAAAR,CAAA,OAAA2B,OAAA,WAAA5B,CAAA,QAAA6B,gBAAA,aAAA/B,CAAA,EAAAE,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAS,MAAA,CAAAqB,yBAAA,GAAArB,MAAA,CAAAsB,gBAAA,CAAAjC,CAAA,EAAAW,MAAA,CAAAqB,yBAAA,CAAA7B,CAAA,KAAAgB,OAAA,CAAAR,MAAA,CAAAR,CAAA,GAAA2B,OAAA,WAAA5B,CAAA,IAAAS,MAAA,CAAAC,cAAA,CAAAZ,CAAA,EAAAE,CAAA,EAAAS,MAAA,CAAAE,wBAAA,CAAAV,CAAA,EAAAD,CAAA,iBAAAF,CAAA;AAIrC,IAAMkC,oBAAoB,GAAG;EAC3BC,OAAO,EAAE;IACPC,GAAG,EAAE,MAAM;IACXC,IAAI,EAAE,MAAM;IACZC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdC,WAAW,EAAE,MAAM;IACnBC,KAAK,EAAE,OAAO;IACdC,MAAM,EAAE,OAAO;IACfC,YAAY,EAAE,KAAK;IACnBC,SAAS,EAAE,YAAmB;IAC9BC,MAAM,EAAE,CAAC;IACTC,QAAQ,EAAE,MAAM;IAChBC,SAAS,EAAEC,kBAAU,CAACC;EACxB;AACF,CAAC;;AAED;AACA,IAAMC,gBAAgB,2LAAAC,MAAA,CAaTC,iBAAS,CAACC,QAAQ,6OAAAF,MAAA,CAYlBC,iBAAS,CAACE,KAAK,2dAoB3B;AAiBD,IAAMC,OAAO,GAAG;EAAEC,aAAa,EAAG;AAAC,CAAC;AACpC,IAAMC,cAA6C,GAAG,SAAhDA,cAA6CA,CAAIC,KAA0B,EAAK;EAEpF,IAAAC,eAAA,GAA4BnE,KAAK,CAACoE,QAAQ,CAAS,CAAC;IAAAC,gBAAA,OAAAC,eAAA,aAAAH,eAAA;IAA7CI,MAAM,GAAAF,gBAAA;IAAEG,SAAS,GAAAH,gBAAA;EAGxB,IAAMI,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,MAAc,EAAK;IACxCX,OAAO,CAACC,aAAa,EAAE;IACvB,IAAI,CAACD,OAAO,CAACC,aAAa,IAAIW,QAAQ,EAAE;MACtCH,SAAS,CAACE,MAAM,CAAC;MACjBC,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,GAAG,OAAO;MACtCH,QAAQ,CAACC,IAAI,CAACC,KAAK,CAAChC,IAAI,QAAQ;MAChC8B,QAAQ,CAACC,IAAI,CAACC,KAAK,CAAC/B,KAAK,QAAQ;MACjC6B,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACjC,GAAG,OAAAe,MAAA,CAAOe,MAAM,OAAI;IAC1C;EACF,CAAC;EAED,IAAMK,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxBhB,OAAO,CAACC,aAAa,EAAE;IACvB,IAAI,CAACD,OAAO,CAACC,aAAa,IAAIW,QAAQ,EAAE;MACtC;MACAA,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,QAAQ,GAAG,IAAI;MACnC;MACAH,QAAQ,CAACC,IAAI,CAACC,KAAK,CAAChC,IAAI,GAAG,IAAI;MAC/B;MACA8B,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACjC,GAAG,GAAG,IAAI;MAC9B;MACA+B,QAAQ,CAACC,IAAI,CAACC,KAAK,CAAC/B,KAAK,GAAG,IAAI;MAChCyB,MAAM,IAAIS,MAAM,CAACC,QAAQ,CAAC,CAAC,EAAEV,MAAM,CAAC;MACpCC,SAAS,CAAC,CAAC,CAAC;IACd;EACF,CAAC;EAEDxE,KAAK,CAACkF,SAAS,CAAC,YAAM;IACpBF,MAAM,IAAIR,SAAS,CAACQ,MAAM,CAACG,OAAO,CAAC;EACrC,CAAC,CAAC;EAEFnF,KAAK,CAACkF,SAAS,CAAC,YAAM;IACpB;IACAF,MAAM,IAAI,CAACd,KAAK,CAACkB,SAAS,IAAIL,WAAW,CAAC,CAAC;IAC3C;IACAC,MAAM,IAAId,KAAK,CAACkB,SAAS,IAAIX,aAAa,CAACO,MAAM,CAACG,OAAO,CAAC;EAC5D,CAAC,EAAE,CAACjB,KAAK,CAACkB,SAAS,CAAC,CAAC;EAGrBpF,KAAK,CAACkF,SAAS,CAAC,YAAM;IACpB,IAAIG,sBAAU,CAACC,aAAa,CAACC,OAAO,EAAE;MACpCF,sBAAU,CAACC,aAAa,CAACC,OAAO,CAACC,eAAe,GAAG,iBAAiB;IACtE;;IAEA;IACA,IAAIb,QAAQ,IAAI,CAACA,QAAQ,CAACc,aAAa,CAAC,iCAAiC,CAAC,EAAE;MAC1E,IAAMC,IAAI,GAAGf,QAAQ,CAACe,IAAI,IAAIf,QAAQ,CAACgB,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;MACtE,IAAMd,KAAK,GAAGF,QAAQ,CAACiB,aAAa,CAAC,OAAO,CAAC;MAC7Cf,KAAK,CAACgB,YAAY,CAAC,sBAAsB,EAAE,QAAQ,CAAC;MACpDH,IAAI,CAACI,WAAW,CAACjB,KAAK,CAAC;MACvBA,KAAK,CAACiB,WAAW,CAACnB,QAAQ,CAACoB,cAAc,CAACrC,gBAAgB,CAAC,CAAC;IAC9D;IAEA,OAAO;MAAA,OAAMqB,WAAW,CAAC,CAAC;IAAA;EAC5B,CAAC,EAAE,EAAE,CAAC;EAEN,IACEiB,EAAE,GAWA9B,KAAK,CAXP8B,EAAE;IACFZ,SAAS,GAUPlB,KAAK,CAVPkB,SAAS;IACTa,UAAU,GASR/B,KAAK,CATP+B,UAAU;IACVC,QAAQ,GAQNhC,KAAK,CARPgC,QAAQ;IAAAC,aAAA,GAQNjC,KAAK,CAPPhB,MAAM;IAANA,MAAM,GAAAiD,aAAA,cAAG,MAAM,GAAAA,aAAA;IAAAC,YAAA,GAOblC,KAAK,CANPjB,KAAK;IAALA,KAAK,GAAAmD,YAAA,cAAG,MAAM,GAAAA,YAAA;IAAAC,eAAA,GAMZnC,KAAK,CALPZ,QAAQ;IAARA,QAAQ,GAAA+C,eAAA,cAAG,SAAS,GAAAA,eAAA;IACpBC,OAAO,GAILpC,KAAK,CAJPoC,OAAO;IAAAC,eAAA,GAILrC,KAAK,CAHPsC,QAAQ;IAARA,QAAQ,GAAAD,eAAA,cAAG,EAAE,GAAAA,eAAA;IAAAE,eAAA,GAGXvC,KAAK,CAFPwC,QAAQ;IAARA,QAAQ,GAAAD,eAAA,cAAG,EAAE,GAAAA,eAAA;IAAAE,aAAA,GAEXzC,KAAK,CADP0C,MAAM;IAANA,MAAM,GAAAD,aAAA,cAAGE,QAAQ,CAACjD,iBAAS,CAACE,KAAK,CAAC,GAAA6C,aAAA;;EAGpC;EACA,IAAMG,WAAW,GAAGC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,GAAG,CAACL,MAAM,EAAE,CAAChD,iBAAS,CAACE,KAAK,CAAC,EAAE,CAACF,iBAAS,CAACsD,KAAK,GAAG,CAAC,CAAC;EACtF,IAAMC,mBAAmB,GAAGhG,MAAM,CAACiG,MAAM,CAAAjF,aAAA,KAAKO,oBAAoB,CAACC,OAAO,GAAG;IAC3EO,MAAM,EAANA,MAAM;IACND,KAAK,EAALA,KAAK;IACLqD,OAAO,EAAPA,OAAO;IACPhD,QAAQ,EAARA,QAAQ;IACRkD,QAAQ,EAARA,QAAQ;IACRE,QAAQ,EAARA,QAAQ;IACRE,MAAM,EAAEE;EACV,CAAC,CAAC;EACF,IAAMO,MAAM,GAAG;IAAC1E,OAAO,EAAEwE;EAAmB,CAAC;EAC7C9B,sBAAU,CAACiC,aAAa,CAAC,MAAM,CAAC;EAChC,oBACE,IAAAhH,WAAA,CAAAiH,GAAA,EAACpH,WAAA,WAAU;IAAC6F,EAAE,EAAEA,EAAG;IACPwB,MAAM,EAAEpC,SAAU;IAClBqC,cAAc,EAAE,GAAI;IACpBC,cAAc,EAAE,SAAAA,eAAA;MAAA,OAAMzB,UAAU,CAAC,CAAC;IAAA,CAAC;IACnCpB,KAAK,EAAEwC,MAAO;IAAAnB,QAAA,EACvBA;EAAQ,CACC,CAAC;AAEjB,CAAC;AAAAjC,cAAA,CAAA0D,SAAA;EA/GC3B,EAAE,EAAA4B,UAAA,YAAAC,MAAA;EACFzC,SAAS,EAAAwC,UAAA,YAAAE,IAAA,CAAAC,UAAA;EACT9B,UAAU,EAAA2B,UAAA,YAAAI,IAAA,CAAAD,UAAA;EACV7B,QAAQ,EAAA0B,UAAA,YAAAK,GAAA,CAAAF,UAAA;EACR7E,MAAM,EAAA0E,UAAA,YAAAK,GAAA;EACNhF,KAAK,EAAA2E,UAAA,YAAAK,GAAA;EACL3E,QAAQ,EAAAsE,UAAA,YAAAC,MAAA;EACRvB,OAAO,EAAAsB,UAAA,YAAAC,MAAA;EACPrB,QAAQ,EAAAoB,UAAA,YAAAC,MAAA;EACRnB,QAAQ,EAAAkB,UAAA,YAAAC,MAAA;EACRjB,MAAM,EAAAgB,UAAA,YAAAM;AAAA;AAAA,IAAAC,QAAA,GAuGOlE,cAAc;AAAAmE,OAAA,cAAAD,QAAA","ignoreList":[]}
1
+ {"version":3,"file":"ModalContainer.cjs","names":["React","_interopRequireWildcard","require","_reactModal","_interopRequireDefault","_styles","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","concat","Z_INDEXES","backdrop","modal","Counter","openInstances","ModalContainer","props","_React$useState","useState","_React$useState2","_slicedToArray2","scroll","setScroll","_React$useState3","_React$useState4","wasOpened","setWasOpened","preventScroll","offset","document","body","style","position","resetScroll","window","scrollTo","useEffect","scrollY","showModal","ReactModal","defaultStyles","overlay","backgroundColor","querySelector","head","getElementsByTagName","createElement","setAttribute","appendChild","createTextNode","id","closeModal","children","_props$height","_props$width","_props$overflow","padding","_props$minWidth","minWidth","_props$maxWidth","maxWidth","_props$zIndex","zIndex","parseInt","zIndexValue","Math","min","max","toast","stylesConfiguration","assign","styles","setAppElement","jsx","isOpen","closeTimeoutMS","onRequestClose","propTypes","_propTypes","string","bool","isRequired","func","any","number","_default","exports"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport {BOXSHADOWS} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport styled, {keyframes} from 'styled-components';\r\n\r\nconst ModalContainerStyles = {\r\n content: {\r\n top: 'auto',\r\n left: 'auto',\r\n right: 'auto',\r\n bottom: 'auto',\r\n marginRight: '-50%',\r\n width: '640px',\r\n height: '320px',\r\n borderRadius: '8px',\r\n boxSizing: 'border-box' as any,\r\n margin: 0,\r\n overflow: 'auto',\r\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n\r\n@keyframes modalOpenAnimation {\r\n from{\r\n transform: scale(1.1, 1.1);\r\n }\r\n to {\r\n transform: scale(1, 1);\r\n }\r\n}\r\n\r\n.ReactModal__Overlay {\r\n opacity: 0;\r\n z-index: ${Z_INDEXES.backdrop};\r\n display:flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n opacity: 1;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n z-index: ${Z_INDEXES.modal};\r\n opacity:0;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n opacity: 1;\r\n animation: modalOpenAnimation 150ms ease-in-out;\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n opacity: 0;\r\n transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n opacity: 0;\r\n transform: scale(1.1, 1.1);\r\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n`;\r\n\r\n\r\ntype ModalContainerProps = {\r\n id?: string;\r\n showModal: boolean;\r\n closeModal: () => void;\r\n children: any;\r\n height?: any;\r\n width?: any;\r\n overflow?: string;\r\n padding?: string;\r\n minWidth?: string;\r\n maxWidth?: string;\r\n zIndex?: number;\r\n};\r\n\r\nconst Counter = { openInstances : 0};\r\nconst ModalContainer: React.FC<ModalContainerProps> = (props: ModalContainerProps) => {\r\n\r\n const [scroll, setScroll] = React.useState<number>();\r\n const [wasOpened, setWasOpened] = React.useState<boolean>(false);\r\n \r\n const preventScroll = (offset: number) => {\r\n Counter.openInstances++;\r\n setWasOpened(true);\r\n if (document) {\r\n setScroll(offset);\r\n document.body.style.position = 'fixed';\r\n document.body.style.left = `0px`;\r\n document.body.style.right = `0px`;\r\n document.body.style.top = `-${offset}px`;\r\n }\r\n }\r\n\r\n const resetScroll = () => {\r\n Counter.openInstances--;\r\n if (!Counter.openInstances && document) {\r\n //@ts-ignore\r\n document.body.style.position = null;\r\n //@ts-ignore\r\n document.body.style.left = null;\r\n //@ts-ignore\r\n document.body.style.top = null;\r\n //@ts-ignore\r\n document.body.style.right = null;\r\n scroll && window.scrollTo(0, scroll);\r\n setScroll(0);\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n window && setScroll(window.scrollY);\r\n });\r\n\r\n React.useEffect(() => {\r\n //modal was opened\r\n window && !props.showModal && wasOpened && resetScroll();\r\n //modal was closed\r\n window && props.showModal && preventScroll(window.scrollY);\r\n }, [props.showModal]);\r\n\r\n\r\n React.useEffect(() => {\r\n if (ReactModal.defaultStyles.overlay) {\r\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n }\r\n\r\n //append style node to override modal transition classes\r\n if (document && !document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n const head = document.head || document.getElementsByTagName('head')[0];\r\n const style = document.createElement('style');\r\n style.setAttribute('modal-custom-styling', 'active');\r\n head.appendChild(style);\r\n style.appendChild(document.createTextNode(modalTransitions));\r\n }\r\n\r\n return () => resetScroll();\r\n }, []);\r\n\r\n const {\r\n id,\r\n showModal,\r\n closeModal,\r\n children,\r\n height = 'auto',\r\n width = 'auto',\r\n overflow = 'visible',\r\n padding,\r\n minWidth = '',\r\n maxWidth = '',\r\n zIndex = parseInt(Z_INDEXES.modal)\r\n } = props;\r\n\r\n // should be at least z-index of modal and below z-index of toast\r\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\r\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\r\n height,\r\n width,\r\n padding,\r\n overflow,\r\n minWidth,\r\n maxWidth,\r\n zIndex: zIndexValue\r\n });\r\n const styles = {content: stylesConfiguration};\r\n ReactModal.setAppElement('body');\r\n return (\r\n <ReactModal id={id}\r\n isOpen={showModal}\r\n closeTimeoutMS={120}\r\n onRequestClose={() => closeModal()}\r\n style={styles}>\r\n {children}\r\n </ReactModal>\r\n );\r\n}\r\n\r\nexport default ModalContainer;\r\n"],"mappings":"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","ignoreList":[]}
@@ -35,9 +35,14 @@ var ModalContainer = function ModalContainer(props) {
35
35
  _React$useState2 = _slicedToArray(_React$useState, 2),
36
36
  scroll = _React$useState2[0],
37
37
  setScroll = _React$useState2[1];
38
+ var _React$useState3 = React.useState(false),
39
+ _React$useState4 = _slicedToArray(_React$useState3, 2),
40
+ wasOpened = _React$useState4[0],
41
+ setWasOpened = _React$useState4[1];
38
42
  var preventScroll = function preventScroll(offset) {
39
43
  Counter.openInstances++;
40
- if (!Counter.openInstances && document) {
44
+ setWasOpened(true);
45
+ if (document) {
41
46
  setScroll(offset);
42
47
  document.body.style.position = 'fixed';
43
48
  document.body.style.left = "0px";
@@ -65,7 +70,7 @@ var ModalContainer = function ModalContainer(props) {
65
70
  });
66
71
  React.useEffect(function () {
67
72
  //modal was opened
68
- window && !props.showModal && resetScroll();
73
+ window && !props.showModal && wasOpened && resetScroll();
69
74
  //modal was closed
70
75
  window && props.showModal && preventScroll(window.scrollY);
71
76
  }, [props.showModal]);
@@ -1 +1 @@
1
- {"version":3,"file":"ModalContainer.js","names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","jsx","_jsx","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","concat","backdrop","modal","Counter","openInstances","ModalContainer","props","_React$useState","useState","_React$useState2","_slicedToArray","scroll","setScroll","preventScroll","offset","document","body","style","position","resetScroll","window","scrollTo","useEffect","scrollY","showModal","defaultStyles","overlay","backgroundColor","querySelector","head","getElementsByTagName","createElement","setAttribute","appendChild","createTextNode","id","closeModal","children","_props$height","_props$width","_props$overflow","padding","_props$minWidth","minWidth","_props$maxWidth","maxWidth","_props$zIndex","zIndex","parseInt","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","_objectSpread","styles","setAppElement","isOpen","closeTimeoutMS","onRequestClose","propTypes","_pt","string","bool","isRequired","func","any","number"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport {BOXSHADOWS} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport styled, {keyframes} from 'styled-components';\r\n\r\nconst ModalContainerStyles = {\r\n content: {\r\n top: 'auto',\r\n left: 'auto',\r\n right: 'auto',\r\n bottom: 'auto',\r\n marginRight: '-50%',\r\n width: '640px',\r\n height: '320px',\r\n borderRadius: '8px',\r\n boxSizing: 'border-box' as any,\r\n margin: 0,\r\n overflow: 'auto',\r\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n\r\n@keyframes modalOpenAnimation {\r\n from{\r\n transform: scale(1.1, 1.1);\r\n }\r\n to {\r\n transform: scale(1, 1);\r\n }\r\n}\r\n\r\n.ReactModal__Overlay {\r\n opacity: 0;\r\n z-index: ${Z_INDEXES.backdrop};\r\n display:flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n opacity: 1;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n z-index: ${Z_INDEXES.modal};\r\n opacity:0;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n opacity: 1;\r\n animation: modalOpenAnimation 150ms ease-in-out;\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n opacity: 0;\r\n transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n opacity: 0;\r\n transform: scale(1.1, 1.1);\r\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n`;\r\n\r\n\r\ntype ModalContainerProps = {\r\n id?: string;\r\n showModal: boolean;\r\n closeModal: () => void;\r\n children: any;\r\n height?: any;\r\n width?: any;\r\n overflow?: string;\r\n padding?: string;\r\n minWidth?: string;\r\n maxWidth?: string;\r\n zIndex?: number;\r\n};\r\n\r\nconst Counter = { openInstances : 0};\r\nconst ModalContainer: React.FC<ModalContainerProps> = (props: ModalContainerProps) => {\r\n\r\n const [scroll, setScroll] = React.useState<number>();\r\n\r\n \r\n const preventScroll = (offset: number) => {\r\n Counter.openInstances++;\r\n if (!Counter.openInstances && document) {\r\n setScroll(offset);\r\n document.body.style.position = 'fixed';\r\n document.body.style.left = `0px`;\r\n document.body.style.right = `0px`;\r\n document.body.style.top = `-${offset}px`;\r\n }\r\n }\r\n\r\n const resetScroll = () => {\r\n Counter.openInstances--;\r\n if (!Counter.openInstances && document) {\r\n //@ts-ignore\r\n document.body.style.position = null;\r\n //@ts-ignore\r\n document.body.style.left = null;\r\n //@ts-ignore\r\n document.body.style.top = null;\r\n //@ts-ignore\r\n document.body.style.right = null;\r\n scroll && window.scrollTo(0, scroll);\r\n setScroll(0);\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n window && setScroll(window.scrollY);\r\n });\r\n\r\n React.useEffect(() => {\r\n //modal was opened\r\n window && !props.showModal && resetScroll();\r\n //modal was closed\r\n window && props.showModal && preventScroll(window.scrollY);\r\n }, [props.showModal]);\r\n\r\n\r\n React.useEffect(() => {\r\n if (ReactModal.defaultStyles.overlay) {\r\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n }\r\n\r\n //append style node to override modal transition classes\r\n if (document && !document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n const head = document.head || document.getElementsByTagName('head')[0];\r\n const style = document.createElement('style');\r\n style.setAttribute('modal-custom-styling', 'active');\r\n head.appendChild(style);\r\n style.appendChild(document.createTextNode(modalTransitions));\r\n }\r\n\r\n return () => resetScroll();\r\n }, []);\r\n\r\n const {\r\n id,\r\n showModal,\r\n closeModal,\r\n children,\r\n height = 'auto',\r\n width = 'auto',\r\n overflow = 'visible',\r\n padding,\r\n minWidth = '',\r\n maxWidth = '',\r\n zIndex = parseInt(Z_INDEXES.modal)\r\n } = props;\r\n\r\n // should be at least z-index of modal and below z-index of toast\r\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\r\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\r\n height,\r\n width,\r\n padding,\r\n overflow,\r\n minWidth,\r\n maxWidth,\r\n zIndex: zIndexValue\r\n });\r\n const styles = {content: stylesConfiguration};\r\n ReactModal.setAppElement('body');\r\n return (\r\n <ReactModal id={id}\r\n isOpen={showModal}\r\n closeTimeoutMS={120}\r\n onRequestClose={() => closeModal()}\r\n style={styles}>\r\n {children}\r\n </ReactModal>\r\n );\r\n}\r\n\r\nexport default ModalContainer;\r\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ModalContainer.js","names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","jsx","_jsx","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","concat","backdrop","modal","Counter","openInstances","ModalContainer","props","_React$useState","useState","_React$useState2","_slicedToArray","scroll","setScroll","_React$useState3","_React$useState4","wasOpened","setWasOpened","preventScroll","offset","document","body","style","position","resetScroll","window","scrollTo","useEffect","scrollY","showModal","defaultStyles","overlay","backgroundColor","querySelector","head","getElementsByTagName","createElement","setAttribute","appendChild","createTextNode","id","closeModal","children","_props$height","_props$width","_props$overflow","padding","_props$minWidth","minWidth","_props$maxWidth","maxWidth","_props$zIndex","zIndex","parseInt","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","_objectSpread","styles","setAppElement","isOpen","closeTimeoutMS","onRequestClose","propTypes","_pt","string","bool","isRequired","func","any","number"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport {BOXSHADOWS} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport styled, {keyframes} from 'styled-components';\r\n\r\nconst ModalContainerStyles = {\r\n content: {\r\n top: 'auto',\r\n left: 'auto',\r\n right: 'auto',\r\n bottom: 'auto',\r\n marginRight: '-50%',\r\n width: '640px',\r\n height: '320px',\r\n borderRadius: '8px',\r\n boxSizing: 'border-box' as any,\r\n margin: 0,\r\n overflow: 'auto',\r\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n\r\n@keyframes modalOpenAnimation {\r\n from{\r\n transform: scale(1.1, 1.1);\r\n }\r\n to {\r\n transform: scale(1, 1);\r\n }\r\n}\r\n\r\n.ReactModal__Overlay {\r\n opacity: 0;\r\n z-index: ${Z_INDEXES.backdrop};\r\n display:flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n opacity: 1;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n z-index: ${Z_INDEXES.modal};\r\n opacity:0;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n opacity: 1;\r\n animation: modalOpenAnimation 150ms ease-in-out;\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n opacity: 0;\r\n transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n opacity: 0;\r\n transform: scale(1.1, 1.1);\r\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n`;\r\n\r\n\r\ntype ModalContainerProps = {\r\n id?: string;\r\n showModal: boolean;\r\n closeModal: () => void;\r\n children: any;\r\n height?: any;\r\n width?: any;\r\n overflow?: string;\r\n padding?: string;\r\n minWidth?: string;\r\n maxWidth?: string;\r\n zIndex?: number;\r\n};\r\n\r\nconst Counter = { openInstances : 0};\r\nconst ModalContainer: React.FC<ModalContainerProps> = (props: ModalContainerProps) => {\r\n\r\n const [scroll, setScroll] = React.useState<number>();\r\n const [wasOpened, setWasOpened] = React.useState<boolean>(false);\r\n \r\n const preventScroll = (offset: number) => {\r\n Counter.openInstances++;\r\n setWasOpened(true);\r\n if (document) {\r\n setScroll(offset);\r\n document.body.style.position = 'fixed';\r\n document.body.style.left = `0px`;\r\n document.body.style.right = `0px`;\r\n document.body.style.top = `-${offset}px`;\r\n }\r\n }\r\n\r\n const resetScroll = () => {\r\n Counter.openInstances--;\r\n if (!Counter.openInstances && document) {\r\n //@ts-ignore\r\n document.body.style.position = null;\r\n //@ts-ignore\r\n document.body.style.left = null;\r\n //@ts-ignore\r\n document.body.style.top = null;\r\n //@ts-ignore\r\n document.body.style.right = null;\r\n scroll && window.scrollTo(0, scroll);\r\n setScroll(0);\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n window && setScroll(window.scrollY);\r\n });\r\n\r\n React.useEffect(() => {\r\n //modal was opened\r\n window && !props.showModal && wasOpened && resetScroll();\r\n //modal was closed\r\n window && props.showModal && preventScroll(window.scrollY);\r\n }, [props.showModal]);\r\n\r\n\r\n React.useEffect(() => {\r\n if (ReactModal.defaultStyles.overlay) {\r\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n }\r\n\r\n //append style node to override modal transition classes\r\n if (document && !document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n const head = document.head || document.getElementsByTagName('head')[0];\r\n const style = document.createElement('style');\r\n style.setAttribute('modal-custom-styling', 'active');\r\n head.appendChild(style);\r\n style.appendChild(document.createTextNode(modalTransitions));\r\n }\r\n\r\n return () => resetScroll();\r\n }, []);\r\n\r\n const {\r\n id,\r\n showModal,\r\n closeModal,\r\n children,\r\n height = 'auto',\r\n width = 'auto',\r\n overflow = 'visible',\r\n padding,\r\n minWidth = '',\r\n maxWidth = '',\r\n zIndex = parseInt(Z_INDEXES.modal)\r\n } = props;\r\n\r\n // should be at least z-index of modal and below z-index of toast\r\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\r\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\r\n height,\r\n width,\r\n padding,\r\n overflow,\r\n minWidth,\r\n maxWidth,\r\n zIndex: zIndexValue\r\n });\r\n const styles = {content: stylesConfiguration};\r\n ReactModal.setAppElement('body');\r\n return (\r\n <ReactModal id={id}\r\n isOpen={showModal}\r\n closeTimeoutMS={120}\r\n onRequestClose={() => closeModal()}\r\n style={styles}>\r\n {children}\r\n </ReactModal>\r\n );\r\n}\r\n\r\nexport default ModalContainer;\r\n"],"mappings":"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","ignoreList":[]}
@@ -27,7 +27,7 @@ var PortraitOverlay = _styledComponents["default"].div(_templateObject || (_temp
27
27
  return _.COLORS.getColor('black', props.theme);
28
28
  });
29
29
  var ProfileButtonContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n width: 48px;\n height: 48px;\n display: inline;\n user-select: none;\n \n ", " {\n display: ", ";\n\n ", " {\n display: inline;\n }\n\n :disabled {\n img {\n filter: grayscale(100%);\n }\n\n ", " {\n background-color: ", ";\n\n svg, svg path {\n fill: ", ";\n }\n }\n }\n\n :hover:not(:disabled):not(:active),\n &.hover-state {\n ", " {\n opacity: 0.25;\n transition: opacity 100ms ease-in-out;\n }\n }\n\n :active:not(:disabled),\n &.active-state {\n ", " {\n opacity: 0.5;\n transition: opacity 0ms ease-in-out;\n }\n }\n }\n"])), _Iconbutton.IconButtonStyledPrimary, function (props) {
30
- return props.hideOnLowWidth ? 'none' : 'inline';
30
+ return props.$hideOnLowWidth ? 'none' : 'inline';
31
31
  }, _styles.BREAKPOINTS.MEDIUM, _Iconbutton.IconButtonContentStyles, function (props) {
32
32
  return _.COLORS.getColor('neutral_100', props.theme);
33
33
  }, function (props) {
@@ -1 +1 @@
1
- {"version":3,"file":"ProfileButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_","_Iconbutton","_NotificationDot","_styles","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","PortraitOverlay","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","ProfileButtonContainer","IconButtonStyledPrimary","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContentStyles","exports","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","_ref","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","_objectWithoutProperties2","useTheme","renderIcon","jsxs","children","jsx","src","ComponentS","textStyle","ComponentTextStyle","Bold","color","Fragment","IconButton","action","variant","shape","NotificationDot","size","Size","Medium","propTypes","_propTypes","string","node","func","isRequired","oneOf","_default"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {COLORS, IconButton, Size} from '..';\r\nimport {IconButtonContentStyles, IconButtonStyledPrimary} from '../Button/Iconbutton';\r\nimport {NotificationDot} from '../NotificationDot';\r\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\r\n\r\nexport type ProfileButtonProps = {\r\n /**\r\n * Optional. The source URL of the profile picture.\r\n */\r\n portraitSrc?: string;\r\n\r\n /**\r\n * Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.\r\n */\r\n icon?: React.ReactNode;\r\n\r\n /**\r\n * Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.\r\n */\r\n initials?: string;\r\n\r\n /**\r\n * Required. The handler function to be called when the button is clicked.\r\n */\r\n onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n\r\n /**\r\n * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.\r\n */\r\n notificationVariant?: 'positive' | 'critical';\r\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\r\n\r\nconst PortraitOverlay = styled.div`\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n background-color: ${props => COLORS.getColor('black', props.theme)};\r\n opacity: 0;\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n`;\r\n\r\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\r\n width: 48px;\r\n height: 48px;\r\n display: inline;\r\n user-select: none;\r\n \r\n ${IconButtonStyledPrimary} {\r\n display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n display: inline;\r\n }\r\n\r\n :disabled {\r\n img {\r\n filter: grayscale(100%);\r\n }\r\n\r\n ${IconButtonContentStyles} {\r\n background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n svg, svg path {\r\n fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n :hover:not(:disabled):not(:active),\r\n &.hover-state {\r\n ${PortraitOverlay} {\r\n opacity: 0.25;\r\n transition: opacity 100ms ease-in-out;\r\n }\r\n }\r\n\r\n :active:not(:disabled),\r\n &.active-state {\r\n ${PortraitOverlay} {\r\n opacity: 0.5;\r\n transition: opacity 0ms ease-in-out;\r\n }\r\n }\r\n }\r\n`;\r\n\r\nconst NotificationContainer = styled.div`\r\n position: absolute;\r\n left: 30px;\r\n bottom: 30px;\r\n`;\r\n\r\nconst ImageWrapper = styled.div`\r\n width: 36px;\r\n height: 36px;\r\n position: relative;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n }\r\n`;\r\n\r\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\r\n portraitSrc,\r\n icon,\r\n initials,\r\n onClick,\r\n disabled,\r\n notificationVariant,\r\n className,\r\n tabIndex,\r\n ...rest\r\n }, ref) => {\r\n const theme = useTheme();\r\n const renderIcon = () => {\r\n return (\r\n (portraitSrc && (\r\n <ImageWrapper>\r\n <img src={portraitSrc}/>\r\n <PortraitOverlay/>\r\n </ImageWrapper>\r\n )) ||\r\n (initials && (\r\n <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\r\n color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('white', theme)}>\r\n {initials}\r\n </ComponentS>\r\n )) || <>{icon}</>\r\n );\r\n };\r\n\r\n return (\r\n <ProfileButtonContainer>\r\n <IconButton ref={ref}\r\n className={className}\r\n disabled={disabled}\r\n action={onClick}\r\n variant=\"primary\"\r\n tabIndex={tabIndex}\r\n shape=\"circular\"\r\n {...rest}>\r\n {renderIcon()}\r\n {notificationVariant && (\r\n <NotificationContainer>\r\n <NotificationDot size={Size.Medium} variant={notificationVariant}/>\r\n </NotificationContainer>\r\n )}\r\n </IconButton>\r\n </ProfileButtonContainer>\r\n );\r\n});\r\n\r\nexport default ProfileButton;\r\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAF,uBAAA,CAAAC,OAAA;AACA,IAAAE,CAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAAsE,IAAAM,WAAA,GAAAN,OAAA;AAAA,IAAAO,SAAA;AAAA,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAd,wBAAAc,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,cAAAR,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAW,QAAAnB,CAAA,EAAAE,CAAA,QAAAC,CAAA,GAAAQ,MAAA,CAAAS,IAAA,CAAApB,CAAA,OAAAW,MAAA,CAAAU,qBAAA,QAAAC,CAAA,GAAAX,MAAA,CAAAU,qBAAA,CAAArB,CAAA,GAAAE,CAAA,KAAAoB,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAArB,CAAA,WAAAS,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAE,CAAA,EAAAsB,UAAA,OAAArB,CAAA,CAAAsB,IAAA,CAAAC,KAAA,CAAAvB,CAAA,EAAAmB,CAAA,YAAAnB,CAAA;AAAA,SAAAwB,cAAA3B,CAAA,aAAAE,CAAA,MAAAA,CAAA,GAAA0B,SAAA,CAAAC,MAAA,EAAA3B,CAAA,UAAAC,CAAA,WAAAyB,SAAA,CAAA1B,CAAA,IAAA0B,SAAA,CAAA1B,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAR,MAAA,CAAAR,CAAA,OAAA2B,OAAA,WAAA5B,CAAA,QAAA6B,gBAAA,aAAA/B,CAAA,EAAAE,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAS,MAAA,CAAAqB,yBAAA,GAAArB,MAAA,CAAAsB,gBAAA,CAAAjC,CAAA,EAAAW,MAAA,CAAAqB,yBAAA,CAAA7B,CAAA,KAAAgB,OAAA,CAAAR,MAAA,CAAAR,CAAA,GAAA2B,OAAA,WAAA5B,CAAA,IAAAS,MAAA,CAAAC,cAAA,CAAAZ,CAAA,EAAAE,CAAA,EAAAS,MAAA,CAAAE,wBAAA,CAAAV,CAAA,EAAAD,CAAA,iBAAAF,CAAA;AA6BtE,IAAMkC,eAAe,GAAGC,4BAAM,CAACC,GAAG,CAAAzC,eAAA,KAAAA,eAAA,OAAA0C,uBAAA,2KAIZ,UAAAC,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,EAKnE;AAEM,IAAMC,sBAAsB,GAAGP,4BAAM,CAACC,GAAG,CAAAxC,gBAAA,KAAAA,gBAAA,OAAAyC,uBAAA,6rBAM5CM,mCAAuB,EACZ,UAAAL,KAAK;EAAA,OAAKA,KAAK,CAACM,cAAc,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC,EAE5DC,mBAAW,CAACC,MAAM,EAShBC,mCAAuB,EACH,UAAAT,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAG9D,UAAAH,KAAK;EAAA,OAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAO9DP,eAAe,EAQfA,eAAe,CAMtB;AAACc,OAAA,CAAAN,sBAAA,GAAAA,sBAAA;AAEF,IAAMO,qBAAqB,GAAGd,4BAAM,CAACC,GAAG,CAAAvC,gBAAA,KAAAA,gBAAA,OAAAwC,uBAAA,6EAIvC;AAED,IAAMa,YAAY,GAAGf,4BAAM,CAACC,GAAG,CAAAtC,gBAAA,KAAAA,gBAAA,OAAAuC,uBAAA,oLAW9B;AAED,IAAMc,aAAa,gBAAGlE,KAAK,CAACmE,UAAU,CAAwC,UAAAC,IAAA,EAUIC,GAAG,EAAK;EAAA,IATTC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IACXC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IACJC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACPC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IACRC,mBAAmB,GAAAP,IAAA,CAAnBO,mBAAmB;IACnBC,SAAS,GAAAR,IAAA,CAATQ,SAAS;IACTC,QAAQ,GAAAT,IAAA,CAARS,QAAQ;IACLC,IAAI,OAAAC,yBAAA,aAAAX,IAAA,EAAA3D,SAAA;EAEtF,IAAM+C,KAAK,GAAG,IAAAwB,0BAAQ,EAAC,CAAC;EACxB,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAA,EAAS;IACvB,OACGX,WAAW,iBACV,IAAA9D,WAAA,CAAA0E,IAAA,EAACjB,YAAY;MAAAkB,QAAA,gBACX,IAAA3E,WAAA,CAAA4E,GAAA;QAAKC,GAAG,EAAEf;MAAY,CAAC,CAAC,eACxB,IAAA9D,WAAA,CAAA4E,GAAA,EAACnC,eAAe,IAAC,CAAC;IAAA,CACN,CACf,IACAuB,QAAQ,iBACP,IAAAhE,WAAA,CAAA4E,GAAA,EAAC7E,OAAA,CAAA+E,UAAU;MAACV,SAAS,EAAC,UAAU;MAACW,SAAS,EAAEC,0BAAkB,CAACC,IAAK;MACxDC,KAAK,EAAEhB,QAAQ,GAAGpB,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEC,KAAK,CAAC,GAAGF,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEC,KAAK,CAAE;MAAA2B,QAAA,EACnGX;IAAQ,CACC,CACZ,iBAAI,IAAAhE,WAAA,CAAA4E,GAAA,EAAA5E,WAAA,CAAAmF,QAAA;MAAAR,QAAA,EAAGZ;IAAI,CAAG,CAAC;EAErB,CAAC;EAED,oBACE,IAAA/D,WAAA,CAAA4E,GAAA,EAAC3B,sBAAsB;IAAA0B,QAAA,eACrB,IAAA3E,WAAA,CAAA0E,IAAA,EAAC9E,CAAA,CAAAwF,UAAU,EAAAlD,aAAA,CAAAA,aAAA;MAAC2B,GAAG,EAAEA,GAAI;MACTO,SAAS,EAAEA,SAAU;MACrBF,QAAQ,EAAEA,QAAS;MACnBmB,MAAM,EAAEpB,OAAQ;MAChBqB,OAAO,EAAC,SAAS;MACjBjB,QAAQ,EAAEA,QAAS;MACnBkB,KAAK,EAAC;IAAU,GACZjB,IAAI;MAAAK,QAAA,GACjBF,UAAU,CAAC,CAAC,EACZN,mBAAmB,iBAClB,IAAAnE,WAAA,CAAA4E,GAAA,EAACpB,qBAAqB;QAAAmB,QAAA,eACpB,IAAA3E,WAAA,CAAA4E,GAAA,EAAC9E,gBAAA,CAAA0F,eAAe;UAACC,IAAI,EAAEC,MAAI,CAACC,MAAO;UAACL,OAAO,EAAEnB;QAAoB,CAAC;MAAC,CAC9C,CACxB;IAAA,EACS;EAAC,CACS,CAAC;AAE7B,CAAC,CAAC;AAACT,aAAA,CAAAkC,SAAA;EAlJD9B,WAAW,EAAA+B,UAAA,YAAAC,MAAA;EAKX/B,IAAI,EAAA8B,UAAA,YAAAE,IAAA;EAKJ/B,QAAQ,EAAA6B,UAAA,YAAAC,MAAA;EAKR7B,OAAO,EAAA4B,UAAA,YAAAG,IAAA,CAAAC,UAAA;EAKP9B,mBAAmB,EAAA0B,UAAA,YAAAK,KAAA,EAAG,UAAU,EAAG,UAAU;AAAA;AAAA,IAAAC,QAAA,GAgIhCzC,aAAa;AAAAH,OAAA,cAAA4C,QAAA","ignoreList":[]}
1
+ {"version":3,"file":"ProfileButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_","_Iconbutton","_NotificationDot","_styles","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","PortraitOverlay","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","ProfileButtonContainer","IconButtonStyledPrimary","$hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContentStyles","exports","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","_ref","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","_objectWithoutProperties2","useTheme","renderIcon","jsxs","children","jsx","src","ComponentS","textStyle","ComponentTextStyle","Bold","color","Fragment","IconButton","action","variant","shape","NotificationDot","size","Size","Medium","propTypes","_propTypes","string","node","func","isRequired","oneOf","_default"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {COLORS, IconButton, Size} from '..';\r\nimport {IconButtonContentStyles, IconButtonStyledPrimary} from '../Button/Iconbutton';\r\nimport {NotificationDot} from '../NotificationDot';\r\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\r\n\r\nexport type ProfileButtonProps = {\r\n /**\r\n * Optional. The source URL of the profile picture.\r\n */\r\n portraitSrc?: string;\r\n\r\n /**\r\n * Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.\r\n */\r\n icon?: React.ReactNode;\r\n\r\n /**\r\n * Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.\r\n */\r\n initials?: string;\r\n\r\n /**\r\n * Required. The handler function to be called when the button is clicked.\r\n */\r\n onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n\r\n /**\r\n * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.\r\n */\r\n notificationVariant?: 'positive' | 'critical';\r\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\r\n\r\nconst PortraitOverlay = styled.div`\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n background-color: ${props => COLORS.getColor('black', props.theme)};\r\n opacity: 0;\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n`;\r\n\r\nexport const ProfileButtonContainer = styled.div<{ $hideOnLowWidth?: boolean }>`\r\n width: 48px;\r\n height: 48px;\r\n display: inline;\r\n user-select: none;\r\n \r\n ${IconButtonStyledPrimary} {\r\n display: ${props => (props.$hideOnLowWidth ? 'none' : 'inline')};\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n display: inline;\r\n }\r\n\r\n :disabled {\r\n img {\r\n filter: grayscale(100%);\r\n }\r\n\r\n ${IconButtonContentStyles} {\r\n background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n svg, svg path {\r\n fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n :hover:not(:disabled):not(:active),\r\n &.hover-state {\r\n ${PortraitOverlay} {\r\n opacity: 0.25;\r\n transition: opacity 100ms ease-in-out;\r\n }\r\n }\r\n\r\n :active:not(:disabled),\r\n &.active-state {\r\n ${PortraitOverlay} {\r\n opacity: 0.5;\r\n transition: opacity 0ms ease-in-out;\r\n }\r\n }\r\n }\r\n`;\r\n\r\nconst NotificationContainer = styled.div`\r\n position: absolute;\r\n left: 30px;\r\n bottom: 30px;\r\n`;\r\n\r\nconst ImageWrapper = styled.div`\r\n width: 36px;\r\n height: 36px;\r\n position: relative;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n }\r\n`;\r\n\r\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\r\n portraitSrc,\r\n icon,\r\n initials,\r\n onClick,\r\n disabled,\r\n notificationVariant,\r\n className,\r\n tabIndex,\r\n ...rest\r\n }, ref) => {\r\n const theme = useTheme();\r\n const renderIcon = () => {\r\n return (\r\n (portraitSrc && (\r\n <ImageWrapper>\r\n <img src={portraitSrc}/>\r\n <PortraitOverlay/>\r\n </ImageWrapper>\r\n )) ||\r\n (initials && (\r\n <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\r\n color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('white', theme)}>\r\n {initials}\r\n </ComponentS>\r\n )) || <>{icon}</>\r\n );\r\n };\r\n\r\n return (\r\n <ProfileButtonContainer>\r\n <IconButton ref={ref}\r\n className={className}\r\n disabled={disabled}\r\n action={onClick}\r\n variant=\"primary\"\r\n tabIndex={tabIndex}\r\n shape=\"circular\"\r\n {...rest}>\r\n {renderIcon()}\r\n {notificationVariant && (\r\n <NotificationContainer>\r\n <NotificationDot size={Size.Medium} variant={notificationVariant}/>\r\n </NotificationContainer>\r\n )}\r\n </IconButton>\r\n </ProfileButtonContainer>\r\n );\r\n});\r\n\r\nexport default ProfileButton;\r\n"],"mappings":"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","ignoreList":[]}
@@ -22,7 +22,7 @@ export type ProfileButtonProps = {
22
22
  notificationVariant?: 'positive' | 'critical';
23
23
  } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
24
24
  export declare const ProfileButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
25
- hideOnLowWidth?: boolean | undefined;
25
+ $hideOnLowWidth?: boolean | undefined;
26
26
  }>> & string;
27
27
  declare const ProfileButton: React.ForwardRefExoticComponent<{
28
28
  /**
@@ -19,7 +19,7 @@ var PortraitOverlay = styled.div(_templateObject || (_templateObject = _taggedTe
19
19
  return COLORS.getColor('black', props.theme);
20
20
  });
21
21
  export var ProfileButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 48px;\n height: 48px;\n display: inline;\n user-select: none;\n \n ", " {\n display: ", ";\n\n ", " {\n display: inline;\n }\n\n :disabled {\n img {\n filter: grayscale(100%);\n }\n\n ", " {\n background-color: ", ";\n\n svg, svg path {\n fill: ", ";\n }\n }\n }\n\n :hover:not(:disabled):not(:active),\n &.hover-state {\n ", " {\n opacity: 0.25;\n transition: opacity 100ms ease-in-out;\n }\n }\n\n :active:not(:disabled),\n &.active-state {\n ", " {\n opacity: 0.5;\n transition: opacity 0ms ease-in-out;\n }\n }\n }\n"])), IconButtonStyledPrimary, function (props) {
22
- return props.hideOnLowWidth ? 'none' : 'inline';
22
+ return props.$hideOnLowWidth ? 'none' : 'inline';
23
23
  }, BREAKPOINTS.MEDIUM, IconButtonContentStyles, function (props) {
24
24
  return COLORS.getColor('neutral_100', props.theme);
25
25
  }, function (props) {
@@ -1 +1 @@
1
- {"version":3,"file":"ProfileButton.js","names":["React","styled","useTheme","COLORS","IconButton","Size","IconButtonContentStyles","IconButtonStyledPrimary","NotificationDot","BREAKPOINTS","ComponentS","ComponentTextStyle","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","PortraitOverlay","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","ProfileButtonContainer","_templateObject2","hideOnLowWidth","MEDIUM","NotificationContainer","_templateObject3","ImageWrapper","_templateObject4","ProfileButton","forwardRef","_ref","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","_objectWithoutProperties","_excluded","renderIcon","children","src","textStyle","Bold","color","_objectSpread","action","variant","shape","size","Medium","propTypes","_pt","string","node","func","isRequired","oneOf"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {COLORS, IconButton, Size} from '..';\r\nimport {IconButtonContentStyles, IconButtonStyledPrimary} from '../Button/Iconbutton';\r\nimport {NotificationDot} from '../NotificationDot';\r\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\r\n\r\nexport type ProfileButtonProps = {\r\n /**\r\n * Optional. The source URL of the profile picture.\r\n */\r\n portraitSrc?: string;\r\n\r\n /**\r\n * Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.\r\n */\r\n icon?: React.ReactNode;\r\n\r\n /**\r\n * Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.\r\n */\r\n initials?: string;\r\n\r\n /**\r\n * Required. The handler function to be called when the button is clicked.\r\n */\r\n onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n\r\n /**\r\n * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.\r\n */\r\n notificationVariant?: 'positive' | 'critical';\r\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\r\n\r\nconst PortraitOverlay = styled.div`\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n background-color: ${props => COLORS.getColor('black', props.theme)};\r\n opacity: 0;\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n`;\r\n\r\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\r\n width: 48px;\r\n height: 48px;\r\n display: inline;\r\n user-select: none;\r\n \r\n ${IconButtonStyledPrimary} {\r\n display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n display: inline;\r\n }\r\n\r\n :disabled {\r\n img {\r\n filter: grayscale(100%);\r\n }\r\n\r\n ${IconButtonContentStyles} {\r\n background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n svg, svg path {\r\n fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n :hover:not(:disabled):not(:active),\r\n &.hover-state {\r\n ${PortraitOverlay} {\r\n opacity: 0.25;\r\n transition: opacity 100ms ease-in-out;\r\n }\r\n }\r\n\r\n :active:not(:disabled),\r\n &.active-state {\r\n ${PortraitOverlay} {\r\n opacity: 0.5;\r\n transition: opacity 0ms ease-in-out;\r\n }\r\n }\r\n }\r\n`;\r\n\r\nconst NotificationContainer = styled.div`\r\n position: absolute;\r\n left: 30px;\r\n bottom: 30px;\r\n`;\r\n\r\nconst ImageWrapper = styled.div`\r\n width: 36px;\r\n height: 36px;\r\n position: relative;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n }\r\n`;\r\n\r\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\r\n portraitSrc,\r\n icon,\r\n initials,\r\n onClick,\r\n disabled,\r\n notificationVariant,\r\n className,\r\n tabIndex,\r\n ...rest\r\n }, ref) => {\r\n const theme = useTheme();\r\n const renderIcon = () => {\r\n return (\r\n (portraitSrc && (\r\n <ImageWrapper>\r\n <img src={portraitSrc}/>\r\n <PortraitOverlay/>\r\n </ImageWrapper>\r\n )) ||\r\n (initials && (\r\n <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\r\n color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('white', theme)}>\r\n {initials}\r\n </ComponentS>\r\n )) || <>{icon}</>\r\n );\r\n };\r\n\r\n return (\r\n <ProfileButtonContainer>\r\n <IconButton ref={ref}\r\n className={className}\r\n disabled={disabled}\r\n action={onClick}\r\n variant=\"primary\"\r\n tabIndex={tabIndex}\r\n shape=\"circular\"\r\n {...rest}>\r\n {renderIcon()}\r\n {notificationVariant && (\r\n <NotificationContainer>\r\n <NotificationDot size={Size.Medium} variant={notificationVariant}/>\r\n </NotificationContainer>\r\n )}\r\n </IconButton>\r\n </ProfileButtonContainer>\r\n );\r\n});\r\n\r\nexport default ProfileButton;\r\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ProfileButton.js","names":["React","styled","useTheme","COLORS","IconButton","Size","IconButtonContentStyles","IconButtonStyledPrimary","NotificationDot","BREAKPOINTS","ComponentS","ComponentTextStyle","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","PortraitOverlay","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","ProfileButtonContainer","_templateObject2","$hideOnLowWidth","MEDIUM","NotificationContainer","_templateObject3","ImageWrapper","_templateObject4","ProfileButton","forwardRef","_ref","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","_objectWithoutProperties","_excluded","renderIcon","children","src","textStyle","Bold","color","_objectSpread","action","variant","shape","size","Medium","propTypes","_pt","string","node","func","isRequired","oneOf"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {COLORS, IconButton, Size} from '..';\r\nimport {IconButtonContentStyles, IconButtonStyledPrimary} from '../Button/Iconbutton';\r\nimport {NotificationDot} from '../NotificationDot';\r\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\r\n\r\nexport type ProfileButtonProps = {\r\n /**\r\n * Optional. The source URL of the profile picture.\r\n */\r\n portraitSrc?: string;\r\n\r\n /**\r\n * Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.\r\n */\r\n icon?: React.ReactNode;\r\n\r\n /**\r\n * Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.\r\n */\r\n initials?: string;\r\n\r\n /**\r\n * Required. The handler function to be called when the button is clicked.\r\n */\r\n onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n\r\n /**\r\n * Optional. The variant of the notification dot. It can be 'positive' or 'critical'.\r\n */\r\n notificationVariant?: 'positive' | 'critical';\r\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\r\n\r\nconst PortraitOverlay = styled.div`\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n background-color: ${props => COLORS.getColor('black', props.theme)};\r\n opacity: 0;\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n`;\r\n\r\nexport const ProfileButtonContainer = styled.div<{ $hideOnLowWidth?: boolean }>`\r\n width: 48px;\r\n height: 48px;\r\n display: inline;\r\n user-select: none;\r\n \r\n ${IconButtonStyledPrimary} {\r\n display: ${props => (props.$hideOnLowWidth ? 'none' : 'inline')};\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n display: inline;\r\n }\r\n\r\n :disabled {\r\n img {\r\n filter: grayscale(100%);\r\n }\r\n\r\n ${IconButtonContentStyles} {\r\n background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n svg, svg path {\r\n fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n :hover:not(:disabled):not(:active),\r\n &.hover-state {\r\n ${PortraitOverlay} {\r\n opacity: 0.25;\r\n transition: opacity 100ms ease-in-out;\r\n }\r\n }\r\n\r\n :active:not(:disabled),\r\n &.active-state {\r\n ${PortraitOverlay} {\r\n opacity: 0.5;\r\n transition: opacity 0ms ease-in-out;\r\n }\r\n }\r\n }\r\n`;\r\n\r\nconst NotificationContainer = styled.div`\r\n position: absolute;\r\n left: 30px;\r\n bottom: 30px;\r\n`;\r\n\r\nconst ImageWrapper = styled.div`\r\n width: 36px;\r\n height: 36px;\r\n position: relative;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n }\r\n`;\r\n\r\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\r\n portraitSrc,\r\n icon,\r\n initials,\r\n onClick,\r\n disabled,\r\n notificationVariant,\r\n className,\r\n tabIndex,\r\n ...rest\r\n }, ref) => {\r\n const theme = useTheme();\r\n const renderIcon = () => {\r\n return (\r\n (portraitSrc && (\r\n <ImageWrapper>\r\n <img src={portraitSrc}/>\r\n <PortraitOverlay/>\r\n </ImageWrapper>\r\n )) ||\r\n (initials && (\r\n <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\r\n color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('white', theme)}>\r\n {initials}\r\n </ComponentS>\r\n )) || <>{icon}</>\r\n );\r\n };\r\n\r\n return (\r\n <ProfileButtonContainer>\r\n <IconButton ref={ref}\r\n className={className}\r\n disabled={disabled}\r\n action={onClick}\r\n variant=\"primary\"\r\n tabIndex={tabIndex}\r\n shape=\"circular\"\r\n {...rest}>\r\n {renderIcon()}\r\n {notificationVariant && (\r\n <NotificationContainer>\r\n <NotificationDot size={Size.Medium} variant={notificationVariant}/>\r\n </NotificationContainer>\r\n )}\r\n </IconButton>\r\n </ProfileButtonContainer>\r\n );\r\n});\r\n\r\nexport default ProfileButton;\r\n"],"mappings":"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","ignoreList":[]}
@@ -64,22 +64,22 @@ var getBottomMargin = function getBottomMargin(size) {
64
64
  }
65
65
  };
66
66
  var Nav = _styledComponents["default"].nav(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n\n a {\n height: ", ";\n }\n\n a > div:last-of-type {\n font-size: 12px;\n margin: 0 0 8px 16px;\n }\n a > div:first-child {\n font-size: ", ";\n margin: ", " 0 ", " 16px;\n }\n a > div:only-of-type {\n font-size: ", ";\n margin: auto 0 auto 16px;\n }\n\n @media print {\n display: none;\n }\n"])), function (props) {
67
- return getHeight(props.size);
67
+ return getHeight(props.$size);
68
68
  }, function (props) {
69
- return getFontSize(props.size);
69
+ return getFontSize(props.$size);
70
70
  }, function (props) {
71
- return getTopMargin(props.size);
71
+ return getTopMargin(props.$size);
72
72
  }, function (props) {
73
- return getBottomMargin(props.size);
73
+ return getBottomMargin(props.$size);
74
74
  }, function (props) {
75
- return getFontSize(props.size);
75
+ return getFontSize(props.$size);
76
76
  });
77
77
  var Tabs = function Tabs(_ref) {
78
78
  var children = _ref.children,
79
79
  size = _ref.size;
80
80
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Nav, {
81
81
  role: "tablist",
82
- size: size,
82
+ $size: size,
83
83
  children: children
84
84
  });
85
85
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_types","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","getHeight","size","Size","Small","Medium","Large","getFontSize","getTopMargin","getBottomMargin","Nav","styled","nav","_taggedTemplateLiteral2","props","Tabs","_ref","children","jsx","role","propTypes","_propTypes","any","_default","exports"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Size } from '../types';\r\n\r\ntype TabsProps = {\r\n children?: any;\r\n size: Size;\r\n};\r\n\r\nconst getHeight = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '48px';\r\n case Size.Medium:\r\n return '56px';\r\n case Size.Large:\r\n return '64px';\r\n default:\r\n return '48px';\r\n }\r\n};\r\n\r\nconst getFontSize = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '16px';\r\n case Size.Medium:\r\n return '18px';\r\n case Size.Large:\r\n return '20px';\r\n default:\r\n return '20px';\r\n }\r\n};\r\n\r\nconst getTopMargin = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '6px';\r\n case Size.Medium:\r\n return '10px';\r\n case Size.Large:\r\n return '12px';\r\n default:\r\n return '12px';\r\n }\r\n};\r\n\r\nconst getBottomMargin = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '2px';\r\n case Size.Medium:\r\n return '3px';\r\n case Size.Large:\r\n return '4px';\r\n default:\r\n return '4px';\r\n }\r\n};\r\n\r\nconst Nav = styled.nav<{size: Size}>`\r\n display: flex;\r\n flex-direction: column;\r\n\r\n a {\r\n height: ${(props) => getHeight(props.size)};\r\n }\r\n\r\n a > div:last-of-type {\r\n font-size: 12px;\r\n margin: 0 0 8px 16px;\r\n }\r\n a > div:first-child {\r\n font-size: ${(props) => getFontSize(props.size)};\r\n margin: ${(props) => getTopMargin(props.size)} 0 ${(props) => getBottomMargin(props.size)} 16px;\r\n }\r\n a > div:only-of-type {\r\n font-size: ${(props) => getFontSize(props.size)};\r\n margin: auto 0 auto 16px;\r\n }\r\n\r\n @media print {\r\n display: none;\r\n }\r\n`;\r\n\r\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\r\n <Nav role=\"tablist\" size={size}>\r\n {children}\r\n </Nav>\r\n);\r\n\r\nexport default Tabs;\r\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Tabs.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_types","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","getHeight","size","Size","Small","Medium","Large","getFontSize","getTopMargin","getBottomMargin","Nav","styled","nav","_taggedTemplateLiteral2","props","$size","Tabs","_ref","children","jsx","role","propTypes","_propTypes","any","_default","exports"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Size } from '../types';\r\n\r\ntype TabsProps = {\r\n children?: any;\r\n size: Size;\r\n};\r\n\r\nconst getHeight = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '48px';\r\n case Size.Medium:\r\n return '56px';\r\n case Size.Large:\r\n return '64px';\r\n default:\r\n return '48px';\r\n }\r\n};\r\n\r\nconst getFontSize = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '16px';\r\n case Size.Medium:\r\n return '18px';\r\n case Size.Large:\r\n return '20px';\r\n default:\r\n return '20px';\r\n }\r\n};\r\n\r\nconst getTopMargin = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '6px';\r\n case Size.Medium:\r\n return '10px';\r\n case Size.Large:\r\n return '12px';\r\n default:\r\n return '12px';\r\n }\r\n};\r\n\r\nconst getBottomMargin = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '2px';\r\n case Size.Medium:\r\n return '3px';\r\n case Size.Large:\r\n return '4px';\r\n default:\r\n return '4px';\r\n }\r\n};\r\n\r\nconst Nav = styled.nav<{$size: Size}>`\r\n display: flex;\r\n flex-direction: column;\r\n\r\n a {\r\n height: ${(props) => getHeight(props.$size)};\r\n }\r\n\r\n a > div:last-of-type {\r\n font-size: 12px;\r\n margin: 0 0 8px 16px;\r\n }\r\n a > div:first-child {\r\n font-size: ${(props) => getFontSize(props.$size)};\r\n margin: ${(props) => getTopMargin(props.$size)} 0 ${(props) => getBottomMargin(props.$size)} 16px;\r\n }\r\n a > div:only-of-type {\r\n font-size: ${(props) => getFontSize(props.$size)};\r\n margin: auto 0 auto 16px;\r\n }\r\n\r\n @media print {\r\n display: none;\r\n }\r\n`;\r\n\r\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\r\n <Nav role=\"tablist\" $size={size}>\r\n {children}\r\n </Nav>\r\n);\r\n\r\nexport default Tabs;\r\n"],"mappings":"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","ignoreList":[]}
package/dist/Tabs/Tabs.js CHANGED
@@ -54,22 +54,22 @@ var getBottomMargin = function getBottomMargin(size) {
54
54
  }
55
55
  };
56
56
  var Nav = styled.nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n\n a {\n height: ", ";\n }\n\n a > div:last-of-type {\n font-size: 12px;\n margin: 0 0 8px 16px;\n }\n a > div:first-child {\n font-size: ", ";\n margin: ", " 0 ", " 16px;\n }\n a > div:only-of-type {\n font-size: ", ";\n margin: auto 0 auto 16px;\n }\n\n @media print {\n display: none;\n }\n"])), function (props) {
57
- return getHeight(props.size);
57
+ return getHeight(props.$size);
58
58
  }, function (props) {
59
- return getFontSize(props.size);
59
+ return getFontSize(props.$size);
60
60
  }, function (props) {
61
- return getTopMargin(props.size);
61
+ return getTopMargin(props.$size);
62
62
  }, function (props) {
63
- return getBottomMargin(props.size);
63
+ return getBottomMargin(props.$size);
64
64
  }, function (props) {
65
- return getFontSize(props.size);
65
+ return getFontSize(props.$size);
66
66
  });
67
67
  var Tabs = function Tabs(_ref) {
68
68
  var children = _ref.children,
69
69
  size = _ref.size;
70
70
  return /*#__PURE__*/_jsx(Nav, {
71
71
  role: "tablist",
72
- size: size,
72
+ $size: size,
73
73
  children: children
74
74
  });
75
75
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.js","names":["React","styled","Size","jsx","_jsx","getHeight","size","Small","Medium","Large","getFontSize","getTopMargin","getBottomMargin","Nav","nav","_templateObject","_taggedTemplateLiteral","props","Tabs","_ref","children","role","propTypes","_pt","any"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Size } from '../types';\r\n\r\ntype TabsProps = {\r\n children?: any;\r\n size: Size;\r\n};\r\n\r\nconst getHeight = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '48px';\r\n case Size.Medium:\r\n return '56px';\r\n case Size.Large:\r\n return '64px';\r\n default:\r\n return '48px';\r\n }\r\n};\r\n\r\nconst getFontSize = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '16px';\r\n case Size.Medium:\r\n return '18px';\r\n case Size.Large:\r\n return '20px';\r\n default:\r\n return '20px';\r\n }\r\n};\r\n\r\nconst getTopMargin = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '6px';\r\n case Size.Medium:\r\n return '10px';\r\n case Size.Large:\r\n return '12px';\r\n default:\r\n return '12px';\r\n }\r\n};\r\n\r\nconst getBottomMargin = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '2px';\r\n case Size.Medium:\r\n return '3px';\r\n case Size.Large:\r\n return '4px';\r\n default:\r\n return '4px';\r\n }\r\n};\r\n\r\nconst Nav = styled.nav<{size: Size}>`\r\n display: flex;\r\n flex-direction: column;\r\n\r\n a {\r\n height: ${(props) => getHeight(props.size)};\r\n }\r\n\r\n a > div:last-of-type {\r\n font-size: 12px;\r\n margin: 0 0 8px 16px;\r\n }\r\n a > div:first-child {\r\n font-size: ${(props) => getFontSize(props.size)};\r\n margin: ${(props) => getTopMargin(props.size)} 0 ${(props) => getBottomMargin(props.size)} 16px;\r\n }\r\n a > div:only-of-type {\r\n font-size: ${(props) => getFontSize(props.size)};\r\n margin: auto 0 auto 16px;\r\n }\r\n\r\n @media print {\r\n display: none;\r\n }\r\n`;\r\n\r\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\r\n <Nav role=\"tablist\" size={size}>\r\n {children}\r\n </Nav>\r\n);\r\n\r\nexport default Tabs;\r\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,IAAI,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOhC,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,IAAU,EAAK;EAChC,QAAQA,IAAI;IACV,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,MAAM;IACf,KAAKL,IAAI,CAACM,MAAM;MACd,OAAO,MAAM;IACf,KAAKN,IAAI,CAACO,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EACjB;AACF,CAAC;AAED,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIJ,IAAU,EAAK;EAClC,QAAQA,IAAI;IACV,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,MAAM;IACf,KAAKL,IAAI,CAACM,MAAM;MACd,OAAO,MAAM;IACf,KAAKN,IAAI,CAACO,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EACjB;AACF,CAAC;AAED,IAAME,YAAY,GAAG,SAAfA,YAAYA,CAAIL,IAAU,EAAK;EACnC,QAAQA,IAAI;IACV,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,KAAK;IACd,KAAKL,IAAI,CAACM,MAAM;MACd,OAAO,MAAM;IACf,KAAKN,IAAI,CAACO,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EACjB;AACF,CAAC;AAED,IAAMG,eAAe,GAAG,SAAlBA,eAAeA,CAAIN,IAAU,EAAK;EACtC,QAAQA,IAAI;IACV,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,KAAK;IACd,KAAKL,IAAI,CAACM,MAAM;MACd,OAAO,KAAK;IACd,KAAKN,IAAI,CAACO,KAAK;MACb,OAAO,KAAK;IACd;MACE,OAAO,KAAK;EAChB;AACF,CAAC;AAED,IAAMI,GAAG,GAAGZ,MAAM,CAACa,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,+XAKR,UAACC,KAAK;EAAA,OAAKZ,SAAS,CAACY,KAAK,CAACX,IAAI,CAAC;AAAA,GAQ7B,UAACW,KAAK;EAAA,OAAKP,WAAW,CAACO,KAAK,CAACX,IAAI,CAAC;AAAA,GACrC,UAACW,KAAK;EAAA,OAAKN,YAAY,CAACM,KAAK,CAACX,IAAI,CAAC;AAAA,GAAM,UAACW,KAAK;EAAA,OAAKL,eAAe,CAACK,KAAK,CAACX,IAAI,CAAC;AAAA,GAG5E,UAACW,KAAK;EAAA,OAAKP,WAAW,CAACO,KAAK,CAACX,IAAI,CAAC;AAAA,EAOlD;AAED,IAAMY,IAAwC,GAAG,SAA3CA,IAAwCA,CAAAC,IAAA;EAAA,IAAMC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEd,IAAI,GAAAa,IAAA,CAAJb,IAAI;EAAA,oBAChEF,IAAA,CAACS,GAAG;IAACQ,IAAI,EAAC,SAAS;IAACf,IAAI,EAAEA,IAAK;IAAAc,QAAA,EAC5BA;EAAQ,CACN,CAAC;AAAA,CACP;AAACF,IAAA,CAAAI,SAAA;EAtFAF,QAAQ,EAAAG,GAAA,CAAAC;AAAA;AAwFV,eAAeN,IAAI","ignoreList":[]}
1
+ {"version":3,"file":"Tabs.js","names":["React","styled","Size","jsx","_jsx","getHeight","size","Small","Medium","Large","getFontSize","getTopMargin","getBottomMargin","Nav","nav","_templateObject","_taggedTemplateLiteral","props","$size","Tabs","_ref","children","role","propTypes","_pt","any"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Size } from '../types';\r\n\r\ntype TabsProps = {\r\n children?: any;\r\n size: Size;\r\n};\r\n\r\nconst getHeight = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '48px';\r\n case Size.Medium:\r\n return '56px';\r\n case Size.Large:\r\n return '64px';\r\n default:\r\n return '48px';\r\n }\r\n};\r\n\r\nconst getFontSize = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '16px';\r\n case Size.Medium:\r\n return '18px';\r\n case Size.Large:\r\n return '20px';\r\n default:\r\n return '20px';\r\n }\r\n};\r\n\r\nconst getTopMargin = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '6px';\r\n case Size.Medium:\r\n return '10px';\r\n case Size.Large:\r\n return '12px';\r\n default:\r\n return '12px';\r\n }\r\n};\r\n\r\nconst getBottomMargin = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '2px';\r\n case Size.Medium:\r\n return '3px';\r\n case Size.Large:\r\n return '4px';\r\n default:\r\n return '4px';\r\n }\r\n};\r\n\r\nconst Nav = styled.nav<{$size: Size}>`\r\n display: flex;\r\n flex-direction: column;\r\n\r\n a {\r\n height: ${(props) => getHeight(props.$size)};\r\n }\r\n\r\n a > div:last-of-type {\r\n font-size: 12px;\r\n margin: 0 0 8px 16px;\r\n }\r\n a > div:first-child {\r\n font-size: ${(props) => getFontSize(props.$size)};\r\n margin: ${(props) => getTopMargin(props.$size)} 0 ${(props) => getBottomMargin(props.$size)} 16px;\r\n }\r\n a > div:only-of-type {\r\n font-size: ${(props) => getFontSize(props.$size)};\r\n margin: auto 0 auto 16px;\r\n }\r\n\r\n @media print {\r\n display: none;\r\n }\r\n`;\r\n\r\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\r\n <Nav role=\"tablist\" $size={size}>\r\n {children}\r\n </Nav>\r\n);\r\n\r\nexport default Tabs;\r\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,IAAI,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOhC,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,IAAU,EAAK;EAChC,QAAQA,IAAI;IACV,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,MAAM;IACf,KAAKL,IAAI,CAACM,MAAM;MACd,OAAO,MAAM;IACf,KAAKN,IAAI,CAACO,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EACjB;AACF,CAAC;AAED,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIJ,IAAU,EAAK;EAClC,QAAQA,IAAI;IACV,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,MAAM;IACf,KAAKL,IAAI,CAACM,MAAM;MACd,OAAO,MAAM;IACf,KAAKN,IAAI,CAACO,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EACjB;AACF,CAAC;AAED,IAAME,YAAY,GAAG,SAAfA,YAAYA,CAAIL,IAAU,EAAK;EACnC,QAAQA,IAAI;IACV,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,KAAK;IACd,KAAKL,IAAI,CAACM,MAAM;MACd,OAAO,MAAM;IACf,KAAKN,IAAI,CAACO,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EACjB;AACF,CAAC;AAED,IAAMG,eAAe,GAAG,SAAlBA,eAAeA,CAAIN,IAAU,EAAK;EACtC,QAAQA,IAAI;IACV,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,KAAK;IACd,KAAKL,IAAI,CAACM,MAAM;MACd,OAAO,KAAK;IACd,KAAKN,IAAI,CAACO,KAAK;MACb,OAAO,KAAK;IACd;MACE,OAAO,KAAK;EAChB;AACF,CAAC;AAED,IAAMI,GAAG,GAAGZ,MAAM,CAACa,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,+XAKR,UAACC,KAAK;EAAA,OAAKZ,SAAS,CAACY,KAAK,CAACC,KAAK,CAAC;AAAA,GAQ9B,UAACD,KAAK;EAAA,OAAKP,WAAW,CAACO,KAAK,CAACC,KAAK,CAAC;AAAA,GACtC,UAACD,KAAK;EAAA,OAAKN,YAAY,CAACM,KAAK,CAACC,KAAK,CAAC;AAAA,GAAM,UAACD,KAAK;EAAA,OAAKL,eAAe,CAACK,KAAK,CAACC,KAAK,CAAC;AAAA,GAG9E,UAACD,KAAK;EAAA,OAAKP,WAAW,CAACO,KAAK,CAACC,KAAK,CAAC;AAAA,EAOnD;AAED,IAAMC,IAAwC,GAAG,SAA3CA,IAAwCA,CAAAC,IAAA;EAAA,IAAMC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEf,IAAI,GAAAc,IAAA,CAAJd,IAAI;EAAA,oBAChEF,IAAA,CAACS,GAAG;IAACS,IAAI,EAAC,SAAS;IAACJ,KAAK,EAAEZ,IAAK;IAAAe,QAAA,EAC7BA;EAAQ,CACN,CAAC;AAAA,CACP;AAACF,IAAA,CAAAI,SAAA;EAtFAF,QAAQ,EAAAG,GAAA,CAAAC;AAAA;AAwFV,eAAeN,IAAI","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "5.0.0-dev.4",
3
+ "version": "5.0.0",
4
4
  "private": false,
5
5
  "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
6
6
  "contributors": [],