@cloud-ru/ds-uikit-product-header 2.1.6 → 2.1.8-preview-d9442369.0

package/dist/cjs/components/ListCustom/helperComponents/ListItemGroupCustom/ListItemGroupCustom.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItemGroupCustom = ListItemGroupCustom;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const divider_1 = require("@cloud-ru/ds-divider");
+const ContentWrapperCustom_1 = require("../ContentWrapperCustom");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/**
+ * Кастомная оболочка заголовка группы `List`/`Droplist` (Figma `listItemGroupCustom`).
+ * Передаётся в `groupItemRender`: subtitle / subtitleTertiary / divider.
+ */
+function ListItemGroupCustom({ label, beforeContent, truncate, groupVariant = 'subtitleTertiary', divider, selectButtonNode, level, }) {
+    if (label) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, style: { '--level': level }, children: [(0, jsx_runtime_1.jsx)(ContentWrapperCustom_1.ContentWrapperCustom, { layout: 'group', beforeContent: beforeContent, label: label, truncate: truncate ? { variant: truncate.variant, label: 1 } : undefined, groupVariant: groupVariant, selectButton: selectButtonNode }), divider && ((0, jsx_runtime_1.jsx)(divider_1.Divider, { className: styles_module_scss_1.default.divider, variant: groupVariant === 'subtitle' ? divider_1.VARIANT.Regular : divider_1.VARIANT.Thin }))] }));
+    }
+    if (divider) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.dividerOnly, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { variant: divider_1.VARIANT.Regular }) }));
+    }
+    return null;
+}

package/dist/cjs/components/ListCustom/helperComponents/ListItemGroupCustom/index.d.ts

@@ -0,0 +1 @@
+export * from './ListItemGroupCustom';

package/dist/cjs/components/ListCustom/helperComponents/ListItemGroupCustom/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ListItemGroupCustom"), exports);

package/dist/cjs/components/ListCustom/helperComponents/ListItemGroupCustom/styles.module.css

@@ -0,0 +1,34 @@
+.root{
+  position:relative;
+  display:flex;
+  gap:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+  min-width:100%;
+  padding:var(--sn-list-anatomy-size-s-subtitle-paddingTop, var(--sn-primitive-dimension-8, 8px)) var(--sn-primitive-dimension-8, 8px) var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px)))));
+}
+.root:focus-visible{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
+}
+.root[data-level-one], .root[data-level-more-one]{
+  padding-left:calc(var(--sn-primitive-dimension-8, 8px) + var(--level, 0) * var(--sn-list-anatomy-size-s-listItem-nestingLevel-paddingLeft, var(--sn-density-nestingLevel-s-paddingLeft, var(--sn-platform-comfort-icon-half-xs, var(--sn-primitive-dimension-12, 12px)))) + var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))))));
+}
+
+.dividerOnly{
+  display:flex;
+  align-items:flex-end;
+  box-sizing:border-box;
+  width:100%;
+  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-primitive-dimension-8, 8px);
+}
+
+.divider{
+  position:absolute;
+  top:0;
+  right:0;
+  left:0;
+  width:auto;
+  min-width:0;
+}

package/dist/cjs/components/ListCustom/index.d.ts

@@ -0,0 +1,3 @@
+export * from './helperComponents/ListItemCustom';
+export * from './helperComponents/ListItemGroupCustom';
+export * from './renderListCustom';

package/dist/cjs/components/ListCustom/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./helperComponents/ListItemCustom"), exports);
+__exportStar(require("./helperComponents/ListItemGroupCustom"), exports);
+__exportStar(require("./renderListCustom"), exports);

package/dist/cjs/components/ListCustom/renderListCustom.d.ts

