@astral/ui 4.103.2 → 4.104.1

package/node/components/Onboarding/ui/Overlay/styles.js

@@ -38,11 +38,6 @@ exports.Backdrop = styled_1.styled.path `
   cursor: pointer;
 
   fill: ${({ theme }) => theme.palette.background.modalShadow};
-
-  .${constants_2.overlayClassnames.holeMoving} & {
-    transition: d ${({ theme }) => theme.transitions.duration.standard}ms
-      ${({ theme }) => theme.transitions.easing.easeInOut};
-  }
 `;
 /**
  * Блокатор кликов для неинтерактивных шагов.
@@ -51,10 +46,4 @@ exports.HoleBlocker = styled_1.styled.rect `
   pointer-events: auto;
 
   fill: transparent;
-
-  .${constants_2.overlayClassnames.holeMoving} & {
-    transition-timing-function: ${({ theme }) => theme.transitions.easing.easeInOut};
-    transition-duration: ${({ theme }) => theme.transitions.duration.standard}ms;
-    transition-property: x, y, width, height, rx;
-  }
 `;

package/node/components/Onboarding/ui/StepStrategy/StepStrategy.js

@@ -14,8 +14,8 @@ const STEP_VIEWS = {
  * Стратегия отрисовки по типу шага, единый overlay для всего тура.
  */
 const StepStrategy = ({ activeStep, isClosing }) => {
-    const { geometry, shouldShowOverlay, isVisible, isHoleMoving, onOverlayClose, } = (0, useLogic_1.useLogic)(activeStep, isClosing);
+    const { geometry, shouldShowOverlay, isVisible, onOverlayClose } = (0, useLogic_1.useLogic)(activeStep, isClosing);
     const StepView = STEP_VIEWS[activeStep.step.type];
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [shouldShowOverlay && ((0, jsx_runtime_1.jsx)(Overlay_1.Overlay, { hole: geometry.hole, isInteractive: activeStep.isInteractive, isVisible: isVisible, isHoleMoving: isHoleMoving, onClose: onOverlayClose })), (0, jsx_runtime_1.jsx)(StepView, { activeStep: activeStep, isClosing: isClosing, geometry: geometry })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [shouldShowOverlay && ((0, jsx_runtime_1.jsx)(Overlay_1.Overlay, { hole: geometry.hole, isInteractive: activeStep.isInteractive, isVisible: isVisible, onClose: onOverlayClose })), (0, jsx_runtime_1.jsx)(StepView, { activeStep: activeStep, isClosing: isClosing, geometry: geometry })] }));
 };
 exports.StepStrategy = StepStrategy;

package/node/components/Onboarding/ui/StepStrategy/useLogic/useLogic.d.ts

