npm - @laerdal/life-react-components - Versions diffs - 1.2.2-dev.5.full → 1.2.2-dev.8 - Mend

@laerdal/life-react-components 1.2.2-dev.5.full → 1.2.2-dev.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.

Files changed (131) hide show

package/dist/umd/InputFields/PasswordField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","StyledPassSwitch","styled","div","BREAKPOINTS","MEDIUM","PasswordRow","PasswordField","React","inputRef","handleKeyDown","e","setPasswordHidden","setTabbedHere","display","passwordHidden"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { InputFieldStyling, InputWrapper } from './styling';\n\ntype PasswordFieldProps = {\n id: string;\n disabled?: boolean;\n locked?: boolean;\n onChange?: (text: string) => void;\n hasError?: boolean;\n value?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n readOnly?: boolean;\n size?: 'small' \| 'medium';\n margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n float: right;\n margin-left: -40px;\n margin-top: 8px;\n position: relative;\n z-index: 2;\n height: 30px;\n width: 30px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin-top: 12px;\n }\n\n &.small {\n margin-top: 8px;\n }\n\n &.medium {\n margin-top: 12px;\n }\n\n svg {\n cursor: pointer;\n }\n div {\n &:focus {\n outline: none;\n svg {\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n border-radius: 4px;\n }\n }\n }\n`;\n\nconst PasswordRow = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n const inputRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const handleKeyDown = (e: any) => {\n if (e.keyCode === 13) {\n setPasswordHidden(!passwordHidden);\n }\n };\n return (\n <>\n <InputWrapper\n disabled={disabled}\n locked={locked}\n margin={margin}\n tabIndex={disabled ? -1 : 0}\n onFocus={(e: any) => {\n if (!e?.target?.id.includes(id) && !disabled && !locked) {\n setTabbedHere(true);\n inputRef.current.focus();\n }\n }}>\n <div style={{ display: 'block' }}>\n <PasswordRow>\n <InputFieldStyling\n id={id}\n ref={inputRef}\n type={passwordHidden ? 'password' : 'text'}\n name=\"password\"\n value={value}\n className={(hasError ? 'error' : '').concat(size ? size : '')}\n tabIndex={-1}\n autoComplete={autoComplete}\n placeholder={placeholder}\n disabled={disabled}\n locked={locked}\n required={required}\n readOnly={readOnly}\n onChange={(e: any) => onChange && onChange(e?.target?.value \|\| '')}\n tabbedHere={tabbedHere}\n onBlur={() => setTabbedHere(false)}\n />\n <StyledPassSwitch className={size ? size : ''}>\n {!disabled && !locked ? (\n passwordHidden ? (\n <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n fill=\"#666666\"></path>\n </svg>\n </div>\n ) : (\n <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n fill=\"#666666\"\n />\n <path\n d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n fill=\"#666666\"\n />\n </svg>\n </div>\n )\n ) : null}\n </StyledPassSwitch>\n </PasswordRow>\n </div>\n </InputWrapper>\n {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n </>\n );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}
1	+ {"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","StyledPassSwitch","styled","div","BREAKPOINTS","MEDIUM","PasswordRow","PasswordField","React","inputRef","handleKeyDown","e","setPasswordHidden","setTabbedHere","display","passwordHidden"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { InputFieldStyling, InputWrapper } from './styling';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype PasswordFieldProps = {\n id: string;\n disabled?: boolean;\n locked?: boolean;\n onChange?: (text: string) => void;\n hasError?: boolean;\n value?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n readOnly?: boolean;\n size?: 'small' \| 'medium';\n margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n float: right;\n margin-left: -40px;\n margin-top: 8px;\n position: relative;\n z-index: 1;\n height: 30px;\n width: 30px;\n\n ${BREAKPOINTS.MEDIUM} {\n margin-top: 12px;\n }\n\n &.small {\n margin-top: 8px;\n }\n\n &.medium {\n margin-top: 12px;\n }\n\n svg {\n cursor: pointer;\n }\n div {\n &:focus {\n outline: none;\n svg {\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n border-radius: 4px;\n }\n }\n }\n`;\n\nconst PasswordRow = styled.div`\n display: flex;\n flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n const inputRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const handleKeyDown = (e: any) => {\n if (e.keyCode === 13) {\n setPasswordHidden(!passwordHidden);\n }\n };\n return (\n <>\n <InputWrapper\n disabled={disabled}\n locked={locked}\n margin={margin}\n tabIndex={disabled ? -1 : 0}\n onFocus={(e: any) => {\n if (!e?.target?.id.includes(id) && !disabled && !locked) {\n setTabbedHere(true);\n inputRef.current.focus();\n }\n }}>\n <div style={{ display: 'block' }}>\n <PasswordRow>\n <InputFieldStyling\n id={id}\n ref={inputRef}\n type={passwordHidden ? 'password' : 'text'}\n name=\"password\"\n value={value}\n className={(hasError ? 'error' : '').concat(size ? size : '')}\n tabIndex={-1}\n autoComplete={autoComplete}\n placeholder={placeholder}\n disabled={disabled}\n locked={locked}\n required={required}\n readOnly={readOnly}\n onChange={(e: any) => onChange && onChange(e?.target?.value \|\| '')}\n tabbedHere={tabbedHere}\n onBlur={() => setTabbedHere(false)}\n />\n <StyledPassSwitch className={size ? size : ''}>\n {!disabled && !locked ? (\n passwordHidden ? (\n <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n fill=\"#666666\"></path>\n </svg>\n </div>\n ) : (\n <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n fill=\"#666666\"\n />\n <path\n d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n fill=\"#666666\"\n />\n </svg>\n </div>\n )\n ) : null}\n </StyledPassSwitch>\n </PasswordRow>\n </div>\n </InputWrapper>\n {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n </>\n );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}

package/dist/umd/List/ListRow.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../styles", "../styles/typography", "../Tooltips", "../Dropdown", "../icons", "../types"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../styles/typography", "../Tooltips", "../Dropdown", "../icons", "../types", "../styles/z-indexes"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../styles/typography"), require("../Tooltips"), require("../Dropdown"), require("../icons"), require("../types"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../styles/typography"), require("../Tooltips"), require("../Dropdown"), require("../icons"), require("../types"), require("../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.typography, global.Tooltips, global.Dropdown, global.icons, global.types);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.typography, global.Tooltips, global.Dropdown, global.icons, global.types, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _typography, _Tooltips, _Dropdown, _icons, _types) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _typography, _Tooltips, _Dropdown, _icons, _types, _zIndexes) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -123,18 +123,20 @@
   &.interactive:hover:not(.in-action):not(.disabled) {
     background-color: ${_styles.COLORS.primary_20};
     color: ${_styles.COLORS.primary_700};
+    z-index: ${_zIndexes.Z_INDEXES.hover};
   }
   &.interactive:active:not(.in-action):not(.disabled) {
     background-color: ${_styles.COLORS.primary_100};
     color: ${_styles.COLORS.primary_800};
     box-shadow: none;
+    z-index: ${_zIndexes.Z_INDEXES.active};
   }
   &.interactive:focus {
     outline: none;
     box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
-    z-index: 1;
+    z-index: ${_zIndexes.Z_INDEXES.focus};
   }
   &.disabled {

package/dist/umd/List/ListRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","primary_100","primary_800","neutral_300","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","ComponentXXSStyling","ComponentXSStyling","variant","icon","mainText","secondaryText","note","noteTooltip","disabled","action","ListRow","size","Size","React","handleKeyPress","e","rowClassName","inAction","setInAction","dropdown"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,QAAMA,GAAG,GAAGC,2BAAOC,GAAI;AACvB;AACA;AACA;AACA;AACA,6BAA6BC,eAAOC,WAAY;AAChD;AACA;AACA;AACA,WAAWD,eAAOE,WAAY;AAC9B,sBAAsBF,eAAOG,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBH,eAAOI,UAAW;AAC1C,aAAaJ,eAAOK,WAAY;AAChC;AACA;AACA;AACA,wBAAwBL,eAAOM,WAAY;AAC3C,aAAaN,eAAOO,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeP,eAAOQ,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBC,2BAAD,OAAjBD,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQE,mCAAkBD,2BAAD,OAAjBC,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBF,2BAAD,OAAjBE,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,qCAAoBH,2BAAD,OAAnBG,EAAmB,IAAnBA,CAAsD;AAC5D;AACA;AACA;AACA,aAAab,eAAOE,WAAY;AAChC;AACA,MAAMY,oCAAmBJ,2BAAD,OAAlBI,EAAkB,IAAlBA,C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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\n\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles/typography';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\n\nconst Row = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-bottom: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n position: relative;\n\n color: ${COLORS.neutral_600};\n background-color: ${COLORS.white};\n\n\n cursor: default;\n\n &.interactive {\n cursor: pointer;\n }\n\n &.interactive.disabled {\n cursor: not-allowed;\n }\n\n &.interactive:hover:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &.interactive:active:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n\n &.interactive:focus {\n outline: none;\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n z-index: 1;\n }\n\n &.disabled {\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n color: ${COLORS.neutral_300};\n }\n }\n\n\n &.small {\n min-height: 48px;\n padding: 0 8px;\n\n .list-item-icon {\n margin-right: 8px;\n }\n\n .list-item-main-text {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -8px;\n }\n }\n\n &.medium {\n min-height: 56px;\n padding: 0 12px;\n\n .list-item-icon {\n margin-right: 12px;\n }\n\n .list-item-main-text {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -12px;\n }\n }\n\n &.large {\n min-height: 64px;\n padding: 0 16px;\n\n .list-item-icon {\n margin-right: 16px;\n }\n\n .list-item-main-text {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -16px;\n }\n }\n\n &.overlay {\n padding: 0 4px;\n\n .list-item-actions {\n margin-right: -4px;\n }\n }\n\n .list-item-icon {\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .list-item-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .list-item-main-text {\n }\n\n .list-item-secondary-text {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note {\n color: ${COLORS.neutral_600};\n word-break: initial;\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note.with-tooltip {\n cursor: pointer;\n\n > div {\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 1px;\n text-decoration-thickness: 1px;\n }\n }\n\n .list-item-actions {\n color: ${COLORS.neutral_600};\n display: flex;\n align-items: center;\n\n button div {\n background-color: transparent;\n }\n }\n`;\n\n\ntype Props = {\n size?: Size;\n variant?: 'normal' \| 'overlay';\n icon?: React.ReactNode;\n mainText: string;\n secondaryText?: string;\n dropdown?: Pick<DropdownButtonProps, 'items' \| 'onClick' \| 'disabled' \| 'width'>;\n note?: string;\n noteTooltip?: string;\n disabled?: boolean;\n action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n size = Size.Medium,\n variant = 'normal',\n icon,\n mainText,\n secondaryText,\n dropdown,\n note,\n noteTooltip,\n disabled = false,\n action\n }: Props) => {\n\n const [inAction, setInAction] = React.useState<Boolean>(false);\n\n const handleKeyPress = (e: any) => {\n if (e.key === 'Enter') {\n action && action()\n }\n }\n\n const rowClassName = (inAction ? 'in-action ' : '')\n .concat(disabled ? 'disabled ' : '')\n .concat(!!action ? 'interactive ' : '')\n .concat('list-item-row ')\n .concat(`${variant} `)\n .concat(`${size}`);\n\n return (\n <Row tabIndex={!!action && !disabled ? 0 : undefined}\n className={rowClassName}\n onKeyPress={(e) => !disabled && handleKeyPress(e)}\n onClick={e => {\n !disabled && action && action();\n }}\n data-hj-suppress>\n {\n !!icon &&\n <div className={'list-item-icon'}>{icon}</div>\n }\n <div className={'list-item-content'}>\n <div className={'list-item-main-text'}>{mainText}</div>\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n </div>\n {\n !!note &&\n <>\n {\n !!noteTooltip &&\n <div className={'list-item-note with-tooltip'}>\n <TooltipWrapper label={noteTooltip}\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n position={'top'}\n withArrow={true}>\n {note}\n </TooltipWrapper>\n </div>\n }\n {\n !noteTooltip &&\n <div className={'list-item-note'}>\n {note}\n </div>\n }\n </>\n }\n {\n !!dropdown &&\n <div className={'list-item-actions'}\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\n onMouseLeave={() => setInAction(false)}>\n <DropdownButton {...dropdown}\n disabled={disabled \|\| dropdown.disabled}\n icon={variant === 'overlay'\n ? <SystemIcons.ArrowDropDown/>\n : <SystemIcons.MoreVertical/>}\n />\n </div>\n }\n </Row>\n );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}
1	+ {"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focus","neutral_300","ComponentSStyling","ComponentTextStyle","ComponentMStyling","ComponentLStyling","ComponentXXSStyling","ComponentXSStyling","variant","icon","mainText","secondaryText","note","noteTooltip","disabled","action","ListRow","size","Size","React","handleKeyPress","e","rowClassName","inAction","setInAction","dropdown"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,QAAMA,GAAG,GAAGC,2BAAOC,GAAI;AACvB;AACA;AACA;AACA;AACA,6BAA6BC,eAAOC,WAAY;AAChD;AACA;AACA;AACA,WAAWD,eAAOE,WAAY;AAC9B,sBAAsBF,eAAOG,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBH,eAAOI,UAAW;AAC1C,aAAaJ,eAAOK,WAAY;AAChC,eAAeC,oBAAUC,KAAM;AAC/B;AACA;AACA;AACA,wBAAwBP,eAAOQ,WAAY;AAC3C,aAAaR,eAAOS,WAAY;AAChC;AACA,eAAeH,oBAAUI,MAAO;AAChC;AACA;AACA;AACA;AACA;AACA,eAAeJ,oBAAUK,KAAM;AAC/B;AACA;AACA;AACA;AACA,eAAeX,eAAOY,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBC,2BAAD,OAAjBD,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQE,mCAAkBD,2BAAD,OAAjBC,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQC,mCAAkBF,2BAAD,OAAjBE,EAAiB,IAAjBA,CAAoD;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,qCAAoBH,2BAAD,OAAnBG,EAAmB,IAAnBA,CAAsD;AAC5D;AACA;AACA;AACA,aA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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\n\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles/typography';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Row = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-bottom: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n position: relative;\n\n color: ${COLORS.neutral_600};\n background-color: ${COLORS.white};\n\n\n cursor: default;\n\n &.interactive {\n cursor: pointer;\n }\n\n &.interactive.disabled {\n cursor: not-allowed;\n }\n\n &.interactive:hover:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &.interactive:active:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n }\n\n &.interactive:focus {\n outline: none;\n box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n z-index: ${Z_INDEXES.focus};\n }\n\n &.disabled {\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n color: ${COLORS.neutral_300};\n }\n }\n\n\n &.small {\n min-height: 48px;\n padding: 0 8px;\n\n .list-item-icon {\n margin-right: 8px;\n }\n\n .list-item-main-text {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -8px;\n }\n }\n\n &.medium {\n min-height: 56px;\n padding: 0 12px;\n\n .list-item-icon {\n margin-right: 12px;\n }\n\n .list-item-main-text {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -12px;\n }\n }\n\n &.large {\n min-height: 64px;\n padding: 0 16px;\n\n .list-item-icon {\n margin-right: 16px;\n }\n\n .list-item-main-text {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -16px;\n }\n }\n\n &.overlay {\n padding: 0 4px;\n\n .list-item-actions {\n margin-right: -4px;\n }\n }\n\n .list-item-icon {\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .list-item-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .list-item-main-text {\n }\n\n .list-item-secondary-text {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note {\n color: ${COLORS.neutral_600};\n word-break: initial;\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note.with-tooltip {\n cursor: pointer;\n\n > div {\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 1px;\n text-decoration-thickness: 1px;\n }\n }\n\n .list-item-actions {\n color: ${COLORS.neutral_600};\n display: flex;\n align-items: center;\n\n button div {\n background-color: transparent;\n }\n }\n`;\n\n\ntype Props = {\n size?: Size;\n variant?: 'normal' \| 'overlay';\n icon?: React.ReactNode;\n mainText: string;\n secondaryText?: string;\n dropdown?: Pick<DropdownButtonProps, 'items' \| 'onClick' \| 'disabled' \| 'width'>;\n note?: string;\n noteTooltip?: string;\n disabled?: boolean;\n action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n size = Size.Medium,\n variant = 'normal',\n icon,\n mainText,\n secondaryText,\n dropdown,\n note,\n noteTooltip,\n disabled = false,\n action\n }: Props) => {\n\n const [inAction, setInAction] = React.useState<Boolean>(false);\n\n const handleKeyPress = (e: any) => {\n if (e.key === 'Enter') {\n action && action()\n }\n }\n\n const rowClassName = (inAction ? 'in-action ' : '')\n .concat(disabled ? 'disabled ' : '')\n .concat(!!action ? 'interactive ' : '')\n .concat('list-item-row ')\n .concat(`${variant} `)\n .concat(`${size}`);\n\n return (\n <Row tabIndex={!!action && !disabled ? 0 : undefined}\n className={rowClassName}\n onKeyPress={(e) => !disabled && handleKeyPress(e)}\n onClick={e => {\n !disabled && action && action();\n }}\n data-hj-suppress>\n {\n !!icon &&\n <div className={'list-item-icon'}>{icon}</div>\n }\n <div className={'list-item-content'}>\n <div className={'list-item-main-text'}>{mainText}</div>\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n </div>\n {\n !!note &&\n <>\n {\n !!noteTooltip &&\n <div className={'list-item-note with-tooltip'}>\n <TooltipWrapper label={noteTooltip}\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n position={'top'}\n withArrow={true}>\n {note}\n </TooltipWrapper>\n </div>\n }\n {\n !noteTooltip &&\n <div className={'list-item-note'}>\n {note}\n </div>\n }\n </>\n }\n {\n !!dropdown &&\n <div className={'list-item-actions'}\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\n onMouseLeave={() => setInAction(false)}>\n <DropdownButton {...dropdown}\n disabled={disabled \|\| dropdown.disabled}\n icon={variant === 'overlay'\n ? <SystemIcons.ArrowDropDown/>\n : <SystemIcons.MoreVertical/>}\n />\n </div>\n }\n </Row>\n );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}

package/dist/umd/Modals/ModalContainer.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "react-modal", "../styles"], factory);
+    define(["exports", "prop-types", "react", "react-modal", "../styles", "../styles/z-indexes"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("react-modal"), require("../styles"));
+    factory(exports, require("prop-types"), require("react"), require("react-modal"), require("../styles"), require("../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.reactModal, global.styles);
+    factory(mod.exports, global.propTypes, global.react, global.reactModal, global.styles, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _reactModal, _styles) {
+})(this, function (exports, _propTypes, _react, _reactModal, _styles, _zIndexes) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -152,7 +152,7 @@
   const modalTransitions = `
 .ReactModal__Overlay {
   opacity: 0;
-  z-index: 100;
+  z-index: ${_zIndexes.Z_INDEXES.backdrop};
 }
 .ReactModal__Overlay--after-open {
@@ -161,6 +161,7 @@
 }
 .ReactModal__Content{
+  z-index: ${_zIndexes.Z_INDEXES.modal};
   opacity:0;
   transform: translate(-50%, -50%) scale(1.1, 1.1);
 }

package/dist/umd/Modals/ModalContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","id","showModal","closeModal","children","modalHeight","modalWidth","modalOverflow","padding","minWidth","maxWidth","ModalContainer","React","componentDidMount","ReactModal","document","head","style","render","sizes","stylesConfiguration","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAIA~~,QAAMA,oBAAoB,GAAG;AAC3BC,IAAAA,OAAO,EAAE;AACPC,MAAAA,GAAG,EADI,KAAA;AAEPC,MAAAA,IAAI,EAFG,KAAA;AAGPC,MAAAA,KAAK,EAHE,MAAA;AAIPC,MAAAA,MAAM,EAJC,MAAA;AAKPC,MAAAA,WAAW,EALJ,MAAA;AAMPC,MAAAA,KAAK,EANE,OAAA;AAOPC,MAAAA,MAAM,EAPC,OAAA;AAQPC,MAAAA,YAAY,EARL,KAAA;AASPC,MAAAA,SAAS,EATF,YAAA;AAUPC,MAAAA,MAAM,EAVC,CAAA;AAWPC,MAAAA,QAAQ,EAXD,MAAA;AAYPC,MAAAA,SAAS,EAAEC,mBAAWC;AAZf;AADkB,GAA7B,C,CAiBA;;AACA,QAAMC,gBAAgB,GAAI;AAC1B;AACA;AACA;~~AACA~~;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;~~AA/BA~~,CAAA;;~~AAiDA~~,QAAA,cAAA,SAA6BY,KAAK,CAAlC,SAAA,CAAuF;AAAA,IAAA,WAAA,CAAA,GAAA,IAAA,EAAA;AAAA,YAAA,GAAA,IAAA;;AAAA,MAAA,eAAA,CAAA,IAAA,EAAA,SAAA,EAgB3E,CAACP,WAAmB,GAApB,MAAA,EAA+BC,UAAkB,GAAjD,MAAA,MAAgE;~~AAAEd~~,QAAAA,MAAM,EAAR,WAAA;AAAuBD,QAAAA,KAAK,~~EAAEe~~;AAA9B,OAAhE,CAhB2E,CAAA;;AAAA,MAAA,eAAA,CAAA,IAAA,EAAA,aAAA,EAiBvE,CAACC,aAAqB,GAAtB,SAAA,KAjBuE,aAAA,CAAA;AAAA;;AACrFM,IAAAA,iBAAiB,GAAG;AAClB,UAAIC,qBAAAA,aAAAA,CAAJ,OAAA,EAAsC;AACpCA,6BAAAA,aAAAA,CAAAA,OAAAA,CAAAA,eAAAA,GAAAA,iBAAAA;AAFgB,OAAA,CAKlB;;;AACA,UAAI,CAACC,QAAQ,CAARA,aAAAA,CAAL,iCAAKA,CAAL,EAAgE;AAC9D,cAAMC,IAAI,GAAGD,QAAQ,CAARA,IAAAA,IAAiBA,QAAQ,CAARA,oBAAAA,CAAAA,MAAAA,EAA9B,CAA8BA,CAA9B;AACA,cAAME,KAAK,GAAGF,QAAQ,CAARA,aAAAA,CAAd,OAAcA,CAAd;AACAE,QAAAA,KAAK,CAALA,YAAAA,CAAAA,sBAAAA,EAAAA,QAAAA;AACAD,QAAAA,IAAI,CAAJA,WAAAA,CAAAA,KAAAA;AACAC,QAAAA,KAAK,CAALA,WAAAA,CAAkBF,QAAQ,CAARA,cAAAA,CAAlBE,gBAAkBF,CAAlBE;AACD;AACF;;AAIDC,IAAAA,MAAM,GAAG;AACP,YAAM;AAAA,QAAA,EAAA;AAAA,QAAA,SAAA;AAAA,QAAA,UAAA;AAAA,QAAA,QAAA;AAAA,QAAA,WAAA;AAAA,QAAA,UAAA;AAAA,QAAA,aAAA;AAAA,QAAA,OAAA;AAAwFT,QAAAA,QAAQ,GAAhG,EAAA;AAAuGC,QAAAA,QAAQ,GAAG;AAAlH,UAAyH,KAA/H,KAAA;AACA,YAAMS,KAAK,GAAG,KAAA,OAAA,CAAA,WAAA,EAAd,UAAc,CAAd;AACA,YAAM;AAAA,QAAA,MAAA;~~AAAU5B~~,QAAAA;AAAV,UAAN,KAAA;AACA,YAAMK,QAAQ,GAAG,KAAA,WAAA,CAAjB,aAAiB,CAAjB;AACA,~~YAAMwB~~,mBAAmB,GAAG,MAAM,CAAN,MAAA,CAAA,aAAA,CAAA,EAAA,~~EAAmBpC~~,oBAAoB,CAAvC,OAAA,CAAA,EAAmD;AAAA,QAAA,MAAA;AAAA,QAAA,KAAA;AAAA,QAAA,OAAA;AAAA,QAAA,QAAA;AAAA,QAAA,QAAA;~~AAA8C0B~~,QAAAA;AAA9C,OAAnD,CAA5B;AACA,YAAMW,MAAM,GAAG;~~AAAEpC~~,QAAAA,OAAO,~~EAAEmC~~;AAAX,OAAf;AAEA,aAAA,aACE,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AAAY,QAAA,EAAE,EAAd,EAAA;AAAoB,QAAA,MAAM,EAA1B,SAAA;AAAuC,QAAA,cAAc,EAArD,GAAA;AAA4D,QAAA,cAAc,EAAE,MAAMjB,UAAlF,EAAA;AAAgG,QAAA,KAAK,EAArG,MAAA;AAA+G,QAAA,UAAU,EAAEY,QAAQ,CAARA,cAAAA,CAAAA,MAAAA,KAAmC;AAA9J,OAAA,EADF,QACE,CADF;AAKD;;AA/BoF;;kBAAjFJ,c;AAdJV,IAAAA,E;AACAC,IAAAA,S;AACAC,IAAAA,U;AACAC,IAAAA,Q;AACAC,IAAAA,W;AACAC,IAAAA,U;AACAC,IAAAA,a;AACAC,IAAAA,O;AACAC,IAAAA,Q;AACAC,IAAAA,Q;;;oBAuCF,c","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\n\nconst ModalContainerStyles = {\n content: {\n top: '50%',\n left: '50%',\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.ReactModal__Overlay {\n opacity: 0;\n z-index: ~~100~~;\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 opacity:0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.0, 1.0);\n transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\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: translate(-50%, -50%) 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\ntype ModalContainerProps = {\n id?: string;\n showModal: boolean;\n closeModal: () => void;\n children: any;\n modalHeight?: any;\n modalWidth?: any;\n modalOverflow?: string;\n padding?: string;\n minWidth?: string;\n maxWidth?: string;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\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\n GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n render() {\n const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\n const sizes = this.GetSize(modalHeight, modalWidth);\n const { height, width } = sizes;\n const overflow = this.GetOverflow(modalOverflow);\n const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\n const styles = { content: stylesConfiguration };\n\n return (\n <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') \|\| ''}>\n {children}\n </ReactModal>\n );\n }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}
1	+ {"version":3,"sources":["../../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","id","showModal","closeModal","children","modalHeight","modalWidth","modalOverflow","padding","minWidth","maxWidth","ModalContainer","React","componentDidMount","ReactModal","document","head","style","render","sizes","stylesConfiguration","styles"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n content: {\n top: '50%',\n left: '50%',\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.ReactModal__Overlay {\n opacity: 0;\n z-index: ${Z_INDEXES.backdrop};\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 transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.0, 1.0);\n transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\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: translate(-50%, -50%) 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\ntype ModalContainerProps = {\n id?: string;\n showModal: boolean;\n closeModal: () => void;\n children: any;\n modalHeight?: any;\n modalWidth?: any;\n modalOverflow?: string;\n padding?: string;\n minWidth?: string;\n maxWidth?: string;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\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\n GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n render() {\n const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\n const sizes = this.GetSize(modalHeight, modalWidth);\n const { height, width } = sizes;\n const overflow = this.GetOverflow(modalOverflow);\n const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\n const styles = { content: stylesConfiguration };\n\n return (\n <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') \|\| ''}>\n {children}\n </ReactModal>\n );\n }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}

package/dist/umd/NavItem/NavItem.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "styled-components", "../styles", "../styles/typography"], factory);
+    define(["exports", "styled-components", "../styles", "../styles/typography", "../styles/z-indexes"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("styled-components"), require("../styles"), require("../styles/typography"));
+    factory(exports, require("styled-components"), require("../styles"), require("../styles/typography"), require("../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.styledComponents, global.styles, global.typography);
+    factory(mod.exports, global.styledComponents, global.styles, global.typography, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _styledComponents, _styles, _typography) {
+})(this, function (exports, _styledComponents, _styles, _typography, _zIndexes) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -49,6 +49,7 @@
   }
   &.active:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.active};
     background-color: ${_styles.COLORS.neutral_20};
     color: ${_styles.COLORS.neutral_800};
     &:after {
@@ -65,6 +66,7 @@
   }
   &:hover:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.hover};
     background-color: ${_styles.COLORS.primary_20};
     color: ${_styles.COLORS.primary_700};
     &:after {
@@ -73,6 +75,7 @@
   }
   &:focus:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.focus};
     box-shadow: 0px 0px 8px ${_styles.COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
     outline: none;
     &:after {

package/dist/umd/NavItem/NavItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/NavItem/NavItem.tsx"],"names":["NavItem","styled","div","ComponentMStyling","ComponentTextStyle","COLORS","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","primary_20","primary_700","primary_500"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAKA~~,QAAMA,OAAO,GAAGC,2BAAOC,GAAI;AAC3B,IAAIC,mCAAkBC,+BAAD,OAAjBD,EAA8CE,eAA7B,WAAjBF,CAAkE;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,~~wBAAwBE~~,~~eAAOC~~,UAAW;AAC1C,~~aAAaD~~,~~eAAOE~~,WAAY;AAChC;AACA,~~0BAA0BF~~,~~eAAOG~~,WAAY;AAC7C;AACA;AACA;AACA;AACA,~~aAAaH~~,~~eAAOI~~,WAAY;AAChC,~~wBAAwBJ~~,~~eAAOK~~,WAAY;AAC3C;AACA,~~0BAA0BL~~,~~eAAOK~~,WAAY;AAC7C;AACA;AACA;AACA;AACA,~~wBAAwBL~~,~~eAAOM~~,UAAW;AAC1C,~~aAAaN~~,~~eAAOO~~,WAAY;AAChC;AACA,~~0BAA0BP~~,~~eAAOG~~,WAAY;AAC7C;AACA;AACA;AACA;AACA,~~8BAA8BH~~,~~eAAOQ~~,WAAY;AACjD;AACA;AACA,~~0BAA0BR~~,~~eAAOG~~,WAAY;AAC7C;AACA;~~AArDA~~,CAAA;~~oBAwDA~~,O","sourcesContent":["import styled from 'styled-components';\n\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\n\nconst NavItem = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n margin: 0;\n padding: 0 21px 0 21px;\n height: 64px;\n\n display: flex;\n align-items: center;\n text-align: center;\n position: relative;\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 3px;\n background-color: transparent;\n }\n\n &.active:not(.disabled) {\n background-color: ${COLORS.neutral_20};\n color: ${COLORS.neutral_800};\n &:after {\n background-color: ${COLORS.primary_600};\n }\n }\n\n &.disabled {\n color: ${COLORS.neutral_300};\n background-color: ${COLORS.neutral_100};\n &:after {\n background-color: ${COLORS.neutral_100};\n }\n }\n\n &:hover:not(.disabled) {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n &:after {\n background-color: ${COLORS.primary_600};\n }\n }\n\n &:focus:not(.disabled) {\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n outline: none;\n &:after {\n background-color: ${COLORS.primary_600};\n }\n }\n`;\n\nexport default NavItem;\n"],"file":"NavItem.js"}
1	+ {"version":3,"sources":["../../../src/NavItem/NavItem.tsx"],"names":["NavItem","styled","div","ComponentMStyling","ComponentTextStyle","COLORS","Z_INDEXES","active","neutral_20","neutral_800","primary_600","neutral_300","neutral_100","hover","primary_20","primary_700","focus","primary_500"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,QAAMA,OAAO,GAAGC,2BAAOC,GAAI;AAC3B,IAAIC,mCAAkBC,+BAAD,OAAjBD,EAA8CE,eAA7B,WAAjBF,CAAkE;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeG,oBAAUC,MAAO;AAChC,wBAAwBF,eAAOG,UAAW;AAC1C,aAAaH,eAAOI,WAAY;AAChC;AACA,0BAA0BJ,eAAOK,WAAY;AAC7C;AACA;AACA;AACA;AACA,aAAaL,eAAOM,WAAY;AAChC,wBAAwBN,eAAOO,WAAY;AAC3C;AACA,0BAA0BP,eAAOO,WAAY;AAC7C;AACA;AACA;AACA;AACA,eAAeN,oBAAUO,KAAM;AAC/B,wBAAwBR,eAAOS,UAAW;AAC1C,aAAaT,eAAOU,WAAY;AAChC;AACA,0BAA0BV,eAAOK,WAAY;AAC7C;AACA;AACA;AACA;AACA,eAAeJ,oBAAUU,KAAM;AAC/B,8BAA8BX,eAAOY,WAAY;AACjD;AACA;AACA,0BAA0BZ,eAAOK,WAAY;AAC7C;AACA;AAxDA,CAAA;oBA2DA,O","sourcesContent":["import styled from 'styled-components';\n\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst NavItem = styled.div`\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n margin: 0;\n padding: 0 21px 0 21px;\n height: 64px;\n\n display: flex;\n align-items: center;\n text-align: center;\n position: relative;\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 3px;\n background-color: transparent;\n }\n\n &.active:not(.disabled) {\n z-index: ${Z_INDEXES.active};\n background-color: ${COLORS.neutral_20};\n color: ${COLORS.neutral_800};\n &:after {\n background-color: ${COLORS.primary_600};\n }\n }\n\n &.disabled {\n color: ${COLORS.neutral_300};\n background-color: ${COLORS.neutral_100};\n &:after {\n background-color: ${COLORS.neutral_100};\n }\n }\n\n &:hover:not(.disabled) {\n z-index: ${Z_INDEXES.hover};\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n &:after {\n background-color: ${COLORS.primary_600};\n }\n }\n\n &:focus:not(.disabled) {\n z-index: ${Z_INDEXES.focus};\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n outline: none;\n &:after {\n background-color: ${COLORS.primary_600};\n }\n }\n`;\n\nexport default NavItem;\n"],"file":"NavItem.js"}

package/dist/umd/Paginator/Paginator.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "react-router-dom", "../styles", "../icons/systemicons/SystemIcons", "../styles/typography"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "react-router-dom", "../styles", "../icons/systemicons/SystemIcons", "../styles/typography", "../styles/z-indexes"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("react-router-dom"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../styles/typography"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("react-router-dom"), require("../styles"), require("../icons/systemicons/SystemIcons"), require("../styles/typography"), require("../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.reactRouterDom, global.styles, global.SystemIcons, global.typography);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.reactRouterDom, global.styles, global.SystemIcons, global.typography, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _reactRouterDom, _styles, _SystemIcons, _typography) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _reactRouterDom, _styles, _SystemIcons, _typography, _zIndexes) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -114,23 +114,27 @@
     &:focus,
     &:focus-within {
+      z-index: ${_zIndexes.Z_INDEXES.focus};
       box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
       outline-width: 0;
     }
   }
   & > a:hover {
+    z-index: ${_zIndexes.Z_INDEXES.hover};
     color: ${_styles.COLORS.primary_800};
     background-color: ${_styles.COLORS.primary_20};
     box-shadow: none;
   }
   & > a:active {
+    z-index: ${_zIndexes.Z_INDEXES.active};
     color: ${_styles.COLORS.primary_700};
     background-color: ${_styles.COLORS.primary_100};
     box-shadow: none;
   }
   & > a.active {
+    z-index: ${_zIndexes.Z_INDEXES.active};
     color: ${_styles.COLORS.neutral_800};
     background-color: ${_styles.COLORS.neutral_20};
     cursor: default;

package/dist/umd/Paginator/Paginator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/Paginator/Paginator.tsx"],"names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentMStyling","ComponentTextStyle","COLORS","primary_800","primary_20","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","ItemSelected","primary_500","pageCount","currentPage","baseUrl","onPageChange","Step","up","target","disabled","testId","cursor","neutral_300","Paginator","pages","from","to","i","item","neutral_600","page"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronLeft, ChevronRight, MoreHorizontal} from '../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst Container = styled.nav`\n margin: 20px 0;\n display: flex;\n justify-content: center;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 75%;\n }\n`;\n\nconst Items = styled.ul`\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n`;\n\nconst Item = styled.li`\n width: 48px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-decoration: none;\n border-bottom: 3px solid transparent;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n &:focus,\n &:focus-within {\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline-width: 0;\n }\n }\n\n & > a:hover {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n box-shadow: none;\n }\n & > a:active {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n box-shadow: none;\n }\n\n & > a.active {\n color: ${COLORS.neutral_800};\n background-color: ${COLORS.neutral_20};\n cursor: default;\n box-shadow: none;\n &:hover {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n &:active {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n }\n`;\n\nconst Dots = styled(Item)`\n padding-top: 1%;\n cursor: not-allowed;\n`;\n\nconst ItemContent = styled('div')`\n width: 100%;\n text-align:center;\n display: table-cell;\n vertical-align:middle;\n`\nconst ItemSelected = styled('div')`\n justify-content: center;\n margin: 0 20%;\n border-radius: 4px;\n text-align: center;\n height: 4px;\n background-color: ${COLORS.primary_500}\n`\n\ntype PaginatorProps = {\n pageCount: number;\n currentPage: number;\n baseUrl: string;\n onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n up = true,\n target = '',\n disabled = false,\n page,\n onPageChange,\n testId,\n}: {\n up: boolean;\n target: string;\n disabled: boolean;\n page: number;\n onPageChange?: (page: number) => void;\n testId?: string;\n}) => {\n if (disabled)\n return (\n <Item style={{ cursor: 'not-allowed' }} data-testid={`${testId}_Disabled`}>\n {up ? <ChevronRight size=\"20\" color={COLORS.neutral_300} /> : <ChevronLeft size=\"20\" color={COLORS.neutral_300} />}\n </Item>\n );\n return (\n <Item data-testid={`${testId}_Enabled`}>\n <NavLink\n to={target}\n onClick={() => {\n if (onPageChange) onPageChange(page);\n }}>\n {up ? <ChevronRight size=\"20\" /> : <ChevronLeft />}\n </NavLink>\n </Item>\n );\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n const pages = [];\n let from = 2;\n let to = 4;\n if (pageCount === 0) return null;\n\n if (pageCount > 1) {\n if (currentPage >= 4 && currentPage <= pageCount - 2) {\n from = currentPage - 1;\n to = currentPage + 1;\n } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n from = pageCount - 3;\n to = pageCount - 1;\n }\n if (to > pageCount) {\n to = pageCount;\n }\n for (let i = from; i <= to; i += 1) {\n pages.push(i);\n }\n }\n\n return (\n <Container>\n <Items>\n <Step\n up={false}\n target={`${baseUrl}/${currentPage - 1}`}\n page={currentPage - 1}\n disabled={currentPage === 1}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage - 1);\n }}\n testId=\"Test-StepLeft\"\n />\n {pages.findIndex(item => item === 1) === -1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/1`}\n onClick={() => {\n if (onPageChange) onPageChange(1);\n }}>\n <ItemContent>\n <span>1</span>\n {currentPage === 1 && <ItemSelected />}\n </ItemContent>\n </NavLink>\n </Item>\n )}\n {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n <Dots>\n <MoreHorizontal color={COLORS.neutral_600} />\n </Dots>\n )}\n {pages.map(page => (\n <Item key={page}>\n <NavLink\n to={`${baseUrl}/${page}`}\n onClick={() => {\n if (onPageChange) onPageChange(page);\n }}>\n <ItemContent>\n <span>{page}</span>\n {currentPage === page && <ItemSelected />}\n </ItemContent>\n </NavLink>\n </Item>\n ))}\n {pageCount > 5 && currentPage <= pageCount - 3 && (\n <Dots>\n <MoreHorizontal color={COLORS.neutral_600} />\n </Dots>\n )}\n {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/${pageCount}`}\n onClick={() => {\n if (onPageChange) onPageChange(pageCount);\n }}>\n <ItemContent>\n <span>{pageCount}</span>\n {currentPage === pageCount && <ItemSelected />}\n </ItemContent>\n </NavLink>\n </Item>\n )}\n <Step\n up\n target={`${baseUrl}/${currentPage + 1}`}\n page={currentPage + 1}\n disabled={currentPage === pageCount}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage + 1);\n }}\n testId=\"Test-StepRight\"\n />\n </Items>\n </Container>\n );\n};\n\nexport default Paginator;\n"],"file":"Paginator.js"}
1	+ {"version":3,"sources":["../../../src/Paginator/Paginator.tsx"],"names":["Container","styled","nav","BREAKPOINTS","MEDIUM","Items","ul","Item","li","ComponentMStyling","ComponentTextStyle","COLORS","Z_INDEXES","focus","hover","primary_800","primary_20","active","primary_700","primary_100","neutral_800","neutral_20","Dots","ItemContent","ItemSelected","primary_500","pageCount","currentPage","baseUrl","onPageChange","Step","up","target","disabled","testId","cursor","neutral_300","Paginator","pages","from","to","i","item","neutral_600","page"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ChevronLeft, ChevronRight, MoreHorizontal} from '../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Container = styled.nav`\n margin: 20px 0;\n display: flex;\n justify-content: center;\n\n ${BREAKPOINTS.MEDIUM} {\n width: 75%;\n }\n`;\n\nconst Items = styled.ul`\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n`;\n\nconst Item = styled.li`\n width: 48px;\n height: 45px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & > * {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-decoration: none;\n border-bottom: 3px solid transparent;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n &:focus,\n &:focus-within {\n z-index: ${Z_INDEXES.focus};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n outline-width: 0;\n }\n }\n\n & > a:hover {\n z-index: ${Z_INDEXES.hover};\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n box-shadow: none;\n }\n & > a:active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n box-shadow: none;\n }\n\n & > a.active {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.neutral_800};\n background-color: ${COLORS.neutral_20};\n cursor: default;\n box-shadow: none;\n &:hover {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_20};\n }\n &:active {\n color: ${COLORS.primary_700};\n background-color: ${COLORS.primary_100};\n }\n }\n`;\n\nconst Dots = styled(Item)`\n padding-top: 1%;\n cursor: not-allowed;\n`;\n\nconst ItemContent = styled('div')`\n width: 100%;\n text-align:center;\n display: table-cell;\n vertical-align:middle;\n`\nconst ItemSelected = styled('div')`\n justify-content: center;\n margin: 0 20%;\n border-radius: 4px;\n text-align: center;\n height: 4px;\n background-color: ${COLORS.primary_500}\n`\n\ntype PaginatorProps = {\n pageCount: number;\n currentPage: number;\n baseUrl: string;\n onPageChange?: (page: number) => void;\n};\n\nconst Step = ({\n up = true,\n target = '',\n disabled = false,\n page,\n onPageChange,\n testId,\n}: {\n up: boolean;\n target: string;\n disabled: boolean;\n page: number;\n onPageChange?: (page: number) => void;\n testId?: string;\n}) => {\n if (disabled)\n return (\n <Item style={{ cursor: 'not-allowed' }} data-testid={`${testId}_Disabled`}>\n {up ? <ChevronRight size=\"20\" color={COLORS.neutral_300} /> : <ChevronLeft size=\"20\" color={COLORS.neutral_300} />}\n </Item>\n );\n return (\n <Item data-testid={`${testId}_Enabled`}>\n <NavLink\n to={target}\n onClick={() => {\n if (onPageChange) onPageChange(page);\n }}>\n {up ? <ChevronRight size=\"20\" /> : <ChevronLeft />}\n </NavLink>\n </Item>\n );\n};\n\nconst Paginator = ({ pageCount = 1, currentPage = 1, baseUrl = '', onPageChange }: PaginatorProps) => {\n const pages = [];\n let from = 2;\n let to = 4;\n if (pageCount === 0) return null;\n\n if (pageCount > 1) {\n if (currentPage >= 4 && currentPage <= pageCount - 2) {\n from = currentPage - 1;\n to = currentPage + 1;\n } else if (pageCount - 2 > 1 && currentPage > pageCount - 2) {\n from = pageCount - 3;\n to = pageCount - 1;\n }\n if (to > pageCount) {\n to = pageCount;\n }\n for (let i = from; i <= to; i += 1) {\n pages.push(i);\n }\n }\n\n return (\n <Container>\n <Items>\n <Step\n up={false}\n target={`${baseUrl}/${currentPage - 1}`}\n page={currentPage - 1}\n disabled={currentPage === 1}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage - 1);\n }}\n testId=\"Test-StepLeft\"\n />\n {pages.findIndex(item => item === 1) === -1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/1`}\n onClick={() => {\n if (onPageChange) onPageChange(1);\n }}>\n <ItemContent>\n <span>1</span>\n {currentPage === 1 && <ItemSelected />}\n </ItemContent>\n </NavLink>\n </Item>\n )}\n {currentPage >= 4 && pageCount > 5 && pageCount && pages.findIndex(item => item === 1) === -1 && (\n <Dots>\n <MoreHorizontal color={COLORS.neutral_600} />\n </Dots>\n )}\n {pages.map(page => (\n <Item key={page}>\n <NavLink\n to={`${baseUrl}/${page}`}\n onClick={() => {\n if (onPageChange) onPageChange(page);\n }}>\n <ItemContent>\n <span>{page}</span>\n {currentPage === page && <ItemSelected />}\n </ItemContent>\n </NavLink>\n </Item>\n ))}\n {pageCount > 5 && currentPage <= pageCount - 3 && (\n <Dots>\n <MoreHorizontal color={COLORS.neutral_600} />\n </Dots>\n )}\n {pages.findIndex(item => item === pageCount) === -1 && pageCount !== 1 && (\n <Item>\n <NavLink\n to={`${baseUrl}/${pageCount}`}\n onClick={() => {\n if (onPageChange) onPageChange(pageCount);\n }}>\n <ItemContent>\n <span>{pageCount}</span>\n {currentPage === pageCount && <ItemSelected />}\n </ItemContent>\n </NavLink>\n </Item>\n )}\n <Step\n up\n target={`${baseUrl}/${currentPage + 1}`}\n page={currentPage + 1}\n disabled={currentPage === pageCount}\n onPageChange={() => {\n if (onPageChange) onPageChange(currentPage + 1);\n }}\n testId=\"Test-StepRight\"\n />\n </Items>\n </Container>\n );\n};\n\nexport default Paginator;\n"],"file":"Paginator.js"}

package/dist/umd/Switcher/MobileSwitcherMenu.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../styles", "../Button", "../icons/systemicons/SystemIcons", "../GlobalNavigationBar/mobile/CommonStyles", "./SwitcherMenuItem", "../styles/typography"], factory);
+    define(["exports", "prop-types", "react", "styled-components", "../styles", "../Button", "../icons/systemicons/SystemIcons", "../GlobalNavigationBar/mobile/CommonStyles", "./SwitcherMenuItem", "../styles/typography", "../styles/z-indexes"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../GlobalNavigationBar/mobile/CommonStyles"), require("./SwitcherMenuItem"), require("../styles/typography"));
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../Button"), require("../icons/systemicons/SystemIcons"), require("../GlobalNavigationBar/mobile/CommonStyles"), require("./SwitcherMenuItem"), require("../styles/typography"), require("../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.Button, global.SystemIcons, global.CommonStyles, global.SwitcherMenuItem, global.typography);
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.Button, global.SystemIcons, global.CommonStyles, global.SwitcherMenuItem, global.typography, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _Button, _SystemIcons, _CommonStyles, _SwitcherMenuItem, _typography) {
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _Button, _SystemIcons, _CommonStyles, _SwitcherMenuItem, _typography, _zIndexes) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -91,7 +91,7 @@
   animation: ${_CommonStyles.flowDown} 0.2s ease-in-out;
   position: absolute;
   border-radius: 4px;
-  z-index: 100;
+  z-index: ${_zIndexes.Z_INDEXES.off_canvas};
   height: 100%;
   width: 320px;
   padding-inline-start: 0;

package/dist/umd/Switcher/MobileSwitcherMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","ComponentSStyling","ComponentTextStyle","LabelLine","span","neutral_20","header","elementsHeader","clickMenuAction","elements","MobileSwitcherMenu","React","e","document","element","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAWA~~,QAAMA,IAAI,GAAGC,2BAAOC,EAAG;AACvB;AACA;AACA,sBAAsBC,eAAOC,KAAM;AACnC;AACA;AACA,uBAAuBC,sBAAS;AAChC,eAAeA,sBAAS;AACxB;AACA;AACA;~~AACA~~;AACA;AACA;AACA;AACA,IAAIC,oBAAYC,KAAM;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,wBAAiB;AAxBrB,CAAA;AA2BA,QAAMC,WAAW,~~GAAGR~~,~~2BAAOS~~,EAAG;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,CAAA;AAWA,QAAMC,eAAe,~~GAAGV~~,2BAAOC,EAAG;AAClC;AACA;AACA;AACA;AACA;AACA,~~IAAIU~~,wCAA2B;AAN/B,CAAA;AASA,QAAMC,GAAG,~~GAAGZ~~,~~2BAAOa~~,GAAI;AACvB;AACA;AACA;AACA;AACA,~~WAAWX~~,~~eAAOY~~,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,mCAAkBC,2BAAD,OAAjBD,EAAiB,SAAjBA,CAAyD;AAC/D;AAfA,CAAA;AAkBA,QAAME,SAAS,~~GAAGjB~~,~~2BAAOkB~~,IAAK;AAC9B;AACA,~~sBAAsBhB~~,~~eAAOiB~~,UAAW;AACxC;AACA;AACA;AALA,CAAA;;AAeA,QAAMK,kBAAkB,GAAG,CAAC;AAAA,IAAA,MAAA;AAAA,IAAA,cAAA;AAAA,IAAA,eAAA;AAA2CD,IAAAA;AAA3C,GAAD,KAAkE;AAC3FE,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,eAAA,cAAA,CAAA,CAAA,EAAgC;AAC9B,YAAIC,CAAC,CAADA,OAAAA,KAAJ,EAAA,EAAsB;AACpBJ,UAAAA,eAAe;AAChB;AACF;;AAEDK,MAAAA,QAAQ,CAARA,gBAAAA,CAAAA,SAAAA,EAAAA,cAAAA,EAAAA,KAAAA;AACA,aAAO,MAAM;AACXA,QAAAA,QAAQ,CAARA,mBAAAA,CAAAA,SAAAA,EAAAA,cAAAA,EAAAA,KAAAA;AADF,OAAA;AARFF,KAAAA,EAWG,CAXHA,eAWG,CAXHA;AAaA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,MAAA,OAAO,EAAE,MAAM,CAArB,CAAA;AAAyB,MAAA,IAAI,EAA7B,MAAA;AAAqC,yBAAgB;AAArD,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,MAAA,OAAO,EAAnB,WAAA;AAAgC,MAAA,KAAK,EAArC,UAAA;AAAiD,MAAA,MAAM,EAAvD,eAAA;AAA0E,MAAA,cAAc,EAAE;AAA1F,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,MAAA,IAAI,EAAnB,MAAA;AAA2B,MAAA,KAAK,~~EAAEvB~~,~~eAAOY~~;AAAzC,KAAA,CADF,CADF,EAAA,aAIE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAJF,MAIE,CAJF,EAAA,aAKE,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,MAAA,OAAO,EAAnB,WAAA;AAAgC,MAAA,KAAK,EAArC,UAAA;AAAiD,MAAA,MAAM,EAAvD,eAAA;AAA0E,MAAA,cAAc,EAAE;AAA1F,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,MAAA,IAAI,EAAC;AAAZ,KAAA,CADF,CADF,CALF,CADF,EAYGS,QAAQ,IAAIA,QAAQ,EAARA,MAAAA,GAAZA,CAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,EADF,cACE,CADF,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,IAAA,EACG,QAAQ,EAAR,GAAA,CAAeK,OAAD,IAAA,aACb,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAkB,MAAA,GAAG,EAAEA,OAAO,EAA9B,EAAA;AAAoC,MAAA,KAAK,EAAEA,OAAO,EAAlD,KAAA;AAA2D,MAAA,IAAI,EAAEA,OAAO,CAACC;AAAzE,KAAA,CADD,CADH,CAFF,CAbJ,CADF;AAdF,GAAA;;;AANET,IAAAA,M;AACAC,IAAAA,c;AACAC,IAAAA,e;AACAC,IAAAA,Q;;oBA4CF,kB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../styles';\n\nimport {UserMenuItem} from '../types';\nimport {IconButton} from '../Button';\nimport {ArrowLineLeft, Close} from '../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\nimport {ComponentSStyling} from '../styles/typography';\n\nconst Menu = styled.ul`\n list-style: none;\n margin: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n -webkit-animation: ${flowDown} 0.2s ease-in-out;\n animation: ${flowDown} 0.2s ease-in-out;\n position: absolute;\n border-radius: 4px;\n z-index: ~~100~~;\n height: 100%;\n width: 320px;\n padding-inline-start: 0;\n overflow-y: scroll;\n ${BREAKPOINTS.SMALL} {\n min-width: 360px;\n }\n\n .open & {\n display: flex;\n flex-direction: column;\n }\n\n ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n padding: 8px 0;\n position: relative;\n\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nconst MenuSectionList = styled.ul`\n list-style: none;\n margin: 0;\n overflow-y: unset !important;\n padding-inline-start: 0;\n\n ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 22px 12px 0 12px;\n color: ${COLORS.neutral_600};\n\n h3 {\n margin-block-start: 0 !important;\n margin-block-end: 0 !important;\n margin-inline-start: 0px;\n margin-inline-end: 0px;\n margin-left: 24px;\n\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n }\n`;\n\nconst LabelLine = styled.span`\n height: 32px;\n background-color: ${COLORS.neutral_20};\n padding-left: 24px;\n display: flex;\n line-height: 32px;\n`;\n\ninterface Props {\n header: string;\n elementsHeader: string;\n clickMenuAction: () => void;\n elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n React.useEffect(() => {\n function handleKeyPress(e: any) {\n if (e.keyCode === 27) {\n clickMenuAction();\n }\n }\n\n document.addEventListener('keydown', handleKeyPress, false);\n return () => {\n document.removeEventListener('keydown', handleKeyPress, false);\n };\n }, [clickMenuAction]);\n\n return (\n <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <Top>\n <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n <h3>{header}</h3>\n <Right>\n <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n <Close size=\"24px\" />\n </IconButton>\n </Right>\n </Top>\n {elements && elements?.length > 0 && (\n <MenuSection>\n <LabelLine>{elementsHeader}</LabelLine>\n <MenuSectionList>\n {elements?.map((element) => (\n <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n </Menu>\n );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}
1	+ {"version":3,"sources":["../../../src/Switcher/MobileSwitcherMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","ComponentSStyling","ComponentTextStyle","LabelLine","span","neutral_20","header","elementsHeader","clickMenuAction","elements","MobileSwitcherMenu","React","e","document","element","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,QAAMA,IAAI,GAAGC,2BAAOC,EAAG;AACvB;AACA;AACA,sBAAsBC,eAAOC,KAAM;AACnC;AACA;AACA,uBAAuBC,sBAAS;AAChC,eAAeA,sBAAS;AACxB;AACA;AACA,aAAaC,oBAAUC,UAAW;AAClC;AACA;AACA;AACA;AACA,IAAIC,oBAAYC,KAAM;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,wBAAiB;AAxBrB,CAAA;AA2BA,QAAMC,WAAW,GAAGV,2BAAOW,EAAG;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARA,CAAA;AAWA,QAAMC,eAAe,GAAGZ,2BAAOC,EAAG;AAClC;AACA;AACA;AACA;AACA;AACA,IAAIY,wCAA2B;AAN/B,CAAA;AASA,QAAMC,GAAG,GAAGd,2BAAOe,GAAI;AACvB;AACA;AACA;AACA;AACA,WAAWb,eAAOc,WAAY;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,mCAAkBC,2BAAD,OAAjBD,EAAiB,SAAjBA,CAAyD;AAC/D;AAfA,CAAA;AAkBA,QAAME,SAAS,GAAGnB,2BAAOoB,IAAK;AAC9B;AACA,sBAAsBlB,eAAOmB,UAAW;AACxC;AACA;AACA;AALA,CAAA;;AAeA,QAAMK,kBAAkB,GAAG,CAAC;AAAA,IAAA,MAAA;AAAA,IAAA,cAAA;AAAA,IAAA,eAAA;AAA2CD,IAAAA;AAA3C,GAAD,KAAkE;AAC3FE,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,eAAA,cAAA,CAAA,CAAA,EAAgC;AAC9B,YAAIC,CAAC,CAADA,OAAAA,KAAJ,EAAA,EAAsB;AACpBJ,UAAAA,eAAe;AAChB;AACF;;AAEDK,MAAAA,QAAQ,CAARA,gBAAAA,CAAAA,SAAAA,EAAAA,cAAAA,EAAAA,KAAAA;AACA,aAAO,MAAM;AACXA,QAAAA,QAAQ,CAARA,mBAAAA,CAAAA,SAAAA,EAAAA,cAAAA,EAAAA,KAAAA;AADF,OAAA;AARFF,KAAAA,EAWG,CAXHA,eAWG,CAXHA;AAaA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,MAAA,OAAO,EAAE,MAAM,CAArB,CAAA;AAAyB,MAAA,IAAI,EAA7B,MAAA;AAAqC,yBAAgB;AAArD,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,MAAA,OAAO,EAAnB,WAAA;AAAgC,MAAA,KAAK,EAArC,UAAA;AAAiD,MAAA,MAAM,EAAvD,eAAA;AAA0E,MAAA,cAAc,EAAE;AAA1F,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,MAAA,IAAI,EAAnB,MAAA;AAA2B,MAAA,KAAK,EAAEzB,eAAOc;AAAzC,KAAA,CADF,CADF,EAAA,aAIE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAJF,MAIE,CAJF,EAAA,aAKE,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAY,MAAA,OAAO,EAAnB,WAAA;AAAgC,MAAA,KAAK,EAArC,UAAA;AAAiD,MAAA,MAAM,EAAvD,eAAA;AAA0E,MAAA,cAAc,EAAE;AAA1F,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAO,MAAA,IAAI,EAAC;AAAZ,KAAA,CADF,CADF,CALF,CADF,EAYGS,QAAQ,IAAIA,QAAQ,EAARA,MAAAA,GAAZA,CAAAA,IAAAA,aACC,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,EADF,cACE,CADF,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,IAAA,EACG,QAAQ,EAAR,GAAA,CAAeK,OAAD,IAAA,aACb,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAkB,MAAA,GAAG,EAAEA,OAAO,EAA9B,EAAA;AAAoC,MAAA,KAAK,EAAEA,OAAO,EAAlD,KAAA;AAA2D,MAAA,IAAI,EAAEA,OAAO,CAACC;AAAzE,KAAA,CADD,CADH,CAFF,CAbJ,CADF;AAdF,GAAA;;;AANET,IAAAA,M;AACAC,IAAAA,c;AACAC,IAAAA,e;AACAC,IAAAA,Q;;oBA4CF,kB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../styles';\n\nimport {UserMenuItem} from '../types';\nimport {IconButton} from '../Button';\nimport {ArrowLineLeft, Close} from '../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../GlobalNavigationBar/mobile/CommonStyles';\nimport SwitcherMenuItem from './SwitcherMenuItem';\nimport {ComponentSStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Menu = styled.ul`\n list-style: none;\n margin: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n -webkit-animation: ${flowDown} 0.2s ease-in-out;\n animation: ${flowDown} 0.2s ease-in-out;\n position: absolute;\n border-radius: 4px;\n z-index: ${Z_INDEXES.off_canvas};\n height: 100%;\n width: 320px;\n padding-inline-start: 0;\n overflow-y: scroll;\n ${BREAKPOINTS.SMALL} {\n min-width: 360px;\n }\n\n .open & {\n display: flex;\n flex-direction: column;\n }\n\n ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n padding: 8px 0;\n position: relative;\n\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nconst MenuSectionList = styled.ul`\n list-style: none;\n margin: 0;\n overflow-y: unset !important;\n padding-inline-start: 0;\n\n ${UserMenuSectionListStyling}\n`;\n\nconst Top = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 22px 12px 0 12px;\n color: ${COLORS.neutral_600};\n\n h3 {\n margin-block-start: 0 !important;\n margin-block-end: 0 !important;\n margin-inline-start: 0px;\n margin-inline-end: 0px;\n margin-left: 24px;\n\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n }\n`;\n\nconst LabelLine = styled.span`\n height: 32px;\n background-color: ${COLORS.neutral_20};\n padding-left: 24px;\n display: flex;\n line-height: 32px;\n`;\n\ninterface Props {\n header: string;\n elementsHeader: string;\n clickMenuAction: () => void;\n elements?: UserMenuItem[];\n}\n\nconst MobileSwitcherMenu = ({ header, elementsHeader, clickMenuAction, elements }: Props) => {\n React.useEffect(() => {\n function handleKeyPress(e: any) {\n if (e.keyCode === 27) {\n clickMenuAction();\n }\n }\n\n document.addEventListener('keydown', handleKeyPress, false);\n return () => {\n document.removeEventListener('keydown', handleKeyPress, false);\n };\n }, [clickMenuAction]);\n\n return (\n <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <Top>\n <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n </IconButton>\n <h3>{header}</h3>\n <Right>\n <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n <Close size=\"24px\" />\n </IconButton>\n </Right>\n </Top>\n {elements && elements?.length > 0 && (\n <MenuSection>\n <LabelLine>{elementsHeader}</LabelLine>\n <MenuSectionList>\n {elements?.map((element) => (\n <SwitcherMenuItem url={element?.to} label={element?.label} Icon={element.icon} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n </Menu>\n );\n};\n\nexport default MobileSwitcherMenu;\n"],"file":"MobileSwitcherMenu.js"}

package/dist/umd/Switcher/SwitcherMenuItem.js CHANGED Viewed

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react", "styled-components", "../styles", "../styles/typography"], factory);
+    define(["exports", "react", "styled-components", "../styles", "../styles/typography", "../styles/z-indexes"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"), require("styled-components"), require("../styles"), require("../styles/typography"));
+    factory(exports, require("react"), require("styled-components"), require("../styles"), require("../styles/typography"), require("../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react, global.styledComponents, global.styles, global.typography);
+    factory(mod.exports, global.react, global.styledComponents, global.styles, global.typography, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _react, _styledComponents, _styles, _typography) {
+})(this, function (exports, _react, _styledComponents, _styles, _typography, _zIndexes) {
   "use strict";
   Object.defineProperty(exports, "__esModule", {
@@ -107,6 +107,7 @@
   }
   &.active:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.active};
     font-weight: bold;
     color: ${_styles.COLORS.neutral_800};
@@ -125,6 +126,7 @@
   }
   &:hover:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.hover};
     color: ${_styles.COLORS.primary_600};
     background-color: ${_styles.COLORS.primary_20};
@@ -134,6 +136,7 @@
   }
   &:active:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.active};
     color: ${_styles.COLORS.primary_800};
     background-color: ${_styles.COLORS.primary_100};
     box-shadow: none;
@@ -148,6 +151,7 @@
   }
   &:focus:not(.disabled) {
+    z-index: ${_zIndexes.Z_INDEXES.focus};
     box-shadow: 0px 0px 8px ${_styles.COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
     outline: none;
   }

package/dist/umd/Switcher/SwitcherMenuItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/Switcher/SwitcherMenuItem.tsx"],"names":["StyledSwitcherItem","styled","div","ComponentMStyling","ComponentTextStyle","COLORS","neutral_800","primary_500","neutral_300","neutral_100","primary_600","primary_20","primary_800","primary_100","A","a","SwitcherMenuItem","as","testId","window","url","disabled","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAMA~~,QAAMA,kBAAkB,GAAGC,2BAAOC,GAAI;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,mCAAkBC,2BAAD,OAAjBD,EAA8CE,eAA7B,WAAjBF,CAAkE;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,~~aAAaE~~,~~eAAOC~~,WAAY;AAChC;AACA;AACA,~~0BAA0BD~~,~~eAAOE~~,WAAY;AAC7C;AACA;AACA;AACA,~~cAAcF~~,~~eAAOC~~,WAAY;AACjC;AACA;AACA;AACA;AACA,~~aAAaD~~,~~eAAOG~~,WAAY;AAChC,~~wBAAwBH~~,~~eAAOI~~,WAAY;AAC3C;AACA;AACA;AACA,~~aAAaJ~~,~~eAAOK~~,WAAY;AAChC,~~wBAAwBL~~,~~eAAOM~~,UAAW;AAC1C;AACA;AACA,~~cAAcN~~,~~eAAOK~~,WAAY;AACjC;AACA;AACA;AACA;AACA,~~aAAaL~~,~~eAAOO~~,WAAY;AAChC,~~wBAAwBP~~,~~eAAOQ~~,WAAY;AAC3C;AACA;AACA;AACA,~~0BAA0BR~~,~~eAAOE~~,WAAY;AAC7C;AACA;AACA;AACA,~~cAAcF~~,~~eAAOO~~,WAAY;AACjC;AACA;AACA;AACA;AACA,~~8BAA8BP~~,~~eAAOE~~,WAAY;AACjD;AACA;~~AAzEA~~,CAAA;~~AA4EA~~,~~QAAMO~~,CAAC,~~GAAGb~~,~~2BAAOc~~,CAAjB,EAAA;;AAEA,QAAMC,gBAAgB,GAAG,CAAC;AAAA,IAAA,KAAA;AAAA,IAAA,GAAA;AAAA,IAAA,QAAA;AAAA,IAAA,IAAA;AAA8BC,IAAAA,EAAE,GAAhC,CAAA;AAAsCC,IAAAA;AAAtC,GAAD,KAAA,aACvB,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AACE,IAAA,OAAO,EAAE,MAAOC,MAAM,CAANA,QAAAA,CAAAA,IAAAA,GAAuBC,GAAG,IAD5C,EAAA;AAEE,IAAA,EAAE,EAFJ,EAAA;AAGE,IAAA,IAAI,EAAEA,GAAG,IAHX,EAAA;AAIE,IAAA,MAAM,EAJR,SAAA;AAKE,IAAA,GAAG,EALL,KAAA;AAME,IAAA,SAAS,EAAEC,QAAQ,GAAA,UAAA,GANrB,EAAA;AAOE,mBAAaH;AAPf,GAAA,EAQGI,IAAI,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,IAAA,IAAI,EAAV,MAAA;AAAkB,IAAA,KAAK,EAAC;AAAxB,GAAA,CARX,EADF,KACE,CADF;;oBAcA,gB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {SwitcherNavItem} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\n\nconst StyledSwitcherItem = styled.div`\n padding: 16px 25px;\n margin: 0 2px;\n\n display: flex;\n align-items: center;\n text-align: center;\n position: relative;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n text-decoration: none;\n\n svg {\n margin-right: 16px;\n }\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n left: 4px;\n top: 4px;\n bottom: 4px;\n width: 4px;\n background-color: transparent;\n border-radius: 2px;\n }\n\n &.active:not(.disabled) {\n font-weight: bold;\n color: ${COLORS.neutral_800};\n\n &:after {\n background-color: ${COLORS.primary_500};\n }\n\n svg path {\n fill: ${COLORS.neutral_800};\n }\n }\n\n &.disabled {\n color: ${COLORS.neutral_300};\n background-color: ${COLORS.neutral_100};\n }\n\n &:hover:not(.disabled) {\n color: ${COLORS.primary_600};\n background-color: ${COLORS.primary_20};\n\n svg path {\n fill: ${COLORS.primary_600};\n }\n }\n\n &:active:not(.disabled) {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n box-shadow: none;\n\n &:after {\n background-color: ${COLORS.primary_500};\n }\n\n svg path {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:focus:not(.disabled) {\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n outline: none;\n }\n`;\n\nconst A = styled.a``;\n\nconst SwitcherMenuItem = ({ label, url, disabled, Icon, as = A, testId }: SwitcherNavItem) => (\n <StyledSwitcherItem\n onClick={() => (window.location.href = url \|\| '')}\n as={as}\n href={url \|\| ''}\n target=\"_parent\"\n key={label}\n className={disabled ? 'disabled' : ''}\n data-testid={testId}>\n {Icon && <Icon size=\"22px\" color=\"#666666\" />}\n {label}\n </StyledSwitcherItem>\n);\n\nexport default SwitcherMenuItem;\n"],"file":"SwitcherMenuItem.js"}
1	+ {"version":3,"sources":["../../../src/Switcher/SwitcherMenuItem.tsx"],"names":["StyledSwitcherItem","styled","div","ComponentMStyling","ComponentTextStyle","COLORS","Z_INDEXES","active","neutral_800","primary_500","neutral_300","neutral_100","hover","primary_600","primary_20","primary_800","primary_100","focus","A","a","SwitcherMenuItem","as","testId","window","url","disabled","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,QAAMA,kBAAkB,GAAGC,2BAAOC,GAAI;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,mCAAkBC,2BAAD,OAAjBD,EAA8CE,eAA7B,WAAjBF,CAAkE;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeG,oBAAUC,MAAO;AAChC;AACA,aAAaF,eAAOG,WAAY;AAChC;AACA;AACA,0BAA0BH,eAAOI,WAAY;AAC7C;AACA;AACA;AACA,cAAcJ,eAAOG,WAAY;AACjC;AACA;AACA;AACA;AACA,aAAaH,eAAOK,WAAY;AAChC,wBAAwBL,eAAOM,WAAY;AAC3C;AACA;AACA;AACA,eAAeL,oBAAUM,KAAM;AAC/B,aAAaP,eAAOQ,WAAY;AAChC,wBAAwBR,eAAOS,UAAW;AAC1C;AACA;AACA,cAAcT,eAAOQ,WAAY;AACjC;AACA;AACA;AACA;AACA,eAAeP,oBAAUC,MAAO;AAChC,aAAaF,eAAOU,WAAY;AAChC,wBAAwBV,eAAOW,WAAY;AAC3C;AACA;AACA;AACA,0BAA0BX,eAAOI,WAAY;AAC7C;AACA;AACA;AACA,cAAcJ,eAAOU,WAAY;AACjC;AACA;AACA;AACA;AACA,eAAeT,oBAAUW,KAAM;AAC/B,8BAA8BZ,eAAOI,WAAY;AACjD;AACA;AA7EA,CAAA;AAgFA,QAAMS,CAAC,GAAGjB,2BAAOkB,CAAjB,EAAA;;AAEA,QAAMC,gBAAgB,GAAG,CAAC;AAAA,IAAA,KAAA;AAAA,IAAA,GAAA;AAAA,IAAA,QAAA;AAAA,IAAA,IAAA;AAA8BC,IAAAA,EAAE,GAAhC,CAAA;AAAsCC,IAAAA;AAAtC,GAAD,KAAA,aACvB,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AACE,IAAA,OAAO,EAAE,MAAOC,MAAM,CAANA,QAAAA,CAAAA,IAAAA,GAAuBC,GAAG,IAD5C,EAAA;AAEE,IAAA,EAAE,EAFJ,EAAA;AAGE,IAAA,IAAI,EAAEA,GAAG,IAHX,EAAA;AAIE,IAAA,MAAM,EAJR,SAAA;AAKE,IAAA,GAAG,EALL,KAAA;AAME,IAAA,SAAS,EAAEC,QAAQ,GAAA,UAAA,GANrB,EAAA;AAOE,mBAAaH;AAPf,GAAA,EAQGI,IAAI,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,IAAA,IAAI,EAAV,MAAA;AAAkB,IAAA,KAAK,EAAC;AAAxB,GAAA,CARX,EADF,KACE,CADF;;oBAcA,gB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport {SwitcherNavItem} from '../types';\nimport {ComponentMStyling} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst StyledSwitcherItem = styled.div`\n padding: 16px 25px;\n margin: 0 2px;\n\n display: flex;\n align-items: center;\n text-align: center;\n position: relative;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n text-decoration: none;\n\n svg {\n margin-right: 16px;\n }\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n left: 4px;\n top: 4px;\n bottom: 4px;\n width: 4px;\n background-color: transparent;\n border-radius: 2px;\n }\n\n &.active:not(.disabled) {\n z-index: ${Z_INDEXES.active};\n font-weight: bold;\n color: ${COLORS.neutral_800};\n\n &:after {\n background-color: ${COLORS.primary_500};\n }\n\n svg path {\n fill: ${COLORS.neutral_800};\n }\n }\n\n &.disabled {\n color: ${COLORS.neutral_300};\n background-color: ${COLORS.neutral_100};\n }\n\n &:hover:not(.disabled) {\n z-index: ${Z_INDEXES.hover};\n color: ${COLORS.primary_600};\n background-color: ${COLORS.primary_20};\n\n svg path {\n fill: ${COLORS.primary_600};\n }\n }\n\n &:active:not(.disabled) {\n z-index: ${Z_INDEXES.active};\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n box-shadow: none;\n\n &:after {\n background-color: ${COLORS.primary_500};\n }\n\n svg path {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:focus:not(.disabled) {\n z-index: ${Z_INDEXES.focus};\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n outline: none;\n }\n`;\n\nconst A = styled.a``;\n\nconst SwitcherMenuItem = ({ label, url, disabled, Icon, as = A, testId }: SwitcherNavItem) => (\n <StyledSwitcherItem\n onClick={() => (window.location.href = url \|\| '')}\n as={as}\n href={url \|\| ''}\n target=\"_parent\"\n key={label}\n className={disabled ? 'disabled' : ''}\n data-testid={testId}>\n {Icon && <Icon size=\"22px\" color=\"#666666\" />}\n {label}\n </StyledSwitcherItem>\n);\n\nexport default SwitcherMenuItem;\n"],"file":"SwitcherMenuItem.js"}