@@ -0,0 +1,4 @@
+import { GroupItemRenderProps, ItemRenderProps } from '@cloud-ru/ds-list';
+/** Стабильные рендеры для `itemRender` / `groupItemRender` у `List`/`Droplist`. */
+export declare function renderListItemCustom(props: ItemRenderProps): import("react/jsx-runtime").JSX.Element;
+export declare function renderListItemGroupCustom(props: GroupItemRenderProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/ListCustom/renderListCustom.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderListItemCustom = renderListItemCustom;
+exports.renderListItemGroupCustom = renderListItemGroupCustom;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ListItemCustom_1 = require("./helperComponents/ListItemCustom");
+const ListItemGroupCustom_1 = require("./helperComponents/ListItemGroupCustom");
+/** Стабильные рендеры для `itemRender` / `groupItemRender` у `List`/`Droplist`. */
+function renderListItemCustom(props) {
+    return (0, jsx_runtime_1.jsx)(ListItemCustom_1.ListItemCustom, { ...props });
+}
+function renderListItemGroupCustom(props) {
+    return (0, jsx_runtime_1.jsx)(ListItemGroupCustom_1.ListItemGroupCustom, { ...props });
+}

package/dist/cjs/components/MainMenu/helperComponents/Favorites/Favorites.js

@@ -12,8 +12,8 @@ const segment_control_1 = require("@cloud-ru/ds-segment-control");
 const utils_1 = require("@cloud-ru/ds-utils");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
-const useDesktopComfortClassName_1 = require("../../../../hooks/useDesktopComfortClassName");
 const locale_1 = require("../../../../locale");
+const ListCustom_1 = require("../../../ListCustom");
 const utils_2 = require("../../utils");
 const components_1 = require("./components");
 const constants_1 = require("./constants");
@@ -21,7 +21,6 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function Favorites({ favorite, servicesById, headerClassName, isMobile }) {
     const { t } = locale_1.headerLocale.useTranslations();
     const loading = favorite.loading;
-    const comfortClassName = (0, useDesktopComfortClassName_1.useDesktopComfortClassName)();
     const [segment, setSegment] = (0, utils_1.useValueControl)({
         value: favorite.segment,
         defaultValue: constants_1.FAVORITES_SEGMENT.Favorites,
@@ -44,5 +43,5 @@ function Favorites({ favorite, servicesById, headerClassName, isMobile }) {
         favorite.onFavoriteServiceClick?.(service.id, event);
         service.onClick(event);
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.FAVORITES_TEST_IDS.root, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, headerClassName), "data-test-id": constants_1.FAVORITES_TEST_IDS.header, children: [(0, jsx_runtime_1.jsx)(segment_control_1.SegmentControl, { size: 'm', width: segment_control_1.WIDTH.Full, value: segment, onChange: setSegment, className: styles_module_scss_1.default.segmentControl, "data-test-id": constants_1.FAVORITES_TEST_IDS.segmentControl, items: segmentControlItems }), favorite.actions && ((0, jsx_runtime_1.jsx)(list_1.Droplist, { size: 'm', ...favorite.actions, className: comfortClassName, closeDroplistOnItemClick: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'simple', size: 'm', appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(system_1.KebabSVG, { size: 24 }), "data-test-id": constants_1.FAVORITES_TEST_IDS.settingsButton, disabled: loading }) }))] }), loading ? ((0, jsx_runtime_1.jsx)(components_1.FavoritesItemsSkeleton, {})) : ((0, jsx_runtime_1.jsx)(components_1.Content, { isMobile: isMobile, favoriteIds: favorite.value, onFavoriteChange: favorite.onChange, favoriteItems: favoriteItems, recentItems: recentItems, segment: resolvedSegment, setSegment: setSegment, onFavoriteServiceClick: handleFavoriteServiceClick, onRecentServiceClick: handleRecentServiceClick }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.FAVORITES_TEST_IDS.root, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, headerClassName), "data-test-id": constants_1.FAVORITES_TEST_IDS.header, children: [(0, jsx_runtime_1.jsx)(segment_control_1.SegmentControl, { size: 'm', width: segment_control_1.WIDTH.Full, value: segment, onChange: setSegment, className: styles_module_scss_1.default.segmentControl, "data-test-id": constants_1.FAVORITES_TEST_IDS.segmentControl, items: segmentControlItems }), favorite.actions && ((0, jsx_runtime_1.jsx)(list_1.Droplist, { ...favorite.actions, size: 's', closeDroplistOnItemClick: true, itemRender: ListCustom_1.renderListItemCustom, groupItemRender: ListCustom_1.renderListItemGroupCustom, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'simple', size: 'm', appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(system_1.KebabSVG, { size: 24 }), "data-test-id": constants_1.FAVORITES_TEST_IDS.settingsButton, disabled: loading }) }))] }), loading ? ((0, jsx_runtime_1.jsx)(components_1.FavoritesItemsSkeleton, {})) : ((0, jsx_runtime_1.jsx)(components_1.Content, { isMobile: isMobile, favoriteIds: favorite.value, onFavoriteChange: favorite.onChange, favoriteItems: favoriteItems, recentItems: recentItems, segment: resolvedSegment, setSegment: setSegment, onFavoriteServiceClick: handleFavoriteServiceClick, onRecentServiceClick: handleRecentServiceClick }))] }));
 }

package/dist/cjs/components/UserMenu/UserMenu.js

@@ -8,13 +8,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const avatar_1 = require("@cloud-ru/ds-avatar");
 const list_1 = require("@cloud-ru/ds-list");
 const utils_1 = require("@cloud-ru/ds-utils");
-const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const constants_1 = require("../../constants");
-const useDesktopComfortClassName_1 = require("../../hooks/useDesktopComfortClassName");
 const useMobileLayout_1 = require("../../hooks/useMobileLayout");
 const locale_1 = require("../../locale");
 const HeaderButton_1 = require("../HeaderButton");
+const ListCustom_1 = require("../ListCustom");
 const useUserMenuItems_1 = require("./hooks/useUserMenuItems");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 // Выбор темы ведёт корневой список: `value` — текущая тема, `id` опций совпадает с
@@ -25,7 +24,6 @@ const SELECTION_STUB = { mode: 'single', value: '__empty_stub__', onChange: () =
 function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, onLogout, topItems, organizationItems, bottomItems, settingItems, theme, onClick, triggerTooltip, }) {
     const { t } = locale_1.headerLocale.useTranslations();
     const isMobile = (0, useMobileLayout_1.useMobileLayout)();
-    const comfortClassName = (0, useDesktopComfortClassName_1.useDesktopComfortClassName)();
     const [open = false, setOpen] = (0, utils_1.useValueControl)({ value: openProp, onChange: setOpenProp });
     const { fullName = '', inviteCount } = profile;
     const handleClose = (0, react_1.useCallback)(() => {
@@ -51,5 +49,5 @@ function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, onLogout
                 appearance: 'primary',
             }
             : undefined, "data-test-id": constants_1.TEST_IDS.userMenu.button, icon: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { appearance: 'red', size: 's', name: fullName, showTwoSymbols: true }), "data-pressed": open })), [fullName, inviteCount, onClick, open, setOpen, isMobile, triggerTooltip]);
-    return ((0, jsx_runtime_1.jsx)(list_1.Droplist, { open: open, onOpenChange: setOpen, size: 'm', selection: SELECTION_STUB, pinTop: pinTop, items: menuItems, pinBottom: pinBottom, scroll: !isMobile, trigger: 'click', placement: 'bottom-end', className: (0, classnames_1.default)(styles_module_scss_1.default.userMenuDroplist, comfortClassName), closeOnPopstate: true, "data-test-id": constants_1.TEST_IDS.userMenu.root, label: t('user'), snapPoints: list_1.SNAP_POINTS_PRESET.full, withDividers: false, triggerClassName: styles_module_scss_1.default.userMenuDroplistTrigger, children: trigger }));
+    return ((0, jsx_runtime_1.jsx)(list_1.Droplist, { open: open, onOpenChange: setOpen, size: 's', selection: SELECTION_STUB, pinTop: pinTop, items: menuItems, pinBottom: pinBottom, scroll: !isMobile, trigger: 'click', placement: 'bottom-end', className: styles_module_scss_1.default.userMenuDroplist, closeOnPopstate: true, "data-test-id": constants_1.TEST_IDS.userMenu.root, label: t('user'), snapPoints: list_1.SNAP_POINTS_PRESET.full, withDividers: false, triggerClassName: styles_module_scss_1.default.userMenuDroplistTrigger, itemRender: ListCustom_1.renderListItemCustom, groupItemRender: ListCustom_1.renderListItemGroupCustom, children: trigger }));
 }

package/dist/cjs/components/UserMenu/hooks/useThemeItem.js

@@ -5,12 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const system_1 = require("@cloud-ru/ds-icons/interface/system");
 const react_1 = require("react");
 const constants_1 = require("../../../constants");
-const useDesktopComfortClassName_1 = require("../../../hooks/useDesktopComfortClassName");
 const locale_1 = require("../../../locale");
 const types_1 = require("../types");
 function useThemeItem({ value: themeMode, onChange, isMobile, onClose, }) {
     const { t } = locale_1.headerLocale.useTranslations();
-    const comfortClassName = (0, useDesktopComfortClassName_1.useDesktopComfortClassName)();
     const handleClick = (0, react_1.useCallback)((themeMode) => () => {
         onChange?.(themeMode);
         !isMobile && onClose?.();
@@ -53,6 +51,5 @@ function useThemeItem({ value: themeMode, onChange, isMobile, onClose, }) {
         beforeContent: (0, jsx_runtime_1.jsx)(system_1.ThemeContrastSVG, {}),
         'data-test-id': constants_1.TEST_IDS.userMenu.themeMode,
         items: themeModeOptions,
-        listClassName: comfortClassName,
-    }), [comfortClassName, t, themeModeOptions]);
+    }), [t, themeModeOptions]);
 }

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

@@ -1,5 +1,6 @@
 export * from './HeaderButton';
 export * from './HeaderLayout';
+export * from './ListCustom';
 export * from './MainMenu';
 export * from './UserMenu';
 export * from './Logo';

package/dist/cjs/components/index.js

@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./HeaderButton"), exports);
 __exportStar(require("./HeaderLayout"), exports);
+__exportStar(require("./ListCustom"), exports);
 __exportStar(require("./MainMenu"), exports);
 __exportStar(require("./UserMenu"), exports);
 __exportStar(require("./Logo"), exports);