@synerise/ds-panels-resizer 1.0.35 → 1.0.37

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.37](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@1.0.36...@synerise/ds-panels-resizer@1.0.37) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-panels-resizer
+
+## [1.0.36](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@1.0.35...@synerise/ds-panels-resizer@1.0.36) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-panels-resizer
+
 ## [1.0.35](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@1.0.34...@synerise/ds-panels-resizer@1.0.35) (2026-02-26)
 
 ### Bug Fixes

package/README.md

@@ -3,9 +3,9 @@ id: panels-resizer
 title: PanelResizer
 ---
 
-The `PanelsResizer` component allows you to create a layout with resizable left and right panels, separated by a draggable resizer.
+The `PanelsResizer` component allows you to create a layout with two resizable panels separated by a draggable resizer. Panels can be arranged side-by-side (default) or stacked top-and-bottom via the `isHorizontal` prop.
 
-Users can adjust the width of the panels by dragging the resizer, providing a flexible and customizable interface.
+Users can adjust the size of the panels by dragging the resizer, providing a flexible and customizable interface.
 
 ## Installation
 
@@ -37,9 +37,10 @@ const App = () => (
 
 ## API
 
-| Property   | Description                                                                        | Type                                            | Default |
-| ---------- | ---------------------------------------------------------------------------------- | ----------------------------------------------- | ------- |
-| leftPanel  | The content to display in the left panel.                                          | React.ReactNode                                 | ---     |
-| rightPanel | The content to display in the right panel.                                         | React.ReactNode                                 | ---     |
-| initial    | Initial widths of the panels. Can specify leftPanel or rightPanel width in pixels. | { leftPanel: number } \| { rightPanel: number } | ---     |
-| scrollable | Whether the panels should be scrollable when their content overflows.              | boolean                                         | false   |
+| Property     | Description                                                                                                      | Type                                            | Default |
+| ------------ | ---------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | ------- |
+| leftPanel    | The content to display in the left (or top, when `isHorizontal`) panel.                                          | React.ReactNode                                 | ---     |
+| rightPanel   | The content to display in the right (or bottom, when `isHorizontal`) panel.                                      | React.ReactNode                                 | ---     |
+| initial      | Initial size of one panel in pixels. Converted to an offset from 50% at mount time.                             | { leftPanel: number } \| { rightPanel: number } | ---     |
+| scrollable   | Whether the panels should be scrollable when their content overflows.                                            | boolean                                         | ---     |
+| isHorizontal | When `true`, panels are stacked top-and-bottom with a horizontal divider instead of the default side-by-side layout. | boolean                                         | false   |

package/dist/PanelResizer.styles.d.ts

@@ -1,3 +1,3 @@
-export declare const PanelsResizerContainer: import("styled-components").StyledComponent<"div", any, {
+export declare const PanelsResizerContainer: import('styled-components').StyledComponent<"div", any, {
     isHorizontal: boolean;
 }, never>;

package/dist/PanelResizer.styles.js

@@ -1,9 +1,8 @@
-import styled, { css } from 'styled-components';
-export var PanelsResizerContainer = styled.div.withConfig({
+import styled, { css } from "styled-components";
+const PanelsResizerContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "PanelResizerstyles__PanelsResizerContainer",
   componentId: "sc-d1bdei-0"
-})(["display:flex;flex-direction:", ";", " overflow:hidden;"], function (props) {
-  return props.isHorizontal ? 'column' : 'row';
-}, function (props) {
-  return props.isHorizontal ? css(["width:-webkit-fill-available;"]) : css(["flex:1;height:-webkit-fill-available;"]);
-});
+})(["display:flex;flex-direction:", ";", " overflow:hidden;"], (props) => props.isHorizontal ? "column" : "row", (props) => props.isHorizontal ? css(["width:-webkit-fill-available;"]) : css(["flex:1;height:-webkit-fill-available;"]));
+export {
+  PanelsResizerContainer
+};

package/dist/PanelsResizer.d.ts

