@snack-uikit/stepper 0.6.13 → 0.6.15-preview-1f246c4a.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.6.14 (2024-09-26)
+
+### Only dependencies have been changed
+* [@snack-uikit/truncate-string@0.4.24](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/truncate-string/CHANGELOG.md)
+
+
+
+
+
 ## 0.6.13 (2024-09-24)
 
 ### Only dependencies have been changed

package/dist/cjs/StepperContext/StepperContext.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStepperApi = exports.StepperContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.StepperContext = (0, react_1.createContext)({
+  stepper: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}),
+  stepCount: 0,
+  isCompleted: false,
+  currentStepIndex: 0,
+  goNext() {
+    /* stub */
+  },
+  goPrev() {
+    /* stub */
+  },
+  resetValidation() {
+    /* stub */
+  },
+  setValidator() {
+    /* stub */
+  }
+});
+const useStepperApi = () => (0, react_1.useContext)(exports.StepperContext);
+exports.useStepperApi = useStepperApi;

package/dist/cjs/StepperContext/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./StepperContext"), exports);

package/dist/cjs/components/Stepper/Stepper.js

@@ -0,0 +1,183 @@
+"use strict";
+
+var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Stepper = Stepper;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const helperComponents_1 = require("../../helperComponents");
+const StepperContext_1 = require("../../StepperContext");
+const styles_module_scss_1 = __importDefault({});
+const DEFAULT_VALIDATOR = () => __awaiter(void 0, void 0, void 0, function* () {
+  return true;
+});
+function Stepper(_a) {
+  var {
+      children,
+      steps,
+      className,
+      onChangeCurrentStep,
+      onCompleteChange,
+      defaultCurrentStepIndex = 0,
+      validator: validatorProp = DEFAULT_VALIDATOR
+    } = _a,
+    props = __rest(_a, ["children", "steps", "className", "onChangeCurrentStep", "onCompleteChange", "defaultCurrentStepIndex", "validator"]);
+  const isCompletedByDefault = defaultCurrentStepIndex === steps.length - 1;
+  const [currentStepState, setCurrentStepState] = (0, react_1.useState)(isCompletedByDefault ? constants_1.STEP_STATE.Completed : constants_1.STEP_STATE.Current);
+  const [currentStepIndex, setCurrentStepIndexValue] = (0, react_1.useState)(defaultCurrentStepIndex);
+  const [isCompleted, setIsCompleted] = (0, react_1.useState)(isCompletedByDefault);
+  const [stepsValidator, setStepsValidator] = (0, react_1.useState)();
+  (0, react_1.useEffect)(() => {
+    onCompleteChange === null || onCompleteChange === void 0 ? void 0 : onCompleteChange(isCompleted);
+  }, [isCompleted, onCompleteChange]);
+  const setCurrentStepIndex = (0, react_1.useCallback)(newValue => {
+    setCurrentStepIndexValue(prevValue => {
+      if (prevValue !== newValue) {
+        onChangeCurrentStep === null || onChangeCurrentStep === void 0 ? void 0 : onChangeCurrentStep(newValue, prevValue);
+      }
+      return newValue;
+    });
+  }, [onChangeCurrentStep]);
+  const goNext = (0, react_1.useCallback)(function () {
+    let newStepIndexUnsafety = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : currentStepIndex + 1;
+    if (currentStepIndex >= steps.length || isCompleted || newStepIndexUnsafety <= currentStepIndex) {
+      return;
+    }
+    const newStepIndex = Math.min(steps.length - 1, newStepIndexUnsafety);
+    setCurrentStepState(constants_1.STEP_STATE.Loading);
+    const validator = (stepsValidator === null || stepsValidator === void 0 ? void 0 : stepsValidator.value) || validatorProp;
+    validator(currentStepIndex, newStepIndex).catch(() => false).then(isValid => {
+      if (!isValid) {
+        setCurrentStepState(constants_1.STEP_STATE.Rejected);
+        return;
+      }
+      if (currentStepIndex === steps.length - 1) {
+        // завершился последний шаг
+        setCurrentStepState(constants_1.STEP_STATE.Completed);
+        setIsCompleted(true);
+      } else {
+        setCurrentStepIndex(newStepIndex);
+        setCurrentStepState(constants_1.STEP_STATE.Current);
+      }
+    });
+  }, [currentStepIndex, isCompleted, setCurrentStepIndex, steps.length, stepsValidator === null || stepsValidator === void 0 ? void 0 : stepsValidator.value, validatorProp]);
+  const goPrev = (0, react_1.useCallback)(function () {
+    let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : currentStepIndex - 1;
+    if (currentStepIndex === 0 || index < 0 || index > currentStepIndex) {
+      return;
+    }
+    if (index === currentStepIndex && !isCompleted) {
+      return;
+    }
+    if (isCompleted) {
+      setIsCompleted(false);
+    }
+    setCurrentStepIndex(index);
+    setCurrentStepState(constants_1.STEP_STATE.Current);
+  }, [currentStepIndex, isCompleted, setCurrentStepIndex]);
+  const stepsView = (0, react_1.useMemo)(() => steps.map((step, index) => {
+    const number = index + 1;
+    if (index < currentStepIndex) {
+      return Object.assign(Object.assign({}, step), {
+        number,
+        state: constants_1.STEP_STATE.Completed,
+        onClick: () => goPrev(index)
+      });
+    }
+    if (index === currentStepIndex) {
+      return Object.assign(Object.assign({}, step), {
+        number,
+        state: currentStepState,
+        onClick: isCompleted ? () => goPrev(index) : undefined
+      });
+    }
+    if (index - 1 === currentStepIndex) {
+      return Object.assign(Object.assign({}, step), {
+        number,
+        state: constants_1.STEP_STATE.Waiting,
+        onClick: () => goNext()
+      });
+    }
+    return Object.assign(Object.assign({}, step), {
+      number,
+      state: constants_1.STEP_STATE.Waiting
+    });
+  }), [steps, currentStepIndex, goPrev, currentStepState, isCompleted, goNext]);
+  const resetValidation = (0, react_1.useCallback)(() => {
+    if (currentStepState === constants_1.STEP_STATE.Rejected) {
+      setCurrentStepState(constants_1.STEP_STATE.Current);
+    }
+  }, [currentStepState]);
+  const setValidator = (0, react_1.useCallback)(validator => {
+    setStepsValidator({
+      value: validator
+    });
+  }, []);
+  const stepper = (0, jsx_runtime_1.jsx)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.stepper, className)
+  }, (0, utils_1.extractSupportProps)(props), {
+    children: stepsView.map((step, index) => (0, jsx_runtime_1.jsx)(helperComponents_1.Step, {
+      step: step,
+      "data-test-id": props['data-test-id'],
+      hideTailLine: index === steps.length - 1
+    }, step.title + index))
+  }));
+  const stepperApi = {
+    goNext,
+    goPrev,
+    currentStepIndex,
+    isCompleted,
+    resetValidation,
+    stepCount: steps.length,
+    stepper,
+    setValidator
+  };
+  return (0, jsx_runtime_1.jsx)(StepperContext_1.StepperContext.Provider, {
+    value: stepperApi,
+    children: children(stepperApi)
+  });
+}

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./Stepper"), exports);

