@ozen-ui/kit 0.49.0 → 0.50.0

package/__inner__/cjs/components/Autocomplete/Autocomplete.js

@@ -171,7 +171,7 @@ function AutocompleteRender(inProps, ref) {
             handleClose();
     };
     /** Отображение текстового поля */
-    var input = renderInput(tslib_1.__assign(tslib_1.__assign({ size: size, hint: hint, disabled: disabled, label: label, required: required, error: error, fullWidth: fullWidth, placeholder: placeholder, renderLeft: renderLeft }, other), { renderRight: (react_1.default.createElement(components_1.AutocompleteRenderRight, { open: open, size: size, disabled: disabled, clearText: clearText, closeText: closeText, openText: openText, hasValue: !!inputValue, onClear: handleClear, onOpen: handleToggle, renderRight: renderRight, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), onChange: handleChangeInput, onKeyDown: handleKeyDown, value: inputValue || '', inputProps: tslib_1.__assign(tslib_1.__assign({}, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput }), bodyProps: tslib_1.__assign(tslib_1.__assign({ 'aria-expanded': open }, bodyProps), { ref: inputBodyRef }), className: (0, exports.cnAutocomplete)({ size: size, hasChevron: !disableShowChevron }, [
+    var input = renderInput(tslib_1.__assign(tslib_1.__assign({ size: size, hint: hint, disabled: disabled, label: label, required: required, error: error, fullWidth: fullWidth, placeholder: placeholder, renderLeft: renderLeft }, other), { renderRight: (react_1.default.createElement(components_1.AutocompleteRenderRight, { open: open, size: size, disabled: disabled, clearText: clearText, closeText: closeText, openText: openText, hasValue: !!inputValue, onClear: handleClear, onOpen: handleToggle, renderRight: renderRight, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), onChange: handleChangeInput, onKeyDown: handleKeyDown, value: inputValue || '', inputProps: tslib_1.__assign(tslib_1.__assign({ autoComplete: 'off' }, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput }), bodyProps: tslib_1.__assign(tslib_1.__assign({ 'aria-expanded': open }, bodyProps), { ref: inputBodyRef }), className: (0, exports.cnAutocomplete)({ size: size, hasChevron: !disableShowChevron }, [
             className,
         ]), ref: ref }));
     /** Отображение опций */

package/__inner__/cjs/components/DatePicker/DatePicker.js

@@ -153,7 +153,7 @@ exports.DatePicker = (0, react_1.forwardRef)(function (inProps, ref) {
         e.preventDefault();
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(components_1.DateInput, tslib_1.__assign({ size: size, hint: hint, error: error, label: label, required: required, disabled: disabled, fullWidth: fullWidth, placeholder: placeholder }, other, { renderRight: react_1.default.createElement(components_1.DatePickerRenderRight, { size: size, open: open, onClear: handleClear, clearText: clearText, hasValue: !!inputValue, renderRight: renderRight, disableClearButton: disableClearButton }), value: inputValue, inputProps: tslib_1.__assign(tslib_1.__assign({}, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput, onInput: handleChangeInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, className: (0, exports.cnDatePicker)('', [className]), onKeyDown: handleKeyDown, ref: ref })),
+        react_1.default.createElement(components_1.DateInput, tslib_1.__assign({ size: size, hint: hint, error: error, label: label, required: required, disabled: disabled, fullWidth: fullWidth, placeholder: placeholder }, other, { renderRight: react_1.default.createElement(components_1.DatePickerRenderRight, { size: size, open: open, onClear: handleClear, clearText: clearText, hasValue: !!inputValue, renderRight: renderRight, disableClearButton: disableClearButton }), value: inputValue, inputProps: tslib_1.__assign(tslib_1.__assign({ autoComplete: 'off' }, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput, onInput: handleChangeInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, className: (0, exports.cnDatePicker)('', [className]), onKeyDown: handleKeyDown, ref: ref })),
         react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: Paper_1.Paper, open: open, offset: [0, 4], radius: radius, anchorRef: anchorRef, onClose: handleClose, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true }, popoverProps),
             react_1.default.createElement(Calendar_1.Calendar, tslib_1.__assign({ minDate: minDate, maxDate: maxDate, exclude: exclude, size: calendarSize, offsetDate: offsetDate, onMouseDown: handleMouseDownCalendar }, calendarProps, { value: value || null, onChange: handleChangeCalendar })))));
 });

package/__inner__/cjs/components/Popover/Popover.css

@@ -1,70 +1,46 @@
 .Popover {
-  z-index: var(--z-index-popover);
+  outline: none;
   inline-size: auto;
   box-sizing: border-box;
-  outline: none;
+  z-index: var(--z-index-popover);
 }
 
   .Popover-Arrow {
+    --popover-arrow-inset: calc(-1 * (var(--popover-arrow-size) / 2));
     display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    inline-size: var(--popover-arrow-size);
+    block-size: var(--popover-arrow-size);
     color: var(--paper-background-color);
   }
 
-  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_xs {
-        inset-block-end: -9px;
-      }
-
-  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_xs svg {
-          transform: rotate(270deg);
-        }
-
-  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_s {
-        inset-block-end: -12px;
-      }
-
-  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_s svg {
-          transform: rotate(270deg);
-        }
-
-  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_xs {
-        inset-block-start: -9px;
-      }
-
-  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_xs svg {
-          transform: rotate(90deg);
-        }
-
-  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_s {
-        inset-block-start: -12px;
+  .Popover-Arrow_size_xs {
+        --popover-arrow-size: 12px;
       }
 
-  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_s svg {
-          transform: rotate(90deg);
-        }
-
-  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_xs {
-        inset-inline-end: -6px;
+  .Popover-Arrow_size_s {
+        --popover-arrow-size: 16px;
       }
 
-  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_xs svg {
-          transform: rotate(180deg);
-        }
-
-  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_s {
-        inset-inline-end: -8px;
-      }
+  .Popover[data-popper-placement^='top'] > .Popover-Arrow {
+    transform: rotate(270deg);
+    inset-block-end: var(--popover-arrow-inset);
+  }
 
-  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_s svg {
-          transform: rotate(180deg);
-        }
+  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow {
+    transform: rotate(90deg);
+    inset-block-start: var(--popover-arrow-inset);
+  }
 
-  .Popover[data-popper-placement^='right'] > .Popover-Arrow_size_xs {
-        inset-inline-start: -6px;
-      }
+  .Popover[data-popper-placement^='left'] > .Popover-Arrow {
+    transform: rotate(180deg);
+    inset-inline-end: var(--popover-arrow-inset);
+  }
 
-  .Popover[data-popper-placement^='right'] > .Popover-Arrow_size_s {
-        inset-inline-start: -8px;
-      }
+  .Popover[data-popper-placement^='right'] > .Popover-Arrow {
+    inset-inline-start: var(--popover-arrow-inset);
+  }
 
   .Popover_disableInteractive {
     pointer-events: none;

package/__inner__/cjs/components/Popover/Popover.js

@@ -22,7 +22,7 @@ var PopoverContext_1 = require("./PopoverContext");
 exports.cnPopover = (0, classname_1.cn)('Popover');
 exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Popover' });
-    var _a = props.arrow, arrow = _a === void 0 ? constants_1.POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? constants_1.POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? constants_1.POPOVER_DEFAULT_PLACEMENT : _g, _h = props.strategy, strategy = _h === void 0 ? constants_1.POPOVER_DEFAULT_STRATEGY : _h, _j = props.disablePreventOverflow, disablePreventOverflow = _j === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW : _j, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, _k = props.as, as = _k === void 0 ? constants_1.POPOVER_DEFAULT_TAG : _k, other = tslib_1.__rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "strategy", "disablePreventOverflow", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "as"]);
+    var _a = props.arrow, arrow = _a === void 0 ? constants_1.POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? constants_1.POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? constants_1.POPOVER_DEFAULT_PLACEMENT : _g, _h = props.strategy, strategy = _h === void 0 ? constants_1.POPOVER_DEFAULT_STRATEGY : _h, _j = props.disablePreventOverflow, disablePreventOverflow = _j === void 0 ? constants_1.POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW : _j, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, modifiersProps = props.modifiers, _k = props.as, as = _k === void 0 ? constants_1.POPOVER_DEFAULT_TAG : _k, other = tslib_1.__rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "strategy", "disablePreventOverflow", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "modifiers", "as"]);
     var _l = tslib_1.__read((0, react_1.useState)(false), 2), openState = _l[0], setOpenState = _l[1];
     var focusedElement = (0, react_1.useRef)(null);
     var popoverRef = (0, react_1.useRef)(null);
@@ -62,7 +62,7 @@ exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
         }
         onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
     }, [onExitedProp]);
-    var modifiers = (0, react_1.useMemo)(function () { return [
+    var modifiers = (0, react_1.useMemo)(function () { return tslib_1.__spreadArray([
         // Вычисление стилей позиционирования
         {
             name: 'computeStyles',
@@ -93,14 +93,20 @@ exports.Popover = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
             phase: 'beforeWrite',
             requires: ['computeStyles'],
         },
+        {
+            name: 'arrow',
+            options: {
+                padding: 12,
+            },
+        },
         // Отступы от якорного элемента
         {
             name: 'offset',
             options: {
                 offset: offset,
             },
-        },
-    ]; }, [offset, equalAnchorWidth]);
+        }
+    ], tslib_1.__read((modifiersProps || [])), false); }, [offset, equalAnchorWidth, modifiersProps]);
     // Якорный элемент или координаты
     var resolveReferenceElement = (0, react_1.useMemo)(function () {
         if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)

package/__inner__/cjs/components/Popover/types.d.ts

@@ -1,5 +1,6 @@
 import type { RefObject, ComponentRef, ElementType, ReactNode } from 'react';
 import type PopperJS from '@popperjs/core';
+import type { PopperProps } from 'react-popper';
 import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { PortalProps } from '../Portal';
@@ -76,6 +77,11 @@ export type PopoverBaseProps = {
     strategy?: PopoverStrategyVariant;
     /** Если {true} позволяет смещаться по границе якорного элемента компонента  */
     disablePreventOverflow?: boolean;
+    /**
+     * Модификаторы для popper.js
+     * https://popper.js.org/docs/v2/modifiers/#custom-modifiers
+     * */
+    modifiers?: PopperProps<unknown>['modifiers'];
 };
 export type PopoverRef = ComponentRef<typeof POPOVER_DEFAULT_TAG>;
 export type PopoverProps<As extends ElementType = typeof POPOVER_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<PopoverBaseProps, As>;

package/__inner__/cjs/components/Select/components/SelectConsumer/SelectInputConsumer.js

@@ -11,7 +11,7 @@ var SelectInputConsumer = function (_a) {
     var _c = tslib_1.__read(context, 1), fieldControl = _c[0];
     var disabled = fieldControl.disabled, required = fieldControl.required, filled = fieldControl.filled, focused = fieldControl.focused, label = fieldControl.label;
     var hasLabel = !!label;
-    var placeholder = (focused || !hasLabel) && !valueProp && placeholderProp;
+    var placeholder = (focused || !hasLabel) && !valueProp && (react_1.default.createElement("span", null, placeholderProp));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", tslib_1.__assign({}, fieldProps, { className: (0, index_1.cnSelect)('Field', { filled: filled, asPlaceholder: !!placeholder }, [
                 fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.className,

package/__inner__/cjs/components/Select/types.d.ts

@@ -5,7 +5,6 @@ import type { SelectInputProps } from './components';
 export type SelectSizeVariant = FormElementSizeVariant;
 export type SelectLabel = string | number | undefined;
 export type SelectPropLabel<MULTIPLE extends boolean> = (MULTIPLE extends true ? SelectLabel[] : SelectLabel) | undefined;
-export type SelectValue = string | number | undefined;
 export type SelectPropValue<MULTIPLE extends boolean> = DataListSelected<MULTIPLE>;
 export type SelectedOptionProp<MULTIPLE extends boolean> = {
     label?: SelectPropLabel<MULTIPLE>;

package/__inner__/cjs/components/Tooltip/Tooltip.css

@@ -4,6 +4,8 @@
   color: var(--color-content-primary);
 }
 .Tooltip_size_xs {
+      min-inline-size: 28px;
+      min-block-size: 28px;
       padding: var(--spacing-2xs) var(--spacing-xs);
 
       font: var(--typography-text-xs-font);
@@ -13,6 +15,8 @@
       text-transform: var(--typography-text-xs-text_transform, none);
     }
 .Tooltip_size_s {
+      min-inline-size: 40px;
+      min-block-size: 40px;
       padding: var(--spacing-xs) var(--spacing-s);
 
       font: var(--typography-text-s-font);

package/__inner__/cjs/components/Tooltip/Tooltip.js

@@ -24,6 +24,14 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
     var _m = tslib_1.__read((0, react_1.useState)(), 2), hasFocus = _m[0], setHasFocus = _m[1];
     var _o = tslib_1.__read((0, react_1.useState)(), 2), hasHover = _o[0], setHasHover = _o[1];
     var anchorRef = (0, react_1.useRef)(null);
+    var modifiers = [
+        {
+            name: 'arrow',
+            options: {
+                padding: size === 'xs' ? 8 : 12,
+            },
+        },
+    ];
     var _p = tslib_1.__read((0, useControlled_1.useControlled)({
         value: openProp,
         defaultValue: false,
@@ -121,6 +129,6 @@ exports.Tooltip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)
         react_1.default.cloneElement(resolveChildren, composeChildrenProps),
         react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: "main" }, (variant === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), { radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: (0, exports.cnTooltip)({ size: size, variant: variant, inverse: inverse }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
                 size: size,
-            }, disableEnforceFocus: true, disableReturnFocus: true }), label)));
+            }, modifiers: modifiers, disableEnforceFocus: true, disableReturnFocus: true }), label)));
 });
 exports.Tooltip.displayName = 'Tooltip';

