@ozen-ui/kit 0.76.0 → 0.77.0

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/StepperVerticalStep.css

@@ -0,0 +1,105 @@
+.StepperVerticalStep {
+  --stepper-vertical-indicator-icon-size: 24px;
+  --stepper-vertical-indicator-icon-inset-top: var(--spacing-2xs);
+  --stepper-vertical-indicator-color-non-current: transparent;
+  --stepper-vertical-indicator-color-current: transparent;
+  --stepper-vertical-indicator-color: var(--stepper-vertical-indicator-color-non-current);
+  --stepper-vertical-indicator-text-color-non-current: transparent;
+  --stepper-vertical-indicator-text-color-current: transparent;
+  --stepper-vertical-indicator-text-color: var(--stepper-vertical-indicator-text-color-non-current);
+  box-sizing: border-box;
+}
+
+  .StepperVerticalStep-Indicator {
+    box-sizing: border-box;
+    margin-block-start: var(--stepper-vertical-indicator-icon-inset-top);
+  }
+
+  .StepperVerticalStep-Info {
+    box-sizing: border-box;
+  }
+
+  .StepperVerticalStep-Action {
+    margin-block-start: var(--spacing-2xs);
+  }
+
+  .StepperVerticalStep-Description {
+    padding-block: var(--spacing-xs);
+  }
+
+  .StepperVerticalStep_variant_refusal {
+    --stepper-vertical-indicator-color-non-current: var(--color-background-error-light);
+    --stepper-vertical-indicator-color-current: var(--color-background-error);
+    --stepper-vertical-indicator-text-color-non-current: var(--color-content-error-dark);
+    --stepper-vertical-indicator-text-color-current: var(--color-content-action-on);
+  }
+
+  .StepperVerticalStep_variant_blocked {
+    --stepper-vertical-indicator-color-non-current: var(--color-background-error-light);
+    --stepper-vertical-indicator-color-current: var(--color-background-error);
+    --stepper-vertical-indicator-text-color-non-current: var(--color-content-error-dark);
+    --stepper-vertical-indicator-text-color-current: var(--color-content-action-on);
+  }
+
+  .StepperVerticalStep_variant_warning {
+    --stepper-vertical-indicator-color-non-current: var(--color-background-warning-light);
+    --stepper-vertical-indicator-color-current: var(--color-background-warning);
+    --stepper-vertical-indicator-text-color-non-current: var(--color-content-warning-dark);
+    --stepper-vertical-indicator-text-color-current: var(--color-content-action-on);
+  }
+
+  .StepperVerticalStep_variant_awaiting {
+    --stepper-vertical-indicator-color-non-current: var(--color-background-info-light);
+    --stepper-vertical-indicator-color-current: var(--color-background-info);
+    --stepper-vertical-indicator-text-color-non-current: var(--color-content-info-dark);
+    --stepper-vertical-indicator-text-color-current: var(--color-content-action-on);
+  }
+
+  .StepperVerticalStep_variant_inProcessing {
+    --stepper-vertical-indicator-color-non-current: var(--color-background-action-secondary-light);
+    --stepper-vertical-indicator-color-current: var(--color-background-accent-action-secondary-light);
+    --stepper-vertical-indicator-text-color-non-current: var(--color-content-action-secondary-dark);
+    --stepper-vertical-indicator-text-color-current: var(--color-content-action-on);
+  }
+
+  .StepperVerticalStep_variant_success {
+    --stepper-vertical-indicator-color-non-current: var(--color-background-action-light);
+    --stepper-vertical-indicator-color-current: var(--color-background-action);
+    --stepper-vertical-indicator-text-color-non-current: var(--color-content-action-dark);
+    --stepper-vertical-indicator-text-color-current: var(--color-content-action-on);
+  }
+
+  .StepperVerticalStep_current {
+    --stepper-vertical-indicator-color: var(--stepper-vertical-indicator-color-current);
+    --stepper-vertical-indicator-text-color: var(--stepper-vertical-indicator-text-color-current);
+  }
+
+  .StepperVerticalStep_ellipsis .StepperVerticalStep-Description {
+      overflow: hidden;
+    }
+
+  .StepperVerticalStep_ellipsis .StepperVerticalStep-Label, .StepperVerticalStep_ellipsis .StepperVerticalStep-Caption, .StepperVerticalStep_ellipsis .StepperVerticalStep-Hint, .StepperVerticalStep_ellipsis .StepperVerticalStep-Action {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+.StepperVerticalStep:not(:last-child) .StepperVerticalStep-Path {
+    position: relative;
+  }
+
+.StepperVerticalStep:not(:last-child) .StepperVerticalStep-Path::after {
+    --stepper-vertical-indicator-icon-stroke-gap: 1px;
+    --stepper-vertical-indicator-inset-top: calc(var(--stepper-vertical-indicator-icon-size) + var(--stepper-vertical-indicator-icon-inset-top) + var(--stepper-vertical-indicator-icon-stroke-gap));
+    content: '';
+    box-sizing: border-box;
+    display: block;
+    block-size: calc(100% - var(--stepper-vertical-indicator-inset-top) + var(--stepper-vertical-indicator-icon-inset-top) - var(--stepper-vertical-indicator-icon-stroke-gap));
+    inline-size: 2px;
+    position: absolute;
+    inset-block-start: var(--stepper-vertical-indicator-inset-top);
+    inset-inline-start: 50%;
+    transform: translate(-50%, 0);
+    background-color: var(--color-background-secondary);
+    border-radius: var(--border-radius-xs);
+  }

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/StepperVerticalStep.d.ts

@@ -0,0 +1,3 @@
+import type { StepperVerticalStepBaseProps } from './types';
+export declare const cnStepperVerticalStep: import("@bem-react/classname").ClassNameFormatter;
+export declare const StepperVerticalStep: import("../../../../utils").PolymorphicComponentWithRef<StepperVerticalStepBaseProps, "div", "as">;

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/StepperVerticalStep.js

@@ -0,0 +1,38 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, polymorphicComponentWithRef } from '../../../../utils';
+import { Stack } from '../../../Stack';
+import { Typography } from '../../../Typography';
+import { useStepperVerticalContext } from '../../StepperVerticalContext';
+import { StepperVerticalIconIndicator } from '../StepperVerticalIconIndicator';
+import { STEPPER_VERTICAL_STEP_DEFAULT_TAG, STEPPER_VERTICAL_STEP_DEFAULT_CURRENT, STEPPER_VERTICAL_STEP_DEFAULT_VARIANT, } from './constants';
+import { StepperVerticalStepContext } from './StepperVerticalStepContext';
+export var cnStepperVerticalStep = cn('StepperVerticalStep');
+export var StepperVerticalStep = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        name: 'StepperVerticalStep',
+        props: inProps,
+    });
+    var _a = props.variant, variant = _a === void 0 ? STEPPER_VERTICAL_STEP_DEFAULT_VARIANT : _a, _b = props.current, current = _b === void 0 ? STEPPER_VERTICAL_STEP_DEFAULT_CURRENT : _b, ellipsisProp = props.ellipsis, hint = props.hint, children = props.children, caption = props.caption, action = props.action, _c = props.indicator, indicator = _c === void 0 ? React.createElement(StepperVerticalIconIndicator, null) : _c, className = props.className, _d = props.as, as = _d === void 0 ? STEPPER_VERTICAL_STEP_DEFAULT_TAG : _d, other = __rest(props, ["variant", "current", "ellipsis", "hint", "children", "caption", "action", "indicator", "className", "as"]);
+    var stepperVerticalContext = useStepperVerticalContext();
+    var ellipsis = (function () {
+        if (ellipsisProp !== undefined) {
+            return ellipsisProp;
+        }
+        return stepperVerticalContext.ellipsis;
+    })();
+    return (React.createElement(StepperVerticalStepContext.Provider, { value: { variant: variant, current: current } },
+        React.createElement(Stack, __assign({}, other, { ref: ref, as: as, className: cnStepperVerticalStep({ variant: variant, current: current, ellipsis: ellipsis }, [
+                className,
+            ]), gap: "m" }),
+            React.createElement("div", { className: cnStepperVerticalStep('Path') },
+                React.createElement("div", { className: cnStepperVerticalStep('Indicator') }, indicator)),
+            React.createElement(Stack, { direction: "column", className: cnStepperVerticalStep('Description') },
+                React.createElement(Stack, { className: cnStepperVerticalStep('Info'), direction: "column", gap: "xs" },
+                    children && (React.createElement(Typography, { className: cnStepperVerticalStep('Label'), color: "primary", variant: "text-m_1" }, children)),
+                    caption && (React.createElement(Typography, { className: cnStepperVerticalStep('Caption'), color: "primary", variant: "text-s" }, caption)),
+                    hint && (React.createElement(Typography, { className: cnStepperVerticalStep('Hint'), color: "secondary", variant: "text-2xs" }, hint))),
+                action && (React.createElement("div", { className: cnStepperVerticalStep('Action') }, action))))));
+});
+StepperVerticalStep.displayName = 'StepperVerticalStep';

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/StepperVerticalStepContext.d.ts

