@skbkontur/react-ui 3.7.0 → 3.8.1
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/CHANGELOG.md +64 -0
- package/README.md +1 -1
- package/cjs/components/Button/Button.d.ts +1 -0
- package/cjs/components/Button/Button.js +4 -1
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.styles.js +2 -2
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.js +6 -5
- package/cjs/components/Checkbox/Checkbox.js.map +1 -1
- package/cjs/components/Checkbox/Checkbox.styles.js +3 -3
- package/cjs/components/Checkbox/Checkbox.styles.js.map +1 -1
- package/cjs/components/CurrencyLabel/CurrencyLabel.js +14 -5
- package/cjs/components/CurrencyLabel/CurrencyLabel.js.map +1 -1
- package/cjs/components/CurrencyLabel/CurrencyLabel.styles.d.ts +4 -0
- package/cjs/components/CurrencyLabel/CurrencyLabel.styles.js +9 -0
- package/cjs/components/CurrencyLabel/CurrencyLabel.styles.js.map +1 -0
- package/cjs/components/FxInput/FxInput.js +1 -1
- package/cjs/components/FxInput/FxInput.js.map +1 -1
- package/cjs/components/Kebab/Kebab.js +2 -1
- package/cjs/components/Kebab/Kebab.js.map +1 -1
- package/cjs/components/MenuItem/MenuItem.md +1 -1
- package/cjs/components/MenuItem/MenuItem.styles.js +3 -2
- package/cjs/components/MenuItem/MenuItem.styles.js.map +1 -1
- package/cjs/components/Modal/Modal.styles.d.ts +1 -0
- package/cjs/components/Modal/Modal.styles.js +24 -21
- package/cjs/components/Modal/Modal.styles.js.map +1 -1
- package/cjs/components/Modal/ModalClose.js +23 -3
- package/cjs/components/Modal/ModalClose.js.map +1 -1
- package/cjs/components/Paging/Paging.styles.js +2 -1
- package/cjs/components/Paging/Paging.styles.js.map +1 -1
- package/cjs/components/Radio/Radio.styles.js +3 -2
- package/cjs/components/Radio/Radio.styles.js.map +1 -1
- package/cjs/components/SidePage/SidePage.d.ts +1 -2
- package/cjs/components/SidePage/SidePage.js +1 -5
- package/cjs/components/SidePage/SidePage.js.map +1 -1
- package/cjs/components/SidePage/SidePage.styles.d.ts +2 -1
- package/cjs/components/SidePage/SidePage.styles.js +44 -28
- package/cjs/components/SidePage/SidePage.styles.js.map +1 -1
- package/cjs/components/SidePage/SidePageHeader.d.ts +4 -1
- package/cjs/components/SidePage/SidePageHeader.js +33 -23
- package/cjs/components/SidePage/SidePageHeader.js.map +1 -1
- package/cjs/components/Switcher/Switcher.js +1 -1
- package/cjs/components/Switcher/Switcher.js.map +1 -1
- package/cjs/components/Switcher/Switcher.styles.d.ts +1 -1
- package/cjs/components/Switcher/Switcher.styles.js +3 -2
- package/cjs/components/Switcher/Switcher.styles.js.map +1 -1
- package/cjs/components/Tabs/Tab.styles.js +2 -2
- package/cjs/components/Tabs/Tab.styles.js.map +1 -1
- package/cjs/components/Textarea/Textarea.d.ts +0 -2
- package/cjs/components/Textarea/Textarea.js +6 -3
- package/cjs/components/Textarea/Textarea.js.map +1 -1
- package/cjs/components/Toggle/Toggle.d.ts +43 -1
- package/cjs/components/Toggle/Toggle.js +46 -2
- package/cjs/components/Toggle/Toggle.js.map +1 -1
- package/cjs/components/Toggle/Toggle.md +70 -9
- package/cjs/components/Toggle/Toggle.styles.d.ts +2 -0
- package/cjs/components/Toggle/Toggle.styles.js +32 -16
- package/cjs/components/Toggle/Toggle.styles.js.map +1 -1
- package/cjs/components/TokenInput/TokenInput.d.ts +8 -0
- package/cjs/components/TokenInput/TokenInput.js +24 -2
- package/cjs/components/TokenInput/TokenInput.js.map +1 -1
- package/cjs/components/Tooltip/Tooltip.styles.js +2 -1
- package/cjs/components/Tooltip/Tooltip.styles.js.map +1 -1
- package/cjs/internal/CustomComboBox/ComboBoxView.js +2 -1
- package/cjs/internal/CustomComboBox/ComboBoxView.js.map +1 -1
- package/cjs/internal/CustomComboBox/CustomComboBoxReducer.js +3 -2
- package/cjs/internal/CustomComboBox/CustomComboBoxReducer.js.map +1 -1
- package/cjs/internal/HideBodyVerticalScroll/HideBodyVerticalScroll.js +5 -7
- package/cjs/internal/HideBodyVerticalScroll/HideBodyVerticalScroll.js.map +1 -1
- package/cjs/internal/InputLikeText/InputLikeText.js +2 -1
- package/cjs/internal/InputLikeText/InputLikeText.js.map +1 -1
- package/cjs/internal/PopupMenu/PopupMenu.js +1 -1
- package/cjs/internal/PopupMenu/PopupMenu.js.map +1 -1
- package/cjs/internal/RenderContainer/RenderContainer.js +2 -1
- package/cjs/internal/RenderContainer/RenderContainer.js.map +1 -1
- package/cjs/internal/ThemePlayground/darkTheme.js +3 -3
- package/cjs/internal/ThemePlayground/darkTheme.js.map +1 -1
- package/cjs/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/cjs/internal/icons/CrossIcon.js +8 -1
- package/cjs/internal/icons/CrossIcon.js.map +1 -1
- package/cjs/internal/themes/DefaultTheme.d.ts +16 -5
- package/cjs/internal/themes/DefaultTheme.js +63 -25
- package/cjs/internal/themes/DefaultTheme.js.map +1 -1
- package/cjs/internal/themes/FlatTheme.d.ts +0 -1
- package/cjs/internal/themes/FlatTheme.js +1 -2
- package/cjs/internal/themes/FlatTheme.js.map +1 -1
- package/cjs/internal/themes/Theme8px.js +1 -1
- package/cjs/internal/themes/Theme8px.js.map +1 -1
- package/cjs/lib/Upgrades.d.ts +2 -0
- package/cjs/lib/Upgrades.js +14 -0
- package/cjs/lib/Upgrades.js.map +1 -1
- package/cjs/lib/events/keyboard/identifiers.d.ts +1 -0
- package/cjs/lib/events/keyboard/identifiers.js +6 -1
- package/cjs/lib/events/keyboard/identifiers.js.map +1 -1
- package/cjs/lib/locale/LOCALECONTEXT.md +1 -1
- package/cjs/lib/styles/ColorFunctions.js +1 -1
- package/cjs/lib/styles/ColorFunctions.js.map +1 -1
- package/cjs/lib/theming/Emotion.js +1 -1
- package/cjs/lib/theming/Emotion.js.map +1 -1
- package/cjs/lib/theming/ThemeContext.md +1 -1
- package/cjs/lib/utils.d.ts +7 -0
- package/cjs/lib/utils.js +12 -2
- package/cjs/lib/utils.js.map +1 -1
- package/components/Button/Button/Button.js +2 -1
- package/components/Button/Button/Button.js.map +1 -1
- package/components/Button/Button.d.ts +1 -0
- package/components/Button/Button.styles/Button.styles.js +1 -1
- package/components/Button/Button.styles/Button.styles.js.map +1 -1
- package/components/Checkbox/Checkbox/Checkbox.js +2 -2
- package/components/Checkbox/Checkbox/Checkbox.js.map +1 -1
- package/components/Checkbox/Checkbox.styles/Checkbox.styles.js +2 -2
- package/components/Checkbox/Checkbox.styles/Checkbox.styles.js.map +1 -1
- package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js +11 -5
- package/components/CurrencyLabel/CurrencyLabel/CurrencyLabel.js.map +1 -1
- package/components/CurrencyLabel/CurrencyLabel.styles/CurrencyLabel.styles.js +10 -0
- package/components/CurrencyLabel/CurrencyLabel.styles/CurrencyLabel.styles.js.map +1 -0
- package/components/CurrencyLabel/CurrencyLabel.styles/package.json +6 -0
- package/components/CurrencyLabel/CurrencyLabel.styles.d.ts +4 -0
- package/components/FxInput/FxInput/FxInput.js +2 -1
- package/components/FxInput/FxInput/FxInput.js.map +1 -1
- package/components/Kebab/Kebab/Kebab.js +2 -1
- package/components/Kebab/Kebab/Kebab.js.map +1 -1
- package/components/MenuItem/MenuItem.md +1 -1
- package/components/MenuItem/MenuItem.styles/MenuItem.styles.js +1 -1
- package/components/MenuItem/MenuItem.styles/MenuItem.styles.js.map +1 -1
- package/components/Modal/Modal.styles/Modal.styles.js +18 -15
- package/components/Modal/Modal.styles/Modal.styles.js.map +1 -1
- package/components/Modal/Modal.styles.d.ts +1 -0
- package/components/Modal/ModalClose/ModalClose.js +25 -2
- package/components/Modal/ModalClose/ModalClose.js.map +1 -1
- package/components/Paging/Paging.styles/Paging.styles.js +1 -1
- package/components/Paging/Paging.styles/Paging.styles.js.map +1 -1
- package/components/Radio/Radio.styles/Radio.styles.js +1 -1
- package/components/Radio/Radio.styles/Radio.styles.js.map +1 -1
- package/components/SidePage/SidePage/SidePage.js +2 -4
- package/components/SidePage/SidePage/SidePage.js.map +1 -1
- package/components/SidePage/SidePage.d.ts +1 -2
- package/components/SidePage/SidePage.styles/SidePage.styles.js +20 -16
- package/components/SidePage/SidePage.styles/SidePage.styles.js.map +1 -1
- package/components/SidePage/SidePage.styles.d.ts +2 -1
- package/components/SidePage/SidePageHeader/SidePageHeader.js +40 -22
- package/components/SidePage/SidePageHeader/SidePageHeader.js.map +1 -1
- package/components/SidePage/SidePageHeader.d.ts +4 -1
- package/components/Switcher/Switcher/Switcher.js +1 -1
- package/components/Switcher/Switcher/Switcher.js.map +1 -1
- package/components/Switcher/Switcher.styles/Switcher.styles.js +2 -2
- package/components/Switcher/Switcher.styles/Switcher.styles.js.map +1 -1
- package/components/Switcher/Switcher.styles.d.ts +1 -1
- package/components/Tabs/Tab.styles/Tab.styles.js +1 -1
- package/components/Tabs/Tab.styles/Tab.styles.js.map +1 -1
- package/components/Textarea/Textarea/Textarea.js +1 -2
- package/components/Textarea/Textarea/Textarea.js.map +1 -1
- package/components/Textarea/Textarea.d.ts +0 -2
- package/components/Toggle/Toggle/Toggle.js +6 -2
- package/components/Toggle/Toggle/Toggle.js.map +1 -1
- package/components/Toggle/Toggle.d.ts +43 -1
- package/components/Toggle/Toggle.md +70 -9
- package/components/Toggle/Toggle.styles/Toggle.styles.js +18 -12
- package/components/Toggle/Toggle.styles/Toggle.styles.js.map +1 -1
- package/components/Toggle/Toggle.styles.d.ts +2 -0
- package/components/TokenInput/TokenInput/TokenInput.js +24 -2
- package/components/TokenInput/TokenInput/TokenInput.js.map +1 -1
- package/components/TokenInput/TokenInput.d.ts +8 -0
- package/components/Tooltip/Tooltip.styles/Tooltip.styles.js +1 -1
- package/components/Tooltip/Tooltip.styles/Tooltip.styles.js.map +1 -1
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js +2 -1
- package/internal/CustomComboBox/ComboBoxView/ComboBoxView.js.map +1 -1
- package/internal/CustomComboBox/CustomComboBoxReducer/CustomComboBoxReducer.js +3 -2
- package/internal/CustomComboBox/CustomComboBoxReducer/CustomComboBoxReducer.js.map +1 -1
- package/internal/HideBodyVerticalScroll/HideBodyVerticalScroll/HideBodyVerticalScroll.js +4 -4
- package/internal/HideBodyVerticalScroll/HideBodyVerticalScroll/HideBodyVerticalScroll.js.map +1 -1
- package/internal/InputLikeText/InputLikeText/InputLikeText.js +2 -1
- package/internal/InputLikeText/InputLikeText/InputLikeText.js.map +1 -1
- package/internal/PopupMenu/PopupMenu/PopupMenu.js +2 -2
- package/internal/PopupMenu/PopupMenu/PopupMenu.js.map +1 -1
- package/internal/RenderContainer/RenderContainer/RenderContainer.js +2 -1
- package/internal/RenderContainer/RenderContainer/RenderContainer.js.map +1 -1
- package/internal/ThemePlayground/darkTheme/darkTheme.js +3 -3
- package/internal/ThemePlayground/darkTheme/darkTheme.js.map +1 -1
- package/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/internal/icons/CrossIcon/CrossIcon.js +2 -1
- package/internal/icons/CrossIcon/CrossIcon.js.map +1 -1
- package/internal/themes/DefaultTheme/DefaultTheme.js +83 -9
- package/internal/themes/DefaultTheme/DefaultTheme.js.map +1 -1
- package/internal/themes/DefaultTheme.d.ts +16 -5
- package/internal/themes/FlatTheme/FlatTheme.js +0 -1
- package/internal/themes/FlatTheme/FlatTheme.js.map +1 -1
- package/internal/themes/FlatTheme.d.ts +0 -1
- package/internal/themes/Theme8px/Theme8px.js +1 -1
- package/internal/themes/Theme8px/Theme8px.js.map +1 -1
- package/lib/Upgrades/Upgrades.js +13 -0
- package/lib/Upgrades/Upgrades.js.map +1 -1
- package/lib/Upgrades.d.ts +2 -0
- package/lib/events/keyboard/identifiers/identifiers.js +10 -1
- package/lib/events/keyboard/identifiers/identifiers.js.map +1 -1
- package/lib/events/keyboard/identifiers.d.ts +1 -0
- package/lib/locale/LOCALECONTEXT.md +1 -1
- package/lib/styles/ColorFunctions/ColorFunctions.js +1 -1
- package/lib/styles/ColorFunctions/ColorFunctions.js.map +1 -1
- package/lib/theming/Emotion/Emotion.js +1 -1
- package/lib/theming/Emotion/Emotion.js.map +1 -1
- package/lib/theming/ThemeContext.md +1 -1
- package/lib/utils/utils.js +10 -0
- package/lib/utils/utils.js.map +1 -1
- package/lib/utils.d.ts +7 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Checkbox.styles.ts"],"names":["globalClasses","box","styles","root","t","css","checkboxLineHeight","checkboxFontSize","checkboxPaddingY","checkboxHoverBg","checkboxShadowHover","checkboxShadowActive","checkboxActiveBg","rootChecked","checkboxCheckedHoverShadow","checkboxCheckedHoverBg","checkboxCheckedActiveBg","checkboxCheckedActiveShadow","rootFallback","rootWrapperIE11","boxSize","checkboxBoxSize","checkboxBorderWidthCompensation","checkboxTextColorDefault","checkboxBorder","checkboxBorderRadius","checkboxShadow","checkboxBg","input","boxWarning","checkboxOutlineColorFocus","checkboxOutlineWidth","checkboxBorderColorWarning","boxError","checkboxBorderColorError","boxChecked","checkboxCheckedBg","checkboxCheckedColor","checkboxCheckedShadow","boxFocus","checkboxBorderColorFocus","boxDisabled","checkboxShadowDisabled","checkboxBgDisabled","checkboxTextColorDisabled","disabled","iconFixBaseline","iconUnchecked","caption","checkboxLabelGap","captionIE11"],"mappings":"oSAAA,oD;;;AAGO,IAAMA,aAAa,GAAG,qBAAO,UAAP,EAAmB;AAC9CC,EAAAA,GAAG,EAAE,KADyC,EAAnB,CAAtB,C;;;AAIA,IAAMC,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP
|
|
1
|
+
{"version":3,"sources":["Checkbox.styles.ts"],"names":["globalClasses","box","styles","root","t","css","checkboxLineHeight","checkboxFontSize","checkboxPaddingY","checkboxHoverBg","checkboxShadowHover","checkboxShadowActive","checkboxActiveBg","rootChecked","checkboxCheckedHoverShadow","checkboxCheckedHoverBg","checkboxCheckedActiveBg","checkboxCheckedActiveShadow","rootFallback","rootWrapperIE11","boxSize","checkboxBoxSize","checkboxBorderWidthCompensation","checkboxTextColorDefault","checkboxBorder","checkboxBorderRadius","checkboxShadow","checkboxBg","input","boxWarning","checkboxOutlineColorFocus","checkboxOutlineWidth","checkboxBorderColorWarning","boxError","checkboxBorderColorError","boxChecked","checkboxCheckedBg","checkboxCheckedColor","checkboxCheckedShadow","boxFocus","checkboxBorderColorFocus","boxDisabled","checkboxShadowDisabled","checkboxBgDisabled","checkboxTextColorDisabled","disabled","iconFixBaseline","iconUnchecked","caption","checkboxLabelGap","captionIE11"],"mappings":"oSAAA,oD;;;AAGO,IAAMA,aAAa,GAAG,qBAAO,UAAP,EAAmB;AAC9CC,EAAAA,GAAG,EAAE,KADyC,EAAnB,CAAtB,C;;;AAIA,IAAMC,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;;;;;AAKiBD,IAAAA,CAAC,CAACE,kBALnB;AAMeF,IAAAA,CAAC,CAACG,gBANjB;AAOaH,IAAAA,CAAC,CAACI,gBAPf;;AASaR,IAAAA,aAAa,CAACC,GAT3B;AAUkBG,IAAAA,CAAC,CAACK,eAVpB;AAWkBL,IAAAA,CAAC,CAACM,mBAXpB;;;AAccV,IAAAA,aAAa,CAACC,GAd5B;AAekBG,IAAAA,CAAC,CAACO,oBAfpB;AAgBkBP,IAAAA,CAAC,CAACQ,gBAhBpB;;;AAmBD,GArBgC;;AAuBjCC,EAAAA,WAvBiC,uBAuBrBT,CAvBqB,EAuBX;AACpB,eAAOC,YAAP;AACaL,IAAAA,aAAa,CAACC,GAD3B;AAEkBG,IAAAA,CAAC,CAACU,0BAFpB;AAGkBV,IAAAA,CAAC,CAACW,sBAHpB;;;AAMcf,IAAAA,aAAa,CAACC,GAN5B;AAOkBG,IAAAA,CAAC,CAACY,uBAPpB;AAQkBZ,IAAAA,CAAC,CAACa,2BARpB;;;AAWD,GAnCgC;;AAqCjCC,EAAAA,YArCiC,0BAqClB;AACb,eAAOb,YAAP;;;;;;;;AAQD,GA9CgC;;AAgDjCc,EAAAA,eAhDiC,6BAgDf;AAChB,eAAOd,YAAP;;;AAGD,GApDgC;;AAsDjCJ,EAAAA,GAtDiC,eAsD7BG,CAtD6B,EAsDnB;AACZ,QAAMgB,OAAO,aAAWhB,CAAC,CAACiB,eAAb,eAAsCjB,CAAC,CAACkB,+BAAxC,MAAb;AACA,eAAOjB,YAAP;;;;;AAKWe,IAAAA,OALX;AAMYA,IAAAA,OANZ;;AAQehB,IAAAA,CAAC,CAACG,gBARjB;AASWH,IAAAA,CAAC,CAACmB,wBATb;AAUYnB,IAAAA,CAAC,CAACoB,cAVd;AAWmBpB,IAAAA,CAAC,CAACqB,oBAXrB;AAYgBrB,IAAAA,CAAC,CAACsB,cAZlB;AAagBtB,IAAAA,CAAC,CAACuB,UAblB;;AAeYvB,IAAAA,CAAC,CAACkB,+BAfd;;AAiBD,GAzEgC;;AA2EjCM,EAAAA,KA3EiC,mBA2EzB;AACN,eAAOvB,YAAP;;;;;;;;AAQD,GApFgC;;AAsFjCwB,EAAAA,UAtFiC,sBAsFtBzB,CAtFsB,EAsFZ;AACnB,eAAOC,YAAP;AACgCD,IAAAA,CAAC,CAAC0B,yBADlC;AAEY1B,IAAAA,CAAC,CAAC2B,oBAFd,EAEsC3B,CAAC,CAAC4B,0BAFxC;;AAID,GA3FgC;;AA6FjCC,EAAAA,QA7FiC,oBA6FxB7B,CA7FwB,EA6Fd;AACjB,eAAOC,YAAP;AACgCD,IAAAA,CAAC,CAAC0B,yBADlC;AAEY1B,IAAAA,CAAC,CAAC2B,oBAFd,EAEsC3B,CAAC,CAAC8B,wBAFxC;;AAID,GAlGgC;;AAoGjCC,EAAAA,UApGiC,sBAoGtB/B,CApGsB,EAoGZ;AACnB,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACgC,iBADlB;AAEWhC,IAAAA,CAAC,CAACiC,oBAFb;AAGgBjC,IAAAA,CAAC,CAACkC,qBAHlB;;AAKD,GA1GgC;;AA4GjCC,EAAAA,QA5GiC,oBA4GxBnC,CA5GwB,EA4Gd;AACjB,eAAOC,YAAP;AACgCD,IAAAA,CAAC,CAAC0B,yBADlC;AAEY1B,IAAAA,CAAC,CAAC2B,oBAFd,EAEsC3B,CAAC,CAACoC,wBAFxC;;AAID,GAjHgC;;AAmHjCC,EAAAA,WAnHiC,uBAmHrBrC,CAnHqB,EAmHX;AACpB,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACsC,sBADlB;AAEgBtC,IAAAA,CAAC,CAACuC,kBAFlB;AAGWvC,IAAAA,CAAC,CAACwC,yBAHb;;AAKD,GAzHgC;;AA2HjCC,EAAAA,QA3HiC,oBA2HxBzC,CA3HwB,EA2Hd;AACjB,eAAOC,YAAP;AACWD,IAAAA,CAAC,CAACwC,yBADb;;;AAID,GAhIgC;;AAkIjCE,EAAAA,eAlIiC,6BAkIf;AAChB,eAAOzC,YAAP;;;AAGD,GAtIgC;;AAwIjC0C,EAAAA,aAxIiC,2BAwIjB;AACd,eAAO1C,YAAP;;;AAGD,GA5IgC;;AA8IjC2C,EAAAA,OA9IiC,mBA8IzB5C,CA9IyB,EA8If;AAChB,eAAOC,YAAP;AACWD,IAAAA,CAAC,CAACmB,wBADb;AAEkBnB,IAAAA,CAAC,CAAC6C,gBAFpB;;AAID,GAnJgC;;AAqJjCC,EAAAA,WArJiC,yBAqJnB;AACZ,eAAO7C,YAAP;;;AAGD,GAzJgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const globalClasses = prefix('checkbox')({\n box: 'box',\n});\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n return css`\n display: inline-flex;\n align-items: baseline;\n cursor: pointer;\n position: relative;\n line-height: ${t.checkboxLineHeight};\n font-size: ${t.checkboxFontSize};\n padding: ${t.checkboxPaddingY} 0;\n\n &:hover .${globalClasses.box} {\n background: ${t.checkboxHoverBg};\n box-shadow: ${t.checkboxShadowHover};\n }\n\n &:active .${globalClasses.box} {\n box-shadow: ${t.checkboxShadowActive};\n background: ${t.checkboxActiveBg};\n }\n `;\n },\n\n rootChecked(t: Theme) {\n return css`\n &:hover .${globalClasses.box} {\n box-shadow: ${t.checkboxCheckedHoverShadow};\n background: ${t.checkboxCheckedHoverBg};\n }\n\n &:active .${globalClasses.box} {\n background: ${t.checkboxCheckedActiveBg};\n box-shadow: ${t.checkboxCheckedActiveShadow};\n }\n `;\n },\n\n rootFallback() {\n return css`\n display: inline-table;\n\n & > * {\n // fix root's :active state in IE11 that gets blocked by nested elements\n pointer-events: none;\n }\n `;\n },\n\n rootWrapperIE11() {\n return css`\n display: inline;\n `;\n },\n\n box(t: Theme) {\n const boxSize = `calc(${t.checkboxBoxSize} - 2 * ${t.checkboxBorderWidthCompensation})`;\n return css`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: ${boxSize};\n height: ${boxSize};\n flex: none;\n font-size: ${t.checkboxFontSize};\n color: ${t.checkboxTextColorDefault};\n border: ${t.checkboxBorder};\n border-radius: ${t.checkboxBorderRadius};\n box-shadow: ${t.checkboxShadow};\n background: ${t.checkboxBg};\n align-self: baseline;\n margin: ${t.checkboxBorderWidthCompensation};\n `;\n },\n\n input() {\n return css`\n display: inline-block;\n opacity: 0;\n width: 0;\n height: 0;\n position: absolute;\n z-index: -1;\n `;\n },\n\n boxWarning(t: Theme) {\n return css`\n box-shadow: inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\n 0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorWarning} !important; // override hover and active\n `;\n },\n\n boxError(t: Theme) {\n return css`\n box-shadow: inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\n 0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorError} !important; // override hover and active\n `;\n },\n\n boxChecked(t: Theme) {\n return css`\n background: ${t.checkboxCheckedBg};\n color: ${t.checkboxCheckedColor};\n box-shadow: ${t.checkboxCheckedShadow};\n `;\n },\n\n boxFocus(t: Theme) {\n return css`\n box-shadow: inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\n 0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorFocus} !important; // override hover and active\n `;\n },\n\n boxDisabled(t: Theme) {\n return css`\n box-shadow: ${t.checkboxShadowDisabled} !important; // override hover and active\n background: ${t.checkboxBgDisabled} !important; // override hover and active\n color: ${t.checkboxTextColorDisabled};\n `;\n },\n\n disabled(t: Theme) {\n return css`\n color: ${t.checkboxTextColorDisabled};\n cursor: default;\n `;\n },\n\n iconFixBaseline() {\n return css`\n margin-top: -2px;\n `;\n },\n\n iconUnchecked() {\n return css`\n color: transparent;\n `;\n },\n\n caption(t: Theme) {\n return css`\n color: ${t.checkboxTextColorDefault};\n padding-left: ${t.checkboxLabelGap};\n `;\n },\n\n captionIE11() {\n return css`\n display: table-cell;\n `;\n },\n});\n"]}
|
|
@@ -3,6 +3,9 @@
|
|
|
3
3
|
var _constants = require("../CurrencyInput/constants");
|
|
4
4
|
var _CurrencyHelper = require("../CurrencyInput/CurrencyHelper");
|
|
5
5
|
var _CommonWrapper = require("../../internal/CommonWrapper");
|
|
6
|
+
var _ThemeContext = require("../../lib/theming/ThemeContext");
|
|
7
|
+
|
|
8
|
+
var _CurrencyLabel = require("./CurrencyLabel.styles");
|
|
6
9
|
|
|
7
10
|
|
|
8
11
|
|
|
@@ -21,12 +24,18 @@ var defaultProps = {
|
|
|
21
24
|
var CurrencyLabel = function CurrencyLabel(props) {var
|
|
22
25
|
value = props.value,fractionDigits = props.fractionDigits,currencySymbol = props.currencySymbol;
|
|
23
26
|
return /*#__PURE__*/(
|
|
24
|
-
_react.default.createElement(
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null,
|
|
28
|
+
function (theme) {
|
|
29
|
+
return /*#__PURE__*/(
|
|
30
|
+
_react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
|
|
31
|
+
_react.default.createElement("span", { className: _CurrencyLabel.styles.root(theme) },
|
|
32
|
+
_CurrencyHelper.CurrencyHelper.format(value, { fractionDigits: fractionDigits }),
|
|
33
|
+
currencySymbol && String.fromCharCode(0xa0) /* */,
|
|
34
|
+
currencySymbol)));
|
|
35
|
+
|
|
36
|
+
|
|
29
37
|
|
|
38
|
+
}));
|
|
30
39
|
|
|
31
40
|
|
|
32
41
|
};exports.CurrencyLabel = CurrencyLabel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["CurrencyLabel.tsx"],"names":["defaultProps","fractionDigits","CurrencyLabel","props","value","currencySymbol","CurrencyHelper","format","String","fromCharCode","__KONTUR_REACT_UI__","propTypes","MAX_SAFE_DIGITS","Error","destructString","fraction","length","Number","isInteger"],"mappings":"kLAAA;;AAEA;AACA;AACA;;;;;;;;;;;;AAYO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,cAAc,EAAE,CADU,EAArB,C;;;AAIA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA4C;AAC/DC,EAAAA,KAD+D,GACrBD,KADqB,CAC/DC,KAD+D,CACxDH,cADwD,GACrBE,KADqB,CACxDF,cADwD,CACxCI,cADwC,GACrBF,KADqB,CACxCE,cADwC;AAEvE;AACE,iCAAC,4BAAD,
|
|
1
|
+
{"version":3,"sources":["CurrencyLabel.tsx"],"names":["defaultProps","fractionDigits","CurrencyLabel","props","value","currencySymbol","theme","styles","root","CurrencyHelper","format","String","fromCharCode","__KONTUR_REACT_UI__","propTypes","MAX_SAFE_DIGITS","Error","destructString","fraction","length","Number","isInteger"],"mappings":"kLAAA;;AAEA;AACA;AACA;AACA;;AAEA;;;;;;;;;;;;AAYO,IAAMA,YAAY,GAAG;AAC1BC,EAAAA,cAAc,EAAE,CADU,EAArB,C;;;AAIA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAA4C;AAC/DC,EAAAA,KAD+D,GACrBD,KADqB,CAC/DC,KAD+D,CACxDH,cADwD,GACrBE,KADqB,CACxDF,cADwD,CACxCI,cADwC,GACrBF,KADqB,CACxCE,cADwC;AAEvE;AACE,iCAAC,0BAAD,CAAc,QAAd;AACG,cAACC,KAAD,EAAW;AACV;AACE,qCAAC,4BAAD,EAAmBH,KAAnB;AACE,+CAAM,SAAS,EAAEI,sBAAOC,IAAP,CAAYF,KAAZ,CAAjB;AACGG,uCAAeC,MAAf,CAAsBN,KAAtB,EAA6B,EAAEH,cAAc,EAAdA,cAAF,EAA7B,CADH;AAEGI,QAAAA,cAAc,IAAIM,MAAM,CAACC,YAAP,CAAoB,IAApB,CAFrB,CAE+C,YAF/C;AAGGP,QAAAA,cAHH,CADF,CADF;;;;AASD,KAXH,CADF;;;AAeD,CAjBM,C;;AAmBPH,aAAa,CAACW,mBAAd,GAAoC,eAApC;;AAEAX,aAAa,CAACF,YAAd,GAA6BA,YAA7B;;AAEAE,aAAa,CAACY,SAAd,GAA0B;AACxBb,EAAAA,cAAc,EAAE,wBAACE,KAAD,EAAqD;AACnE,QAAIA,KAAK,CAACF,cAAN,GAAuBc,0BAA3B,EAA4C;AAC1C,aAAO,IAAIC,KAAJ;AACL,0DAAkDD,0BAAlD,4EADK,CAAP;;;AAID,KANkE;;AAQ9CN,mCAAeQ,cAAf,CAA8BN,MAAM,CAACR,KAAK,CAACC,KAAP,CAApC,KAAsD,EAAEc,QAAQ,EAAE,EAAZ,EARR,CAQ3DA,QAR2D,QAQ3DA,QAR2D;AASnE,QAAIA,QAAQ,CAACC,MAAT,GAAkBhB,KAAK,CAACF,cAA5B,EAA4C;AAC1C,aAAO,IAAIe,KAAJ;AACL,gIADK,CAAP;;;AAID;;AAED,QAAI,CAACI,MAAM,CAACC,SAAP,CAAiBlB,KAAK,CAACF,cAAvB,CAAL,EAA6C;AAC3C,aAAO,IAAIe,KAAJ,2GAAP;;;AAGD;;AAED,WAAO,IAAP;AACD,GAxBuB,EAA1B","sourcesContent":["import React from 'react';\n\nimport { MAX_SAFE_DIGITS } from '../CurrencyInput/constants';\nimport { CurrencyHelper } from '../CurrencyInput/CurrencyHelper';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { styles } from './CurrencyLabel.styles';\n\nexport interface CurrencyLabelProps extends CommonProps {\n /**\n * Минимальное количество отображаемых знаков после запятой\n * @default 2\n */\n fractionDigits: number;\n value: number;\n currencySymbol?: React.ReactNode;\n}\n\nexport const defaultProps = {\n fractionDigits: 2,\n};\n\nexport const CurrencyLabel = (props: CurrencyLabelProps): JSX.Element => {\n const { value, fractionDigits, currencySymbol } = props;\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n return (\n <CommonWrapper {...props}>\n <span className={styles.root(theme)}>\n {CurrencyHelper.format(value, { fractionDigits })}\n {currencySymbol && String.fromCharCode(0xa0) /* */}\n {currencySymbol}\n </span>\n </CommonWrapper>\n );\n }}\n </ThemeContext.Consumer>\n );\n};\n\nCurrencyLabel.__KONTUR_REACT_UI__ = 'CurrencyLabel';\n\nCurrencyLabel.defaultProps = defaultProps;\n\nCurrencyLabel.propTypes = {\n fractionDigits: (props: CurrencyLabelProps & typeof defaultProps) => {\n if (props.fractionDigits > MAX_SAFE_DIGITS) {\n return new Error(\n `[CurrencyLabel]: Prop 'fractionDigits' exceeds ${MAX_SAFE_DIGITS}.` +\n `\\nSee https://tech.skbkontur.ru/react-ui/#/CurrencyInput?id=why15`,\n );\n }\n\n const { fraction } = CurrencyHelper.destructString(String(props.value)) || { fraction: '' };\n if (fraction.length > props.fractionDigits) {\n return new Error(\n `[CurrencyLabel]: Prop 'fractionDigits' less than fractional part of the 'value' property,` +\n `'value' will not be cutted`,\n );\n }\n\n if (!Number.isInteger(props.fractionDigits)) {\n return new Error(\n `[CurrencyLabel]: Prop 'fractionDigits' is not integer, fraction part of these property will not be used`,\n );\n }\n\n return null;\n },\n};\n"]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var styles = (0, _Emotion.memoizeStyle)({
|
|
5
|
+
root: function root(t) {
|
|
6
|
+
return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n color: ", ";\n "])),
|
|
7
|
+
t.textColorDefault);
|
|
8
|
+
|
|
9
|
+
} });exports.styles = styles;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["CurrencyLabel.styles.ts"],"names":["styles","root","t","css","textColorDefault"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;AACWD,IAAAA,CAAC,CAACE,gBADb;;AAGD,GALgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n return css`\n color: ${t.textColorDefault};\n `;\n },\n});\n"]}
|
|
@@ -56,7 +56,7 @@ FxInput = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)
|
|
|
56
56
|
|
|
57
57
|
|
|
58
58
|
renderMain = function (props) {var
|
|
59
|
-
type = props.type,onRestore = props.onRestore,auto = props.auto,rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["type", "onRestore", "auto"]);
|
|
59
|
+
type = props.type,onRestore = props.onRestore,auto = props.auto,refInput = props.refInput,rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["type", "onRestore", "auto", "refInput"]);
|
|
60
60
|
var inputProps = {
|
|
61
61
|
align: 'right' };
|
|
62
62
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["FxInput.tsx"],"names":["FxInput","input","getProps","defaultProps","renderMain","props","type","onRestore","auto","rest","inputProps","align","button","leftIcon","size","borderless","disabled","width","
|
|
1
|
+
{"version":3,"sources":["FxInput.tsx"],"names":["FxInput","input","getProps","defaultProps","renderMain","props","type","onRestore","auto","refInput","rest","inputProps","align","button","leftIcon","size","borderless","disabled","width","value","onValueChange","focus","blur","element","render","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","string"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Button } from '../Button';\nimport { Group } from '../Group';\nimport { Input, InputProps, InputType } from '../Input';\nimport { CurrencyInput, CurrencyInputProps } from '../CurrencyInput';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { Override } from '../../typings/utility-types';\nimport { FunctionIcon, UndoIcon } from '../../internal/icons/16px';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\n\nexport interface FxInputProps\n extends CommonProps,\n Override<\n CurrencyInputProps,\n {\n /** Авто-режим */\n auto?: boolean;\n /** Тип инпута */\n type?: 'currency' | InputProps['type'];\n /** onRestore */\n onRestore?: () => void;\n /** onValueChange */\n onValueChange: CurrencyInputProps['onValueChange'] | InputProps['onValueChange'];\n /** Значение */\n value?: React.ReactText;\n /** ref Input'а */\n refInput?: (element: CurrencyInput | Input | null) => void;\n /** Убрать лишние нули после запятой */\n hideTrailingZeros?: boolean;\n }\n > {}\n\n/** Принимает все свойства `Input`'a */\nexport class FxInput extends React.Component<FxInputProps> {\n public static __KONTUR_REACT_UI__ = 'FxInput';\n\n public static propTypes = {\n auto: PropTypes.bool,\n type: PropTypes.string,\n };\n\n public static defaultProps = {\n width: 250,\n type: 'text',\n value: '',\n };\n\n private input: Input | CurrencyInput | null = null;\n\n private getProps = createPropsGetter(FxInput.defaultProps);\n\n public render() {\n return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n }\n\n public renderMain = (props: CommonWrapperRestProps<FxInputProps>) => {\n const { type, onRestore, auto, refInput, ...rest } = props;\n const inputProps: Partial<CurrencyInputProps> = {\n align: 'right',\n };\n\n let button = null;\n\n if (auto) {\n inputProps.leftIcon = <FunctionIcon />;\n } else {\n button = (\n <Button\n size={this.props.size}\n narrow\n onClick={this.props.onRestore}\n borderless={this.props.borderless}\n disabled={this.props.disabled}\n >\n <UndoIcon />\n </Button>\n );\n }\n\n return (\n <Group width={this.props.width}>\n {button}\n {this.getProps().type === 'currency' ? (\n <CurrencyInput\n {...inputProps}\n {...rest}\n width={'100%'}\n ref={this.refInput}\n value={this.props.value as CurrencyInputProps['value']}\n onValueChange={this.props.onValueChange as CurrencyInputProps['onValueChange']}\n />\n ) : (\n <Input\n {...inputProps}\n {...rest}\n width={'100%'}\n ref={this.refInput}\n type={this.props.type as InputType}\n value={this.props.value as InputProps['value']}\n onValueChange={this.props.onValueChange as InputProps['onValueChange']}\n />\n )}\n </Group>\n );\n };\n\n /**\n * @public\n */\n public focus = () => {\n if (this.input) {\n this.input.focus();\n }\n };\n\n /**\n * @public\n */\n public blur = () => {\n if (this.input) {\n this.input.blur();\n }\n };\n\n private refInput = (element: Input | CurrencyInput | null) => {\n this.input = element;\n\n if (this.props.refInput) {\n this.props.refInput(this.input);\n }\n };\n}\n"]}
|
|
@@ -129,6 +129,7 @@ Kebab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(K
|
|
|
129
129
|
|
|
130
130
|
|
|
131
131
|
|
|
132
|
+
|
|
132
133
|
|
|
133
134
|
|
|
134
135
|
renderCaption = function (captionProps) {var _cx;var
|
|
@@ -210,7 +211,7 @@ Kebab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(K
|
|
|
210
211
|
_this.setState({
|
|
211
212
|
focusedByTab: false });
|
|
212
213
|
|
|
213
|
-
};return _this;}var _proto = Kebab.prototype;_proto.componentDidMount = function componentDidMount() {/** addListener'у нужен колбэк в аргумент */this.listener = LayoutEvents.addListener(function () {return undefined;});};_proto.componentWillUnmount = function componentWillUnmount() {this.listener.remove();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupPinOffset: theme.kebabPinOffset, popupMargin: theme.kebabMargin, popupPinSize: theme.kebabPinSize }, theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _this$props = this.props,disabled = _this$props.disabled,positions = _this$props.positions;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_PopupMenu.PopupMenu, { popupHasPin: true, positions: positions, onChangeMenuState: this.handleChangeMenuState, caption: this.renderCaption, disableAnimations: this.props.disableAnimations }, !disabled && this.props.children));};_proto.
|
|
214
|
+
};return _this;}var _proto = Kebab.prototype;_proto.componentDidMount = function componentDidMount() {/** addListener'у нужен колбэк в аргумент */this.listener = LayoutEvents.addListener(function () {return undefined;});};_proto.componentWillUnmount = function componentWillUnmount() {this.listener.remove();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupPinOffset: theme.kebabPinOffset, popupMargin: theme.kebabMargin, popupPinSize: theme.kebabPinSize }, theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _this$props = this.props,disabled = _this$props.disabled,positions = _this$props.positions;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_PopupMenu.PopupMenu, { popupHasPin: true, positions: positions, onChangeMenuState: this.handleChangeMenuState, caption: this.renderCaption, disableAnimations: this.props.disableAnimations, menuMaxHeight: this.props.menuMaxHeight }, !disabled && this.props.children));};_proto.
|
|
214
215
|
|
|
215
216
|
renderIcon = function renderIcon() {var _cx2;
|
|
216
217
|
return /*#__PURE__*/(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Kebab.tsx"],"names":["Kebab","state","opened","focusedByTab","anchor","theme","listener","remove","undefined","renderCaption","captionProps","disabled","props","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","styles","kebab","focused","renderIcon","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","onOpen","onClose","requestAnimationFrame","keyListener","isTabPressed","componentDidMount","LayoutEvents","addListener","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","renderMain","positions","disableAnimations","children","icon","iconsmall","size","iconmedium","iconlarge","React","Component","__KONTUR_REACT_UI__","propTypes","defaultProps","isTestEnv","PropTypes","node","bool","menuMaxHeight","oneOfType","string","number","func"],"mappings":"wUAAA;AACA;;AAEA;AACA;AACA;AACA;;;AAGA;;AAEA;AACA;AACA;AACA;AACA;;AAEA,uC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCaA,K;;;;;;;;;;;;;;AAcJC,IAAAA,K,GAAQ;AACbC,MAAAA,MAAM,EAAE,KADK;AAEbC,MAAAA,YAAY,EAAE,KAFD;AAGbC,MAAAA,MAAM,EAAE,IAHK,E;;;AAMPC,IAAAA,K;;AAEAC,IAAAA,Q;;AAEJ;AACFC,MAAAA,MAAM,EAAE,0BAAMC,SAAN,EADN,E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDIC,IAAAA,a,GAAgB,UAACC,YAAD,EAAyC;AACvDC,MAAAA,QADuD,GAC1C,MAAKC,KADqC,CACvDD,QADuD;AAE/D,UAAME,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,KAAD,EAAgD;AAC3E,YAAI,CAACH,QAAL,EAAe;AACb,gBAAKE,oBAAL,CAA0BC,KAA1B,EAAiCJ,YAAY,CAACK,QAA9C;AACD;AACF,OAJD;;AAMA,UAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AAC/B,YAAI,CAACL,QAAL,EAAe;AACbD,UAAAA,YAAY,CAACO,UAAb;AACD;AACF,OAJD;;AAMA;AACE;AACE,UAAA,QAAQ,EAAEN,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAD5B;AAEE,UAAA,OAAO,EAAEK,kBAFX;AAGE,UAAA,SAAS,EAAEH,oBAHb;AAIE,UAAA,OAAO,EAAE,MAAKK,WAJhB;AAKE,UAAA,MAAM,EAAE,MAAKC,UALf;AAME,UAAA,SAAS,EAAE;AACRC,wBAAOC,KAAP,CAAa,MAAKhB,KAAlB,CADQ,IACmB,IADnB;AAERe,wBAAOlB,MAAP,CAAc,MAAKG,KAAnB,CAFQ,IAEoBK,YAAY,CAACR,MAFjC;AAGRkB,wBAAOT,QAAP,EAHQ,IAGYA,QAHZ;AAIRS,wBAAOE,OAAP,CAAe,MAAKjB,KAApB,CAJQ,IAIqB,MAAKJ,KAAL,CAAWE,YAJhC,OANb;;;AAaG,cAAKoB,UAAL,EAbH,CADF;;;AAiBD,K;;AAEOV,IAAAA,oB,GAAuB;AAC7BW,IAAAA,CAD6B;AAE7BT,IAAAA,QAF6B;AAG1B;AACH,UAAI,2BAASU,uBAAT,EAAqBC,uBAArB,EAAiCC,+BAAjC,EAAqDH,CAArD,CAAJ,EAA6D;AAC3DA,QAAAA,CAAC,CAACI,cAAF;AACAb,QAAAA,QAAQ,CAAC,IAAD,CAAR;AACD;AACF,K;;AAEOc,IAAAA,qB,GAAwB,UAACC,QAAD,EAAoBC,YAApB,EAAoD;AAClF,YAAKC,QAAL;AACE;AACE9B,QAAAA,MAAM,EAAE4B,QADV;AAEE3B,QAAAA,YAAY,EAAE,CAAC2B,QAAD,IAAaC,YAF7B,EADF;;AAKE,kBAAM;AACJ,YAAI,MAAKnB,KAAL,CAAWD,QAAf,EAAyB;AACvB;AACD;;AAED,YAAI,MAAKV,KAAL,CAAWC,MAAf,EAAuB;AACrB,gBAAKU,KAAL,CAAWqB,MAAX;AACD,SAFD,MAEO;AACL,gBAAKrB,KAAL,CAAWsB,OAAX;AACD;AACF,OAfH;;AAiBD,K;;AAEOhB,IAAAA,W,GAAc,YAAM;AAC1B,UAAI,CAAC,MAAKN,KAAL,CAAWD,QAAhB,EAA0B;AACxB;AACA;AACAwB,QAAAA,qBAAqB,CAAC,YAAM;AAC1B,cAAIC,yBAAYC,YAAhB,EAA8B;AAC5B,kBAAKL,QAAL,CAAc,EAAE7B,YAAY,EAAE,IAAhB,EAAd;AACD;AACF,SAJoB,CAArB;AAKD;AACF,K;;AAEOgB,IAAAA,U,GAAa,YAAM;AACzB,YAAKa,QAAL,CAAc;AACZ7B,QAAAA,YAAY,EAAE,KADF,EAAd;;AAGD,K,mDAjIMmC,iB,GAAP,6BAA2B,CACzB,4CACA,KAAKhC,QAAL,GAAgBiC,YAAY,CAACC,WAAb,CAAyB,oBAAMhC,SAAN,EAAzB,CAAhB,CACD,C,QAEMiC,oB,GAAP,gCAA8B,CAC5B,KAAKnC,QAAL,CAAcC,MAAd,GACD,C,QAEMmC,M,GAAP,kBAA6B,mBAC3B,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACrC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBACE,6BAAC,0BAAD,CAAc,QAAd,IACE,KAAK,EAAEsC,2BAAaC,MAAb,CACL,EACEC,cAAc,EAAExC,KAAK,CAACyC,cADxB,EAEEC,WAAW,EAAE1C,KAAK,CAAC2C,WAFrB,EAGEC,YAAY,EAAE5C,KAAK,CAAC6C,YAHtB,EADK,EAML7C,KANK,CADT,IAUG,MAAI,CAAC8C,UAAL,EAVH,CADF,CAcD,CAjBH,CADF,CAqBD,C,QAEOA,U,GAAR,sBAAqB,mBACa,KAAKvC,KADlB,CACXD,QADW,eACXA,QADW,CACDyC,SADC,eACDA,SADC,CAEnB,oBACE,6BAAC,4BAAD,EAAmB,KAAKxC,KAAxB,eACE,6BAAC,oBAAD,IACE,WAAW,MADb,EAEE,SAAS,EAAEwC,SAFb,EAGE,iBAAiB,EAAE,KAAKvB,qBAH1B,EAIE,OAAO,EAAE,KAAKpB,aAJhB,EAKE,iBAAiB,EAAE,KAAKG,KAAL,CAAWyC,iBALhC,IAOG,CAAC1C,QAAD,IAAa,KAAKC,KAAL,CAAW0C,QAP3B,CADF,CADF,CAaD,C;;AAmFO/B,EAAAA,U,GAAR,sBAAqB;AACnB;AACE;AACE,QAAA,SAAS,EAAE;AACRH,sBAAOmC,IAAP,EADQ,IACQ,IADR;AAERnC,sBAAOoC,SAAP,EAFQ,IAEa,KAAK5C,KAAL,CAAW6C,IAAX,KAAoB,OAFjC;AAGRrC,sBAAOsC,UAAP,EAHQ,IAGc,KAAK9C,KAAL,CAAW6C,IAAX,KAAoB,QAHlC;AAIRrC,sBAAOuC,SAAP,EAJQ,IAIa,KAAK/C,KAAL,CAAW6C,IAAX,KAAoB,OAJjC,QADb;;;AAQG,WAAK7C,KAAL,CAAW2C,IARd,CADF;;;AAYD,G,gBA5KwBK,eAAMC,S,wBAApB7D,K,CACG8D,mB,GAAsB,O,CADzB9D,K,CAGG+D,S,GAAY,E,CAHf/D,K,CAKGgE,Y,GAAe,EAC3B/B,MAAM,EAAE,0BAAMzB,SAAN,EADmB,EAE3B0B,OAAO,EAAE,2BAAM1B,SAAN,EAFkB,EAG3B4C,SAAS,EAAE,CAAC,aAAD,EAAgB,cAAhB,EAAgC,UAAhC,EAA4C,WAA5C,CAHgB,EAI3BK,IAAI,EAAE,OAJqB,EAK3BJ,iBAAiB,EAAEY,6BALQ,EAM3BV,IAAI,eAAE,6BAAC,iBAAD,OANqB,E;;;AA0K/BvD,KAAK,CAAC+D,SAAN,GAAkB;AAChBT,EAAAA,QAAQ,EAAEY,mBAAUC,IADJ;AAEhBxD,EAAAA,QAAQ,EAAEuD,mBAAUE,IAFJ;AAGhBC,EAAAA,aAAa,EAAEH,mBAAUI,SAAV,CAAoB,CAACJ,mBAAUK,MAAX,EAAmBL,mBAAUM,MAA7B,CAApB,CAHC;;AAKhB;AACF;AACA;AACEf,EAAAA,IAAI,EAAES,mBAAUK,MARA;;AAUhB;AACF;AACA;AACErC,EAAAA,OAAO,EAAEgC,mBAAUO,IAbH;;AAehB;AACF;AACA;AACExC,EAAAA,MAAM,EAAEiC,mBAAUO,IAlBF,EAAlB","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { PopupMenu, PopupMenuCaptionProps } from '../../internal/PopupMenu';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupPosition } from '../../internal/Popup';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MenuKebabIcon } from '../../internal/icons/16px';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Kebab.styles';\n\nexport interface KebabProps extends CommonProps {\n disabled?: boolean;\n /**\n * Функция вызываемая при закрытии выпадашки\n * @default () => undefined\n */\n onClose: () => void;\n /**\n * Функция вызываемая при открытии выпадашки\n * @default () => undefined\n */\n onOpen: () => void;\n size: 'small' | 'medium' | 'large';\n /**\n * Список позиций доступных для расположения выпадашки\n * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использоваться первая из этого списка\n * @default ['bottom left', 'bottom right', 'top left', 'top right']\n */\n positions: PopupPosition[];\n menuMaxHeight?: number | string;\n /**\n * Не показывать анимацию\n */\n disableAnimations: boolean;\n /**\n * Кастомная иконка\n */\n icon?: React.ReactNode;\n}\n\nexport interface KebabState {\n anchor: Nullable<HTMLElement>;\n focusedByTab: boolean;\n opened: boolean;\n}\n\nexport class Kebab extends React.Component<KebabProps, KebabState> {\n public static __KONTUR_REACT_UI__ = 'Kebab';\n\n public static propTypes = {};\n\n public static defaultProps = {\n onOpen: () => undefined,\n onClose: () => undefined,\n positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n size: 'small',\n disableAnimations: isTestEnv,\n icon: <MenuKebabIcon />,\n };\n\n public state = {\n opened: false,\n focusedByTab: false,\n anchor: null,\n };\n\n private theme!: Theme;\n\n private listener: {\n remove: () => void;\n } = {\n remove: () => undefined,\n };\n\n public componentDidMount() {\n /** addListener'у нужен колбэк в аргумент */\n this.listener = LayoutEvents.addListener(() => undefined);\n }\n\n public componentWillUnmount() {\n this.listener.remove();\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupPinOffset: theme.kebabPinOffset,\n popupMargin: theme.kebabMargin,\n popupPinSize: theme.kebabPinSize,\n },\n theme,\n )}\n >\n {this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { disabled, positions } = this.props;\n return (\n <CommonWrapper {...this.props}>\n <PopupMenu\n popupHasPin\n positions={positions}\n onChangeMenuState={this.handleChangeMenuState}\n caption={this.renderCaption}\n disableAnimations={this.props.disableAnimations}\n >\n {!disabled && this.props.children}\n </PopupMenu>\n </CommonWrapper>\n );\n }\n\n private renderCaption = (captionProps: PopupMenuCaptionProps) => {\n const { disabled } = this.props;\n const handleCaptionKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!disabled) {\n this.handleCaptionKeyDown(event, captionProps.openMenu);\n }\n };\n\n const handleCaptionClick = () => {\n if (!disabled) {\n captionProps.toggleMenu();\n }\n };\n\n return (\n <span\n tabIndex={disabled ? -1 : 0}\n onClick={handleCaptionClick}\n onKeyDown={handleCaptionKeyDown}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n className={cx({\n [styles.kebab(this.theme)]: true,\n [styles.opened(this.theme)]: captionProps.opened,\n [styles.disabled()]: disabled,\n [styles.focused(this.theme)]: this.state.focusedByTab,\n })}\n >\n {this.renderIcon()}\n </span>\n );\n };\n\n private handleCaptionKeyDown = (\n e: React.KeyboardEvent<HTMLDivElement>,\n openMenu: PopupMenuCaptionProps['openMenu'],\n ) => {\n if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n e.preventDefault();\n openMenu(true);\n }\n };\n\n private handleChangeMenuState = (isOpened: boolean, restoreFocus: boolean): void => {\n this.setState(\n {\n opened: isOpened,\n focusedByTab: !isOpened && restoreFocus,\n },\n () => {\n if (this.props.disabled) {\n return;\n }\n\n if (this.state.opened) {\n this.props.onOpen();\n } else {\n this.props.onClose();\n }\n },\n );\n };\n\n private handleFocus = () => {\n if (!this.props.disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n }\n };\n\n private handleBlur = () => {\n this.setState({\n focusedByTab: false,\n });\n };\n\n private renderIcon() {\n return (\n <div\n className={cx({\n [styles.icon()]: true,\n [styles.iconsmall()]: this.props.size === 'small',\n [styles.iconmedium()]: this.props.size === 'medium',\n [styles.iconlarge()]: this.props.size === 'large',\n })}\n >\n {this.props.icon}\n </div>\n );\n }\n}\n\nKebab.propTypes = {\n children: PropTypes.node,\n disabled: PropTypes.bool,\n menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n /**\n * Размер кебаба small 14px | large 20px\n */\n size: PropTypes.string,\n\n /**\n * Коллбек, вызывающийся перед закрытием кебаба\n */\n onClose: PropTypes.func,\n\n /**\n * Коллбек, вызывающийся перед открытием кебаба\n */\n onOpen: PropTypes.func,\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["Kebab.tsx"],"names":["Kebab","state","opened","focusedByTab","anchor","theme","listener","remove","undefined","renderCaption","captionProps","disabled","props","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","styles","kebab","focused","renderIcon","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","onOpen","onClose","requestAnimationFrame","keyListener","isTabPressed","componentDidMount","LayoutEvents","addListener","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","renderMain","positions","disableAnimations","menuMaxHeight","children","icon","iconsmall","size","iconmedium","iconlarge","React","Component","__KONTUR_REACT_UI__","propTypes","defaultProps","isTestEnv","PropTypes","node","bool","oneOfType","string","number","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { PopupMenu, PopupMenuCaptionProps } from '../../internal/PopupMenu';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupPosition } from '../../internal/Popup';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MenuKebabIcon } from '../../internal/icons/16px';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Kebab.styles';\n\nexport interface KebabProps extends CommonProps {\n disabled?: boolean;\n /**\n * Функция вызываемая при закрытии выпадашки\n * @default () => undefined\n */\n onClose: () => void;\n /**\n * Функция вызываемая при открытии выпадашки\n * @default () => undefined\n */\n onOpen: () => void;\n size: 'small' | 'medium' | 'large';\n /**\n * Список позиций доступных для расположения выпадашки\n * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использоваться первая из этого списка\n * @default ['bottom left', 'bottom right', 'top left', 'top right']\n */\n positions: PopupPosition[];\n menuMaxHeight?: number | string;\n /**\n * Не показывать анимацию\n */\n disableAnimations: boolean;\n /**\n * Кастомная иконка\n */\n icon?: React.ReactNode;\n}\n\nexport interface KebabState {\n anchor: Nullable<HTMLElement>;\n focusedByTab: boolean;\n opened: boolean;\n}\n\nexport class Kebab extends React.Component<KebabProps, KebabState> {\n public static __KONTUR_REACT_UI__ = 'Kebab';\n\n public static propTypes = {};\n\n public static defaultProps = {\n onOpen: () => undefined,\n onClose: () => undefined,\n positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n size: 'small',\n disableAnimations: isTestEnv,\n icon: <MenuKebabIcon />,\n };\n\n public state = {\n opened: false,\n focusedByTab: false,\n anchor: null,\n };\n\n private theme!: Theme;\n\n private listener: {\n remove: () => void;\n } = {\n remove: () => undefined,\n };\n\n public componentDidMount() {\n /** addListener'у нужен колбэк в аргумент */\n this.listener = LayoutEvents.addListener(() => undefined);\n }\n\n public componentWillUnmount() {\n this.listener.remove();\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <ThemeContext.Provider\n value={ThemeFactory.create(\n {\n popupPinOffset: theme.kebabPinOffset,\n popupMargin: theme.kebabMargin,\n popupPinSize: theme.kebabPinSize,\n },\n theme,\n )}\n >\n {this.renderMain()}\n </ThemeContext.Provider>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { disabled, positions } = this.props;\n return (\n <CommonWrapper {...this.props}>\n <PopupMenu\n popupHasPin\n positions={positions}\n onChangeMenuState={this.handleChangeMenuState}\n caption={this.renderCaption}\n disableAnimations={this.props.disableAnimations}\n menuMaxHeight={this.props.menuMaxHeight}\n >\n {!disabled && this.props.children}\n </PopupMenu>\n </CommonWrapper>\n );\n }\n\n private renderCaption = (captionProps: PopupMenuCaptionProps) => {\n const { disabled } = this.props;\n const handleCaptionKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!disabled) {\n this.handleCaptionKeyDown(event, captionProps.openMenu);\n }\n };\n\n const handleCaptionClick = () => {\n if (!disabled) {\n captionProps.toggleMenu();\n }\n };\n\n return (\n <span\n tabIndex={disabled ? -1 : 0}\n onClick={handleCaptionClick}\n onKeyDown={handleCaptionKeyDown}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n className={cx({\n [styles.kebab(this.theme)]: true,\n [styles.opened(this.theme)]: captionProps.opened,\n [styles.disabled()]: disabled,\n [styles.focused(this.theme)]: this.state.focusedByTab,\n })}\n >\n {this.renderIcon()}\n </span>\n );\n };\n\n private handleCaptionKeyDown = (\n e: React.KeyboardEvent<HTMLDivElement>,\n openMenu: PopupMenuCaptionProps['openMenu'],\n ) => {\n if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n e.preventDefault();\n openMenu(true);\n }\n };\n\n private handleChangeMenuState = (isOpened: boolean, restoreFocus: boolean): void => {\n this.setState(\n {\n opened: isOpened,\n focusedByTab: !isOpened && restoreFocus,\n },\n () => {\n if (this.props.disabled) {\n return;\n }\n\n if (this.state.opened) {\n this.props.onOpen();\n } else {\n this.props.onClose();\n }\n },\n );\n };\n\n private handleFocus = () => {\n if (!this.props.disabled) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n }\n };\n\n private handleBlur = () => {\n this.setState({\n focusedByTab: false,\n });\n };\n\n private renderIcon() {\n return (\n <div\n className={cx({\n [styles.icon()]: true,\n [styles.iconsmall()]: this.props.size === 'small',\n [styles.iconmedium()]: this.props.size === 'medium',\n [styles.iconlarge()]: this.props.size === 'large',\n })}\n >\n {this.props.icon}\n </div>\n );\n }\n}\n\nKebab.propTypes = {\n children: PropTypes.node,\n disabled: PropTypes.bool,\n menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n /**\n * Размер кебаба small 14px | large 20px\n */\n size: PropTypes.string,\n\n /**\n * Коллбек, вызывающийся перед закрытием кебаба\n */\n onClose: PropTypes.func,\n\n /**\n * Коллбек, вызывающийся перед открытием кебаба\n */\n onOpen: PropTypes.func,\n};\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
```jsx harmony
|
|
2
2
|
import { Link } from '@skbkontur/react-ui';
|
|
3
3
|
|
|
4
|
-
<MenuItem href="
|
|
4
|
+
<MenuItem href="//tech.skbkontur.ru/react-ui/" component={({ href, ...rest }) => <Link to={href} {...rest} />}>
|
|
5
5
|
Awesome link
|
|
6
6
|
</MenuItem>;
|
|
7
7
|
```
|
|
@@ -10,16 +10,17 @@ var styles = (0, _Emotion.memoizeStyle)({
|
|
|
10
10
|
var paddingX = legacyPaddingX !== 0 ? parseFloat(t.menuItemPaddingX) + legacyPaddingX + "px" : t.menuItemPaddingX;
|
|
11
11
|
var paddingY = legacyPaddingY !== 0 ? parseFloat(t.menuItemPaddingY) + legacyPaddingY + "px" : t.menuItemPaddingY;
|
|
12
12
|
|
|
13
|
-
return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n ", ";\n\n cursor: pointer;\n display: block;\n line-height: ", ";\n font-size: ", ";\n padding: ", " ", " ", " ", ";\n position: relative;\n text-decoration: none;\n\n button& {\n min-width: 100%;\n }\n "])),
|
|
13
|
+
return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n ", ";\n\n cursor: pointer;\n display: block;\n line-height: ", ";\n font-size: ", ";\n padding: ", " ", " ", " ", ";\n position: relative;\n text-decoration: none;\n color: ", ";\n\n button& {\n min-width: 100%;\n }\n "])),
|
|
14
14
|
(0, _Mixins.resetButton)(),
|
|
15
15
|
|
|
16
16
|
|
|
17
17
|
|
|
18
18
|
t.menuItemLineHeight,
|
|
19
19
|
t.menuItemFontSize,
|
|
20
|
-
t.menuItemPaddingY, paddingX, paddingY, t.menuItemPaddingX
|
|
20
|
+
t.menuItemPaddingY, paddingX, paddingY, t.menuItemPaddingX,
|
|
21
21
|
|
|
22
22
|
|
|
23
|
+
t.menuItemTextColor);
|
|
23
24
|
|
|
24
25
|
|
|
25
26
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["MenuItem.styles.ts"],"names":["styles","root","t","legacyPaddingX","parseFloat","menuItemLegacyPaddingX","legacyPaddingY","menuItemLegacyPaddingY","paddingX","menuItemPaddingX","paddingY","menuItemPaddingY","css","menuItemLineHeight","menuItemFontSize","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledColor","link","menuItemLinkColor","loose","withIcon","menuItemPaddingForIcon","comment","menuItemCommentColor","commentHover","menuItemCommentColorHover","icon","menuItemIconWidth","parseInt","menuItemIconLegacyMargin","menuItemIconLegacyShift"],"mappings":";AACA;AACA,iD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,QAAMC,cAAc,GAAGC,UAAU,CAACF,CAAC,CAACG,sBAAH,CAAjC;AACA,QAAMC,cAAc,GAAGF,UAAU,CAACF,CAAC,CAACK,sBAAH,CAAjC;;AAEA,QAAMC,QAAQ,GAAGL,cAAc,KAAK,CAAnB,GAA0BC,UAAU,CAACF,CAAC,CAACO,gBAAH,CAAV,GAAiCN,cAA3D,UAAgFD,CAAC,CAACO,gBAAnG;AACA,QAAMC,QAAQ,GAAGJ,cAAc,KAAK,CAAnB,GAA0BF,UAAU,CAACF,CAAC,CAACS,gBAAH,CAAV,GAAiCL,cAA3D,UAAgFJ,CAAC,CAACS,gBAAnG;;AAEA,eAAOC,YAAP;AACI,8BADJ;;;;AAKiBV,IAAAA,CAAC,CAACW,kBALnB;AAMeX,IAAAA,CAAC,CAACY,gBANjB;AAOaZ,IAAAA,CAAC,CAACS,gBAPf,EAOmCH,QAPnC,EAO+CE,QAP/C,EAO2DR,CAAC,CAACO,gBAP7D
|
|
1
|
+
{"version":3,"sources":["MenuItem.styles.ts"],"names":["styles","root","t","legacyPaddingX","parseFloat","menuItemLegacyPaddingX","legacyPaddingY","menuItemLegacyPaddingY","paddingX","menuItemPaddingX","paddingY","menuItemPaddingY","css","menuItemLineHeight","menuItemFontSize","menuItemTextColor","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledColor","link","menuItemLinkColor","loose","withIcon","menuItemPaddingForIcon","comment","menuItemCommentColor","commentHover","menuItemCommentColorHover","icon","menuItemIconWidth","parseInt","menuItemIconLegacyMargin","menuItemIconLegacyShift"],"mappings":";AACA;AACA,iD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,QAAMC,cAAc,GAAGC,UAAU,CAACF,CAAC,CAACG,sBAAH,CAAjC;AACA,QAAMC,cAAc,GAAGF,UAAU,CAACF,CAAC,CAACK,sBAAH,CAAjC;;AAEA,QAAMC,QAAQ,GAAGL,cAAc,KAAK,CAAnB,GAA0BC,UAAU,CAACF,CAAC,CAACO,gBAAH,CAAV,GAAiCN,cAA3D,UAAgFD,CAAC,CAACO,gBAAnG;AACA,QAAMC,QAAQ,GAAGJ,cAAc,KAAK,CAAnB,GAA0BF,UAAU,CAACF,CAAC,CAACS,gBAAH,CAAV,GAAiCL,cAA3D,UAAgFJ,CAAC,CAACS,gBAAnG;;AAEA,eAAOC,YAAP;AACI,8BADJ;;;;AAKiBV,IAAAA,CAAC,CAACW,kBALnB;AAMeX,IAAAA,CAAC,CAACY,gBANjB;AAOaZ,IAAAA,CAAC,CAACS,gBAPf,EAOmCH,QAPnC,EAO+CE,QAP/C,EAO2DR,CAAC,CAACO,gBAP7D;;;AAUWP,IAAAA,CAAC,CAACa,iBAVb;;;;;;AAgBD,GAxBgC;;AA0BjCC,EAAAA,KA1BiC,iBA0B3Bd,CA1B2B,EA0BjB;AACd;AACA,eAAOU,YAAP;AACgBV,IAAAA,CAAC,CAACe,eADlB;AAEWf,IAAAA,CAAC,CAACgB,kBAFb;;AAID,GAhCgC;AAiCjCC,EAAAA,QAjCiC,oBAiCxBjB,CAjCwB,EAiCd;AACjB,eAAOU,YAAP;AACgBV,IAAAA,CAAC,CAACkB,kBADlB;;AAGD,GArCgC;AAsCjCC,EAAAA,QAtCiC,oBAsCxBnB,CAtCwB,EAsCd;AACjB,eAAOU,YAAP;;AAEWV,IAAAA,CAAC,CAACoB,qBAFb;;;AAKD,GA5CgC;AA6CjCC,EAAAA,IA7CiC,gBA6C5BrB,CA7C4B,EA6ClB;AACb,eAAOU,YAAP;AACWV,IAAAA,CAAC,CAACsB,iBADb;;AAGD,GAjDgC;AAkDjCC,EAAAA,KAlDiC,mBAkDzB;AACN,eAAOb,YAAP;;;AAGD,GAtDgC;AAuDjCc,EAAAA,QAvDiC,oBAuDxBxB,CAvDwB,EAuDd;AACjB,eAAOU,YAAP;AACkBV,IAAAA,CAAC,CAACyB,sBADpB;;AAGD,GA3DgC;AA4DjCC,EAAAA,OA5DiC,mBA4DzB1B,CA5DyB,EA4Df;AAChB,eAAOU,YAAP;AACWV,IAAAA,CAAC,CAAC2B,oBADb;;;AAID,GAjEgC;AAkEjCC,EAAAA,YAlEiC,wBAkEpB5B,CAlEoB,EAkEV;AACrB,eAAOU,YAAP;AACWV,IAAAA,CAAC,CAAC6B,yBADb;;;AAID,GAvEgC;AAwEjCC,EAAAA,IAxEiC,gBAwE5B9B,CAxE4B,EAwElB;AACb,eAAOU,YAAP;AACWV,IAAAA,CAAC,CAAC+B,iBADb;;;AAIUC,IAAAA,QAAQ,CAAChC,CAAC,CAACO,gBAAH,CAAR,GAA+ByB,QAAQ,CAAChC,CAAC,CAACiC,wBAAH,CAJjD;AAKSjC,IAAAA,CAAC,CAACS,gBALX;AAM0BT,IAAAA,CAAC,CAACkC,uBAN5B;;AAQD,GAjFgC,EAAb,CAAf,C","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n const legacyPaddingX = parseFloat(t.menuItemLegacyPaddingX);\n const legacyPaddingY = parseFloat(t.menuItemLegacyPaddingY);\n\n const paddingX = legacyPaddingX !== 0 ? `${parseFloat(t.menuItemPaddingX) + legacyPaddingX}px` : t.menuItemPaddingX;\n const paddingY = legacyPaddingY !== 0 ? `${parseFloat(t.menuItemPaddingY) + legacyPaddingY}px` : t.menuItemPaddingY;\n\n return css`\n ${resetButton()};\n\n cursor: pointer;\n display: block;\n line-height: ${t.menuItemLineHeight};\n font-size: ${t.menuItemFontSize};\n padding: ${t.menuItemPaddingY} ${paddingX} ${paddingY} ${t.menuItemPaddingX};\n position: relative;\n text-decoration: none;\n color: ${t.menuItemTextColor};\n\n button& {\n min-width: 100%;\n }\n `;\n },\n\n hover(t: Theme) {\n // Color with !important in purpose to override `a:hover`\n return css`\n background: ${t.menuItemHoverBg} !important;\n color: ${t.menuItemHoverColor} !important;\n `;\n },\n selected(t: Theme) {\n return css`\n background: ${t.menuItemSelectedBg} !important;\n `;\n },\n disabled(t: Theme) {\n return css`\n background: transparent;\n color: ${t.menuItemDisabledColor};\n cursor: default;\n `;\n },\n link(t: Theme) {\n return css`\n color: ${t.menuItemLinkColor};\n `;\n },\n loose() {\n return css`\n padding-left: 15px;\n `;\n },\n withIcon(t: Theme) {\n return css`\n padding-left: ${t.menuItemPaddingForIcon};\n `;\n },\n comment(t: Theme) {\n return css`\n color: ${t.menuItemCommentColor};\n white-space: normal;\n `;\n },\n commentHover(t: Theme) {\n return css`\n color: ${t.menuItemCommentColorHover};\n opacity: 0.6;\n `;\n },\n icon(t: Theme) {\n return css`\n width: ${t.menuItemIconWidth};\n display: inline-block;\n position: absolute;\n left: ${parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin)}px;\n top: ${t.menuItemPaddingY};\n transform: translateY(${t.menuItemIconLegacyShift});\n `;\n },\n});\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
|
|
2
2
|
|
|
3
|
-
var _Mixins = require("../../lib/styles/Mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
|
|
3
|
+
var _Mixins = require("../../lib/styles/Mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
|
|
4
4
|
|
|
5
5
|
var styles = (0, _Emotion.memoizeStyle)({
|
|
6
6
|
root: function root() {
|
|
@@ -78,7 +78,7 @@ var styles = (0, _Emotion.memoizeStyle)({
|
|
|
78
78
|
|
|
79
79
|
close: function close(t) {
|
|
80
80
|
var padding = parseInt(t.modalCloseButtonPadding);
|
|
81
|
-
return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n ", ";\n position: absolute;\n display: flex;\n right: ", "px;\n top: ", "px;\n background: none;\n background: transparent;\n cursor: pointer;\n color: ", ";\n text-align: center;\n vertical-align: middle;\n padding: ", ";\n margin: -", ";\n\n &:
|
|
81
|
+
return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n ", ";\n position: absolute;\n display: flex;\n right: ", "px;\n top: ", "px;\n background: none;\n background: transparent;\n cursor: pointer;\n color: ", ";\n text-align: center;\n vertical-align: middle;\n padding: ", ";\n margin: -", ";\n\n &:hover {\n color: ", ";\n }\n\n & > svg {\n width: ", ";\n height: ", ";\n box-sizing: content-box;\n }\n "])),
|
|
82
82
|
(0, _Mixins.resetButton)(),
|
|
83
83
|
|
|
84
84
|
|
|
@@ -94,15 +94,10 @@ var styles = (0, _Emotion.memoizeStyle)({
|
|
|
94
94
|
t.modalCloseButtonClickArea,
|
|
95
95
|
|
|
96
96
|
|
|
97
|
-
|
|
98
97
|
t.modalCloseButtonHoverColor,
|
|
99
98
|
|
|
100
99
|
|
|
101
100
|
|
|
102
|
-
t.borderColorFocus,
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
101
|
t.modalCloseIconSize,
|
|
107
102
|
t.modalCloseIconSize);
|
|
108
103
|
|
|
@@ -133,24 +128,32 @@ var styles = (0, _Emotion.memoizeStyle)({
|
|
|
133
128
|
|
|
134
129
|
},
|
|
135
130
|
|
|
131
|
+
focus: function focus(t) {
|
|
132
|
+
return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n color: ", ";\n outline: 2px solid ", ";\n "])),
|
|
133
|
+
t.modalCloseButtonHoverColor,
|
|
134
|
+
t.borderColorFocus);
|
|
135
|
+
|
|
136
|
+
},
|
|
137
|
+
|
|
136
138
|
headerWrapper: function headerWrapper() {
|
|
137
|
-
return (0, _Emotion.css)(
|
|
139
|
+
return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n position: relative;\n "])));
|
|
138
140
|
|
|
139
141
|
|
|
140
142
|
},
|
|
141
143
|
|
|
142
144
|
header: function header(t) {
|
|
143
|
-
return (0, _Emotion.css)(
|
|
145
|
+
return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n font-size: ", ";\n line-height: ", ";\n padding: ", " ", " ", " ", ";\n overflow-wrap: break-word;\n word-wrap: break-word;\n color: ", ";\n "])),
|
|
144
146
|
t.modalHeaderFontSize,
|
|
145
147
|
t.modalHeaderLineHeight,
|
|
146
|
-
t.modalHeaderPaddingTop, t.modalPaddingRight, t.modalHeaderPaddingBottom, t.modalPaddingLeft
|
|
148
|
+
t.modalHeaderPaddingTop, t.modalPaddingRight, t.modalHeaderPaddingBottom, t.modalPaddingLeft,
|
|
147
149
|
|
|
148
150
|
|
|
151
|
+
t.modalHeaderTextColor);
|
|
149
152
|
|
|
150
153
|
},
|
|
151
154
|
|
|
152
155
|
body: function body(t) {
|
|
153
|
-
return (0, _Emotion.css)(
|
|
156
|
+
return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n padding: 0 ", " ", " ", ";\n "])),
|
|
154
157
|
t.modalPaddingRight, t.modalBodyPaddingBottom, t.modalPaddingLeft);
|
|
155
158
|
|
|
156
159
|
},
|
|
@@ -159,25 +162,25 @@ var styles = (0, _Emotion.memoizeStyle)({
|
|
|
159
162
|
var rightPadding =
|
|
160
163
|
2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);
|
|
161
164
|
|
|
162
|
-
return (0, _Emotion.css)(
|
|
165
|
+
return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n padding-right: ", "px;\n "])),
|
|
163
166
|
rightPadding);
|
|
164
167
|
|
|
165
168
|
},
|
|
166
169
|
|
|
167
170
|
footer: function footer(t) {
|
|
168
|
-
return (0, _Emotion.css)(
|
|
171
|
+
return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n padding: ", " ", " ", " ", ";\n "])),
|
|
169
172
|
t.modalFooterPaddingTop, t.modalPaddingRight, t.modalFooterPaddingBottom, t.modalPaddingLeft);
|
|
170
173
|
|
|
171
174
|
},
|
|
172
175
|
|
|
173
176
|
footerWrapper: function footerWrapper() {
|
|
174
|
-
return (0, _Emotion.css)(
|
|
177
|
+
return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n position: relative;\n "])));
|
|
175
178
|
|
|
176
179
|
|
|
177
180
|
},
|
|
178
181
|
|
|
179
182
|
panel: function panel(t) {
|
|
180
|
-
return (0, _Emotion.css)(
|
|
183
|
+
return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n padding-top: ", ";\n padding-bottom: ", ";\n background: ", ";\n "])),
|
|
181
184
|
t.modalFooterPanelPaddingTop,
|
|
182
185
|
t.modalFooterPanelPaddingBottom,
|
|
183
186
|
t.modalFooterBg);
|
|
@@ -185,7 +188,7 @@ var styles = (0, _Emotion.memoizeStyle)({
|
|
|
185
188
|
},
|
|
186
189
|
|
|
187
190
|
fixedHeader: function fixedHeader(t) {
|
|
188
|
-
return (0, _Emotion.css)(
|
|
191
|
+
return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n margin-bottom: 10px;\n padding-bottom: ", ";\n background: ", ";\n\n &:after {\n bottom: 11px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ", ";\n }\n "])),
|
|
189
192
|
|
|
190
193
|
t.modalFixedHeaderPaddingBottom,
|
|
191
194
|
t.modalFixedHeaderBg,
|
|
@@ -204,7 +207,7 @@ var styles = (0, _Emotion.memoizeStyle)({
|
|
|
204
207
|
},
|
|
205
208
|
|
|
206
209
|
fixedFooter: function fixedFooter(t) {
|
|
207
|
-
return (0, _Emotion.css)(
|
|
210
|
+
return (0, _Emotion.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n padding-top: 20px;\n margin-top: 10px;\n background: ", ";\n\n &:before {\n top: 11px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ", ";\n }\n "])),
|
|
208
211
|
|
|
209
212
|
|
|
210
213
|
t.modalFixedHeaderBg,
|
|
@@ -223,25 +226,25 @@ var styles = (0, _Emotion.memoizeStyle)({
|
|
|
223
226
|
},
|
|
224
227
|
|
|
225
228
|
headerAddPadding: function headerAddPadding() {
|
|
226
|
-
return (0, _Emotion.css)(
|
|
229
|
+
return (0, _Emotion.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2.default)(["\n padding-bottom: 22px;\n "])));
|
|
227
230
|
|
|
228
231
|
|
|
229
232
|
},
|
|
230
233
|
|
|
231
234
|
bodyWithoutHeader: function bodyWithoutHeader(t) {
|
|
232
|
-
return (0, _Emotion.css)(
|
|
235
|
+
return (0, _Emotion.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteralLoose2.default)(["\n padding-top: ", ";\n "])),
|
|
233
236
|
t.modalPaddingTop);
|
|
234
237
|
|
|
235
238
|
},
|
|
236
239
|
|
|
237
240
|
bodyWithoutPadding: function bodyWithoutPadding() {
|
|
238
|
-
return (0, _Emotion.css)(
|
|
241
|
+
return (0, _Emotion.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteralLoose2.default)(["\n padding: 0;\n "])));
|
|
239
242
|
|
|
240
243
|
|
|
241
244
|
},
|
|
242
245
|
|
|
243
246
|
bodyAddPaddingForPanel: function bodyAddPaddingForPanel(t) {
|
|
244
|
-
return (0, _Emotion.css)(
|
|
247
|
+
return (0, _Emotion.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteralLoose2.default)(["\n padding-bottom: ", ";\n "])),
|
|
245
248
|
t.modalPaddingBottom);
|
|
246
249
|
|
|
247
250
|
} });exports.styles = styles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Modal.styles.ts"],"names":["styles","root","css","bg","t","modalBackBg","modalBackOpacity","container","window","bgDefault","centerContainer","modalAdaptiveThreshold","alignTop","close","padding","parseInt","modalCloseButtonPadding","modalCloseButtonColor","modalCloseButtonClickArea","modalCloseButtonHoverColor","borderColorFocus","modalCloseIconSize","closeWrapper","paddingBottom","modalCloseButtonBottomPadding","legacyGap","modalCloseWrapperLegacyGap","legacyShift","modalCloseButtonLegacyShift","blockSizeX","blockSizeY","disabled","modalCloseButtonDisabledColor","headerWrapper","header","modalHeaderFontSize","modalHeaderLineHeight","modalHeaderPaddingTop","modalPaddingRight","modalHeaderPaddingBottom","modalPaddingLeft","body","modalBodyPaddingBottom","headerWithClose","rightPadding","modalCloseLegacyGap","footer","modalFooterPaddingTop","modalFooterPaddingBottom","footerWrapper","panel","modalFooterPanelPaddingTop","modalFooterPanelPaddingBottom","modalFooterBg","fixedHeader","modalFixedHeaderPaddingBottom","modalFixedHeaderBg","modalFixedHeaderShadow","fixedFooter","modalFixedFooterShadow","headerAddPadding","bodyWithoutHeader","modalPaddingTop","bodyWithoutPadding","bodyAddPaddingForPanel","modalPaddingBottom"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n root() {\n return css`\n height: 100%;\n left: 0;\n position: fixed;\n top: 0;\n width: 100%;\n `;\n },\n\n bg(t: Theme) {\n return css`\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n background: ${t.modalBackBg};\n opacity: ${t.modalBackOpacity};\n `;\n },\n\n container() {\n return css`\n position: relative;\n white-space: nowrap;\n text-align: center;\n height: 100%;\n overflow-y: auto;\n outline: none;\n\n &::before {\n content: '';\n display: inline-block;\n vertical-align: middle;\n height: 80%; /* to vertical align modal 40%/60% of screen height */\n }\n `;\n },\n\n window(t: Theme) {\n return css`\n position: relative;\n white-space: normal;\n margin: auto;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n background: ${t.bgDefault};\n `;\n },\n\n centerContainer(t: Theme) {\n return css`\n position: relative;\n display: inline-block;\n text-align: left;\n vertical-align: middle;\n box-sizing: border-box;\n z-index: 10;\n margin: 40px 20px;\n\n @media screen and (max-width: ${t.modalAdaptiveThreshold}) {\n margin: 0;\n width: 100%;\n }\n `;\n },\n\n alignTop() {\n return css`\n vertical-align: top;\n `;\n },\n\n close(t: Theme) {\n const padding = parseInt(t.modalCloseButtonPadding);\n return css`\n ${resetButton()};\n position: absolute;\n display: flex;\n right: ${padding}px;\n top: ${padding}px;\n background: none;\n background: transparent;\n cursor: pointer;\n color: ${t.modalCloseButtonColor};\n text-align: center;\n vertical-align: middle;\n padding: ${t.modalCloseButtonClickArea};\n margin: -${t.modalCloseButtonClickArea};\n\n &:focus,\n &:hover {\n color: ${t.modalCloseButtonHoverColor};\n }\n\n &:focus {\n outline: 2px solid ${t.borderColorFocus};\n }\n\n & > svg {\n width: ${t.modalCloseIconSize};\n height: ${t.modalCloseIconSize};\n box-sizing: content-box;\n }\n `;\n },\n\n closeWrapper(t: Theme) {\n const padding = parseInt(t.modalCloseButtonPadding);\n const paddingBottom = parseInt(t.modalCloseButtonBottomPadding);\n const legacyGap = parseInt(t.modalCloseWrapperLegacyGap);\n const legacyShift = parseInt(t.modalCloseButtonLegacyShift);\n const blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;\n const blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;\n return css`\n position: relative;\n float: right;\n width: ${blockSizeX + legacyGap}px;\n height: ${blockSizeY}px;\n `;\n },\n\n disabled(t: Theme) {\n return css`\n pointer-events: none;\n cursor: default;\n color: ${t.modalCloseButtonDisabledColor};\n `;\n },\n\n headerWrapper() {\n return css`\n position: relative;\n `;\n },\n\n header(t: Theme) {\n return css`\n font-size: ${t.modalHeaderFontSize};\n line-height: ${t.modalHeaderLineHeight};\n padding: ${t.modalHeaderPaddingTop} ${t.modalPaddingRight} ${t.modalHeaderPaddingBottom} ${t.modalPaddingLeft};\n overflow-wrap: break-word;\n word-wrap: break-word;\n `;\n },\n\n body(t: Theme) {\n return css`\n padding: 0 ${t.modalPaddingRight} ${t.modalBodyPaddingBottom} ${t.modalPaddingLeft};\n `;\n },\n\n headerWithClose(t: Theme) {\n const rightPadding =\n 2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);\n\n return css`\n padding-right: ${rightPadding}px;\n `;\n },\n\n footer(t: Theme) {\n return css`\n padding: ${t.modalFooterPaddingTop} ${t.modalPaddingRight} ${t.modalFooterPaddingBottom} ${t.modalPaddingLeft};\n `;\n },\n\n footerWrapper() {\n return css`\n position: relative;\n `;\n },\n\n panel(t: Theme) {\n return css`\n padding-top: ${t.modalFooterPanelPaddingTop};\n padding-bottom: ${t.modalFooterPanelPaddingBottom};\n background: ${t.modalFooterBg};\n `;\n },\n\n fixedHeader(t: Theme) {\n return css`\n margin-bottom: 10px;\n padding-bottom: ${t.modalFixedHeaderPaddingBottom};\n background: ${t.modalFixedHeaderBg};\n\n &:after {\n bottom: 11px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.modalFixedHeaderShadow};\n }\n `;\n },\n\n fixedFooter(t: Theme) {\n return css`\n padding-top: 20px;\n margin-top: 10px;\n background: ${t.modalFixedHeaderBg};\n\n &:before {\n top: 11px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.modalFixedFooterShadow};\n }\n `;\n },\n\n headerAddPadding() {\n return css`\n padding-bottom: 22px;\n `;\n },\n\n bodyWithoutHeader(t: Theme) {\n return css`\n padding-top: ${t.modalPaddingTop};\n `;\n },\n\n bodyWithoutPadding() {\n return css`\n padding: 0;\n `;\n },\n\n bodyAddPaddingForPanel(t: Theme) {\n return css`\n padding-bottom: ${t.modalPaddingBottom};\n `;\n },\n});\n"]}
|
|
1
|
+
{"version":3,"sources":["Modal.styles.ts"],"names":["styles","root","css","bg","t","modalBackBg","modalBackOpacity","container","window","bgDefault","centerContainer","modalAdaptiveThreshold","alignTop","close","padding","parseInt","modalCloseButtonPadding","modalCloseButtonColor","modalCloseButtonClickArea","modalCloseButtonHoverColor","modalCloseIconSize","closeWrapper","paddingBottom","modalCloseButtonBottomPadding","legacyGap","modalCloseWrapperLegacyGap","legacyShift","modalCloseButtonLegacyShift","blockSizeX","blockSizeY","disabled","modalCloseButtonDisabledColor","focus","borderColorFocus","headerWrapper","header","modalHeaderFontSize","modalHeaderLineHeight","modalHeaderPaddingTop","modalPaddingRight","modalHeaderPaddingBottom","modalPaddingLeft","modalHeaderTextColor","body","modalBodyPaddingBottom","headerWithClose","rightPadding","modalCloseLegacyGap","footer","modalFooterPaddingTop","modalFooterPaddingBottom","footerWrapper","panel","modalFooterPanelPaddingTop","modalFooterPanelPaddingBottom","modalFooterBg","fixedHeader","modalFixedHeaderPaddingBottom","modalFixedHeaderBg","modalFixedHeaderShadow","fixedFooter","modalFixedFooterShadow","headerAddPadding","bodyWithoutHeader","modalPaddingTop","bodyWithoutPadding","bodyAddPaddingForPanel","modalPaddingBottom"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n root() {\n return css`\n height: 100%;\n left: 0;\n position: fixed;\n top: 0;\n width: 100%;\n `;\n },\n\n bg(t: Theme) {\n return css`\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n background: ${t.modalBackBg};\n opacity: ${t.modalBackOpacity};\n `;\n },\n\n container() {\n return css`\n position: relative;\n white-space: nowrap;\n text-align: center;\n height: 100%;\n overflow-y: auto;\n outline: none;\n\n &::before {\n content: '';\n display: inline-block;\n vertical-align: middle;\n height: 80%; /* to vertical align modal 40%/60% of screen height */\n }\n `;\n },\n\n window(t: Theme) {\n return css`\n position: relative;\n white-space: normal;\n margin: auto;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n background: ${t.bgDefault};\n `;\n },\n\n centerContainer(t: Theme) {\n return css`\n position: relative;\n display: inline-block;\n text-align: left;\n vertical-align: middle;\n box-sizing: border-box;\n z-index: 10;\n margin: 40px 20px;\n\n @media screen and (max-width: ${t.modalAdaptiveThreshold}) {\n margin: 0;\n width: 100%;\n }\n `;\n },\n\n alignTop() {\n return css`\n vertical-align: top;\n `;\n },\n\n close(t: Theme) {\n const padding = parseInt(t.modalCloseButtonPadding);\n return css`\n ${resetButton()};\n position: absolute;\n display: flex;\n right: ${padding}px;\n top: ${padding}px;\n background: none;\n background: transparent;\n cursor: pointer;\n color: ${t.modalCloseButtonColor};\n text-align: center;\n vertical-align: middle;\n padding: ${t.modalCloseButtonClickArea};\n margin: -${t.modalCloseButtonClickArea};\n\n &:hover {\n color: ${t.modalCloseButtonHoverColor};\n }\n\n & > svg {\n width: ${t.modalCloseIconSize};\n height: ${t.modalCloseIconSize};\n box-sizing: content-box;\n }\n `;\n },\n\n closeWrapper(t: Theme) {\n const padding = parseInt(t.modalCloseButtonPadding);\n const paddingBottom = parseInt(t.modalCloseButtonBottomPadding);\n const legacyGap = parseInt(t.modalCloseWrapperLegacyGap);\n const legacyShift = parseInt(t.modalCloseButtonLegacyShift);\n const blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;\n const blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;\n return css`\n position: relative;\n float: right;\n width: ${blockSizeX + legacyGap}px;\n height: ${blockSizeY}px;\n `;\n },\n\n disabled(t: Theme) {\n return css`\n pointer-events: none;\n cursor: default;\n color: ${t.modalCloseButtonDisabledColor};\n `;\n },\n\n focus(t: Theme) {\n return css`\n color: ${t.modalCloseButtonHoverColor};\n outline: 2px solid ${t.borderColorFocus};\n `;\n },\n\n headerWrapper() {\n return css`\n position: relative;\n `;\n },\n\n header(t: Theme) {\n return css`\n font-size: ${t.modalHeaderFontSize};\n line-height: ${t.modalHeaderLineHeight};\n padding: ${t.modalHeaderPaddingTop} ${t.modalPaddingRight} ${t.modalHeaderPaddingBottom} ${t.modalPaddingLeft};\n overflow-wrap: break-word;\n word-wrap: break-word;\n color: ${t.modalHeaderTextColor};\n `;\n },\n\n body(t: Theme) {\n return css`\n padding: 0 ${t.modalPaddingRight} ${t.modalBodyPaddingBottom} ${t.modalPaddingLeft};\n `;\n },\n\n headerWithClose(t: Theme) {\n const rightPadding =\n 2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);\n\n return css`\n padding-right: ${rightPadding}px;\n `;\n },\n\n footer(t: Theme) {\n return css`\n padding: ${t.modalFooterPaddingTop} ${t.modalPaddingRight} ${t.modalFooterPaddingBottom} ${t.modalPaddingLeft};\n `;\n },\n\n footerWrapper() {\n return css`\n position: relative;\n `;\n },\n\n panel(t: Theme) {\n return css`\n padding-top: ${t.modalFooterPanelPaddingTop};\n padding-bottom: ${t.modalFooterPanelPaddingBottom};\n background: ${t.modalFooterBg};\n `;\n },\n\n fixedHeader(t: Theme) {\n return css`\n margin-bottom: 10px;\n padding-bottom: ${t.modalFixedHeaderPaddingBottom};\n background: ${t.modalFixedHeaderBg};\n\n &:after {\n bottom: 11px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.modalFixedHeaderShadow};\n }\n `;\n },\n\n fixedFooter(t: Theme) {\n return css`\n padding-top: 20px;\n margin-top: 10px;\n background: ${t.modalFixedHeaderBg};\n\n &:before {\n top: 11px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.modalFixedFooterShadow};\n }\n `;\n },\n\n headerAddPadding() {\n return css`\n padding-bottom: 22px;\n `;\n },\n\n bodyWithoutHeader(t: Theme) {\n return css`\n padding-top: ${t.modalPaddingTop};\n `;\n },\n\n bodyWithoutPadding() {\n return css`\n padding: 0;\n `;\n },\n\n bodyAddPaddingForPanel(t: Theme) {\n return css`\n padding-bottom: ${t.modalPaddingBottom};\n `;\n },\n});\n"]}
|
|
@@ -3,21 +3,41 @@
|
|
|
3
3
|
var _ThemeContext = require("../../lib/theming/ThemeContext");
|
|
4
4
|
var _CrossIcon = require("../../internal/icons/CrossIcon");
|
|
5
5
|
var _Emotion = require("../../lib/theming/Emotion");
|
|
6
|
+
var _keyListener = require("../../lib/events/keyListener");
|
|
6
7
|
|
|
7
8
|
|
|
8
9
|
var _Modal = require("./Modal.styles");
|
|
9
10
|
|
|
10
11
|
function ModalClose(_ref) {var _cx;var disableClose = _ref.disableClose,requestClose = _ref.requestClose;
|
|
11
|
-
var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
|
|
12
|
+
var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);var _React$useState =
|
|
13
|
+
_react.default.useState(false),focusedByTab = _React$useState[0],setFocusedByTab = _React$useState[1];
|
|
14
|
+
|
|
15
|
+
var handleFocus = function handleFocus() {
|
|
16
|
+
// focus event fires before keyDown eventlistener
|
|
17
|
+
// so we should check tabPressed in async way
|
|
18
|
+
requestAnimationFrame(function () {
|
|
19
|
+
if (_keyListener.keyListener.isTabPressed) {
|
|
20
|
+
setFocusedByTab(true);
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
var handleBlur = function handleBlur() {
|
|
26
|
+
setFocusedByTab(false);
|
|
27
|
+
};
|
|
12
28
|
|
|
13
29
|
return /*#__PURE__*/(
|
|
14
30
|
_react.default.createElement("button", {
|
|
15
31
|
className: (0, _Emotion.cx)((_cx = {}, _cx[
|
|
16
32
|
_Modal.styles.close(theme)] = true, _cx[
|
|
17
|
-
_Modal.styles.disabled(theme)] = disableClose, _cx
|
|
33
|
+
_Modal.styles.disabled(theme)] = disableClose, _cx[
|
|
34
|
+
_Modal.styles.focus(theme)] = focusedByTab, _cx)),
|
|
18
35
|
|
|
19
36
|
onClick: requestClose,
|
|
20
|
-
|
|
37
|
+
onFocus: handleFocus,
|
|
38
|
+
onBlur: handleBlur,
|
|
39
|
+
"data-tid": "modal-close",
|
|
40
|
+
tabIndex: disableClose ? -1 : 0 }, /*#__PURE__*/
|
|
21
41
|
|
|
22
42
|
_react.default.createElement(_CrossIcon.CrossIcon, null)));
|
|
23
43
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ModalClose.tsx"],"names":["ModalClose","disableClose","requestClose","theme","ThemeContext","styles","close","disabled"],"mappings":"8JAAA;;AAEA;AACA;AACA;;;AAGA;;AAEO,SAASA,UAAT,OAAgE,aAA1CC,YAA0C,QAA1CA,YAA0C,CAA5BC,YAA4B,QAA5BA,YAA4B;AACrE,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;
|
|
1
|
+
{"version":3,"sources":["ModalClose.tsx"],"names":["ModalClose","disableClose","requestClose","theme","ThemeContext","React","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","keyListener","isTabPressed","handleBlur","styles","close","disabled","focus"],"mappings":"8JAAA;;AAEA;AACA;AACA;AACA;;;AAGA;;AAEO,SAASA,UAAT,OAAgE,aAA1CC,YAA0C,QAA1CA,YAA0C,CAA5BC,YAA4B,QAA5BA,YAA4B;AACrE,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd,CADqE;AAE7BC,iBAAMC,QAAN,CAAe,KAAf,CAF6B,CAE9DC,YAF8D,sBAEhDC,eAFgD;;AAIrE,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB;AACA;AACAC,IAAAA,qBAAqB,CAAC,YAAM;AAC1B,UAAIC,yBAAYC,YAAhB,EAA8B;AAC5BJ,QAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF,KAJoB,CAArB;AAKD,GARD;;AAUA,MAAMK,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvBL,IAAAA,eAAe,CAAC,KAAD,CAAf;AACD,GAFD;;AAIA;AACE;AACE,MAAA,SAAS,EAAE;AACRM,oBAAOC,KAAP,CAAaZ,KAAb,CADQ,IACc,IADd;AAERW,oBAAOE,QAAP,CAAgBb,KAAhB,CAFQ,IAEiBF,YAFjB;AAGRa,oBAAOG,KAAP,CAAad,KAAb,CAHQ,IAGcI,YAHd,OADb;;AAME,MAAA,OAAO,EAAEL,YANX;AAOE,MAAA,OAAO,EAAEO,WAPX;AAQE,MAAA,MAAM,EAAEI,UARV;AASE,kBAAS,aATX;AAUE,MAAA,QAAQ,EAAEZ,YAAY,GAAG,CAAC,CAAJ,GAAQ,CAVhC;;AAYE,iCAAC,oBAAD,OAZF,CADF;;;AAgBD","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\n\nimport { CloseProps } from './ModalContext';\nimport { styles } from './Modal.styles';\n\nexport function ModalClose({ disableClose, requestClose }: CloseProps) {\n const theme = useContext(ThemeContext);\n const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n const handleFocus = () => {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n setFocusedByTab(true);\n }\n });\n };\n\n const handleBlur = () => {\n setFocusedByTab(false);\n };\n\n return (\n <button\n className={cx({\n [styles.close(theme)]: true,\n [styles.disabled(theme)]: disableClose,\n [styles.focus(theme)]: focusedByTab,\n })}\n onClick={requestClose}\n onFocus={handleFocus}\n onBlur={handleBlur}\n data-tid=\"modal-close\"\n tabIndex={disableClose ? -1 : 0}\n >\n <CrossIcon />\n </button>\n );\n}\n"]}
|