@ozen-ui/kit 0.79.0 → 0.81.0

package/__inner__/esm/components/Select/modules/SelectIconButton/types.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentRef, ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../../../utils';
+import type { IconButtonBaseProps } from '../../../IconButtonNext';
+import type { SELECT_ICON_BUTTON_DEFAULT_TAG } from './constants';
+export type SelectIconButtonBaseProps = Omit<IconButtonBaseProps, 'size' | 'color' | 'variant' | 'compressed'>;
+export type SelectIconButtonProps<As extends ElementType = typeof SELECT_ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<SelectIconButtonBaseProps, As>;
+export type SelectIconButtonRef<As extends ElementType = typeof SELECT_ICON_BUTTON_DEFAULT_TAG> = ComponentRef<As>;

package/__inner__/esm/components/Select/modules/SelectIconButton/types.js

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

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

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

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

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

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

@@ -2,6 +2,7 @@ import './StepperVertical.css';
 import './modules/StepperVerticalIconIndicator/StepperVerticalIconIndicator.css';
 import './modules/StepperVerticalIndicator/StepperVerticalIndicator.css';
 import './modules/StepperVerticalStep/StepperVerticalStep.css';
+import './modules/StepperVerticalStepSubstepButton/StepperVerticalStepSubstepButton.css';
 import type { StepperVerticalBaseProps } from './types';
 export declare const cnStepperVertical: import("@bem-react/classname").ClassNameFormatter;
 export declare const StepperVertical: import("../../utils").PolymorphicComponentWithRef<StepperVerticalBaseProps, "div", "as">;

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

@@ -3,16 +3,27 @@ import './StepperVertical.css';
 import './modules/StepperVerticalIconIndicator/StepperVerticalIconIndicator.css';
 import './modules/StepperVerticalIndicator/StepperVerticalIndicator.css';
 import './modules/StepperVerticalStep/StepperVerticalStep.css';
-import React from 'react';
+import './modules/StepperVerticalStepSubstepButton/StepperVerticalStepSubstepButton.css';
+import React, { useRef, useMemo } from 'react';
+import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn, polymorphicComponentWithRef } from '../../utils';
 import { Stack } from '../Stack';
 import { STEPPER_VERTICAL_DEFAULT_ELLIPSIS, STEPPER_VERTICAL_DEFAULT_TAG, } from './constants';
+import { useStepperVerticalStepsControl, useStepperVerticalStepsStructure, } from './hooks';
 import { StepperVerticalContext } from './StepperVerticalContext';
 export var cnStepperVertical = cn('StepperVertical');
 export var StepperVertical = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ name: 'StepperVertical', props: inProps });
     var children = props.children, _a = props.as, as = _a === void 0 ? STEPPER_VERTICAL_DEFAULT_TAG : _a, _b = props.ellipsis, ellipsis = _b === void 0 ? STEPPER_VERTICAL_DEFAULT_ELLIPSIS : _b, className = props.className, fullWidth = props.fullWidth, other = __rest(props, ["children", "as", "ellipsis", "className", "fullWidth"]);
-    return (React.createElement(StepperVerticalContext.Provider, { value: { ellipsis: ellipsis } },
-        React.createElement(Stack, __assign({}, other, { ref: ref, as: as, className: cnStepperVertical('', [className]), direction: "column", display: fullWidth ? 'block' : 'inline' }), children)));
+    var internalRef = useRef(null);
+    var stepsControl = useStepperVerticalStepsControl();
+    var structure = useStepperVerticalStepsStructure(internalRef, stepsControl, children);
+    var memoizedContextValue = useMemo(function () { return ({
+        ellipsis: ellipsis,
+        stepsControl: stepsControl,
+        structure: structure,
+    }); }, [ellipsis, stepsControl, structure]);
+    return (React.createElement(StepperVerticalContext.Provider, { value: memoizedContextValue },
+        React.createElement(Stack, __assign({}, other, { ref: useMultiRef([internalRef, ref]), as: as, className: cnStepperVertical('', [className]), direction: "column", display: fullWidth ? 'block' : 'inline' }), children)));
 });

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

