@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-ea6161656e

package/components/SidePage/SidePage.md

@@ -0,0 +1,64 @@
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+const [opened, setOpened] = React.useState(false);
+
+function renderSidePage() {
+  return (
+    <SidePage onClose={close} blockBackground>
+      <SidePage.Header>Title</SidePage.Header>
+      <SidePage.Body>
+        <div
+          style={{
+            background: `repeating-linear-gradient(
+                                60deg,
+                                #808080,
+                                #808080 20px,
+                                #d3d3d3 20px,
+                                #d3d3d3 40px
+                              )`,
+            height: 600,
+            padding: '20px 0',
+          }}
+        >
+          <SidePage.Container>
+            <p>Use rxjs operators with react hooks</p>
+          </SidePage.Container>
+        </div>
+      </SidePage.Body>
+      <SidePage.Footer panel>
+        <Button onClick={close}>Close</Button>
+      </SidePage.Footer>
+    </SidePage>
+  );
+}
+
+function open() {
+  setOpened(true);
+}
+
+function close() {
+  setOpened(false);
+}
+
+<div>
+  {opened && renderSidePage()}
+  <Button onClick={open}>Open</Button>
+</div>;
+```
+
+#### Локали по умолчанию
+
+```typescript static
+interface SidePageLocale {
+  closeButtonAriaLabel?: string;
+}
+
+const ru_RU = {
+  closeButtonAriaLabel: 'Закрыть модальное окно'
+}
+
+const en_GB = {
+  closeButtonAriaLabel: 'Close modal window'
+}
+```

package/components/SidePage/SidePage.styles/SidePage.styles.js

@@ -0,0 +1,147 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45;
+
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+import { resetButton } from "../../../lib/styles/Mixins";
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    root: function root() {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        height: 100%;\n        position: fixed;\n        top: 0;\n      "])));
+    },
+    mobileRoot: function mobileRoot() {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        width: 100%;\n      "])));
+    },
+    overlay: function overlay() {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        position: fixed;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n      "])));
+    },
+    body: function body(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        flex: 1 0 auto;\n        z-index: 0;\n        color: ", ";\n      "])), t.modalBodyTextColor);
+    },
+    mobileBody: function mobileBody() {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        font-size: 16px;\n        line-height: 22px;\n      "])));
+    },
+    container: function container(t) {
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        padding-left: ", ";\n        padding-right: ", ";\n      "])), t.sidePagePaddingLeft, t.sidePagePaddingRight);
+    },
+    mobileContainer: function mobileContainer(t) {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        padding-left: ", ";\n        padding-right: ", ";\n        padding-bottom: ", ";\n      "])), t.mobileSidePagePaddingLeft, t.mobileSidePagePaddingRight, t.mobileSidePagePaddingBottom);
+    },
+    containerWithoutHeader: function containerWithoutHeader(t) {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        padding-top: ", ";\n      "])), t.sidePagePaddingTop);
+    },
+    mobileContainerWithoutHeader: function mobileContainerWithoutHeader(t) {
+      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        padding-top: ", ";\n      "])), t.mobileSidePagePaddingTop);
+    },
+    containerWithoutFooter: function containerWithoutFooter(t) {
+      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        padding-bottom: ", ";\n      "])), t.sidePagePaddingBottom);
+    },
+    containerWithPanel: function containerWithPanel(t) {
+      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        padding-bottom: ", ";\n      "])), t.sidePagePaddingBottom);
+    },
+    focusLock: function focusLock() {
+      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        height: 100%;\n      "])));
+    },
+    wrapper: function wrapper(t) {
+      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        float: right;\n        height: 100%;\n        width: 100%;\n        overflow-y: auto;\n        position: relative;\n        white-space: normal;\n        align-items: stretch;\n        display: flex;\n        flex-direction: column;\n      "])), t.sidePageBgDefault);
+    },
+    wrapperLeft: function wrapperLeft() {
+      return emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        float: left;\n      "])));
+    },
+    wrapperMarginLeft: function wrapperMarginLeft() {
+      return emotion.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n        margin-left: 20px;\n      "])));
+    },
+    wrapperMarginRight: function wrapperMarginRight() {
+      return emotion.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n        margin-right: 20px;\n      "])));
+    },
+    headerWrapper: function headerWrapper() {
+      return emotion.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n        flex: 0 0 auto;\n      "])));
+    },
+    header: function header(t) {
+      return emotion.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n        font-size: ", ";\n        line-height: ", ";\n        padding: ", " 0 ", ";\n        width: 100%;\n        position: relative;\n        color: ", ";\n        font-weight: ", ";\n      "])), t.sidePageHeaderFontSize, t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageHeaderTextColor, t.sidePageHeaderFontWeight);
+    },
+    mobileHeader: function mobileHeader(t) {
+      return emotion.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n        font-size: ", ";\n        line-height: ", ";\n        padding: ", " 0 ", ";\n      "])), t.mobileSidePageHeaderFontSize, t.mobileSidePageHeaderLineHeight, t.mobileSidePageHeaderPaddingTop, t.mobileSidePageHeaderPaddingBottom);
+    },
+    headerFixed: function headerFixed(t) {
+      return emotion.css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        font-size: ", ";\n        line-height: ", ";\n        padding: ", " 0;\n\n        &:after {\n          bottom: 0px;\n          content: '';\n          position: absolute;\n          height: 1px;\n          width: 100%;\n          left: 0;\n          z-index: -1;\n          box-shadow: ", ";\n        }\n      "])), t.sidePageBgDefault, t.sidePageHeaderFixedFontSize, t.sidePageHeaderFixedLineHeight, t.sidePageHeaderFixedPaddingY, t.sidePageFixedHeaderShadow);
+    },
+    title: function title(t) {
+      var paddingRight = parseInt(t.sidePageCloseButtonPadding) + parseInt(t.sidePageCloseButtonLegacyPaddingLeft) + parseInt(t.sidePageCloseIconSize);
+      return emotion.css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n        padding-left: ", ";\n        padding-right: ", "px;\n      "])), t.sidePagePaddingLeft, paddingRight);
+    },
+    mobileTitle: function mobileTitle(t) {
+      var paddingRight = parseInt(t.mobileSidePageCloseButtonPadding) * 2 + parseInt(t.sidePageCloseIconSize);
+      return emotion.css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n        padding-left: ", ";\n        padding-right: ", "px;\n      "])), t.mobileSidePagePaddingLeft, paddingRight);
+    },
+    titleFixed: function titleFixed() {
+      return emotion.css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      "])));
+    },
+    background: function background() {
+      return emotion.css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n        height: 100%;\n        position: absolute;\n        width: 100%;\n      "])));
+    },
+    backgroundGray: function backgroundGray(t) {
+      return emotion.css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        opacity: ", ";\n      "])), t.sidePageBackingBg, t.sidePageBackingBgOpacity);
+    },
+    shadow: function shadow(t) {
+      return emotion.css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n        box-shadow: ", ";\n      "])), t.sidePageContainerShadow);
+    },
+    close: function close(t) {
+      return emotion.css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n        ", ";\n        cursor: pointer;\n        color: ", ";\n        padding: ", ";\n        margin: -", ";\n        font-size: 0;\n\n        &:focus,\n        &:hover {\n          color: ", ";\n        }\n\n        & > svg {\n          width: ", ";\n          height: ", ";\n          box-sizing: content-box;\n        }\n      "])), resetButton(emotion), t.sidePageCloseButtonColor, t.sidePageCloseButtonClickArea, t.sidePageCloseButtonClickArea, t.sidePageCloseButtonHoverColor, t.sidePageCloseIconSize, t.sidePageCloseIconSize);
+    },
+    mobileClose: function mobileClose(t) {
+      return emotion.css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n        padding: ", ";\n        margin: -", ";\n        font-size: 0;\n      "])), t.mobileSidePageCloseButtonClickArea, t.mobileSidePageCloseButtonClickArea);
+    },
+    closeFocus: function closeFocus(t) {
+      return emotion.css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n        outline: 2px solid ", ";\n      "])), t.borderColorFocus);
+    },
+    wrapperClose: function wrapperClose(t) {
+      return emotion.css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n        box-sizing: border-box;\n        height: 100%;\n        line-height: ", ";\n        padding: ", " 0 ", ";\n        position: absolute;\n        right: ", ";\n        top: 0;\n      "])), t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageCloseButtonPadding);
+    },
+    mobileWrapperClose: function mobileWrapperClose(t) {
+      return emotion.css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n        line-height: ", ";\n        padding: ", " 0 ", ";\n        right: ", ";\n      "])), t.mobileSidePageHeaderLineHeight, t.mobileSidePageHeaderPaddingTop, t.mobileSidePageHeaderPaddingBottom, t.mobileSidePageCloseButtonPadding);
+    },
+    panel: function panel(t) {
+      return emotion.css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        padding: ", " ", " ", "\n          ", ";\n      "])), t.sidePageFooterPanelBg, t.sidePageFooterPanelPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPanelPaddingBottom, t.sidePagePaddingLeft);
+    },
+    wrapperCloseFixed: function wrapperCloseFixed(t) {
+      return emotion.css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n        line-height: ", ";\n        padding: ", " 0;\n      "])), t.sidePageHeaderFixedLineHeight, t.sidePageHeaderFixedPaddingY);
+    },
+    footerWrapper: function footerWrapper() {
+      return emotion.css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n        flex: 0 0 auto;\n      "])));
+    },
+    footer: function footer(t) {
+      return emotion.css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n        bottom: 0;\n        position: fixed;\n        z-index: 10;\n        color: ", ";\n      "])), t.sidePageFooterTextColor);
+    },
+    positionStatic: function positionStatic() {
+      return emotion.css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n        position: static;\n      "])));
+    },
+    footerContent: function footerContent(t) {
+      return emotion.css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n        padding: ", " ", " ", "\n          ", ";\n      "])), t.sidePageFooterPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPaddingBottom, t.sidePagePaddingLeft);
+    },
+    mobileFooterContent: function mobileFooterContent(t) {
+      return emotion.css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n        display: flex;\n        flex-flow: column nowrap;\n        padding: ", ";\n      "])), t.mobileSidePageFooterPadding);
+    },
+    footerFixed: function footerFixed(t) {
+      return emotion.css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n\n        &:before {\n          top: 0px;\n          content: '';\n          position: absolute;\n          height: 1px;\n          width: 100%;\n          left: 0;\n          z-index: -1;\n          box-shadow: ", ";\n        }\n      "])), t.sidePageBgDefault, t.sidePageFixedFooterShadow);
+    },
+    panelFixed: function panelFixed(t) {
+      return emotion.css(_templateObject40 || (_templateObject40 = _taggedTemplateLiteralLoose(["\n        &:before {\n          box-shadow: ", ";\n        }\n      "])), t.sidePageFixedPanelShadow);
+    },
+    transitionLeft: function transitionLeft() {
+      return emotion.css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteralLoose(["\n        transform: translateX(100px);\n      "])));
+    },
+    transitionRight: function transitionRight() {
+      return emotion.css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteralLoose(["\n        transform: translateX(-100px);\n      "])));
+    },
+    transitionActive: function transitionActive() {
+      return emotion.css(_templateObject43 || (_templateObject43 = _taggedTemplateLiteralLoose(["\n        transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n        opacity: 1 !important;\n        transform: translate(0, 0) !important;\n      "])));
+    },
+    transitionLeave: function transitionLeave() {
+      return emotion.css(_templateObject44 || (_templateObject44 = _taggedTemplateLiteralLoose(["\n        opacity: 1;\n      "])));
+    },
+    transitionLeaveActive: function transitionLeaveActive() {
+      return emotion.css(_templateObject45 || (_templateObject45 = _taggedTemplateLiteralLoose(["\n        opacity: 0.01 !important;\n        transition: opacity 0.15s ease-out;\n      "])));
+    }
+  });
+};

package/components/SidePage/SidePage.styles/SidePage.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SidePage.styles.ts"],"names":["memoizeStyle","resetButton","getStyles","emotion","root","css","mobileRoot","overlay","body","t","modalBodyTextColor","mobileBody","container","sidePagePaddingLeft","sidePagePaddingRight","mobileContainer","mobileSidePagePaddingLeft","mobileSidePagePaddingRight","mobileSidePagePaddingBottom","containerWithoutHeader","sidePagePaddingTop","mobileContainerWithoutHeader","mobileSidePagePaddingTop","containerWithoutFooter","sidePagePaddingBottom","containerWithPanel","focusLock","wrapper","sidePageBgDefault","wrapperLeft","wrapperMarginLeft","wrapperMarginRight","headerWrapper","header","sidePageHeaderFontSize","sidePageHeaderLineHeight","sidePageHeaderPaddingTop","sidePageHeaderPaddingBottom","sidePageHeaderTextColor","sidePageHeaderFontWeight","mobileHeader","mobileSidePageHeaderFontSize","mobileSidePageHeaderLineHeight","mobileSidePageHeaderPaddingTop","mobileSidePageHeaderPaddingBottom","headerFixed","sidePageHeaderFixedFontSize","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","sidePageFixedHeaderShadow","title","paddingRight","parseInt","sidePageCloseButtonPadding","sidePageCloseButtonLegacyPaddingLeft","sidePageCloseIconSize","mobileTitle","mobileSidePageCloseButtonPadding","titleFixed","background","backgroundGray","sidePageBackingBg","sidePageBackingBgOpacity","shadow","sidePageContainerShadow","close","sidePageCloseButtonColor","sidePageCloseButtonClickArea","sidePageCloseButtonHoverColor","mobileClose","mobileSidePageCloseButtonClickArea","closeFocus","borderColorFocus","wrapperClose","mobileWrapperClose","panel","sidePageFooterPanelBg","sidePageFooterPanelPaddingTop","sidePageFooterPanelPaddingBottom","wrapperCloseFixed","footerWrapper","footer","sidePageFooterTextColor","positionStatic","footerContent","sidePageFooterPaddingTop","sidePageFooterPaddingBottom","mobileFooterContent","mobileSidePageFooterPadding","footerFixed","sidePageFixedFooterShadow","panelFixed","sidePageFixedPanelShadow","transitionLeft","transitionRight","transitionActive","transitionLeave","transitionLeaveActive"],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n        height: 100%;\n        position: fixed;\n        top: 0;\n      `;\n    },\n\n    mobileRoot() {\n      return emotion.css`\n        width: 100%;\n      `;\n    },\n\n    overlay() {\n      return emotion.css`\n        position: fixed;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n      `;\n    },\n\n    body(t: Theme) {\n      return emotion.css`\n        flex: 1 0 auto;\n        z-index: 0;\n        color: ${t.modalBodyTextColor};\n      `;\n    },\n\n    mobileBody() {\n      return emotion.css`\n        font-size: 16px;\n        line-height: 22px;\n      `;\n    },\n\n    container(t: Theme) {\n      return emotion.css`\n        padding-left: ${t.sidePagePaddingLeft};\n        padding-right: ${t.sidePagePaddingRight};\n      `;\n    },\n\n    mobileContainer(t: Theme) {\n      return emotion.css`\n        padding-left: ${t.mobileSidePagePaddingLeft};\n        padding-right: ${t.mobileSidePagePaddingRight};\n        padding-bottom: ${t.mobileSidePagePaddingBottom};\n      `;\n    },\n\n    containerWithoutHeader(t: Theme) {\n      return emotion.css`\n        padding-top: ${t.sidePagePaddingTop};\n      `;\n    },\n\n    mobileContainerWithoutHeader(t: Theme) {\n      return emotion.css`\n        padding-top: ${t.mobileSidePagePaddingTop};\n      `;\n    },\n\n    containerWithoutFooter(t: Theme) {\n      return emotion.css`\n        padding-bottom: ${t.sidePagePaddingBottom};\n      `;\n    },\n\n    containerWithPanel(t: Theme) {\n      return emotion.css`\n        padding-bottom: ${t.sidePagePaddingBottom};\n      `;\n    },\n\n    focusLock() {\n      return emotion.css`\n        height: 100%;\n      `;\n    },\n\n    wrapper(t: Theme) {\n      return emotion.css`\n        background: ${t.sidePageBgDefault};\n        float: right;\n        height: 100%;\n        width: 100%;\n        overflow-y: auto;\n        position: relative;\n        white-space: normal;\n        align-items: stretch;\n        display: flex;\n        flex-direction: column;\n      `;\n    },\n\n    wrapperLeft() {\n      return emotion.css`\n        float: left;\n      `;\n    },\n\n    wrapperMarginLeft() {\n      return emotion.css`\n        margin-left: 20px;\n      `;\n    },\n\n    wrapperMarginRight() {\n      return emotion.css`\n        margin-right: 20px;\n      `;\n    },\n\n    headerWrapper() {\n      return emotion.css`\n        flex: 0 0 auto;\n      `;\n    },\n\n    header(t: Theme) {\n      return emotion.css`\n        font-size: ${t.sidePageHeaderFontSize};\n        line-height: ${t.sidePageHeaderLineHeight};\n        padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n        width: 100%;\n        position: relative;\n        color: ${t.sidePageHeaderTextColor};\n        font-weight: ${t.sidePageHeaderFontWeight};\n      `;\n    },\n\n    mobileHeader(t: Theme) {\n      return emotion.css`\n        font-size: ${t.mobileSidePageHeaderFontSize};\n        line-height: ${t.mobileSidePageHeaderLineHeight};\n        padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n      `;\n    },\n\n    headerFixed(t: Theme) {\n      return emotion.css`\n        background: ${t.sidePageBgDefault};\n        font-size: ${t.sidePageHeaderFixedFontSize};\n        line-height: ${t.sidePageHeaderFixedLineHeight};\n        padding: ${t.sidePageHeaderFixedPaddingY} 0;\n\n        &:after {\n          bottom: 0px;\n          content: '';\n          position: absolute;\n          height: 1px;\n          width: 100%;\n          left: 0;\n          z-index: -1;\n          box-shadow: ${t.sidePageFixedHeaderShadow};\n        }\n      `;\n    },\n\n    title(t: Theme) {\n      const paddingRight =\n        parseInt(t.sidePageCloseButtonPadding) +\n        parseInt(t.sidePageCloseButtonLegacyPaddingLeft) +\n        parseInt(t.sidePageCloseIconSize);\n      return emotion.css`\n        padding-left: ${t.sidePagePaddingLeft};\n        padding-right: ${paddingRight}px;\n      `;\n    },\n\n    mobileTitle(t: Theme) {\n      const paddingRight = parseInt(t.mobileSidePageCloseButtonPadding) * 2 + parseInt(t.sidePageCloseIconSize);\n      return emotion.css`\n        padding-left: ${t.mobileSidePagePaddingLeft};\n        padding-right: ${paddingRight}px;\n      `;\n    },\n\n    titleFixed() {\n      return emotion.css`\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      `;\n    },\n\n    background() {\n      return emotion.css`\n        height: 100%;\n        position: absolute;\n        width: 100%;\n      `;\n    },\n\n    backgroundGray(t: Theme) {\n      return emotion.css`\n        background: ${t.sidePageBackingBg};\n        opacity: ${t.sidePageBackingBgOpacity};\n      `;\n    },\n\n    shadow(t: Theme) {\n      return emotion.css`\n        box-shadow: ${t.sidePageContainerShadow};\n      `;\n    },\n\n    close(t: Theme) {\n      return emotion.css`\n        ${resetButton(emotion)};\n        cursor: pointer;\n        color: ${t.sidePageCloseButtonColor};\n        padding: ${t.sidePageCloseButtonClickArea};\n        margin: -${t.sidePageCloseButtonClickArea};\n        font-size: 0;\n\n        &:focus,\n        &:hover {\n          color: ${t.sidePageCloseButtonHoverColor};\n        }\n\n        & > svg {\n          width: ${t.sidePageCloseIconSize};\n          height: ${t.sidePageCloseIconSize};\n          box-sizing: content-box;\n        }\n      `;\n    },\n\n    mobileClose(t: Theme) {\n      return emotion.css`\n        padding: ${t.mobileSidePageCloseButtonClickArea};\n        margin: -${t.mobileSidePageCloseButtonClickArea};\n        font-size: 0;\n      `;\n    },\n\n    closeFocus(t: Theme) {\n      return emotion.css`\n        outline: 2px solid ${t.borderColorFocus};\n      `;\n    },\n\n    wrapperClose(t: Theme) {\n      return emotion.css`\n        box-sizing: border-box;\n        height: 100%;\n        line-height: ${t.sidePageHeaderLineHeight};\n        padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n        position: absolute;\n        right: ${t.sidePageCloseButtonPadding};\n        top: 0;\n      `;\n    },\n\n    mobileWrapperClose(t: Theme) {\n      return emotion.css`\n        line-height: ${t.mobileSidePageHeaderLineHeight};\n        padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n        right: ${t.mobileSidePageCloseButtonPadding};\n      `;\n    },\n\n    panel(t: Theme) {\n      return emotion.css`\n        background: ${t.sidePageFooterPanelBg};\n        padding: ${t.sidePageFooterPanelPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPanelPaddingBottom}\n          ${t.sidePagePaddingLeft};\n      `;\n    },\n\n    wrapperCloseFixed(t: Theme) {\n      return emotion.css`\n        line-height: ${t.sidePageHeaderFixedLineHeight};\n        padding: ${t.sidePageHeaderFixedPaddingY} 0;\n      `;\n    },\n\n    footerWrapper() {\n      return emotion.css`\n        flex: 0 0 auto;\n      `;\n    },\n\n    footer(t: Theme) {\n      return emotion.css`\n        bottom: 0;\n        position: fixed;\n        z-index: 10;\n        color: ${t.sidePageFooterTextColor};\n      `;\n    },\n\n    positionStatic() {\n      return emotion.css`\n        position: static;\n      `;\n    },\n\n    footerContent(t: Theme) {\n      return emotion.css`\n        padding: ${t.sidePageFooterPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPaddingBottom}\n          ${t.sidePagePaddingLeft};\n      `;\n    },\n\n    mobileFooterContent(t: Theme) {\n      return emotion.css`\n        display: flex;\n        flex-flow: column nowrap;\n        padding: ${t.mobileSidePageFooterPadding};\n      `;\n    },\n\n    footerFixed(t: Theme) {\n      return emotion.css`\n        background: ${t.sidePageBgDefault};\n\n        &:before {\n          top: 0px;\n          content: '';\n          position: absolute;\n          height: 1px;\n          width: 100%;\n          left: 0;\n          z-index: -1;\n          box-shadow: ${t.sidePageFixedFooterShadow};\n        }\n      `;\n    },\n\n    panelFixed(t: Theme) {\n      return emotion.css`\n        &:before {\n          box-shadow: ${t.sidePageFixedPanelShadow};\n        }\n      `;\n    },\n\n    transitionLeft() {\n      return emotion.css`\n        transform: translateX(100px);\n      `;\n    },\n\n    transitionRight() {\n      return emotion.css`\n        transform: translateX(-100px);\n      `;\n    },\n\n    transitionActive() {\n      return emotion.css`\n        transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n        opacity: 1 !important;\n        transform: translate(0, 0) !important;\n      `;\n    },\n\n    transitionLeave() {\n      return emotion.css`\n        opacity: 1;\n      `;\n    },\n\n    transitionLeaveActive() {\n      return emotion.css`\n        opacity: 0.01 !important;\n        transition: opacity 0.15s ease-out;\n      `;\n    },\n  });\n"]}

package/components/SidePage/SidePage.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/SidePage/SidePage.styles.js",
+  "module": "SidePage.styles",
+  "types": "../SidePage.styles.d.ts",
+  "sideEffects": false
+}

package/components/SidePage/SidePage.styles.d.ts

@@ -0,0 +1,49 @@
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const getStyles: (emotion: Emotion) => {
+    root(): string;
+    mobileRoot(): string;
+    overlay(): string;
+    body(t: Theme): string;
+    mobileBody(): string;
+    container(t: Theme): string;
+    mobileContainer(t: Theme): string;
+    containerWithoutHeader(t: Theme): string;
+    mobileContainerWithoutHeader(t: Theme): string;
+    containerWithoutFooter(t: Theme): string;
+    containerWithPanel(t: Theme): string;
+    focusLock(): string;
+    wrapper(t: Theme): string;
+    wrapperLeft(): string;
+    wrapperMarginLeft(): string;
+    wrapperMarginRight(): string;
+    headerWrapper(): string;
+    header(t: Theme): string;
+    mobileHeader(t: Theme): string;
+    headerFixed(t: Theme): string;
+    title(t: Theme): string;
+    mobileTitle(t: Theme): string;
+    titleFixed(): string;
+    background(): string;
+    backgroundGray(t: Theme): string;
+    shadow(t: Theme): string;
+    close(t: Theme): string;
+    mobileClose(t: Theme): string;
+    closeFocus(t: Theme): string;
+    wrapperClose(t: Theme): string;
+    mobileWrapperClose(t: Theme): string;
+    panel(t: Theme): string;
+    wrapperCloseFixed(t: Theme): string;
+    footerWrapper(): string;
+    footer(t: Theme): string;
+    positionStatic(): string;
+    footerContent(t: Theme): string;
+    mobileFooterContent(t: Theme): string;
+    footerFixed(t: Theme): string;
+    panelFixed(t: Theme): string;
+    transitionLeft(): string;
+    transitionRight(): string;
+    transitionActive(): string;
+    transitionLeave(): string;
+    transitionLeaveActive(): string;
+};