@@ -0,0 +1,8 @@
+import type { StepperVerticalStepVariant } from './entities';
+export type StepperVerticalStepContextValue = {
+    variant: StepperVerticalStepVariant;
+    current: boolean;
+};
+export declare const StepperVerticalStepContextDefaultValue: StepperVerticalStepContextValue;
+export declare const StepperVerticalStepContext: import("react").Context<StepperVerticalStepContextValue>;
+export declare const useStepperVerticalStepContext: () => StepperVerticalStepContextValue;

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/StepperVerticalStepContext.js

@@ -0,0 +1,15 @@
+import { useContext, createContext } from 'react';
+import { isDev } from '../../../../constants/environment';
+import { STEPPER_VERTICAL_STEP_DEFAULT_VARIANT } from './constants';
+export var StepperVerticalStepContextDefaultValue = {
+    variant: STEPPER_VERTICAL_STEP_DEFAULT_VARIANT,
+    current: false,
+};
+export var StepperVerticalStepContext = createContext(StepperVerticalStepContextDefaultValue);
+export var useStepperVerticalStepContext = function () {
+    return useContext(StepperVerticalStepContext);
+};
+// Именованный провайдер
+if (isDev) {
+    StepperVerticalStepContext.displayName = 'StepperVerticalStepContext';
+}

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const STEPPER_VERTICAL_STEP_DEFAULT_VARIANT = "awaiting";
+export declare const STEPPER_VERTICAL_STEP_DEFAULT_CURRENT = false;
+export declare const STEPPER_VERTICAL_STEP_DEFAULT_TAG = "div";

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/constants.js