@@ -1,5 +1,13 @@
+import type { StoredValue } from '../../hooks/useStoredValue';
+import { EventBus } from '../../utils';
+import type { StepperVerticalStepsControl, StepperVerticalStepsStructure, StepperVerticalStepsStructureEvents } from './hooks';
 export type StepperVerticalContextValue = {
     ellipsis: boolean;
+    stepsControl: StepperVerticalStepsControl;
+    structure: {
+        value: StoredValue<StepperVerticalStepsStructure>;
+        eventBus: EventBus<StepperVerticalStepsStructureEvents>;
+    };
 };
 export declare const StepperVerticalContextDefaultValue: StepperVerticalContextValue;
 export declare const StepperVerticalContext: import("react").Context<StepperVerticalContextValue>;

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

@@ -1,8 +1,18 @@
 import { useContext, createContext } from 'react';
 import { isDev } from '../../constants/environment';
+import { EventBus } from '../../utils';
 import { STEPPER_VERTICAL_DEFAULT_ELLIPSIS } from './constants';
 export var StepperVerticalContextDefaultValue = {
     ellipsis: STEPPER_VERTICAL_DEFAULT_ELLIPSIS,
+    stepsControl: {
+        steps: { current: {} },
+        initializeStep: function () { },
+        deleteStep: function () { },
+    },
+    structure: {
+        value: { current: { nodes: [], nodeById: {} } },
+        eventBus: new EventBus(),
+    },
 };
 export var StepperVerticalContext = createContext(StepperVerticalContextDefaultValue);
 export var useStepperVerticalContext = function () {

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

@@ -0,0 +1,4 @@
+export * from './useStepperVerticalCreateStep';
+export * from './useStepperVerticalStepsControl';
+export * from './useStepperVerticalStepsStructure';
+export * from './useStepperVerticalStepHelper';

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

@@ -0,0 +1,4 @@
+export * from './useStepperVerticalCreateStep';
+export * from './useStepperVerticalStepsControl';
+export * from './useStepperVerticalStepsStructure';
+export * from './useStepperVerticalStepHelper';

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalCreateStep/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './useStepperVerticalCreateStep';

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalCreateStep/index.js

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './useStepperVerticalCreateStep';

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

@@ -0,0 +1,11 @@
+import type { Dispatch, RefObject, SetStateAction } from 'react';
+export type StepperVerticalStepControl = {
+    id: string;
+    ref: RefObject<HTMLElement | null>;
+    root: StepperVerticalStepControl | null;
+    substeps: Record<string, StepperVerticalStepControl>;
+    registerSubstep: (substep: StepperVerticalStepControl) => void;
+    unregisterSubstep: (substep: StepperVerticalStepControl) => void;
+    isSubStepsOpen: boolean;
+    setIsSubStepsOpen: Dispatch<SetStateAction<boolean>>;
+};

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

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

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalCreateStep/useStepperVerticalCreateStep.d.ts

@@ -0,0 +1,2 @@
+import type { StepperVerticalStepControl } from './types';
+export declare const useStepperVerticalCreateStep: (root?: StepperVerticalStepControl) => StepperVerticalStepControl;

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalCreateStep/useStepperVerticalCreateStep.js

@@ -0,0 +1,44 @@
+import { __read } from "tslib";
+import { useCallback, useRef, useState, useEffect } from 'react';
+import { useStoredValue } from '../../../../hooks/useStoredValue';
+import { useUniqueId } from '../../../../hooks/useUniqueId';
+import { useStepperVerticalContext } from '../../StepperVerticalContext';
+export var useStepperVerticalCreateStep = function (root) {
+    var id = useUniqueId();
+    var _a = __read(useState(false), 2), isSubStepsOpen = _a[0], setIsSubStepsOpen = _a[1];
+    var stepperVerticalContext = useStepperVerticalContext();
+    var ref = useRef(null);
+    var step = useStoredValue(function () { return ({
+        id: id,
+        root: root !== null && root !== void 0 ? root : null,
+        ref: ref,
+        isSubStepsOpen: isSubStepsOpen,
+        setIsSubStepsOpen: setIsSubStepsOpen,
+        unregisterSubstep: function () { },
+        registerSubstep: function () { },
+        substeps: {},
+    }); });
+    var registerSubstep = useCallback(function (substep) {
+        step.current.substeps[substep.id] = substep;
+    }, []);
+    var unregisterSubstep = useCallback(function (substep) {
+        delete step.current.substeps[substep.id];
+    }, []);
+    step.current.isSubStepsOpen = isSubStepsOpen;
+    step.current.root = root !== null && root !== void 0 ? root : null;
+    step.current.registerSubstep = registerSubstep;
+    step.current.unregisterSubstep = unregisterSubstep;
+    useEffect(function () {
+        stepperVerticalContext.stepsControl.initializeStep(step.current);
+        if (root) {
+            root.registerSubstep(step.current);
+        }
+        return function () {
+            stepperVerticalContext.stepsControl.deleteStep(step.current);
+            if (root) {
+                root.unregisterSubstep(step.current);
+            }
+        };
+    }, []);
+    return step.current;
+};

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalStepHelper.d.ts

@@ -0,0 +1,5 @@
+import type { StepperVerticalStepControl } from './useStepperVerticalCreateStep';
+export declare const useStepperVerticalStepHelper: (step: StepperVerticalStepControl) => {
+    hasPrevious: boolean;
+    hasNext: boolean;
+};

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalStepHelper.js

@@ -0,0 +1,88 @@
+import { __read } from "tslib";
+import { useEffect, useState } from 'react';
+import { useEventBusEvents } from '../../../hooks/useEventBusEvents';
+import { useStepperVerticalContext } from '../StepperVerticalContext';
+export var useStepperVerticalStepHelper = function (step) {
+    var _a;
+    var structure = useStepperVerticalContext().structure;
+    var _b = __read(useState(false), 2), hasPrevious = _b[0], setHasPrevious = _b[1];
+    var _c = __read(useState(false), 2), hasNext = _c[0], setHasNext = _c[1];
+    var getStructureNode = function (forStep) {
+        var _a;
+        if (forStep === void 0) { forStep = step; }
+        var node = (_a = structure.value.current.nodeById[forStep.id]) !== null && _a !== void 0 ? _a : null;
+        return node;
+    };
+    var getNodeIndex = function (node) {
+        if (!node.root) {
+            return structure.value.current.nodes.indexOf(node);
+        }
+        return node.root.substeps.indexOf(node);
+    };
+    var checkHasNext = function (forStep) {
+        if (forStep === void 0) { forStep = step; }
+        if (forStep.isSubStepsOpen) {
+            return true;
+        }
+        var node = getStructureNode(forStep);
+        if (!node) {
+            return false;
+        }
+        var nodeIndex = getNodeIndex(node);
+        if (!node.root) {
+            return !!structure.value.current.nodes[nodeIndex + 1];
+        }
+        var sameLevelNext = node.root.substeps[nodeIndex + 1];
+        if (sameLevelNext) {
+            return true;
+        }
+        var checkHasTopLevelNext = function (node) {
+            if (!node.root) {
+                return false;
+            }
+            var rootIndex = getNodeIndex(node.root);
+            var nextStep = node.root.root
+                ? node.root.root.substeps[rootIndex + 1]
+                : structure.value.current.nodes[rootIndex + 1];
+            if (nextStep) {
+                return true;
+            }
+            return checkHasTopLevelNext(node.root);
+        };
+        var otherLevelNext = checkHasTopLevelNext(node);
+        return otherLevelNext;
+    };
+    var checkHasPrevious = function (forStep) {
+        if (forStep === void 0) { forStep = step; }
+        var node = getStructureNode(forStep);
+        if (!node) {
+            return false;
+        }
+        var nodeIndex = getNodeIndex(node);
+        if (!node.root) {
+            return !!structure.value.current.nodes[nodeIndex - 1];
+        }
+        var rootHasNext = checkHasNext(node.root.step);
+        if (rootHasNext) {
+            return true;
+        }
+        if (nodeIndex === 0) {
+            return node.root.step.isSubStepsOpen;
+        }
+        return true;
+    };
+    var recalculate = function () {
+        setHasPrevious(checkHasPrevious());
+        setHasNext(checkHasNext());
+    };
+    useEventBusEvents(structure.eventBus, {
+        update: recalculate,
+    });
+    useEffect(function () {
+        recalculate();
+    }, [step.isSubStepsOpen, (_a = step.root) === null || _a === void 0 ? void 0 : _a.isSubStepsOpen]);
+    return {
+        hasPrevious: hasPrevious,
+        hasNext: hasNext,
+    };
+};

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalStepsControl/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './useStepperVerticalStepsControl';

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalStepsControl/index.js

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './useStepperVerticalStepsControl';

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

@@ -0,0 +1,8 @@
+import type { StoredValue } from '../../../../hooks/useStoredValue';
+import type { StepperVerticalStepControl } from '../useStepperVerticalCreateStep';
+export type StepperVerticalSteps = Record<string, StepperVerticalStepControl>;
+export type StepperVerticalStepsControl = {
+    initializeStep: (step: StepperVerticalStepControl) => void;
+    deleteStep: (step: StepperVerticalStepControl) => void;
+    steps: StoredValue<StepperVerticalSteps>;
+};

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

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

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalStepsControl/useStepperVerticalStepsControl.d.ts

@@ -0,0 +1,2 @@
+import type { StepperVerticalStepsControl } from './types';
+export declare const useStepperVerticalStepsControl: () => StepperVerticalStepsControl;

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalStepsControl/useStepperVerticalStepsControl.js

@@ -0,0 +1,22 @@
+import { useCallback, useMemo } from 'react';
+import { useStoredValue } from '../../../../hooks/useStoredValue';
+export var useStepperVerticalStepsControl = function () {
+    var steps = useStoredValue({});
+    var initializeStep = useCallback(function (step) {
+        if (steps.current[step.id]) {
+            return;
+        }
+        steps.current[step.id] = step;
+    }, []);
+    var deleteStep = useCallback(function (step) {
+        if (!steps.current[step.id]) {
+            return;
+        }
+        delete steps.current[step.id];
+    }, []);
+    return useMemo(function () { return ({
+        deleteStep: deleteStep,
+        initializeStep: initializeStep,
+        steps: steps,
+    }); }, []);
+};

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalStepsStructure/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './useStepperVerticalStepsStructure';

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalStepsStructure/index.js

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './useStepperVerticalStepsStructure';

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

@@ -0,0 +1,15 @@
+import type { StepperVerticalStepControl } from '../useStepperVerticalCreateStep';
+export type StepperVerticalStepsStructureNode = {
+    root: StepperVerticalStepsStructureNode | null;
+    step: StepperVerticalStepControl;
+    substeps: StepperVerticalStepsStructureNode[];
+};
+export type StepperVerticalStepsStructure = {
+    nodeById: Record<string, StepperVerticalStepsStructureNode>;
+    nodes: StepperVerticalStepsStructureNode[];
+};
+export type StepperVerticalStepsStructureEvents = {
+    update: {
+        structure: StepperVerticalStepsStructure;
+    };
+};

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

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

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalStepsStructure/useStepperVerticalStepsStructure.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode, RefObject } from 'react';
+import type { StepperVerticalRef } from '../../types';
+import type { StepperVerticalStepsControl } from '../useStepperVerticalStepsControl';
+import type { StepperVerticalStepsStructure, StepperVerticalStepsStructureEvents } from './types';
+export declare const useStepperVerticalStepsStructure: (ref: RefObject<StepperVerticalRef>, stepsControl: StepperVerticalStepsControl, children: ReactNode) => {
+    value: import("../../../../hooks/useStoredValue").StoredValue<StepperVerticalStepsStructure>;
+    eventBus: import("../../../../utils").EventBus<StepperVerticalStepsStructureEvents>;
+};

