@cloud-ru/uikit-product-page-layout 0.22.4 → 0.23.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.23.0 (2025-12-11)
+
+
+### Features
+
+* **PDS-2329:** added max-width for page services container ([4a1426b](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/4a1426b46a778dac8891cbf24b78e4bab03a61b1))
+
+
+
+
+
+## 0.22.5 (2025-12-08)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-copy-line@0.7.70](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/copy-line/CHANGELOG.md)
+* [@cloud-ru/uikit-product-icons@16.0.1](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/icons/CHANGELOG.md)
+* [@cloud-ru/uikit-product-utils@8.0.2](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
 ## 0.22.4 (2025-11-28)
 
 

package/dist/cjs/components/PageServices/PageServices.d.ts

@@ -6,6 +6,7 @@ export type PageServicesProps = WithSupportProps<PropsWithChildren<Pick<Headline
     className?: string;
     sidebar?: PageSidebarProps;
     autoHeight?: boolean;
+    limitContentMaxWidth?: boolean;
 }>>;
 export declare const PageServices: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
@@ -13,6 +14,7 @@ export declare const PageServices: import("react").ForwardRefExoticComponent<{
     className?: string;
     sidebar?: PageSidebarProps;
     autoHeight?: boolean;
+    limitContentMaxWidth?: boolean;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/PageServices/PageServices.js

@@ -24,7 +24,7 @@ const PageSidebar_1 = require("../PageSidebar");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const GLOBAL_CONTAINER_ID = 'single-spa-wrapper';
 exports.PageServices = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, title, actions, className, sidebar, beforeHeadline, subHeader, afterHeadline, truncateTitle, autoHeight } = _a, rest = __rest(_a, ["children", "title", "actions", "className", "sidebar", "beforeHeadline", "subHeader", "afterHeadline", "truncateTitle", "autoHeight"]);
+    var { children, title, actions, className, sidebar, beforeHeadline, subHeader, afterHeadline, truncateTitle, autoHeight, limitContentMaxWidth } = _a, rest = __rest(_a, ["children", "title", "actions", "className", "sidebar", "beforeHeadline", "subHeader", "afterHeadline", "truncateTitle", "autoHeight", "limitContentMaxWidth"]);
     const [height, setHeight] = (0, react_1.useState)(0);
     (0, react_1.useEffect)(() => {
         if (autoHeight)
@@ -41,5 +41,5 @@ exports.PageServices = (0, react_1.forwardRef)((_a, ref) => {
             return () => observer.disconnect();
         }
     }, [autoHeight]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className) }, (!autoHeight && { style: { height } }), (0, utils_1.extractSupportProps)(rest), { children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.tempContainer, ref: ref, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, children: [(0, jsx_runtime_1.jsx)(Headline_1.Headline, { title: title, actions: actions, beforeHeadline: beforeHeadline, afterHeadline: afterHeadline, subHeader: subHeader, truncateTitle: truncateTitle }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.childWrapper, children: children })] }) }), sidebar && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.sidebar, children: (0, jsx_runtime_1.jsx)(PageSidebar_1.PageSidebar, Object.assign({}, sidebar)) }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className) }, (!autoHeight && { style: { height } }), (0, utils_1.extractSupportProps)(rest), { children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.tempContainer, ref: ref, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, "data-limited": limitContentMaxWidth, children: [(0, jsx_runtime_1.jsx)(Headline_1.Headline, { title: title, actions: actions, beforeHeadline: beforeHeadline, afterHeadline: afterHeadline, subHeader: subHeader, truncateTitle: truncateTitle }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.childWrapper, children: children })] }) }), sidebar && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.sidebar, children: (0, jsx_runtime_1.jsx)(PageSidebar_1.PageSidebar, Object.assign({}, sidebar)) }))] })));
 });

package/dist/cjs/components/PageServices/styles.module.css

@@ -34,6 +34,10 @@
   gap:var(--dimension-2m, 16px);
   box-sizing:border-box;
 }
+.container[data-limited=true]{
+  max-width:1248px;
+  margin:0 auto;
+}
 
 .childWrapper{
   flex-shrink:1;

package/dist/esm/components/PageServices/PageServices.d.ts

@@ -6,6 +6,7 @@ export type PageServicesProps = WithSupportProps<PropsWithChildren<Pick<Headline
     className?: string;
     sidebar?: PageSidebarProps;
     autoHeight?: boolean;
+    limitContentMaxWidth?: boolean;
 }>>;
 export declare const PageServices: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