@@ -1,5 +1,5 @@
-import React, { type ReactNode } from 'react';
-import { type InitialVectorOptions } from './utils';
+import { default as React, ReactNode } from 'react';
+import { InitialVectorOptions } from './utils';
 type PanelsResizerProps = {
     leftPanel: ReactNode;
     rightPanel: ReactNode;

package/dist/PanelsResizer.js

@@ -1,85 +1,73 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import * as S from './PanelResizer.styles';
-import { Resizer } from './Resizer';
-import { calculateLeftPanelHeight, calculateLeftPanelWidth, calculateRightPanelHeight, calculateRightPanelWidth, getInitialVector } from './utils';
-export var PanelsResizer = function PanelsResizer(_ref) {
-  var leftPanel = _ref.leftPanel,
-    rightPanel = _ref.rightPanel,
-    initial = _ref.initial,
-    scrollable = _ref.scrollable,
-    _ref$isHorizontal = _ref.isHorizontal,
-    isHorizontal = _ref$isHorizontal === void 0 ? false : _ref$isHorizontal;
-  var containerRef = useRef(null);
-  var _useState = useState(false),
-    isResizing = _useState[0],
-    setIsResizing = _useState[1];
-  var _useState2 = useState(0),
-    vector = _useState2[0],
-    setVector = _useState2[1];
-  var startClientXRef = useRef(0);
-  useEffect(function () {
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback } from "react";
+import { PanelsResizerContainer } from "./PanelResizer.styles.js";
+import { Resizer } from "./Resizer/Resizer.js";
+import { getInitialVector, calculateLeftPanelHeight, calculateLeftPanelWidth, calculateRightPanelHeight, calculateRightPanelWidth } from "./utils/calculatePanelsWidth.js";
+const PanelsResizer = ({
+  leftPanel,
+  rightPanel,
+  initial,
+  scrollable,
+  isHorizontal = false
+}) => {
+  const containerRef = useRef(null);
+  const [isResizing, setIsResizing] = useState(false);
+  const [vector, setVector] = useState(0);
+  const startClientXRef = useRef(0);
+  useEffect(() => {
     if (containerRef.current) {
-      var containerWidth = isHorizontal ? containerRef.current.offsetHeight : containerRef.current.offsetWidth;
-      var initialVector = getInitialVector(initial, containerWidth);
+      const containerWidth = isHorizontal ? containerRef.current.offsetHeight : containerRef.current.offsetWidth;
+      const initialVector = getInitialVector(initial, containerWidth);
       setVector(initialVector);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var handleMouseMove = useCallback(function (event) {
+  const handleMouseMove = useCallback((event) => {
     if (!isResizing) {
       return;
     }
-    var eventClientX = isHorizontal ? event.clientY : event.clientX;
-    var deltaX = eventClientX - startClientXRef.current;
-    setVector(function (prevVector) {
-      return prevVector !== null ? prevVector + deltaX : deltaX;
-    });
+    const eventClientX = isHorizontal ? event.clientY : event.clientX;
+    const deltaX = eventClientX - startClientXRef.current;
+    setVector((prevVector) => prevVector !== null ? prevVector + deltaX : deltaX);
     startClientXRef.current = eventClientX;
   }, [isResizing]);
-  var handleMouseUpOrLeave = useCallback(function () {
+  const handleMouseUpOrLeave = useCallback(() => {
     if (!isResizing) {
       return;
     }
     setIsResizing(false);
   }, [isResizing]);
-  var handleMouseDownOnResizer = useCallback(function (event) {
+  const handleMouseDownOnResizer = useCallback((event) => {
     event.preventDefault();
     setIsResizing(true);
     startClientXRef.current = isHorizontal ? event.clientY : event.clientX;
   }, []);
-  return /*#__PURE__*/React.createElement(S.PanelsResizerContainer, {
-    ref: containerRef,
-    "data-testid": "panels-resizer-container",
-    onMouseUp: handleMouseUpOrLeave,
-    onMouseMove: handleMouseMove,
-    onMouseLeave: handleMouseUpOrLeave,
-    isHorizontal: isHorizontal
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-testid": "left-panel-wrapper",
-    style: _extends({}, isHorizontal ? {
-      height: calculateLeftPanelHeight(vector)
-    } : {
-      width: calculateLeftPanelWidth(vector)
-    }, {
-      pointerEvents: isResizing ? 'none' : 'auto'
-    }, scrollable ? {
-      overflow: 'auto'
-    } : {})
-  }, leftPanel), /*#__PURE__*/React.createElement(Resizer, {
-    onMouseDown: handleMouseDownOnResizer,
-    isHorizontal: isHorizontal
-  }), /*#__PURE__*/React.createElement("div", {
-    "data-testid": "right-panel-wrapper",
-    style: _extends({}, isHorizontal ? {
-      height: calculateRightPanelHeight(vector)
-    } : {
-      width: calculateRightPanelWidth(vector)
-    }, {
-      pointerEvents: isResizing ? 'none' : 'auto',
-      zIndex: 4
-    }, scrollable ? {
-      overflow: 'auto'
-    } : {})
-  }, rightPanel));
-};
+  return /* @__PURE__ */ jsxs(PanelsResizerContainer, { ref: containerRef, "data-testid": "panels-resizer-container", onMouseUp: handleMouseUpOrLeave, onMouseMove: handleMouseMove, onMouseLeave: handleMouseUpOrLeave, isHorizontal, children: [
+    /* @__PURE__ */ jsx("div", { "data-testid": "left-panel-wrapper", style: {
+      ...isHorizontal ? {
+        height: calculateLeftPanelHeight(vector)
+      } : {
+        width: calculateLeftPanelWidth(vector)
+      },
+      pointerEvents: isResizing ? "none" : "auto",
+      ...scrollable ? {
+        overflow: "auto"
+      } : {}
+    }, children: leftPanel }),
+    /* @__PURE__ */ jsx(Resizer, { onMouseDown: handleMouseDownOnResizer, isHorizontal }),
+    /* @__PURE__ */ jsx("div", { "data-testid": "right-panel-wrapper", style: {
+      ...isHorizontal ? {
+        height: calculateRightPanelHeight(vector)
+      } : {
+        width: calculateRightPanelWidth(vector)
+      },
+      pointerEvents: isResizing ? "none" : "auto",
+      zIndex: 4,
+      ...scrollable ? {
+        overflow: "auto"
+      } : {}
+    }, children: rightPanel })
+  ] });
+};
+export {
+  PanelsResizer
+};

package/dist/Resizer/Resizer.d.ts

@@ -1,4 +1,4 @@
-import React, { type MouseEvent } from 'react';
+import { default as React, MouseEvent } from 'react';
 type ResizerProps = {
     onMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
     isHorizontal?: boolean;

package/dist/Resizer/Resizer.js

@@ -1,18 +1,11 @@
-import React from 'react';
-import { DragHandleM } from '@synerise/ds-icon';
-import { Handler, HandlerIcon } from './Resizer.styles';
-var HANDLER_WIDTH = 16;
-export var Resizer = function Resizer(_ref) {
-  var onMouseDown = _ref.onMouseDown,
-    _ref$isHorizontal = _ref.isHorizontal,
-    isHorizontal = _ref$isHorizontal === void 0 ? false : _ref$isHorizontal;
-  return /*#__PURE__*/React.createElement(Handler, {
-    "data-testid": "resizer-handler",
-    onMouseDown: onMouseDown,
-    isHorizontal: isHorizontal
-  }, /*#__PURE__*/React.createElement(HandlerIcon, {
-    component: /*#__PURE__*/React.createElement(DragHandleM, null),
-    size: HANDLER_WIDTH,
-    isHorizontal: isHorizontal
-  }));
-};
+import { jsx } from "react/jsx-runtime";
+import { DragHandleM } from "@synerise/ds-icon";
+import { Handler, HandlerIcon } from "./Resizer.styles.js";
+const HANDLER_WIDTH = 16;
+const Resizer = ({
+  onMouseDown,
+  isHorizontal = false
+}) => /* @__PURE__ */ jsx(Handler, { "data-testid": "resizer-handler", onMouseDown, isHorizontal, children: /* @__PURE__ */ jsx(HandlerIcon, { component: /* @__PURE__ */ jsx(DragHandleM, {}), size: HANDLER_WIDTH, isHorizontal }) });
+export {
+  Resizer
+};

package/dist/Resizer/Resizer.styles.d.ts

@@ -1,5 +1,5 @@
-import { type StyledIcon } from '@synerise/ds-icon';
-export declare const Handler: import("styled-components").StyledComponent<"div", any, {
+import { StyledIcon } from '@synerise/ds-icon';
+export declare const Handler: import('styled-components').StyledComponent<"div", any, {
     isHorizontal: boolean;
 }, never>;
 export declare const HandlerIcon: StyledIcon<{

package/dist/Resizer/Resizer.styles.js

@@ -1,24 +1,14 @@
-import styled, { css } from 'styled-components';
-import Icon from '@synerise/ds-icon';
-export var Handler = styled.div.withConfig({
+import styled, { css } from "styled-components";
+import Icon from "@synerise/ds-icon";
+const Handler = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Resizerstyles__Handler",
   componentId: "sc-s3ii80-0"
-})(["display:flex;align-items:center;", " flex-grow:1;z-index:5;background-color:", ";&:hover{", " background-color:", ";}"], function (props) {
-  return props.isHorizontal ? css(["width:100%;height:16px;justify-content:center;"]) : css(["height:100%;width:16px;"]);
-}, function (props) {
-  return props.theme.palette['grey-200'];
-}, function (props) {
-  return props.isHorizontal ? css(["cursor:ns-resize;"]) : css(["cursor:ew-resize;"]);
-}, function (props) {
-  return props.theme.palette['blue-100'];
-});
-export var HandlerIcon = styled(Icon).withConfig({
+})(["display:flex;align-items:center;", " flex-grow:1;z-index:5;background-color:", ";&:hover{", " background-color:", ";}"], (props) => props.isHorizontal ? css(["width:100%;height:16px;justify-content:center;"]) : css(["height:100%;width:16px;"]), (props) => props.theme.palette["grey-200"], (props) => props.isHorizontal ? css(["cursor:ns-resize;"]) : css(["cursor:ew-resize;"]), (props) => props.theme.palette["blue-100"]);
+const HandlerIcon = /* @__PURE__ */ styled(Icon).withConfig({
   displayName: "Resizerstyles__HandlerIcon",
   componentId: "sc-s3ii80-1"
-})(["svg{fill:", ";", "}&:hover{color:", ";}"], function (props) {
-  return props.theme.palette['grey-600'];
-}, function (props) {
-  return props.isHorizontal && css(["-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);"]);
-}, function (props) {
-  return props.theme.palette['blue-600'];
-});
+})(["svg{fill:", ";", "}&:hover{color:", ";}"], (props) => props.theme.palette["grey-600"], (props) => props.isHorizontal && css(["-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);"]), (props) => props.theme.palette["blue-600"]);
+export {
+  Handler,
+  HandlerIcon
+};

package/dist/Resizer/index.js

@@ -1 +1,4 @@
-export * from './Resizer';
+import { Resizer } from "./Resizer.js";
+export {
+  Resizer
+};

package/dist/index.js

@@ -1 +1,4 @@
-export { PanelsResizer } from './PanelsResizer';
+import { PanelsResizer } from "./PanelsResizer.js";
+export {
+  PanelsResizer
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect';
+import "@testing-library/jest-dom/extend-expect";

package/dist/utils/calculatePanelsWidth.js

@@ -1,27 +1,34 @@
-export var getInitialVector = function getInitialVector(options, containerWidth) {
+const getInitialVector = (options, containerWidth) => {
   if (!options) {
     return 0;
   }
-  var half = containerWidth / 2;
-  if ('leftPanel' in options) {
+  const half = containerWidth / 2;
+  if ("leftPanel" in options) {
     return options.leftPanel - half;
   }
-  if ('rightPanel' in options) {
+  if ("rightPanel" in options) {
     return half - options.rightPanel;
   }
   return 0;
 };
-var HALF_WIDTH = '50%';
-export var calculateLeftPanelWidth = function calculateLeftPanelWidth(vector) {
-  return "calc(" + HALF_WIDTH + " + " + vector + "px)";
+const HALF_WIDTH = "50%";
+const calculateLeftPanelWidth = (vector) => {
+  return `calc(${HALF_WIDTH} + ${vector}px)`;
 };
-export var calculateRightPanelWidth = function calculateRightPanelWidth(vector) {
-  return "calc(" + HALF_WIDTH + " - " + vector + "px)";
+const calculateRightPanelWidth = (vector) => {
+  return `calc(${HALF_WIDTH} - ${vector}px)`;
 };
-var HALF_HEIGHT = '50vh';
-export var calculateLeftPanelHeight = function calculateLeftPanelHeight(vector) {
-  return "calc(" + HALF_HEIGHT + " + " + vector + "px)";
+const HALF_HEIGHT = "50vh";
+const calculateLeftPanelHeight = (vector) => {
+  return `calc(${HALF_HEIGHT} + ${vector}px)`;
+};
+const calculateRightPanelHeight = (vector) => {
+  return `calc(${HALF_HEIGHT} - ${vector}px)`;
+};
+export {
+  calculateLeftPanelHeight,
+  calculateLeftPanelWidth,
+  calculateRightPanelHeight,
+  calculateRightPanelWidth,
+  getInitialVector
 };
-export var calculateRightPanelHeight = function calculateRightPanelHeight(vector) {
-  return "calc(" + HALF_HEIGHT + " - " + vector + "px)";
-};

package/dist/utils/index.js

@@ -1 +1,8 @@
-export * from './calculatePanelsWidth';
+import { calculateLeftPanelHeight, calculateLeftPanelWidth, calculateRightPanelHeight, calculateRightPanelWidth, getInitialVector } from "./calculatePanelsWidth.js";
+export {
+  calculateLeftPanelHeight,
+  calculateLeftPanelWidth,
+  calculateRightPanelHeight,
+  calculateRightPanelWidth,
+  getInitialVector
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-panels-resizer",
-  "version": "1.0.35",
+  "version": "1.0.37",
   "description": "PanelResizer UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,12 +35,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.14.1"
+    "@synerise/ds-icon": "^1.15.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "2faf2c7c6f163f754e51c2c5003a6c7aa448ec4d"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }