@cloud-ru/uikit-product-site-header 1.7.2 → 1.9.1-preview-aa898162.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/cjs/components/SiteHeaderBasic/SiteHeaderBasic.d.ts +3 -1
  3. package/dist/cjs/components/SiteHeaderBasic/SiteHeaderBasic.js +4 -3
  4. package/dist/cjs/components/SiteHeaderBasic/styles.module.css +6 -0
  5. package/dist/cjs/components/SubHeader/SubHeader.js +1 -1
  6. package/dist/esm/components/SiteHeaderBasic/SiteHeaderBasic.d.ts +3 -1
  7. package/dist/esm/components/SiteHeaderBasic/SiteHeaderBasic.js +4 -3
  8. package/dist/esm/components/SiteHeaderBasic/styles.module.css +6 -0
  9. package/dist/esm/components/SubHeader/SubHeader.js +1 -1
  10. package/package.json +6 -6
  11. package/src/components/SiteHeaderBasic/SiteHeaderBasic.tsx +6 -1
  12. package/src/components/SiteHeaderBasic/styles.module.scss +6 -0
  13. package/src/components/SubHeader/SubHeader.tsx +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,29 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # 1.9.0 (2026-07-22)
7
+
8
+
9
+ ### Features
10
+
11
+ * **SITE-11618:** update site header ([319ff5a](https://github.com/cloud-ru-tech/uikit-product/commit/319ff5a73baeb7081c6f02ca0f54c8a7755c570f))
12
+ * **SITE-11695:** update for new package ([020501d](https://github.com/cloud-ru-tech/uikit-product/commit/020501dbd60b89e35d1d9055f84a03616853de28))
13
+
14
+
15
+
16
+
17
+
18
+ # 1.8.0 (2026-07-21)
19
+
20
+
21
+ ### Features
22
+
23
+ * **SITE-11618:** update site header ([319ff5a](https://github.com/cloud-ru-tech/uikit-product/commit/319ff5a73baeb7081c6f02ca0f54c8a7755c570f))
24
+
25
+
26
+
27
+
28
+
6
29
  ## 1.7.2 (2026-07-21)
7
30
 
8
31
  ### Only dependencies have been changed
package/dist/cjs/components/SiteHeaderBasic/SiteHeaderBasic.d.ts CHANGED
@@ -42,6 +42,8 @@ export type HeaderProps = WithSupportProps<WithLayoutType<{
42
42
  rightContent?: ReactNode;
43
43
  /** Контент сверху над хэдером, для инфостроки */
44
44
  subHeader?: ReactNode;
45
+ /** Контент снизу под хэдером */
46
+ afterHeaderContent?: ReactNode;
45
47
  /** Контент мобильной версии меню */
46
48
  mobileMenuContent?: ReactNode;
47
49
  /** Нижний контент кнопок мобильной версии меню */
@@ -49,4 +51,4 @@ export type HeaderProps = WithSupportProps<WithLayoutType<{
49
51
  /** className для левой части хедера */
50
52
  leftPartClassName?: string;
51
53
  }>>;
52
- export declare function SiteHeaderBasic({ className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance, logo, leftPartClassName, mobileModalBodyClassName, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;
54
+ export declare function SiteHeaderBasic({ className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, afterHeaderContent, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance, logo, leftPartClassName, mobileModalBodyClassName, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;
package/dist/cjs/components/SiteHeaderBasic/SiteHeaderBasic.js CHANGED
@@ -24,15 +24,16 @@ const helperComponents_1 = require("../../helperComponents");
24
24
  const hooks_1 = require("../../hooks");
25
25
  const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
26
26
  const HEIGHT_SUBHEADER = 25;
27
+ const HEIGHT_AFTER_HEADER_CONTENT = 32;
27
28
  function SiteHeaderBasic(_a) {
28
- var { className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance = 'none', logo, leftPartClassName, mobileModalBodyClassName } = _a, rest = __rest(_a, ["className", "maxWidth", "additionalLogoText", "middleContent", "rightContent", "mobileMenuContent", "subHeader", "fullWidthContent", "layoutType", "mobileConsultationButton", "mobileMenuOpen", "onSetMobileMenuOpen", "mainHeaderClassName", "appearance", "logo", "leftPartClassName", "mobileModalBodyClassName"]);
29
+ var { className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, afterHeaderContent, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance = 'none', logo, leftPartClassName, mobileModalBodyClassName } = _a, rest = __rest(_a, ["className", "maxWidth", "additionalLogoText", "middleContent", "rightContent", "mobileMenuContent", "subHeader", "afterHeaderContent", "fullWidthContent", "layoutType", "mobileConsultationButton", "mobileMenuOpen", "onSetMobileMenuOpen", "mainHeaderClassName", "appearance", "logo", "leftPartClassName", "mobileModalBodyClassName"]);
29
30
  const refHeader = (0, react_1.useRef)(null);
30
31
  const { showHeader, headerHeight } = (0, hooks_1.useHeaderPosition)(mobileMenuOpen, refHeader);
31
32
  const isMobileTabletView = layoutType === 'mobile' || layoutType === 'tablet';
32
33
  const isMobile = layoutType === 'mobile';
33
34
  return ((0, jsx_runtime_1.jsxs)(uikit_product_site_layout_1.Layout.Header, Object.assign({ style: {
34
- transform: `translateY(-${!showHeader ? headerHeight + HEIGHT_SUBHEADER : 0}px)`,
35
+ transform: `translateY(-${!showHeader ? headerHeight + HEIGHT_SUBHEADER + HEIGHT_AFTER_HEADER_CONTENT : 0}px)`,
35
36
  }, className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-attr": 'layout-header' }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: [subHeader, (0, jsx_runtime_1.jsx)("div", { ref: refHeader, className: (0, classnames_1.default)(styles_module_scss_1.default.headerMaster, styles_module_scss_1.default.dividerHeader, mainHeaderClassName), "data-layout-type": layoutType, "data-appearance": appearance, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headerPartsContainer, style: {
36
37
  maxWidth,
37
- }, children: fullWidthContent !== null && fullWidthContent !== void 0 ? fullWidthContent : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.leftPart, leftPartClassName), "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(helperComponents_1.LogoContent, { additionalLogoText: additionalLogoText, isMobile: isMobile, logo: logo }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.middlePart, children: middleContent }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.rightPart, children: [rightContent, mobileMenuContent && isMobileTabletView && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(helperComponents_1.ButtonBurger, { appearance: appearance, mobileMenuOpen: mobileMenuOpen, onClick: () => onSetMobileMenuOpen(!mobileMenuOpen) }), (0, jsx_runtime_1.jsx)(helperComponents_1.MobileMenu, { mobileModalBodyClassName: mobileModalBodyClassName, mobileConsultationButton: mobileConsultationButton, mobileMenuContent: mobileMenuContent, mobileMenuOpen: mobileMenuOpen, onClickForCloseMobileMenu: () => onSetMobileMenuOpen(false) })] }))] })] })) }) })] })));
38
+ }, children: fullWidthContent !== null && fullWidthContent !== void 0 ? fullWidthContent : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.leftPart, leftPartClassName), "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(helperComponents_1.LogoContent, { additionalLogoText: additionalLogoText, isMobile: isMobile, logo: logo }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.middlePart, children: middleContent }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.rightPart, children: [rightContent, mobileMenuContent && isMobileTabletView && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(helperComponents_1.ButtonBurger, { appearance: appearance, mobileMenuOpen: mobileMenuOpen, onClick: () => onSetMobileMenuOpen(!mobileMenuOpen) }), (0, jsx_runtime_1.jsx)(helperComponents_1.MobileMenu, { mobileModalBodyClassName: mobileModalBodyClassName, mobileConsultationButton: mobileConsultationButton, mobileMenuContent: mobileMenuContent, mobileMenuOpen: mobileMenuOpen, onClickForCloseMobileMenu: () => onSetMobileMenuOpen(false) })] }))] })] })) }) }), afterHeaderContent && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.afterHeaderContentContainer, children: afterHeaderContent })] })));
38
39
  }
package/dist/cjs/components/SiteHeaderBasic/styles.module.css CHANGED
@@ -66,4 +66,10 @@
66
66
  box-sizing:border-box;
67
67
  margin:0 auto;
68
68
  overflow:hidden;
69
+ }
70
+
71
+ .afterHeaderContentContainer{
72
+ display:flex;
73
+ width:100%;
74
+ height:32px;
69
75
  }
package/dist/cjs/components/SubHeader/SubHeader.js CHANGED
@@ -11,9 +11,9 @@ const alert_1 = require("@snack-uikit/alert");
11
11
  const link_1 = require("@snack-uikit/link");
12
12
  const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
13
13
  const APPEARANCE_ALERT = {
14
+ blue: 'info',
14
15
  green: 'success',
15
16
  yellow: 'warning',
16
- blue: 'info',
17
17
  };
18
18
  function SubHeader({ bannerInfo, onCloseSubHeader, layoutType }) {
19
19
  const isDesktop = layoutType === 'desktop' || layoutType === 'desktopSmall';
package/dist/esm/components/SiteHeaderBasic/SiteHeaderBasic.d.ts CHANGED
@@ -42,6 +42,8 @@ export type HeaderProps = WithSupportProps<WithLayoutType<{
42
42
  rightContent?: ReactNode;
43
43
  /** Контент сверху над хэдером, для инфостроки */
44
44
  subHeader?: ReactNode;
45
+ /** Контент снизу под хэдером */
46
+ afterHeaderContent?: ReactNode;
45
47
  /** Контент мобильной версии меню */
46
48
  mobileMenuContent?: ReactNode;
47
49
  /** Нижний контент кнопок мобильной версии меню */
@@ -49,4 +51,4 @@ export type HeaderProps = WithSupportProps<WithLayoutType<{
49
51
  /** className для левой части хедера */
50
52
  leftPartClassName?: string;
51
53
  }>>;
52
- export declare function SiteHeaderBasic({ className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance, logo, leftPartClassName, mobileModalBodyClassName, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;
54
+ export declare function SiteHeaderBasic({ className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, afterHeaderContent, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance, logo, leftPartClassName, mobileModalBodyClassName, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;
package/dist/esm/components/SiteHeaderBasic/SiteHeaderBasic.js CHANGED
@@ -18,15 +18,16 @@ import { ButtonBurger, LogoContent, MobileMenu } from '../../helperComponents';
18
18
  import { useHeaderPosition } from '../../hooks';
19
19
  import styles from './styles.module.css';
20
20
  const HEIGHT_SUBHEADER = 25;
21
+ const HEIGHT_AFTER_HEADER_CONTENT = 32;
21
22
  export function SiteHeaderBasic(_a) {
22
- var { className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance = 'none', logo, leftPartClassName, mobileModalBodyClassName } = _a, rest = __rest(_a, ["className", "maxWidth", "additionalLogoText", "middleContent", "rightContent", "mobileMenuContent", "subHeader", "fullWidthContent", "layoutType", "mobileConsultationButton", "mobileMenuOpen", "onSetMobileMenuOpen", "mainHeaderClassName", "appearance", "logo", "leftPartClassName", "mobileModalBodyClassName"]);
23
+ var { className, maxWidth, additionalLogoText, middleContent, rightContent, mobileMenuContent, subHeader, afterHeaderContent, fullWidthContent, layoutType, mobileConsultationButton, mobileMenuOpen, onSetMobileMenuOpen, mainHeaderClassName, appearance = 'none', logo, leftPartClassName, mobileModalBodyClassName } = _a, rest = __rest(_a, ["className", "maxWidth", "additionalLogoText", "middleContent", "rightContent", "mobileMenuContent", "subHeader", "afterHeaderContent", "fullWidthContent", "layoutType", "mobileConsultationButton", "mobileMenuOpen", "onSetMobileMenuOpen", "mainHeaderClassName", "appearance", "logo", "leftPartClassName", "mobileModalBodyClassName"]);
23
24
  const refHeader = useRef(null);
24
25
  const { showHeader, headerHeight } = useHeaderPosition(mobileMenuOpen, refHeader);
25
26
  const isMobileTabletView = layoutType === 'mobile' || layoutType === 'tablet';
26
27
  const isMobile = layoutType === 'mobile';
27
28
  return (_jsxs(Layout.Header, Object.assign({ style: {
28
- transform: `translateY(-${!showHeader ? headerHeight + HEIGHT_SUBHEADER : 0}px)`,
29
+ transform: `translateY(-${!showHeader ? headerHeight + HEIGHT_SUBHEADER + HEIGHT_AFTER_HEADER_CONTENT : 0}px)`,
29
30
  }, className: cn(styles.root, className), "data-attr": 'layout-header' }, extractSupportProps(rest), { children: [subHeader, _jsx("div", { ref: refHeader, className: cn(styles.headerMaster, styles.dividerHeader, mainHeaderClassName), "data-layout-type": layoutType, "data-appearance": appearance, children: _jsx("div", { className: styles.headerPartsContainer, style: {
30
31
  maxWidth,
31
- }, children: fullWidthContent !== null && fullWidthContent !== void 0 ? fullWidthContent : (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(styles.leftPart, leftPartClassName), "data-layout-type": layoutType, children: _jsx(LogoContent, { additionalLogoText: additionalLogoText, isMobile: isMobile, logo: logo }) }), _jsx("div", { className: styles.middlePart, children: middleContent }), _jsxs("div", { className: styles.rightPart, children: [rightContent, mobileMenuContent && isMobileTabletView && (_jsxs(_Fragment, { children: [_jsx(ButtonBurger, { appearance: appearance, mobileMenuOpen: mobileMenuOpen, onClick: () => onSetMobileMenuOpen(!mobileMenuOpen) }), _jsx(MobileMenu, { mobileModalBodyClassName: mobileModalBodyClassName, mobileConsultationButton: mobileConsultationButton, mobileMenuContent: mobileMenuContent, mobileMenuOpen: mobileMenuOpen, onClickForCloseMobileMenu: () => onSetMobileMenuOpen(false) })] }))] })] })) }) })] })));
32
+ }, children: fullWidthContent !== null && fullWidthContent !== void 0 ? fullWidthContent : (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(styles.leftPart, leftPartClassName), "data-layout-type": layoutType, children: _jsx(LogoContent, { additionalLogoText: additionalLogoText, isMobile: isMobile, logo: logo }) }), _jsx("div", { className: styles.middlePart, children: middleContent }), _jsxs("div", { className: styles.rightPart, children: [rightContent, mobileMenuContent && isMobileTabletView && (_jsxs(_Fragment, { children: [_jsx(ButtonBurger, { appearance: appearance, mobileMenuOpen: mobileMenuOpen, onClick: () => onSetMobileMenuOpen(!mobileMenuOpen) }), _jsx(MobileMenu, { mobileModalBodyClassName: mobileModalBodyClassName, mobileConsultationButton: mobileConsultationButton, mobileMenuContent: mobileMenuContent, mobileMenuOpen: mobileMenuOpen, onClickForCloseMobileMenu: () => onSetMobileMenuOpen(false) })] }))] })] })) }) }), afterHeaderContent && _jsx("div", { className: styles.afterHeaderContentContainer, children: afterHeaderContent })] })));
32
33
  }