package/components/SidePage/SidePageBody/SidePageBody.js

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
+import React from 'react';
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { responsiveLayout } from "../../ResponsiveLayout/decorator";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { getStyles } from "../SidePage.styles";
+import { SidePageContext } from "../SidePageContext";
+export var SidePageBodyDataTids = {
+  root: 'SidePageBody__root'
+};
+/**
+ * Тело для сайдпейджа
+ *
+ * @visibleName SidePage.Body
+ */
+
+export var SidePageBody = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(SidePageBody, _React$Component);
+
+  function SidePageBody() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.context = _this.context;
+    return _this;
+  }
+
+  var _proto = SidePageBody.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    this.context.updateLayout();
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        var _this2$emotion$cx;
+
+        var styles = getStyles(_this2.emotion);
+        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+          rootNodeRef: _this2.setRootNode
+        }, _this2.props), /*#__PURE__*/React.createElement("div", {
+          "data-tid": SidePageBodyDataTids.root,
+          className: _this2.emotion.cx(styles.body(theme), (_this2$emotion$cx = {}, _this2$emotion$cx[styles.mobileBody()] = _this2.isMobileLayout, _this2$emotion$cx))
+        }, _this2.props.children));
+      });
+    });
+  };
+
+  return SidePageBody;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageBody', _class2.displayName = 'SidePageBody', _class2.contextType = SidePageContext, _temp)) || _class) || _class;

