@synerise/ds-field-set 0.4.2 → 1.0.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-field-set@1.0.0...@synerise/ds-field-set@1.0.1) (2025-03-18)
+
+
+### Bug Fixes
+
+* **field-set:** clipping in dynamic height fieldset content fixed ([5a8f3a0](https://github.com/Synerise/synerise-design/commit/5a8f3a0fedc67ffd2e7f9674d473ef47c3e921e3))
+
+
+
+
+
 ## [0.4.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-field-set@0.4.1...@synerise/ds-field-set@0.4.2) (2025-03-10)
 
 **Note:** Version bump only for package @synerise/ds-field-set

package/dist/FieldSet.js

@@ -4,6 +4,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Divider from '@synerise/ds-divider';
 import Button from '@synerise/ds-button';
+import { useResizeObserver } from '@synerise/ds-utils';
 import * as S from './FieldSet.styles';
 var FieldSet = function FieldSet(_ref) {
   var className = _ref.className,
@@ -25,6 +26,10 @@ var FieldSet = function FieldSet(_ref) {
     maxHeight = _useState2[0],
     setMaxHeight = _useState2[1];
   var containerRef = useRef(null);
+  var measureMaxHeightRef = useRef(null);
+  useResizeObserver(measureMaxHeightRef, function (dimensions) {
+    return setMaxHeight(dimensions.height);
+  });
   useEffect(function () {
     var _containerRef$current, _containerRef$current2;
     ((_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.scrollHeight) && setMaxHeight((_containerRef$current2 = containerRef.current) == null ? void 0 : _containerRef$current2.scrollHeight);
@@ -60,9 +65,12 @@ var FieldSet = function FieldSet(_ref) {
   }, title), /*#__PURE__*/React.createElement(S.Description, null, description))), divider && /*#__PURE__*/React.createElement(Divider, null), (component || button) && /*#__PURE__*/React.createElement(S.CollapsibleContent, {
     "data-testid": "field-set-collapsible",
     ref: containerRef,
-    expanded: !expandable || expanded,
+    expandable: expandable,
+    expanded: expandable && expanded,
     "aria-hidden": expandable && !expanded,
     maxHeight: maxHeight
-  }, component && /*#__PURE__*/React.createElement(S.ComponentWrapper, null, component), button && /*#__PURE__*/React.createElement(S.ActionButton, null, button)));
+  }, /*#__PURE__*/React.createElement(S.CollapsibleContentInner, {
+    ref: measureMaxHeightRef
+  }, component && /*#__PURE__*/React.createElement(S.ComponentWrapper, null, component), button && /*#__PURE__*/React.createElement(S.ActionButton, null, button))));
 };
 export default FieldSet;

package/dist/FieldSet.styles.d.ts

@@ -15,6 +15,8 @@ export declare const FieldSetTitle: import("styled-components").StyledComponent<
 export declare const ComponentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CollapsibleContent: import("styled-components").StyledComponent<"div", any, {
-    expanded: boolean;
+    expandable?: boolean | undefined;
+    expanded?: boolean | undefined;
     maxHeight?: number | undefined;
 }, never>;
+export declare const CollapsibleContentInner: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/FieldSet.styles.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 export var Title = styled.div.withConfig({
   displayName: "FieldSetstyles__Title",
   componentId: "sc-1hezedi-0"
@@ -50,6 +50,10 @@ export var Description = styled.div.withConfig({
 export var CollapsibleContent = styled.div.withConfig({
   displayName: "FieldSetstyles__CollapsibleContent",
   componentId: "sc-1hezedi-9"
-})(["transition:max-height 0.7s ease-in-out;overflow:hidden;", ""], function (props) {
-  return props.expanded ? "\n    max-height: " + (props.maxHeight || 9999) + "px;\n    " : "\n    max-height: 0;\n    ";
-});
+})(["position:relative;", ""], function (props) {
+  return props.expandable && css(["transition:max-height 0.7s ease-in-out;overflow:hidden;", ""], props.expanded ? "\n    max-height: " + (props.maxHeight || 9999) + "px;\n    " : "\n    max-height: 0;\n    ");
+});
+export var CollapsibleContentInner = styled.div.withConfig({
+  displayName: "FieldSetstyles__CollapsibleContentInner",
+  componentId: "sc-1hezedi-10"
+})([""]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-field-set",
-  "version": "0.4.2",
+  "version": "1.0.1",
   "description": "FieldSet UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,8 +34,9 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-divider": "^0.9.6",
-    "@synerise/ds-utils": "^0.32.3"
+    "@synerise/ds-button": "^1.1.0",
+    "@synerise/ds-divider": "^1.0.1",
+    "@synerise/ds-utils": "^1.0.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -43,5 +44,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "a176b46dab123cd503247ae57022f8e808772d68"
+  "gitHead": "218110f61f4371bc04d793b2b976b71d14e99e76"
 }