@@ -32,10 +32,6 @@ export type UseLogicResult = {
      * Overlay виден.
      */
     isVisible: boolean;
-    /**
-     * Hole анимируется.
-     */
-    isHoleMoving: boolean;
     /**
      * Клик по overlay — запрос выхода.
      */

package/node/components/Onboarding/ui/StepStrategy/useLogic/useLogic.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const useTheme_1 = require("../../../../theme/hooks/useTheme");
 const createVirtualAnchor_1 = require("../../../utils/createVirtualAnchor");
 const geometry_1 = require("../../../utils/geometry");
+const useAnimatedRect_1 = require("../../hooks/useAnimatedRect");
 const useStepTransition_1 = require("../../hooks/useStepTransition");
 const useTargetAnchor_1 = require("../../hooks/useTargetAnchor");
 /**
@@ -22,12 +23,21 @@ const useLogic = (activeStep, isClosing) => {
         timeout: step.waitForTimeout,
     });
     const padding = (0, geometry_1.parseOffset)(step.highlightOffset);
-    const hole = (0, react_1.useMemo)(() => (rect ? (0, geometry_1.inflateRect)(rect, padding) : null), [rect, padding]);
+    // Отступ учитываем до переезда: иначе он подставляется сразу от нового шага,
+    // и область скачком меняет размер вместо плавного.
+    const targetHole = (0, react_1.useMemo)(() => (rect ? (0, geometry_1.inflateRect)(rect, padding) : null), [rect, padding]);
+    // Переезд hole между шагами: цель шага может ехать сама (шторка, прокрутка),
+    // поэтому область анимируется здесь, а не css-переходом.
+    const hole = (0, useAnimatedRect_1.useAnimatedRect)(targetHole, {
+        stepKey: step.name,
+        durationMs: theme.transitions.duration.short,
+        // Шаг без hole: область гаснет сразу, а не едет к отсутствующей цели.
+        hasHole: isHighlight,
+    });
     const anchorEl = (0, react_1.useMemo)(() => (hole ? (0, createVirtualAnchor_1.createVirtualAnchor)(hole) : null), [hole]);
-    const { isPopoverHidden, isHoleMoving } = (0, useStepTransition_1.useStepTransition)(step.name, {
-        // Popover скрыт пока hole движется.
+    const isPopoverHidden = (0, useStepTransition_1.useStepTransition)(step.name, {
+        // Popover скрыт пока hole едет к новой цели.
         popoverHiddenMs: theme.transitions.duration.short,
-        holeMovingMs: theme.transitions.duration.short,
         hasHole: isHighlight,
     });
     const onOverlayClose = (0, react_1.useCallback)(() => {
@@ -48,7 +58,6 @@ const useLogic = (activeStep, isClosing) => {
         },
         shouldShowOverlay: hasShownOverlayRef.current,
         isVisible: !isClosing,
-        isHoleMoving,
         onOverlayClose,
     };
 };

package/node/components/Onboarding/ui/hooks/useAnimatedRect/index.d.ts

@@ -0,0 +1 @@
+export { useAnimatedRect } from './useAnimatedRect';

package/node/components/Onboarding/ui/hooks/useAnimatedRect/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAnimatedRect = void 0;
+var useAnimatedRect_1 = require("./useAnimatedRect");
+Object.defineProperty(exports, "useAnimatedRect", { enumerable: true, get: function () { return useAnimatedRect_1.useAnimatedRect; } });

package/node/components/Onboarding/ui/hooks/useAnimatedRect/useAnimatedRect.d.ts

@@ -0,0 +1,21 @@
+import { type Rect } from '../../../utils/geometry';
+export type AnimatedRectOptions = {
+    /**
+     * Ключ шага: его смена запускает переезд hole на новую цель.
+     */
+    stepKey: string;
+    /**
+     * Длительность переезда (мс).
+     */
+    durationMs: number;
+    /**
+     * Есть ли hole в текущем шаге (highlight). У шага без hole область гаснет
+     * сразу: ехать некуда.
+     * @default true
+     */
+    hasHole?: boolean;
+};
+/**
+ * Плавный переход области hole от цели прошлого шага к цели нового.
+ */
+export declare const useAnimatedRect: (target: Rect | null, { stepKey, durationMs, hasHole }: AnimatedRectOptions) => Rect | null;

package/node/components/Onboarding/ui/hooks/useAnimatedRect/useAnimatedRect.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAnimatedRect = void 0;
+const react_1 = require("react");
+const geometry_1 = require("../../../utils/geometry");
+/**
+ * Сглаживание переезда, аналог css-функции `ease-in-out`.
+ */
+const easeInOut = (progress) => progress < 0.5 ? 4 * progress ** 3 : 1 - (-2 * progress + 2) ** 3 / 2;
+/**
+ * Плавный переход области hole от цели прошлого шага к цели нового.
+ */
+const useAnimatedRect = (target, { stepKey, durationMs, hasHole = true }) => {
+    const [travelRect, setTravelRect] = (0, react_1.useState)(null);
+    const fromRect = (0, react_1.useRef)(null);
+    const targetRect = (0, react_1.useRef)(target);
+    const shownRect = (0, react_1.useRef)(target);
+    const prevStepKey = (0, react_1.useRef)(stepKey);
+    const [travelId, setTravelId] = (0, react_1.useState)(0);
+    targetRect.current = target;
+    // Стартуем синхронно во время render, иначе виден кадр с hole на новой цели.
+    if (prevStepKey.current !== stepKey) {
+        prevStepKey.current = stepKey;
+        if (!hasHole) {
+            // Шаг без hole (standalone): гасим область и отменяем начатый переезд.
+            fromRect.current = null;
+            setTravelRect(null);
+            setTravelId((id) => id + 1);
+        }
+        else if (shownRect.current) {
+            // Область уже показана — едем от неё; иначе (первый hole в туре) цель
+            // показывается сразу, без переезда.
+            fromRect.current = shownRect.current;
+            setTravelRect(shownRect.current);
+            setTravelId((id) => id + 1);
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        // Первый render (mount) — переезд не запускаем.
+        if (travelId === 0) {
+            return;
+        }
+        const from = fromRect.current;
+        if (!from) {
+            return;
+        }
+        let frame = 0;
+        let startTime = 0;
+        const travel = (time) => {
+            startTime = startTime || time;
+            const progress = Math.min((time - startTime) / durationMs, 1);
+            const to = targetRect.current;
+            // Цель ещё не готова (элемент не смонтирован, идёт прокрутка) — держим
+            // прежнюю область, чтобы hole не гас на время ожидания.
+            setTravelRect(to ? (0, geometry_1.interpolateRect)(from, to, easeInOut(progress)) : from);
+            if (progress < 1) {
+                frame = requestAnimationFrame(travel);
+                return;
+            }
+            // Переезд закончен, дальше область ведёт трекинг цели.
+            setTravelRect(null);
+        };
+        frame = requestAnimationFrame(travel);
+        return () => cancelAnimationFrame(frame);
+    }, [travelId, durationMs]);
+    const rect = hasHole ? (travelRect ?? target) : null;
+    shownRect.current = rect;
+    return rect;
+};
+exports.useAnimatedRect = useAnimatedRect;

