@synerise/ds-field-set 1.1.8 → 1.1.10

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.1.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-field-set@1.1.9...@synerise/ds-field-set@1.1.10) (2026-01-22)
+
+**Note:** Version bump only for package @synerise/ds-field-set
+
+## [1.1.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-field-set@1.1.8...@synerise/ds-field-set@1.1.9) (2026-01-20)
+
+### Bug Fixes
+
+- **field-set:** new prefix for field-set with switch ([a18a0df](https://github.com/Synerise/synerise-design/commit/a18a0df04cba27c77ef25c17a957c378267b9229))
+
 ## [1.1.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-field-set@1.1.7...@synerise/ds-field-set@1.1.8) (2026-01-15)
 
 **Note:** Version bump only for package @synerise/ds-field-set

package/README.md

@@ -28,11 +28,14 @@ import FieldSet from '@synerise/ds-field-set'
 
 ## API
 
-| Property     | Description               | Type            | Default |
-| ------------ | ------------------------- | --------------- | ------- |
-| component    | prop to set component     | React.ReactNode | -       |
-| title        | text of title             | string          | -       |
-| onTitleClick | onclick handler for title | () => void      | -       |
-| description  | text of the description   | string          | -       |
-| prefix       | prop to set prefix item   | React.ReactNode | -       |
-| button       | prop to set button        | React.ReactNode | -       |
+| Property     | Description               | Type                     | Default         |
+| ------------ | ------------------------- | ------------------------ | --------------- |
+| component    | prop to set component     | React.ReactNode          | -               |
+| title        | text of title             | string                   | -               |
+| onTitleClick | onclick handler for title | () => void               | -               |
+| description  | text of the description   | string                   | -               |
+| prefix       | prop to set prefix item   | React.ReactNode          | -               |
+| button       | prop to set button        | React.ReactNode          | -               |
+| expandable   | prop to expand field-set  | boolean                  | -               |
+| typeTrigger  | Trigger type prefix       | `expander` / `switch`    | `expander`      |
+| divider      | props to set divider      | boolean                  | -               |

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, ...htmlAttributes }: FieldSetProps) => React.JSX.Element;
+declare const FieldSet: ({ className, prefix, title, description, component, button, onTitleClick, divider, expandable, defaultExpanded, triggerType, ...htmlAttributes }: FieldSetProps) => React.JSX.Element;
 export default FieldSet;

package/dist/FieldSet.js

@@ -1,8 +1,9 @@
-var _excluded = ["className", "prefix", "title", "description", "component", "button", "onTitleClick", "divider", "expandable", "defaultExpanded"];
+var _excluded = ["className", "prefix", "title", "description", "component", "button", "onTitleClick", "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 { RawSwitch } from '@synerise/ds-switch';
 import { useResizeObserver } from '@synerise/ds-utils';
 import * as S from './FieldSet.styles';
 var FieldSet = function FieldSet(_ref) {
@@ -17,6 +18,8 @@ var FieldSet = function FieldSet(_ref) {
     divider = _ref$divider === void 0 ? true : _ref$divider,
     expandable = _ref.expandable,
     defaultExpanded = _ref.defaultExpanded,
+    _ref$triggerType = _ref.triggerType,
+    triggerType = _ref$triggerType === void 0 ? 'expander' : _ref$triggerType,
     htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState(!!defaultExpanded),
     expanded = _useState[0],
@@ -37,16 +40,24 @@ var FieldSet = function FieldSet(_ref) {
     defaultExpanded !== undefined && setExpanded(defaultExpanded);
   }, [defaultExpanded]);
   var headerPrefix = useMemo(function () {
-    if (expandable) {
-      return /*#__PURE__*/React.createElement(S.ButtonWrapper, null, /*#__PURE__*/React.createElement(S.ExpanderWrapper, null, /*#__PURE__*/React.createElement(Button.Expander, {
+    if (expandable && (!triggerType || triggerType === 'expander')) {
+      return /*#__PURE__*/React.createElement(S.PrefixWrapper, null, /*#__PURE__*/React.createElement(Button.Expander, {
         expanded: expanded,
         onClick: function onClick() {
           return setExpanded(!expanded);
         }
-      })));
+      }));
     }
-    return prefix && /*#__PURE__*/React.createElement(S.ButtonWrapper, null, prefix);
-  }, [expandable, prefix, expanded]);
+    if (expandable && triggerType === 'switch') {
+      return /*#__PURE__*/React.createElement(S.PrefixWrapper, null, /*#__PURE__*/React.createElement(RawSwitch, {
+        checked: expanded,
+        onClick: function onClick() {
+          return setExpanded(!expanded);
+        }
+      }));
+    }
+    return prefix && /*#__PURE__*/React.createElement(S.PrefixWrapper, null, prefix);
+  }, [expandable, prefix, expanded, triggerType]);
   var handleTitleClick = useCallback(function (event) {
     expandable && setExpanded(!expanded);
     onTitleClick && onTitleClick(event);

package/dist/FieldSet.styles.d.ts

@@ -6,7 +6,7 @@ export declare const ContainerWrapper: import("styled-components").StyledCompone
 export declare const HeaderWrapper: import("styled-components").StyledComponent<"div", any, {
     topAlign?: boolean;
 }, never>;
-export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PrefixWrapper: 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, {}, never>;
 export declare const FieldSetTitle: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/FieldSet.styles.js

@@ -18,8 +18,8 @@ export var HeaderWrapper = styled.div.withConfig({
 })(["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",
+export var PrefixWrapper = styled.div.withConfig({
+  displayName: "FieldSetstyles__PrefixWrapper",
   componentId: "sc-1hezedi-3"
 })(["display:flex;"]);
 export var ActionButton = styled.div.withConfig({

package/dist/FieldSet.types.d.ts

@@ -1,5 +1,6 @@
 import { type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';
 import { type WithHTMLAttributes } from '@synerise/ds-utils';
+export type TriggerType = 'expander' | 'switch';
 export type FieldSetProps = WithHTMLAttributes<HTMLDivElement, {
     component?: ReactNode;
     prefix?: ReactNode;
@@ -10,5 +11,6 @@ export type FieldSetProps = WithHTMLAttributes<HTMLDivElement, {
     className?: string;
     divider?: boolean;
     expandable?: boolean;
+    triggerType?: TriggerType;
     defaultExpanded?: boolean;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-field-set",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "FieldSet UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -36,7 +36,8 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-button": "^1.5.5",
-    "@synerise/ds-divider": "^1.2.6",
+    "@synerise/ds-divider": "^1.2.7",
+    "@synerise/ds-switch": "^1.2.7",
     "@synerise/ds-utils": "^1.5.3"
   },
   "peerDependencies": {
@@ -45,5 +46,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "4cde643d1f63a4b47e84707a13b1b1d138730d53"
+  "gitHead": "13055ac4f0b05cc3eb06021d51c93c8d32328053"
 }