@synerise/ds-panels-resizer 1.0.34 → 1.0.36

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
+
+- **panels-resizer:** horizontal panels resizer ([f7628d2](https://github.com/Synerise/synerise-design/commit/f7628d2d3640479dd8bf7ab625a8b87fed5f0ef0))
+
 ## [1.0.34](https://github.com/Synerise/synerise-design/compare/@synerise/ds-panels-resizer@1.0.33...@synerise/ds-panels-resizer@1.0.34) (2026-02-19)
 
 **Note:** Version bump only for package @synerise/ds-panels-resizer

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

package/dist/PanelResizer.styles.js

@@ -1,5 +1,9 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 export var PanelsResizerContainer = styled.div.withConfig({
   displayName: "PanelResizerstyles__PanelsResizerContainer",
   componentId: "sc-d1bdei-0"
-})(["display:flex;flex:1;height:-webkit-fill-available;overflow:hidden;"]);
+})(["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;"]);
+});

package/dist/PanelsResizer.d.ts

@@ -5,6 +5,7 @@ type PanelsResizerProps = {
     rightPanel: ReactNode;
     initial?: InitialVectorOptions;
     scrollable?: boolean;
+    isHorizontal?: boolean;
 };
-export declare const PanelsResizer: ({ leftPanel, rightPanel, initial, scrollable, }: PanelsResizerProps) => React.JSX.Element;
+export declare const PanelsResizer: ({ leftPanel, rightPanel, initial, scrollable, isHorizontal, }: PanelsResizerProps) => React.JSX.Element;
 export {};

package/dist/PanelsResizer.js

@@ -2,12 +2,14 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import * as S from './PanelResizer.styles';
 import { Resizer } from './Resizer';
-import { calculateLeftPanelWidth, calculateRightPanelWidth, getInitialVector } from './utils';
+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;
+    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],
@@ -18,7 +20,7 @@ export var PanelsResizer = function PanelsResizer(_ref) {
   var startClientXRef = useRef(0);
   useEffect(function () {
     if (containerRef.current) {
-      var containerWidth = containerRef.current.offsetWidth;
+      var containerWidth = isHorizontal ? containerRef.current.offsetHeight : containerRef.current.offsetWidth;
       var initialVector = getInitialVector(initial, containerWidth);
       setVector(initialVector);
     }
@@ -28,11 +30,12 @@ export var PanelsResizer = function PanelsResizer(_ref) {
     if (!isResizing) {
       return;
     }
-    var deltaX = event.clientX - startClientXRef.current;
+    var eventClientX = isHorizontal ? event.clientY : event.clientX;
+    var deltaX = eventClientX - startClientXRef.current;
     setVector(function (prevVector) {
       return prevVector !== null ? prevVector + deltaX : deltaX;
     });
-    startClientXRef.current = event.clientX;
+    startClientXRef.current = eventClientX;
   }, [isResizing]);
   var handleMouseUpOrLeave = useCallback(function () {
     if (!isResizing) {
@@ -43,28 +46,36 @@ export var PanelsResizer = function PanelsResizer(_ref) {
   var handleMouseDownOnResizer = useCallback(function (event) {
     event.preventDefault();
     setIsResizing(true);
-    startClientXRef.current = event.clientX;
+    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
+    onMouseLeave: handleMouseUpOrLeave,
+    isHorizontal: isHorizontal
   }, /*#__PURE__*/React.createElement("div", {
     "data-testid": "left-panel-wrapper",
-    style: _extends({
-      width: calculateLeftPanelWidth(vector),
+    style: _extends({}, isHorizontal ? {
+      height: calculateLeftPanelHeight(vector)
+    } : {
+      width: calculateLeftPanelWidth(vector)
+    }, {
       pointerEvents: isResizing ? 'none' : 'auto'
     }, scrollable ? {
       overflow: 'auto'
     } : {})
   }, leftPanel), /*#__PURE__*/React.createElement(Resizer, {
-    onMouseDown: handleMouseDownOnResizer
+    onMouseDown: handleMouseDownOnResizer,
+    isHorizontal: isHorizontal
   }), /*#__PURE__*/React.createElement("div", {
     "data-testid": "right-panel-wrapper",
-    style: _extends({
-      width: calculateRightPanelWidth(vector),
+    style: _extends({}, isHorizontal ? {
+      height: calculateRightPanelHeight(vector)
+    } : {
+      width: calculateRightPanelWidth(vector)
+    }, {
       pointerEvents: isResizing ? 'none' : 'auto',
       zIndex: 4
     }, scrollable ? {

package/dist/Resizer/Resizer.d.ts

@@ -1,6 +1,7 @@
 import React, { type MouseEvent } from 'react';
 type ResizerProps = {
     onMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
+    isHorizontal?: boolean;
 };
-export declare const Resizer: ({ onMouseDown }: ResizerProps) => React.JSX.Element;
+export declare const Resizer: ({ onMouseDown, isHorizontal, }: ResizerProps) => React.JSX.Element;
 export {};

package/dist/Resizer/Resizer.js

@@ -3,13 +3,16 @@ 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;
+  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,
-    width: HANDLER_WIDTH
+    isHorizontal: isHorizontal
   }, /*#__PURE__*/React.createElement(HandlerIcon, {
     component: /*#__PURE__*/React.createElement(DragHandleM, null),
-    size: HANDLER_WIDTH
+    size: HANDLER_WIDTH,
+    isHorizontal: isHorizontal
   }));
 };

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

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

package/dist/Resizer/Resizer.styles.js

@@ -1,20 +1,24 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import Icon from '@synerise/ds-icon';
 export var Handler = styled.div.withConfig({
   displayName: "Resizerstyles__Handler",
   componentId: "sc-s3ii80-0"
-})(["display:flex;align-items:center;width:", "px;flex-grow:1;z-index:5;background-color:", ";&:hover{cursor:ew-resize;background-color:", ";}"], function (props) {
-  return props.width;
+})(["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({
   displayName: "Resizerstyles__HandlerIcon",
   componentId: "sc-s3ii80-1"
-})(["svg{fill:", ";}&:hover{color:", ";}"], function (props) {
+})(["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'];
 });

package/dist/utils/calculatePanelsWidth.d.ts

@@ -6,3 +6,5 @@ export type InitialVectorOptions = {
 export declare const getInitialVector: (options: InitialVectorOptions | undefined, containerWidth: number) => number;
 export declare const calculateLeftPanelWidth: (vector: number) => string;
 export declare const calculateRightPanelWidth: (vector: number) => string;
+export declare const calculateLeftPanelHeight: (vector: number) => string;
+export declare const calculateRightPanelHeight: (vector: number) => string;

package/dist/utils/calculatePanelsWidth.js

@@ -17,4 +17,11 @@ export var calculateLeftPanelWidth = function calculateLeftPanelWidth(vector) {
 };
 export var calculateRightPanelWidth = function calculateRightPanelWidth(vector) {
   return "calc(" + HALF_WIDTH + " - " + vector + "px)";
+};
+var HALF_HEIGHT = '50vh';
+export var calculateLeftPanelHeight = function calculateLeftPanelHeight(vector) {
+  return "calc(" + HALF_HEIGHT + " + " + vector + "px)";
+};
+export var calculateRightPanelHeight = function calculateRightPanelHeight(vector) {
+  return "calc(" + HALF_HEIGHT + " - " + vector + "px)";
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-panels-resizer",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "description": "PanelResizer UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,12 +35,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.14.1"
+    "@synerise/ds-icon": "^1.15.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "b3d1312cbfbe69aba1cb5667b54be7f76938156c"
+  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
 }