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

package/dist/css/es/index.js

@@ -14,6 +14,7 @@ export { applySkeletonPulseGradient, applySkeletonShimmerGradient, getSkeletonCo
 export { applyHidden } from './mixins/applyHidden.js';
 export { createApplyPaperMixin } from './mixins/createApplyPaperMixin.js';
 export { addScrollbar } from './mixins/addScrollbar.js';
+export { applySliderThumb, applySliderThumbFocus } from './mixins/applySliderThumb.js';
 export { component, mergeConfig } from './engines/common.js';
 export { getResponsiveCSS } from './engines/utils.js';
 export { useUniqId } from './hooks/useUniqId.js';
@@ -129,6 +130,7 @@ export { classes as modalClasses, tokens as modalTokens } from './components/Mod
 export { NotificationsProvider } from './components/Notification/NotificationsProvider.js';
 export { notificationConfig, notificationRoot } from './components/Notification/Notification.js';
 export { addNotification, closeNotification } from './components/Notification/NotificationsStore.js';
+export { useNotifications } from './components/Notification/NotificationsContext.js';
 export { classes as notificationClasses, tokens as notificationTokens } from './components/Notification/Notification.tokens.js';
 export { drawerConfig, drawerRoot } from './components/Drawer/Drawer.js';
 export { classes as drawerClasses, tokens as drawerTokens } from './components/Drawer/Drawer.tokens.js';

package/dist/css/es/mixins/applySliderThumb.js

@@ -0,0 +1,28 @@
+/**
+ * Слои фона бегунка. Порядок: содержимое, заливка по padding-box, рамка по border-box.
+ */
+var thumbLayers = function thumbLayers(tokens, borderColorToken, innerContent) {
+  return "\n    background: ".concat(innerContent, " no-repeat center,\n        linear-gradient(var(").concat(tokens.background, ", transparent), var(").concat(tokens.background, ", transparent)) padding-box,\n        var(").concat(borderColorToken, ", transparent) border-box;\n");
+};
+
+/**
+ * Миксин бегунка слайдера.
+ *
+ * Рамка рисуется слоем фона по border-box, а не через box-shadow: так её толщина может быть
+ * асимметричной, форма — эллиптической, а внутрь бегунка можно положить содержимое (innerContent).
+ *
+ * В обычном состоянии innerContent не показывается — только в hover/active/focus,
+ * см. applySliderThumbFocus.
+ */
+var applySliderThumb = function applySliderThumb(tokens) {
+  return "\n    box-sizing: content-box;\n    width: var(".concat(tokens.width, ");\n    height: var(").concat(tokens.height, ", var(").concat(tokens.width, "));\n    border-radius: var(").concat(tokens.borderRadius, ", 50%);\n    cursor: grab;\n\n    border-style: solid;\n    border-color: transparent;\n    border-width: var(").concat(tokens.borderWidth, ", 0);\n\n    transition: background-color 0.1s ease-in-out, background-image 0.1s ease-in-out;\n\n    ").concat(thumbLayers(tokens, tokens.borderColor, 'none'), "\n");
+};
+
+/**
+ * Состояния hover/active/focus бегунка: меняется цвет рамки и показывается innerContent.
+ */
+var applySliderThumbFocus = function applySliderThumbFocus(tokens) {
+  return thumbLayers(tokens, tokens.focusBorderColor, "var(".concat(tokens.innerContent, ", none)"));
+};
+
+export { applySliderThumb, applySliderThumbFocus };

package/dist/css/es/utils/focusManager.js

@@ -1,5 +1,5 @@
 import { createClass as _createClass, classCallCheck as _classCallCheck, defineProperty as _defineProperty } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { findTabbableDescendants } from './tabbable.js';
+import { isElementInFocusScope, findTabbableInFocusScope } from './focusScope.js';
 
 /**
  *  Менеджер фокуса при открытии и закрытии нод при использовании focus-trap.
@@ -13,14 +13,15 @@ var FocusManager = /*#__PURE__*/_createClass(function FocusManager() {
   // массив с trap нодами
   _defineProperty(this, "focusNodes", []);
   _defineProperty(this, "handleFocus", function () {
+    var _focusNode$getFocusTr, _focusNode$getFocusTr2;
     // Фокус всегда должен находиться внутри необходимой ноды
     var focusNode = _this.focusNodes[_this.focusNodes.length - 1];
-    if (!focusNode || focusNode.contains(document.activeElement)) {
+    if (!focusNode || isElementInFocusScope(focusNode.element, document.activeElement, (_focusNode$getFocusTr = focusNode.getFocusTrapSelectors) === null || _focusNode$getFocusTr === void 0 ? void 0 : _focusNode$getFocusTr.call(focusNode))) {
       return;
     }
 
     // Выделяем первый tabbable элемент
-    var el = findTabbableDescendants(focusNode)[0] || focusNode;
+    var el = findTabbableInFocusScope(focusNode.element, (_focusNode$getFocusTr2 = focusNode.getFocusTrapSelectors) === null || _focusNode$getFocusTr2 === void 0 ? void 0 : _focusNode$getFocusTr2.call(focusNode))[0] || focusNode.element;
     el.focus();
   });
   // добавление на фокус после анмаунта
@@ -37,14 +38,30 @@ var FocusManager = /*#__PURE__*/_createClass(function FocusManager() {
     }
   });
   // при маунте ноды
-  _defineProperty(this, "setupScopedFocus", function (element) {
-    _this.focusNodes.push(element);
-    document.addEventListener('focusin', _this.handleFocus, true);
+  _defineProperty(this, "setupScopedFocus", function (element, getFocusTrapSelectors) {
+    _this.focusNodes.push({
+      element: element,
+      getFocusTrapSelectors: getFocusTrapSelectors
+    });
+    if (_this.focusNodes.length === 1) {
+      document.addEventListener('focusin', _this.handleFocus, true);
+    }
   });
   // при анмаунте
-  _defineProperty(this, "teardownScopedFocus", function () {
-    _this.focusNodes.pop();
-    document.removeEventListener('focusin', _this.handleFocus);
+  _defineProperty(this, "teardownScopedFocus", function (element) {
+    var focusNodeIndex = element ? _this.focusNodes.map(function (focusNode) {
+      return focusNode.element;
+    }).lastIndexOf(element) : _this.focusNodes.length - 1;
+    if (focusNodeIndex >= 0) {
+      _this.focusNodes.splice(focusNodeIndex, 1);
+    }
+    if (!_this.focusNodes.length) {
+      document.removeEventListener('focusin', _this.handleFocus, true);
+    }
+  });
+  _defineProperty(this, "isTopFocusNode", function (element) {
+    var _this$focusNodes;
+    return ((_this$focusNodes = _this.focusNodes[_this.focusNodes.length - 1]) === null || _this$focusNodes === void 0 ? void 0 : _this$focusNodes.element) === element;
   });
 });
 

package/dist/css/es/utils/focusScope.js

@@ -0,0 +1,31 @@
+import { toConsumableArray as _toConsumableArray } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { findTabbableDescendants, isTabble } from './tabbable.js';
+
+var getAdditionalFocusScopeElements = function getAdditionalFocusScopeElements(root, focusTrapSelectors) {
+  if (!(focusTrapSelectors !== null && focusTrapSelectors !== void 0 && focusTrapSelectors.length)) {
+    return [];
+  }
+  var elements = focusTrapSelectors.flatMap(function (selector) {
+    return Array.from(root.ownerDocument.querySelectorAll(selector));
+  });
+  return Array.from(new Set(elements)).filter(function (element) {
+    return element !== root;
+  });
+};
+var isElementInFocusScope = function isElementInFocusScope(root, element, focusTrapSelectors) {
+  if (!element) {
+    return false;
+  }
+  return [root].concat(_toConsumableArray(getAdditionalFocusScopeElements(root, focusTrapSelectors))).some(function (scopeElement) {
+    return scopeElement.contains(element);
+  });
+};
+var findTabbableInFocusScope = function findTabbableInFocusScope(root, focusTrapSelectors) {
+  var additionalScopeElements = getAdditionalFocusScopeElements(root, focusTrapSelectors);
+  var tabbable = [].concat(_toConsumableArray(findTabbableDescendants(root)), _toConsumableArray(additionalScopeElements.flatMap(function (element) {
+    return [].concat(_toConsumableArray(isTabble(element) ? [element] : []), _toConsumableArray(findTabbableDescendants(element)));
+  })));
+  return Array.from(new Set(tabbable));
+};
+
+export { findTabbableInFocusScope, isElementInFocusScope };

package/dist/css/es/utils/scopeTab.js

@@ -1,12 +1,12 @@
-import { findTabbableDescendants } from './tabbable.js';
+import { findTabbableInFocusScope } from './focusScope.js';
 
 /**
  * Управлление фокусом лишь внутри ноды через tab
  * @param node
  * @param event
  */
-var scopeTab = function scopeTab(node, event, activeFocusTrap) {
-  var tabbable = findTabbableDescendants(node);
+var scopeTab = function scopeTab(node, event, activeFocusTrap, focusTrapSelectors) {
+  var tabbable = findTabbableInFocusScope(node, focusTrapSelectors);
   if (!tabbable.length) {
     event.preventDefault();
     return;

package/dist/emotion/cjs/components/Accordion/Accordion.tokens.js

@@ -28,6 +28,8 @@ const classes = {
     clearAccordionItem: 'clear-accordion-item',
     accordionItemShowBody: 'accordion-item-show-body',
     accordionPlusAnimationElement: 'accordion-plus-animation-element',
+    accordionArrowAnimation: 'accordion-arrow-animation',
+    accordionSignAnimation: 'accordion-sign-animation',
     accordionDisabled: 'accordion-disabled',
     accordionItemBody: 'accordion-item-body'
 };

package/dist/emotion/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js

@@ -54,8 +54,11 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const AccordionItem = /*#__PURE__*/ (0, _react.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)=>{
+const AccordionItem = /*#__PURE__*/ (0, _react.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] = (0, _react.useState)();
     const handleOpen = ()=>{
         if (disabled) {
@@ -74,12 +77,15 @@ const AccordionItem = /*#__PURE__*/ (0, _react.forwardRef)(({ value, contentRigh
         const leftPaddingBody = leftContentWidth && (alignWithTitle || view === 'clear') ? `calc(${leftContentWidth}px + var(${_Accordiontokens.tokens.accordionItemGap}))` : 0;
         setLeftPadding(leftPaddingBody);
     }, [
-        value,
+        alignWithTitle,
+        contentLeft,
+        defaultIconContent,
+        defaultIconPlacement,
         type,
-        leftContentRef,
-        setLeftPadding
+        value,
+        view
     ]);
-    const openedBodyClass = opened ?? value ? _Accordiontokens.classes.accordionItemShowBody : undefined;
+    const openedBodyClass = openedState ? _Accordiontokens.classes.accordionItemShowBody : undefined;
     const StyledAnimationPlus = ()=>/*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledPlus, null, /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledMinus, {
             size: "xs",
             color: "inherit",
@@ -91,16 +97,46 @@ const AccordionItem = /*#__PURE__*/ (0, _react.forwardRef)(({ value, contentRigh
             sizeCustomProperty: _Accordiontokens.tokens.accordionItemIconSize
         }));
     const accordionBorderRadius = (0, _roundness.convertRoundnessMatrix)(pin, `var(${_Accordiontokens.tokens.accordionItemViewBorderRadius}, var(${_Accordiontokens.tokens.accordionItemBorderRadius}))`, '1.5rem');
-    const openedClass = opened ?? value ? _Accordiontokens.classes.accordionItemOpened : '';
+    const openedClass = openedState ? _Accordiontokens.classes.accordionItemOpened : '';
     const disabledClass = disabled ? _Accordiontokens.classes.accordionDisabled : '';
-    const leftContent = contentLeft ?? (type === 'arrow' ? /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledArrow, {
-        size: "xs",
-        color: "inherit",
-        sizeCustomProperty: _Accordiontokens.tokens.accordionItemIconSize
-    }) : undefined);
-    const leftContentRotate = type === 'arrow' && (opened ?? value) ? _Accordiontokens.classes.accordionItemShowBody : undefined;
-    const rightContent = contentRight ?? (type === 'sign' ? /*#__PURE__*/ _react.default.createElement(StyledAnimationPlus, null) : undefined);
-    const rightContentRotate = type === 'sign' && (opened ?? value) ? _Accordiontokens.classes.accordionItemShowBody : undefined;
+    const getDefaultIcon = ()=>{
+        switch(resolvedDefaultIconContent){
+            case 'arrow':
+                return /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledArrow, {
+                    size: "xs",
+                    color: "inherit",
+                    sizeCustomProperty: _Accordiontokens.tokens.accordionItemIconSize
+                });
+            case 'chevron':
+                return /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledChevron, {
+                    size: "xs",
+                    color: "inherit",
+                    sizeCustomProperty: _Accordiontokens.tokens.accordionItemIconSize
+                });
+            case 'sign':
+                return /*#__PURE__*/ _react.default.createElement(StyledAnimationPlus, null);
+            default:
+                return undefined;
+        }
+    };
+    const defaultIcon = getDefaultIcon();
+    let defaultIconAnimationClass;
+    if (resolvedDefaultIconContent === 'sign') {
+        defaultIconAnimationClass = _Accordiontokens.classes.accordionSignAnimation;
+    } else if (resolvedDefaultIconContent === 'arrow' || resolvedDefaultIconContent === 'chevron') {
+        defaultIconAnimationClass = _Accordiontokens.classes.accordionArrowAnimation;
+    }
+    const defaultLeftContent = resolvedDefaultIconPlacement === 'left' ? defaultIcon : undefined;
+    const defaultRightContent = resolvedDefaultIconPlacement === 'right' ? defaultIcon : undefined;
+    const leftContent = contentLeft !== undefined ? contentLeft : defaultLeftContent;
+    const leftContentClassName = contentLeft === undefined ? (0, _utils.cx)(defaultIconAnimationClass, openedBodyClass) : undefined;
+    const rightContentClassName = (0, _utils.cx)(defaultIconAnimationClass, openedBodyClass);
+    let renderedRightContent = contentRight;
+    if (contentRight === undefined && defaultRightContent) {
+        renderedRightContent = /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledAccordionContentRight, {
+            className: rightContentClassName
+        }, defaultRightContent);
+    }
     return /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledAccordionItem, {
         className: (0, _utils.cx)(_Accordiontokens.classes.accordionItem, className, openedClass, disabledClass),
         key: key,
@@ -119,7 +155,7 @@ const AccordionItem = /*#__PURE__*/ (0, _react.forwardRef)(({ value, contentRigh
         },
         tabIndex: 0,
         onClick: handleOpen,
-        "aria-expanded": opened ?? value,
+        "aria-expanded": openedState,
         "aria-controls": `accordion-item-section${key}`,
         id: `accordion-item-${key}`,
         style: {
@@ -127,12 +163,10 @@ const AccordionItem = /*#__PURE__*/ (0, _react.forwardRef)(({ value, contentRigh
         }
     }, /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledAccordionContentLeft, {
         ref: leftContentRef,
-        className: leftContentRotate
-    }, leftContent), /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledAccordionTitle, titleProps, title)), contentRight || rightContent && /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledAccordionContentRight, {
-        className: rightContentRotate
-    }, rightContent && rightContent)), /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledAccordionBodyAnimate, {
+        className: leftContentClassName
+    }, leftContent), /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledAccordionTitle, titleProps, title)), renderedRightContent), /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledAccordionBodyAnimate, {
         "aria-labelledby": `accordion-item-${key}`,
-        "aria-hidden": !(opened ?? value),
+        "aria-hidden": !openedState,
         id: `accordion-item-section${key}`,
         className: (0, _utils.cx)(openedBodyClass),
         style: {

package/dist/emotion/cjs/components/Accordion/ui/AccordionItem/AccordionItem.styles.js

@@ -36,6 +36,9 @@ _export(exports, {
     get StyledArrow () {
         return StyledArrow;
     },
+    get StyledChevron () {
+        return StyledChevron;
+    },
     get StyledMinus () {
         return StyledMinus;
     },
@@ -53,7 +56,7 @@ function _interop_require_default(obj) {
     };
 }
 const StyledAccordionHeader = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e6swc040",
+    target: "e1cej47q0",
     label: "StyledAccordionHeader"
 })("width:100%;border:none;padding:var(", _Accordiontokens.tokens.accordionItemPadding, ");display:flex;gap:var(", _Accordiontokens.tokens.accordionItemGap, ");justify-content:space-between;align-items:center;background:none;box-sizing:border-box;cursor:pointer;&:focus{outline:none;}", (0, _mixins.addFocus)({
     outlineOffset: '0.125rem',
@@ -62,42 +65,50 @@ const StyledAccordionHeader = (0, /*#__PURE__*/ _styled.default)("div", {
     outlineColor: `var(${_Accordiontokens.tokens.accordionItemFocus})`
 }));
 const StyledAccordionHeaderLeft = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e6swc041",
+    target: "e1cej47q1",
     label: "StyledAccordionHeaderLeft"
 })("display:flex;gap:var(", _Accordiontokens.tokens.accordionItemHeaderLeftGap, ",var(", _Accordiontokens.tokens.accordionItemGap, "));justify-content:space-between;align-items:center;");
-const StyledAccordionContentRight = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e6swc042",
+const StyledAccordionContent = (0, /*#__PURE__*/ _styled.default)("div", {
+    target: "e1cej47q2",
+    label: "StyledAccordionContent"
+})("transition:0.2s;display:flex;align-items:center;&.", _Accordiontokens.classes.accordionArrowAnimation, ".", _Accordiontokens.classes.accordionItemShowBody, "{transition:0.2s;transform:rotate(180deg);}&.", _Accordiontokens.classes.accordionSignAnimation, "{transform:rotate(90deg);&.", _Accordiontokens.classes.accordionItemShowBody, "{transition:0.2s;transform:rotate(0deg);}}");
+const StyledAccordionContentRight = /*#__PURE__*/ (0, _styled.default)(StyledAccordionContent, {
+    target: "e1cej47q3",
     label: "StyledAccordionContentRight"
-})("transition:0.2s;transform:rotate(90deg);&.", _Accordiontokens.classes.accordionItemShowBody, "{transition:0.2s;transform:rotate(0deg);}");
-const StyledAccordionContentLeft = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e6swc043",
+})();
+const StyledAccordionContentLeft = /*#__PURE__*/ (0, _styled.default)(StyledAccordionContent, {
+    target: "e1cej47q4",
     label: "StyledAccordionContentLeft"
-})("transition:0.2s;display:flex;align-items:center;&.", _Accordiontokens.classes.accordionItemShowBody, "{transition:0.2s;transform:rotate(180deg);}");
+})();
 const StyledAccordionTitle = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e6swc044",
+    target: "e1cej47q5",
     label: "StyledAccordionTitle"
 })("color:var(", _Accordiontokens.tokens.accordionItemTitleColor, ");font-family:var(", _Accordiontokens.tokens.accordionItemTitleFontFamily, ");font-size:var(", _Accordiontokens.tokens.accordionItemTitleFontSize, ");font-weight:var(", _Accordiontokens.tokens.accordionItemTitleFontWeight, ");font-style:var(", _Accordiontokens.tokens.accordionItemTitleFontStyle, ");letter-spacing:var(", _Accordiontokens.tokens.accordionItemTitleLetterSpacing, ");line-height:var(", _Accordiontokens.tokens.accordionItemTitleLineHeight, ");text-align:left;");
 const StyledAccordionBodyAnimate = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e6swc045",