package/dist/cjs/components/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./Stepper"), exports);

package/dist/cjs/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.STEP_STATE = void 0;
+exports.STEP_STATE = {
+  Completed: 'completed',
+  Current: 'current',
+  Loading: 'loading',
+  Waiting: 'waiting',
+  Rejected: 'rejected'
+};

package/dist/cjs/helperComponents/Icon/Icon.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Icon = Icon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const icons_1 = require("@snack-uikit/icons");
+const loaders_1 = require("@snack-uikit/loaders");
+const typography_1 = require("@snack-uikit/typography");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault({});
+function getContent(state, number) {
+  switch (state) {
+    case constants_1.STEP_STATE.Completed:
+      return (0, jsx_runtime_1.jsx)(icons_1.CheckSVG, {});
+    case constants_1.STEP_STATE.Rejected:
+      return (0, jsx_runtime_1.jsx)(icons_1.CrossSVG, {});
+    case constants_1.STEP_STATE.Loading:
+      return (0, jsx_runtime_1.jsx)(loaders_1.Sun, {
+        size: 's'
+      });
+    default:
+      return number;
+  }
+}
+function Icon(_ref) {
+  let {
+    state,
+    number,
+    className
+  } = _ref;
+  const content = (0, react_1.useMemo)(() => getContent(state, number), [number, state]);
+  return (0, jsx_runtime_1.jsx)("div", {
+    "data-state": state,
+    className: (0, classnames_1.default)(styles_module_scss_1.default.icon, className),
+    children: typeof content === 'number' ? (0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelL, {
+      children: content
+    }) : content
+  });
+}