@@ -13,6 +14,7 @@ export declare const PageServices: import("react").ForwardRefExoticComponent<{
     className?: string;
     sidebar?: PageSidebarProps;
     autoHeight?: boolean;
+    limitContentMaxWidth?: boolean;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/PageServices/PageServices.js

@@ -18,7 +18,7 @@ import { PageSidebar } from '../PageSidebar';
 import styles from './styles.module.css';
 const GLOBAL_CONTAINER_ID = 'single-spa-wrapper';
 export const PageServices = forwardRef((_a, ref) => {
-    var { children, title, actions, className, sidebar, beforeHeadline, subHeader, afterHeadline, truncateTitle, autoHeight } = _a, rest = __rest(_a, ["children", "title", "actions", "className", "sidebar", "beforeHeadline", "subHeader", "afterHeadline", "truncateTitle", "autoHeight"]);
+    var { children, title, actions, className, sidebar, beforeHeadline, subHeader, afterHeadline, truncateTitle, autoHeight, limitContentMaxWidth } = _a, rest = __rest(_a, ["children", "title", "actions", "className", "sidebar", "beforeHeadline", "subHeader", "afterHeadline", "truncateTitle", "autoHeight", "limitContentMaxWidth"]);
     const [height, setHeight] = useState(0);
     useEffect(() => {
         if (autoHeight)
@@ -35,5 +35,5 @@ export const PageServices = forwardRef((_a, ref) => {
             return () => observer.disconnect();
         }
     }, [autoHeight]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, (!autoHeight && { style: { height } }), extractSupportProps(rest), { children: [_jsx("div", { className: styles.tempContainer, ref: ref, children: _jsxs("div", { className: styles.container, children: [_jsx(Headline, { title: title, actions: actions, beforeHeadline: beforeHeadline, afterHeadline: afterHeadline, subHeader: subHeader, truncateTitle: truncateTitle }), _jsx("div", { className: styles.childWrapper, children: children })] }) }), sidebar && (_jsx("div", { className: styles.sidebar, children: _jsx(PageSidebar, Object.assign({}, sidebar)) }))] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, (!autoHeight && { style: { height } }), extractSupportProps(rest), { children: [_jsx("div", { className: styles.tempContainer, ref: ref, children: _jsxs("div", { className: styles.container, "data-limited": limitContentMaxWidth, children: [_jsx(Headline, { title: title, actions: actions, beforeHeadline: beforeHeadline, afterHeadline: afterHeadline, subHeader: subHeader, truncateTitle: truncateTitle }), _jsx("div", { className: styles.childWrapper, children: children })] }) }), sidebar && (_jsx("div", { className: styles.sidebar, children: _jsx(PageSidebar, Object.assign({}, sidebar)) }))] })));
 });

package/dist/esm/components/PageServices/styles.module.css

@@ -34,6 +34,10 @@
   gap:var(--dimension-2m, 16px);
   box-sizing:border-box;
 }
+.container[data-limited=true]{
+  max-width:1248px;
+  margin:0 auto;
+}
 
 .childWrapper{
   flex-shrink:1;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-page-layout",
   "title": "Page Layout",
-  "version": "0.22.4",
+  "version": "0.23.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,9 +36,9 @@
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-copy-line": "0.7.69",
-    "@cloud-ru/uikit-product-icons": "16.0.0",
-    "@cloud-ru/uikit-product-utils": "8.0.1",
+    "@cloud-ru/uikit-product-copy-line": "0.7.70",
+    "@cloud-ru/uikit-product-icons": "16.0.1",
+    "@cloud-ru/uikit-product-utils": "8.0.2",
     "@snack-uikit/button": "0.19.13",
     "@snack-uikit/icon-predefined": "0.7.3",
     "@snack-uikit/list": "0.26.0",
@@ -57,5 +57,5 @@
   "peerDependencies": {
     "@cloud-ru/uikit-product-locale": "*"
   },
-  "gitHead": "1343b1d5149ab0ffd47bb7f8b4bca7ad448cd93d"
+  "gitHead": "163adb470f05d28f8c808803649a66126d0b4707"
 }

package/src/components/PageServices/PageServices.tsx

@@ -14,6 +14,7 @@ export type PageServicesProps = WithSupportProps<
       className?: string;
       sidebar?: PageSidebarProps;
       autoHeight?: boolean;
+      limitContentMaxWidth?: boolean;
     }
   >
 >;
@@ -33,6 +34,7 @@ export const PageServices = forwardRef<HTMLDivElement, PageServicesProps>(
       afterHeadline,
       truncateTitle,
       autoHeight,
+      limitContentMaxWidth,
       ...rest
     },
     ref,
@@ -67,7 +69,7 @@ export const PageServices = forwardRef<HTMLDivElement, PageServicesProps>(
         {...extractSupportProps(rest)}
       >
         <div className={styles.tempContainer} ref={ref}>
-          <div className={styles.container}>
+          <div className={styles.container} data-limited={limitContentMaxWidth}>
             <Headline
               title={title}
               actions={actions}

package/src/components/PageServices/styles.module.scss

@@ -34,6 +34,11 @@
   padding: styles-theme-variables.$dimension-3m;
   gap: styles-theme-variables.$dimension-2m;
   box-sizing: border-box;
+
+  &[data-limited='true'] {
+    max-width: 1248px;
+    margin: 0 auto;
+  }
 }
 
 .childWrapper {

package/src/components/PageSidebar/types.ts

@@ -22,7 +22,6 @@ export type SidebarItemWithItems = SidebarItemBase & {
   /** @default collapse */
   type?: 'collapse' | 'group';
   divider?: boolean;
-  // eslint-disable-next-line no-use-before-define
   items?: SidebarItem[];
 };