@synerise/ds-field-set 0.3.5 → 0.4.1

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-field-set@0.4.0...@synerise/ds-field-set@0.4.1) (2025-03-07)
+
+**Note:** Version bump only for package @synerise/ds-field-set
+
+
+
+
+
+# [0.4.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-field-set@0.3.6...@synerise/ds-field-set@0.4.0) (2025-03-07)
+
+
+### Features
+
+* **field-set:** add expandable prop ([3c918ca](https://github.com/Synerise/synerise-design/commit/3c918ca5092321eb75dd8e5ed78458ebe2f1f445))
+
+
+
+
+
+## [0.3.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-field-set@0.3.5...@synerise/ds-field-set@0.3.6) (2025-03-04)
+
+**Note:** Version bump only for package @synerise/ds-field-set
+
+
+
+
+
 ## [0.3.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-field-set@0.3.4...@synerise/ds-field-set@0.3.5) (2025-02-27)
 
 **Note:** Version bump only for package @synerise/ds-field-set

package/dist/FieldSet.d.ts

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

package/dist/FieldSet.js

@@ -1,5 +1,9 @@
-import React from 'react';
+var _excluded = ["className", "prefix", "title", "description", "component", "button", "onTitleClick", "divider", "expandable", "defaultExpanded"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Divider from '@synerise/ds-divider';
+import Button from '@synerise/ds-button';
 import * as S from './FieldSet.styles';
 var FieldSet = function FieldSet(_ref) {
   var className = _ref.className,
@@ -10,15 +14,55 @@ var FieldSet = function FieldSet(_ref) {
     button = _ref.button,
     onTitleClick = _ref.onTitleClick,
     _ref$divider = _ref.divider,
-    divider = _ref$divider === void 0 ? true : _ref$divider;
-  return /*#__PURE__*/React.createElement(S.ContainerWrapper, {
+    divider = _ref$divider === void 0 ? true : _ref$divider,
+    expandable = _ref.expandable,
+    defaultExpanded = _ref.defaultExpanded,
+    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(!!defaultExpanded),
+    expanded = _useState[0],
+    setExpanded = _useState[1];
+  var _useState2 = useState(),
+    maxHeight = _useState2[0],
+    setMaxHeight = _useState2[1];
+  var containerRef = useRef(null);
+  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 headerPrefix = useMemo(function () {
+    if (expandable) {
+      return /*#__PURE__*/React.createElement(S.ButtonWrapper, null, /*#__PURE__*/React.createElement(S.ExpanderWrapper, {
+        description: !!description
+      }, /*#__PURE__*/React.createElement(Button.Expander, {
+        expanded: expanded,
+        onClick: function onClick() {
+          return setExpanded(!expanded);
+        }
+      })));
+    }
+    return prefix && /*#__PURE__*/React.createElement(S.ButtonWrapper, null, prefix);
+  }, [expandable, prefix, description, expanded]);
+  var handleTitleClick = useCallback(function (event) {
+    expandable && setExpanded(!expanded);
+    onTitleClick && onTitleClick(event);
+  }, [onTitleClick, expandable, expanded]);
+  return /*#__PURE__*/React.createElement(S.ContainerWrapper, _extends({
     className: "ds-field-set " + className
-  }, /*#__PURE__*/React.createElement(S.HeaderWrapper, null, prefix && /*#__PURE__*/React.createElement(S.ButtonWrapper, null, prefix), /*#__PURE__*/React.createElement(S.FieldSetTitle, {
+  }, htmlAttributes), /*#__PURE__*/React.createElement(S.HeaderWrapper, null, headerPrefix, /*#__PURE__*/React.createElement(S.FieldSetTitle, {
     description: Boolean(description)
   }, /*#__PURE__*/React.createElement(S.Title, {
-    onClick: onTitleClick,
-    isClickable: Boolean(onTitleClick),
+    onClick: handleTitleClick,
+    isClickable: Boolean(onTitleClick || expandable),
     description: Boolean(description)
-  }, title), /*#__PURE__*/React.createElement(S.Description, null, description))), divider && /*#__PURE__*/React.createElement(Divider, null), component && /*#__PURE__*/React.createElement(S.ComponentWrapper, null, component), button && /*#__PURE__*/React.createElement(S.ActionButton, null, button));
+  }, 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,
+    "aria-hidden": expandable && !expanded,
+    maxHeight: maxHeight
+  }, 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

@@ -14,3 +14,7 @@ export declare const FieldSetTitle: import("styled-components").StyledComponent<
 }, never>;
 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;
+    maxHeight?: number | undefined;
+}, never>;

package/dist/FieldSet.styles.js

@@ -46,4 +46,10 @@ export var ComponentWrapper = styled.div.withConfig({
 export var Description = styled.div.withConfig({
   displayName: "FieldSetstyles__Description",
   componentId: "sc-1hezedi-8"
-})(["display:flex;line-height:16px;font-size:13px;word-wrap:break-word;"]);
+})(["display:flex;line-height:16px;font-size:13px;word-wrap:break-word;"]);
+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    ";
+});

package/dist/FieldSet.types.d.ts

@@ -1,5 +1,6 @@
+import { WithHTMLAttributes } from '@synerise/ds-utils';
 import { ReactNode, MouseEvent as ReactMouseEvent } from 'react';
-export type FieldSetProps = {
+export type FieldSetProps = WithHTMLAttributes<HTMLDivElement, {
     component?: ReactNode;
     prefix?: ReactNode;
     title?: ReactNode;
@@ -8,4 +9,6 @@ export type FieldSetProps = {
     onTitleClick?: (ev: ReactMouseEvent<HTMLElement, MouseEvent>) => void;
     className?: string;
     divider?: boolean;
-};
+    expandable?: boolean;
+    defaultExpanded?: boolean;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-field-set",
-  "version": "0.3.5",
+  "version": "0.4.1",
   "description": "FieldSet UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,7 +34,7 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-divider": "^0.9.4",
+    "@synerise/ds-divider": "^0.9.5",
     "@synerise/ds-utils": "^0.32.2"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "23054ac8e90293b1a722acdec723b4bfd5abd6c9"
+  "gitHead": "e2daf4a742bb045c43773146d2347c3d093911e2"
 }