@synerise/ds-field-set 1.0.10 → 1.0.12

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-field-set@1.0.11...@synerise/ds-field-set@1.0.12) (2025-06-11)
+
+
+### Bug Fixes
+
+* **field-set:** vertical alignment without title ([5b94780](https://github.com/Synerise/synerise-design/commit/5b94780758c08371555d61d89a3461ba717a7784))
+
+
+
+
+
+## [1.0.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-field-set@1.0.10...@synerise/ds-field-set@1.0.11) (2025-06-05)
+
+**Note:** Version bump only for package @synerise/ds-field-set
+
+
+
+
+
 ## [1.0.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-field-set@1.0.9...@synerise/ds-field-set@1.0.10) (2025-06-03)
 
 **Note:** Version bump only for package @synerise/ds-field-set

package/dist/FieldSet.js

@@ -39,9 +39,7 @@ var FieldSet = function FieldSet(_ref) {
   }, [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, {
+      return /*#__PURE__*/React.createElement(S.ButtonWrapper, null, /*#__PURE__*/React.createElement(S.ExpanderWrapper, null, /*#__PURE__*/React.createElement(Button.Expander, {
         expanded: expanded,
         onClick: function onClick() {
           return setExpanded(!expanded);
@@ -49,20 +47,21 @@ var FieldSet = function FieldSet(_ref) {
       })));
     }
     return prefix && /*#__PURE__*/React.createElement(S.ButtonWrapper, null, prefix);
-  }, [expandable, prefix, description, expanded]);
+  }, [expandable, prefix, expanded]);
   var handleTitleClick = useCallback(function (event) {
     expandable && setExpanded(!expanded);
     onTitleClick && onTitleClick(event);
   }, [onTitleClick, expandable, expanded]);
+  var hasTitleAndDescription = Boolean(title && description);
   return /*#__PURE__*/React.createElement(S.ContainerWrapper, _extends({
     className: "ds-field-set " + className
-  }, htmlAttributes), /*#__PURE__*/React.createElement(S.HeaderWrapper, null, headerPrefix, /*#__PURE__*/React.createElement(S.FieldSetTitle, {
-    description: Boolean(description)
-  }, /*#__PURE__*/React.createElement(S.Title, {
+  }, htmlAttributes), /*#__PURE__*/React.createElement(S.HeaderWrapper, {
+    topAlign: Boolean(hasTitleAndDescription)
+  }, headerPrefix, /*#__PURE__*/React.createElement(S.FieldSetTitle, null, title && /*#__PURE__*/React.createElement(S.Title, {
     onClick: handleTitleClick,
     isClickable: Boolean(onTitleClick || expandable),
     description: Boolean(description)
-  }, title), /*#__PURE__*/React.createElement(S.Description, null, description))), divider && /*#__PURE__*/React.createElement(Divider, null), (component || button) && /*#__PURE__*/React.createElement(S.CollapsibleContent, {
+  }, title), description && /*#__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,
     expandable: expandable,

package/dist/FieldSet.styles.d.ts

@@ -3,15 +3,13 @@ export declare const Title: import("styled-components").StyledComponent<"div", a
     isClickable?: boolean | undefined;
 }, never>;
 export declare const ContainerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HeaderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeaderWrapper: import("styled-components").StyledComponent<"div", any, {
+    topAlign?: boolean | undefined;
+}, never>;
 export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ActionButton: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ExpanderWrapper: import("styled-components").StyledComponent<"div", any, {
-    description?: boolean | undefined;
-}, never>;
-export declare const FieldSetTitle: import("styled-components").StyledComponent<"div", any, {
-    description?: boolean | undefined;
-}, never>;
+export declare const ExpanderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FieldSetTitle: import("styled-components").StyledComponent<"div", any, {}, 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, {

package/dist/FieldSet.styles.js

@@ -2,9 +2,7 @@ import styled, { css } from 'styled-components';
 export var Title = styled.div.withConfig({
   displayName: "FieldSetstyles__Title",
   componentId: "sc-1hezedi-0"
-})(["display:flex;line-height:16px;padding-bottom:", ";max-width:800px;font-size:16px;font-weight:500;word-wrap:break-word;align-items:center;color:", ";cursor:", ";"], function (props) {
-  return props.description ? '8px' : '0';
-}, function (props) {
+})(["display:flex;line-height:16px;max-width:800px;font-size:16px;font-weight:500;word-wrap:break-word;align-items:center;color:", ";cursor:", ";"], function (props) {
   return props.theme.palette['grey-800'];
 }, function (props) {
   return props.isClickable ? 'pointer' : 'default';
@@ -16,7 +14,9 @@ export var ContainerWrapper = styled.div.withConfig({
 export var HeaderWrapper = styled.div.withConfig({
   displayName: "FieldSetstyles__HeaderWrapper",
   componentId: "sc-1hezedi-2"
-})(["display:flex;"]);
+})(["display:flex;align-items:center;gap:16px;align-items:", ";"], function (props) {
+  return props.topAlign ? 'flex-start' : 'center';
+});
 export var ButtonWrapper = styled.div.withConfig({
   displayName: "FieldSetstyles__ButtonWrapper",
   componentId: "sc-1hezedi-3"
@@ -28,17 +28,11 @@ export var ActionButton = styled.div.withConfig({
 export var ExpanderWrapper = styled.div.withConfig({
   displayName: "FieldSetstyles__ExpanderWrapper",
   componentId: "sc-1hezedi-5"
-})(["display:flex;align-items:", ";margin:0 16px 8px 0;"], function (props) {
-  return props.description ? '' : 'center';
-});
+})(["display:flex;"]);
 export var FieldSetTitle = styled.div.withConfig({
   displayName: "FieldSetstyles__FieldSetTitle",
   componentId: "sc-1hezedi-6"
-})(["display:", ";align-items:", ";"], function (props) {
-  return props.description ? '' : 'flex';
-}, function (props) {
-  return props.description ? '' : 'center';
-});
+})(["display:flex;flex-direction:column;gap:8px;"]);
 export var ComponentWrapper = styled.div.withConfig({
   displayName: "FieldSetstyles__ComponentWrapper",
   componentId: "sc-1hezedi-7"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-field-set",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "FieldSet UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,9 +34,9 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.3.2",
-    "@synerise/ds-divider": "^1.0.9",
-    "@synerise/ds-utils": "^1.1.1"
+    "@synerise/ds-button": "^1.3.3",
+    "@synerise/ds-divider": "^1.0.10",
+    "@synerise/ds-utils": "^1.2.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -44,5 +44,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "12eaee0c6431aac9a7b2dbc42e0f8567b3de7244"
+  "gitHead": "35c8f09d6a248f199237766c1f5181f4b3fc88af"
 }