package/components/SidePage/SidePageBody/SidePageBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SidePageBody.tsx"],"names":["React","CommonWrapper","responsiveLayout","EmotionConsumer","rootNode","ThemeContext","getStyles","SidePageContext","SidePageBodyDataTids","root","SidePageBody","context","componentDidUpdate","updateLayout","render","emotion","theme","styles","setRootNode","props","cx","body","mobileBody","isMobileLayout","children","Component","__KONTUR_REACT_UI__","displayName","contextType"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,gBAAT,QAAiC,+BAAjC;AACA,SAASC,eAAT,QAAgC,2BAAhC;AACA,SAASC,QAAT,QAAuC,oBAAvC;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,SAAT,QAA0B,mBAA1B;AACA,SAASC,eAAT,QAAqD,mBAArD;;;;;;AAMA,OAAO,IAAMC,oBAAoB,GAAG;AAClCC,EAAAA,IAAI,EAAE,oBAD4B,EAA7B;;AAGP;AACA;AACA;AACA;AACA;;;AAGA,WAAaC,YAAb,GAFCR,gBAED,UADCE,QACD;;;;;AAKSO,IAAAA,OALT,GAKwC,MAAKA,OAL7C;;;;;AAUSC,EAAAA,kBAVT,GAUE,8BAA4B;AAC1B,SAAKD,OAAL,CAAaE,YAAb;AACD,GAZH;;AAcSC,EAAAA,MAdT,GAcE,kBAAgB;AACd;AACE,0BAAC,eAAD;AACG,gBAACC,OAAD,EAAa;AACZ,QAAA,MAAI,CAACA,OAAL,GAAeA,OAAf;AACA;AACE,8BAAC,YAAD,CAAc,QAAd;AACG,oBAACC,KAAD,EAAW;AACV,gBAAMC,MAAM,GAAGX,SAAS,CAAC,MAAI,CAACS,OAAN,CAAxB;AACA;AACE,kCAAC,aAAD,aAAe,WAAW,EAAE,MAAI,CAACG,WAAjC,IAAkD,MAAI,CAACC,KAAvD;AACE;AACE,4BAAUX,oBAAoB,CAACC,IADjC;AAEE,gBAAA,SAAS,EAAE,MAAI,CAACM,OAAL,CAAaK,EAAb,CAAgBH,MAAM,CAACI,IAAP,CAAYL,KAAZ,CAAhB,6CAAuCC,MAAM,CAACK,UAAP,EAAvC,IAA6D,MAAI,CAACC,cAAlE,qBAFb;;AAIG,cAAA,MAAI,CAACJ,KAAL,CAAWK,QAJd,CADF,CADF;;;;AAUD,WAbH,CADF;;;AAiBD,OApBH,CADF;;;AAwBD,GAvCH,uBAAkCxB,KAAK,CAACyB,SAAxC,WACgBC,mBADhB,GACsC,cADtC,UAEgBC,WAFhB,GAE8B,cAF9B,UAIgBC,WAJhB,GAI8BrB,eAJ9B","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageBodyProps extends CommonProps {\n  children?: React.ReactNode;\n}\n\nexport const SidePageBodyDataTids = {\n  root: 'SidePageBody__root',\n} as const;\n/**\n * Тело для сайдпейджа\n *\n * @visibleName SidePage.Body\n */\n@responsiveLayout\n@rootNode\nexport class SidePageBody extends React.Component<SidePageBodyProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageBody';\n  public static displayName = 'SidePageBody';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n  private emotion!: Emotion;\n  private isMobileLayout!: boolean;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidUpdate() {\n    this.context.updateLayout();\n  }\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                const styles = getStyles(this.emotion);\n                return (\n                  <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n                    <div\n                      data-tid={SidePageBodyDataTids.root}\n                      className={this.emotion.cx(styles.body(theme), { [styles.mobileBody()]: this.isMobileLayout })}\n                    >\n                      {this.props.children}\n                    </div>\n                  </CommonWrapper>\n                );\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n}\n"]}

