@salutejs/plasma-new-hope 0.338.0-canary.2280.18412321271.0 → 0.338.0-canary.2280.18494951721.0

package/styled-components/cjs/components/Drawer/Drawer.js

@@ -134,7 +134,7 @@ function _object_without_properties_loose(source, excluded) {
 }
 var drawerRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(_param, outerRef) {
-        var id = _param.id, zIndex = _param.zIndex, popupInfo = _param.popupInfo, withBlur = _param.withBlur, children = _param.children, view = _param.view, size = _param.size, width = _param.width, height = _param.height, isOpen = _param.isOpen, opened = _param.opened, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, animationInfo = _param.animationInfo, className = _param.className, customBackgroundColor = _param.customBackgroundColor, customContentBackgroundColor = _param.customContentBackgroundColor, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, offset = _param.offset, frame = _param.frame, _param_borderRadius = _param.borderRadius, borderRadius = _param_borderRadius === void 0 ? 'none' : _param_borderRadius, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'right' : _param_placement, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_asModal = _param.asModal, asModal = _param_asModal === void 0 ? true : _param_asModal, draggable = _param.draggable, rest = _object_without_properties(_param, [
+        var id = _param.id, zIndex = _param.zIndex, popupInfo = _param.popupInfo, withBlur = _param.withBlur, children = _param.children, view = _param.view, size = _param.size, width = _param.width, height = _param.height, isOpen = _param.isOpen, opened = _param.opened, initialFocusRef = _param.initialFocusRef, focusAfterRef = _param.focusAfterRef, animationInfo = _param.animationInfo, className = _param.className, customBackgroundColor = _param.customBackgroundColor, customContentBackgroundColor = _param.customContentBackgroundColor, onClose = _param.onClose, onOverlayClick = _param.onOverlayClick, onEscKeyDown = _param.onEscKeyDown, offset = _param.offset, frame = _param.frame, _param_positionFixed = _param.positionFixed, positionFixed = _param_positionFixed === void 0 ? false : _param_positionFixed, _param_borderRadius = _param.borderRadius, borderRadius = _param_borderRadius === void 0 ? 'none' : _param_borderRadius, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'right' : _param_placement, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_asModal = _param.asModal, asModal = _param_asModal === void 0 ? true : _param_asModal, draggable = _param.draggable, rest = _object_without_properties(_param, [
             "id",
             "zIndex",
             "popupInfo",
@@ -157,6 +157,7 @@ var drawerRoot = function(Root) {
             "onEscKeyDown",
             "offset",
             "frame",
+            "positionFixed",
             "borderRadius",
             "placement",
             "closeOnEsc",
@@ -208,6 +209,7 @@ var drawerRoot = function(Root) {
             placement: placement,
             popupInfo: drawerInfo,
             frame: frame,
+            positionFixed: positionFixed,
             width: innerWidth,
             height: innerHeight,
             offset: offset,

package/styled-components/cjs/components/Popover/Popover.js

@@ -28,6 +28,7 @@ var _plasmacore = require("@salutejs/plasma-core");
 var _hooks = require("../../hooks");
 var _utils = require("../../utils");
 var _Portal = require("../Portal");
+var _Resizable = require("../_Resizable");
 var _base = require("./variations/_view/base");
 var _Popoverstyles = require("./Popover.styles");
 var _Popovertokens = require("./Popover.tokens");
@@ -209,7 +210,7 @@ var popoverRoot = function(Root) {
         var target = _param.target, children = _param.children, animated = _param.animated, isOpen = _param.isOpen, opened = _param.opened, _param_trigger = _param.trigger, trigger = _param_trigger === void 0 ? 'click' : _param_trigger, hasArrow = _param.hasArrow, _param_frame = _param.frame, frame = _param_frame === void 0 ? 'document' : _param_frame, className = _param.className, _param_placement = _param.placement, placement = _param_placement === void 0 ? 'auto' : _param_placement, _param_offset = _param.offset, offset = _param_offset === void 0 ? [
             0,
             0
-        ] : _param_offset, zIndex = _param.zIndex, _param_isFocusTrapped = _param.isFocusTrapped, isFocusTrapped = _param_isFocusTrapped === void 0 ? true : _param_isFocusTrapped, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_preventOverflow = _param.preventOverflow, preventOverflow = _param_preventOverflow === void 0 ? true : _param_preventOverflow, _param_usePortal = _param.usePortal, usePortal = _param_usePortal === void 0 ? false : _param_usePortal, view = _param.view, onToggle = _param.onToggle, closeOnOverlayClick = _param.closeOnOverlayClick, rest = _object_without_properties(_param, [
+        ] : _param_offset, zIndex = _param.zIndex, _param_isFocusTrapped = _param.isFocusTrapped, isFocusTrapped = _param_isFocusTrapped === void 0 ? true : _param_isFocusTrapped, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, _param_preventOverflow = _param.preventOverflow, preventOverflow = _param_preventOverflow === void 0 ? true : _param_preventOverflow, _param_usePortal = _param.usePortal, usePortal = _param_usePortal === void 0 ? false : _param_usePortal, resizable = _param.resizable, view = _param.view, onToggle = _param.onToggle, onResizeStart = _param.onResizeStart, onResizeEnd = _param.onResizeEnd, closeOnOverlayClick = _param.closeOnOverlayClick, rest = _object_without_properties(_param, [
             "target",
             "children",
             "animated",
@@ -226,8 +227,11 @@ var popoverRoot = function(Root) {
             "closeOnEsc",
             "preventOverflow",
             "usePortal",
+            "resizable",
             "view",
             "onToggle",
+            "onResizeStart",
+            "onResizeEnd",
             "closeOnOverlayClick"
         ]);
         var _placement_;
@@ -463,7 +467,11 @@ var popoverRoot = function(Root) {
             className: _Popovertokens.classes.arrow,
             ref: setArrowElement,
             style: styles.arrow
-        }, attributes.arrow)), children)))));
+        }, attributes.arrow)), /*#__PURE__*/ _react.default.createElement(_Resizable.Resizable, {
+            resizable: resizable,
+            onResizeStart: onResizeStart,
+            onResizeEnd: onResizeEnd
+        }, children))))));
     });
 };
 var popoverConfig = {

package/styled-components/cjs/components/Popup/Popup.styles.js

@@ -81,25 +81,25 @@ var base = (0, _styledcomponents.css)([
 ], _Popuptokens.classes.draggablePopupWrapper, _Popuptokens.classes.draggingPopupWrapper, _Popuptokens.classes.resizableContainerNoSelect);
 var StyledPortal = _styledcomponents.default.div.withConfig({
     displayName: "Popup.styles__StyledPortal",
-    componentId: "sc-e8036c4-0"
+    componentId: "sc-e809f9e3-0"
 })([
     ""
 ]);
 var StyledPortalContainer = _styledcomponents.default.div.withConfig({
     displayName: "Popup.styles__StyledPortalContainer",
-    componentId: "sc-e8036c4-1"
+    componentId: "sc-e809f9e3-1"
 })([
     "width:0;"
 ]);
 var PopupView = _styledcomponents.default.div.withConfig({
     displayName: "Popup.styles__PopupView",
-    componentId: "sc-e8036c4-2"
+    componentId: "sc-e809f9e3-2"
 })([
     "position:relative;max-width:100%;pointer-events:all;"
 ]);
 var PopupRootContainer = _styledcomponents.default.div.withConfig({
     displayName: "Popup.styles__PopupRootContainer",
-    componentId: "sc-e8036c4-3"
+    componentId: "sc-e809f9e3-3"
 })([
     "position:",
     ";z-index:",
@@ -110,8 +110,8 @@ var PopupRootContainer = _styledcomponents.default.div.withConfig({
     ";transform:",
     ";"
 ], function(param) {
-    var frame = param.frame;
-    return frame === 'document' ? 'fixed' : 'absolute';
+    var frame = param.frame, positionFixed = param.positionFixed;
+    return frame === 'document' || positionFixed ? 'fixed' : 'absolute';
 }, function(param) {
     var zIndex = param.zIndex;
     return zIndex || _utils.DEFAULT_Z_INDEX;
@@ -133,7 +133,7 @@ var PopupRootContainer = _styledcomponents.default.div.withConfig({
 });
 var IconResizeDiagonalStyled = (0, _styledcomponents.default)(_Icon.IconResizeDiagonal).withConfig({
     displayName: "Popup.styles__IconResizeDiagonalStyled",
-    componentId: "sc-e8036c4-4"
+    componentId: "sc-e809f9e3-4"
 })([
     "color:var(--text-secondary);&:hover{color:var(--text-secondary-hover);}&:active{color:var(--text-secondary-active);}&.",
     "{transform:rotate(-90deg);}&.",

package/styled-components/cjs/components/ProgressBarCircular/ProgressBarCircular.js

@@ -17,20 +17,10 @@ _export(exports, {
     }
 });
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-var _plasmacore = require("@salutejs/plasma-core");
-var _utils = require("../../utils");
 var _base = require("./variations/_view/base");
 var _base1 = require("./variations/_size/base");
 var _ProgressBarCircularstyles = require("./ProgressBarCircular.styles");
 var _ProgressBarCirculartokens = require("./ProgressBarCircular.tokens");
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -85,33 +75,6 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -154,20 +117,9 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
 var progressBarCircularRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
-        var _props_value = props.value, value = _props_value === void 0 ? 0 : _props_value, _props_maxValue = props.maxValue, maxValue = _props_maxValue === void 0 ? 100 : _props_maxValue, size = props.size, view = props.view, children = props.children, className = props.className, strokeWidthProp = props.strokeWidth, rest = _object_without_properties(props, [
+        var _props_value = props.value, value = _props_value === void 0 ? 0 : _props_value, _props_maxValue = props.maxValue, maxValue = _props_maxValue === void 0 ? 100 : _props_maxValue, size = props.size, view = props.view, children = props.children, className = props.className, strokeWidth = props.strokeWidth, rest = _object_without_properties(props, [
             "value",
             "maxValue",
             "size",
@@ -176,52 +128,30 @@ var progressBarCircularRoot = function(Root) {
             "className",
             "strokeWidth"
         ]);
-        var _useState = _sliced_to_array((0, _react.useState)(0), 2), strokeWidthCSS = _useState[0], setStrokeWidthCSS = _useState[1];
-        var _useState1 = _sliced_to_array((0, _react.useState)(0), 2), widthCSS = _useState1[0], setWidthCSS = _useState1[1];
-        var rootRef = (0, _react.useRef)(null);
-        var rootForkRef = (0, _plasmacore.useForkRef)(rootRef, ref);
         var clampedValue = Math.min(Math.max(value, 0), maxValue);
         var percentage = clampedValue / maxValue * 100;
-        var strokeWidth = (strokeWidthProp !== null && strokeWidthProp !== void 0 ? strokeWidthProp : strokeWidthCSS) * 2;
         var center = 50;
-        var radius = center - 50 / widthCSS * (strokeWidth / 2);
-        var circumference = 2 * Math.PI * radius;
-        var strokeDashoffset = circumference - percentage / 100 * circumference;
-        (0, _react.useLayoutEffect)(function() {
-            if (rootRef.current) {
-                var strokeWidthFromCSS = (0, _utils.getTokenValueInPixels)(_ProgressBarCirculartokens.tokens.progressStrokeWidth, rootRef.current);
-                var widthFromCSS = (0, _utils.getTokenValueInPixels)(_ProgressBarCirculartokens.tokens.width, rootRef.current);
-                setStrokeWidthCSS(strokeWidthFromCSS !== null && strokeWidthFromCSS !== void 0 ? strokeWidthFromCSS : 0);
-                setWidthCSS(widthFromCSS !== null && widthFromCSS !== void 0 ? widthFromCSS : 0);
-            }
-        }, [
-            rootRef,
-            size
-        ]);
         return /*#__PURE__*/ _react.default.createElement(Root, _object_spread({
-            ref: rootForkRef,
+            ref: ref,
             view: view,
             size: size,
-            className: (0, _utils.cx)(className)
+            className: className
         }, rest), /*#__PURE__*/ _react.default.createElement(_ProgressBarCircularstyles.StyledSVG, {
             width: "100%",
             height: "100%",
             viewBox: "0 0 100 100",
             className: _ProgressBarCirculartokens.classes.svg
         }, /*#__PURE__*/ _react.default.createElement(_ProgressBarCircularstyles.StyledBackgroundCircle, {
-            customStrokeWidth: 50 / widthCSS * strokeWidth,
+            customStrokeWidth: strokeWidth,
             cx: center,
             cy: center,
-            r: radius,
             className: _ProgressBarCirculartokens.classes.backgroundCircle
         }), /*#__PURE__*/ _react.default.createElement(_ProgressBarCircularstyles.StyledProgressCircle, {
             cx: center,
             cy: center,
-            r: radius,
-            customStrokeWidth: 50 / widthCSS * strokeWidth,
+            customStrokeWidth: strokeWidth,
             className: _ProgressBarCirculartokens.classes.progressCircle,
-            strokeDasharray: circumference,
-            strokeDashoffset: strokeDashoffset,
+            percent: percentage,
             transform: "rotate(-90 50 50)"
         })), children && /*#__PURE__*/ _react.default.createElement(_ProgressBarCircularstyles.StyledContent, {
             className: _ProgressBarCirculartokens.classes.content

package/styled-components/cjs/components/ProgressBarCircular/ProgressBarCircular.styles.js

@@ -72,38 +72,50 @@ var base = (0, _styledcomponents.css)([
     "position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(",
     ");height:var(",
     ");"
-], _ProgressBarCirculartokens.tokens.width, _ProgressBarCirculartokens.tokens.height);
+], _ProgressBarCirculartokens.tokens.height, _ProgressBarCirculartokens.tokens.height);
 var StyledSVG = _styledcomponents.default.svg.withConfig({
     displayName: "ProgressBarCircular.styles__StyledSVG",
-    componentId: "sc-d5c5c64b-0"
+    componentId: "sc-91481a88-0"
 })([
     "width:100%;height:100%;"
 ]);
 var StyledBackgroundCircle = _styledcomponents.default.circle.withConfig({
     displayName: "ProgressBarCircular.styles__StyledBackgroundCircle",
-    componentId: "sc-d5c5c64b-1"
+    componentId: "sc-91481a88-1"
 })([
-    "fill:none;stroke:var(",
+    "fill:none;r:",
+    ";stroke:var(",
     ");stroke-width:",
     ";"
-], _ProgressBarCirculartokens.tokens.backgroundStroke, function(param) {
-    var customStrokeWidth = param.customStrokeWidth;
-    return customStrokeWidth ? "".concat(customStrokeWidth, "px") : "var(".concat(_ProgressBarCirculartokens.tokens.backgroundStrokeWidth, ")");
+], function(param) {
+    var _param_customStrokeWidth = param.customStrokeWidth, customStrokeWidth = _param_customStrokeWidth === void 0 ? "var(".concat(_ProgressBarCirculartokens.tokens.strokeSize, ")") : _param_customStrokeWidth;
+    return "calc(50px - calc(calc(50px / var(".concat(_ProgressBarCirculartokens.tokens.size, ")) * ").concat(customStrokeWidth, "))");
+}, _ProgressBarCirculartokens.tokens.backgroundStroke, function(param) {
+    var _param_customStrokeWidth = param.customStrokeWidth, customStrokeWidth = _param_customStrokeWidth === void 0 ? "var(".concat(_ProgressBarCirculartokens.tokens.strokeSize, ")") : _param_customStrokeWidth;
+    return "calc(calc(50px / var(".concat(_ProgressBarCirculartokens.tokens.size, ")) * calc(").concat(customStrokeWidth, ") * 2)");
 });
 var StyledProgressCircle = _styledcomponents.default.circle.withConfig({
     displayName: "ProgressBarCircular.styles__StyledProgressCircle",
-    componentId: "sc-d5c5c64b-2"
+    componentId: "sc-91481a88-2"
 })([
-    "fill:none;stroke:var(",
+    "--percentage:",
+    ";--radius:",
+    ";--circumference:calc(calc(2 * 3.1415926535) * var(--radius));--dashoffset:calc(var(--circumference) - (var(--percentage,0) * var(--circumference) / 100));fill:none;stroke:var(",
     ");stroke-width:",
-    ";stroke-linecap:round;transition:stroke-dashoffset 0.3s ease-in-out;"
-], _ProgressBarCirculartokens.tokens.progressStroke, function(param) {
-    var customStrokeWidth = param.customStrokeWidth;
-    return customStrokeWidth ? "".concat(customStrokeWidth, "px") : "var(".concat(_ProgressBarCirculartokens.tokens.progressStrokeWidth, ")");
+    ";stroke-linecap:round;r:var(--radius);stroke-dasharray:var(--circumference);stroke-dashoffset:var(--dashoffset);transition:stroke-dashoffset 0.3s ease-in-out;"
+], function(param) {
+    var percent = param.percent;
+    return percent !== null && percent !== void 0 ? percent : 0;
+}, function(param) {
+    var _param_customStrokeWidth = param.customStrokeWidth, customStrokeWidth = _param_customStrokeWidth === void 0 ? "var(".concat(_ProgressBarCirculartokens.tokens.strokeSize, ")") : _param_customStrokeWidth;
+    return "calc(50px - calc(calc(50px / var(".concat(_ProgressBarCirculartokens.tokens.size, ")) * ").concat(customStrokeWidth, "))");
+}, _ProgressBarCirculartokens.tokens.progressStroke, function(param) {
+    var _param_customStrokeWidth = param.customStrokeWidth, customStrokeWidth = _param_customStrokeWidth === void 0 ? "var(".concat(_ProgressBarCirculartokens.tokens.strokeSize, ")") : _param_customStrokeWidth;
+    return "calc(calc(50px / var(".concat(_ProgressBarCirculartokens.tokens.size, ")) * calc(").concat(customStrokeWidth, ") * 2)");
 });
 var StyledContent = _styledcomponents.default.div.withConfig({
     displayName: "ProgressBarCircular.styles__StyledContent",
-    componentId: "sc-d5c5c64b-3"
+    componentId: "sc-91481a88-3"
 })([
     "position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(",
     ");font-family:var(",

package/styled-components/cjs/components/ProgressBarCircular/ProgressBarCircular.tokens.js

@@ -23,12 +23,13 @@ var classes = {
     content: '--plasma-progressbar-circular-content'
 };
 var tokens = {
+    size: '--plasma-progressbar-circular-size',
     width: '--plasma-progressbar-circular-width',
     height: '--plasma-progressbar-circular-height',
+    strokeWidth: '--plasma-progressbar-circular-stroke-width',
+    strokeSize: '--plasma-progressbar-circular-stroke-size',
     backgroundStroke: '--plasma-progressbar-circular-background-stroke',
-    backgroundStrokeWidth: '--plasma-progressbar-circular-background-stroke-width',
     progressStroke: '--plasma-progressbar-circular-progress-stroke',
-    progressStrokeWidth: '--plasma-progressbar-circular-progress-stroke-width',
     contentColor: '--plasma-progressbar-circular-content-color',
     contentFontFamily: '--plasma-progressbar-circular-content-font-family',
     contentFontSize: '--plasma-progressbar-circular-content-font-size',

package/styled-components/cjs/components/Slider/ui/Handler/Handler.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "Handler", {
 });
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _reactdraggable = /*#__PURE__*/ _interop_require_default(require("react-draggable"));
+var _plasmacore = require("@salutejs/plasma-core");
 var _utils = require("../../../../utils");
 var _utils1 = require("../../utils");
 var _Thumb = require("../Thumb/Thumb");
@@ -185,10 +186,12 @@ var Handler = /*#__PURE__*/ (0, _react.forwardRef)(function(_param, ref) {
         "value",
         "valuePlacement"
     ]);
+    var nodeRef = (0, _react.useRef)(null);
+    var combinedRef = (0, _plasmacore.useForkRef)(nodeRef, ref);
     var isVertical = orientation === 'vertical';
     var _useState = _sliced_to_array((0, _react.useState)(false), 2), isDrag = _useState[0], setIsDrag = _useState[1];
     var lastOnChangeValue = (0, _react.useRef)();
-    var _getOffsets = _sliced_to_array((0, _utils1.getOffsets)(ref, side, isVertical), 2), startClientOffset = _getOffsets[0], endClientOffset = _getOffsets[1];
+    var _getOffsets = _sliced_to_array((0, _utils1.getOffsets)(nodeRef, side, isVertical), 2), startClientOffset = _getOffsets[0], endClientOffset = _getOffsets[1];
     var _bounds = _sliced_to_array(bounds, 2), startValueBound = _bounds[0], endValueBound = _bounds[1];
     var startPositionBound = startValueBound ? (startValueBound - min) * stepSize : null;
     var endPositionBound = endValueBound ? (endValueBound - min) * stepSize : null;
@@ -244,6 +247,7 @@ var Handler = /*#__PURE__*/ (0, _react.forwardRef)(function(_param, ref) {
         isPointerHidden = false;
     }
     return /*#__PURE__*/ _react.default.createElement(_reactdraggable.default, {
+        nodeRef: nodeRef,
         axis: isVertical ? 'y' : 'x',
         bounds: computedBounds,
         grid: isVertical ? [
@@ -259,7 +263,7 @@ var Handler = /*#__PURE__*/ (0, _react.forwardRef)(function(_param, ref) {
         position: dragPosition,
         disabled: disabled
     }, /*#__PURE__*/ _react.default.createElement(_Handlerstyles.HandlerStyled, {
-        ref: ref,
+        ref: combinedRef,
         style: {
             zIndex: zIndex
         },

package/styled-components/cjs/components/Table/Table.js

@@ -181,7 +181,7 @@ function _unsupported_iterable_to_array(o, minLen) {
 var SELECT_COLUMN_ID = 'SELECT_COLUMN_UNIQUE_ID';
 var tableRoot = function(Root) {
     return /*#__PURE__*/ (0, _react.forwardRef)(function(_param, ref) {
-        var data = _param.data, onChange = _param.onChange, columns = _param.columns, view = _param.view, size = _param.size, _param_borderVariant = _param.borderVariant, borderVariant = _param_borderVariant === void 0 ? 'all' : _param_borderVariant, enableSelection = _param.enableSelection, outerSelected = _param.selected, outerFiltered = _param.filtered, outerSorted = _param.sorted, maxHeight = _param.maxHeight, stickyHeader = _param.stickyHeader, onCellUpdate = _param.onCellUpdate, props = _object_without_properties(_param, [
+        var data = _param.data, onChange = _param.onChange, columns = _param.columns, view = _param.view, size = _param.size, _param_borderVariant = _param.borderVariant, borderVariant = _param_borderVariant === void 0 ? 'all' : _param_borderVariant, _param_enableSelection = _param.enableSelection, enableSelection = _param_enableSelection === void 0 ? false : _param_enableSelection, outerSelected = _param.selected, outerFiltered = _param.filtered, outerSorted = _param.sorted, maxHeight = _param.maxHeight, _param_stickyHeader = _param.stickyHeader, stickyHeader = _param_stickyHeader === void 0 ? false : _param_stickyHeader, onCellUpdate = _param.onCellUpdate, setRowProps = _param.setRowProps, props = _object_without_properties(_param, [
             "data",
             "onChange",
             "columns",
@@ -194,7 +194,8 @@ var tableRoot = function(Root) {
             "sorted",
             "maxHeight",
             "stickyHeader",
-            "onCellUpdate"
+            "onCellUpdate",
+            "setRowProps"
         ]);
         var _useState = _sliced_to_array((0, _react.useState)(outerSelected || {}), 2), innerSelected = _useState[0], innerSetSelected = _useState[1];
         var _useState1 = _sliced_to_array((0, _react.useState)(outerFiltered || []), 2), innerFiltered = _useState1[0], setInnerFiltered = _useState1[1];
@@ -269,7 +270,7 @@ var tableRoot = function(Root) {
                     enableResizing: false
                 }
             ] : []).concat(_to_consumable_array(columns.map(function(param) {
-                var id = param.id, label = param.label, filters = param.filters, _param_enableSorting = param.enableSorting, enableSorting = _param_enableSorting === void 0 ? false : _param_enableSorting, _param_enableResizing = param.enableResizing, enableResizing = _param_enableResizing === void 0 ? false : _param_enableResizing, outerFilterFn = param.filterFn, columnSize = param.width, _param_enableEditing = param.enableEditing, enableEditing = _param_enableEditing === void 0 ? false : _param_enableEditing, renderCell = param.renderCell;
+                var id = param.id, label = param.label, filters = param.filters, _param_enableSorting = param.enableSorting, enableSorting = _param_enableSorting === void 0 ? false : _param_enableSorting, _param_enableResizing = param.enableResizing, enableResizing = _param_enableResizing === void 0 ? false : _param_enableResizing, outerFilterFn = param.filterFn, columnSize = param.width, _param_enableEditing = param.enableEditing, enableEditing = _param_enableEditing === void 0 ? false : _param_enableEditing, renderCell = param.renderCell, setCellProps = param.setCellProps;
                 return {
                     header: label,
                     accessorKey: id,
@@ -287,7 +288,8 @@ var tableRoot = function(Root) {
                     meta: {
                         filters: filters,
                         enableEditing: enableEditing,
-                        renderCell: renderCell
+                        renderCell: renderCell,
+                        setCellProps: setCellProps
                     }
                 };
             })));
@@ -354,27 +356,30 @@ var tableRoot = function(Root) {
                 });
             }));
         })), /*#__PURE__*/ _react.default.createElement(_Tablestyles.Tbody, null, table.getRowModel().rows.map(function(row) {
-            return /*#__PURE__*/ _react.default.createElement(_Tablestyles.Tr, {
+            return /*#__PURE__*/ _react.default.createElement(_Tablestyles.Tr, _object_spread({
                 key: row.id,
                 selected: row.getIsSelected()
-            }, row.getVisibleCells().map(function(cell) {
-                var // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            }, setRowProps === null || setRowProps === void 0 ? void 0 : setRowProps(row.original)), row.getVisibleCells().map(function(cell) {
+                var _cell_column_columnDef_meta_setCellProps, _cell_column_columnDef_meta, _cell_column_columnDef, _cell_column, _cell_column_columnDef_meta1, _cell_column_columnDef1, _cell_column1;
+                var additionalProps = (cell === null || cell === void 0 ? void 0 : (_cell_column = cell.column) === null || _cell_column === void 0 ? void 0 : (_cell_column_columnDef = _cell_column.columnDef) === null || _cell_column_columnDef === void 0 ? void 0 : (_cell_column_columnDef_meta = _cell_column_columnDef.meta) === null || _cell_column_columnDef_meta === void 0 ? void 0 : (_cell_column_columnDef_meta_setCellProps = _cell_column_columnDef_meta.setCellProps) === null || _cell_column_columnDef_meta_setCellProps === void 0 ? void 0 : _cell_column_columnDef_meta_setCellProps.call(_cell_column_columnDef_meta, cell.row.original, cell.id)) || {};
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
-                _cell_column_columnDef_meta, _cell_column_columnDef, _cell_column;
-                return (cell === null || cell === void 0 ? void 0 : (_cell_column = cell.column) === null || _cell_column === void 0 ? void 0 : (_cell_column_columnDef = _cell_column.columnDef) === null || _cell_column_columnDef === void 0 ? void 0 : (_cell_column_columnDef_meta = _cell_column_columnDef.meta) === null || _cell_column_columnDef_meta === void 0 ? void 0 : _cell_column_columnDef_meta.enableEditing) ? /*#__PURE__*/ _react.default.createElement(_ui.EditableCell, {
+                return (cell === null || cell === void 0 ? void 0 : (_cell_column1 = cell.column) === null || _cell_column1 === void 0 ? void 0 : (_cell_column_columnDef1 = _cell_column1.columnDef) === null || _cell_column_columnDef1 === void 0 ? void 0 : (_cell_column_columnDef_meta1 = _cell_column_columnDef1.meta) === null || _cell_column_columnDef_meta1 === void 0 ? void 0 : _cell_column_columnDef_meta1.enableEditing) ? /*#__PURE__*/ _react.default.createElement(_ui.EditableCell, {
                     key: cell.id,
                     size: size,
                     cell: cell,
                     borderVariant: borderVariant,
                     table: table,
                     selected: row.getIsSelected(),
-                    view: view
+                    view: view,
+                    additionalProps: additionalProps
                 }) : /*#__PURE__*/ _react.default.createElement(_ui.Cell, {
                     key: cell.id,
                     cell: cell,
                     borderVariant: borderVariant,
                     selected: row.getIsSelected(),
-                    view: view
+                    view: view,
+                    additionalProps: additionalProps
                 });
             }));
         }))));

package/styled-components/cjs/components/Table/ui/Cell/Cell.js

@@ -13,22 +13,50 @@ var _reacttable = require("@tanstack/react-table");
 var _Tablestyles = require("../../Table.styles");
 var _Table = require("../../Table");
 var _Cellstyles = require("./Cell.styles");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
 var Cell = function(param) {
-    var cell = param.cell, borderVariant = param.borderVariant, selected = param.selected, view = param.view;
+    var cell = param.cell, borderVariant = param.borderVariant, selected = param.selected, view = param.view, additionalProps = param.additionalProps;
     var _cell_column_columnDef_meta;
     var renderCell = (_cell_column_columnDef_meta = cell.column.columnDef.meta) === null || _cell_column_columnDef_meta === void 0 ? void 0 : _cell_column_columnDef_meta.renderCell;
-    return /*#__PURE__*/ _react.default.createElement(_Cellstyles.Td, {
+    return /*#__PURE__*/ _react.default.createElement(_Cellstyles.Td, _object_spread({
         key: cell.id,
         borderVariant: borderVariant,
         selectionCell: cell.column.id === _Table.SELECT_COLUMN_ID,
         selected: selected,
         view: view
-    }, renderCell ? renderCell(cell.getValue(), cell.row.original, cell.row.index) : (0, _reacttable.flexRender)(cell.column.columnDef.cell, cell.getContext()), cell.column.getIsResizing() && /*#__PURE__*/ _react.default.createElement(_Tablestyles.Resizer, {
+    }, additionalProps), renderCell ? renderCell(cell.getValue(), cell.row.original, cell.row.index) : (0, _reacttable.flexRender)(cell.column.columnDef.cell, cell.getContext()), cell.column.getIsResizing() && /*#__PURE__*/ _react.default.createElement(_Tablestyles.Resizer, {
         isResizing: true
     }));
 };

package/styled-components/cjs/components/Table/ui/EditableCell/EditableCell.js

@@ -25,6 +25,19 @@ function _array_like_to_array(arr, len) {
 function _array_with_holes(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -93,6 +106,21 @@ function _iterable_to_array_limit(arr, i) {
 function _non_iterable_rest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
 function _sliced_to_array(arr, i) {
     return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
@@ -110,7 +138,7 @@ var keys = {
     Escape: 'Escape'
 };
 var EditableCell = function(param) {
-    var size = param.size, view = param.view, cell = param.cell, borderVariant = param.borderVariant, table = param.table, selected = param.selected;
+    var size = param.size, view = param.view, cell = param.cell, borderVariant = param.borderVariant, table = param.table, selected = param.selected, additionalProps = param.additionalProps;
     var _table_options_meta;
     var _useState = _sliced_to_array((0, _react.useState)(cell.getValue()), 2), value = _useState[0], setValue = _useState[1];
     var _useState1 = _sliced_to_array((0, _react.useState)(false), 2), editingMode = _useState1[0], setEditingMode = _useState1[1];
@@ -161,7 +189,7 @@ var EditableCell = function(param) {
                 }
         }
     };
-    return /*#__PURE__*/ _react.default.createElement(_EditableCellstyles.Td, {
+    return /*#__PURE__*/ _react.default.createElement(_EditableCellstyles.Td, _object_spread({
         key: cell.id,
         borderVariant: borderVariant,
         selectionCell: cell.column.id === _Table.SELECT_COLUMN_ID,
@@ -170,7 +198,7 @@ var EditableCell = function(param) {
         selected: selected,
         view: view,
         ref: ref
-    }, /*#__PURE__*/ _react.default.createElement(_EditableCellstyles.InnerWrapper, null, editingMode ? /*#__PURE__*/ _react.default.createElement(_EditableCellstyles.EditModeWrapper, null, /*#__PURE__*/ _react.default.createElement(_EditableCellstyles.InputWrapper, null, /*#__PURE__*/ _react.default.createElement(_EditableCellstyles.Input, {
+    }, additionalProps), /*#__PURE__*/ _react.default.createElement(_EditableCellstyles.InnerWrapper, null, editingMode ? /*#__PURE__*/ _react.default.createElement(_EditableCellstyles.EditModeWrapper, null, /*#__PURE__*/ _react.default.createElement(_EditableCellstyles.InputWrapper, null, /*#__PURE__*/ _react.default.createElement(_EditableCellstyles.Input, {
         value: value,
         onChange: handleChange,
         autoFocus: true,