@sberbusiness/triplex-next 1.47.0 → 1.48.0

package/components/Stepper/Stepper.js

@@ -2,7 +2,7 @@ import "./enums.js";
 import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect } from "react";
 import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
-import { CaretleftStrokeSrvIcon24, CaretrightStrokeSrvIcon24 } from "@sberbusiness/icons-next";
+import { CaretrightStrokeSrvIcon24, CaretleftStrokeSrvIcon24 } from "@sberbusiness/icons-next";
 import { CarouselExtended } from "../CarouselExtended/CarouselExtended.js";
 import { ButtonIcon } from "../Button/ButtonIcon.js";
 import { StepperExtended } from "./StepperExtended.js";
@@ -12,14 +12,14 @@ import { scrollSmoothHorizontally } from "../../utils/scroll.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { EScreenWidth } from "../../helpers/breakpoints.js";
 import "./StepperStepIcon.js";
-const stepperCarousel = "stepperCarousel__ad5c84fb";
-const stepperButtonWrapper = "stepperButtonWrapper__c26b1578";
-const prev = "prev__54b85b56";
-const next = "next__5d3bf8f8";
-const stepperButton = "stepperButton__4535fa8c";
-const sm = "sm__763b7b6a";
-const md = "md__aafb0e61";
-const lg = "lg__51789702";
+const stepperCarousel = "stepperCarousel__be16f637";
+const stepperButtonWrapper = "stepperButtonWrapper__a35be5c4";
+const prev = "prev__7cd3ec52";
+const next = "next__00d715cc";
+const stepperButton = "stepperButton__1ba8a34e";
+const sm = "sm__fa9ababe";
+const md = "md__1f497eba";
+const lg = "lg__3a3ce190";
 const styles = {
   stepperCarousel,
   stepperButtonWrapper,
@@ -32,39 +32,74 @@ const styles = {
 };
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
 const SCROLL_STEP_RATIO = 0.3;
+const DIRECTION_TO_CLASS_NAME_MAP = {
+  prev: styles.prev,
+  next: styles.next
+};
+const DIRECTION_TO_ICON_MAP = {
+  prev: /* @__PURE__ */ jsx(CaretleftStrokeSrvIcon24, { paletteIndex: 5 }),
+  next: /* @__PURE__ */ jsx(CaretrightStrokeSrvIcon24, { paletteIndex: 5 })
+};
+const StepperScrollButton = ({ direction, size, hidden, ...restButtonProps }) => hidden ? null : /* @__PURE__ */ jsx("div", { className: clsx(styles.stepperButtonWrapper, DIRECTION_TO_CLASS_NAME_MAP[direction]), children: /* @__PURE__ */ jsx(
+  ButtonIcon,
+  {
+    className: clsx(styles.stepperButton, sizeToClassNameMap[size]),
+    tabIndex: -1,
+    ...restButtonProps,
+    children: DIRECTION_TO_ICON_MAP[direction]
+  }
+) });
+const alignStepRight = (carousel, step, delta, stepRight) => {
+  if (delta <= 0) {
+    return;
+  }
+  const nextStep = step.nextElementSibling;
+  const scrollAmount = nextStep ? delta - (stepRight - nextStep.getBoundingClientRect().right) : delta;
+  scrollSmoothHorizontally(carousel, Math.ceil(scrollAmount));
+};
+const alignStepLeft = (carousel, step, delta, stepLeft) => {
+  if (delta >= 0) {
+    return;
+  }
+  const prevStep = step.previousElementSibling;
+  const scrollAmount = prevStep ? delta - (stepLeft - prevStep.getBoundingClientRect().left) : delta;
+  scrollSmoothHorizontally(carousel, Math.floor(scrollAmount));
+};
+const alignStepCenter = (carousel, delta) => {
+  if (delta) {
+    scrollSmoothHorizontally(carousel, delta);
+  }
+};
+const alignStep = (carousel, step) => {
+  const { left: carouselLeft, right: carouselRight, width: carouselWidth } = carousel.getBoundingClientRect();
+  const { left: stepLeft, right: stepRight, width: stepWidth } = step.getBoundingClientRect();
+  const carouselCenter = carouselLeft + carouselWidth / 2;
+  const stepCenter = stepLeft + stepWidth / 2;
+  if (window.matchMedia(`(max-width: ${EScreenWidth.SM_MAX})`).matches) {
+    alignStepCenter(carousel, stepCenter - carouselCenter);
+  } else if (carouselCenter > stepCenter) {
+    alignStepLeft(carousel, step, stepLeft - carouselLeft, stepLeft);
+  } else if (carouselCenter < stepCenter) {
+    alignStepRight(carousel, step, stepRight - carouselRight, stepRight);
+  }
+};
 const Stepper = ({
   className,
   steps,
-  size = EComponentSize.LG,
+  size = EComponentSize.MD,
   selectedStepId,
   ...restProps
 }) => {
-  const [state, setState] = useState({ stepNext: 0, stepPrev: 0 });
+  const [scrollStep, setScrollStep] = useState(0);
   const carouselRef = useRef(null);
   const stepRefs = useRef({});
   const selectedIndex = steps.findIndex((step) => step.id === selectedStepId);
   const renderPrevButton = useCallback(
-    ({ hidden, ...restButtonProps }) => hidden ? null : /* @__PURE__ */ jsx("div", { className: clsx(styles.stepperButtonWrapper, styles.prev), children: /* @__PURE__ */ jsx(
-      ButtonIcon,
-      {
-        className: clsx(styles.stepperButton, sizeToClassNameMap[size]),
-        tabIndex: -1,
-        ...restButtonProps,
-        children: /* @__PURE__ */ jsx(CaretleftStrokeSrvIcon24, { paletteIndex: 5 })
-      }
-    ) }),
+    (buttonProps) => /* @__PURE__ */ jsx(StepperScrollButton, { ...buttonProps, direction: "prev", size }),
     [size]
   );
   const renderNextButton = useCallback(
-    ({ hidden, ...restButtonProps }) => hidden ? null : /* @__PURE__ */ jsx("div", { className: clsx(styles.stepperButtonWrapper, styles.next), children: /* @__PURE__ */ jsx(
-      ButtonIcon,
-      {
-        className: clsx(styles.stepperButton, sizeToClassNameMap[size]),
-        tabIndex: -1,
-        ...restButtonProps,
-        children: /* @__PURE__ */ jsx(CaretrightStrokeSrvIcon24, { paletteIndex: 5 })
-      }
-    ) }),
+    (buttonProps) => /* @__PURE__ */ jsx(StepperScrollButton, { ...buttonProps, direction: "next", size }),
     [size]
   );
   useEffect(() => {
@@ -73,91 +108,49 @@ const Stepper = ({
       return;
     }
     const resizeObserver = new ResizeObserver((entries) => {
-      const width = entries[0].contentRect.width;
-      const scrollStep = width * SCROLL_STEP_RATIO;
-      setState({
-        stepNext: scrollStep,
-        stepPrev: scrollStep
-      });
+      setScrollStep(entries[0].contentRect.width * SCROLL_STEP_RATIO);
     });
     resizeObserver.observe(carouselNode);
     return () => {
       resizeObserver.disconnect();
     };
   }, []);
-  const alignStepRight = useCallback(
-    (carousel, step, delta, stepRight) => {
-      if (delta > 0) {
-        if (step.nextElementSibling) {
-          delta -= stepRight - step.nextElementSibling.getBoundingClientRect().right;
-        }
-        scrollSmoothHorizontally(carousel, Math.ceil(delta));
-      }
-    },
-    []
-  );
-  const alignStepLeft = useCallback(
-    (carousel, step, delta, stepLeft) => {
-      if (delta < 0) {
-        if (step.previousElementSibling) {
-          delta -= stepLeft - step.previousElementSibling.getBoundingClientRect().left;
-        }
-        scrollSmoothHorizontally(carousel, Math.floor(delta));
-      }
-    },
-    []
-  );
-  const alignStepCenter = useCallback((carousel, delta) => {
-    if (delta) {
-      scrollSmoothHorizontally(carousel, delta);
-    }
-  }, []);
-  const alignStep = useCallback(
-    (carousel, step) => {
-      const { left: carouselLeft, right: carouselRight, width: carouselWidth } = carousel.getBoundingClientRect();
-      const { left: stepLeft, right: stepRight, width: stepWidth } = step.getBoundingClientRect();
-      const carouselCenter = carouselLeft + carouselWidth / 2;
-      const stepCenter = stepLeft + stepWidth / 2;
-      if (window.matchMedia(`(max-width: ${EScreenWidth.SM_MAX})`).matches) {
-        alignStepCenter(carousel, stepCenter - carouselCenter);
-      } else if (carouselCenter > stepCenter) {
-        alignStepLeft(carousel, step, stepLeft - carouselLeft, stepLeft);
-      } else if (carouselCenter < stepCenter) {
-        alignStepRight(carousel, step, stepRight - carouselRight, stepRight);
-      }
-    },
-    [alignStepCenter, alignStepLeft, alignStepRight]
-  );
   useEffect(() => {
-    if (selectedStepId) {
-      const { current: carousel } = carouselRef;
-      const step = stepRefs.current[selectedStepId];
-      if (carousel && step) {
-        alignStep(carousel, step);
-      }
+    if (!selectedStepId) {
+      return;
+    }
+    const carousel = carouselRef.current;
+    const step = stepRefs.current[selectedStepId];
+    if (carousel && step) {
+      alignStep(carousel, step);
+    }
+  }, [selectedStepId]);
+  const setStepRef = (id) => (instance) => {
+    if (instance === null) {
+      delete stepRefs.current[id];
+    } else {
+      stepRefs.current[id] = instance;
     }
-  }, [selectedStepId, alignStep]);
+  };
   return /* @__PURE__ */ jsx(
     CarouselExtended,
     {
       className: clsx(styles.stepperCarousel, sizeToClassNameMap[size], className),
       buttonPrev: renderPrevButton,
       buttonNext: renderNextButton,
-      stepPrev: state.stepPrev,
-      stepNext: state.stepNext,
+      stepPrev: scrollStep,
+      stepNext: scrollStep,
       ref: carouselRef,
-      children: /* @__PURE__ */ jsx(StepperExtended, { selectedStepId, size, ...restProps, children: steps.map(({ label, ...step }, index) => {
-        return /* @__PURE__ */ jsx(
-          StepperExtended.Step,
-          {
-            forwardedRef: (instance) => stepRefs.current[step.id] = instance,
-            ...step,
-            isInActiveStep: index > selectedIndex,
-            children: label
-          },
-          step.id
-        );
-      }) })
+      children: /* @__PURE__ */ jsx(StepperExtended, { selectedStepId, size, ...restProps, children: steps.map(({ label, ...step }, index) => /* @__PURE__ */ jsx(
+        StepperExtended.Step,
+        {
+          forwardedRef: setStepRef(step.id),
+          ...step,
+          isInActiveStep: index > selectedIndex,
+          children: label
+        },
+        step.id
+      )) })
     }
   );
 };

package/components/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { CaretleftStrokeSrvIcon24, CaretrightStrokeSrvIcon24 } from \"@sberbusiness/icons-next\";\nimport { CarouselExtended, ICarouselExtendedButtonProvideProps } from \"../CarouselExtended/CarouselExtended\";\nimport { ButtonIcon } from \"../Button/ButtonIcon\";\nimport { StepperExtended } from \"./StepperExtended\";\nimport { StepperStep } from \"./StepperStep\";\nimport { createSizeToClassNameMap, scrollSmoothHorizontally } from \"../../utils\";\nimport { IStepperProps } from \"./types\";\nimport { EComponentSize } from \"../../enums\";\nimport { EScreenWidth } from \"../../helpers/breakpoints\";\nimport styles from \"./styles/Stepper.module.less\";\n\n/** Внутренние составляющие Stepper. */\ninterface IStepperComposition {\n    Step: typeof StepperStep;\n}\n\n/** Соответствие размера имени класса. */\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\nconst SCROLL_STEP_RATIO = 0.3;\n\n/** Компонент Stepper, список шагов */\nexport const Stepper: React.FC<IStepperProps> & IStepperComposition = ({\n    className,\n    steps,\n    size = EComponentSize.LG,\n    selectedStepId,\n    ...restProps\n}) => {\n    const [state, setState] = useState({ stepNext: 0, stepPrev: 0 });\n    const carouselRef = useRef<HTMLDivElement>(null);\n    const stepRefs = useRef<Record<string, HTMLLIElement | null>>({});\n    const selectedIndex = steps.findIndex((step) => step.id === selectedStepId);\n\n    const renderPrevButton = useCallback(\n        ({ hidden, ...restButtonProps }: ICarouselExtendedButtonProvideProps) =>\n            hidden ? null : (\n                <div className={clsx(styles.stepperButtonWrapper, styles.prev)}>\n                    <ButtonIcon\n                        className={clsx(styles.stepperButton, sizeToClassNameMap[size])}\n                        tabIndex={-1}\n                        {...restButtonProps}\n                    >\n                        <CaretleftStrokeSrvIcon24 paletteIndex={5} />\n                    </ButtonIcon>\n                </div>\n            ),\n        [size],\n    );\n\n    const renderNextButton = useCallback(\n        ({ hidden, ...restButtonProps }: ICarouselExtendedButtonProvideProps) =>\n            hidden ? null : (\n                <div className={clsx(styles.stepperButtonWrapper, styles.next)}>\n                    <ButtonIcon\n                        className={clsx(styles.stepperButton, sizeToClassNameMap[size])}\n                        tabIndex={-1}\n                        {...restButtonProps}\n                    >\n                        <CaretrightStrokeSrvIcon24 paletteIndex={5} />\n                    </ButtonIcon>\n                </div>\n            ),\n        [size],\n    );\n\n    useEffect(() => {\n        const carouselNode = carouselRef.current;\n\n        if (carouselNode === null) {\n            return;\n        }\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            const width = entries[0].contentRect.width;\n            const scrollStep = width * SCROLL_STEP_RATIO;\n\n            setState({\n                stepNext: scrollStep,\n                stepPrev: scrollStep,\n            });\n        });\n\n        resizeObserver.observe(carouselNode);\n\n        return () => {\n            resizeObserver.disconnect();\n        };\n    }, []);\n\n    /** Выравнивание шага по правой части карусели. */\n    const alignStepRight = useCallback(\n        (carousel: HTMLDivElement, step: HTMLLIElement, delta: number, stepRight: number) => {\n            if (delta > 0) {\n                // Текущий шаг – не последний, необходимо показать следующий шаг.\n                if (step.nextElementSibling) {\n                    delta -= stepRight - step.nextElementSibling.getBoundingClientRect().right;\n                }\n                scrollSmoothHorizontally(carousel, Math.ceil(delta));\n            }\n        },\n        [],\n    );\n\n    /** Выравнивание шага по левой части карусели. */\n    const alignStepLeft = useCallback(\n        (carousel: HTMLDivElement, step: HTMLLIElement, delta: number, stepLeft: number) => {\n            if (delta < 0) {\n                // Текущий шаг – не первый, необходимо показать предыдущий шаг.\n                if (step.previousElementSibling) {\n                    delta -= stepLeft - step.previousElementSibling.getBoundingClientRect().left;\n                }\n                scrollSmoothHorizontally(carousel, Math.floor(delta));\n            }\n        },\n        [],\n    );\n\n    /** Выравнивание шага по центру карусели. */\n    const alignStepCenter = useCallback((carousel: HTMLDivElement, delta: number) => {\n        if (delta) {\n            scrollSmoothHorizontally(carousel, delta);\n        }\n    }, []);\n\n    /** Выравнивание шага в карусели. */\n    const alignStep = useCallback(\n        (carousel: HTMLDivElement, step: HTMLLIElement) => {\n            const { left: carouselLeft, right: carouselRight, width: carouselWidth } = carousel.getBoundingClientRect();\n            const { left: stepLeft, right: stepRight, width: stepWidth } = step.getBoundingClientRect();\n            const carouselCenter = carouselLeft + carouselWidth / 2;\n            const stepCenter = stepLeft + stepWidth / 2;\n\n            if (window.matchMedia(`(max-width: ${EScreenWidth.SM_MAX})`).matches) {\n                alignStepCenter(carousel, stepCenter - carouselCenter);\n            } else if (carouselCenter > stepCenter) {\n                alignStepLeft(carousel, step, stepLeft - carouselLeft, stepLeft);\n            } else if (carouselCenter < stepCenter) {\n                alignStepRight(carousel, step, stepRight - carouselRight, stepRight);\n            }\n        },\n        [alignStepCenter, alignStepLeft, alignStepRight],\n    );\n\n    useEffect(() => {\n        if (selectedStepId) {\n            const { current: carousel } = carouselRef;\n            const step = stepRefs.current[selectedStepId];\n\n            if (carousel && step) {\n                alignStep(carousel, step);\n            }\n        }\n    }, [selectedStepId, alignStep]);\n\n    return (\n        <CarouselExtended\n            className={clsx(styles.stepperCarousel, sizeToClassNameMap[size], className)}\n            buttonPrev={renderPrevButton}\n            buttonNext={renderNextButton}\n            stepPrev={state.stepPrev}\n            stepNext={state.stepNext}\n            ref={carouselRef}\n        >\n            <StepperExtended selectedStepId={selectedStepId} size={size} {...restProps}>\n                {steps.map(({ label, ...step }, index) => {\n                    return (\n                        <StepperExtended.Step\n                            key={step.id}\n                            forwardedRef={(instance) => (stepRefs.current[step.id] = instance)}\n                            {...step}\n                            isInActiveStep={index > selectedIndex}\n                        >\n                            {label}\n                        </StepperExtended.Step>\n                    );\n                })}\n            </StepperExtended>\n        </CarouselExtended>\n    );\n};\n\nStepper.Step = StepperStep;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,qBAAqB,yBAAyB,MAAM;AAE1D,MAAM,oBAAoB;AAGnB,MAAM,UAAyD,CAAC;AAAA,EACnE;AAAA,EACA;AAAA,EACA,OAAO,eAAe;AAAA,EACtB;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE,UAAU,GAAG,UAAU,GAAG;AAC/D,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,WAAW,OAA6C,EAAE;AAChE,QAAM,gBAAgB,MAAM,UAAU,CAAC,SAAS,KAAK,OAAO,cAAc;AAE1E,QAAM,mBAAmB;AAAA,IACrB,CAAC,EAAE,QAAQ,GAAG,gBAAA,MACV,SAAS,OACL,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,sBAAsB,OAAO,IAAI,GACzD,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,eAAe,mBAAmB,IAAI,CAAC;AAAA,QAC9D,UAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA,oBAAC,0BAAA,EAAyB,cAAc,EAAA,CAAG;AAAA,MAAA;AAAA,IAAA,GAEnD;AAAA,IAER,CAAC,IAAI;AAAA,EAAA;AAGT,QAAM,mBAAmB;AAAA,IACrB,CAAC,EAAE,QAAQ,GAAG,gBAAA,MACV,SAAS,OACL,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,sBAAsB,OAAO,IAAI,GACzD,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,eAAe,mBAAmB,IAAI,CAAC;AAAA,QAC9D,UAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAA,oBAAC,2BAAA,EAA0B,cAAc,EAAA,CAAG;AAAA,MAAA;AAAA,IAAA,GAEpD;AAAA,IAER,CAAC,IAAI;AAAA,EAAA;AAGT,YAAU,MAAM;AACZ,UAAM,eAAe,YAAY;AAEjC,QAAI,iBAAiB,MAAM;AACvB;AAAA,IACJ;AAEA,UAAM,iBAAiB,IAAI,eAAe,CAAC,YAAY;AACnD,YAAM,QAAQ,QAAQ,CAAC,EAAE,YAAY;AACrC,YAAM,aAAa,QAAQ;AAE3B,eAAS;AAAA,QACL,UAAU;AAAA,QACV,UAAU;AAAA,MAAA,CACb;AAAA,IACL,CAAC;AAED,mBAAe,QAAQ,YAAY;AAEnC,WAAO,MAAM;AACT,qBAAe,WAAA;AAAA,IACnB;AAAA,EACJ,GAAG,CAAA,CAAE;AAGL,QAAM,iBAAiB;AAAA,IACnB,CAAC,UAA0B,MAAqB,OAAe,cAAsB;AACjF,UAAI,QAAQ,GAAG;AAEX,YAAI,KAAK,oBAAoB;AACzB,mBAAS,YAAY,KAAK,mBAAmB,sBAAA,EAAwB;AAAA,QACzE;AACA,iCAAyB,UAAU,KAAK,KAAK,KAAK,CAAC;AAAA,MACvD;AAAA,IACJ;AAAA,IACA,CAAA;AAAA,EAAC;AAIL,QAAM,gBAAgB;AAAA,IAClB,CAAC,UAA0B,MAAqB,OAAe,aAAqB;AAChF,UAAI,QAAQ,GAAG;AAEX,YAAI,KAAK,wBAAwB;AAC7B,mBAAS,WAAW,KAAK,uBAAuB,sBAAA,EAAwB;AAAA,QAC5E;AACA,iCAAyB,UAAU,KAAK,MAAM,KAAK,CAAC;AAAA,MACxD;AAAA,IACJ;AAAA,IACA,CAAA;AAAA,EAAC;AAIL,QAAM,kBAAkB,YAAY,CAAC,UAA0B,UAAkB;AAC7E,QAAI,OAAO;AACP,+BAAyB,UAAU,KAAK;AAAA,IAC5C;AAAA,EACJ,GAAG,CAAA,CAAE;AAGL,QAAM,YAAY;AAAA,IACd,CAAC,UAA0B,SAAwB;AAC/C,YAAM,EAAE,MAAM,cAAc,OAAO,eAAe,OAAO,cAAA,IAAkB,SAAS,sBAAA;AACpF,YAAM,EAAE,MAAM,UAAU,OAAO,WAAW,OAAO,UAAA,IAAc,KAAK,sBAAA;AACpE,YAAM,iBAAiB,eAAe,gBAAgB;AACtD,YAAM,aAAa,WAAW,YAAY;AAE1C,UAAI,OAAO,WAAW,eAAe,aAAa,MAAM,GAAG,EAAE,SAAS;AAClE,wBAAgB,UAAU,aAAa,cAAc;AAAA,MACzD,WAAW,iBAAiB,YAAY;AACpC,sBAAc,UAAU,MAAM,WAAW,cAAc,QAAQ;AAAA,MACnE,WAAW,iBAAiB,YAAY;AACpC,uBAAe,UAAU,MAAM,YAAY,eAAe,SAAS;AAAA,MACvE;AAAA,IACJ;AAAA,IACA,CAAC,iBAAiB,eAAe,cAAc;AAAA,EAAA;AAGnD,YAAU,MAAM;AACZ,QAAI,gBAAgB;AAChB,YAAM,EAAE,SAAS,SAAA,IAAa;AAC9B,YAAM,OAAO,SAAS,QAAQ,cAAc;AAE5C,UAAI,YAAY,MAAM;AAClB,kBAAU,UAAU,IAAI;AAAA,MAC5B;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,gBAAgB,SAAS,CAAC;AAE9B,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,KAAK,OAAO,iBAAiB,mBAAmB,IAAI,GAAG,SAAS;AAAA,MAC3E,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,UAAU,MAAM;AAAA,MAChB,UAAU,MAAM;AAAA,MAChB,KAAK;AAAA,MAEL,UAAA,oBAAC,iBAAA,EAAgB,gBAAgC,MAAa,GAAG,WAC5D,UAAA,MAAM,IAAI,CAAC,EAAE,OAAO,GAAG,KAAA,GAAQ,UAAU;AACtC,eACI;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YAEG,cAAc,CAAC,aAAc,SAAS,QAAQ,KAAK,EAAE,IAAI;AAAA,YACxD,GAAG;AAAA,YACJ,gBAAgB,QAAQ;AAAA,YAEvB,UAAA;AAAA,UAAA;AAAA,UALI,KAAK;AAAA,QAAA;AAAA,MAQtB,CAAC,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ;AAEA,QAAQ,OAAO;"}
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { CaretleftStrokeSrvIcon24, CaretrightStrokeSrvIcon24 } from \"@sberbusiness/icons-next\";\nimport { CarouselExtended, ICarouselExtendedButtonProvideProps } from \"../CarouselExtended/CarouselExtended\";\nimport { ButtonIcon } from \"../Button/ButtonIcon\";\nimport { StepperExtended } from \"./StepperExtended\";\nimport { StepperStep } from \"./StepperStep\";\nimport { createSizeToClassNameMap, scrollSmoothHorizontally } from \"../../utils\";\nimport { IStepperProps } from \"./types\";\nimport { EComponentSize } from \"../../enums\";\nimport { EScreenWidth } from \"../../helpers/breakpoints\";\nimport styles from \"./styles/Stepper.module.less\";\n\n/** Внутренние составляющие Stepper. */\ninterface IStepperComposition {\n    Step: typeof StepperStep;\n}\n\n/** Направление прокрутки ленты шагов. */\ntype TStepperScrollDirection = \"prev\" | \"next\";\n\n/** Соответствие размера имени класса. */\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Доля ширины видимой области ленты, на которую прокручивает один клик по кнопке. */\nconst SCROLL_STEP_RATIO = 0.3;\n\n/** Соответствие направления прокрутки имени класса. */\nconst DIRECTION_TO_CLASS_NAME_MAP: Record<TStepperScrollDirection, string> = {\n    prev: styles.prev,\n    next: styles.next,\n};\n\n/** Соответствие направления прокрутки иконке кнопки. */\nconst DIRECTION_TO_ICON_MAP: Record<TStepperScrollDirection, React.ReactNode> = {\n    prev: <CaretleftStrokeSrvIcon24 paletteIndex={5} />,\n    next: <CaretrightStrokeSrvIcon24 paletteIndex={5} />,\n};\n\n/** Свойства кнопки прокрутки ленты шагов. */\ninterface IStepperScrollButtonProps extends ICarouselExtendedButtonProvideProps {\n    /** Направление прокрутки. */\n    direction: TStepperScrollDirection;\n    /** Размер Stepper — от него зависит размер кнопки. */\n    size: EComponentSize;\n}\n\n/**\n * Кнопка прокрутки ленты шагов. Рендерится по запросу CarouselExtended, который передаёт\n * `hidden` (прокрутка не нужна), `disabled` (достигнут край) и `onClick`.\n * Из таб-порядка исключена (`tabIndex = -1`): до любого шага можно дойти клавиатурой и без неё.\n */\nconst StepperScrollButton = ({ direction, size, hidden, ...restButtonProps }: IStepperScrollButtonProps) =>\n    hidden ? null : (\n        <div className={clsx(styles.stepperButtonWrapper, DIRECTION_TO_CLASS_NAME_MAP[direction])}>\n            <ButtonIcon\n                className={clsx(styles.stepperButton, sizeToClassNameMap[size])}\n                tabIndex={-1}\n                {...restButtonProps}\n            >\n                {DIRECTION_TO_ICON_MAP[direction]}\n            </ButtonIcon>\n        </div>\n    );\n\n/**\n * Прокручивает ленту так, чтобы шаг прижался к правому краю видимой области.\n * Если справа есть следующий шаг, лента подтягивается ещё и на него — подсказка, что лента не кончилась.\n */\nconst alignStepRight = (carousel: HTMLDivElement, step: HTMLLIElement, delta: number, stepRight: number): void => {\n    if (delta <= 0) {\n        return;\n    }\n\n    const nextStep = step.nextElementSibling;\n    // Текущий шаг – не последний, необходимо показать следующий шаг.\n    const scrollAmount = nextStep ? delta - (stepRight - nextStep.getBoundingClientRect().right) : delta;\n\n    scrollSmoothHorizontally(carousel, Math.ceil(scrollAmount));\n};\n\n/**\n * Прокручивает ленту так, чтобы шаг прижался к левому краю видимой области.\n * Если слева есть предыдущий шаг, лента подтягивается ещё и на него — подсказка, что лента не кончилась.\n */\nconst alignStepLeft = (carousel: HTMLDivElement, step: HTMLLIElement, delta: number, stepLeft: number): void => {\n    if (delta >= 0) {\n        return;\n    }\n\n    const prevStep = step.previousElementSibling;\n    // Текущий шаг – не первый, необходимо показать предыдущий шаг.\n    const scrollAmount = prevStep ? delta - (stepLeft - prevStep.getBoundingClientRect().left) : delta;\n\n    scrollSmoothHorizontally(carousel, Math.floor(scrollAmount));\n};\n\n/** Прокручивает ленту так, чтобы шаг встал по центру видимой области. */\nconst alignStepCenter = (carousel: HTMLDivElement, delta: number): void => {\n    if (delta) {\n        scrollSmoothHorizontally(carousel, delta);\n    }\n};\n\n/**\n * Подводит выбранный шаг в видимую область ленты.\n * На узких экранах шаг центрируется, на широких — прижимается к ближайшему краю.\n */\nconst alignStep = (carousel: HTMLDivElement, step: HTMLLIElement): void => {\n    const { left: carouselLeft, right: carouselRight, width: carouselWidth } = carousel.getBoundingClientRect();\n    const { left: stepLeft, right: stepRight, width: stepWidth } = step.getBoundingClientRect();\n    const carouselCenter = carouselLeft + carouselWidth / 2;\n    const stepCenter = stepLeft + stepWidth / 2;\n\n    if (window.matchMedia(`(max-width: ${EScreenWidth.SM_MAX})`).matches) {\n        alignStepCenter(carousel, stepCenter - carouselCenter);\n    } else if (carouselCenter > stepCenter) {\n        alignStepLeft(carousel, step, stepLeft - carouselLeft, stepLeft);\n    } else if (carouselCenter < stepCenter) {\n        alignStepRight(carousel, step, stepRight - carouselRight, stepRight);\n    }\n};\n\n/** Компонент Stepper, список шагов */\nexport const Stepper: React.FC<IStepperProps> & IStepperComposition = ({\n    className,\n    steps,\n    size = EComponentSize.MD,\n    selectedStepId,\n    ...restProps\n}) => {\n    const [scrollStep, setScrollStep] = useState(0);\n    const carouselRef = useRef<HTMLDivElement>(null);\n    const stepRefs = useRef<Record<string, HTMLLIElement | null>>({});\n    const selectedIndex = steps.findIndex((step) => step.id === selectedStepId);\n\n    const renderPrevButton = useCallback(\n        (buttonProps: ICarouselExtendedButtonProvideProps) => (\n            <StepperScrollButton {...buttonProps} direction=\"prev\" size={size} />\n        ),\n        [size],\n    );\n\n    const renderNextButton = useCallback(\n        (buttonProps: ICarouselExtendedButtonProvideProps) => (\n            <StepperScrollButton {...buttonProps} direction=\"next\" size={size} />\n        ),\n        [size],\n    );\n\n    useEffect(() => {\n        const carouselNode = carouselRef.current;\n\n        if (carouselNode === null) {\n            return;\n        }\n\n        const resizeObserver = new ResizeObserver((entries) => {\n            setScrollStep(entries[0].contentRect.width * SCROLL_STEP_RATIO);\n        });\n\n        resizeObserver.observe(carouselNode);\n\n        return () => {\n            resizeObserver.disconnect();\n        };\n    }, []);\n\n    useEffect(() => {\n        if (!selectedStepId) {\n            return;\n        }\n\n        const carousel = carouselRef.current;\n        const step = stepRefs.current[selectedStepId];\n\n        if (carousel && step) {\n            alignStep(carousel, step);\n        }\n    }, [selectedStepId]);\n\n    /** Запоминает узел шага, чтобы подвести его в видимую область при выборе. */\n    const setStepRef = (id: string) => (instance: HTMLLIElement | null) => {\n        if (instance === null) {\n            delete stepRefs.current[id];\n        } else {\n            stepRefs.current[id] = instance;\n        }\n    };\n\n    return (\n        <CarouselExtended\n            className={clsx(styles.stepperCarousel, sizeToClassNameMap[size], className)}\n            buttonPrev={renderPrevButton}\n            buttonNext={renderNextButton}\n            stepPrev={scrollStep}\n            stepNext={scrollStep}\n            ref={carouselRef}\n        >\n            <StepperExtended selectedStepId={selectedStepId} size={size} {...restProps}>\n                {steps.map(({ label, ...step }, index) => (\n                    <StepperExtended.Step\n                        key={step.id}\n                        forwardedRef={setStepRef(step.id)}\n                        {...step}\n                        isInActiveStep={index > selectedIndex}\n                    >\n                        {label}\n                    </StepperExtended.Step>\n                ))}\n            </StepperExtended>\n        </CarouselExtended>\n    );\n};\n\nStepper.Step = StepperStep;\n"],"names":[],"mappings":"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"}