package/components/SidePage/SidePageBody/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/SidePage/SidePageBody.js",
+  "module": "SidePageBody",
+  "types": "../SidePageBody.d.ts",
+  "sideEffects": false
+}

package/components/SidePage/SidePageBody.d.ts

@@ -1,12 +1,25 @@
-import * as React from 'react';
-import { SidePageContextType } from './SidePageContext';
-export interface SidePageBodyProps {
-    children?: React.ReactNode;
-    context?: SidePageContextType;
-}
-export declare class SidePageBody extends React.Component<SidePageBodyProps> {
-    componentDidUpdate(): void;
-    render(): JSX.Element;
-}
-export declare const SidePageBodyWithContext: (props: SidePageBodyProps) => JSX.Element;
-export default SidePageBodyWithContext;
+import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { SidePageContextType } from './SidePageContext';
+export interface SidePageBodyProps extends CommonProps {
+    children?: React.ReactNode;
+}
+export declare const SidePageBodyDataTids: {
+    readonly root: "SidePageBody__root";
+};
+/**
+ * Тело для сайдпейджа
+ *
+ * @visibleName SidePage.Body
+ */
+export declare class SidePageBody extends React.Component<SidePageBodyProps> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static contextType: React.Context<SidePageContextType>;
+    context: SidePageContextType;
+    private emotion;
+    private isMobileLayout;
+    private setRootNode;
+    componentDidUpdate(): void;
+    render(): JSX.Element;
+}