package/dist/cjs/helperComponents/Icon/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./Icon"), exports);

package/dist/cjs/helperComponents/Step/Step.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Step = Step;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const typography_1 = require("@snack-uikit/typography");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const utils_2 = require("../../utils");
+const Icon_1 = require("../Icon");
+const styles_module_scss_1 = __importDefault({});
+const getTailTestId = (0, utils_2.getTestIdBuilder)('_element-tail');
+const getStepTestId = (0, utils_2.getTestIdBuilder)('_element-step');
+function Step(_a) {
+  var {
+      step,
+      className,
+      'data-test-id': testId,
+      hideTailLine
+    } = _a,
+    props = __rest(_a, ["step", "className", 'data-test-id', "hideTailLine"]);
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.step, className),
+    "data-state": step.state
+  }, (0, utils_1.extractSupportProps)(props), {
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.track,
+      children: [(0, jsx_runtime_1.jsx)("button", {
+        type: 'button',
+        className: styles_module_scss_1.default.statusContainer,
+        onClick: step.onClick,
+        disabled: !step.onClick,
+        "data-test-id": getStepTestId(testId),
+        "data-state": step.state,
+        children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, Object.assign({}, step, {
+          className: styles_module_scss_1.default.icon
+        }))
+      }), !hideTailLine && (0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_1.default.tail,
+        "data-completed": step.state === constants_1.STEP_STATE.Completed || undefined,
+        "data-test-id": getTailTestId(testId),
+        children: (0, jsx_runtime_1.jsx)("div", {
+          className: styles_module_scss_1.default.tailLine
+        })
+      })]
+    }), (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.content,
+      children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, {
+        className: styles_module_scss_1.default.title,
+        tag: 'div',
+        children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+          text: step.title
+        })
+      }), step.description && (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, {
+        className: styles_module_scss_1.default.description,
+        tag: 'div',
+        children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+          text: step.description,
+          maxLines: 2
+        })
+      })]
+    })]
+  }));
+}

package/dist/cjs/helperComponents/Step/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./Step"), exports);

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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("./Step"), exports);
+__exportStar(require("./Icon"), exports);

package/dist/cjs/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__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 = void 0 && (void 0).__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
+});
+exports.useStepperApi = void 0;
+__exportStar(require("./components"), exports);
+var StepperContext_1 = require("./StepperContext");
+Object.defineProperty(exports, "useStepperApi", {
+  enumerable: true,
+  get: function () {
+    return StepperContext_1.useStepperApi;
+  }
+});

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/utils.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTestIdBuilder = void 0;
+const getTestIdBuilder = postfix => testId => postfix && testId ? `${testId}${postfix}` : undefined;
+exports.getTestIdBuilder = getTestIdBuilder;

package/dist/esm/StepperContext/StepperContext.d.ts

@@ -0,0 +1,4 @@
+import { StepperApi } from '../types';
+export type StepperContextValue = StepperApi;
+export declare const StepperContext: import("react").Context<StepperApi>;
+export declare const useStepperApi: () => StepperApi;

package/dist/esm/StepperContext/index.js

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

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

@@ -0,0 +1,27 @@
+import { ReactElement } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { StepData, StepperApi, StepsValidator } from '../../types';
+export type StepperState = StepperApi & {
+    stepper: ReactElement;
+};
+export type StepperProps = WithSupportProps<{
+    /** Массив шагов */
+    steps: StepData[];
+    /** Индекс текущего шага по-дефолту */
+    defaultCurrentStepIndex: number;
+    /** Валидатор шагов. Выполняется при смене шага. Принимает первым аргументом индекс текущего, вторым - индекс нового шага.  */
+    validator?: StepsValidator;
+    /** CSS-класс */
+    className?: string;
+    /**
+     * Render function. Принимает аргументы: `stepper` - JSX-элемент степпера,
+     * `goNext(stepIndex?: number)` - перейти на след. шаг, `goPrev(stepIndex?: number)` - перейти на пред. шаг, `resetValidation` - сбросить состояние валидации для текущего шага, `setValidator` переопределяет функцию-валидатор, которая принимает в параметры индекс текущего шага и индекс нового, `isCompleted` - окончен ли процесс, `currentStepIndex` - индекс текущего шага, `stepCount` - кол-во шагов.
+     * @type ({stepper, ...api}) => ReactElement
+     */
+    children: (params: StepperState) => ReactElement;
+    /** Колбек смены текущего степа */
+    onChangeCurrentStep?: (newValue: number, prevValue: number) => void;
+    /** Колбек изменения завершенности */
+    onCompleteChange?: (isCompleted: boolean) => void;
+}>;
+export declare function Stepper({ children, steps, className, onChangeCurrentStep, onCompleteChange, defaultCurrentStepIndex, validator: validatorProp, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/esm/components/index.js

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

package/dist/esm/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const STEP_STATE: {
+    readonly Completed: "completed";
+    readonly Current: "current";
+    readonly Loading: "loading";
+    readonly Waiting: "waiting";
+    readonly Rejected: "rejected";
+};

package/dist/esm/helperComponents/Icon/Icon.d.ts

@@ -0,0 +1,7 @@
+import { StepState } from '../../types';
+export type IconProps = {
+    state: StepState;
+    number: number;
+    className?: string;
+};
+export declare function Icon({ state, number, className }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/Icon/index.js

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

package/dist/esm/helperComponents/Step/Step.d.ts

@@ -0,0 +1,8 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { StepViewData } from '../../types';
+export type StepProps = WithSupportProps<{
+    hideTailLine?: boolean;
+    step: StepViewData;
+    className?: string;
+}>;
+export declare function Step({ step, className, 'data-test-id': testId, hideTailLine, ...props }: StepProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/Step/index.js

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

package/dist/esm/helperComponents/index.js

@@ -0,0 +1,2 @@
+export * from './Step';
+export * from './Icon';

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+export { useStepperApi } from './StepperContext';

package/dist/esm/types.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'react';
+import { ValueOf } from '@snack-uikit/utils';
+import { STEP_STATE } from './constants';
+export type StepState = ValueOf<typeof STEP_STATE>;
+export type StepsValidator = (prevStepIndex: number, newStepIndex: number) => Promise<boolean>;
+export type StepData = {
+    title: string;
+    description?: string;
+};
+export type StepViewData = StepData & {
+    onClick?(): void;
+    state: StepState;
+    number: number;
+};
+export type StepperApi = {
+    stepper: JSX.Element;
+    goNext(stepIndex?: number): void;
+    goPrev(stepIndex?: number): void;
+    resetValidation(): void;
+    setValidator(validator: StepsValidator): void;
+    isCompleted: boolean;
+    currentStepIndex: number;
+    stepCount: number;
+};

package/dist/esm/utils.d.ts

@@ -0,0 +1 @@
+export declare const getTestIdBuilder: (postfix?: string) => (testId?: string) => string | undefined;

package/package.json

@@ -4,15 +4,16 @@
     "access": "public"
   },
   "title": "Stepper",
-  "version": "0.6.13",
+  "version": "0.6.15-preview-1f246c4a.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/stepper",
   "repository": {
     "type": "git",
@@ -24,7 +25,8 @@
     "Сергей Хлупин <svhlupin@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
@@ -32,12 +34,12 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.22.1",
-    "@snack-uikit/loaders": "0.5.3",
-    "@snack-uikit/truncate-string": "0.4.23",
-    "@snack-uikit/typography": "0.6.3",
-    "@snack-uikit/utils": "3.4.0",
+    "@snack-uikit/icons": "0.22.2-preview-1f246c4a.0",
+    "@snack-uikit/loaders": "0.5.4-preview-1f246c4a.0",
+    "@snack-uikit/truncate-string": "0.4.25-preview-1f246c4a.0",
+    "@snack-uikit/typography": "0.6.4-preview-1f246c4a.0",
+    "@snack-uikit/utils": "3.4.1-preview-1f246c4a.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "fc6a22e54444112c7ded3349a79da17bb777fd0e"
+  "gitHead": "a185a55c0722b19f70dd168cf299e6f53a0fd93f"
 }

package/dist/components/Stepper/styles.module.css

@@ -1,5 +0,0 @@
-.stepper{
-  display:flex;
-  flex-direction:row;
-  align-items:start;
-}

package/dist/helperComponents/Icon/styles.module.css

@@ -1,38 +0,0 @@
-.icon{
-  width:var(--size-stepper-step-status, 32px);
-  height:var(--size-stepper-step-status, 32px);
-  border-radius:var(--radius-stepper-step-status, 24px);
-  border-width:var(--border-width-stepper-step-status, 2px);
-  overflow:hidden;
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-}
-.icon svg{
-  width:var(--size-icon-container-s, 24px) !important;
-  height:var(--size-icon-container-s, 24px) !important;
-}
-.icon[data-state=completed]{
-  color:var(--sys-primary-accent-default, #794ed3);
-  background-color:var(--sys-primary-decor-default, #ebdefd);
-}
-.icon[data-state=current]{
-  color:var(--sys-primary-on-accent, #fdfbff);
-  background-color:var(--sys-primary-accent-default, #794ed3);
-}
-.icon[data-state=waiting]{
-  box-sizing:border-box;
-  color:var(--sys-neutral-text-support, #6d707f);
-  border-color:var(--sys-neutral-decor-default, #dde0ea);
-  border-style:solid;
-}
-.icon[data-state=loading]{
-  box-sizing:border-box;
-  color:var(--sys-neutral-accent-default, #787b8a);
-  border-color:var(--sys-neutral-decor-default, #dde0ea);
-  border-style:solid;
-}
-.icon[data-state=rejected]{
-  color:var(--sys-red-on-accent, #fffbf9);
-  background-color:var(--sys-red-accent-default, #cb3f3e);
-}

package/dist/helperComponents/Step/styles.module.css

@@ -1,83 +0,0 @@
-.tailLine{
-  height:var(--size-stepper-step-track-line, 2px);
-  border-radius:var(--radius-stepper-step-track-line, 2px);
-  flex-grow:1;
-  background-color:var(--sys-neutral-decor-default, #dde0ea);
-}
-
-.tail{
-  display:flex;
-  flex-grow:1;
-  flex-shrink:1;
-  align-items:center;
-  min-width:var(--dimension-2m, 16px);
-}
-.tail[data-completed] .tailLine{
-  background-color:var(--sys-primary-accent-default, #794ed3);
-}
-
-.title{
-  overflow:hidden;
-  color:var(--sys-neutral-text-main, #41424e);
-}
-
-.description{
-  overflow:hidden;
-  color:var(--sys-neutral-text-light, #8b8e9b);
-}
-
-.step{
-  gap:var(--space-stepper-step-container-gap, 4px);
-  padding-right:var(--space-stepper-step-container-padding-right, 8px);
-  display:flex;
-  flex:1;
-  flex-direction:column;
-  align-items:center;
-  justify-content:center;
-  min-width:0;
-}
-
-.track{
-  gap:var(--space-stepper-step-track-gap, 8px);
-  display:flex;
-  width:100%;
-}
-
-.statusContainer{
-  width:var(--size-stepper-step-status, 32px);
-  height:var(--size-stepper-step-status, 32px);
-  border-radius:var(--radius-stepper-step-status, 24px);
-  border-width:var(--border-width-stepper-step-status, 2px);
-  overflow:hidden;
-  display:flex;
-  flex-shrink:1;
-  align-items:center;
-  margin:0;
-  padding:0;
-  color:var(--sys-neutral-text-main, #41424e);
-  background-color:transparent;
-  border:none;
-}
-.statusContainer:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  outline-color:var(--sys-available-complementary, #1c1c24);
-  outline-offset:var(--spacing-state-focus-offset, 2px);
-}
-.statusContainer:not([disabled]){
-  cursor:pointer;
-}
-.statusContainer:not([disabled]):focus-visible, .statusContainer:not([disabled]):hover{
-  color:var(--sys-neutral-text-light, #8b8e9b);
-}
-
-.content{
-  display:flex;
-  flex-direction:column;
-  width:100%;
-}
-
-.icon{
-  flex-shrink:0;
-}