package/components/Stepper/StepperExtended.js

@@ -1,30 +1,51 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import React__default, { useMemo, useCallback } from "react";
 import { c as clsx } from "../../chunks/vendor-CUIykw0y.js";
 import { StepperStep } from "./StepperStep.js";
 import { StepperExtendedContext } from "./StepperExtendedContext.js";
+import { setForwardedRef } from "../../helpers/setForwardedRef.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
-const stepperExtended = "stepperExtended__c63acc01";
+const stepperExtended = "stepperExtended__e43fa57a";
 const styles = {
   stepperExtended
 };
-const StepperExtended = ({
-  children,
-  className,
-  size = EComponentSize.LG,
-  onSelectStep,
-  selectedStepId,
-  forwardedRef,
-  ...rest
-}) => {
-  const classNames = clsx(styles.stepperExtended, className);
-  const contextValue = useMemo(
-    () => ({ selectedId: selectedStepId, size, onSelectStep }),
-    [selectedStepId, size, onSelectStep]
-  );
-  return /* @__PURE__ */ jsx(StepperExtendedContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("ol", { className: classNames, role: "tablist", ...rest, ref: forwardedRef, children }) });
-};
-StepperExtended.Step = StepperStep;
+const StepperExtendedRoot = React__default.forwardRef(
+  ({
+    children,
+    className,
+    size = EComponentSize.MD,
+    onSelectStep,
+    selectedStepId,
+    forwardedRef,
+    ...htmlOlAttributes
+  }, ref) => {
+    const contextValue = useMemo(
+      () => ({ selectedId: selectedStepId, size, onSelectStep }),
+      [selectedStepId, size, onSelectStep]
+    );
+    const setRef = useCallback(
+      (instance) => {
+        setForwardedRef(ref, instance);
+        setForwardedRef(forwardedRef, instance);
+      },
+      [ref, forwardedRef]
+    );
+    return /* @__PURE__ */ jsx(StepperExtendedContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "ol",
+      {
+        className: clsx(styles.stepperExtended, className),
+        role: "tablist",
+        ...htmlOlAttributes,
+        ref: setRef,
+        children
+      }
+    ) });
+  }
+);
+StepperExtendedRoot.displayName = "StepperExtended";
+const StepperExtended = Object.assign(StepperExtendedRoot, {
+  Step: StepperStep
+});
 export {
   StepperExtended
 };