package/node/components/Onboarding/ui/hooks/useStepTransition/useStepTransition.d.ts

@@ -1,12 +1,8 @@
 export type StepTransitionDurations = {
     /**
-     * Время скрытия popover при смене шага (не меньше `holeMovingMs`).
+     * Время скрытия popover при смене шага.
      */
     popoverHiddenMs: number;
-    /**
-     * Время движения hole к новому элементу.
-     */
-    holeMovingMs: number;
     /**
      * Есть ли hole в текущем шаге (highlight). Скрытие popover нужно только для
      * переезда hole (highlight → highlight).
@@ -14,17 +10,7 @@ export type StepTransitionDurations = {
      */
     hasHole?: boolean;
 };
-export type StepTransitionPhase = {
-    /**
-     * Popover скрыт, пока hole движется.
-     */
-    isPopoverHidden: boolean;
-    /**
-     * Идёт анимированный переезд hole.
-     */
-    isHoleMoving: boolean;
-};
 /**
- * Координирует скрытие popover и движение hole при переходе между highlight-шагами.
+ * Прячет popover на время переезда hole между highlight-шагами.
  */
-export declare const useStepTransition: (stepKey: string, { popoverHiddenMs, holeMovingMs, hasHole }: StepTransitionDurations) => StepTransitionPhase;
+export declare const useStepTransition: (stepKey: string, { popoverHiddenMs, hasHole }: StepTransitionDurations) => boolean;

package/node/components/Onboarding/ui/hooks/useStepTransition/useStepTransition.js

@@ -2,19 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStepTransition = void 0;
 const react_1 = require("react");
-const IDLE_PHASE = {
-    isPopoverHidden: false,
-    isHoleMoving: false,
-};
-const HIDDEN_PHASE = {
-    isPopoverHidden: true,
-    isHoleMoving: true,
-};
 /**
- * Координирует скрытие popover и движение hole при переходе между highlight-шагами.
+ * Прячет popover на время переезда hole между highlight-шагами.
  */
-const useStepTransition = (stepKey, { popoverHiddenMs, holeMovingMs, hasHole = true }) => {
-    const [phase, setPhase] = (0, react_1.useState)(IDLE_PHASE);
+const useStepTransition = (stepKey, { popoverHiddenMs, hasHole = true }) => {
+    const [isPopoverHidden, setIsPopoverHidden] = (0, react_1.useState)(false);
     const prevKey = (0, react_1.useRef)(stepKey);
     const prevHadHole = (0, react_1.useRef)(hasHole);
     // Триггер для эффекта: `prevKey` мутируется во время render, поэтому в эффекте не сравнить.
@@ -25,26 +17,19 @@ const useStepTransition = (stepKey, { popoverHiddenMs, holeMovingMs, hasHole = t
         const isHoleTravel = prevHadHole.current && hasHole;
         prevKey.current = stepKey;
         prevHadHole.current = hasHole;
+        setIsPopoverHidden(isHoleTravel);
         if (isHoleTravel) {
-            setPhase(HIDDEN_PHASE);
             setTransitionId((id) => id + 1);
         }
-        else {
-            setPhase(IDLE_PHASE);
-        }
     }
     (0, react_1.useEffect)(() => {
         // Первый render (mount) — переход не запускаем.
         if (transitionId === 0) {
             return;
         }
-        const popoverTimer = setTimeout(() => setPhase((prev) => ({ ...prev, isPopoverHidden: false })), popoverHiddenMs);
-        const holeTimer = setTimeout(() => setPhase((prev) => ({ ...prev, isHoleMoving: false })), holeMovingMs);
-        return () => {
-            clearTimeout(popoverTimer);
-            clearTimeout(holeTimer);
-        };
-    }, [transitionId, popoverHiddenMs, holeMovingMs]);
-    return phase;
+        const popoverTimer = setTimeout(() => setIsPopoverHidden(false), popoverHiddenMs);
+        return () => clearTimeout(popoverTimer);
+    }, [transitionId, popoverHiddenMs]);
+    return isPopoverHidden;
 };
 exports.useStepTransition = useStepTransition;

