@synerise/ds-field-set 1.1.20 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-field-set@1.1.20...@synerise/ds-field-set@1.2.0) (2026-02-26)
+
+### Features
+
+- **field-set:** add onExpandClick prop ([d5689bc](https://github.com/Synerise/synerise-design/commit/d5689bce6295d3037092d75921a4a3ba4430250e))
+
 ## [1.1.20](https://github.com/Synerise/synerise-design/compare/@synerise/ds-field-set@1.1.19...@synerise/ds-field-set@1.1.20) (2026-02-23)
 
 **Note:** Version bump only for package @synerise/ds-field-set

package/dist/FieldSet.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type FieldSetProps } from './FieldSet.types';
-declare const FieldSet: ({ className, prefix, title, description, component, button, onTitleClick, divider, expandable, defaultExpanded, triggerType, ...htmlAttributes }: FieldSetProps) => React.JSX.Element;
+declare const FieldSet: ({ className, prefix, title, description, component, button, onTitleClick, onExpandChange, divider, expandable, defaultExpanded, triggerType, ...htmlAttributes }: FieldSetProps) => React.JSX.Element;
 export default FieldSet;

package/dist/FieldSet.js

@@ -1,8 +1,8 @@
-var _excluded = ["className", "prefix", "title", "description", "component", "button", "onTitleClick", "divider", "expandable", "defaultExpanded", "triggerType"];
+var _excluded = ["className", "prefix", "title", "description", "component", "button", "onTitleClick", "onExpandChange", "divider", "expandable", "defaultExpanded", "triggerType"];
 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); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import Button from '@synerise/ds-button';
+import { Expander } from '@synerise/ds-button';
 import { RawSwitch } from '@synerise/ds-switch';
 import { useResizeObserver } from '@synerise/ds-utils';
 import * as S from './FieldSet.styles';
@@ -14,6 +14,7 @@ var FieldSet = function FieldSet(_ref) {
     component = _ref.component,
     button = _ref.button,
     onTitleClick = _ref.onTitleClick,
+    onExpandChange = _ref.onExpandChange,
     _ref$divider = _ref.divider,
     divider = _ref$divider === void 0 ? true : _ref$divider,
     expandable = _ref.expandable,
@@ -27,44 +28,50 @@ var FieldSet = function FieldSet(_ref) {
   var _useState2 = useState(),
     maxHeight = _useState2[0],
     setMaxHeight = _useState2[1];
-  var containerRef = useRef(null);
+  var _useState3 = useState(false),
+    shouldAnimate = _useState3[0],
+    setShouldAnimate = _useState3[1];
   var measureMaxHeightRef = useRef(null);
   useResizeObserver(measureMaxHeightRef, function (dimensions) {
-    return setMaxHeight(dimensions.height);
+    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);
-  }, [component, button]);
   useEffect(function () {
     defaultExpanded !== undefined && setExpanded(defaultExpanded);
   }, [defaultExpanded]);
+  var handleTransitionEnd = useCallback(function () {
+    setShouldAnimate(false);
+  }, []);
+  var handleExpandedClick = useCallback(function () {
+    if (!expandable) {
+      return;
+    }
+    setShouldAnimate(true);
+    var newExpanded = !expanded;
+    setExpanded(newExpanded);
+    onExpandChange == null || onExpandChange(newExpanded);
+  }, [expandable, onExpandChange, expanded]);
   var headerPrefix = useMemo(function () {
     if (expandable && (!triggerType || triggerType === 'expander')) {
-      return /*#__PURE__*/React.createElement(S.PrefixWrapper, null, /*#__PURE__*/React.createElement(Button.Expander, {
+      return /*#__PURE__*/React.createElement(S.PrefixWrapper, null, /*#__PURE__*/React.createElement(Expander, {
         expanded: expanded,
-        onClick: function onClick() {
-          return setExpanded(!expanded);
-        }
+        onClick: handleExpandedClick
       }));
     }
     if (expandable && triggerType === 'switch') {
       return /*#__PURE__*/React.createElement(S.PrefixWrapper, null, /*#__PURE__*/React.createElement(RawSwitch, {
         checked: expanded,
-        onClick: function onClick() {
-          return setExpanded(!expanded);
-        }
+        onClick: handleExpandedClick
       }));
     }
     return prefix && /*#__PURE__*/React.createElement(S.PrefixWrapper, null, prefix);
-  }, [expandable, prefix, expanded, triggerType]);
+  }, [expandable, prefix, expanded, triggerType, handleExpandedClick]);
   var handleTitleClick = useCallback(function (event) {
-    expandable && setExpanded(!expanded);
+    handleExpandedClick();
     onTitleClick && onTitleClick(event);
-  }, [onTitleClick, expandable, expanded]);
+  }, [handleExpandedClick, onTitleClick]);
   var hasTitleAndDescription = Boolean(title && description);
   return /*#__PURE__*/React.createElement(S.ContainerWrapper, _extends({
-    className: "ds-field-set " + className
+    className: "ds-field-set " + (className != null ? className : '')
   }, htmlAttributes), /*#__PURE__*/React.createElement(S.HeaderWrapper, {
     topAlign: Boolean(hasTitleAndDescription)
   }, headerPrefix, /*#__PURE__*/React.createElement(S.FieldSetTitle, null, title && /*#__PURE__*/React.createElement(S.Title, {
@@ -73,11 +80,12 @@ var FieldSet = function FieldSet(_ref) {
     description: Boolean(description)
   }, title), description && /*#__PURE__*/React.createElement(S.Description, null, description))), divider && /*#__PURE__*/React.createElement(S.StyledDivider, null), (component || button) && /*#__PURE__*/React.createElement(S.CollapsibleContent, {
     "data-testid": "field-set-collapsible",
-    ref: containerRef,
     expandable: expandable,
     expanded: expandable && expanded,
     "aria-hidden": expandable && !expanded,
-    maxHeight: maxHeight
+    maxHeight: maxHeight,
+    shouldAnimate: shouldAnimate,
+    onTransitionEnd: handleTransitionEnd
   }, /*#__PURE__*/React.createElement(S.CollapsibleContentInner, {
     ref: measureMaxHeightRef
   }, component && /*#__PURE__*/React.createElement(S.ComponentWrapper, null, component), button && /*#__PURE__*/React.createElement(S.ActionButton, null, button))));

package/dist/FieldSet.styles.d.ts

@@ -16,6 +16,7 @@ export declare const CollapsibleContent: import("styled-components").StyledCompo
     expandable?: boolean;
     expanded?: boolean;
     maxHeight?: number;
+    shouldAnimate?: boolean;
 }, never>;
 export declare const CollapsibleContentInner: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledDivider: import("styled-components").StyledComponent<(props: import("@synerise/ds-divider").DividerProps) => React.JSX.Element, any, {}, never>;