package/components/Stepper/StepperExtended.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperExtended.js","sources":["../../../src/components/Stepper/StepperExtended.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport clsx from \"clsx\";\nimport { StepperStep } from \"./StepperStep\";\nimport { StepperExtendedContext } from \"./StepperExtendedContext\";\nimport { IStepperExtendedProps } from \"./types\";\nimport { EComponentSize } from \"../../enums\";\nimport styles from \"./styles/StepperExtended.module.less\";\n\n/** Внутренние составляющие StepperExtended. */\ninterface IStepperExtendedComposition {\n    Step: typeof StepperStep;\n}\n\n/** Компонент StepperExtended, расширенная версия Stepper. */\nexport const StepperExtended: React.FC<IStepperExtendedProps> & IStepperExtendedComposition = ({\n    children,\n    className,\n    size = EComponentSize.LG,\n    onSelectStep,\n    selectedStepId,\n    forwardedRef,\n    ...rest\n}) => {\n    const classNames = clsx(styles.stepperExtended, className);\n\n    const contextValue = useMemo(\n        () => ({ selectedId: selectedStepId, size, onSelectStep }),\n        [selectedStepId, size, onSelectStep],\n    );\n\n    return (\n        <StepperExtendedContext.Provider value={contextValue}>\n            <ol className={classNames} role=\"tablist\" {...rest} ref={forwardedRef}>\n                {children}\n            </ol>\n        </StepperExtendedContext.Provider>\n    );\n};\n\nStepperExtended.Step = StepperStep;\n"],"names":[],"mappings":";;;;;;;;;;AAcO,MAAM,kBAAiF,CAAC;AAAA,EAC3F;AAAA,EACA;AAAA,EACA,OAAO,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,aAAa,KAAK,OAAO,iBAAiB,SAAS;AAEzD,QAAM,eAAe;AAAA,IACjB,OAAO,EAAE,YAAY,gBAAgB,MAAM,aAAA;AAAA,IAC3C,CAAC,gBAAgB,MAAM,YAAY;AAAA,EAAA;AAGvC,6BACK,uBAAuB,UAAvB,EAAgC,OAAO,cACpC,UAAA,oBAAC,MAAA,EAAG,WAAW,YAAY,MAAK,WAAW,GAAG,MAAM,KAAK,cACpD,UACL,GACJ;AAER;AAEA,gBAAgB,OAAO;"}
+{"version":3,"file":"StepperExtended.js","sources":["../../../src/components/Stepper/StepperExtended.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport clsx from \"clsx\";\nimport { StepperStep } from \"./StepperStep\";\nimport { StepperExtendedContext } from \"./StepperExtendedContext\";\nimport { IStepperExtendedProps } from \"./types\";\nimport { setForwardedRef } from \"../../helpers/setForwardedRef\";\nimport { EComponentSize } from \"../../enums\";\nimport styles from \"./styles/StepperExtended.module.less\";\n\n/** Внутренние составляющие StepperExtended. */\ninterface IStepperExtendedComposition {\n    Step: typeof StepperStep;\n}\n\nconst StepperExtendedRoot = React.forwardRef<HTMLOListElement, IStepperExtendedProps>(\n    (\n        {\n            children,\n            className,\n            size = EComponentSize.MD,\n            onSelectStep,\n            selectedStepId,\n            forwardedRef,\n            ...htmlOlAttributes\n        },\n        ref,\n    ) => {\n        const contextValue = useMemo(\n            () => ({ selectedId: selectedStepId, size, onSelectStep }),\n            [selectedStepId, size, onSelectStep],\n        );\n\n        // Компонент поддерживает и ref, и исторический prop forwardedRef — оба указывают на один и тот же <ol>.\n        const setRef = useCallback(\n            (instance: HTMLOListElement | null) => {\n                setForwardedRef(ref, instance);\n                setForwardedRef(forwardedRef, instance);\n            },\n            [ref, forwardedRef],\n        );\n\n        return (\n            <StepperExtendedContext.Provider value={contextValue}>\n                <ol\n                    className={clsx(styles.stepperExtended, className)}\n                    role=\"tablist\"\n                    {...htmlOlAttributes}\n                    ref={setRef}\n                >\n                    {children}\n                </ol>\n            </StepperExtendedContext.Provider>\n        );\n    },\n);\n\nStepperExtendedRoot.displayName = \"StepperExtended\";\n\n/**\n * Компонент StepperExtended, базовый степпер: список шагов без карусели и кнопок прокрутки.\n * Шаги потребитель передаёт сам через `StepperExtended.Step`. Готовый вариант с прокруткой — `Stepper`.\n */\n// Тип объявлен явно: без аннотации declaration emit падает с TS4023 — выведенный тип\n// сослался бы на внутренний интерфейс композиции из StepperStep, который не экспортируется.\nexport const StepperExtended: React.ForwardRefExoticComponent<\n    IStepperExtendedProps & React.RefAttributes<HTMLOListElement>\n> &\n    IStepperExtendedComposition = Object.assign(StepperExtendedRoot, {\n    Step: StepperStep,\n} satisfies IStepperExtendedComposition);\n"],"names":["React"],"mappings":";;;;;;;;;;;AAcA,MAAM,sBAAsBA,eAAM;AAAA,EAC9B,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA,OAAO,eAAe;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,eAAe;AAAA,MACjB,OAAO,EAAE,YAAY,gBAAgB,MAAM,aAAA;AAAA,MAC3C,CAAC,gBAAgB,MAAM,YAAY;AAAA,IAAA;AAIvC,UAAM,SAAS;AAAA,MACX,CAAC,aAAsC;AACnC,wBAAgB,KAAK,QAAQ;AAC7B,wBAAgB,cAAc,QAAQ;AAAA,MAC1C;AAAA,MACA,CAAC,KAAK,YAAY;AAAA,IAAA;AAGtB,WACI,oBAAC,uBAAuB,UAAvB,EAAgC,OAAO,cACpC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,iBAAiB,SAAS;AAAA,QACjD,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ,KAAK;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA,GAET;AAAA,EAER;AACJ;AAEA,oBAAoB,cAAc;AAQ3B,MAAM,kBAGqB,OAAO,OAAO,qBAAqB;AAAA,EACjE,MAAM;AACV,CAAuC;"}