+    target: "e1cej47q6",
     label: "StyledAccordionBodyAnimate"
 })("display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.2s ease-out;overflow:hidden;&.", _Accordiontokens.classes.accordionItemShowBody, "{grid-template-rows:1fr;padding-bottom:var(", _Accordiontokens.tokens.accordionItemBodyPaddingBottom, ",var(", _Accordiontokens.tokens.accordionItemPaddingVertical, "));&.", _Accordiontokens.classes.accordionPlusAnimationElement, "{transition:0.2s;transform:rotate(0deg);}}");
 const StyledAccordionBody = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e6swc046",
+    target: "e1cej47q7",
     label: "StyledAccordionBody"
 })("color:var(", _Accordiontokens.tokens.accordionItemTextColor, ");font-family:var(", _Accordiontokens.tokens.accordionItemTextFontFamily, ");font-size:var(", _Accordiontokens.tokens.accordionItemTextFontSize, ");font-weight:var(", _Accordiontokens.tokens.accordionItemTextFontWeight, ");font-style:var(", _Accordiontokens.tokens.accordionItemTextFontStyle, ");letter-spacing:var(", _Accordiontokens.tokens.accordionItemTextLetterSpacing, ");line-height:var(", _Accordiontokens.tokens.accordionItemTextLineHeight, ");overflow:hidden;padding-right:var(", _Accordiontokens.tokens.accordionItemPaddingHorizontal, ");padding-left:var(", _Accordiontokens.tokens.accordionItemPaddingHorizontalLeft, ");text-align:left;");
 const StyledArrow = /*#__PURE__*/ (0, _styled.default)(_Icon.IconChevronDownFill, {
-    target: "e6swc047",
+    target: "e1cej47q8",
     label: "StyledArrow"
 })("pointer-events:none;user-select:none;color:var(", _Accordiontokens.tokens.accordionItemIconColor, ");");