package/__inner__/esm/components/StepperVertical/hooks/useStepperVerticalStepsStructure/useStepperVerticalStepsStructure.js

@@ -0,0 +1,78 @@
+import { useMemo, useEffect } from 'react';
+import { useEventBus } from '../../../../hooks/useEventBus';
+import { useStoredValue } from '../../../../hooks/useStoredValue';
+import { cnCollapse } from '../../../Collapse';
+export var useStepperVerticalStepsStructure = function (ref, stepsControl, children) {
+    var eventBus = useEventBus();
+    var structure = useStoredValue({
+        nodes: [],
+        nodeById: {},
+    });
+    var calculate = function () {
+        var element = ref.current;
+        if (!element) {
+            return { nodes: [], nodeById: {} };
+        }
+        var nodeById = {};
+        var nodes = [];
+        var stepsControlSteps = Object.values(stepsControl.steps.current);
+        var collectNodeSubsteps = function (node, element) {
+            var substeps = Object.values(node.step.substeps);
+            if (substeps.length === 0) {
+                return;
+            }
+            var nextElement = element.nextElementSibling;
+            if (!nextElement) {
+                throw new Error('Ожидается следующий элемент для шага с подшагами');
+            }
+            var isNextElementCollapse = nextElement.classList.contains(cnCollapse());
+            if (!isNextElementCollapse) {
+                throw new Error('Ожидается collapse для подшагов');
+            }
+            var collapseInner = nextElement.firstElementChild;
+            if (!collapseInner) {
+                throw new Error('Не удалось получить inner для collapse');
+            }
+            Array.from(collapseInner.childNodes).forEach(function (collapseStep) {
+                var relatedSubstep = substeps.find(function (substep) { return substep.ref.current === collapseStep; });
+                if (!relatedSubstep) {
+                    return;
+                }
+                var newNode = {
+                    root: node,
+                    step: relatedSubstep,
+                    substeps: [],
+                };
+                nodeById[relatedSubstep.id] = newNode;
+                node.substeps.push(newNode);
+                if (Object.keys(relatedSubstep.substeps).length > 0) {
+                    collectNodeSubsteps(newNode, relatedSubstep.ref.current);
+                }
+            });
+        };
+        element.childNodes.forEach(function (node) {
+            var relatedStep = stepsControlSteps.find(function (step) { return step.ref.current === node; });
+            if (!relatedStep) {
+                return;
+            }
+            var newNode = {
+                root: null,
+                step: relatedStep,
+                substeps: [],
+            };
+            nodeById[relatedStep.id] = newNode;
+            nodes.push(newNode);
+            collectNodeSubsteps(newNode, newNode.step.ref.current);
+        });
+        return { nodeById: nodeById, nodes: nodes };
+    };
+    var recalculate = function () {
+        var newStructure = calculate();
+        structure.current = newStructure;
+        eventBus.publish('update', { structure: structure.current });
+    };
+    useEffect(function () {
+        recalculate();
+    }, [children]);
+    return useMemo(function () { return ({ value: structure, eventBus: eventBus }); }, []);
+};

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

@@ -1,5 +1,6 @@
-import { CheckCircleFilledIcon, CircleFillIcon, ClockFilledIcon, CrossCircleFilledIcon, MinusCircleFilledIcon, WarningCircleFilledIcon, } from '@ozen-ui/icons';
+import { CheckCircleFilledIcon, CircleFillIcon, ClockFilledIcon, CrossCircleFilledIcon, DotBigIcon, MinusCircleFilledIcon, WarningCircleFilledIcon, } from '@ozen-ui/icons';
 export var STEPPER_VERTICAL_STEP_DEFAULT_ICON_BY_VARIANT = {
+    default: DotBigIcon,
     refusal: MinusCircleFilledIcon,
     blocked: CrossCircleFilledIcon,
     warning: WarningCircleFilledIcon,

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

@@ -27,6 +27,18 @@
     padding-block: var(--spacing-xs);
   }
 
+  .StepperVerticalStep-Substeps .Collapse-Inner {
+      display: flex;
+      flex-direction: column;
+    }
+
+  .StepperVerticalStep_variant_default {
+    --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_variant_refusal {
     --stepper-vertical-indicator-color-non-current: var(--color-background-error-light);
     --stepper-vertical-indicator-color-current: var(--color-background-error);
@@ -91,22 +103,48 @@
       white-space: nowrap;
     }
 
-.StepperVerticalStep:not(:last-child) .StepperVerticalStep-Path {
+  .StepperVerticalStep-Path {
     position: relative;
   }
 
-.StepperVerticalStep:not(:last-child) .StepperVerticalStep-Path::after {
+  .StepperVerticalStep-Path::before {
+    content: '';
+    box-sizing: border-box;
+    display: block;
+    block-size: var(--stepper-vertical-indicator-icon-inset-top);
+    inline-size: 2px;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 50%;
+    transform: translate(-50%, 0);
+    background-color: var(--color-background-secondary);
+    border-radius: 0 0 var(--border-radius-xs) var(--border-radius-xs);
+    transition: var(--transition-default);
+    transition-property: block-size, clip-path;
+    clip-path: inset(100% 0 0 0);
+  }
+
+  .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));
+    block-size: 0;
     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);