package/components/Stepper/StepperExtendedContext.js

@@ -1,7 +1,7 @@
 import React__default from "react";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 const StepperExtendedContext = React__default.createContext({
-  size: EComponentSize.LG,
+  size: EComponentSize.MD,
   selectedId: void 0,
   onSelectStep: () => {
   }

package/components/Stepper/StepperExtendedContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperExtendedContext.js","sources":["../../../src/components/Stepper/StepperExtendedContext.ts"],"sourcesContent":["import React from \"react\";\nimport { EComponentSize } from \"../../enums\";\n\n/** Контекст компонента StepperExtended. */\nexport interface IStepperExtendedContext {\n    /** Размер Stepper. */\n    size: EComponentSize;\n    /** Уникальный идентификатор выбранного шага. */\n    selectedId?: string;\n    /** Обработчик выбора шага. */\n    onSelectStep: (selectedId: string) => void;\n}\n\n/** Контекст в StepperExtended. */\nexport const StepperExtendedContext = React.createContext<IStepperExtendedContext>({\n    size: EComponentSize.LG,\n    selectedId: undefined,\n    onSelectStep: () => {},\n});\n"],"names":["React"],"mappings":";;AAcO,MAAM,yBAAyBA,eAAM,cAAuC;AAAA,EAC/E,MAAM,eAAe;AAAA,EACrB,YAAY;AAAA,EACZ,cAAc,MAAM;AAAA,EAAC;AACzB,CAAC;"}
+{"version":3,"file":"StepperExtendedContext.js","sources":["../../../src/components/Stepper/StepperExtendedContext.ts"],"sourcesContent":["import React from \"react\";\nimport { EComponentSize } from \"../../enums\";\n\n/** Значение контекста StepperExtended: его читает каждый StepperExtended.Step. */\nexport interface IStepperExtendedContext {\n    /** Размер шагов. */\n    size: EComponentSize;\n    /** Уникальный идентификатор выбранного шага. */\n    selectedId?: string;\n    /** Обработчик выбора шага. */\n    onSelectStep: (selectedId: string) => void;\n}\n\n/** Контекст StepperExtended. Через barrel не экспортируется — это внутренняя деталь компонента. */\nexport const StepperExtendedContext = React.createContext<IStepperExtendedContext>({\n    size: EComponentSize.MD,\n    selectedId: undefined,\n    onSelectStep: () => {},\n});\n"],"names":["React"],"mappings":";;AAcO,MAAM,yBAAyBA,eAAM,cAAuC;AAAA,EAC/E,MAAM,eAAe;AAAA,EACrB,YAAY;AAAA,EACZ,cAAc,MAAM;AAAA,EAAC;AACzB,CAAC;"}