@@ -0,0 +1,3 @@
+export var STEPPER_VERTICAL_STEP_DEFAULT_VARIANT = 'awaiting';
+export var STEPPER_VERTICAL_STEP_DEFAULT_CURRENT = false;
+export var STEPPER_VERTICAL_STEP_DEFAULT_TAG = 'div';

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/entities/index.d.ts

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

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/entities/index.js

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

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/entities/variant.d.ts

@@ -0,0 +1,2 @@
+export declare const stepperVerticalStepVariant: readonly ["refusal", "blocked", "warning", "awaiting", "inProcessing", "success"];
+export type StepperVerticalStepVariant = (typeof stepperVerticalStepVariant)[number];

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/entities/variant.js

@@ -0,0 +1,8 @@
+export var stepperVerticalStepVariant = [
+    'refusal',
+    'blocked',
+    'warning',
+    'awaiting',
+    'inProcessing',
+    'success',
+];

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/index.d.ts

@@ -0,0 +1,5 @@
+export * from './entities';
+export * from './constants';
+export * from './StepperVerticalStep';
+export * from './StepperVerticalStepContext';
+export * from './types';

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/index.js

@@ -0,0 +1,5 @@
+export * from './entities';
+export * from './constants';
+export * from './StepperVerticalStep';
+export * from './StepperVerticalStepContext';
+export * from './types';

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/types.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentRef, ElementType, ReactNode } from 'react';
+import type { PolymorphicComponentPropsWithRef } from '../../../../utils';
+import type { STEPPER_VERTICAL_STEP_DEFAULT_TAG } from './constants';
+import type { StepperVerticalStepVariant } from './entities';
+export type StepperVerticalStepBaseProps = {
+    /** Лейбл */
+    children?: ReactNode;
+    /** Подпись */
+    caption?: ReactNode;
+    /** Описание */
+    hint?: ReactNode;
+    /** Действие */
+    action?: ReactNode;
+    /** Вариант */
+    variant?: StepperVerticalStepVariant;
+    /** Индикатор */
+    indicator?: ReactNode;
+    /** Если `true` делает шаг текущим */
+    current?: boolean;
+    /** Если `true`, обрезает текст и добавляет многоточие */
+    ellipsis?: boolean;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+};
+export type StepperVerticalStepProps<As extends ElementType = typeof STEPPER_VERTICAL_STEP_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<StepperVerticalStepBaseProps, As>;
+export type StepperVerticalStepRef<As extends ElementType = typeof STEPPER_VERTICAL_STEP_DEFAULT_TAG> = ComponentRef<As>;

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStep/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStepButton/StepperVerticalStepButton.d.ts