package/components/SidePage/SidePageCloseButton/SidePageCloseButton.js

@@ -0,0 +1,48 @@
+import React, { useContext, useState } from 'react';
+import { globalObject } from '@skbkontur/global-object';
+import { useLocaleForControl } from "../../../lib/locale/useLocaleForControl";
+import { CrossIcon } from "../../../internal/icons/CrossIcon";
+import { useEmotion } from "../../../lib/theming/Emotion";
+import { keyListener } from "../../../lib/events/keyListener";
+import { useTheme } from "../../../lib/theming/useTheme";
+import { getStyles } from "../SidePage.styles";
+import { SidePageLocaleHelper } from "../locale";
+import { SidePageHeaderDataTids } from "../SidePageHeader";
+import { SidePageContext } from "../SidePageContext";
+export var SidePageCloseButton = function SidePageCloseButton() {
+  var _emotion$cx;
+
+  var emotion = useEmotion();
+
+  var _useState = useState(false),
+      isFocusedByTab = _useState[0],
+      setIsFocusedByTab = _useState[1];
+
+  var locale = useLocaleForControl('SidePage', SidePageLocaleHelper);
+  var theme = useTheme();
+  var sidePageContext = useContext(SidePageContext);
+
+  var handleFocus = function handleFocus() {
+    globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(function () {
+      if (keyListener.isTabPressed) {
+        setIsFocusedByTab(true);
+      }
+    });
+  };
+
+  var handleBlur = function handleBlur() {
+    setIsFocusedByTab(false);
+  };
+
+  var styles = getStyles(emotion);
+  return /*#__PURE__*/React.createElement("button", {
+    "aria-label": locale == null ? void 0 : locale.closeButtonAriaLabel,
+    className: emotion.cx(styles.close(theme), (_emotion$cx = {}, _emotion$cx[styles.closeFocus(theme)] = isFocusedByTab, _emotion$cx)),
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onClick: sidePageContext.requestClose,
+    "data-tid": SidePageHeaderDataTids.close
+  }, /*#__PURE__*/React.createElement(CrossIcon, null));
+};
+SidePageCloseButton.__KONTUR_REACT_UI__ = 'SidePageCloseButton';
+SidePageCloseButton.displayName = 'SidePageCloseButton';