package/dist/esm/components/SiteHeaderBasic/styles.module.css CHANGED
@@ -66,4 +66,10 @@
66
66
  box-sizing:border-box;
67
67
  margin:0 auto;
68
68
  overflow:hidden;
69
+ }
70
+
71
+ .afterHeaderContentContainer{
72
+ display:flex;
73
+ width:100%;
74
+ height:32px;
69
75
  }
package/dist/esm/components/SubHeader/SubHeader.js CHANGED
@@ -5,9 +5,9 @@ import { AlertTop } from '@snack-uikit/alert';
5
5
  import { Link } from '@snack-uikit/link';
6
6
  import styles from './styles.module.css';
7
7
  const APPEARANCE_ALERT = {
8
+ blue: 'info',
8
9
  green: 'success',
9
10
  yellow: 'warning',
10
- blue: 'info',
11
11
  };
12
12
  export function SubHeader({ bannerInfo, onCloseSubHeader, layoutType }) {
13
13
  const isDesktop = layoutType === 'desktop' || layoutType === 'desktopSmall';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cloud-ru/uikit-product-site-header",
3
3
  "title": "Siteheader",
4
- "version": "1.7.2",
4
+ "version": "1.9.1-preview-aa898162.0",
5
5
  "sideEffects": [
6
6
  "*.css",
7
7
  "*.woff",
@@ -36,10 +36,10 @@
36
36
  },
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@cloud-ru/uikit-product-button-predefined": "1.1.22",
40
- "@cloud-ru/uikit-product-icons": "17.7.0",
41
- "@cloud-ru/uikit-product-mobile-alert": "1.1.16",
42
- "@cloud-ru/uikit-product-mobile-modal": "2.2.2",
39
+ "@cloud-ru/uikit-product-button-predefined": "1.1.23-preview-aa898162.0",
40
+ "@cloud-ru/uikit-product-icons": "17.7.1-preview-aa898162.0",
41
+ "@cloud-ru/uikit-product-mobile-alert": "1.1.17-preview-aa898162.0",
42
+ "@cloud-ru/uikit-product-mobile-modal": "2.2.3-preview-aa898162.0",
43
43
  "@cloud-ru/uikit-product-site-layout": "1.1.3",
44
44
  "@cloud-ru/uikit-product-utils": "9.1.0",
45
45
  "@snack-uikit/alert": "0.16.28",
@@ -54,5 +54,5 @@
54
54
  "peerDependencies": {
55
55
  "@cloud-ru/figma-tokens-web": "*"
56
56
  },
57
- "gitHead": "0ba8fab8e570a50b497bfcf5dfc83ddf9eef91ac"
57
+ "gitHead": "b97189182eb4a3c24a64c82ae55305e19963ef64"
58
58
  }