@@ -0,0 +1,3 @@
+import type { StepperVerticalStepButtonBaseProps } from './types';
+export declare const cnStepperVerticalStepButton: import("@bem-react/classname").ClassNameFormatter;
+export declare const StepperVerticalStepButton: import("../../../../utils").PolymorphicComponentWithRef<StepperVerticalStepButtonBaseProps, "button", "as">;

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStepButton/StepperVerticalStepButton.js

@@ -0,0 +1,16 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { useThemeProps } from '../../../../hooks/useThemeProps';
+import { cn, polymorphicComponentWithRef } from '../../../../utils';
+import { Button } from '../../../ButtonNext';
+import { STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_COLOR, STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_ICON_RIGHT, STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_TAG, } from './constants';
+export var cnStepperVerticalStepButton = cn('StepperVerticalStepButton');
+export var StepperVerticalStepButton = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        name: 'StepperVerticalStepButton',
+        props: inProps,
+    });
+    var children = props.children, _a = props.color, color = _a === void 0 ? STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_COLOR : _a, _b = props.iconRight, iconRight = _b === void 0 ? STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_ICON_RIGHT : _b, className = props.className, _c = props.as, as = _c === void 0 ? STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_TAG : _c, other = __rest(props, ["children", "color", "iconRight", "className", "as"]);
+    return (React.createElement(Button, __assign({}, other, { as: as, ref: ref, size: "2xs", variant: "function", color: color, iconRight: iconRight, className: cnStepperVerticalStepButton('', [className]) }), children));
+});
+StepperVerticalStepButton.displayName = 'StepperVerticalStepButton';

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStepButton/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_COLOR = "primary";
+export declare const STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_ICON_RIGHT: import("react").ForwardRefExoticComponent<Omit<import("@ozen-ui/icons").IconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export declare const STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_TAG = "button";

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStepButton/constants.js

@@ -0,0 +1,5 @@
+import { ChevronRightIcon } from '@ozen-ui/icons';
+import { BUTTON_DEFAULT_TAG } from '../../../ButtonNext';
+export var STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_COLOR = 'primary';
+export var STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_ICON_RIGHT = ChevronRightIcon;
+export var STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_TAG = BUTTON_DEFAULT_TAG;

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStepButton/index.d.ts

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './StepperVerticalStepButton';
+export * from './types';

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStepButton/index.js

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './StepperVerticalStepButton';
+export * from './types';

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStepButton/types.d.ts

@@ -0,0 +1,7 @@
+import type { ElementType } from 'react';
+import type { PolymorphicComponentPropsWithRef } from '../../../../utils';
+import type { ButtonProps, ButtonRef } from '../../../ButtonNext';
+import type { STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_TAG } from './constants';
+export type StepperVerticalStepButtonRef<As extends ElementType = typeof STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_TAG> = ButtonRef<As>;
+export type StepperVerticalStepButtonBaseProps = Omit<ButtonProps, 'variant' | 'size'>;
+export type StepperVerticalStepButtonProps<As extends ElementType = typeof STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<StepperVerticalStepButtonBaseProps, As>;