+const StyledChevron = /*#__PURE__*/ (0, _styled.default)(_Icon.IconChevronDown, {
+    target: "e1cej47q9",
+    label: "StyledChevron"
+})("pointer-events:none;user-select:none;color:var(", _Accordiontokens.tokens.accordionItemIconColor, ");");
 const StyledMinus = /*#__PURE__*/ (0, _styled.default)(_Icon.IconMinus, {
-    target: "e6swc048",
+    target: "e1cej47q10",
     label: "StyledMinus"
 })("pointer-events:none;user-select:none;color:var(", _Accordiontokens.tokens.accordionItemIconColor, ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", _Accordiontokens.classes.accordionPlusAnimationElement, "{transition:0.2s;transform:rotate(90deg);}&.", _Accordiontokens.classes.accordionItemShowBody, "{transition:0.2s;transform:rotate(0deg);color:var(", _Accordiontokens.tokens.accordionItemOpenedTitleColor, ",var(", _Accordiontokens.tokens.accordionItemIconColor, "));}");
 const StyledPlus = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e6swc049",
+    target: "e1cej47q11",
     label: "StyledPlus"
 })("position:relative;display:flex;align-items:center;justify-content:center;width:var(", _Accordiontokens.tokens.accordionItemIconSize, ",1rem);height:var(", _Accordiontokens.tokens.accordionItemIconSize, ",1rem);");
 const StyledAccordionItem = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e6swc0410",
