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

package/dist/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.js

@@ -2,9 +2,12 @@ import React, { useState, useRef, forwardRef, useEffect } from "react";
 import { convertRoundnessMatrix } from "../../../../utils/roundness";
 import { classes, privateTokens, tokens } from "../../Accordion.tokens";
 import { cx } from "../../../../utils";
-import { StyledAccordionItem, StyledAccordionHeader, StyledAccordionBody, StyledAccordionTitle, StyledAccordionContentLeft, StyledAccordionHeaderLeft, StyledAccordionContentRight, StyledArrow, StyledMinus, StyledPlus, StyledAccordionBodyAnimate } from "./AccordionItem.styles";
-export const AccordionItem = /*#__PURE__*/ forwardRef(({ value, contentRight, contentLeft, title, pin = 'square-square', children, type = 'sign', index, className, style, eventKey, disabled, alignWithTitle = true, opened, view, onChange, onClick, titleProps, bodyProps, ...rest }, outerRef)=>{
+import { StyledAccordionItem, StyledAccordionHeader, StyledAccordionBody, StyledAccordionTitle, StyledAccordionContentLeft, StyledAccordionHeaderLeft, StyledAccordionContentRight, StyledArrow, StyledChevron, StyledMinus, StyledPlus, StyledAccordionBodyAnimate } from "./AccordionItem.styles";
+export const AccordionItem = /*#__PURE__*/ forwardRef(({ value, contentRight, contentLeft, defaultIconContent, defaultIconPlacement, title, pin = 'square-square', children, type, index, className, style, eventKey, disabled, alignWithTitle = true, opened, view, onChange, onClick, titleProps, bodyProps, ...rest }, outerRef)=>{
     const key = eventKey ?? index ?? 0;
+    const resolvedDefaultIconContent = defaultIconContent ?? type ?? 'sign';
+    const resolvedDefaultIconPlacement = defaultIconPlacement ?? (defaultIconContent === undefined && type === 'arrow' ? 'left' : 'right');
+    const openedState = opened ?? value;
     const [leftPadding, setLeftPadding] = useState();
     const handleOpen = ()=>{
         if (disabled) {
@@ -23,12 +26,15 @@ export const AccordionItem = /*#__PURE__*/ forwardRef(({ value, contentRight, co
         const leftPaddingBody = leftContentWidth && (alignWithTitle || view === 'clear') ? `calc(${leftContentWidth}px + var(${tokens.accordionItemGap}))` : 0;
         setLeftPadding(leftPaddingBody);
     }, [
-        value,
+        alignWithTitle,
+        contentLeft,
+        defaultIconContent,
+        defaultIconPlacement,
         type,
-        leftContentRef,
-        setLeftPadding
+        value,
+        view
     ]);
-    const openedBodyClass = opened ?? value ? classes.accordionItemShowBody : undefined;
+    const openedBodyClass = openedState ? classes.accordionItemShowBody : undefined;
     const StyledAnimationPlus = ()=>/*#__PURE__*/ React.createElement(StyledPlus, null, /*#__PURE__*/ React.createElement(StyledMinus, {
             size: "xs",
             color: "inherit",
@@ -40,16 +46,46 @@ export const AccordionItem = /*#__PURE__*/ forwardRef(({ value, contentRight, co
             sizeCustomProperty: tokens.accordionItemIconSize
         }));
     const accordionBorderRadius = convertRoundnessMatrix(pin, `var(${tokens.accordionItemViewBorderRadius}, var(${tokens.accordionItemBorderRadius}))`, '1.5rem');
-    const openedClass = opened ?? value ? classes.accordionItemOpened : '';
+    const openedClass = openedState ? classes.accordionItemOpened : '';
     const disabledClass = disabled ? classes.accordionDisabled : '';
-    const leftContent = contentLeft ?? (type === 'arrow' ? /*#__PURE__*/ React.createElement(StyledArrow, {
-        size: "xs",
-        color: "inherit",
-        sizeCustomProperty: tokens.accordionItemIconSize
-    }) : undefined);
-    const leftContentRotate = type === 'arrow' && (opened ?? value) ? classes.accordionItemShowBody : undefined;
-    const rightContent = contentRight ?? (type === 'sign' ? /*#__PURE__*/ React.createElement(StyledAnimationPlus, null) : undefined);
-    const rightContentRotate = type === 'sign' && (opened ?? value) ? classes.accordionItemShowBody : undefined;
+    const getDefaultIcon = ()=>{
+        switch(resolvedDefaultIconContent){
+            case 'arrow':
+                return /*#__PURE__*/ React.createElement(StyledArrow, {
+                    size: "xs",
+                    color: "inherit",
+                    sizeCustomProperty: tokens.accordionItemIconSize
+                });
+            case 'chevron':
+                return /*#__PURE__*/ React.createElement(StyledChevron, {
+                    size: "xs",
+                    color: "inherit",
+                    sizeCustomProperty: tokens.accordionItemIconSize
+                });
+            case 'sign':
+                return /*#__PURE__*/ React.createElement(StyledAnimationPlus, null);
+            default:
+                return undefined;
+        }
+    };
+    const defaultIcon = getDefaultIcon();
+    let defaultIconAnimationClass;
+    if (resolvedDefaultIconContent === 'sign') {
+        defaultIconAnimationClass = classes.accordionSignAnimation;
+    } else if (resolvedDefaultIconContent === 'arrow' || resolvedDefaultIconContent === 'chevron') {
+        defaultIconAnimationClass = classes.accordionArrowAnimation;
+    }
+    const defaultLeftContent = resolvedDefaultIconPlacement === 'left' ? defaultIcon : undefined;
+    const defaultRightContent = resolvedDefaultIconPlacement === 'right' ? defaultIcon : undefined;
+    const leftContent = contentLeft !== undefined ? contentLeft : defaultLeftContent;
+    const leftContentClassName = contentLeft === undefined ? cx(defaultIconAnimationClass, openedBodyClass) : undefined;
+    const rightContentClassName = cx(defaultIconAnimationClass, openedBodyClass);
+    let renderedRightContent = contentRight;
+    if (contentRight === undefined && defaultRightContent) {
+        renderedRightContent = /*#__PURE__*/ React.createElement(StyledAccordionContentRight, {
+            className: rightContentClassName
+        }, defaultRightContent);
+    }
     return /*#__PURE__*/ React.createElement(StyledAccordionItem, {
         className: cx(classes.accordionItem, className, openedClass, disabledClass),
         key: key,
@@ -68,7 +104,7 @@ export const AccordionItem = /*#__PURE__*/ forwardRef(({ value, contentRight, co
         },
         tabIndex: 0,
         onClick: handleOpen,
-        "aria-expanded": opened ?? value,
+        "aria-expanded": openedState,
         "aria-controls": `accordion-item-section${key}`,
         id: `accordion-item-${key}`,
         style: {
@@ -76,12 +112,10 @@ export const AccordionItem = /*#__PURE__*/ forwardRef(({ value, contentRight, co
         }
     }, /*#__PURE__*/ React.createElement(StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/ React.createElement(StyledAccordionContentLeft, {
         ref: leftContentRef,
-        className: leftContentRotate
-    }, leftContent), /*#__PURE__*/ React.createElement(StyledAccordionTitle, titleProps, title)), contentRight || rightContent && /*#__PURE__*/ React.createElement(StyledAccordionContentRight, {
-        className: rightContentRotate
-    }, rightContent && rightContent)), /*#__PURE__*/ React.createElement(StyledAccordionBodyAnimate, {
+        className: leftContentClassName
+    }, leftContent), /*#__PURE__*/ React.createElement(StyledAccordionTitle, titleProps, title)), renderedRightContent), /*#__PURE__*/ React.createElement(StyledAccordionBodyAnimate, {
         "aria-labelledby": `accordion-item-${key}`,
-        "aria-hidden": !(opened ?? value),
+        "aria-hidden": !openedState,
         id: `accordion-item-section${key}`,
         className: cx(openedBodyClass),
         style: {

package/dist/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js

@@ -1,10 +1,10 @@
 import styled from "styled-components";
 import { addFocus } from "../../../../mixins";
-import { IconChevronDownFill, IconMinus } from "../../../_Icon";
+import { IconChevronDown, IconChevronDownFill, IconMinus } from "../../../_Icon";
 import { classes, privateTokens, tokens } from "../../Accordion.tokens";
 export const StyledAccordionHeader = styled.div.withConfig({
     displayName: "AccordionItem.styles__StyledAccordionHeader",
-    componentId: "sc-95f3f5c2-0"
+    componentId: "sc-7c6fa1b4-0"
 })([
     `width:100%;border:none;padding:var(`,
     `);display:flex;gap:var(`,
@@ -18,29 +18,37 @@ export const StyledAccordionHeader = styled.div.withConfig({
 }));
 export const StyledAccordionHeaderLeft = styled.div.withConfig({
     displayName: "AccordionItem.styles__StyledAccordionHeaderLeft",
-    componentId: "sc-95f3f5c2-1"
+    componentId: "sc-7c6fa1b4-1"
 })([
     `display:flex;gap:var(`,
     `,var(`,
     `));justify-content:space-between;align-items:center;`
 ], tokens.accordionItemHeaderLeftGap, tokens.accordionItemGap);
-export const StyledAccordionContentRight = styled.div.withConfig({
+const StyledAccordionContent = styled.div.withConfig({
+    displayName: "AccordionItem.styles__StyledAccordionContent",
+    componentId: "sc-7c6fa1b4-2"
+})([
+    `transition:0.2s;display:flex;align-items:center;&.`,
+    `.`,
+    `{transition:0.2s;transform:rotate(180deg);}&.`,
+    `{transform:rotate(90deg);&.`,
+    `{transition:0.2s;transform:rotate(0deg);}}`
+], classes.accordionArrowAnimation, classes.accordionItemShowBody, classes.accordionSignAnimation, classes.accordionItemShowBody);
+export const StyledAccordionContentRight = styled(StyledAccordionContent).withConfig({
     displayName: "AccordionItem.styles__StyledAccordionContentRight",
-    componentId: "sc-95f3f5c2-2"
+    componentId: "sc-7c6fa1b4-3"
 })([
-    `transition:0.2s;transform:rotate(90deg);&.`,
-    `{transition:0.2s;transform:rotate(0deg);}`
-], classes.accordionItemShowBody);
-export const StyledAccordionContentLeft = styled.div.withConfig({
+    ``
+]);
+export const StyledAccordionContentLeft = styled(StyledAccordionContent).withConfig({
     displayName: "AccordionItem.styles__StyledAccordionContentLeft",
-    componentId: "sc-95f3f5c2-3"
+    componentId: "sc-7c6fa1b4-4"
 })([
-    `transition:0.2s;display:flex;align-items:center;&.`,
-    `{transition:0.2s;transform:rotate(180deg);}`
-], classes.accordionItemShowBody);
+    ``
+]);
 export const StyledAccordionTitle = styled.div.withConfig({
     displayName: "AccordionItem.styles__StyledAccordionTitle",
-    componentId: "sc-95f3f5c2-4"
+    componentId: "sc-7c6fa1b4-5"
 })([
     `color:var(`,
     `);font-family:var(`,
@@ -53,7 +61,7 @@ export const StyledAccordionTitle = styled.div.withConfig({
 ], tokens.accordionItemTitleColor, tokens.accordionItemTitleFontFamily, tokens.accordionItemTitleFontSize, tokens.accordionItemTitleFontWeight, tokens.accordionItemTitleFontStyle, tokens.accordionItemTitleLetterSpacing, tokens.accordionItemTitleLineHeight);
 export const StyledAccordionBodyAnimate = styled.div.withConfig({
     displayName: "AccordionItem.styles__StyledAccordionBodyAnimate",
-    componentId: "sc-95f3f5c2-5"
+    componentId: "sc-7c6fa1b4-6"
 })([
     `display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.2s ease-out;overflow:hidden;&.`,
     `{grid-template-rows:1fr;padding-bottom:var(`,
@@ -63,7 +71,7 @@ export const StyledAccordionBodyAnimate = styled.div.withConfig({
 ], classes.accordionItemShowBody, tokens.accordionItemBodyPaddingBottom, tokens.accordionItemPaddingVertical, classes.accordionPlusAnimationElement);
 export const StyledAccordionBody = styled.div.withConfig({
     displayName: "AccordionItem.styles__StyledAccordionBody",
-    componentId: "sc-95f3f5c2-6"
+    componentId: "sc-7c6fa1b4-7"
 })([
     `color:var(`,
     `);font-family:var(`,
@@ -78,14 +86,21 @@ export const StyledAccordionBody = styled.div.withConfig({
 ], tokens.accordionItemTextColor, tokens.accordionItemTextFontFamily, tokens.accordionItemTextFontSize, tokens.accordionItemTextFontWeight, tokens.accordionItemTextFontStyle, tokens.accordionItemTextLetterSpacing, tokens.accordionItemTextLineHeight, tokens.accordionItemPaddingHorizontal, tokens.accordionItemPaddingHorizontalLeft);
 export const StyledArrow = styled(IconChevronDownFill).withConfig({
     displayName: "AccordionItem.styles__StyledArrow",
-    componentId: "sc-95f3f5c2-7"
+    componentId: "sc-7c6fa1b4-8"
+})([
+    `pointer-events:none;user-select:none;color:var(`,
+    `);`
+], tokens.accordionItemIconColor);
+export const StyledChevron = styled(IconChevronDown).withConfig({
+    displayName: "AccordionItem.styles__StyledChevron",
+    componentId: "sc-7c6fa1b4-9"
 })([
     `pointer-events:none;user-select:none;color:var(`,
     `);`
 ], tokens.accordionItemIconColor);
 export const StyledMinus = styled(IconMinus).withConfig({
     displayName: "AccordionItem.styles__StyledMinus",
-    componentId: "sc-95f3f5c2-8"
+    componentId: "sc-7c6fa1b4-10"
 })([
     `pointer-events:none;user-select:none;color:var(`,
     `);display:flex;align-items:center;position:absolute;top:0;left:0;&.`,
@@ -96,7 +111,7 @@ export const StyledMinus = styled(IconMinus).withConfig({
 ], tokens.accordionItemIconColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody, tokens.accordionItemOpenedTitleColor, tokens.accordionItemIconColor);
 export const StyledPlus = styled.div.withConfig({
     displayName: "AccordionItem.styles__StyledPlus",
-    componentId: "sc-95f3f5c2-9"
+    componentId: "sc-7c6fa1b4-11"
 })([
     `position:relative;display:flex;align-items:center;justify-content:center;width:var(`,
     `,1rem);height:var(`,
@@ -104,7 +119,7 @@ export const StyledPlus = styled.div.withConfig({
 ], tokens.accordionItemIconSize, tokens.accordionItemIconSize);
 export const StyledAccordionItem = styled.div.withConfig({
     displayName: "AccordionItem.styles__StyledAccordionItem",
-    componentId: "sc-95f3f5c2-10"
+    componentId: "sc-7c6fa1b4-12"
 })([
     `background:var(`,
     `);border:var(`,
@@ -124,5 +139,8 @@ export const StyledAccordionItem = styled.div.withConfig({
     `));}`,
     `{color:var(`,
     `,var(`,
+    `));}`,
+    `{color:var(`,
+    `,var(`,
     `));}}`
-], tokens.accordionItemBackground, tokens.accordionItemBorder, tokens.accordionItemBorderBottom, tokens.accordionItemShadow, tokens.accordionItemBorder, classes.accordionDisabled, classes.accordionItemOpened, tokens.accordionItemBackgroundHover, tokens.accordionItemBackground, classes.accordionItemOpened, tokens.accordionItemOpenedBackground, tokens.accordionItemBackground, StyledArrow, tokens.accordionItemOpenedTitleColor, tokens.accordionItemIconColor, StyledAccordionTitle, tokens.accordionItemOpenedTitleColor, tokens.accordionItemTitleColor);
+], tokens.accordionItemBackground, tokens.accordionItemBorder, tokens.accordionItemBorderBottom, tokens.accordionItemShadow, tokens.accordionItemBorder, classes.accordionDisabled, classes.accordionItemOpened, tokens.accordionItemBackgroundHover, tokens.accordionItemBackground, classes.accordionItemOpened, tokens.accordionItemOpenedBackground, tokens.accordionItemBackground, StyledArrow, tokens.accordionItemOpenedTitleColor, tokens.accordionItemIconColor, StyledChevron, tokens.accordionItemOpenedTitleColor, tokens.accordionItemIconColor, StyledAccordionTitle, tokens.accordionItemOpenedTitleColor, tokens.accordionItemTitleColor);

package/dist/styled-components/es/components/Calendar/CalendarBase/CalendarBase.js

@@ -41,7 +41,7 @@ import { IsOutOfRange, StyledCalendar } from "./CalendarBase.styles";
             min.setHours(0, 0, 0, 0);
         }
         if (max) {
-            max.setHours(23, 59, 59, 999);
+            max.setHours(0, 0, 0, 0);
         }
         const renderFrom = renderFromDate && new Date(renderFromDate);
         const [state, dispatch] = useReducer(reducer, getInitialState(value, min, renderFrom, type));

package/dist/styled-components/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/styled-components/es/components/Calendar/ui/DateStructureItem/DateStructureItem.styles.js

@@ -25,7 +25,7 @@ const sideInRange = ()=>`
 `;
 export const StyledItem = styled.div.withConfig({
     displayName: "DateStructureItem.styles__StyledItem",
-    componentId: "sc-74a7c0c6-0"
+    componentId: "sc-8520fce9-0"
 })([
     `border-radius:calc(var(`,
     `) - 0.125rem);`,
@@ -48,7 +48,7 @@ const disabledCurrentItem = ()=>`
 `;
 export const StyledItemRoot = styled.div.withConfig({
     displayName: "DateStructureItem.styles__StyledItemRoot",
-    componentId: "sc-74a7c0c6-1"
+    componentId: "sc-8520fce9-1"
 })([
     `font-family:var(`,
     `);font-size:var(`,
@@ -66,6 +66,7 @@ export const StyledItemRoot = styled.div.withConfig({
     `{`,
     `;}}&.`,
     `:not(.`,
+    `):not(.`,
     `){`,
     `;}&.`,
     `{color:var(`,
@@ -103,21 +104,21 @@ export const StyledItemRoot = styled.div.withConfig({
     outlineOffset: '0.1875rem',
     outlineColor: `var(${tokens.calendarOutlineFocusColor})`,
     outlineRadius: `var(${innerTokens.dateStructureBorderRadius})`
-}), classes.dayInCurrentMonth, classes.disabled, addActive({
+}), classes.dayInCurrentMonth, classes.disabled, classes.disabledCurrent, addActive({
     activeBackground: `var(${tokens.calendarActiveItemBackground})`,
     activeColor: `var(${tokens.calendarActiveItemColor})`,
     activeFontWeight: `var(${innerTokens.dateStructureSelectedFontWeight})`
 }), classes.dayOfWeek, tokens.calendarDayOfWeekColor, classes.disabled, ({ isDayInCurrentMonth })=>isDayInCurrentMonth ? `var(${tokens.calendarContentPrimaryDisabledColor})` : `var(${tokens.calendarContentSecondaryDisabledColor})`, disabledItem(), classes.disabledCurrent, ({ isDayInCurrentMonth })=>isDayInCurrentMonth ? `var(${tokens.calendarContentPrimaryDisabledColor})` : `var(${tokens.calendarContentSecondaryDisabledColor})`, disabledCurrentItem(), classes.currentItem, classes.inRange, classes.sideRight, classes.sideLeft, popoverClasses.wrapper, popoverClasses.targetAsRef);
 export const StyledEvents = styled.div.withConfig({
     displayName: "DateStructureItem.styles__StyledEvents",
-    componentId: "sc-74a7c0c6-2"
+    componentId: "sc-8520fce9-2"
 })([
     `display:flex;position:absolute;bottom:var(`,
     `,0.25rem);`
 ], tokens.calendarEventItemBottom);
 export const StyledEvent = styled.div.withConfig({
     displayName: "DateStructureItem.styles__StyledEvent",
-    componentId: "sc-74a7c0c6-3"
+    componentId: "sc-8520fce9-3"
 })([
     `margin:0 0.063rem;width:0.188rem;height:0.188rem;border-radius:50%;background-color:`,
     `;`

package/dist/styled-components/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/styled-components/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/styled-components/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/styled-components/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/styled-components/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/styled-components/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/styled-components/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/styled-components/es/components/DateTimePicker/utils/index.js

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

package/dist/styled-components/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/styled-components/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/styled-components/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/styled-components/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;
+};