+    border-radius: var(--border-radius-xs) var(--border-radius-xs) 0 0;
+    transition: var(--transition-default) block-size;
   }
+
+  .StepperVerticalStep_hasPrevious .StepperVerticalStep-Path::before {
+      clip-path: inset(0% 0 0 0);
+    }
+
+  .StepperVerticalStep_hasNext .StepperVerticalStep-Path::after {
+      block-size: calc(100% - var(--stepper-vertical-indicator-inset-top) + 1px);
+    }

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

@@ -1,3 +1,2 @@
 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

@@ -1,38 +1,68 @@
 import { __assign, __rest } from "tslib";
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
+import { useMultiRef } from '../../../../hooks/useMultiRef';
 import { useThemeProps } from '../../../../hooks/useThemeProps';
-import { cn, polymorphicComponentWithRef } from '../../../../utils';
+import { isArray, polymorphicComponentWithRef, resolveChildren, } from '../../../../utils';
+import { Collapse } from '../../../Collapse';
 import { Stack } from '../../../Stack';
 import { Typography } from '../../../Typography';
+import { useStepperVerticalStepHelper, useStepperVerticalCreateStep, } from '../../hooks';
 import { useStepperVerticalContext } from '../../StepperVerticalContext';
 import { StepperVerticalIconIndicator } from '../StepperVerticalIconIndicator';