package/dist/FieldSet.styles.js

@@ -15,7 +15,7 @@ export var ContainerWrapper = styled.div.withConfig({
 export var HeaderWrapper = styled.div.withConfig({
   displayName: "FieldSetstyles__HeaderWrapper",
   componentId: "sc-1hezedi-2"
-})(["display:flex;align-items:center;gap:16px;align-items:", ";"], function (props) {
+})(["display:flex;gap:16px;align-items:", ";"], function (props) {
   return props.topAlign ? 'flex-start' : 'center';
 });
 export var PrefixWrapper = styled.div.withConfig({
@@ -25,7 +25,7 @@ export var PrefixWrapper = styled.div.withConfig({
 export var ActionButton = styled.div.withConfig({
   displayName: "FieldSetstyles__ActionButton",
   componentId: "sc-1hezedi-4"
-})(["display:flex;padding;8px;"]);
+})(["display:flex;padding:8px;"]);
 export var ExpanderWrapper = styled.div.withConfig({
   displayName: "FieldSetstyles__ExpanderWrapper",
   componentId: "sc-1hezedi-5"
@@ -46,7 +46,7 @@ export var CollapsibleContent = styled.div.withConfig({
   displayName: "FieldSetstyles__CollapsibleContent",
   componentId: "sc-1hezedi-9"
 })(["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    ");
+  return props.expandable && css(["", " overflow:hidden;", ""], props.shouldAnimate && 'transition: max-height 0.7s ease-in-out;', props.expanded ? "\n    max-height: " + (props.maxHeight || 9999) + "px;\n    " : "\n    max-height: 0;\n    ");
 });
 export var CollapsibleContentInner = styled.div.withConfig({
   displayName: "FieldSetstyles__CollapsibleContentInner",

package/dist/FieldSet.types.d.ts

@@ -13,4 +13,5 @@ export type FieldSetProps = WithHTMLAttributes<HTMLDivElement, {
     expandable?: boolean;
     triggerType?: TriggerType;
     defaultExpanded?: boolean;
+    onExpandChange?: (expanded: boolean) => void;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-field-set",
-  "version": "1.1.20",
+  "version": "1.2.0",
   "description": "FieldSet UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -46,5 +46,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "2997f77d657c1aed2fc39901d3e0b8f88b05cc53"
+  "gitHead": "4ffbd56e9bf6277c4507efeaf000b66b9bb09781"
 }