package/__inner__/cjs/utils/getScrollBarSize/getScrollbarSize.js

@@ -2,10 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getScrollbarSize = void 0;
 var getScrollbarSize = function (el) {
-    if (el === void 0) { el = document.body; }
-    if (el === document.body) {
-        return window.innerWidth - el.offsetWidth;
+    if (!el || el === document.body) {
+        return window.innerWidth - document.documentElement.clientWidth;
     }
-    return el.offsetWidth - el.scrollWidth;
+    return el.offsetWidth - el.clientWidth;
 };
 exports.getScrollbarSize = getScrollbarSize;

package/__inner__/esm/components/Autocomplete/Autocomplete.js

@@ -168,7 +168,7 @@ function AutocompleteRender(inProps, ref) {
             handleClose();
     };
     /** Отображение текстового поля */
-    var input = renderInput(__assign(__assign({ size: size, hint: hint, disabled: disabled, label: label, required: required, error: error, fullWidth: fullWidth, placeholder: placeholder, renderLeft: renderLeft }, other), { renderRight: (React.createElement(AutocompleteRenderRight, { open: open, size: size, disabled: disabled, clearText: clearText, closeText: closeText, openText: openText, hasValue: !!inputValue, onClear: handleClear, onOpen: handleToggle, renderRight: renderRight, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), onChange: handleChangeInput, onKeyDown: handleKeyDown, value: inputValue || '', inputProps: __assign(__assign({}, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput }), bodyProps: __assign(__assign({ 'aria-expanded': open }, bodyProps), { ref: inputBodyRef }), className: cnAutocomplete({ size: size, hasChevron: !disableShowChevron }, [
+    var input = renderInput(__assign(__assign({ size: size, hint: hint, disabled: disabled, label: label, required: required, error: error, fullWidth: fullWidth, placeholder: placeholder, renderLeft: renderLeft }, other), { renderRight: (React.createElement(AutocompleteRenderRight, { open: open, size: size, disabled: disabled, clearText: clearText, closeText: closeText, openText: openText, hasValue: !!inputValue, onClear: handleClear, onOpen: handleToggle, renderRight: renderRight, disableShowChevron: disableShowChevron, disableClearButton: disableClearButton })), onChange: handleChangeInput, onKeyDown: handleKeyDown, value: inputValue || '', inputProps: __assign(__assign({ autoComplete: 'off' }, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput }), bodyProps: __assign(__assign({ 'aria-expanded': open }, bodyProps), { ref: inputBodyRef }), className: cnAutocomplete({ size: size, hasChevron: !disableShowChevron }, [
             className,
         ]), ref: ref }));
     /** Отображение опций */

package/__inner__/esm/components/DatePicker/DatePicker.js

@@ -150,7 +150,7 @@ export var DatePicker = forwardRef(function (inProps, ref) {
         e.preventDefault();
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(DateInput, __assign({ size: size, hint: hint, error: error, label: label, required: required, disabled: disabled, fullWidth: fullWidth, placeholder: placeholder }, other, { renderRight: React.createElement(DatePickerRenderRight, { size: size, open: open, onClear: handleClear, clearText: clearText, hasValue: !!inputValue, renderRight: renderRight, disableClearButton: disableClearButton }), value: inputValue, inputProps: __assign(__assign({}, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput, onInput: handleChangeInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, className: cnDatePicker('', [className]), onKeyDown: handleKeyDown, ref: ref })),
+        React.createElement(DateInput, __assign({ size: size, hint: hint, error: error, label: label, required: required, disabled: disabled, fullWidth: fullWidth, placeholder: placeholder }, other, { renderRight: React.createElement(DatePickerRenderRight, { size: size, open: open, onClear: handleClear, clearText: clearText, hasValue: !!inputValue, renderRight: renderRight, disableClearButton: disableClearButton }), value: inputValue, inputProps: __assign(__assign({ autoComplete: 'off' }, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput, onInput: handleChangeInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, className: cnDatePicker('', [className]), onKeyDown: handleKeyDown, ref: ref })),
         React.createElement(Popover, __assign({ as: Paper, open: open, offset: [0, 4], radius: radius, anchorRef: anchorRef, onClose: handleClose, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true }, popoverProps),
             React.createElement(Calendar, __assign({ minDate: minDate, maxDate: maxDate, exclude: exclude, size: calendarSize, offsetDate: offsetDate, onMouseDown: handleMouseDownCalendar }, calendarProps, { value: value || null, onChange: handleChangeCalendar })))));
 });

package/__inner__/esm/components/Popover/Popover.css

@@ -1,70 +1,46 @@
 .Popover {
-  z-index: var(--z-index-popover);
+  outline: none;
   inline-size: auto;
   box-sizing: border-box;
-  outline: none;
+  z-index: var(--z-index-popover);
 }
 
   .Popover-Arrow {
+    --popover-arrow-inset: calc(-1 * (var(--popover-arrow-size) / 2));
     display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    inline-size: var(--popover-arrow-size);
+    block-size: var(--popover-arrow-size);
     color: var(--paper-background-color);
   }
 
-  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_xs {
-        inset-block-end: -9px;
-      }
-
-  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_xs svg {
-          transform: rotate(270deg);
-        }
-
-  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_s {
-        inset-block-end: -12px;
-      }
-
-  .Popover[data-popper-placement^='top'] > .Popover-Arrow_size_s svg {
-          transform: rotate(270deg);
-        }
-
-  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_xs {
-        inset-block-start: -9px;
-      }
-
-  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_xs svg {
-          transform: rotate(90deg);
-        }
-
-  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_s {
-        inset-block-start: -12px;
+  .Popover-Arrow_size_xs {
+        --popover-arrow-size: 12px;
       }
 
-  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow_size_s svg {
-          transform: rotate(90deg);
-        }
-
-  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_xs {
-        inset-inline-end: -6px;
+  .Popover-Arrow_size_s {
+        --popover-arrow-size: 16px;
       }
 
-  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_xs svg {
-          transform: rotate(180deg);
-        }
-
-  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_s {
-        inset-inline-end: -8px;
-      }
+  .Popover[data-popper-placement^='top'] > .Popover-Arrow {
+    transform: rotate(270deg);
+    inset-block-end: var(--popover-arrow-inset);
+  }
 
-  .Popover[data-popper-placement^='left'] > .Popover-Arrow_size_s svg {
-          transform: rotate(180deg);
-        }
+  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow {
+    transform: rotate(90deg);
+    inset-block-start: var(--popover-arrow-inset);
+  }
 
-  .Popover[data-popper-placement^='right'] > .Popover-Arrow_size_xs {
-        inset-inline-start: -6px;
-      }
+  .Popover[data-popper-placement^='left'] > .Popover-Arrow {
+    transform: rotate(180deg);
+    inset-inline-end: var(--popover-arrow-inset);
+  }
 
-  .Popover[data-popper-placement^='right'] > .Popover-Arrow_size_s {
-        inset-inline-start: -8px;
-      }
+  .Popover[data-popper-placement^='right'] > .Popover-Arrow {
+    inset-inline-start: var(--popover-arrow-inset);
+  }
 
   .Popover_disableInteractive {
     pointer-events: none;

package/__inner__/esm/components/Popover/Popover.js

@@ -19,7 +19,7 @@ import { PopoverContext } from './PopoverContext';
 export var cnPopover = cn('Popover');
 export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Popover' });
-    var _a = props.arrow, arrow = _a === void 0 ? POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? POPOVER_DEFAULT_PLACEMENT : _g, _h = props.strategy, strategy = _h === void 0 ? POPOVER_DEFAULT_STRATEGY : _h, _j = props.disablePreventOverflow, disablePreventOverflow = _j === void 0 ? POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW : _j, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, _k = props.as, as = _k === void 0 ? POPOVER_DEFAULT_TAG : _k, other = __rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "strategy", "disablePreventOverflow", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "as"]);
+    var _a = props.arrow, arrow = _a === void 0 ? POPOVER_DEFAULT_ARROW : _a, _b = props.open, open = _b === void 0 ? POPOVER_DEFAULT_OPEN : _b, _c = props.disableInteractive, disableInteractive = _c === void 0 ? POPOVER_DEFAULT_DISABLE_INTERACTIVE : _c, _d = props.disableEnforceFocus, disableEnforceFocus = _d === void 0 ? POPOVER_DEFAULT_DISABLE_ENFORCE_FOCUS : _d, _e = props.disableReturnFocus, disableReturnFocus = _e === void 0 ? POPOVER_DEFAULT_DISABLE_RETURN_FOCUS : _e, _f = props.disableClickOutside, disableClickOutside = _f === void 0 ? POPOVER_DEFAULT_DISABLE_CLICK_OUTSIDE : _f, _g = props.placement, placement = _g === void 0 ? POPOVER_DEFAULT_PLACEMENT : _g, _h = props.strategy, strategy = _h === void 0 ? POPOVER_DEFAULT_STRATEGY : _h, _j = props.disablePreventOverflow, disablePreventOverflow = _j === void 0 ? POPOVER_DEFAULT_DISABLE_PREVENT_OVERFLOW : _j, ignoreClickOutsideRefs = props.ignoreClickOutsideRefs, arrowProps = props.arrowProps, anchorRef = props.anchorRef, equalAnchorWidth = props.equalAnchorWidth, offset = props.offset, children = props.children, transitionProps = props.transitionProps, onClose = props.onClose, onEnter = props.onEnter, onEntered = props.onEntered, onExit = props.onExit, onExitedProp = props.onExited, className = props.className, position = props.position, style = props.style, setUpdate = props.setUpdate, modifiersProps = props.modifiers, _k = props.as, as = _k === void 0 ? POPOVER_DEFAULT_TAG : _k, other = __rest(props, ["arrow", "open", "disableInteractive", "disableEnforceFocus", "disableReturnFocus", "disableClickOutside", "placement", "strategy", "disablePreventOverflow", "ignoreClickOutsideRefs", "arrowProps", "anchorRef", "equalAnchorWidth", "offset", "children", "transitionProps", "onClose", "onEnter", "onEntered", "onExit", "onExited", "className", "position", "style", "setUpdate", "modifiers", "as"]);
     var _l = __read(useState(false), 2), openState = _l[0], setOpenState = _l[1];
     var focusedElement = useRef(null);
     var popoverRef = useRef(null);
@@ -59,7 +59,7 @@ export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
         }
         onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
     }, [onExitedProp]);
-    var modifiers = useMemo(function () { return [
+    var modifiers = useMemo(function () { return __spreadArray([
         // Вычисление стилей позиционирования
         {
             name: 'computeStyles',
@@ -90,14 +90,20 @@ export var Popover = polymorphicComponentWithRef(function (inProps, ref) {
             phase: 'beforeWrite',
             requires: ['computeStyles'],
         },
+        {
+            name: 'arrow',
+            options: {
+                padding: 12,
+            },
+        },
         // Отступы от якорного элемента
         {
             name: 'offset',
             options: {
                 offset: offset,
             },
-        },
-    ]; }, [offset, equalAnchorWidth]);
+        }
+    ], __read((modifiersProps || [])), false); }, [offset, equalAnchorWidth, modifiersProps]);
     // Якорный элемент или координаты
     var resolveReferenceElement = useMemo(function () {
         if (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)

package/__inner__/esm/components/Popover/types.d.ts

@@ -1,5 +1,6 @@
 import type { RefObject, ComponentRef, ElementType, ReactNode } from 'react';
 import type PopperJS from '@popperjs/core';
+import type { PopperProps } from 'react-popper';
 import type { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { PortalProps } from '../Portal';
@@ -76,6 +77,11 @@ export type PopoverBaseProps = {
     strategy?: PopoverStrategyVariant;
     /** Если {true} позволяет смещаться по границе якорного элемента компонента  */
     disablePreventOverflow?: boolean;
+    /**
+     * Модификаторы для popper.js
+     * https://popper.js.org/docs/v2/modifiers/#custom-modifiers
+     * */
+    modifiers?: PopperProps<unknown>['modifiers'];
 };
 export type PopoverRef = ComponentRef<typeof POPOVER_DEFAULT_TAG>;
 export type PopoverProps<As extends ElementType = typeof POPOVER_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<PopoverBaseProps, As>;

package/__inner__/esm/components/Select/components/SelectConsumer/SelectInputConsumer.js

@@ -8,7 +8,7 @@ export var SelectInputConsumer = function (_a) {
     var _c = __read(context, 1), fieldControl = _c[0];
     var disabled = fieldControl.disabled, required = fieldControl.required, filled = fieldControl.filled, focused = fieldControl.focused, label = fieldControl.label;
     var hasLabel = !!label;
-    var placeholder = (focused || !hasLabel) && !valueProp && placeholderProp;
+    var placeholder = (focused || !hasLabel) && !valueProp && (React.createElement("span", null, placeholderProp));
     return (React.createElement(React.Fragment, null,
         React.createElement("div", __assign({}, fieldProps, { className: cnSelect('Field', { filled: filled, asPlaceholder: !!placeholder }, [
                 fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.className,

package/__inner__/esm/components/Select/types.d.ts

@@ -5,7 +5,6 @@ import type { SelectInputProps } from './components';
 export type SelectSizeVariant = FormElementSizeVariant;
 export type SelectLabel = string | number | undefined;
 export type SelectPropLabel<MULTIPLE extends boolean> = (MULTIPLE extends true ? SelectLabel[] : SelectLabel) | undefined;
-export type SelectValue = string | number | undefined;
 export type SelectPropValue<MULTIPLE extends boolean> = DataListSelected<MULTIPLE>;
 export type SelectedOptionProp<MULTIPLE extends boolean> = {
     label?: SelectPropLabel<MULTIPLE>;

package/__inner__/esm/components/Tooltip/Tooltip.css

@@ -4,6 +4,8 @@
   color: var(--color-content-primary);
 }
 .Tooltip_size_xs {
+      min-inline-size: 28px;
+      min-block-size: 28px;
       padding: var(--spacing-2xs) var(--spacing-xs);
 
       font: var(--typography-text-xs-font);
@@ -13,6 +15,8 @@
       text-transform: var(--typography-text-xs-text_transform, none);
     }
 .Tooltip_size_s {
+      min-inline-size: 40px;
+      min-block-size: 40px;
       padding: var(--spacing-xs) var(--spacing-s);
 
       font: var(--typography-text-s-font);

package/__inner__/esm/components/Tooltip/Tooltip.js

@@ -21,6 +21,14 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
     var _m = __read(useState(), 2), hasFocus = _m[0], setHasFocus = _m[1];
     var _o = __read(useState(), 2), hasHover = _o[0], setHasHover = _o[1];
     var anchorRef = useRef(null);
+    var modifiers = [
+        {
+            name: 'arrow',
+            options: {
+                padding: size === 'xs' ? 8 : 12,
+            },
+        },
+    ];
     var _p = __read(useControlled({
         value: openProp,
         defaultValue: false,
@@ -118,6 +126,6 @@ export var Tooltip = polymorphicComponentWithRef(function (inProps, ref) {
         React.cloneElement(resolveChildren, composeChildrenProps),
         React.createElement(Popover, __assign({ anchorRef: anchorRef, strategy: "absolute", as: as, background: "main" }, (variant === 'dark' && { background: 'main-inverse' }), (inverse && { background: 'main-inverse' }), { radius: size === 'xs' ? 's' : 'l' }, other, { ref: ref, offset: offset, placement: placement, open: openState && !disabled, onClose: handleClose, className: cnTooltip({ size: size, variant: variant, inverse: inverse }, [className]), disableInteractive: disableInteractive, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, arrow: arrow, arrowProps: {
                 size: size,
-            }, disableEnforceFocus: true, disableReturnFocus: true }), label)));
+            }, modifiers: modifiers, disableEnforceFocus: true, disableReturnFocus: true }), label)));
 });
 Tooltip.displayName = 'Tooltip';

package/__inner__/esm/utils/getScrollBarSize/getScrollbarSize.js

@@ -1,7 +1,6 @@
 export var getScrollbarSize = function (el) {
-    if (el === void 0) { el = document.body; }
-    if (el === document.body) {
-        return window.innerWidth - el.offsetWidth;
+    if (!el || el === document.body) {
+        return window.innerWidth - document.documentElement.clientWidth;
     }
-    return el.offsetWidth - el.scrollWidth;
+    return el.offsetWidth - el.clientWidth;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "description": "React component library",
   "files": [
     "*"
@@ -28,9 +28,9 @@
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.2",
-    "@ozen-ui/fonts": "0.49.0",
-    "@ozen-ui/icons": "0.49.0",
-    "@ozen-ui/logger": "0.49.0"
+    "@ozen-ui/fonts": "0.50.0",
+    "@ozen-ui/icons": "0.50.0",
+    "@ozen-ui/logger": "0.50.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2 <19.0.0",