package/components/SidePage/SidePageCloseButton/SidePageCloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SidePageCloseButton.tsx"],"names":["React","useContext","useState","globalObject","useLocaleForControl","CrossIcon","useEmotion","keyListener","useTheme","getStyles","SidePageLocaleHelper","SidePageHeaderDataTids","SidePageContext","SidePageCloseButton","emotion","isFocusedByTab","setIsFocusedByTab","locale","theme","sidePageContext","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","styles","closeButtonAriaLabel","cx","close","closeFocus","requestClose","__KONTUR_REACT_UI__","displayName"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,QAA5B,QAA4C,OAA5C;AACA,SAASC,YAAT,QAA6B,0BAA7B;;AAEA,SAASC,mBAAT,QAAoC,sCAApC;AACA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,UAAT,QAA2B,2BAA3B;AACA,SAASC,WAAT,QAA4B,8BAA5B;AACA,SAASC,QAAT,QAAyB,4BAAzB;;AAEA,SAASC,SAAT,QAA0B,mBAA1B;AACA,SAASC,oBAAT,QAAqC,UAArC;AACA,SAASC,sBAAT,QAAuC,kBAAvC;AACA,SAASC,eAAT,QAAgC,mBAAhC;;AAEA,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AACvC,MAAMC,OAAO,GAAGR,UAAU,EAA1B;AACA,kBAA4CJ,QAAQ,CAAC,KAAD,CAApD,CAAOa,cAAP,gBAAuBC,iBAAvB;;AAEA,MAAMC,MAAM,GAAGb,mBAAmB,CAAC,UAAD,EAAaM,oBAAb,CAAlC;AACA,MAAMQ,KAAK,GAAGV,QAAQ,EAAtB;AACA,MAAMW,eAAe,GAAGlB,UAAU,CAACW,eAAD,CAAlC;;AAEA,MAAMQ,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBjB,IAAAA,YAAY,CAACkB,qBAAb,oBAAAlB,YAAY,CAACkB,qBAAb,CAAqC,YAAM;AACzC,UAAId,WAAW,CAACe,YAAhB,EAA8B;AAC5BN,QAAAA,iBAAiB,CAAC,IAAD,CAAjB;AACD;AACF,KAJD;AAKD,GAND;;AAQA,MAAMO,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvBP,IAAAA,iBAAiB,CAAC,KAAD,CAAjB;AACD,GAFD;;AAIA,MAAMQ,MAAM,GAAGf,SAAS,CAACK,OAAD,CAAxB;;AAEA;AACE;AACE,oBAAYG,MAAZ,oBAAYA,MAAM,CAAEQ,oBADtB;AAEE,MAAA,SAAS,EAAEX,OAAO,CAACY,EAAR,CAAWF,MAAM,CAACG,KAAP,CAAaT,KAAb,CAAX;AACRM,MAAAA,MAAM,CAACI,UAAP,CAAkBV,KAAlB,CADQ,IACmBH,cADnB,eAFb;;AAKE,MAAA,OAAO,EAAEK,WALX;AAME,MAAA,MAAM,EAAEG,UANV;AAOE,MAAA,OAAO,EAAEJ,eAAe,CAACU,YAP3B;AAQE,kBAAUlB,sBAAsB,CAACgB,KARnC;;AAUE,wBAAC,SAAD,OAVF,CADF;;;AAcD,CApCM;;AAsCPd,mBAAmB,CAACiB,mBAApB,GAA0C,qBAA1C;AACAjB,mBAAmB,CAACkB,WAApB,GAAkC,qBAAlC","sourcesContent":["import React, { useContext, useState } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport { getStyles } from './SidePage.styles';\nimport { SidePageLocaleHelper } from './locale';\nimport { SidePageHeaderDataTids } from './SidePageHeader';\nimport { SidePageContext } from './SidePageContext';\n\nexport const SidePageCloseButton = () => {\n  const emotion = useEmotion();\n  const [isFocusedByTab, setIsFocusedByTab] = useState(false);\n\n  const locale = useLocaleForControl('SidePage', SidePageLocaleHelper);\n  const theme = useTheme();\n  const sidePageContext = useContext(SidePageContext);\n\n  const handleFocus = () => {\n    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setIsFocusedByTab(true);\n      }\n    });\n  };\n\n  const handleBlur = () => {\n    setIsFocusedByTab(false);\n  };\n\n  const styles = getStyles(emotion);\n\n  return (\n    <button\n      aria-label={locale?.closeButtonAriaLabel}\n      className={emotion.cx(styles.close(theme), {\n        [styles.closeFocus(theme)]: isFocusedByTab,\n      })}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onClick={sidePageContext.requestClose}\n      data-tid={SidePageHeaderDataTids.close}\n    >\n      <CrossIcon />\n    </button>\n  );\n};\n\nSidePageCloseButton.__KONTUR_REACT_UI__ = 'SidePageCloseButton';\nSidePageCloseButton.displayName = 'SidePageCloseButton';\n"]}

package/components/SidePage/SidePageCloseButton/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/SidePage/SidePageCloseButton.js",
+  "module": "SidePageCloseButton",
+  "types": "../SidePageCloseButton.d.ts",
+  "sideEffects": false
+}

package/components/SidePage/SidePageCloseButton.d.ts

@@ -0,0 +1,5 @@
+export declare const SidePageCloseButton: {
+    (): JSX.Element;
+    __KONTUR_REACT_UI__: string;
+    displayName: string;
+};

package/components/SidePage/SidePageContainer/SidePageContainer.js

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
+import React from 'react';
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { responsiveLayout } from "../../ResponsiveLayout/decorator";
+import { rootNode } from "../../../lib/rootNode";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { SidePageContext } from "../SidePageContext";
+import { getStyles } from "../SidePage.styles";
+export var SidePageContainerDataTids = {
+  root: 'SidePageContainer__root'
+};
+/**
+ * Контейнер с отступами
+ *
+ * @visibleName SidePage.Container
+ */
+
+export var SidePageContainer = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(SidePageContainer, _React$Component);
+
+  function SidePageContainer() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = SidePageContainer.prototype;
+
+  _proto.render = function render() {
+    var _this = this;
+
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this.theme = theme;
+        return _this.renderMain();
+      });
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _this2 = this;
+
+    var styles = getStyles(this.emotion);
+    return /*#__PURE__*/React.createElement(SidePageContext.Consumer, null, function (_ref) {
+      var _this2$emotion$cx;
+
+      var hasHeader = _ref.hasHeader,
+          hasFooter = _ref.hasFooter,
+          hasPanel = _ref.hasPanel;
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this2.setRootNode
+      }, _this2.props), /*#__PURE__*/React.createElement("div", {
+        "data-tid": SidePageContainerDataTids.root,
+        className: _this2.emotion.cx((_this2$emotion$cx = {}, _this2$emotion$cx[styles.container(_this2.theme)] = true, _this2$emotion$cx[styles.containerWithoutHeader(_this2.theme)] = !hasHeader, _this2$emotion$cx[styles.containerWithoutFooter(_this2.theme)] = !hasFooter, _this2$emotion$cx[styles.containerWithPanel(_this2.theme)] = hasPanel, _this2$emotion$cx[styles.mobileContainer(_this2.theme)] = _this2.isMobileLayout, _this2$emotion$cx[styles.mobileContainerWithoutHeader(_this2.theme)] = _this2.isMobileLayout && !hasHeader, _this2$emotion$cx))
+      }, _this2.props.children));
+    });
+  };
+
+  return SidePageContainer;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'SidePageContainer', _class2.displayName = 'SidePageContainer', _temp)) || _class) || _class;