+    target: "e1cej47q12",
     label: "StyledAccordionItem"
-})("background:var(", _Accordiontokens.tokens.accordionItemBackground, ");border:var(", _Accordiontokens.tokens.accordionItemBorder, ");border-bottom:var(", _Accordiontokens.tokens.accordionItemBorderBottom, ");box-shadow:var(", _Accordiontokens.tokens.accordionItemShadow, ");&:last-child{border-bottom:var(", _Accordiontokens.tokens.accordionItemBorder, ");}&.", _Accordiontokens.classes.accordionDisabled, "{opacity:0.4;cursor:not-allowed;}&:hover:not(.", _Accordiontokens.classes.accordionItemOpened, "){background:var(", _Accordiontokens.tokens.accordionItemBackgroundHover, ",var(", _Accordiontokens.tokens.accordionItemBackground, "));}&.", _Accordiontokens.classes.accordionItemOpened, "{background:var(", _Accordiontokens.tokens.accordionItemOpenedBackground, ",var(", _Accordiontokens.tokens.accordionItemBackground, "));", StyledArrow, "{color:var(", _Accordiontokens.tokens.accordionItemOpenedTitleColor, ",var(", _Accordiontokens.tokens.accordionItemIconColor, "));}", StyledAccordionTitle, "{color:var(", _Accordiontokens.tokens.accordionItemOpenedTitleColor, ",var(", _Accordiontokens.tokens.accordionItemTitleColor, "));}}");
+})("background:var(", _Accordiontokens.tokens.accordionItemBackground, ");border:var(", _Accordiontokens.tokens.accordionItemBorder, ");border-bottom:var(", _Accordiontokens.tokens.accordionItemBorderBottom, ");box-shadow:var(", _Accordiontokens.tokens.accordionItemShadow, ");&:last-child{border-bottom:var(", _Accordiontokens.tokens.accordionItemBorder, ");}&.", _Accordiontokens.classes.accordionDisabled, "{opacity:0.4;cursor:not-allowed;}&:hover:not(.", _Accordiontokens.classes.accordionItemOpened, "){background:var(", _Accordiontokens.tokens.accordionItemBackgroundHover, ",var(", _Accordiontokens.tokens.accordionItemBackground, "));}&.", _Accordiontokens.classes.accordionItemOpened, "{background:var(", _Accordiontokens.tokens.accordionItemOpenedBackground, ",var(", _Accordiontokens.tokens.accordionItemBackground, "));", StyledArrow, "{color:var(", _Accordiontokens.tokens.accordionItemOpenedTitleColor, ",var(", _Accordiontokens.tokens.accordionItemIconColor, "));}", StyledChevron, "{color:var(", _Accordiontokens.tokens.accordionItemOpenedTitleColor, ",var(", _Accordiontokens.tokens.accordionItemIconColor, "));}", StyledAccordionTitle, "{color:var(", _Accordiontokens.tokens.accordionItemOpenedTitleColor, ",var(", _Accordiontokens.tokens.accordionItemTitleColor, "));}}");