+import { cnStepperVerticalStep } from './classNames';
 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');
+import { StepperVerticalStepRootContext, useStepperVerticalStepRootContext, } from './StepperVerticalStepRootContext';
 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 _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, substeps = props.substeps, other = __rest(props, ["variant", "current", "ellipsis", "hint", "children", "caption", "action", "indicator", "className", "as", "substeps"]);
     var stepperVerticalContext = useStepperVerticalContext();
+    var rootContext = useStepperVerticalStepRootContext();
+    var isSubstep = !!rootContext;
+    var hasSubsteps = (function () {
+        var resolved = resolveChildren(substeps);
+        if (isArray(resolved)) {
+            return resolved.length > 0;
+        }
+        return !!resolved;
+    })();
     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))))));
+    var step = useStepperVerticalCreateStep(rootContext === null || rootContext === void 0 ? void 0 : rootContext.root);
+    var _e = useStepperVerticalStepHelper(step), hasNext = _e.hasNext, hasPrevious = _e.hasPrevious;
+    useEffect(function () {
+        if (rootContext && !(rootContext === null || rootContext === void 0 ? void 0 : rootContext.root.isSubStepsOpen)) {
+            step.setIsSubStepsOpen(false);
+        }
+    }, [rootContext === null || rootContext === void 0 ? void 0 : rootContext.root.isSubStepsOpen]);
+    var memoizedContext = useMemo(function () { return ({ variant: variant, current: current, hasSubsteps: hasSubsteps, step: step }); }, [variant, current, hasSubsteps, step, step.isSubStepsOpen, step.root]);
+    var memoizedRootContext = useMemo(function () { return ({ root: step }); }, [step, step.isSubStepsOpen, step.root]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StepperVerticalStepContext.Provider, { value: memoizedContext },
+            React.createElement(Stack, __assign({}, other, { ref: useMultiRef([step.ref, ref]), as: as, className: cnStepperVerticalStep({
+                    variant: variant,
+                    current: current,
+                    ellipsis: ellipsis,
+                    substep: isSubstep,
+                    hasNext: hasNext,
+                    hasPrevious: hasPrevious,
+                }, [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))))),
+        hasSubsteps && (React.createElement(StepperVerticalStepRootContext.Provider, { value: memoizedRootContext },
+            React.createElement(Collapse, { className: cnStepperVerticalStep('Substeps'), expanded: step.isSubStepsOpen }, substeps)))));
 });
 StepperVerticalStep.displayName = 'StepperVerticalStep';

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

@@ -1,7 +1,10 @@
+import type { StepperVerticalStepControl } from '../../hooks';
 import type { StepperVerticalStepVariant } from './entities';
 export type StepperVerticalStepContextValue = {
     variant: StepperVerticalStepVariant;
     current: boolean;
+    hasSubsteps: boolean;
+    step: StepperVerticalStepControl;
 };
 export declare const StepperVerticalStepContextDefaultValue: StepperVerticalStepContextValue;
 export declare const StepperVerticalStepContext: import("react").Context<StepperVerticalStepContextValue>;