package/src/components/SiteHeaderBasic/SiteHeaderBasic.tsx CHANGED
@@ -54,6 +54,8 @@ export type HeaderProps = WithSupportProps<
54
54
  rightContent?: ReactNode;
55
55
  /** Контент сверху над хэдером, для инфостроки */
56
56
  subHeader?: ReactNode;
57
+ /** Контент снизу под хэдером */
58
+ afterHeaderContent?: ReactNode;
57
59
  /** Контент мобильной версии меню */
58
60
  mobileMenuContent?: ReactNode;
59
61
  /** Нижний контент кнопок мобильной версии меню */
@@ -64,6 +66,7 @@ export type HeaderProps = WithSupportProps<
64
66
  >;
65
67
 
66
68
  const HEIGHT_SUBHEADER = 25;
69
+ const HEIGHT_AFTER_HEADER_CONTENT = 32;
67
70
 
68
71
  export function SiteHeaderBasic({
69
72
  className,
@@ -73,6 +76,7 @@ export function SiteHeaderBasic({
73
76
  rightContent,
74
77
  mobileMenuContent,
75
78
  subHeader,
79
+ afterHeaderContent,
76
80
  fullWidthContent,
77
81
  layoutType,
78
82
  mobileConsultationButton,
@@ -93,7 +97,7 @@ export function SiteHeaderBasic({
93
97
  return (
94
98
  <Layout.Header
95
99
  style={{
96
- transform: `translateY(-${!showHeader ? headerHeight + HEIGHT_SUBHEADER : 0}px)`,
100
+ transform: `translateY(-${!showHeader ? headerHeight + HEIGHT_SUBHEADER + HEIGHT_AFTER_HEADER_CONTENT : 0}px)`,
97
101
  }}
98
102
  className={cn(styles.root, className)}
99
103
  data-attr='layout-header'
@@ -141,6 +145,7 @@ export function SiteHeaderBasic({
141
145
  )}
142
146
  </div>
143
147
  </div>
148
+ {afterHeaderContent && <div className={styles.afterHeaderContentContainer}>{afterHeaderContent}</div>}
144
149
  </Layout.Header>
145
150
  );
146
151
  }
package/src/components/SiteHeaderBasic/styles.module.scss CHANGED
@@ -74,3 +74,9 @@
74
74
  margin: 0 auto;
75
75
  overflow: hidden;
76
76
  }
77
+
78
+ .afterHeaderContentContainer {
79
+ display: flex;
80
+ width: 100%;
81
+ height: 32px;
82
+ }
package/src/components/SubHeader/SubHeader.tsx CHANGED
@@ -17,9 +17,9 @@ type BannerInfo = {
17
17
  };
18
18
 
19
19
  const APPEARANCE_ALERT: Record<BannerInfo['color'], AlertTopProps['appearance']> = {
20
+ blue: 'info',
20
21
  green: 'success',
21
22
  yellow: 'warning',
22
- blue: 'info',
23
23
  };
24
24
 
25
25
  type SubHeaderProps = WithLayoutType<{