package/components/Stepper/StepperStep.js

@@ -7,7 +7,7 @@ import { isKey } from "../../utils/keyboard.js";
 import { StepperExtendedContext } from "./StepperExtendedContext.js";
 import { EFocusSource } from "../../enums/EFocusSource.js";
 import { EStepperStepType } from "./enums.js";
-import { s as styles, S as StepperStepArrowBorder } from "../../chunks/StepperStepArrowBorder-DDMmOSKy.js";
+import { s as styles, S as StepperStepArrowBorder } from "../../chunks/StepperStepArrowBorder-B5HGnDby.js";
 import { IconWrapper } from "../IconWrapper/IconWrapper.js";
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
 const StepperStep = ({
@@ -92,7 +92,7 @@ const StepperStep = ({
     }
   };
   const renderIcon = () => /* @__PURE__ */ jsx(IconWrapper, { className: styles.icon, disabled: !!disabled, children: icon });
-  const renderContent = () => /* @__PURE__ */ jsxs("div", { className: styles.content, "data-tx": "1.47.0", children: [
+  const renderContent = () => /* @__PURE__ */ jsxs("div", { className: styles.content, "data-tx": "1.48.0", children: [
     icon && renderIcon(),
     children
   ] });

package/components/Stepper/StepperStepArrowBorder.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "../../enums/EComponentSize.js";
-import { S } from "../../chunks/StepperStepArrowBorder-DDMmOSKy.js";
+import { S } from "../../chunks/StepperStepArrowBorder-B5HGnDby.js";
 export {
   S as StepperStepArrowBorder
 };

package/components/Suggest/SuggestMobileDropdownContent.js

@@ -4,7 +4,7 @@ import { useSuggestContext } from "./SuggestContext.js";
 import "../Dropdown/DropdownListContext.js";
 import "../Dropdown/desktop/DropdownDesktop.js";
 import "../Dropdown/desktop/DropdownList.js";
-import "../../chunks/DropdownListItem-B9cIx_8A.js";
+import "../../chunks/DropdownListItem-cXbzcYKR.js";
 import "../Dropdown/mobile/DropdownMobile.js";
 import { DropdownMobileBody } from "../Dropdown/mobile/DropdownMobileBody.js";
 import { DropdownMobileClose } from "../Dropdown/mobile/DropdownMobileClose.js";
@@ -21,8 +21,8 @@ import "../Typography/Caption.js";
 import "../Typography/CodeText.js";
 import { Text } from "../Typography/Text.js";
 import "../Typography/Title.js";
-const suggestDropdownMobileBody = "suggestDropdownMobileBody__1fdce350";
-const suggestDropdownMobileNoOptionsText = "suggestDropdownMobileNoOptionsText__63c3fdb2";
+const suggestDropdownMobileBody = "suggestDropdownMobileBody__331bbb31";
+const suggestDropdownMobileNoOptionsText = "suggestDropdownMobileNoOptionsText__48999b01";
 const styles = {
   suggestDropdownMobileBody,
   suggestDropdownMobileNoOptionsText

package/components/SuggestField/SuggestField.js

@@ -2,7 +2,7 @@ import "./desktop/SuggestFieldDesktopDropdown.js";
 import { SuggestFieldDesktop } from "./desktop/SuggestFieldDesktop.js";
 import { SuggestFieldMobile } from "./mobile/SuggestFieldMobile.js";
 import "./mobile/SuggestFieldMobileDropdown.js";
-import "../../chunks/SuggestFieldMobileDropdownHint-BESIIDZs.js";
+import "../../chunks/SuggestFieldMobileDropdownHint-BeT6Ch46.js";
 import { jsx } from "react/jsx-runtime";
 import { MobileView } from "../MobileView/MobileView.js";
 import "../FormField/components/FormFieldClear.js";

package/components/SuggestField/desktop/SuggestFieldDesktop.js

@@ -1,7 +1,9 @@
 import { SuggestFieldDesktopDropdown } from "./SuggestFieldDesktopDropdown.js";
 import { jsxs, jsx } from "react/jsx-runtime";
-import React__default, { useState, useRef, useLayoutEffect, useCallback, useEffect } from "react";
+import React__default, { useState, useRef, useCallback } from "react";
+import { u as uniqueId } from "../../../chunks/vendor-CUIykw0y.js";
 import { EComponentSize } from "../../../enums/EComponentSize.js";
+import { isKey } from "../../../utils/keyboard.js";
 import { Tooltip } from "../../Tooltip/Tooltip.js";
 import { ETooltipSize } from "../../Tooltip/enums.js";
 import { TextFieldBase } from "../../TextField/TextFieldBase.js";
@@ -23,7 +25,7 @@ import "../../Loader/LoaderMiddle/LoaderMiddle.js";
 import { DropdownListContext } from "../../Dropdown/DropdownListContext.js";
 import "../../Dropdown/desktop/DropdownDesktop.js";
 import "../../Dropdown/desktop/DropdownList.js";
-import "../../../chunks/DropdownListItem-B9cIx_8A.js";
+import "../../../chunks/DropdownListItem-cXbzcYKR.js";
 import "../../Dropdown/mobile/DropdownMobile.js";
 import "../../Dropdown/mobile/DropdownMobileBody.js";
 import "../../Dropdown/mobile/DropdownMobileClose.js";
@@ -35,8 +37,6 @@ import "../../Dropdown/mobile/DropdownMobileList.js";
 import "../../Dropdown/mobile/DropdownMobileListItem.js";
 import "../../Dropdown/Dropdown.js";
 import { DataTestId } from "../../../consts/DataTestId.js";
-import { u as uniqueId } from "../../../chunks/vendor-CUIykw0y.js";
-import { isKey } from "../../../utils/keyboard.js";
 const SuggestFieldDesktop = ({
   value,
   options,
@@ -62,7 +62,7 @@ const SuggestFieldDesktop = ({
   inputProps,
   ...restProps
 }) => {
-  const [inputValue, setInputValue] = useState((value == null ? void 0 : value.label) || "");
+  const [inputValue, setInputValue] = useState((value == null ? void 0 : value.label) ?? "");
   const [inputFocused, setInputFocused] = useState(false);
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [ignoreAutoOpen, setIgnoreAutoOpen] = useState(false);
@@ -71,13 +71,9 @@ const SuggestFieldDesktop = ({
   const [prevValue, setPrevValue] = useState(value);
   if ((value == null ? void 0 : value.id) !== (prevValue == null ? void 0 : prevValue.id)) {
     setPrevValue(value);
-    setInputValue((value == null ? void 0 : value.label) || "");
+    setInputValue((value == null ? void 0 : value.label) ?? "");
   }
   const suggestRef = useRef(null);
-  const onScrollEndRef = useRef(onScrollEnd);
-  useLayoutEffect(() => {
-    onScrollEndRef.current = onScrollEnd;
-  }, [onScrollEnd]);
   const handleInputFocus = useCallback(
     (event) => {
       var _a;
@@ -101,7 +97,7 @@ const SuggestFieldDesktop = ({
       setInputFocused(false);
       closeDropdown(false);
       if (inputValue.length !== 0) {
-        setInputValue((value == null ? void 0 : value.label) || "");
+        setInputValue((value == null ? void 0 : value.label) ?? "");
       } else if (value !== void 0) {
         onSelect(void 0);
       }
@@ -160,7 +156,7 @@ const SuggestFieldDesktop = ({
   const handleDropdownOpen = useCallback(
     (nextDropdownOpen) => {
       if (nextDropdownOpen) {
-        setDropdownOpen(nextDropdownOpen);
+        setDropdownOpen(true);
       } else {
         closeDropdown(false);
       }
@@ -170,27 +166,21 @@ const SuggestFieldDesktop = ({
   const handleSelect = useCallback(
     (nextValue) => {
       closeDropdown(true);
-      setInputValue((nextValue == null ? void 0 : nextValue.label) || "");
+      setInputValue((nextValue == null ? void 0 : nextValue.label) ?? "");
       onSelect(nextValue);
     },
     [closeDropdown, onSelect]
   );
-  useEffect(() => {
-    if (inputFocused) {
-      if (dropdownOpen) {
-        if (options.length === 0) {
-          closeDropdown(false);
-        }
-      } else {
-        if (options.length !== 0 && !ignoreAutoOpen) {
-          setDropdownOpen(true);
-        }
-      }
+  if (inputFocused) {
+    if (dropdownOpen && options.length === 0) {
+      closeDropdown(false);
+    } else if (!dropdownOpen && options.length !== 0 && !ignoreAutoOpen) {
+      setDropdownOpen(true);
     }
-  }, [inputFocused, dropdownOpen, options.length, closeDropdown, ignoreAutoOpen]);
+  }
   const renderSuggestField = () => {
-    const Input = renderInput === void 0 ? FormFieldInput : renderInput;
-    const Dropdown = renderDropdown === void 0 ? SuggestFieldDesktopDropdown : renderDropdown;
+    const Input = renderInput ?? FormFieldInput;
+    const Dropdown = renderDropdown ?? SuggestFieldDesktopDropdown;
     const dropdownActuallyOpen = dropdownOpen && options.length !== 0;
     return /* @__PURE__ */ jsxs(
       TextFieldBase,
@@ -252,7 +242,7 @@ const SuggestFieldDesktop = ({
     Tooltip,
     {
       size: ETooltipSize.SM,
-      isOpen: !!(tooltipOpen && inputFocused) && status !== EFormFieldStatus.DISABLED,
+      isOpen: tooltipOpen && inputFocused && status !== EFormFieldStatus.DISABLED,
       toggle: () => {
       },
       targetRef: suggestRef,