@salutejs/plasma-new-hope 0.377.0 → 0.377.1-dev.0

package/dist/emotion/es/components/Calendar/CalendarDouble/CalendarDouble.js

@@ -42,7 +42,7 @@ import { StyledCalendar, StyledSeparator, StyledWrapper } from "./CalendarDouble
             min.setHours(0, 0, 0, 0);
         }
         if (max) {
-            max.setHours(23, 59, 59, 999);
+            max.setHours(0, 0, 0, 0);
         }
         const [state, dispatch] = useReducer(reducer, getInitialState(value, min, renderFromDate, type, true));
         const { date, calendarState, startYear, size } = state;

package/dist/emotion/es/components/Calendar/ui/DateStructureItem/DateStructureItem.styles.js

@@ -24,7 +24,7 @@ const sideInRange = ()=>`
     }
 `;
 export const StyledItem = /*#__PURE__*/ styled("div", {
-    target: "e1ukg3du0",
+    target: "eq115x20",
     label: "StyledItem"
 })("border-radius:calc(var(", innerTokens.dateStructureBorderRadius, ") - 0.125rem);", String(flexCenter), ";&.", String(classes.inRange), "{", inRange(), ";}&.", String(classes.sideInRange), "{", sideInRange(), ";}&.", String(classes.sideLeft), "{&:before{left:", ({ offset })=>`${offset}px`, ";}}&.", String(classes.sideRight), "{&:before{right:", ({ offset })=>`${offset}px`, ";}}");
 const disabledItem = ()=>`
@@ -35,7 +35,7 @@ const disabledCurrentItem = ()=>`
     ${disabledItem()};
 `;
 export const StyledItemRoot = /*#__PURE__*/ styled("div", {
-    target: "e1ukg3du1",
+    target: "eq115x21",
     label: "StyledItemRoot"
 })("font-family:var(", innerTokens.dateStructureFontFamily, ");font-size:var(", innerTokens.dateStructureFontSize, ");font-style:var(", innerTokens.dateStructureFontStyle, ");font-weight:var(", innerTokens.dateStructureFontWeight, ");letter-spacing:var(", innerTokens.dateStructureFontLetterSpacing, ");line-height:var(", innerTokens.dateStructureFontLineHeight, ");position:relative;box-sizing:border-box;border-radius:var(", innerTokens.dateStructureBorderRadius, ");", String(flexCenter), ";color:", ({ isDayInCurrentMonth })=>isDayInCurrentMonth ? `var(${tokens.calendarContentPrimaryColor})` : `var(${tokens.calendarContentSecondaryColor})`, ";&.", String(classes.selectableItem), "{", addSelected({
     minWidth: 'calc(100% - 0.125rem)',
@@ -58,16 +58,16 @@ export const StyledItemRoot = /*#__PURE__*/ styled("div", {
     outlineOffset: '0.1875rem',
     outlineColor: `var(${tokens.calendarOutlineFocusColor})`,
     outlineRadius: `var(${innerTokens.dateStructureBorderRadius})`
-}), ";}}&.", classes.dayInCurrentMonth, ":not(.", classes.disabled, "){", addActive({
+}), ";}}&.", classes.dayInCurrentMonth, ":not(.", classes.disabled, "):not(.", classes.disabledCurrent, "){", addActive({
     activeBackground: `var(${tokens.calendarActiveItemBackground})`,
     activeColor: `var(${tokens.calendarActiveItemColor})`,
     activeFontWeight: `var(${innerTokens.dateStructureSelectedFontWeight})`
 }), ";}&.", classes.dayOfWeek, "{color:var(", tokens.calendarDayOfWeekColor, ");}&.", classes.disabled, "{color:", ({ isDayInCurrentMonth })=>isDayInCurrentMonth ? `var(${tokens.calendarContentPrimaryDisabledColor})` : `var(${tokens.calendarContentSecondaryDisabledColor})`, ";", disabledItem(), ";}&.", classes.disabledCurrent, "{color:", ({ isDayInCurrentMonth })=>isDayInCurrentMonth ? `var(${tokens.calendarContentPrimaryDisabledColor})` : `var(${tokens.calendarContentSecondaryDisabledColor})`, ";", disabledCurrentItem(), ";}&.", classes.currentItem, "{& > .", classes.inRange, ":before{width:calc(100% + 2px);height:100%;}& > .", classes.sideRight, ":before{width:100%;right:-1px;left:unset;}& > .", classes.sideLeft, ":before{width:100%;left:-1px;right:unset;}}& .", popoverClasses.wrapper, ".", popoverClasses.targetAsRef, "{z-index:-1;width:100%;}");
 export const StyledEvents = /*#__PURE__*/ styled("div", {
-    target: "e1ukg3du2",
+    target: "eq115x22",
     label: "StyledEvents"
 })("display:flex;position:absolute;bottom:var(", tokens.calendarEventItemBottom, ",0.25rem);");
 export const StyledEvent = /*#__PURE__*/ styled("div", {
-    target: "e1ukg3du3",
+    target: "eq115x23",
     label: "StyledEvent"
 })("margin:0 0.063rem;width:0.188rem;height:0.188rem;border-radius:50%;background-color:", ({ color = 'var(--plasma-colors-accent, var(--surface-accent))' })=>color, ";");

package/dist/emotion/es/components/Combobox/Combobox.js

@@ -40,8 +40,7 @@ import { Context } from "./Combobox.context";
             multiple,
             nativeMode,
             valueToItemMap,
-            renderValue,
-            onChangeValue
+            renderValue
         });
         const currentLabel = getTextValue(multiple, value, valueToItemMap, renderValue);
         const { filteredItems, filteredMaps: { pathMap: filteredPathMap, focusedToValueMap: filteredFocusedToValueMap, valueToPathMap: filteredValueToPathMap } } = useComboboxItems({
@@ -99,6 +98,9 @@ import { Context } from "./Combobox.context";
          */ /* Обработчик изменения значения в инпуте */ const handleTextValueChange = (e)=>{
             if (!filterValue || filterValue(e.target.value)) {
                 setTextValue(e.target.value);
+                if (onChangeValue) {
+                    onChangeValue(e.target.value);
+                }
             }
             dispatchPath({
                 type: 'opened_first_level'

package/dist/emotion/es/components/Combobox/hooks/useValue.js

@@ -6,7 +6,7 @@ const getInitialValue = ({ defaultValue, multiple })=>{
     }
     return defaultValue || '';
 };
-export const useValue = ({ outerValue, outerOnChange, defaultValue, multiple, nativeMode, valueToItemMap, renderValue, onChangeValue })=>{
+export const useValue = ({ outerValue, outerOnChange, defaultValue, multiple, nativeMode, valueToItemMap, renderValue })=>{
     // Внутреннее состояние для корректной работы в uncontrolled-режиме.
     const [internalValue, setInternalValue] = useState(getInitialValue({
         defaultValue,
@@ -21,7 +21,6 @@ export const useValue = ({ outerValue, outerOnChange, defaultValue, multiple, na
             return;
         }
         setTextValueState(newTextValue);
-        onChangeValue?.(newTextValue);
     };
     const handleChange = (newValue, item)=>{
         setInternalValue(newValue);

package/dist/emotion/es/components/DatePicker/FloatingPopover.js

@@ -1,5 +1,5 @@
 import { flip, shift, size, useFloating, useInteractions, useDismiss, FloatingPortal, offset as offsetMiddleware, autoUpdate } from "@floating-ui/react";
-import React, { forwardRef } from "react";
+import React, { forwardRef, useLayoutEffect } from "react";
 import { safeUseId } from "../../utils";
 import { FloatingContent, FloatingTarget, FloatingWrapper } from "./DatePickerBase.styles";
 export const resolveFloatingPlacement = (placement)=>{
@@ -24,8 +24,11 @@ const getFloatingPortalProps = (portal, wrappedId)=>{
         root: portal
     };
 };
-const FloatingPopover = /*#__PURE__*/ forwardRef(({ target, children, opened, onToggle, placement, portal, offset, zIndex, disableFlip, closeOnOverlayClick, closeOnEsc, innerWidth, innerHeight, stretchHeight }, ref)=>{
+const FloatingPopover = /*#__PURE__*/ forwardRef(({ target, referenceRef, children, opened, onToggle, placement, portal, offset, zIndex, disableFlip, closeOnOverlayClick, closeOnEsc, innerWidth, innerHeight, stretchHeight }, ref)=>{
     const { refs, floatingStyles, context } = useFloating({
+        elements: referenceRef?.current ? {
+            reference: referenceRef.current
+        } : undefined,
         whileElementsMounted (referenceEl, floatingEl, update) {
             return autoUpdate(referenceEl, floatingEl, update, {
                 ancestorScroll: false,
@@ -64,6 +67,14 @@ const FloatingPopover = /*#__PURE__*/ forwardRef(({ target, children, opened, on
     const { getReferenceProps, getFloatingProps } = useInteractions([
         dismiss
     ]);
+    useLayoutEffect(()=>{
+        if (referenceRef?.current) {
+            refs.setReference(referenceRef.current);
+        }
+    }, [
+        referenceRef,
+        refs
+    ]);
     const wrappedId = safeUseId();
     const handleClick = (event)=>{
         onToggle(!opened, event);

package/dist/emotion/es/components/DatePicker/RangeDate/RangeDate.js

@@ -19,7 +19,7 @@ import { base as readOnlyCSS } from "./variations/_readonly/base";
 import { StyledRange, base } from "./RangeDate.styles";
 import { RangeDatePopover } from "./RangeDatePopover/RangeDatePopover";
 export const datePickerRangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, name, autoComplete, // controlled
-    isDoubleCalendar = false, opened: outerOpened, value: outerValue, defaultFirstDate = '', defaultSecondDate = '', preserveInvalidOnBlur, // variations
+    isDoubleCalendar = false, isCalendarPositionedByInput = false, opened: outerOpened, value: outerValue, defaultFirstDate = '', defaultSecondDate = '', preserveInvalidOnBlur, // variations
     view, size, readOnly = false, disabled = false, appearance, hasClearDivider, stretched, firstValueError, secondValueError, firstValueSuccess, secondValueSuccess, firstValueEdited, secondValueEdited, // layout
     required, requiredPlacement = 'right', hasRequiredIndicator = false, label, titleCaption, leftHelper, contentLeft, contentRight, dividerVariant = 'dash', dividerIcon, firstPlaceholder, secondPlaceholder, firstTextfieldContentLeft, firstTextfieldContentRight, secondTextfieldContentLeft, secondTextfieldContentRight, firstTextfieldTextBefore, secondTextfieldTextBefore, firstTextfieldTextAfter, secondTextfieldTextAfter, // hint
     hintTrigger = 'hover', hintText, hintView = 'default', hintSize = 'm', hintTargetIcon, hintTargetPlacement = 'outer', hintPlacement = 'auto', hintHasArrow, hintOffset = [
@@ -35,6 +35,8 @@ export const datePickerRangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className
         const rootRef = useRef(null);
         const innerRefFirst = useRef(null);
         const innerRefSecond = useRef(null);
+        const firstTextfieldInputWrapperRef = useRef(null);
+        const secondTextfieldInputWrapperRef = useRef(null);
         const [firstInputRef, setFirstInputRef] = useState(rangeRef?.current?.firstTextField());
         const [secondInputRef, setSecondInputRef] = useState(rangeRef?.current?.secondTextField());
         const [isInnerOpen, setIsInnerOpen] = useState(false);
@@ -76,6 +78,8 @@ export const datePickerRangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className
         const inputSecondValue = endInitialValues.formattedDate;
         const fullDateEntered = Boolean(calendarFirstValue && calendarSecondValue);
         const [secondTextFieldClicked, setSecondTextFieldClicked] = useState(false);
+        const shouldPositionCalendarByInput = isCalendarPositionedByInput && !isDoubleCalendar;
+        const activeInputWrapperRef = secondTextFieldClicked ? secondTextfieldInputWrapperRef : firstTextfieldInputWrapperRef;
         const isSameMonth = Boolean(fullDateEntered && customDayjs(calendarFirstValue).isSame(calendarSecondValue, 'month'));
         let calendarFocusedDate = calendarFirstValue;
         if (secondTextFieldClicked && calendarSecondValue) {
@@ -319,7 +323,9 @@ export const datePickerRangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className
         const renderRange = (inputWrapperRef)=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(StyledRange, {
                 size: size,
                 ref: rangeRef,
-                inputWrapperRef: inputWrapperRef,
+                inputWrapperRef: shouldPositionCalendarByInput ? undefined : inputWrapperRef,
+                firstTextfieldInputWrapperRef: shouldPositionCalendarByInput ? firstTextfieldInputWrapperRef : undefined,
+                secondTextfieldInputWrapperRef: shouldPositionCalendarByInput ? secondTextfieldInputWrapperRef : undefined,
                 autoComplete: autoComplete,
                 dividerIcon: dividerIcon,
                 dividerVariant: dividerVariant,
@@ -458,6 +464,7 @@ export const datePickerRangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className
             ],
             calendarFocusedDate: calendarFocusedDate,
             target: renderRange,
+            referenceRef: shouldPositionCalendarByInput ? activeInputWrapperRef : undefined,
             opened: openedValue,
             includeEdgeDates: includeEdgeDates,
             eventTooltipOptions: eventTooltipOptions,

package/dist/emotion/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js

@@ -6,7 +6,7 @@ import { FloatingPopover } from "../../FloatingPopover";
 import { StyledCalendarContent } from "../../DatePickerBase.styles";
 import { getCalendarContainerSize, hasCustomCalendarContainerSize } from "../../utils";
 import { StyledCalendar, StyledCalendarDouble } from "./RangeDatePopover.styles";
-export const RangeDatePopover = ({ rootWrapper: Root, target, opened, isDoubleCalendar, calendarValue, calendarFocusedDate, min, max, renderFromDate, includeEdgeDates, eventTooltipOptions, eventList, disabledList, eventMonthList, disabledMonthList, eventQuarterList, disabledQuarterList, eventYearList, disabledYearList, frame = 'document', usePortal = false, zIndex, placement = [
+export const RangeDatePopover = ({ rootWrapper: Root, target, referenceRef, opened, isDoubleCalendar, calendarValue, calendarFocusedDate, min, max, renderFromDate, includeEdgeDates, eventTooltipOptions, eventList, disabledList, eventMonthList, disabledMonthList, eventQuarterList, disabledQuarterList, eventYearList, disabledYearList, frame = 'document', usePortal = false, zIndex, placement = [
     'top',
     'bottom'
 ], closeOnOverlayClick = true, closeOnEsc = true, offset, disableFlip, calendarContainerWidth, calendarContainerHeight, stretched, type = 'Days', size, lang = 'ru', disabled, readOnly, dateShortcuts, dateShortcutsPlacement = 'left', dateShortcutsWidth, onShortcutDateSelect, setIsInnerOpen, onChangeValue, onChangeStartOfRange, onChangeSingleValue, onChangeVisibleDate, onToggle })=>{
@@ -43,6 +43,7 @@ export const RangeDatePopover = ({ rootWrapper: Root, target, opened, isDoubleCa
             closeOnEsc: closeOnEsc,
             portal: usePortal ? frame : undefined,
             target: target,
+            referenceRef: referenceRef,
             innerWidth: calendarContainerWidthValue,
             innerHeight: calendarContainerHeightValue,
             stretchHeight: isCalendarHeightStretched
@@ -104,6 +105,7 @@ export const RangeDatePopover = ({ rootWrapper: Root, target, opened, isDoubleCa
         closeOnEsc: closeOnEsc,
         portal: usePortal ? frame : undefined,
         target: target,
+        referenceRef: referenceRef,
         innerWidth: calendarContainerWidthValue,
         innerHeight: calendarContainerHeightValue,
         stretchHeight: isCalendarHeightStretched

package/dist/emotion/es/components/DateTimePicker/DateTimePicker.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import cls from "classnames";
 import { useForkRef } from "../../hooks";
 import { getCalendarContainerSize } from "../DatePicker/utils";
@@ -14,6 +14,7 @@ import { CalendarGrid, DateShortcutList, Input, Popover, StyledSeparator, TimeGr
 import { classes } from "./DateTimePicker.tokens";
 import { useDateTimePicker } from "./hooks/useDateTimePicker";
 import { useKeyNavigation } from "./hooks/useKeyboardNavigation";
+import { getCalendarEdgeDates } from "./utils";
 // changes to start tests
 export const dateTimePickerRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, value: outerValue, defaultDate = '', // variation props
     size, view, readOnly = false, disabled = false, appearance, hasClearDivider, // popover props
@@ -35,6 +36,12 @@ export const dateTimePickerRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className,
         const calendarOverlayRef = useRef(null);
         const [isInnerOpen, setIsInnerOpen] = useState(false);
         const openedValue = outerOpened ?? isInnerOpen;
+        const { calendarMin, calendarMax } = useMemo(()=>getCalendarEdgeDates(min, max, type, includeEdgeDates), [
+            min,
+            max,
+            type,
+            includeEdgeDates
+        ]);
         const { format, dateVisibleValue, calendarGridValue, inputValue, timeVisibleValue, timeColumnsCount, errorClass, successClass, editedClass, handleChangeValue, handleSearch, handleBlur, handleCalendarPick, handleTimePick, updateExternalDate, isDateEqualEdge } = useDateTimePicker({
             inputRef,
             outerValue,
@@ -209,8 +216,8 @@ export const dateTimePickerRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className,
             disabledQuarterList: disabledQuarterList,
             eventYearList: eventYearList,
             disabledYearList: disabledYearList,
-            min: min,
-            max: max,
+            min: calendarMin,
+            max: calendarMax,
             renderFromDate: renderFromDate,
             includeEdgeDates: includeEdgeDates,
             lang: lang,

package/dist/emotion/es/components/DateTimePicker/utils/getCalendarEdgeDates.js

@@ -0,0 +1,28 @@
+const hasTime = (date)=>date.getHours() !== 0 || date.getMinutes() !== 0 || date.getSeconds() !== 0 || date.getMilliseconds() !== 0;
+/**
+ * Сдвигает min/max для календарной сетки, когда includeEdgeDates выключен:
+ * граничный день должен остаться кликабельным, время внутри него ограничит TimeGrid.
+ * max сдвигается только со временем: max в 00:00 не оставляет в дне ни одного
+ * валидного значения, тогда как min в 00:00 оставляет почти все сутки.
+ */ export const getCalendarEdgeDates = (min, max, type, includeEdgeDates)=>{
+    if (type !== 'Days' || includeEdgeDates) {
+        return {
+            calendarMin: min,
+            calendarMax: max
+        };
+    }
+    let calendarMin = min;
+    if (min) {
+        calendarMin = new Date(min);
+        calendarMin.setDate(calendarMin.getDate() - 1);
+    }
+    let calendarMax = max;
+    if (max && hasTime(max)) {
+        calendarMax = new Date(max);
+        calendarMax.setDate(calendarMax.getDate() + 1);
+    }
+    return {
+        calendarMin,
+        calendarMax
+    };
+};

package/dist/emotion/es/components/DateTimePicker/utils/index.js

@@ -1,2 +1,3 @@
 export * from "./getFormattedDateTime";
 export * from "./normalizeDateTime";
+export * from "./getCalendarEdgeDates";

package/dist/emotion/es/components/Drawer/Drawer.js

@@ -13,7 +13,7 @@ import { StyledPopup, StyledPanel } from "./Drawer.styles";
 import { getIdLastDrawer } from "./DrawerContext";
 import { useDrawer } from "./hooks";
 // issue #823
-export const drawerRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, zIndex, popupInfo, withBlur, children, view, size, width, height, isOpen, opened, initialFocusRef, focusAfterRef, animationInfo, className, customBackgroundColor, customContentBackgroundColor, onClose, onOverlayClick, onEscKeyDown, offset, frame, positionFixed = false, borderRadius = 'none', placement = 'right', closeOnEsc = true, closeOnOverlayClick = true, asModal = true, draggable, ...rest }, outerRef)=>{
+export const drawerRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, zIndex, popupInfo, withBlur, overlayProps, children, view, size, width, height, isOpen, opened, initialFocusRef, focusAfterRef, animationInfo, className, customBackgroundColor, customContentBackgroundColor, onClose, onOverlayClick, onEscKeyDown, offset, frame, positionFixed = false, borderRadius = 'none', placement = 'right', closeOnEsc = true, closeOnOverlayClick = true, asModal = true, draggable, ...rest }, outerRef)=>{
         const innerIsOpen = Boolean(isOpen || opened);
         const trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef);
         const popupController = usePopupContext();
@@ -23,6 +23,7 @@ export const drawerRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, zIndex, popupI
         const overlayBackgroundToken = withBlur ? `var(${tokens.drawerOverlayWithBlurColor})` : `var(${tokens.drawerOverlayColor})`;
         const innerWidth = width ? getSizeValueFromProp(width) : '100%';
         const innerHeight = height ? getSizeValueFromProp(height) : '100%';
+        const overlayPosition = overlayProps?.position ?? (frame === undefined || frame === 'document' ? 'fixed' : 'absolute');
         const placementClass = placement ? classes[`${placement}Placement`] : undefined;
         const { drawerInfo } = useDrawer({
             id: innerId,
@@ -73,7 +74,11 @@ export const drawerRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, zIndex, popupI
                 withBlur: withBlur,
                 transparent: transparent,
                 isClickable: closeOnOverlayClick,
-                onOverlayClick: onDrawerOverlayKeyDown
+                onOverlayClick: onDrawerOverlayKeyDown,
+                style: {
+                    ...overlayProps,
+                    position: overlayPosition
+                }
             })),
             ...rest
         }, /*#__PURE__*/ React.createElement(Root, {

package/dist/emotion/es/components/LinkButton/LinkButton.js

@@ -1,4 +1,6 @@
 import React, { forwardRef } from "react";
+import cls from "classnames";
+import { GRADIENT_TEXT_CLASS } from "../../utils/constants";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
@@ -47,7 +49,9 @@ export const linkButtonRoot = (Root)=>/*#__PURE__*/ forwardRef((props, ref)=>{
             }
         }, contentLeft && /*#__PURE__*/ React.createElement(StyledContentLeft, {
             hasContent: hasContent
-        }, contentLeft), txt ? /*#__PURE__*/ React.createElement(LinkButtonText, null, txt) : children, additionalContent && /*#__PURE__*/ React.createElement(StyledAdditionalContent, null, additionalContent), contentRight && /*#__PURE__*/ React.createElement(StyledContentRight, {
+        }, contentLeft), txt ? /*#__PURE__*/ React.createElement(LinkButtonText, {
+            className: cls(GRADIENT_TEXT_CLASS)
+        }, txt) : children, additionalContent && /*#__PURE__*/ React.createElement(StyledAdditionalContent, null, additionalContent), contentRight && /*#__PURE__*/ React.createElement(StyledContentRight, {
             hasContent: hasContent
         }, contentRight)), !disabled && isLoading && /*#__PURE__*/ React.createElement(Loader, null, loader || /*#__PURE__*/ React.createElement(StyledSpinner, null)));
     });

package/dist/emotion/es/components/Modal/Modal.js

@@ -16,10 +16,10 @@ const Popup = component(popupConfig);
 /**
  * Modal.
  * Управляет показом/скрытием, подложкой и анимацией визуальной части модального окна.
- */ export const modalRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, withAnimation, onClose, onOverlayClick, onEscKeyDown, closeOnEsc = true, closeOnOverlayClick = true, withBlur, isFocusTrapped = true, initialFocusRef, focusAfterRef, zIndex, popupInfo, children, view, opened, isOpen, hasBody, hasClose, resizable, draggable, overlay, ...rest }, outerRootRef)=>{
+ */ export const modalRoot = (Root)=>/*#__PURE__*/ forwardRef(({ id, withAnimation, onClose, onOverlayClick, onEscKeyDown, closeOnEsc = true, closeOnOverlayClick = true, withBlur, isFocusTrapped = true, initialFocusRef, focusAfterRef, focusTrapSelectors, zIndex, popupInfo, children, view, opened, isOpen, hasBody, hasClose, resizable, draggable, overlay, ...rest }, outerRootRef)=>{
         const innerIsOpen = Boolean(isOpen || opened);
         const innerHasClose = hasClose === undefined && hasBody || hasClose;
-        const trapRef = useFocusTrap(isFocusTrapped, initialFocusRef, focusAfterRef, true, !isFocusTrapped);
+        const trapRef = useFocusTrap(isFocusTrapped, initialFocusRef, focusAfterRef, true, !isFocusTrapped, focusTrapSelectors);
         const popupController = usePopupContext();
         const innerRef = useForkRef(trapRef, outerRootRef);
         const uniqId = safeUseId();

package/dist/emotion/es/components/Notification/NotificationsContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+export const NotificationsContext = createContext(null);
+export const useNotifications = ()=>{
+    const context = useContext(NotificationsContext);
+    if (!context) {
+        throw new Error('useNotifications must be used within a NotificationsProvider');
+    }
+    return context;
+};

package/dist/emotion/es/components/Notification/NotificationsPortal.js

@@ -4,19 +4,20 @@ import styled from "@emotion/styled";
 import { component } from "../../engines";
 import { cx } from "../../utils";
 import { PopupProvider, popupConfig, popupClasses } from "../Popup";
-import { closeNotification } from "./NotificationsStore";
+import { useNotifications } from "./NotificationsContext";
 import { StyledItemWrapper, StyledRoot } from "./Notification.styles";
 import { classes } from "./Notification.tokens";
 // issue #823
 const Popup = component(popupConfig);
 const StyledPopup = /*#__PURE__*/ styled(Popup, {
-    target: "el7fuu0",
+    target: "e11fxyis0",
     label: "StyledPopup"
 })("& > .", popupClasses.root, "{overflow:hidden;}");
 /**
  * Обертка для визуального представления уведомлений.
  */ export const NotificationsPortal = ({ config, frame, placement = 'bottom-right', UNSAFE_SSR_ENABLED, className })=>{
     const { notifications } = useStoreon('notifications');
+    const { closeNotification } = useNotifications();
     const Notification = useMemo(()=>component(config), []);
     const hasLeftAnimationClass = [
         'left',

package/dist/emotion/es/components/Notification/NotificationsProvider.js

@@ -1,15 +1,52 @@
-import React from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { StoreContext } from "storeon/react";
-import { NotificationsStore } from "./NotificationsStore";
+import { NotificationsContext } from "./NotificationsContext";
+import { createNotificationsApi, createNotificationsStore, GlobalNotificationsApi, NotificationsStore } from "./NotificationsStore";
 import { NotificationsPortal } from "./NotificationsPortal";
+// Глобальные addNotification/closeNotification работают с одним модульным NotificationsStore.
+// Поэтому среди всех смонтированных NotificationsProvider только один должен отображать его портал,
+// иначе одна глобальная нотификация будет отрисована по количеству провайдеров на странице.
+const globalPortalSubscribers = new Set();
+const updateGlobalPortalProvider = ()=>{
+    const activeSubscriber = globalPortalSubscribers.values().next().value;
+    globalPortalSubscribers.forEach((subscriber)=>{
+        subscriber(subscriber === activeSubscriber);
+    });
+};
+const subscribeGlobalPortalProvider = (subscriber)=>{
+    globalPortalSubscribers.add(subscriber);
+    updateGlobalPortalProvider();
+    return ()=>{
+        globalPortalSubscribers.delete(subscriber);
+        updateGlobalPortalProvider();
+    };
+};
 export const NotificationsProvider = ({ children, config, frame, placement, UNSAFE_SSR_ENABLED, className })=>{
-    return /*#__PURE__*/ React.createElement(StoreContext.Provider, {
-        value: NotificationsStore
+    const [store] = useState(createNotificationsStore);
+    const notificationsApi = useMemo(()=>createNotificationsApi(store), [
+        store
+    ]);
+    const [isGlobalPortalActive, setIsGlobalPortalActive] = useState(false);
+    useEffect(()=>subscribeGlobalPortalProvider(setIsGlobalPortalActive), []);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(NotificationsContext.Provider, {
+        value: notificationsApi
+    }, /*#__PURE__*/ React.createElement(StoreContext.Provider, {
+        value: store
     }, children, /*#__PURE__*/ React.createElement(NotificationsPortal, {
         frame: frame,
         placement: placement,
         config: config,
         UNSAFE_SSR_ENABLED: UNSAFE_SSR_ENABLED,
         className: className
-    }));
+    }))), isGlobalPortalActive && /*#__PURE__*/ React.createElement(NotificationsContext.Provider, {
+        value: GlobalNotificationsApi
+    }, /*#__PURE__*/ React.createElement(StoreContext.Provider, {
+        value: NotificationsStore
+    }, /*#__PURE__*/ React.createElement(NotificationsPortal, {
+        frame: frame,
+        placement: placement,
+        config: config,
+        UNSAFE_SSR_ENABLED: UNSAFE_SSR_ENABLED,
+        className: className
+    }))));
 };

package/dist/emotion/es/components/Notification/NotificationsStore.js

@@ -1,45 +1,47 @@
 import { createStoreon } from "storeon";
 /**
  * Создает хранилище с ключом `notifications` к массиву с окнами.
- */ export const NotificationsStore = createStoreon([
-    (store)=>{
-        store.on('@init', ()=>({
-                notifications: []
-            }));
-        store.on('add', ({ notifications }, notif)=>{
-            return {
-                notifications: notifications.concat([
-                    notif
-                ])
-            };
-        });
-        store.on('hide', ({ notifications }, id)=>{
-            return {
-                notifications: notifications.map((notif)=>id === notif.id ? {
-                        ...notif,
-                        isHidden: true
-                    } : notif)
-            };
-        });
-        store.on('remove', ({ notifications }, id)=>{
-            return {
-                notifications: notifications.filter((notif)=>id !== notif.id)
-            };
-        });
-    }
-]);
-export const closeNotification = (id, delay = 380)=>{
-    const { dispatch } = NotificationsStore;
+ */ export const createNotificationsStore = ()=>createStoreon([
+        (store)=>{
+            store.on('@init', ()=>({
+                    notifications: []
+                }));
+            store.on('add', ({ notifications }, notif)=>{
+                return {
+                    notifications: notifications.concat([
+                        notif
+                    ])
+                };
+            });
+            store.on('hide', ({ notifications }, id)=>{
+                return {
+                    notifications: notifications.map((notif)=>id === notif.id ? {
+                            ...notif,
+                            isHidden: true
+                        } : notif)
+                };
+            });
+            store.on('remove', ({ notifications }, id)=>{
+                return {
+                    notifications: notifications.filter((notif)=>id !== notif.id)
+                };
+            });
+        }
+    ]);
+export const NotificationsStore = createNotificationsStore();
+let notificationIdCounter = 0;
+const createNotificationId = ()=>{
+    notificationIdCounter += 1;
+    return `plasma-notification-${Date.now()}-${notificationIdCounter}`;
+};
+const closeNotificationInStore = (store, id, delay = 380)=>{
+    const { dispatch } = store;
     dispatch('hide', id);
     setTimeout(()=>dispatch('remove', id), delay);
 };
-/**
- * Открыть новое оповещение.
- * @param props Пропсы всплывающего оповещения
- * @return Идентификатор нового оповещения
- */ export function addNotification({ id: externalId, onTimeoutClose, ...rest }, timeout = 2000) {
-    const id = externalId || `plasma-notification-${Date.now()}`;
-    const { dispatch, get } = NotificationsStore;
+const addNotificationToStore = (store, { id: externalId, onTimeoutClose, ...rest }, timeout = 2000)=>{
+    const id = externalId || createNotificationId();
+    const { dispatch, get } = store;
     dispatch('add', {
         ...rest,
         id,
@@ -53,9 +55,20 @@ export const closeNotification = (id, delay = 380)=>{
             if (!notification) {
                 return;
             }
-            closeNotification(id);
+            closeNotificationInStore(store, id);
             onTimeoutClose?.();
         }, timeout);
     }
     return id;
-}
+};
+export const createNotificationsApi = (store)=>({
+        addNotification: (props, timeout = 2000)=>addNotificationToStore(store, props, timeout),
+        closeNotification: (id, delay = 380)=>closeNotificationInStore(store, id, delay)
+    });
+export const GlobalNotificationsApi = createNotificationsApi(NotificationsStore);
+export const closeNotification = (id, delay = 380)=>closeNotificationInStore(NotificationsStore, id, delay);
+/**
+ * Открыть новое оповещение.
+ * @param props Пропсы всплывающего оповещения
+ * @return Идентификатор нового оповещения
+ */ export const addNotification = (props, timeout = 2000)=>addNotificationToStore(NotificationsStore, props, timeout);

package/dist/emotion/es/components/Notification/index.js

@@ -1,4 +1,5 @@
 export { NotificationsProvider } from "./NotificationsProvider";
 export { notificationRoot, notificationConfig } from "./Notification";
 export { addNotification, closeNotification } from "./NotificationsStore";
+export { useNotifications } from "./NotificationsContext";
 export { classes as notificationClasses, tokens as notificationTokens } from "./Notification.tokens";

package/dist/emotion/es/components/Range/Range.js

@@ -19,7 +19,7 @@ export const rangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, // contr
         0
     ], hintWidth, hintContentLeft, // layout
     label, leftHelper, titleCaption, contentLeft, contentRight, firstTextfieldContentLeft, firstTextfieldContentRight, secondTextfieldContentLeft, secondTextfieldContentRight, firstTextfieldTextBefore, secondTextfieldTextBefore, firstTextfieldTextAfter, secondTextfieldTextAfter, dividerVariant = 'dash', dividerIcon, autoComplete, onChangeFirstValue, onChangeSecondValue, onSearchFirstValue, onSearchSecondValue, onFocusFirstTextfield, onFocusSecondTextfield, onBlurFirstTextfield, onBlurSecondTextfield, ...rest }, ref)=>{
-        const { inputWrapperRef, ...rootProps } = rest;
+        const { inputWrapperRef, firstTextfieldInputWrapperRef, secondTextfieldInputWrapperRef, ...rootProps } = rest;
         const rangeRef = useRef(null);
         const firstTextFieldRef = useRef(null);
         const secondTextFieldRef = useRef(null);
@@ -131,6 +131,7 @@ export const rangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, // contr
             className: cx(clearClass, clearDividerClass, rangeErrorClass, rangeSuccessClass, rangeEditedClass)
         }, contentLeft && /*#__PURE__*/ React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/ React.createElement(StyledInput, {
             ref: firstTextFieldRef,
+            inputWrapperRef: firstTextfieldInputWrapperRef,
             className: cx(firstValueErrorClass, firstValueSuccessClass, firstValueEditedClass),
             value: firstValue,
             readOnly: readOnly,
@@ -150,6 +151,7 @@ export const rangeRoot = (Root)=>/*#__PURE__*/ forwardRef(({ className, // contr
             hasDivider: hasClearDivider
         }), Divider, /*#__PURE__*/ React.createElement(StyledInput, {
             ref: secondTextFieldRef,
+            inputWrapperRef: secondTextfieldInputWrapperRef,
             className: cx(secondValueErrorClass, secondValueSuccessClass, secondValueEditedClass),
             value: secondValue,
             readOnly: readOnly,

package/dist/emotion/es/components/Slider/Slider.tokens.js

@@ -54,9 +54,8 @@ export const tokens = {
     valueLineHeight: '--plasma-slider-value-line-height',
     doubleWrapperGap: '--plasma-slider-double-wrapper-gap',
     doubleBoxShadow: '--plasma-slider-double-box-shadow',
-    thumbSize: '--plasma-slider-thumb-size',
+    thumbWidth: '--plasma-slider-thumb-width',
     thumbHeight: '--plasma-slider-thumb-height',
-    thumbBorderStyle: '--plasma-slider-thumb-border-style',
     thumbBorderWidth: '--plasma-slider-thumb-border-width',
     thumbBorderRadius: '--plasma-slider-thumb-border-radius',
     thumbBorderColor: '--plasma-slider-thumb-border-color',