@synerise/ds-form 1.2.2 → 1.2.3

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form@1.2.2...@synerise/ds-form@1.2.3) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-form
+
 ## [1.2.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form@1.2.1...@synerise/ds-form@1.2.2) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-form

package/dist/EditableList/EditableList.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type EditListProps } from './EditableList.types';
+import { default as React } from 'react';
+import { EditListProps } from './EditableList.types';
 export declare const EditableList: React.FC<EditListProps>;
 export default EditableList;

package/dist/EditableList/EditableList.js

@@ -1,114 +1,90 @@
-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); }
-import React from 'react';
-import Autocomplete from '@synerise/ds-autocomplete';
-import { theme } from '@synerise/ds-core';
-import Cruds from '@synerise/ds-cruds';
-import Icon, { Add3M } from '@synerise/ds-icon';
-import { Input } from '@synerise/ds-input';
-import * as S from './EditableList.styles';
-var defaultFirstInputProps = {
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import Autocomplete from "@synerise/ds-autocomplete";
+import { theme } from "@synerise/ds-core";
+import Cruds from "@synerise/ds-cruds";
+import Icon, { Add3M } from "@synerise/ds-icon";
+import { Input } from "@synerise/ds-input";
+import { RowWrapper, AutoCompleteWrapper, InputWrapper, CrudWrapper, ButtonWrapper, AddButton, AddIconWrapper } from "./EditableList.styles.js";
+const defaultFirstInputProps = {
   style: {
     width: 350
   }
 };
-var defaultSecondInputProps = {
+const defaultSecondInputProps = {
   style: {
     width: 300
   }
 };
-export var EditableList = function EditableList(_ref) {
-  var _renderAddButton;
-  var leftColumnName = _ref.leftColumnName,
-    rightColumnName = _ref.rightColumnName,
-    autocompleteOptions = _ref.autocompleteOptions,
-    value = _ref.value,
-    _onChange = _ref.onChange,
-    addButtonConfig = _ref.addButtonConfig,
-    onSearch = _ref.onSearch,
-    onClickDelete = _ref.onClickDelete,
-    renderAddButton = _ref.renderAddButton,
-    renderLeftColumn = _ref.renderLeftColumn,
-    renderRightColumn = _ref.renderRightColumn,
-    renderAdditionalColumn = _ref.renderAdditionalColumn,
-    renderActions = _ref.renderActions,
-    validation = _ref.validation,
-    _ref$firstInputProps = _ref.firstInputProps,
-    firstInputProps = _ref$firstInputProps === void 0 ? defaultFirstInputProps : _ref$firstInputProps,
-    _ref$secondInputProps = _ref.secondInputProps,
-    secondInputProps = _ref$secondInputProps === void 0 ? defaultSecondInputProps : _ref$secondInputProps;
-  var _React$useState = React.useState([]),
-    params = _React$useState[0],
-    setParams = _React$useState[1];
-  var paramsWithNewValue = function paramsWithNewValue(id, name, newValue) {
-    var updatedParams = [].concat(params || []);
+const EditableList = ({
+  leftColumnName,
+  rightColumnName,
+  autocompleteOptions,
+  value,
+  onChange,
+  addButtonConfig,
+  onSearch,
+  onClickDelete,
+  renderAddButton,
+  renderLeftColumn,
+  renderRightColumn,
+  renderAdditionalColumn,
+  renderActions,
+  validation,
+  firstInputProps = defaultFirstInputProps,
+  secondInputProps = defaultSecondInputProps
+}) => {
+  const [params, setParams] = React.useState([]);
+  const paramsWithNewValue = (id, name, newValue) => {
+    const updatedParams = [...params || []];
     updatedParams[id] = {
-      name: name,
+      name,
       value: newValue
     };
     return updatedParams;
   };
-  React.useEffect(function () {
+  React.useEffect(() => {
     setParams(value);
   }, [value]);
-  var onSetParamsDefault = function onSetParamsDefault() {
-    return setParams(function (prevParams) {
-      return [].concat(prevParams || [], [{
-        name: '',
-        value: ''
-      }]);
-    });
-  };
-  return /*#__PURE__*/React.createElement("div", null, params == null ? void 0 : params.map(function (param, id) {
-    var _renderLeftColumn, _renderRightColumn;
-    return /*#__PURE__*/React.createElement(S.RowWrapper, {
-      key: id
-    }, (_renderLeftColumn = renderLeftColumn == null ? void 0 : renderLeftColumn(param, id)) != null ? _renderLeftColumn : /*#__PURE__*/React.createElement(S.AutoCompleteWrapper, null, /*#__PURE__*/React.createElement(Autocomplete, _extends({
-      onSearch: onSearch,
-      value: param.name,
-      onChange: function onChange(paramName) {
-        var newParams = paramsWithNewValue(id, paramName, param.value);
+  const onSetParamsDefault = () => setParams((prevParams) => [...prevParams || [], {
+    name: "",
+    value: ""
+  }]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    params?.map((param, id) => /* @__PURE__ */ jsxs(RowWrapper, { children: [
+      renderLeftColumn?.(param, id) ?? /* @__PURE__ */ jsx(AutoCompleteWrapper, { children: /* @__PURE__ */ jsx(Autocomplete, { onSearch, value: param.name, onChange: (paramName) => {
+        const newParams = paramsWithNewValue(id, paramName, param.value);
         setParams(newParams);
-        if (_onChange) {
-          _onChange(newParams);
+        if (onChange) {
+          onChange(newParams);
         }
-      },
-      label: id === 0 ? leftColumnName : null,
-      error: Boolean(validation == null || validation.validateLeftColumn == null ? void 0 : validation.validateLeftColumn(param.name)),
-      errorText: validation == null || validation.validateLeftColumn == null ? void 0 : validation.validateLeftColumn(param.name)
-    }, firstInputProps), autocompleteOptions)), (_renderRightColumn = renderRightColumn == null ? void 0 : renderRightColumn(param, id)) != null ? _renderRightColumn : /*#__PURE__*/React.createElement(S.InputWrapper, null, /*#__PURE__*/React.createElement(Input, _extends({
-      value: param.value,
-      onChange: function onChange(ev) {
-        var newParams = paramsWithNewValue(id, param.name, ev.target.value);
+      }, label: id === 0 ? leftColumnName : null, error: Boolean(validation?.validateLeftColumn?.(param.name)), errorText: validation?.validateLeftColumn?.(param.name), ...firstInputProps, children: autocompleteOptions }) }),
+      renderRightColumn?.(param, id) ?? /* @__PURE__ */ jsx(InputWrapper, { children: /* @__PURE__ */ jsx(Input, { value: param.value, onChange: (ev) => {
+        const newParams = paramsWithNewValue(id, param.name, ev.target.value);
         setParams(newParams);
-        if (_onChange) {
-          _onChange(newParams);
+        if (onChange) {
+          onChange(newParams);
         }
-      },
-      label: id === 0 ? rightColumnName : null,
-      error: Boolean(validation == null || validation.validateRightColumn == null ? void 0 : validation.validateRightColumn(param.value)),
-      errorText: validation == null || validation.validateRightColumn == null ? void 0 : validation.validateRightColumn(param.value)
-    }, secondInputProps))), renderAdditionalColumn == null ? void 0 : renderAdditionalColumn(params), typeof renderActions === 'function' && (renderActions == null ? void 0 : renderActions(param, id, params, {
-      onClickDelete: onClickDelete
-    })) || renderActions === true && /*#__PURE__*/React.createElement(S.CrudWrapper, {
-      marginWithLabel: id === 0 ? leftColumnName : null
-    }, /*#__PURE__*/React.createElement(Cruds, {
-      onRemove: function onRemove() {
-        var newParams = params ? [].concat(params.slice(0, id), params.slice(id + 1, params.length)) : [];
+      }, label: id === 0 ? rightColumnName : null, error: Boolean(validation?.validateRightColumn?.(param.value)), errorText: validation?.validateRightColumn?.(param.value), ...secondInputProps }) }),
+      renderAdditionalColumn?.(params),
+      typeof renderActions === "function" && renderActions?.(param, id, params, {
+        onClickDelete
+      }) || renderActions === true && /* @__PURE__ */ jsx(CrudWrapper, { marginWithLabel: id === 0 ? leftColumnName : null, children: /* @__PURE__ */ jsx(Cruds, { onRemove: () => {
+        const newParams = params ? [...params.slice(0, id), ...params.slice(id + 1, params.length)] : [];
         if (onClickDelete) {
           onClickDelete(param, id, newParams);
         } else {
           setParams(newParams);
         }
-      }
-    })) || undefined);
-  }), (_renderAddButton = renderAddButton == null ? void 0 : renderAddButton(params)) != null ? _renderAddButton : /*#__PURE__*/React.createElement(S.ButtonWrapper, null, /*#__PURE__*/React.createElement(S.AddButton, {
-    onClick: (addButtonConfig == null ? void 0 : addButtonConfig.onClickAddRow) || onSetParamsDefault,
-    type: "ghost-primary",
-    disabled: addButtonConfig == null ? void 0 : addButtonConfig.disableAddButton
-  }, /*#__PURE__*/React.createElement(S.AddIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(Add3M, null),
-    size: 24,
-    color: theme.palette['blue-600']
-  })), /*#__PURE__*/React.createElement("span", null, addButtonConfig == null ? void 0 : addButtonConfig.textAddButton))));
+      } }) }) || void 0
+    ] }, id)),
+    renderAddButton?.(params) ?? /* @__PURE__ */ jsx(ButtonWrapper, { children: /* @__PURE__ */ jsxs(AddButton, { onClick: addButtonConfig?.onClickAddRow || onSetParamsDefault, type: "ghost-primary", disabled: addButtonConfig?.disableAddButton, children: [
+      /* @__PURE__ */ jsx(AddIconWrapper, { children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Add3M, {}), size: 24, color: theme.palette["blue-600"] }) }),
+      /* @__PURE__ */ jsx("span", { children: addButtonConfig?.textAddButton })
+    ] }) })
+  ] });
+};
+export {
+  EditableList,
+  EditableList as default
 };
-export default EditableList;

package/dist/EditableList/EditableList.styles.d.ts

@@ -1,10 +1,10 @@
-import { type StyledButton } from '@synerise/ds-button';
-export declare const RowWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AutoCompleteWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { StyledButton } from '@synerise/ds-button';
+export declare const RowWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const AutoCompleteWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ButtonWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const AddButton: StyledButton;
-export declare const AddIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CrudWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const AddIconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const CrudWrapper: import('styled-components').StyledComponent<"div", any, {
     marginWithLabel?: boolean | React.ReactNode;
 }, never>;
-export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/EditableList/EditableList.styles.js

@@ -1,32 +1,39 @@
-import styled from 'styled-components';
-import Button from '@synerise/ds-button';
-export var RowWrapper = styled.div.withConfig({
+import styled from "styled-components";
+import Button from "@synerise/ds-button";
+const RowWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "EditableListstyles__RowWrapper",
   componentId: "sc-1uztup5-0"
 })(["display:flex;align-items:start;padding:8px 0px 8px 0px;"]);
-export var AutoCompleteWrapper = styled.div.withConfig({
+const AutoCompleteWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "EditableListstyles__AutoCompleteWrapper",
   componentId: "sc-1uztup5-1"
 })(["padding-right:10px;margin-bottom:15px;"]);
-export var ButtonWrapper = styled.div.withConfig({
+const ButtonWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "EditableListstyles__ButtonWrapper",
   componentId: "sc-1uztup5-2"
 })([""]);
-export var AddButton = styled(Button).withConfig({
+const AddButton = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "EditableListstyles__AddButton",
   componentId: "sc-1uztup5-3"
 })(["span{padding:0 4px;}"]);
-export var AddIconWrapper = styled.div.withConfig({
+const AddIconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "EditableListstyles__AddIconWrapper",
   componentId: "sc-1uztup5-4"
 })(["display:inline-block;"]);
-export var CrudWrapper = styled.div.withConfig({
+const CrudWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "EditableListstyles__CrudWrapper",
   componentId: "sc-1uztup5-5"
-})(["padding-left:4px;margin-top:", ";"], function (props) {
-  return props.marginWithLabel ? '30px' : '4px';
-});
-export var InputWrapper = styled.div.withConfig({
+})(["padding-left:4px;margin-top:", ";"], (props) => props.marginWithLabel ? "30px" : "4px");
+const InputWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "EditableListstyles__InputWrapper",
   componentId: "sc-1uztup5-6"
-})(["padding-left:4px;"]);
+})(["padding-left:4px;"]);
+export {
+  AddButton,
+  AddIconWrapper,
+  AutoCompleteWrapper,
+  ButtonWrapper,
+  CrudWrapper,
+  InputWrapper,
+  RowWrapper
+};

package/dist/EditableList/EditableList.types.d.ts

@@ -1,6 +1,6 @@
-import type { InputProps } from 'antd/lib/input';
-import type { ReactNode } from 'react';
-import type { AutocompleteProps } from '@synerise/ds-autocomplete';
+import { InputProps } from 'antd/lib/input';
+import { ReactNode } from 'react';
+import { AutocompleteProps } from '@synerise/ds-autocomplete';
 export type EditableParam = {
     name: string;
     value: string;

package/dist/EditableList/EditableList.types.js

@@ -1 +1 @@
-export {};
+

package/dist/Elements/FieldSet/FieldSet.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type FieldSetProps } from './FieldSet.types';
+import { default as React } from 'react';
+import { FieldSetProps } from './FieldSet.types';
 /**
  * @deprecated - FieldSet component will no longer be supported
  */

package/dist/Elements/FieldSet/FieldSet.js

@@ -1,19 +1,20 @@
-import React from 'react';
-import Divider from '@synerise/ds-divider';
-import * as S from './FieldSet.styles';
-/**
- * @deprecated - FieldSet component will no longer be supported
- */
-var FieldSet = function FieldSet(_ref) {
-  var className = _ref.className,
-    heading = _ref.heading,
-    description = _ref.description,
-    withLine = _ref.withLine,
-    children = _ref.children;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.TopWrapper, {
-    className: className
-  }, /*#__PURE__*/React.createElement(S.Heading, null, heading), /*#__PURE__*/React.createElement(S.Description, null, description), withLine && /*#__PURE__*/React.createElement(Divider, {
-    marginTop: 18
-  })), children);
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import Divider from "@synerise/ds-divider";
+import { TopWrapper, Heading, Description } from "./FieldSet.styles.js";
+const FieldSet = ({
+  className,
+  heading,
+  description,
+  withLine,
+  children
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsxs(TopWrapper, { className, children: [
+    /* @__PURE__ */ jsx(Heading, { children: heading }),
+    /* @__PURE__ */ jsx(Description, { children: description }),
+    withLine && /* @__PURE__ */ jsx(Divider, { marginTop: 18 })
+  ] }),
+  children
+] });
+export {
+  FieldSet as default
 };
-export default FieldSet;

package/dist/Elements/FieldSet/FieldSet.styles.d.ts

@@ -1,3 +1,3 @@
-export declare const TopWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Heading: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TopWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Heading: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const Description = "div";

package/dist/Elements/FieldSet/FieldSet.styles.js

@@ -1,11 +1,16 @@
-import styled from 'styled-components';
-import { macro } from '@synerise/ds-typography';
-export var TopWrapper = styled.div.withConfig({
+import styled from "styled-components";
+import { macro } from "@synerise/ds-typography";
+const TopWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "FieldSetstyles__TopWrapper",
   componentId: "sc-pb79tu-0"
 })(["margin-bottom:24px;"]);
-export var Heading = styled.div.withConfig({
+const Heading = /* @__PURE__ */ styled.div.withConfig({
   displayName: "FieldSetstyles__Heading",
   componentId: "sc-pb79tu-1"
 })(["margin-bottom:4px;", ";", ";"], macro.heading, macro.h400);
-export var Description = 'div';
+const Description = "div";
+export {
+  Description,
+  Heading,
+  TopWrapper
+};

package/dist/Elements/FieldSet/FieldSet.types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { ReactNode } from 'react';
 export interface FieldSetProps {
     className?: string;
     heading: ReactNode;

package/dist/Elements/FieldSet/FieldSet.types.js

@@ -1 +1 @@
-export {};
+

package/dist/Form.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import FieldSet from './Elements/FieldSet/FieldSet';
+import { default as React } from 'react';
+import { default as FieldSet } from './Elements/FieldSet/FieldSet';
 declare class Form extends React.Component {
     static FieldSet: typeof FieldSet;
 }

package/dist/Form.js

@@ -1,13 +1,9 @@
-function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-import React from 'react';
-import FieldSet from './Elements/FieldSet/FieldSet';
-var Form = /*#__PURE__*/function (_React$Component) {
-  function Form() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  _inheritsLoose(Form, _React$Component);
-  return Form;
-}(React.Component);
-Form.FieldSet = FieldSet;
-export default Form;
+import React from "react";
+import FieldSet from "./Elements/FieldSet/FieldSet.js";
+const _Form = class _Form extends React.Component {
+};
+_Form.FieldSet = FieldSet;
+let Form = _Form;
+export {
+  Form as default
+};

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { EditableList } from './EditableList/EditableList';
-import type { EditListProps, EditableParam } from './EditableList/EditableList.types';
+import { EditListProps, EditableParam } from './EditableList/EditableList.types';
 export { EditableList };
 export { default } from './Form';
 export type { EditableParam, EditListProps };

package/dist/index.js

@@ -1,3 +1,6 @@
-import { EditableList } from './EditableList/EditableList';
-export { EditableList };
-export { default } from './Form';
+import { EditableList } from "./EditableList/EditableList.js";
+import { default as default2 } from "./Form.js";
+export {
+  EditableList,
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-form",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Form UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,13 +35,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-autocomplete": "^1.2.34",
-    "@synerise/ds-button": "^1.5.17",
-    "@synerise/ds-cruds": "^1.1.1",
-    "@synerise/ds-divider": "^1.3.1",
-    "@synerise/ds-icon": "^1.15.0",
-    "@synerise/ds-input": "^1.6.9",
-    "@synerise/ds-typography": "^1.1.12"
+    "@synerise/ds-autocomplete": "^1.2.35",
+    "@synerise/ds-button": "^1.5.18",
+    "@synerise/ds-cruds": "^1.1.2",
+    "@synerise/ds-divider": "^1.3.2",
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-input": "^1.6.10",
+    "@synerise/ds-typography": "^1.1.13"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -49,5 +49,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }

package/dist/Elements/FieldSet/__specs__/FieldSet.spec.d.ts

@@ -1 +0,0 @@
-export {};