package/dist/emotion/cjs/components/Calendar/CalendarBase/CalendarBase.js

@@ -103,7 +103,7 @@ const calendarBaseRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ classNa
             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] = (0, _react.useReducer)(_reducer.reducer, (0, _reducer.getInitialState)(value, min, renderFrom, type));

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

@@ -104,7 +104,7 @@ const calendarDoubleRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ class
             min.setHours(0, 0, 0, 0);
         }
         if (max) {
-            max.setHours(23, 59, 59, 999);
+            max.setHours(0, 0, 0, 0);
         }
         const [state, dispatch] = (0, _react.useReducer)(_reducer.reducer, (0, _reducer.getInitialState)(value, min, renderFromDate, type, true));
         const { date, calendarState, startYear, size } = state;

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

@@ -53,7 +53,7 @@ const sideInRange = ()=>`
     }
 `;
 const StyledItem = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e1ukg3du0",
+    target: "eq115x20",
     label: "StyledItem"
 })("border-radius:calc(var(", _Calendartokens.innerTokens.dateStructureBorderRadius, ") - 0.125rem);", String(_mixins1.flexCenter), ";&.", String(_Calendartokens.classes.inRange), "{", inRange(), ";}&.", String(_Calendartokens.classes.sideInRange), "{", sideInRange(), ";}&.", String(_Calendartokens.classes.sideLeft), "{&:before{left:", ({ offset })=>`${offset}px`, ";}}&.", String(_Calendartokens.classes.sideRight), "{&:before{right:", ({ offset })=>`${offset}px`, ";}}");
 const disabledItem = ()=>`
@@ -64,7 +64,7 @@ const disabledCurrentItem = ()=>`
     ${disabledItem()};
 `;
 const StyledItemRoot = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e1ukg3du1",
+    target: "eq115x21",
     label: "StyledItemRoot"
 })("font-family:var(", _Calendartokens.innerTokens.dateStructureFontFamily, ");font-size:var(", _Calendartokens.innerTokens.dateStructureFontSize, ");font-style:var(", _Calendartokens.innerTokens.dateStructureFontStyle, ");font-weight:var(", _Calendartokens.innerTokens.dateStructureFontWeight, ");letter-spacing:var(", _Calendartokens.innerTokens.dateStructureFontLetterSpacing, ");line-height:var(", _Calendartokens.innerTokens.dateStructureFontLineHeight, ");position:relative;box-sizing:border-box;border-radius:var(", _Calendartokens.innerTokens.dateStructureBorderRadius, ");", String(_mixins1.flexCenter), ";color:", ({ isDayInCurrentMonth })=>isDayInCurrentMonth ? `var(${_Calendartokens.tokens.calendarContentPrimaryColor})` : `var(${_Calendartokens.tokens.calendarContentSecondaryColor})`, ";&.", String(_Calendartokens.classes.selectableItem), "{", (0, _mixins1.addSelected)({
     minWidth: 'calc(100% - 0.125rem)',
@@ -87,16 +87,16 @@ const StyledItemRoot = (0, /*#__PURE__*/ _styled.default)("div", {
     outlineOffset: '0.1875rem',
     outlineColor: `var(${_Calendartokens.tokens.calendarOutlineFocusColor})`,
     outlineRadius: `var(${_Calendartokens.innerTokens.dateStructureBorderRadius})`
-}), ";}}&.", _Calendartokens.classes.dayInCurrentMonth, ":not(.", _Calendartokens.classes.disabled, "){", (0, _mixins1.addActive)({
+}), ";}}&.", _Calendartokens.classes.dayInCurrentMonth, ":not(.", _Calendartokens.classes.disabled, "):not(.", _Calendartokens.classes.disabledCurrent, "){", (0, _mixins1.addActive)({
     activeBackground: `var(${_Calendartokens.tokens.calendarActiveItemBackground})`,
     activeColor: `var(${_Calendartokens.tokens.calendarActiveItemColor})`,
     activeFontWeight: `var(${_Calendartokens.innerTokens.dateStructureSelectedFontWeight})`
 }), ";}&.", _Calendartokens.classes.dayOfWeek, "{color:var(", _Calendartokens.tokens.calendarDayOfWeekColor, ");}&.", _Calendartokens.classes.disabled, "{color:", ({ isDayInCurrentMonth })=>isDayInCurrentMonth ? `var(${_Calendartokens.tokens.calendarContentPrimaryDisabledColor})` : `var(${_Calendartokens.tokens.calendarContentSecondaryDisabledColor})`, ";", disabledItem(), ";}&.", _Calendartokens.classes.disabledCurrent, "{color:", ({ isDayInCurrentMonth })=>isDayInCurrentMonth ? `var(${_Calendartokens.tokens.calendarContentPrimaryDisabledColor})` : `var(${_Calendartokens.tokens.calendarContentSecondaryDisabledColor})`, ";", disabledCurrentItem(), ";}&.", _Calendartokens.classes.currentItem, "{& > .", _Calendartokens.classes.inRange, ":before{width:calc(100% + 2px);height:100%;}& > .", _Calendartokens.classes.sideRight, ":before{width:100%;right:-1px;left:unset;}& > .", _Calendartokens.classes.sideLeft, ":before{width:100%;left:-1px;right:unset;}}& .", _Popover.popoverClasses.wrapper, ".", _Popover.popoverClasses.targetAsRef, "{z-index:-1;width:100%;}");
 const StyledEvents = (0, /*#__PURE__*/ _styled.default)("div", {
-    target: "e1ukg3du2",
+    target: "eq115x22",
     label: "StyledEvents"
 })("display:flex;position:absolute;bottom:var(", _Calendartokens.tokens.calendarEventItemBottom, ",0.25rem);");
 const StyledEvent = (0, /*#__PURE__*/ _styled.default)("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/cjs/components/Combobox/Combobox.js

@@ -97,8 +97,7 @@ const comboboxRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>
             multiple,
             nativeMode,
             valueToItemMap,
-            renderValue,
-            onChangeValue
+            renderValue
         });
         const currentLabel = (0, _utils1.getTextValue)(multiple, value, valueToItemMap, renderValue);
         const { filteredItems, filteredMaps: { pathMap: filteredPathMap, focusedToValueMap: filteredFocusedToValueMap, valueToPathMap: filteredValueToPathMap } } = (0, _hooks1.useComboboxItems)({
@@ -156,6 +155,9 @@ const comboboxRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>
          */ /* Обработчик изменения значения в инпуте */ 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/cjs/components/Combobox/hooks/useValue.js

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

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

@@ -83,8 +83,11 @@ const getFloatingPortalProps = (portal, wrappedId)=>{
         root: portal
     };
 };
-const FloatingPopover = /*#__PURE__*/ (0, _react1.forwardRef)(({ target, children, opened, onToggle, placement, portal, offset, zIndex, disableFlip, closeOnOverlayClick, closeOnEsc, innerWidth, innerHeight, stretchHeight }, ref)=>{
+const FloatingPopover = /*#__PURE__*/ (0, _react1.forwardRef)(({ target, referenceRef, children, opened, onToggle, placement, portal, offset, zIndex, disableFlip, closeOnOverlayClick, closeOnEsc, innerWidth, innerHeight, stretchHeight }, ref)=>{
     const { refs, floatingStyles, context } = (0, _react.useFloating)({
+        elements: referenceRef?.current ? {
+            reference: referenceRef.current
+        } : undefined,
         whileElementsMounted (referenceEl, floatingEl, update) {
             return (0, _react.autoUpdate)(referenceEl, floatingEl, update, {
                 ancestorScroll: false,
@@ -123,6 +126,14 @@ const FloatingPopover = /*#__PURE__*/ (0, _react1.forwardRef)(({ target, childre
     const { getReferenceProps, getFloatingProps } = (0, _react.useInteractions)([
         dismiss
     ]);
+    (0, _react1.useLayoutEffect)(()=>{
+        if (referenceRef?.current) {
+            refs.setReference(referenceRef.current);
+        }
+    }, [
+        referenceRef,
+        refs
+    ]);
     const wrappedId = (0, _utils.safeUseId)();
     const handleClick = (event)=>{
         onToggle(!opened, event);

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

@@ -83,7 +83,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const datePickerRangeRoot = (Root)=>/*#__PURE__*/ (0, _react.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 = [
@@ -99,6 +99,8 @@ const datePickerRangeRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ clas
         const rootRef = (0, _react.useRef)(null);
         const innerRefFirst = (0, _react.useRef)(null);
         const innerRefSecond = (0, _react.useRef)(null);
+        const firstTextfieldInputWrapperRef = (0, _react.useRef)(null);
+        const secondTextfieldInputWrapperRef = (0, _react.useRef)(null);
         const [firstInputRef, setFirstInputRef] = (0, _react.useState)(rangeRef?.current?.firstTextField());
         const [secondInputRef, setSecondInputRef] = (0, _react.useState)(rangeRef?.current?.secondTextField());
         const [isInnerOpen, setIsInnerOpen] = (0, _react.useState)(false);
@@ -140,6 +142,8 @@ const datePickerRangeRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ clas
         const inputSecondValue = endInitialValues.formattedDate;
         const fullDateEntered = Boolean(calendarFirstValue && calendarSecondValue);
         const [secondTextFieldClicked, setSecondTextFieldClicked] = (0, _react.useState)(false);
+        const shouldPositionCalendarByInput = isCalendarPositionedByInput && !isDoubleCalendar;
+        const activeInputWrapperRef = secondTextFieldClicked ? secondTextfieldInputWrapperRef : firstTextfieldInputWrapperRef;
         const isSameMonth = Boolean(fullDateEntered && (0, _datejs.customDayjs)(calendarFirstValue).isSame(calendarSecondValue, 'month'));
         let calendarFocusedDate = calendarFirstValue;
         if (secondTextFieldClicked && calendarSecondValue) {
@@ -383,7 +387,9 @@ const datePickerRangeRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ clas
         const renderRange = (inputWrapperRef)=>/*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_RangeDatestyles.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,
@@ -522,6 +528,7 @@ const datePickerRangeRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ clas
             ],
             calendarFocusedDate: calendarFocusedDate,
             target: renderRange,
+            referenceRef: shouldPositionCalendarByInput ? activeInputWrapperRef : undefined,
             opened: openedValue,
             includeEdgeDates: includeEdgeDates,
             eventTooltipOptions: eventTooltipOptions,

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

@@ -62,7 +62,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-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 = [
+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 })=>{
@@ -99,6 +99,7 @@ const RangeDatePopover = ({ rootWrapper: Root, target, opened, isDoubleCalendar,
             closeOnEsc: closeOnEsc,
             portal: usePortal ? frame : undefined,
             target: target,
+            referenceRef: referenceRef,
             innerWidth: calendarContainerWidthValue,
             innerHeight: calendarContainerHeightValue,
             stretchHeight: isCalendarHeightStretched
@@ -160,6 +161,7 @@ const RangeDatePopover = ({ rootWrapper: Root, target, opened, isDoubleCalendar,
         closeOnEsc: closeOnEsc,
         portal: usePortal ? frame : undefined,
         target: target,
+        referenceRef: referenceRef,
         innerWidth: calendarContainerWidthValue,
         innerHeight: calendarContainerHeightValue,
         stretchHeight: isCalendarHeightStretched

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

@@ -32,6 +32,7 @@ const _ui = require("./ui");
 const _DateTimePickertokens = require("./DateTimePicker.tokens");
 const _useDateTimePicker = require("./hooks/useDateTimePicker");
 const _useKeyboardNavigation = require("./hooks/useKeyboardNavigation");
+const _utils1 = require("./utils");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -98,6 +99,12 @@ const dateTimePickerRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ class
         const calendarOverlayRef = (0, _react.useRef)(null);
         const [isInnerOpen, setIsInnerOpen] = (0, _react.useState)(false);
         const openedValue = outerOpened ?? isInnerOpen;
+        const { calendarMin, calendarMax } = (0, _react.useMemo)(()=>(0, _utils1.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 } = (0, _useDateTimePicker.useDateTimePicker)({
             inputRef,
             outerValue,
@@ -272,8 +279,8 @@ const dateTimePickerRoot = (Root)=>/*#__PURE__*/ (0, _react.forwardRef)(({ class
             disabledQuarterList: disabledQuarterList,
             eventYearList: eventYearList,
             disabledYearList: disabledYearList,
-            min: min,
-            max: max,
+            min: calendarMin,
+            max: calendarMax,
             renderFromDate: renderFromDate,
             includeEdgeDates: includeEdgeDates,
             lang: lang,