package/node/components/Onboarding/ui/hooks/useTargetAnchor/useTargetAnchor.js

@@ -24,17 +24,14 @@ const useTargetAnchor = (targetName, { onError, shouldTrack = true, scrollOnEnte
             // Устанавливаем найденный элемент сразу, без задержки.
             setElement((0, getTargetElement_1.getTargetElement)(targetName));
             (0, waitForElement_1.waitForElement)(targetName, { timeout })
-                .then(async (target) => {
+                .then((target) => {
                 if (isCancelled) {
                     return;
                 }
+                setElement(target);
                 if (scrollOnEnter) {
-                    await (0, scrollIntoView_1.scrollIntoView)(target);
+                    (0, scrollIntoView_1.scrollIntoView)(target);
                 }
-                if (isCancelled) {
-                    return;
-                }
-                setElement(target);
                 stopRemovalWatch = (0, observeRemoval_1.observeRemoval)(target, () => {
                     if (!isCancelled) {
                         setElement(null);

package/node/components/Onboarding/utils/geometry/rect/index.d.ts

@@ -1,2 +1,2 @@
-export { clampToScrollParents, clampToViewport, inflateRect, isSameRect, rectFromDomRect, } from './rect';
+export { clampToScrollParents, clampToViewport, inflateRect, interpolateRect, isSameRect, rectFromDomRect, } from './rect';
 export type { Rect } from './rect';

package/node/components/Onboarding/utils/geometry/rect/index.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.rectFromDomRect = exports.isSameRect = exports.inflateRect = exports.clampToViewport = exports.clampToScrollParents = void 0;
+exports.rectFromDomRect = exports.isSameRect = exports.interpolateRect = exports.inflateRect = exports.clampToViewport = exports.clampToScrollParents = void 0;
 var rect_1 = require("./rect");
 Object.defineProperty(exports, "clampToScrollParents", { enumerable: true, get: function () { return rect_1.clampToScrollParents; } });
 Object.defineProperty(exports, "clampToViewport", { enumerable: true, get: function () { return rect_1.clampToViewport; } });
 Object.defineProperty(exports, "inflateRect", { enumerable: true, get: function () { return rect_1.inflateRect; } });
+Object.defineProperty(exports, "interpolateRect", { enumerable: true, get: function () { return rect_1.interpolateRect; } });
 Object.defineProperty(exports, "isSameRect", { enumerable: true, get: function () { return rect_1.isSameRect; } });
 Object.defineProperty(exports, "rectFromDomRect", { enumerable: true, get: function () { return rect_1.rectFromDomRect; } });

package/node/components/Onboarding/utils/geometry/rect/rect.d.ts

@@ -20,6 +20,10 @@ export declare const isSameRect: (a: Rect | null, b: Rect) => boolean;
  * Расширяет область на padding во все стороны.
  */
 export declare const inflateRect: (rect: Rect, padding: number) => Rect;
+/**
+ * Область между `from` и `to` по доле переезда `progress` (0..1).
+ */
+export declare const interpolateRect: (from: Rect, to: Rect, progress: number) => Rect;
 /**
  * Обрезает область hole по границам viewport.
  */

package/node/components/Onboarding/utils/geometry/rect/rect.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.clampToScrollParents = exports.isViewportSizedRect = exports.clampToViewport = exports.inflateRect = exports.isSameRect = exports.rectFromDomRect = void 0;
+exports.clampToScrollParents = exports.isViewportSizedRect = exports.clampToViewport = exports.interpolateRect = exports.inflateRect = exports.isSameRect = exports.rectFromDomRect = void 0;
 /**
  * Приводит нативный `DOMRect` к нашему `Rect` (только позиция и размеры).
  */
@@ -30,6 +30,16 @@ const inflateRect = (rect, padding) => ({
     height: rect.height + padding * 2,
 });
 exports.inflateRect = inflateRect;
+/**
+ * Область между `from` и `to` по доле переезда `progress` (0..1).
+ */
+const interpolateRect = (from, to, progress) => ({
+    x: from.x + (to.x - from.x) * progress,
+    y: from.y + (to.y - from.y) * progress,
+    width: from.width + (to.width - from.width) * progress,
+    height: from.height + (to.height - from.height) * progress,
+});
+exports.interpolateRect = interpolateRect;
 /**
  * Пересечение двух областей. Не пересекаются — ширина/высота 0.
  */

package/node/components/Onboarding/utils/scrollIntoView/scrollIntoView.d.ts

@@ -1,13 +1,12 @@
 /**
- * Доводит элемент highlight-шага до центра viewport и ждёт, пока прокрутка
- * реально доедет.
+ * Доводит элемент highlight-шага до центра viewport.
  *
  * Зачем: цель может быть за пределами экрана или внутри прокрученного
  * контейнера — её надо показать, прежде чем подсвечивать. Нативный
  * `scrollIntoView` сам прокручивает всю цепочку вложенных scroll-контейнеров.
  *
- * Почему ждём: прокрутка плавная (анимированная), позиция элемента меняется
- * кадр за кадром. Дожидаемся её стабилизации, чтобы hole overlay и popover встали
- * по финальной позиции, а не по промежуточной «едущей».
+ * Окончания прокрутки не ждём: hole и popover привязаны к элементу, а
+ * `useTrackedRect` ведёт их за ним покадрово — к финальной позиции они приедут
+ * вместе с ним.
  */
-export declare const scrollIntoView: (element: HTMLElement, behavior?: ScrollBehavior) => Promise<void>;
+export declare const scrollIntoView: (element: HTMLElement, behavior?: ScrollBehavior) => void;

package/node/components/Onboarding/utils/scrollIntoView/scrollIntoView.js

@@ -5,51 +5,23 @@ const constants_1 = require("../../constants");
 const geometry_1 = require("../geometry");
 const getScrollParents_1 = require("../getScrollParents");
 /**
- * Сколько кадров подряд позиция не меняется, чтобы счесть прокрутку стабилизировавшейся.
+ * Позиционирование, при котором элемент не двигается прокруткой страницы.
  */
-const STABLE_FRAMES = 3;
+const PINNED_POSITIONS = ['fixed', 'sticky'];
 /**
- * Предохранитель: если позиция так и не стабилизировалась (постоянные
- * layout-сдвиги), делаем resolve по тайм-ауту, чтобы Promise не завис и тур не застрял.
+ * Элемент закреплён на экране: лежит внутри шторки, модалки или липкой шапки.
+ * Прокрутка такой элемент не подвинет, звать её незачем.
  */
-const SETTLE_TIMEOUT_MS = 1000;
-/**
- * Дожидается окончания плавной прокрутки.
- *
- * У браузера нет надёжного сигнала «плавная прокрутка доехала».
- * Поэтому отслеживаем позицию элемента покадрово и считаем прокрутку
- * законченной, когда `top` перестаёт меняться 3 кадра
- * подряд — либо когда срабатывает предохранитель 1000мс.
- */
-const waitForScrollSettle = (element) => new Promise((resolve) => {
-    let raf = 0;
-    let stableFrames = 0;
-    let prevTop = Number.NaN;
-    const timer = setTimeout(() => {
-        cancelAnimationFrame(raf);
-        resolve();
-    }, SETTLE_TIMEOUT_MS);
-    const tick = () => {
-        const { top } = element.getBoundingClientRect();
-        // Позиция не изменилась за кадр — копим «стабильные» кадры; дёрнулась —
-        // сбрасываем счётчик и запоминаем новую позицию.
-        if (top === prevTop) {
-            stableFrames += 1;
-        }
-        else {
-            stableFrames = 0;
-            prevTop = top;
+const checkIsPinned = (element) => {
+    let node = element;
+    while (node) {
+        if (PINNED_POSITIONS.includes(getComputedStyle(node).position)) {
+            return true;
         }
-        // Достаточно кадров без движения → анимация закончилась.
-        if (stableFrames >= STABLE_FRAMES) {
-            clearTimeout(timer);
-            resolve();
-            return;
-        }
-        raf = requestAnimationFrame(tick);
-    };
-    raf = requestAnimationFrame(tick);
-});
+        node = node.parentElement;
+    }
+    return false;
+};
 /**
  * Элемент целиком видим: помещается и во viewport, и в рамки каждого своего
  * scroll-предка.
@@ -68,22 +40,20 @@ const isFullyVisible = (element) => {
         rect.right <= frame.right);
 };
 /**
- * Доводит элемент highlight-шага до центра viewport и ждёт, пока прокрутка
- * реально доедет.
+ * Доводит элемент highlight-шага до центра viewport.
  *
  * Зачем: цель может быть за пределами экрана или внутри прокрученного
  * контейнера — её надо показать, прежде чем подсвечивать. Нативный
  * `scrollIntoView` сам прокручивает всю цепочку вложенных scroll-контейнеров.
  *
- * Почему ждём: прокрутка плавная (анимированная), позиция элемента меняется
- * кадр за кадром. Дожидаемся её стабилизации, чтобы hole overlay и popover встали
- * по финальной позиции, а не по промежуточной «едущей».
+ * Окончания прокрутки не ждём: hole и popover привязаны к элементу, а
+ * `useTrackedRect` ведёт их за ним покадрово — к финальной позиции они приедут
+ * вместе с ним.
  */
-const scrollIntoView = async (element, behavior = constants_1.SCROLL_BEHAVIOR) => {
-    if (isFullyVisible(element)) {
+const scrollIntoView = (element, behavior = constants_1.SCROLL_BEHAVIOR) => {
+    if (checkIsPinned(element) || isFullyVisible(element)) {
         return;
     }
     element.scrollIntoView({ behavior, block: 'center', inline: 'center' });
-    await waitForScrollSettle(element);
 };
 exports.scrollIntoView = scrollIntoView;

package/node/components/Select/Select.js

@@ -53,6 +53,6 @@ const SelectInner = ({ required, getOptionLabel, placeholder, helperText, hideHe
         }
         return findMenuItemsLabel(children, selectedOptions);
     };
-    return ((0, jsx_runtime_1.jsxs)(FormControl_1.default, { error: error, fullWidth: fullWidth, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.default, { htmlFor: "grouped-select", required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsxs)(styles_1.StyledSelect, { ...props, value: value === null ? '' : value, open: isOpened, disabled: disabled, onOpen: openSelect, onClose: closeSelect, renderValue: renderValue, IconComponent: () => null, displayEmpty: true, ref: ref, fullWidth: fullWidth, onChange: handleChangeOption, "$isShowingPlaceholder": isShowingPlaceholder, endAdornment: (0, jsx_runtime_1.jsxs)(styles_1.EndAdornmentWrapper, { children: [loading && (0, jsx_runtime_1.jsx)(Loader_1.Loader, { color: "primary", size: "small" }), !loading && isShowingClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { disabled: disabled, ref: resetButtonRef, onClick: onClearAll })), !loading && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", disabled: disabled, onClick: openSelect, children: !isOpened ? (0, jsx_runtime_1.jsx)(DownOutlineMd_1.DownOutlineMd, {}) : (0, jsx_runtime_1.jsx)(UpOutlineMd_1.UpOutlineMd, {}) }))] }), children: [(0, jsx_runtime_1.jsx)(styles_1.Placeholder, { value: "", children: placeholder }), !loading && isShowingSelectAll && ((0, jsx_runtime_1.jsxs)(MenuItem_1.MenuItem, { className: selectAllClassName, selected: isSelectedAll, value: constants_1.SELECT_ALL_VALUE, children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isSelectedAll, indeterminate: isIndeterminate }) }), "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435"] })), !loading && children, !loading && isNoData && (0, jsx_runtime_1.jsx)(styles_1.StateWrapper, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" })] }), (0, jsx_runtime_1.jsx)(FormHelperText_1.FormHelperText, { error: error, success: success, hideHelperText: hideHelperText, children: helperText })] }));
+    return ((0, jsx_runtime_1.jsxs)(FormControl_1.default, { error: error, fullWidth: fullWidth, children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.default, { htmlFor: "grouped-select", required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsxs)(styles_1.StyledSelect, { ...props, value: value === null || value === undefined ? '' : value, open: isOpened, disabled: disabled, onOpen: openSelect, onClose: closeSelect, renderValue: renderValue, IconComponent: () => null, displayEmpty: true, ref: ref, fullWidth: fullWidth, onChange: handleChangeOption, "$isShowingPlaceholder": isShowingPlaceholder, endAdornment: (0, jsx_runtime_1.jsxs)(styles_1.EndAdornmentWrapper, { children: [loading && (0, jsx_runtime_1.jsx)(Loader_1.Loader, { color: "primary", size: "small" }), !loading && isShowingClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { disabled: disabled, ref: resetButtonRef, onClick: onClearAll })), !loading && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", disabled: disabled, onClick: openSelect, children: !isOpened ? (0, jsx_runtime_1.jsx)(DownOutlineMd_1.DownOutlineMd, {}) : (0, jsx_runtime_1.jsx)(UpOutlineMd_1.UpOutlineMd, {}) }))] }), children: [(0, jsx_runtime_1.jsx)(styles_1.Placeholder, { value: "", children: placeholder }), !loading && isShowingSelectAll && ((0, jsx_runtime_1.jsxs)(MenuItem_1.MenuItem, { className: selectAllClassName, selected: isSelectedAll, value: constants_1.SELECT_ALL_VALUE, children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: isSelectedAll, indeterminate: isIndeterminate }) }), "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435"] })), !loading && children, !loading && isNoData && (0, jsx_runtime_1.jsx)(styles_1.StateWrapper, { children: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" })] }), (0, jsx_runtime_1.jsx)(FormHelperText_1.FormHelperText, { error: error, success: success, hideHelperText: hideHelperText, children: helperText })] }));
 };
 exports.Select = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(SelectInner);

package/node/components/Select/useLogic/useLogic.js

@@ -7,6 +7,7 @@ const MenuItem_2 = require("../../MenuItem");
 const getNodeText_1 = require("../../utils/getNodeText");
 const isSyncReactElement_1 = require("../../utils/isSyncReactElement");
 const constants_1 = require("../constants");
+const isShowingPlaceholder_1 = require("./utils/isShowingPlaceholder");
 const useLogic = ({ value, onChange, children, open: externalIsOpened, defaultOpen, multiple, isEnableAllSelection, isShowClearButton = true, valueOptions, onSelectAll, onUnselectAll, name, placeholder, onClose, onOpen, loading, }) => {
     const [isOpened, setOpened] = (0, react_1.useState)(!loading && (defaultOpen || externalIsOpened || false));
     const resetButtonRef = (0, react_1.useRef)(null);
@@ -114,7 +115,6 @@ const useLogic = ({ value, onChange, children, open: externalIsOpened, defaultOp
         }
         return null;
     };
-    const isShowingPlaceholder = Boolean((value === '' || Array.isArray(value)) && !!placeholder);
     return {
         isOpened,
         isNoData,
@@ -131,7 +131,7 @@ const useLogic = ({ value, onChange, children, open: externalIsOpened, defaultOp
         handleChangeArrayValue,
         selectAllClassName,
         findMenuItemsLabel,
-        isShowingPlaceholder,
+        isShowingPlaceholder: (0, isShowingPlaceholder_1.isShowingPlaceholder)(value, placeholder),
     };
 };
 exports.useLogic = useLogic;

package/node/components/Select/useLogic/utils/isShowingPlaceholder/index.d.ts

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

package/node/components/Select/useLogic/utils/isShowingPlaceholder/index.js

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

package/node/components/Select/useLogic/utils/isShowingPlaceholder/isShowingPlaceholder.d.ts

@@ -0,0 +1 @@
+export declare const isShowingPlaceholder: (value: unknown, placeholder?: string) => boolean;

package/node/components/Select/useLogic/utils/isShowingPlaceholder/isShowingPlaceholder.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isShowingPlaceholder = void 0;
+const isShowingPlaceholder = (value, placeholder) => {
+    if (!placeholder) {
+        return false;
+    }
+    if (value === null || value === undefined || value === '') {
+        return true;
+    }
+    if (Array.isArray(value) && value.length === 0) {
+        return true;
+    }
+    return false;
+};
+exports.isShowingPlaceholder = isShowingPlaceholder;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.103.2",
+  "version": "4.104.1",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {