@laerdal/life-react-components 5.0.8-dev.1 → 5.0.8
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.
- package/dist/Chips/ChoiceChips.cjs +0 -1
- package/dist/Chips/ChoiceChips.cjs.map +1 -1
- package/dist/Chips/ChoiceChips.js +0 -1
- package/dist/Chips/ChoiceChips.js.map +1 -1
- package/dist/ChipsInput/ChipDropdownInput.cjs +1 -1
- package/dist/ChipsInput/ChipDropdownInput.cjs.map +1 -1
- package/dist/ChipsInput/ChipDropdownInput.js +1 -1
- package/dist/ChipsInput/ChipDropdownInput.js.map +1 -1
- package/dist/Dropdown/BasicDropdown.cjs +0 -2
- package/dist/Dropdown/BasicDropdown.cjs.map +1 -1
- package/dist/Dropdown/BasicDropdown.js +0 -2
- package/dist/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/Dropdown/DropdownButton.cjs +0 -2
- package/dist/Dropdown/DropdownButton.cjs.map +1 -1
- package/dist/Dropdown/DropdownButton.js +0 -2
- package/dist/Dropdown/DropdownButton.js.map +1 -1
- package/dist/Dropdown/DropdownContent.cjs +1 -1
- package/dist/Dropdown/DropdownContent.cjs.map +1 -1
- package/dist/Dropdown/DropdownContent.js +1 -1
- package/dist/Dropdown/DropdownContent.js.map +1 -1
- package/dist/Dropdown/DropdownFilter.cjs +0 -2
- package/dist/Dropdown/DropdownFilter.cjs.map +1 -1
- package/dist/Dropdown/DropdownFilter.js +0 -2
- package/dist/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.cjs +1 -0
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.js +1 -0
- package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/SubMenu.cjs +1 -0
- package/dist/GlobalNavigationBar/desktop/SubMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/SubMenu.js +1 -0
- package/dist/GlobalNavigationBar/desktop/SubMenu.js.map +1 -1
- package/dist/InputFields/QuickSearch.cjs +1 -1
- package/dist/InputFields/QuickSearch.cjs.map +1 -1
- package/dist/InputFields/QuickSearch.js +1 -1
- package/dist/InputFields/QuickSearch.js.map +1 -1
- package/dist/Modals/ModalContainer.cjs +142 -106
- package/dist/Modals/ModalContainer.cjs.map +1 -1
- package/dist/Modals/ModalContainer.d.ts +17 -1
- package/dist/Modals/ModalContainer.js +142 -106
- package/dist/Modals/ModalContainer.js.map +1 -1
- package/dist/styles/typography.cjs +35 -59
- package/dist/styles/typography.cjs.map +1 -1
- package/dist/styles/typography.d.ts +1 -1
- package/dist/styles/typography.js +35 -59
- package/dist/styles/typography.js.map +1 -1
- package/package.json +1 -1
|
@@ -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';\nimport styled, { useTheme } from 'styled-components';\n\nimport IconButton, { IconButtonStyledSecondary } from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { SystemIcons } from '../icons';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField, { StyledSearchField } from './components/SearchField';\n\nconst Wrapper = styled.div<{$shouldNotInteract: boolean}>`\n width: 100%;\n\n ${StyledSearchField} {\n transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n background-color: transparent;\n\n &.small {\n width: 48px;\n }\n\n &.medium {\n width: 56px;\n }\n\n &.expanded {\n width: 100%;\n }\n\n box-shadow: none;\n\n &:hover {\n box-shadow: none;\n }\n\n &.expanded {\n background-color: ${props => COLORS.getColor('white', props.theme)};\n box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\n }\n\n &.expanded:hover,\n &.expanded:focus-within {\n box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\n }\n }\n\n ${IconButtonStyledSecondary} {\n pointer-events: ${(props) => (props.$shouldNotInteract ? 'none' : 'auto')};\n }\n`;\n\nexport type QuickSearchProps = {\n /** Required. Id of the component. */\n id: string;\n /** Optional. Current search term entered by the user. */\n searchTerm?: string;\n /** Required. Handler to be called when user modified input. */\n setSearchTerm: (term: string) => void;\n /** Required. Handler to be called when user triggers search. */\n enterSearch: (e: any) => void;\n /** Required. Handler to be called when user clears input field. */\n removeSearch: (e: any) => void;\n /** Optional. Placeholder text to be shown in the input field when there is no input. */\n placeholder?: string;\n /** Optional. ARIA label to set on the input field. */\n performSearchLabel?: string;\n /** Optional. If disabled user can not interact with the search bar. */\n disabled?: boolean;\n /** Optional. Optional onkeydown handler to be set on the input field. */\n onKeyDown?: (e: React.KeyboardEvent) => void;\n /** Optional. Size of the component. Defaults to 'medium'. */\n size?: Size.Small | Size.Medium;\n /** Optional. Margin style attribute to be set on the input field. */\n margin?: string;\n /** Optional. If set then loading indicator will be shown on the right side of the input field. */\n loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n id,\n searchTerm,\n setSearchTerm,\n enterSearch,\n removeSearch,\n placeholder,\n performSearchLabel,\n disabled,\n onKeyDown,\n size,\n margin,\n loading,\n}: QuickSearchProps) => {\n const theme = useTheme();\n const searchFieldRef = React.useRef<HTMLDivElement>(null);\n const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\n visible: false,\n });\n\n const handleClickOutside = (e: any) => {\n if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n if (searchFieldVisible?.visible && !searchTerm?.length) {\n setSearchFieldVisible({ visible: false });\n }\n }\n };\n\n const handleKeyDown = (e: any) => {\n if (onKeyDown) {\n onKeyDown(e);\n }\n if (e.key === 'Escape') {\n if (searchFieldVisible?.visible && !searchTerm?.length) {\n setSearchFieldVisible({ visible: false });\n }\n }\n };\n\n const handleBlur = (e: any) => {\n if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\n setSearchFieldVisible({ visible: false });\n }\n };\n\n const handleSearchIconAction = (e: any) => {\n if (!searchFieldVisible?.visible) {\n setSearchFieldVisible({\n visible: !searchFieldVisible.visible,\n focus: !searchFieldVisible.visible && e?.detail !== 1,\n });\n }\n };\n\n // set search field visibility on search term change\n React.useEffect(() => {\n if (!!searchTerm?.length && !searchFieldVisible?.visible) {\n setSearchFieldVisible({ visible: true, focus: false });\n }\n }, [searchTerm, searchFieldVisible]);\n\n // register click outside handler\n React.useEffect(() => {\n document.addEventListener('click', handleClickOutside);\n return () => {\n document.removeEventListener('click', handleClickOutside);\n };\n });\n\n // focus search input on visibility change\n React.useEffect(() => {\n if (searchFieldVisible?.visible) {\n searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\n }\n }, [searchFieldVisible.visible, searchFieldInputRef]);\n\n return (\n <Wrapper $shouldNotInteract={searchFieldVisible?.visible}>\n <SearchField\n ref={searchFieldRef}\n id={id}\n size={size}\n searchTerm={searchTerm}\n style={{\n margin: margin,\n }}\n onBlur={handleBlur}\n className={searchFieldVisible?.visible ? 'expanded' : ''}>\n {searchFieldVisible?.visible && (\n <SearchBarInput\n placeholder={disabled ? '' : placeholder}\n id={id}\n ref={searchFieldInputRef}\n disabled={disabled}\n onKeyDown={handleKeyDown}\n size={size}\n setSearchTerm={(term: string) => setSearchTerm(term)}\n searchTerm={searchTerm}\n enterSearch={enterSearch}\n focusParentRefs={[searchFieldRef]}\n />\n )}\n <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\n <IconButton\n id={`${id}_Searchbutton`}\n dataTestId={`${id}_Searchbutton`}\n variant=\"secondary\"\n shape=\"circular\"\n tabIndex={searchFieldVisible?.visible ? -1 : 0}\n action={handleSearchIconAction}>\n <SystemIcons.Search size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\n </IconButton>\n </SearchIconWrapper>\n <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\n <IconButton\n id={`${id}_Clearicon`}\n dataTestId={`${id}_Clearicon`}\n variant=\"secondary\"\n shape=\"circular\"\n action={(e) => {\n removeSearch(e);\n searchFieldInputRef?.current?.focus();\n }}>\n <SystemIcons.Clear size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\n </IconButton>\n </StyledIcon>\n {loading && searchFieldVisible?.visible && (\n <StyledIcon className={size ? size : ''}>\n <LoadingIndicator size={Size.Small} color={COLORS.getColor('neutral_600', theme)} />\n </StyledIcon>\n )}\n </SearchField>\n </Wrapper>\n );\n};\n\nexport default QuickSearch;\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,IAAIC,QAAQ,QAAQ,mBAAmB;AAEpD,OAAOC,UAAU,IAAIC,yBAAyB,QAAQ,sBAAsB;AAC5E,SAASC,iBAAiB,EAAEC,UAAU,QAAQ,WAAW;AACzD,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,IAAI;AAC7C,SAASC,WAAW,QAAQ,UAAU;AACtC,OAAOC,cAAc,MAAM,6BAA6B;AACxD,OAAOC,WAAW,IAAIC,iBAAiB,QAAQ,0BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE1E,IAAMC,OAAO,GAAGjB,MAAM,CAACkB,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,imBAGtBR,iBAAiB,EAwBK,UAAAS,KAAK;EAAA,OAAId,MAAM,CAACe,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GACpC,UAAAF,KAAK;EAAA,OAAId,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAKpD,UAAAF,KAAK;EAAA,OAAId,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAIpFpB,yBAAyB,EACP,UAACkB,KAAK;EAAA,OAAMA,KAAK,CAACG,kBAAkB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,CAE5E;AA6BD,IAAMC,WAAsD,GAAG,SAAzDA,WAAsDA,CAAAC,IAAA,EAapC;EAAA,IAZtBC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,UAAU,GAAAF,IAAA,CAAVE,UAAU;IACVC,cAAa,GAAAH,IAAA,CAAbG,aAAa;IACbC,WAAW,GAAAJ,IAAA,CAAXI,WAAW;IACXC,YAAY,GAAAL,IAAA,CAAZK,YAAY;IACZC,WAAW,GAAAN,IAAA,CAAXM,WAAW;IACXC,kBAAkB,GAAAP,IAAA,CAAlBO,kBAAkB;IAClBC,QAAQ,GAAAR,IAAA,CAARQ,QAAQ;IACRC,SAAS,GAAAT,IAAA,CAATS,SAAS;IACTC,IAAI,GAAAV,IAAA,CAAJU,IAAI;IACJC,MAAM,GAAAX,IAAA,CAANW,MAAM;IACNC,OAAO,GAAAZ,IAAA,CAAPY,OAAO;EAEP,IAAMf,KAAK,GAAGtB,QAAQ,CAAC,CAAC;EACxB,IAAMsC,cAAc,GAAGxC,KAAK,CAACyC,MAAM,CAAiB,IAAI,CAAC;EACzD,IAAMC,mBAAmB,GAAG1C,KAAK,CAACyC,MAAM,CAAmB,IAAI,CAAC;EAEhE,IAAAE,eAAA,GAAoD3C,KAAK,CAAC4C,QAAQ,CAAwC;MACxGC,OAAO,EAAE;IACX,CAAC,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAJ,eAAA;IAFKK,kBAAkB,GAAAF,gBAAA;IAAEG,qBAAqB,GAAAH,gBAAA;EAIhD,IAAMI,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,CAAM,EAAK;IACrC,IAAIX,cAAc,aAAdA,cAAc,eAAdA,cAAc,CAAEY,OAAO,IAAI,CAACZ,cAAc,CAACY,OAAO,CAACC,QAAQ,CAACF,CAAC,CAACG,MAAM,CAAC,EAAE;MACzE,IAAIN,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAEH,OAAO,IAAI,EAAChB,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAE0B,MAAM,GAAE;QACtDN,qBAAqB,CAAC;UAAEJ,OAAO,EAAE;QAAM,CAAC,CAAC;MAC3C;IACF;EACF,CAAC;EAED,IAAMW,aAAa,GAAG,SAAhBA,aAAaA,CAAIL,CAAM,EAAK;IAChC,IAAIf,SAAS,EAAE;MACbA,SAAS,CAACe,CAAC,CAAC;IACd;IACA,IAAIA,CAAC,CAACM,GAAG,KAAK,QAAQ,EAAE;MACtB,IAAIT,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAEH,OAAO,IAAI,EAAChB,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAE0B,MAAM,GAAE;QACtDN,qBAAqB,CAAC;UAAEJ,OAAO,EAAE;QAAM,CAAC,CAAC;MAC3C;IACF;EACF,CAAC;EAED,IAAMa,UAAU,GAAG,SAAbA,UAAUA,CAAIP,CAAM,EAAK;IAAA,IAAAQ,qBAAA;IAC7B,IAAI,CAAC9B,UAAU,KAAK,CAACsB,CAAC,CAACS,aAAa,IAAI,GAAAD,qBAAA,GAACnB,cAAc,CAACY,OAAO,cAAAO,qBAAA,eAAtBA,qBAAA,CAAwBN,QAAQ,CAACF,CAAC,CAACS,aAAa,CAAC,EAAC,EAAE;MAC3FX,qBAAqB,CAAC;QAAEJ,OAAO,EAAE;MAAM,CAAC,CAAC;IAC3C;EACF,CAAC;EAED,IAAMgB,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAIV,CAAM,EAAK;IACzC,IAAI,EAACH,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAEH,OAAO,GAAE;MAChCI,qBAAqB,CAAC;QACpBJ,OAAO,EAAE,CAACG,kBAAkB,CAACH,OAAO;QACpCiB,KAAK,EAAE,CAACd,kBAAkB,CAACH,OAAO,IAAI,CAAAM,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEY,MAAM,MAAK;MACtD,CAAC,CAAC;IACJ;EACF,CAAC;;EAED;EACA/D,KAAK,CAACgE,SAAS,CAAC,YAAM;IACpB,IAAI,CAAC,EAACnC,UAAU,aAAVA,UAAU,eAAVA,UAAU,CAAE0B,MAAM,KAAI,EAACP,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAEH,OAAO,GAAE;MACxDI,qBAAqB,CAAC;QAAEJ,OAAO,EAAE,IAAI;QAAEiB,KAAK,EAAE;MAAM,CAAC,CAAC;IACxD;EACF,CAAC,EAAE,CAACjC,UAAU,EAAEmB,kBAAkB,CAAC,CAAC;;EAEpC;EACAhD,KAAK,CAACgE,SAAS,CAAC,YAAM;IACpBC,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAEhB,kBAAkB,CAAC;IACtD,OAAO,YAAM;MACXe,QAAQ,CAACE,mBAAmB,CAAC,OAAO,EAAEjB,kBAAkB,CAAC;IAC3D,CAAC;EACH,CAAC,CAAC;;EAEF;EACAlD,KAAK,CAACgE,SAAS,CAAC,YAAM;IACpB,IAAIhB,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAEH,OAAO,EAAE;MAAA,IAAAuB,qBAAA;MAC/B1B,mBAAmB,aAAnBA,mBAAmB,wBAAA0B,qBAAA,GAAnB1B,mBAAmB,CAAEU,OAAO,cAAAgB,qBAAA,uBAA5BA,qBAAA,CAA8BN,KAAK,CAAC;QAAEO,YAAY,EAAErB,kBAAkB,CAACc;MAAM,CAAQ,CAAC;IACxF;EACF,CAAC,EAAE,CAACd,kBAAkB,CAACH,OAAO,EAAEH,mBAAmB,CAAC,CAAC;EAErD,oBACE3B,IAAA,CAACG,OAAO;IAACO,kBAAkB,EAAEuB,kBAAkB,aAAlBA,kBAAkB,uBAAlBA,kBAAkB,CAAEH,OAAQ;IAAAyB,QAAA,eACvDrD,KAAA,CAACL,WAAW;MACV2D,GAAG,EAAE/B,cAAe;MACpBZ,EAAE,EAAEA,EAAG;MACPS,IAAI,EAAEA,IAAK;MACXR,UAAU,EAAEA,UAAW;MACvB2C,KAAK,EAAE;QACLlC,MAAM,EAAEA;MACV,CAAE;MACFmC,MAAM,EAAEf,UAAW;MACnBgB,SAAS,EAAE1B,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAEH,OAAO,GAAG,UAAU,GAAG,EAAG;MAAAyB,QAAA,GACxD,CAAAtB,kBAAkB,aAAlBA,kBAAkB,uBAAlBA,kBAAkB,CAAEH,OAAO,kBAC1B9B,IAAA,CAACJ,cAAc;QACbsB,WAAW,EAAEE,QAAQ,GAAG,EAAE,GAAGF,WAAY;QACzCL,EAAE,EAAEA,EAAG;QACP2C,GAAG,EAAE7B,mBAAoB;QACzBP,QAAQ,EAAEA,QAAS;QACnBC,SAAS,EAAEoB,aAAc;QACzBnB,IAAI,EAAEA,IAAK;QACXP,aAAa,EAAE,SAAAA,cAAC6C,IAAY;UAAA,OAAK7C,cAAa,CAAC6C,IAAI,CAAC;QAAA,CAAC;QACrD9C,UAAU,EAAEA,UAAW;QACvBE,WAAW,EAAEA,WAAY;QACzB6C,eAAe,EAAE,CAACpC,cAAc;MAAE,CACnC,CACF,eACDzB,IAAA,CAACV,iBAAiB;QAACqE,SAAS,EAAErC,IAAI,GAAGA,IAAI,GAAG,EAAG;QAACwC,IAAI,EAAC,QAAQ;QAAC,cAAY3C,kBAAmB;QAAAoC,QAAA,eAC3FvD,IAAA,CAACZ,UAAU;UACTyB,EAAE,KAAAkD,MAAA,CAAKlD,EAAE,kBAAgB;UACzBmD,UAAU,KAAAD,MAAA,CAAKlD,EAAE,kBAAgB;UACjCoD,OAAO,EAAC,WAAW;UACnBC,KAAK,EAAC,UAAU;UAChBC,QAAQ,EAAElC,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAEH,OAAO,GAAG,CAAC,CAAC,GAAG,CAAE;UAC/CsC,MAAM,EAAEtB,sBAAuB;UAAAS,QAAA,eAC/BvD,IAAA,CAACL,WAAW,CAAC0E,MAAM;YAAC/C,IAAI,EAAC,MAAM;YAACgD,KAAK,EAAElD,QAAQ,GAAG3B,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEC,KAAK,CAAC,GAAGhB,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEC,KAAK;UAAE,CAAE;QAAC,CACzH;MAAC,CACI,CAAC,eACpBT,IAAA,CAACT,UAAU;QAACoE,SAAS,EAAErC,IAAI,GAAGA,IAAI,GAAG,EAAG;QAACwC,IAAI,EAAC,QAAQ;QAACS,MAAM,EAAE,CAACzD,UAAU,IAAI,EAACmB,kBAAkB,aAAlBA,kBAAkB,eAAlBA,kBAAkB,CAAEH,OAAO,CAAC;QAAAyB,QAAA,eACzGvD,IAAA,CAACZ,UAAU;UACTyB,EAAE,KAAAkD,MAAA,CAAKlD,EAAE,eAAa;UACtBmD,UAAU,KAAAD,MAAA,CAAKlD,EAAE,eAAa;UAC9BoD,OAAO,EAAC,WAAW;UACnBC,KAAK,EAAC,UAAU;UAChBE,MAAM,EAAE,SAAAA,OAAChC,CAAC,EAAK;YAAA,IAAAoC,sBAAA;YACbvD,YAAY,CAACmB,CAAC,CAAC;YACfT,mBAAmB,aAAnBA,mBAAmB,wBAAA6C,sBAAA,GAAnB7C,mBAAmB,CAAEU,OAAO,cAAAmC,sBAAA,uBAA5BA,sBAAA,CAA8BzB,KAAK,CAAC,CAAC;UACvC,CAAE;UAAAQ,QAAA,eACFvD,IAAA,CAACL,WAAW,CAAC8E,KAAK;YAACnD,IAAI,EAAC,MAAM;YAACgD,KAAK,EAAElD,QAAQ,GAAG3B,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEC,KAAK,CAAC,GAAGhB,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEC,KAAK;UAAE,CAAE;QAAC,CACxH;MAAC,CACH,CAAC,EACZe,OAAO,KAAIS,kBAAkB,aAAlBA,kBAAkB,uBAAlBA,kBAAkB,CAAEH,OAAO,kBACrC9B,IAAA,CAACT,UAAU;QAACoE,SAAS,EAAErC,IAAI,GAAGA,IAAI,GAAG,EAAG;QAAAiC,QAAA,eACtCvD,IAAA,CAACN,gBAAgB;UAAC4B,IAAI,EAAE9B,IAAI,CAACkF,KAAM;UAACJ,KAAK,EAAE7E,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEC,KAAK;QAAE,CAAE;MAAC,CAC1E,CACb;IAAA,CACU;EAAC,CACP,CAAC;AAEd,CAAC;AAACE,WAAA,CAAAgE,SAAA;EAjKA9D,EAAE,EAAA+D,GAAA,CAAAC,MAAA,CAAAC,UAAA;EAEFhE,UAAU,EAAA8D,GAAA,CAAAC,MAAA;EAEV9D,aAAa,EAAA6D,GAAA,CAAAG,IAAA,CAAAD,UAAA;EAEb9D,WAAW,EAAA4D,GAAA,CAAAG,IAAA,CAAAD,UAAA;EAEX7D,YAAY,EAAA2D,GAAA,CAAAG,IAAA,CAAAD,UAAA;EAEZ5D,WAAW,EAAA0D,GAAA,CAAAC,MAAA;EAEX1D,kBAAkB,EAAAyD,GAAA,CAAAC,MAAA;EAElBzD,QAAQ,EAAAwD,GAAA,CAAAI,IAAA;EAER3D,SAAS,EAAAuD,GAAA,CAAAG,IAAA;EAITxD,MAAM,EAAAqD,GAAA,CAAAC,MAAA;EAENrD,OAAO,EAAAoD,GAAA,CAAAI;AAAA;AA6IT,eAAerE,WAAW","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';\nimport styled, { useTheme } from 'styled-components';\n\nimport IconButton, { IconButtonStyledSecondary } from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { SystemIcons } from '../icons';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField, { StyledSearchField } from './components/SearchField';\n\nconst Wrapper = styled.div<{$shouldNotInteract: boolean}>`\n width: 100%;\n\n ${StyledSearchField} {\n transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n background-color: transparent;\n\n &.small {\n width: 48px;\n }\n\n &.medium {\n width: 56px;\n }\n\n &.expanded {\n width: 100%;\n }\n\n box-shadow: none;\n\n &:hover {\n box-shadow: none;\n }\n\n &.expanded {\n background-color: ${props => COLORS.getColor('white', props.theme)};\n box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\n }\n\n &.expanded:hover,\n &.expanded:focus-within {\n box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\n }\n }\n\n ${IconButtonStyledSecondary} {\n pointer-events: ${(props) => (props.$shouldNotInteract ? 'none' : 'auto')};\n }\n`;\n\nexport type QuickSearchProps = {\n /** Required. Id of the component. */\n id: string;\n /** Optional. Current search term entered by the user. */\n searchTerm?: string;\n /** Required. Handler to be called when user modified input. */\n setSearchTerm: (term: string) => void;\n /** Required. Handler to be called when user triggers search. */\n enterSearch: (e: any) => void;\n /** Required. Handler to be called when user clears input field. */\n removeSearch: (e: any) => void;\n /** Optional. Placeholder text to be shown in the input field when there is no input. */\n placeholder?: string;\n /** Optional. ARIA label to set on the input field. */\n performSearchLabel?: string;\n /** Optional. If disabled user can not interact with the search bar. */\n disabled?: boolean;\n /** Optional. Optional onkeydown handler to be set on the input field. */\n onKeyDown?: (e: React.KeyboardEvent) => void;\n /** Optional. Size of the component. Defaults to 'medium'. */\n size?: Size.Small | Size.Medium;\n /** Optional. Margin style attribute to be set on the input field. */\n margin?: string;\n /** Optional. If set then loading indicator will be shown on the right side of the input field. */\n loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n id,\n searchTerm,\n setSearchTerm,\n enterSearch,\n removeSearch,\n placeholder,\n performSearchLabel,\n disabled,\n onKeyDown,\n size,\n margin,\n loading,\n}: QuickSearchProps) => {\n const theme = useTheme();\n const searchFieldRef = React.useRef<HTMLDivElement>(null);\n const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\n visible: false,\n });\n\n const handleClickOutside = (e: any) => {\n if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n if (searchFieldVisible?.visible && !searchTerm?.length) {\n setSearchFieldVisible({ visible: false });\n }\n }\n };\n\n const handleKeyDown = (e: any) => {\n if (onKeyDown) {\n onKeyDown(e);\n }\n if (e.key === 'Escape') {\n if (searchFieldVisible?.visible && !searchTerm?.length) {\n setSearchFieldVisible({ visible: false });\n }\n }\n };\n\n const handleBlur = (e: any) => {\n if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\n setSearchFieldVisible({ visible: false });\n }\n };\n\n const handleSearchIconAction = (e: any) => {\n if (!searchFieldVisible?.visible) {\n setSearchFieldVisible({\n visible: !searchFieldVisible.visible,\n focus: !searchFieldVisible.visible && e?.detail !== 1,\n });\n }\n };\n\n // set search field visibility on search term change\n React.useEffect(() => {\n if (!!searchTerm?.length && !searchFieldVisible?.visible) {\n setSearchFieldVisible({ visible: true, focus: false });\n }\n }, [searchTerm, searchFieldVisible]);\n\n // register click outside handler\n React.useEffect(() => {\n document.addEventListener('click', handleClickOutside);\n return () => {\n document.removeEventListener('click', handleClickOutside);\n };\n }, []);\n\n // focus search input on visibility change\n React.useEffect(() => {\n if (searchFieldVisible?.visible) {\n searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\n }\n }, [searchFieldVisible.visible, searchFieldInputRef]);\n\n return (\n <Wrapper $shouldNotInteract={searchFieldVisible?.visible}>\n <SearchField\n ref={searchFieldRef}\n id={id}\n size={size}\n searchTerm={searchTerm}\n style={{\n margin: margin,\n }}\n onBlur={handleBlur}\n className={searchFieldVisible?.visible ? 'expanded' : ''}>\n {searchFieldVisible?.visible && (\n <SearchBarInput\n placeholder={disabled ? '' : placeholder}\n id={id}\n ref={searchFieldInputRef}\n disabled={disabled}\n onKeyDown={handleKeyDown}\n size={size}\n setSearchTerm={(term: string) => setSearchTerm(term)}\n searchTerm={searchTerm}\n enterSearch={enterSearch}\n focusParentRefs={[searchFieldRef]}\n />\n )}\n <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\n <IconButton\n id={`${id}_Searchbutton`}\n dataTestId={`${id}_Searchbutton`}\n variant=\"secondary\"\n shape=\"circular\"\n tabIndex={searchFieldVisible?.visible ? -1 : 0}\n action={handleSearchIconAction}>\n <SystemIcons.Search size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\n </IconButton>\n </SearchIconWrapper>\n <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\n <IconButton\n id={`${id}_Clearicon`}\n dataTestId={`${id}_Clearicon`}\n variant=\"secondary\"\n shape=\"circular\"\n action={(e) => {\n removeSearch(e);\n searchFieldInputRef?.current?.focus();\n }}>\n <SystemIcons.Clear size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\n </IconButton>\n </StyledIcon>\n {loading && searchFieldVisible?.visible && (\n <StyledIcon className={size ? size : ''}>\n <LoadingIndicator size={Size.Small} color={COLORS.getColor('neutral_600', theme)} />\n </StyledIcon>\n )}\n </SearchField>\n </Wrapper>\n );\n};\n\nexport default QuickSearch;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -6,8 +6,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports["default"] = void 0;
|
|
9
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
12
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
13
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
9
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
15
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
16
|
var React = _interopRequireWildcard(require("react"));
|
|
13
17
|
var _reactModal = _interopRequireDefault(require("react-modal"));
|
|
@@ -17,6 +21,8 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
17
21
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
18
22
|
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; }
|
|
19
23
|
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; }
|
|
24
|
+
function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2["default"])(t); if (r) { var s = (0, _getPrototypeOf2["default"])(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2["default"])(this, e); }; }
|
|
25
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
20
26
|
var ModalContainerStyles = {
|
|
21
27
|
content: {
|
|
22
28
|
top: 'auto',
|
|
@@ -36,115 +42,144 @@ var ModalContainerStyles = {
|
|
|
36
42
|
|
|
37
43
|
//override modal classes to define the animations
|
|
38
44
|
var modalTransitions = "\n\n@keyframes modalOpenAnimation {\n from{\n transform: scale(1.1, 1.1);\n }\n to {\n transform: scale(1, 1);\n }\n}\n\n.ReactModal__Overlay {\n opacity: 0;\n z-index: ".concat(_styles.Z_INDEXES.backdrop, ";\n display:flex;\n justify-content: center;\n align-items: center;\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n z-index: ").concat(_styles.Z_INDEXES.modal, ";\n opacity:0;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n animation: modalOpenAnimation 150ms ease-in-out;\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n opacity: 0;\n transform: scale(1.1, 1.1);\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n");
|
|
39
|
-
var
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
45
|
+
var ModalContainer = /*#__PURE__*/function (_React$Component) {
|
|
46
|
+
(0, _inherits2["default"])(ModalContainer, _React$Component);
|
|
47
|
+
var _super = _createSuper(ModalContainer);
|
|
48
|
+
function ModalContainer() {
|
|
49
|
+
(0, _classCallCheck2["default"])(this, ModalContainer);
|
|
50
|
+
return _super.apply(this, arguments);
|
|
51
|
+
}
|
|
52
|
+
(0, _createClass2["default"])(ModalContainer, [{
|
|
53
|
+
key: "componentDidMount",
|
|
54
|
+
value: function componentDidMount() {
|
|
55
|
+
if (_reactModal["default"].defaultStyles.overlay) {
|
|
56
|
+
_reactModal["default"].defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
//append style node to override modal transition classes
|
|
60
|
+
if (!document.querySelector('[modal-custom-styling="active"]')) {
|
|
61
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
62
|
+
var style = document.createElement('style');
|
|
63
|
+
style.setAttribute('modal-custom-styling', 'active');
|
|
64
|
+
head.appendChild(style);
|
|
65
|
+
style.appendChild(document.createTextNode(modalTransitions));
|
|
66
|
+
}
|
|
67
|
+
if (this.props.showModal) {
|
|
68
|
+
this.preventScroll(window.scrollY);
|
|
69
|
+
}
|
|
60
70
|
}
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
//@ts-ignore
|
|
68
|
-
document.body.style.left = null;
|
|
69
|
-
//@ts-ignore
|
|
70
|
-
document.body.style.top = null;
|
|
71
|
-
//@ts-ignore
|
|
72
|
-
document.body.style.right = null;
|
|
73
|
-
scroll && window.scrollTo(0, scroll);
|
|
74
|
-
setScroll(0);
|
|
71
|
+
}, {
|
|
72
|
+
key: "getSnapshotBeforeUpdate",
|
|
73
|
+
value: function getSnapshotBeforeUpdate(prevProps, prevState) {
|
|
74
|
+
return {
|
|
75
|
+
scroll: window.scrollY
|
|
76
|
+
};
|
|
75
77
|
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}, [props.showModal]);
|
|
86
|
-
React.useEffect(function () {
|
|
87
|
-
if (_reactModal["default"].defaultStyles.overlay) {
|
|
88
|
-
_reactModal["default"].defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';
|
|
78
|
+
}, {
|
|
79
|
+
key: "componentDidUpdate",
|
|
80
|
+
value: function componentDidUpdate(prevProps, prevState, snapshot) {
|
|
81
|
+
if (this.props.showModal && !prevProps.showModal) {
|
|
82
|
+
this.preventScroll(snapshot.scroll);
|
|
83
|
+
}
|
|
84
|
+
if (!this.props.showModal && prevProps.showModal) {
|
|
85
|
+
this.resetScroll();
|
|
86
|
+
}
|
|
89
87
|
}
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
head.appendChild(style);
|
|
97
|
-
style.appendChild(document.createTextNode(modalTransitions));
|
|
88
|
+
}, {
|
|
89
|
+
key: "componentWillUnmount",
|
|
90
|
+
value: function componentWillUnmount() {
|
|
91
|
+
if (this.props.showModal) {
|
|
92
|
+
this.resetScroll();
|
|
93
|
+
}
|
|
98
94
|
}
|
|
99
|
-
},
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
95
|
+
}, {
|
|
96
|
+
key: "render",
|
|
97
|
+
value: function render() {
|
|
98
|
+
var _this$props = this.props,
|
|
99
|
+
id = _this$props.id,
|
|
100
|
+
showModal = _this$props.showModal,
|
|
101
|
+
closeModal = _this$props.closeModal,
|
|
102
|
+
children = _this$props.children,
|
|
103
|
+
_this$props$height = _this$props.height,
|
|
104
|
+
height = _this$props$height === void 0 ? 'auto' : _this$props$height,
|
|
105
|
+
_this$props$width = _this$props.width,
|
|
106
|
+
width = _this$props$width === void 0 ? 'auto' : _this$props$width,
|
|
107
|
+
_this$props$overflow = _this$props.overflow,
|
|
108
|
+
overflow = _this$props$overflow === void 0 ? 'visible' : _this$props$overflow,
|
|
109
|
+
padding = _this$props.padding,
|
|
110
|
+
_this$props$minWidth = _this$props.minWidth,
|
|
111
|
+
minWidth = _this$props$minWidth === void 0 ? '' : _this$props$minWidth,
|
|
112
|
+
_this$props$maxWidth = _this$props.maxWidth,
|
|
113
|
+
maxWidth = _this$props$maxWidth === void 0 ? '' : _this$props$maxWidth,
|
|
114
|
+
_this$props$zIndex = _this$props.zIndex,
|
|
115
|
+
zIndex = _this$props$zIndex === void 0 ? parseInt(_styles.Z_INDEXES.modal) : _this$props$zIndex,
|
|
116
|
+
_this$props$shouldClo = _this$props.shouldCloseOnOverlayClick,
|
|
117
|
+
shouldCloseOnOverlayClick = _this$props$shouldClo === void 0 ? true : _this$props$shouldClo;
|
|
119
118
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
}
|
|
147
|
-
|
|
119
|
+
// should be at least z-index of modal and below z-index of toast
|
|
120
|
+
var zIndexValue = Math.min(Math.max(zIndex, +_styles.Z_INDEXES.modal), +_styles.Z_INDEXES.toast - 1);
|
|
121
|
+
var stylesConfiguration = Object.assign(_objectSpread({}, ModalContainerStyles.content), {
|
|
122
|
+
height: height,
|
|
123
|
+
width: width,
|
|
124
|
+
padding: padding,
|
|
125
|
+
overflow: overflow,
|
|
126
|
+
minWidth: minWidth,
|
|
127
|
+
maxWidth: maxWidth,
|
|
128
|
+
zIndex: zIndexValue
|
|
129
|
+
});
|
|
130
|
+
var styles = {
|
|
131
|
+
content: stylesConfiguration
|
|
132
|
+
};
|
|
133
|
+
_reactModal["default"].setAppElement('body');
|
|
134
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactModal["default"], {
|
|
135
|
+
id: id,
|
|
136
|
+
isOpen: showModal,
|
|
137
|
+
closeTimeoutMS: 120,
|
|
138
|
+
onRequestClose: function onRequestClose() {
|
|
139
|
+
return closeModal();
|
|
140
|
+
},
|
|
141
|
+
shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
|
|
142
|
+
style: styles,
|
|
143
|
+
children: children
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
}, {
|
|
147
|
+
key: "preventScroll",
|
|
148
|
+
value: function preventScroll(offset) {
|
|
149
|
+
if (!ModalContainer.openInstances) {
|
|
150
|
+
this.setState({
|
|
151
|
+
scroll: offset
|
|
152
|
+
});
|
|
153
|
+
document.body.style.position = 'fixed';
|
|
154
|
+
document.body.style.left = "0px";
|
|
155
|
+
document.body.style.right = "0px";
|
|
156
|
+
document.body.style.top = "-".concat(offset, "px");
|
|
157
|
+
}
|
|
158
|
+
ModalContainer.openInstances++;
|
|
159
|
+
}
|
|
160
|
+
}, {
|
|
161
|
+
key: "resetScroll",
|
|
162
|
+
value: function resetScroll() {
|
|
163
|
+
ModalContainer.openInstances--;
|
|
164
|
+
if (!ModalContainer.openInstances) {
|
|
165
|
+
//@ts-ignore
|
|
166
|
+
document.body.style.position = null;
|
|
167
|
+
//@ts-ignore
|
|
168
|
+
document.body.style.left = null;
|
|
169
|
+
//@ts-ignore
|
|
170
|
+
document.body.style.top = null;
|
|
171
|
+
//@ts-ignore
|
|
172
|
+
document.body.style.right = null;
|
|
173
|
+
this.state.scroll && window.scrollTo(0, this.state.scroll);
|
|
174
|
+
this.setState({
|
|
175
|
+
scroll: 0
|
|
176
|
+
});
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}]);
|
|
180
|
+
return ModalContainer;
|
|
181
|
+
}(React.Component);
|
|
182
|
+
(0, _defineProperty2["default"])(ModalContainer, "propTypes", {
|
|
148
183
|
id: _propTypes["default"].string,
|
|
149
184
|
showModal: _propTypes["default"].bool.isRequired,
|
|
150
185
|
closeModal: _propTypes["default"].func.isRequired,
|
|
@@ -157,7 +192,8 @@ ModalContainer.propTypes = {
|
|
|
157
192
|
maxWidth: _propTypes["default"].string,
|
|
158
193
|
zIndex: _propTypes["default"].number,
|
|
159
194
|
shouldCloseOnOverlayClick: _propTypes["default"].bool
|
|
160
|
-
};
|
|
195
|
+
});
|
|
196
|
+
(0, _defineProperty2["default"])(ModalContainer, "openInstances", 0);
|
|
161
197
|
var _default = ModalContainer;
|
|
162
198
|
exports["default"] = _default;
|
|
163
199
|
//# sourceMappingURL=ModalContainer.cjs.map
|
|
@@ -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","_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","_props$shouldCloseOnO","shouldCloseOnOverlayClick","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';\nimport ReactModal from 'react-modal';\nimport {BOXSHADOWS} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport styled, {keyframes} from 'styled-components';\n\nconst ModalContainerStyles = {\n content: {\n top: 'auto',\n left: 'auto',\n right: 'auto',\n bottom: 'auto',\n marginRight: '-50%',\n width: '640px',\n height: '320px',\n borderRadius: '8px',\n boxSizing: 'border-box' as any,\n margin: 0,\n overflow: 'auto',\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n\n@keyframes modalOpenAnimation {\n from{\n transform: scale(1.1, 1.1);\n }\n to {\n transform: scale(1, 1);\n }\n}\n\n.ReactModal__Overlay {\n opacity: 0;\n z-index: ${Z_INDEXES.backdrop};\n display:flex;\n justify-content: center;\n align-items: center;\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n z-index: ${Z_INDEXES.modal};\n opacity:0;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n animation: modalOpenAnimation 150ms ease-in-out;\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n opacity: 0;\n transform: scale(1.1, 1.1);\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\n\ntype ModalContainerProps = {\n id?: string;\n showModal: boolean;\n closeModal: () => void;\n children: any;\n height?: any;\n width?: any;\n overflow?: string;\n padding?: string;\n minWidth?: string;\n maxWidth?: string;\n zIndex?: number;\n shouldCloseOnOverlayClick?: boolean;\n};\n\nconst Counter = { openInstances : 0};\nconst ModalContainer: React.FC<ModalContainerProps> = (props: ModalContainerProps) => {\n\n const [scroll, setScroll] = React.useState<number>();\n const [wasOpened, setWasOpened] = React.useState<boolean>(false);\n \n const preventScroll = (offset: number) => {\n Counter.openInstances++;\n setWasOpened(true);\n if (document) {\n setScroll(offset);\n document.body.style.position = 'fixed';\n document.body.style.left = `0px`;\n document.body.style.right = `0px`;\n document.body.style.top = `-${offset}px`;\n }\n }\n\n const resetScroll = () => {\n Counter.openInstances--;\n if (!Counter.openInstances && document) {\n //@ts-ignore\n document.body.style.position = null;\n //@ts-ignore\n document.body.style.left = null;\n //@ts-ignore\n document.body.style.top = null;\n //@ts-ignore\n document.body.style.right = null;\n scroll && window.scrollTo(0, scroll);\n setScroll(0);\n }\n }\n\n React.useEffect(() => {\n window && setScroll(window.scrollY);\n });\n\n React.useEffect(() => {\n //modal was opened\n window && !props.showModal && wasOpened && resetScroll();\n //modal was closed\n window && props.showModal && preventScroll(window.scrollY);\n }, [props.showModal]);\n\n\n React.useEffect(() => {\n if (ReactModal.defaultStyles.overlay) {\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n }\n\n //append style node to override modal transition classes\n if (document && !document.querySelector('[modal-custom-styling=\"active\"]')) {\n const head = document.head || document.getElementsByTagName('head')[0];\n const style = document.createElement('style');\n style.setAttribute('modal-custom-styling', 'active');\n head.appendChild(style);\n style.appendChild(document.createTextNode(modalTransitions));\n }\n \n }, []);\n\n const {\n id,\n showModal,\n closeModal,\n children,\n height = 'auto',\n width = 'auto',\n overflow = 'visible',\n padding,\n minWidth = '',\n maxWidth = '',\n zIndex = parseInt(Z_INDEXES.modal),\n shouldCloseOnOverlayClick = true\n } = props;\n\n // should be at least z-index of modal and below z-index of toast\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\n height,\n width,\n padding,\n overflow,\n minWidth,\n maxWidth,\n zIndex: zIndexValue\n });\n const styles = {content: stylesConfiguration};\n ReactModal.setAppElement('body');\n return (\n <ReactModal id={id}\n isOpen={showModal}\n closeTimeoutMS={120}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n onRequestClose={() => closeModal()}\n style={styles}>\n {children}\n </ReactModal>\n );\n}\n\nexport default ModalContainer;\n"],"mappings":"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","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","_createSuper","_isNativeReflectConstruct","_getPrototypeOf2","s","constructor","Reflect","construct","_possibleConstructorReturn2","Boolean","prototype","valueOf","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","concat","Z_INDEXES","backdrop","modal","ModalContainer","_React$Component","_inherits2","_super","_classCallCheck2","_createClass2","key","value","componentDidMount","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","getSnapshotBeforeUpdate","prevProps","prevState","scroll","componentDidUpdate","snapshot","resetScroll","componentWillUnmount","render","_this$props","id","closeModal","children","_this$props$height","_this$props$width","_this$props$overflow","padding","_this$props$minWidth","minWidth","_this$props$maxWidth","maxWidth","_this$props$zIndex","zIndex","parseInt","_this$props$shouldClo","shouldCloseOnOverlayClick","zIndexValue","Math","min","max","toast","stylesConfiguration","assign","styles","setAppElement","jsx","isOpen","closeTimeoutMS","onRequestClose","offset","openInstances","setState","body","position","state","scrollTo","Component","_propTypes","string","bool","isRequired","func","any","number","_default","exports"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport {BOXSHADOWS} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport styled, {keyframes} from 'styled-components';\n\nconst ModalContainerStyles = {\n content: {\n top: 'auto',\n left: 'auto',\n right: 'auto',\n bottom: 'auto',\n marginRight: '-50%',\n width: '640px',\n height: '320px',\n borderRadius: '8px',\n boxSizing: 'border-box' as any,\n margin: 0,\n overflow: 'auto',\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n\n@keyframes modalOpenAnimation {\n from{\n transform: scale(1.1, 1.1);\n }\n to {\n transform: scale(1, 1);\n }\n}\n\n.ReactModal__Overlay {\n opacity: 0;\n z-index: ${Z_INDEXES.backdrop};\n display:flex;\n justify-content: center;\n align-items: center;\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n z-index: ${Z_INDEXES.modal};\n opacity:0;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n animation: modalOpenAnimation 150ms ease-in-out;\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n opacity: 0;\n transform: scale(1.1, 1.1);\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\n\ntype ModalContainerProps = {\n id?: string;\n showModal: boolean;\n closeModal: () => void;\n children: any;\n height?: any;\n width?: any;\n overflow?: string;\n padding?: string;\n minWidth?: string;\n maxWidth?: string;\n zIndex?: number;\n shouldCloseOnOverlayClick?: boolean;\n};\n\ntype ModalContainerState = {\n scroll: number;\n};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n private static openInstances = 0;\n\n componentDidMount() {\n if (ReactModal.defaultStyles.overlay) {\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n }\n\n //append style node to override modal transition classes\n if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n const head = document.head || document.getElementsByTagName('head')[0];\n const style = document.createElement('style');\n style.setAttribute('modal-custom-styling', 'active');\n head.appendChild(style);\n style.appendChild(document.createTextNode(modalTransitions));\n }\n\n if (this.props.showModal) {\n this.preventScroll(window.scrollY);\n }\n }\n\n getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\n return {scroll: window.scrollY};\n }\n\n componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\n if (this.props.showModal && !prevProps.showModal) {\n this.preventScroll(snapshot!.scroll);\n }\n if (!this.props.showModal && prevProps.showModal) {\n this.resetScroll();\n }\n }\n\n componentWillUnmount() {\n if (this.props.showModal) {\n this.resetScroll();\n }\n }\n\n render() {\n const {\n id,\n showModal,\n closeModal,\n children,\n height = 'auto',\n width = 'auto',\n overflow = 'visible',\n padding,\n minWidth = '',\n maxWidth = '',\n zIndex = parseInt(Z_INDEXES.modal),\n shouldCloseOnOverlayClick = true\n } = this.props;\n\n // should be at least z-index of modal and below z-index of toast\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\n height,\n width,\n padding,\n overflow,\n minWidth,\n maxWidth,\n zIndex: zIndexValue\n });\n const styles = {content: stylesConfiguration};\n\n ReactModal.setAppElement('body');\n return (\n <ReactModal id={id}\n isOpen={showModal}\n closeTimeoutMS={120}\n onRequestClose={() => closeModal()}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n style={styles}>\n {children}\n </ReactModal>\n );\n }\n\n private preventScroll(offset: number) {\n if (!ModalContainer.openInstances) {\n this.setState({scroll: offset});\n document.body.style.position = 'fixed';\n document.body.style.left = `0px`;\n document.body.style.right = `0px`;\n document.body.style.top = `-${offset}px`;\n }\n ModalContainer.openInstances++\n }\n\n private resetScroll() {\n ModalContainer.openInstances--;\n if (!ModalContainer.openInstances) {\n //@ts-ignore\n document.body.style.position = null;\n //@ts-ignore\n document.body.style.left = null;\n //@ts-ignore\n document.body.style.top = null;\n //@ts-ignore\n document.body.style.right = null;\n this.state.scroll && window.scrollTo(0, this.state.scroll);\n this.setState({scroll: 0});\n }\n }\n}\n\nexport default ModalContainer;"],"mappings":"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","ignoreList":[]}
|
|
@@ -13,5 +13,21 @@ type ModalContainerProps = {
|
|
|
13
13
|
zIndex?: number;
|
|
14
14
|
shouldCloseOnOverlayClick?: boolean;
|
|
15
15
|
};
|
|
16
|
-
|
|
16
|
+
type ModalContainerState = {
|
|
17
|
+
scroll: number;
|
|
18
|
+
};
|
|
19
|
+
declare class ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {
|
|
20
|
+
private static openInstances;
|
|
21
|
+
componentDidMount(): void;
|
|
22
|
+
getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): {
|
|
23
|
+
scroll: number;
|
|
24
|
+
};
|
|
25
|
+
componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: {
|
|
26
|
+
scroll: number;
|
|
27
|
+
}): void;
|
|
28
|
+
componentWillUnmount(): void;
|
|
29
|
+
render(): React.JSX.Element;
|
|
30
|
+
private preventScroll;
|
|
31
|
+
private resetScroll;
|
|
32
|
+
}
|
|
17
33
|
export default ModalContainer;
|