package/components/SidePage/SidePageContainer/SidePageContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SidePageContainer.tsx"],"names":["React","CommonWrapper","EmotionConsumer","responsiveLayout","rootNode","ThemeContext","SidePageContext","getStyles","SidePageContainerDataTids","root","SidePageContainer","render","emotion","theme","renderMain","styles","hasHeader","hasFooter","hasPanel","setRootNode","props","cx","container","containerWithoutHeader","containerWithoutFooter","containerWithPanel","mobileContainer","isMobileLayout","mobileContainerWithoutHeader","children","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,eAAT,QAAgC,2BAAhC;AACA,SAASC,gBAAT,QAAiC,+BAAjC;AACA,SAASC,QAAT,QAAuC,oBAAvC;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,eAAT,QAAgC,mBAAhC;AACA,SAASC,SAAT,QAA0B,mBAA1B;;;;AAIA,OAAO,IAAMC,yBAAyB,GAAG;AACvCC,EAAAA,IAAI,EAAE,yBADiC,EAAlC;;;AAIP;AACA;AACA;AACA;AACA;;;AAGA,WAAaC,iBAAb,GAFCP,gBAED,UADCC,QACD;;;;;;;;;AASSO,EAAAA,MATT,GASE,kBAAgB;AACd;AACE,0BAAC,eAAD;AACG,gBAACC,OAAD,EAAa;AACZ,QAAA,KAAI,CAACA,OAAL,GAAeA,OAAf;AACA;AACE,8BAAC,YAAD,CAAc,QAAd;AACG,oBAACC,KAAD,EAAW;AACV,YAAA,KAAI,CAACA,KAAL,GAAaA,KAAb;AACA,mBAAO,KAAI,CAACC,UAAL,EAAP;AACD,WAJH,CADF;;;AAQD,OAXH,CADF;;;AAeD,GAzBH;;AA2BSA,EAAAA,UA3BT,GA2BE,sBAAoB;AAClB,QAAMC,MAAM,GAAGR,SAAS,CAAC,KAAKK,OAAN,CAAxB;;AAEA;AACE,0BAAC,eAAD,CAAiB,QAAjB;AACG,iDAAGI,SAAH,QAAGA,SAAH,CAAcC,SAAd,QAAcA,SAAd,CAAyBC,QAAzB,QAAyBA,QAAzB;AACC,8BAAC,aAAD,aAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACC,KAAvD;AACE;AACE,wBAAUZ,yBAAyB,CAACC,IADtC;AAEE,YAAA,SAAS,EAAE,MAAI,CAACG,OAAL,CAAaS,EAAb;AACRN,YAAAA,MAAM,CAACO,SAAP,CAAiB,MAAI,CAACT,KAAtB,CADQ,IACuB,IADvB;AAERE,YAAAA,MAAM,CAACQ,sBAAP,CAA8B,MAAI,CAACV,KAAnC,CAFQ,IAEoC,CAACG,SAFrC;AAGRD,YAAAA,MAAM,CAACS,sBAAP,CAA8B,MAAI,CAACX,KAAnC,CAHQ,IAGoC,CAACI,SAHrC;AAIRF,YAAAA,MAAM,CAACU,kBAAP,CAA0B,MAAI,CAACZ,KAA/B,CAJQ,IAIgCK,QAJhC;AAKRH,YAAAA,MAAM,CAACW,eAAP,CAAuB,MAAI,CAACb,KAA5B,CALQ,IAK6B,MAAI,CAACc,cALlC;AAMRZ,YAAAA,MAAM,CAACa,4BAAP,CAAoC,MAAI,CAACf,KAAzC,CANQ,IAM0C,MAAI,CAACc,cAAL,IAAuB,CAACX,SANlE,qBAFb;;;AAWG,UAAA,MAAI,CAACI,KAAL,CAAWS,QAXd,CADF,CADD,GADH,CADF;;;;;;AAqBD,GAnDH,4BAAuC7B,KAAK,CAAC8B,SAA7C,WACgBC,mBADhB,GACsC,mBADtC,UAEgBC,WAFhB,GAE8B,mBAF9B","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Theme } from '../../lib/theming/Theme';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { SidePageContext } from './SidePageContext';\nimport { getStyles } from './SidePage.styles';\n\nexport type SidePageContainerProps = CommonProps;\n\nexport const SidePageContainerDataTids = {\n  root: 'SidePageContainer__root',\n} as const;\n\n/**\n * Контейнер с отступами\n *\n * @visibleName SidePage.Container\n */\n@responsiveLayout\n@rootNode\nexport class SidePageContainer extends React.Component<SidePageContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageContainer';\n  public static displayName = 'SidePageContainer';\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private isMobileLayout!: boolean;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  public renderMain() {\n    const styles = getStyles(this.emotion);\n\n    return (\n      <SidePageContext.Consumer>\n        {({ hasHeader, hasFooter, hasPanel }) => (\n          <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n            <div\n              data-tid={SidePageContainerDataTids.root}\n              className={this.emotion.cx({\n                [styles.container(this.theme)]: true,\n                [styles.containerWithoutHeader(this.theme)]: !hasHeader,\n                [styles.containerWithoutFooter(this.theme)]: !hasFooter,\n                [styles.containerWithPanel(this.theme)]: hasPanel,\n                [styles.mobileContainer(this.theme)]: this.isMobileLayout,\n                [styles.mobileContainerWithoutHeader(this.theme)]: this.isMobileLayout && !hasHeader,\n              })}\n            >\n              {this.props.children}\n            </div>\n          </CommonWrapper>\n        )}\n      </SidePageContext.Consumer>\n    );\n  }\n}\n"]}

package/components/SidePage/SidePageContainer/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/SidePage/SidePageContainer.js",
+  "module": "SidePageContainer",
+  "types": "../SidePageContainer.d.ts",
+  "sideEffects": false
+}

package/components/SidePage/SidePageContainer.d.ts

@@ -1,4 +1,21 @@
-import * as React from 'react';
-export default class SidePageContainer extends React.Component {
-    render(): JSX.Element;
-}
+import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+export declare type SidePageContainerProps = CommonProps;
+export declare const SidePageContainerDataTids: {
+    readonly root: "SidePageContainer__root";
+};
+/**
+ * Контейнер с отступами
+ *
+ * @visibleName SidePage.Container
+ */
+export declare class SidePageContainer extends React.Component<SidePageContainerProps> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    private theme;
+    private emotion;
+    private isMobileLayout;
+    private setRootNode;
+    render(): JSX.Element;
+    renderMain(): JSX.Element;
+}