package/__inner__/esm/components/StepperVertical/modules/StepperVerticalStepButton/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/StepperVertical/modules/index.d.ts

@@ -0,0 +1,4 @@
+export * from './StepperVerticalIconIndicator';
+export * from './StepperVerticalIndicator';
+export * from './StepperVerticalStep';
+export * from './StepperVerticalStepButton';

package/__inner__/esm/components/StepperVertical/modules/index.js

@@ -0,0 +1,4 @@
+export * from './StepperVerticalIconIndicator';
+export * from './StepperVerticalIndicator';
+export * from './StepperVerticalStep';
+export * from './StepperVerticalStepButton';

package/__inner__/esm/components/StepperVertical/types.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentRef, ElementType, PropsWithChildren } from 'react';
+import type { PolymorphicComponentPropsWithRef } from '../../utils';
+import type { STEPPER_VERTICAL_DEFAULT_TAG } from './constants';
+export type StepperVerticalBaseProps = PropsWithChildren & {
+    /** Если `true` отображает на всю ширину */
+    fullWidth?: boolean;
+    /** Если `true`, обрезает текст и добавляет многоточие */
+    ellipsis?: boolean;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+};
+export type StepperVerticalProps<As extends ElementType = typeof STEPPER_VERTICAL_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<StepperVerticalBaseProps, As>;
+export type StepperVerticalRef<As extends ElementType = typeof STEPPER_VERTICAL_DEFAULT_TAG> = ComponentRef<As>;

package/__inner__/esm/components/StepperVertical/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/hooks/useLockBodyScroll/useLockBodyScroll.js

@@ -1,15 +1,16 @@
+import { useId } from 'react';
 import { getScrollbarSize } from '../../utils/getScrollBarSize';
 import { useIsomorphicEffect } from '../useIsomorphicEffect';
 export var FIXED_CLASSNAME = 'ScrollLock-fixed';
 var getPaddingRight = function (el) {
     return parseInt(window.getComputedStyle(el).paddingRight, 10) || 0;
 };
+var lockIds = new Set();
+var restoreStyleGlobal = { current: null };
 export function useLockBodyScroll(active) {
     if (active === void 0) { active = false; }
-    useIsomorphicEffect(function () {
-        if (!active) {
-            return undefined;
-        }
+    var lockId = useId();
+    var lockBody = function () {
         var restoreStyle = [];
         // Вычисляем все фиксированные элементы
         var fixedBlocks = document.querySelectorAll(".".concat(FIXED_CLASSNAME));
@@ -49,11 +50,30 @@ export function useLockBodyScroll(active) {
                 el.style.setProperty('padding-right', "".concat(originalPaddingRight + paddingOffset, "px"));
             });
         }
-        return function () {
+        restoreStyleGlobal.current = function () {
             restoreStyle.forEach(function (_a) {
                 var el = _a.el, value = _a.value, property = _a.property;
                 el.style.setProperty(property, value || '');
             });
         };
+    };
+    useIsomorphicEffect(function () {
+        if (!active) {
+            return undefined;
+        }
+        var hasLock = lockIds.size > 0;
+        if (!hasLock) {
+            lockBody();
+        }
+        lockIds.add(lockId);
+        return function () {
+            var _a;
+            lockIds.delete(lockId);
+            if (lockIds.size > 0) {
+                return;
+            }
+            (_a = restoreStyleGlobal.current) === null || _a === void 0 ? void 0 : _a.call(restoreStyleGlobal);
+            restoreStyleGlobal.current = null;
+        };
     }, [active]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.76.0",
+  "version": "0.77.0",
   "description": "React component library",
   "files": [
     "*"
@@ -29,9 +29,9 @@
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.3",
-    "@ozen-ui/fonts": "0.76.0",
-    "@ozen-ui/logger": "0.76.0",
-    "@ozen-ui/icons": "0.76.0"
+    "@ozen-ui/fonts": "0.77.0",
+    "@ozen-ui/logger": "0.77.0",
+    "@ozen-ui/icons": "0.77.0"
   },
   "devDependencies": {
     "@types/lodash.isequal": "^4.5.0"