@hortiview/shared-components 2.7.0 → 2.8.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [2.8.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.7.0...v2.8.0) (2025-10-28)
+
+### Features
+
+* add SafeForm component to prevent accidental submissions and update related components ([edcef25](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/edcef25688a9cde175feb1307639d742c020f4fe))
+
+### Bug Fixes
+
+* allow onClick methods of submit buttons to be executed ([cc0f7df](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/cc0f7df87faf7647a336d1e07ba3d54630bcf24d))
+* ensure button type is explicitly set in SearchBar component to avoid unindented submit ([1772631](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/17726319501bf5111dccb2bbb862e9968ee75aa7))
+
+### Documentation
+
+* update README to specify date and time formats from Time.ts ([a29a632](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/a29a632660dedf95241ab6c467cf95d1bafef385))
+
+### Code Refactoring
+
+* reorder SafeForm export in main.ts for faster lookup ([5935b7b](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/5935b7bebb4e970946d7f499c0b70db4f4b123c2))
+
 ## [2.7.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.6.1...v2.7.0) (2025-10-24)
 
 ### Features

package/README.md

@@ -54,6 +54,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [OfflineView](#offlineview)
 1. [OnboardingBanner](#onboardingbanner)
 1. [OverflowTooltip](#overflowtooltip)
+1. [SafeForm](#safeform)
 1. [ScrollBar](#scrollbar)
 1. [SearchBar](#searchbar)
 1. [Select](#select)
@@ -358,14 +359,14 @@ const formMethods = useForm<{ check: boolean }>({
 const { handleSubmit } = formMethods;
 
 <FormProvider {...formMethods}>
-  <form onSubmit={handleSubmit(onSubmit)}>
+  <SafeForm onSubmit={handleSubmit(onSubmit)}>
     <FormCheckBox<{ check: boolean }>
       propertyName={`check`}
       label={'My Checkbox'}
       onChange={() => additionalOnChange()}
       validate={validateFn}
     />
-  </form>
+  </SafeForm>
 </FormProvider>;
 ```
 
@@ -384,13 +385,13 @@ const formMethods = useForm<{ birthday: string }>({
 const { handleSubmit } = formMethods;
 
 <FormProvider {...formMethods}>
-  <form onSubmit={handleSubmit(onSubmit)}>
+  <SafeForm onSubmit={handleSubmit(onSubmit)}>
     <FormDatePicker<{ birthday: string }>
       propertyName={'birthday'}
       label={'user.date-of-birth'}
       maxRangeYear={0}
     />
-  </form>
+  </SafeForm>
 </FormProvider>;
 ```
 
@@ -409,7 +410,7 @@ const formMethods = useForm<{ birthday: string }>({
 const { handleSubmit } = formMethods;
 
 <FormProvider {...formMethods}>
-  <form onSubmit={handleSubmit(onSubmit)}>
+  <SafeForm onSubmit={handleSubmit(onSubmit)}>
     <FormNumber<{ price: number }>
       propertyName='price'
       label='module.price'
@@ -420,7 +421,7 @@ const { handleSubmit } = formMethods;
       allowLeadingZeros={false}
       prefix=" €"
     />
-  </form>
+  </SafeForm>
 </FormProvider>;
 ```
 
@@ -439,7 +440,7 @@ const formMethods = useForm<{ radioValue: string }>({
 const { handleSubmit } = formMethods;
 
 <FormProvider {...formMethods}>
-  <form onSubmit={handleSubmit(onSubmit)}>
+  <SafeForm onSubmit={handleSubmit(onSubmit)}>
      <FormRadio<{ radioValue: string }>
         propertyName='radioValue'
         options={[
@@ -447,7 +448,7 @@ const { handleSubmit } = formMethods;
           { value: 'free', label: 'Free },
         ]}
       />
-  </form>
+  </SafeForm>
 </FormProvider>;
 ```
 
@@ -479,7 +480,7 @@ const typeOptions = [
 ];
 
 <FormProvider {...formMethods}>
-  <form onSubmit={handleSubmit(onSubmit)}>
+  <SafeForm onSubmit={handleSubmit(onSubmit)}>
     <FormSelect<{ type: string }>
       propertyName='type'
       label='Type'
@@ -489,7 +490,7 @@ const typeOptions = [
       requiredText='required'
       required
     />
-  </form>
+  </SafeForm>
 </FormProvider>;
 ```
 
@@ -508,9 +509,9 @@ const formMethods = useForm<{ range: string }>({
 const { handleSubmit } = formMethods;
 
 <FormProvider {...formMethods}>
-  <form onSubmit={handleSubmit(onSubmit)}>
+  <SafeForm onSubmit={handleSubmit(onSubmit)}>
     <FormSlider<{ range: string }> propertyName='range' minValue={30} maxValue={90} step={30} />
-  </form>
+  </SafeForm>
 </FormProvider>;
 ```
 
@@ -529,7 +530,7 @@ const formMethods = useForm<{ address: string }>({
 const { handleSubmit } = formMethods;
 
 <FormProvider {...formMethods}>
-  <form onSubmit={handleSubmit(onSubmit)}>
+  <SafeForm onSubmit={handleSubmit(onSubmit)}>
     <FormText<{ address: string }>
       maxLength={200}
       label='address'
@@ -538,7 +539,7 @@ const { handleSubmit } = formMethods;
       requiredText='required'
       textarea
     />
-  </form>
+  </SafeForm>
 </FormProvider>;
 ```
 
@@ -897,21 +898,20 @@ Shows an offline state with icon, title, and optional subtitle. Use `size` 'smal
 ```jsx
 import { OfflineView } from '@hortiview/shared-components';
 
-<OfflineView title="Title" subtitle="Subtitle" />
+<OfflineView title='Title' subtitle='Subtitle' />;
 ```
 
 ### OnboardingBanner
 
 A responsive onboarding banner that adapts its layout for desktop and mobile.
 
-- **Desktop:** Media content is displayed to the _right_ of the description  
+- **Desktop:** Media content is displayed to the _right_ of the description
 - **Mobile:** Media content appears _above_ the description
 
 ```jsx
-import {OnboardingBanner} from '@hortiview/shared-components';
-
-<OnboardingBanner headline='Hello' />
+import { OnboardingBanner } from '@hortiview/shared-components';
 
+<OnboardingBanner headline='Hello' />;
 ```
 
 ### OverflowTooltip
@@ -930,6 +930,27 @@ const longText =
 </OverflowTooltip>;
 ```
 
+### SafeForm
+
+A wrapper around a form that prevents accidental submission when pressing Enter in input fields.
+
+- It handles the 'keydown' event and intercepts the Enter key press.
+- If the focused element is a button, submit button or text area, it allows the default behavior.
+- Otherwise, it prevents the default action to avoid unintended submissions.
+
+```jsx
+import { SafeForm } from '@hortiview/shared-components';
+
+<FormProvider {...formMethods}>
+  <SafeForm onSubmit={handleSubmit(onSubmitForm)}>
+    <Group direction='vertical' primaryAlign='space-between'>
+      {children}
+      <Button type='submit'>Submit</Button>
+    </Group>
+  </SafeForm>
+</FormProvider>;
+```
+
 ### ScrollBar
 
 Provides a scrollbar in hortiview styling. Add it a classname on your component.
@@ -1114,11 +1135,17 @@ const overlineTitle = `${getNumberAsLocaleString(userLocale, totalArea, 5)} ${t(
 Formats a date (string) with Intl.DateTimeFormat.
 If locale is a plain code ("en" | "es" | "tr"), it’s mapped to a regional tag ("en-US", "es-MX", "tr-TR").
 
-For consistency, please use the date and time formats defined in `Time.ts`.
+For consistency, please use `DATE_FORMAT`, `TIME_FORMAT` and `DATE_TIME_FORMAT`.
 
 ```typescript
-getFormattedDateTime('2025-10-02T14:30:00Z', 'en-US', { dateStyle: 'medium' })
-// -> Oct 2, 2025
+import { DATE_FORMAT, TIME_FORMAT, DATE_TIME_FORMAT } from '@hortiview/shared-components';
+
+getFormattedDateTime('2025-10-02T14:30:00Z', 'en-US', DATE_FORMAT);
+// -> 10/02/2025
+getFormattedDateTime('2025-10-02T14:30:00Z', 'es-MX', TIME_FORMAT);
+// -> 04:30 p.m.
+getFormattedDateTime('2025-10-02T14:30:00Z', 'tr-TR', DATE_TIME_FORMAT);
+// -> 02.10.2025 ÖS 04:30
 ```
 
 ## Available constants

package/dist/components/DeleteModal/DeleteModal.js

@@ -23,9 +23,9 @@ import '../../assets/DeleteModal.css';const O = "_bulletPoint_bd412_1", j = "_mo
   icon: g,
   isIconCrossedOut: h,
   impossibleDeleteHeader: v,
-  open: y,
+  open: _,
   setOpen: d,
-  onDelete: _,
+  onDelete: y,
   onCancel: C,
   isDeletePossible: m = !0,
   isOnline: u = !0,
@@ -39,16 +39,16 @@ import '../../assets/DeleteModal.css';const O = "_bulletPoint_bd412_1", j = "_mo
       offlineViewProps: D,
       className: `${t.modal}`,
       modalSize: k ? "small" : "fullscreen",
-      open: y,
+      open: _,
       title: r,
       onClose: () => d(!1),
-      primaryButton: /* @__PURE__ */ o(
+      actionButton: /* @__PURE__ */ o(
         p,
         {
           "data-testid": "delete-button",
           variant: "danger",
           label: e,
-          onClick: _,
+          onClick: y,
           disabled: !m || !u
         }
       ),

package/dist/components/Filter/Filter.js

@@ -27,7 +27,7 @@ import '../../assets/Filter.css';const K = "_filterButton_qtl7a_1", T = "_relati
 }, ut = ({
   clearFilterText: m,
   closeCallback: s,
-  currentFilter: i,
+  currentFilter: r,
   filterButtonAsIcon: d = !1,
   filterButtonText: a,
   filterModalTitle: t,
@@ -35,21 +35,21 @@ import '../../assets/Filter.css';const K = "_filterButton_qtl7a_1", T = "_relati
   modalCancelButtonText: g,
   modalConfirmButtonText: p,
   useModal: o = !0,
-  selectAllLabel: r,
+  selectAllLabel: i,
   "data-testid": w
 }) => {
-  const { isDesktop: A } = k(), [$, B] = v(!1), [c, y] = v(i), [q, C] = v(0), x = () => {
-    B(!1), s(c), C(
+  const { isDesktop: A } = k(), [$, B] = v(!1), [c, C] = v(r), [q, x] = v(0), y = () => {
+    B(!1), s(c), x(
       c.reduce((l, { filterValue: n }) => n === void 0 ? l : typeof n == "boolean" ? n ? l + 1 : l : Array.isArray(n) ? l + n.length : typeof n == "string" && n.length ? l + 1 : l, 0)
     );
   }, O = () => {
-    y([]), C(0);
+    C([]), x(0);
   }, S = (l) => {
     const n = [
       ...c.filter((P) => P.id !== l.id),
       l
     ];
-    y(n), o || s(n);
+    C(n), o || s(n);
   };
   return o ? /* @__PURE__ */ b(D, { children: [
     /* @__PURE__ */ e(
@@ -66,7 +66,7 @@ import '../../assets/Filter.css';const K = "_filterButton_qtl7a_1", T = "_relati
       H,
       {
         open: $,
-        onClose: x,
+        onClose: y,
         title: t,
         modalSize: A ? "small" : "fullscreen",
         headerActions: /* @__PURE__ */ e(h, { "data-testid": "filter-clear-button", variant: "text", onClick: O, children: m }),
@@ -79,12 +79,12 @@ import '../../assets/Filter.css';const K = "_filterButton_qtl7a_1", T = "_relati
             children: g
           }
         ),
-        primaryButton: /* @__PURE__ */ e(h, { "data-testid": "filter-confirm-button", variant: "filled", onClick: x, children: p }),
-        children: /* @__PURE__ */ e(_, { direction: "vertical", "data-testid": "filter-map-filters", children: N(f, c, S, r) })
+        actionButton: /* @__PURE__ */ e(h, { "data-testid": "filter-confirm-button", variant: "filled", onClick: y, children: p }),
+        children: /* @__PURE__ */ e(_, { direction: "vertical", "data-testid": "filter-map-filters", children: N(f, c, S, i) })
       }
     )
-  ] }) : /* @__PURE__ */ e(_, { secondaryAlign: "center", fullWidth: !0, children: N(f, c, S, r, !1) });
-}, N = (m, s, i, d, a = !0) => m.map(({ id: t, title: f, availableOptions: g, icon: p, type: o }) => /* @__PURE__ */ b(_, { fullWidth: !0, secondaryAlign: "center", "data-testid": `filter-${o}-group-${t}`, children: [
+  ] }) : /* @__PURE__ */ e(_, { secondaryAlign: "center", fullWidth: !0, children: N(f, c, S, i, !1) });
+}, N = (m, s, r, d, a = !0) => m.map(({ id: t, title: f, availableOptions: g, icon: p, type: o }) => /* @__PURE__ */ b(_, { fullWidth: !0, secondaryAlign: "center", "data-testid": `filter-${o}-group-${t}`, children: [
   p ? /* @__PURE__ */ e(z, { icon: p, iconSize: "medium" }) : null,
   o === "select" && /* @__PURE__ */ e(
     I,
@@ -98,8 +98,8 @@ import '../../assets/Filter.css';const K = "_filterButton_qtl7a_1", T = "_relati
       multiSelect: !0,
       textKey: "text",
       valueKey: "id",
-      value: s.find((r) => r.id === t)?.filterValue ?? [],
-      onChange: (r) => i({ id: t, type: o, filterValue: r }),
+      value: s.find((i) => i.id === t)?.filterValue ?? [],
+      onChange: (i) => r({ id: t, type: o, filterValue: i }),
       hoisted: !0,
       menuMaxHeight: "300px",
       disabled: t === "location",
@@ -114,8 +114,8 @@ import '../../assets/Filter.css';const K = "_filterButton_qtl7a_1", T = "_relati
     {
       "data-testid": `filter-switch-${t}`,
       label: f,
-      onChange: (r) => i({ id: t, type: o, filterValue: r }),
-      checked: !!s.find((r) => r.id === t)?.filterValue
+      onChange: (i) => r({ id: t, type: o, filterValue: i }),
+      checked: !!s.find((i) => i.id === t)?.filterValue
     }
   ),
   o === "search" && /* @__PURE__ */ e(
@@ -123,14 +123,14 @@ import '../../assets/Filter.css';const K = "_filterButton_qtl7a_1", T = "_relati
     {
       "data-testid": `filter-search-${t}`,
       placeholder: f,
-      searchTerm: s.find((r) => r.id === t)?.filterValue,
-      setSearchTerm: (r) => i({ id: t, type: o, filterValue: r })
+      searchTerm: s.find((i) => i.id === t)?.filterValue,
+      setSearchTerm: (i) => r({ id: t, type: o, filterValue: i })
     }
   )
 ] }, t)), J = ({
   filterButtonText: m,
   filterButtonAsIcon: s,
-  count: i,
+  count: r,
   "data-testid": d,
   onClick: a
 }) => {
@@ -141,10 +141,10 @@ import '../../assets/Filter.css';const K = "_filterButton_qtl7a_1", T = "_relati
       "data-testid": d ?? "filter-icon-button",
       icon: "filter_list_alt",
       onClick: a,
-      badge: i !== 0 && /* @__PURE__ */ e(
+      badge: r !== 0 && /* @__PURE__ */ e(
         F,
         {
-          counter: i,
+          counter: r,
           className: u.filterBadge,
           themeColor: "secondary",
           "data-testid": "filter-badge"
@@ -171,10 +171,10 @@ import '../../assets/Filter.css';const K = "_filterButton_qtl7a_1", T = "_relati
             children: m
           }
         ),
-        i !== 0 && /* @__PURE__ */ e(
+        r !== 0 && /* @__PURE__ */ e(
           F,
           {
-            counter: i,
+            counter: r,
             className: u.filterBadge,
             themeColor: "secondary",
             "data-testid": "filter-badge"

package/dist/components/Modal/Modal.d.ts

@@ -2,7 +2,7 @@ import { ModalProps as ElementModalProps } from '@element-public/react-modal';
 import { AvailableCustomIcons } from '../../enums/AvailableCustomIcons';
 import { OfflineViewProps } from '../OfflineView/OfflineView';
 
-type ModalProps = ElementModalProps & React.HTMLProps<HTMLElement> & React.DOMAttributes<HTMLElement> & {
+type ModalProps = Omit<ElementModalProps, 'primaryButton'> & React.HTMLProps<HTMLElement> & React.DOMAttributes<HTMLElement> & {
     leadingIcon?: keyof typeof AvailableCustomIcons | string;
     isOnline?: boolean;
     offlineViewProps?: Partial<OfflineViewProps>;
@@ -13,12 +13,13 @@ type ModalProps = ElementModalProps & React.HTMLProps<HTMLElement> & React.DOMAt
  * @param onClose - The function to call when the modal is closed - Should be passed to the modal.
  * @param title - The title of the modal.
  * @param headerActions - The actions to display in the header of the modal.
- * @param hideCloseIcon - If true, the close icon will be hidden. @default true.
+ * @param actionButton - Button for the primary action of the modal - primaryButton is omitted from {@link ModalProps} since it triggers form submission on Enter key press.
+ * @param hideCloseIcon - If true, the close icon will be hidden. Default true.
  * @param leadingIcon - Iconify icon string (material icons and custom icons)
- * @param - Other element props to pass to the modal.
  * @param isOnline - Whether the user is online; shows OfflineView when false.
  * @param offlineViewProps - Props forwarded to OfflineView when offline.
+ * @param ...props - Other element props to pass to the modal.
  * @returns
  */
-export declare const Modal: ({ onClose, title, headerActions, hideCloseIcon, leadingIcon, isOnline, offlineViewProps, children, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ onClose, title, headerActions, actionButton, hideCloseIcon, leadingIcon, isOnline, offlineViewProps, children, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Modal/Modal.js

@@ -1,8 +1,8 @@
 import { jsxs as ft, jsx as C, Fragment as pt } from "react/jsx-runtime";
-import { G as z } from "../../index.es-CbBdaRO2.js";
+import { G as j } from "../../index.es-CbBdaRO2.js";
 import { I as it } from "../../index.es-Kg9soDed.js";
 import { _ as ht, c as B, P as s } from "../../_setToString-Do1lSQTZ.js";
-import d, { forwardRef as gt, useRef as et, useImperativeHandle as _t, useState as nt, useEffect as E, useCallback as j, useMemo as Y, Fragment as Et } from "react";
+import d, { forwardRef as gt, useRef as et, useImperativeHandle as _t, useState as nt, useEffect as E, useCallback as q, useMemo as J, Fragment as Et } from "react";
 import { i as Ct, c as b, a as St } from "../../index.es-DlzwTKbh.js";
 import { b as at, c as ot, d as vt } from "../../tslib.es6-BDCynO9F.js";
 import { M as yt, a as Ot } from "../../component-neHBNHRu.js";
@@ -74,7 +74,7 @@ function kt(i) {
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var q = "mdc-dom-focus-sentinel", Ht = (
+var $ = "mdc-dom-focus-sentinel", Ht = (
   /** @class */
   function() {
     function i(e, t) {
@@ -86,7 +86,7 @@ var q = "mdc-dom-focus-sentinel", Ht = (
         throw new Error("FocusTrap: Element must have at least one focusable child.");
       this.elFocusedBeforeTrapFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null, this.wrapTabFocus(this.root), this.options.skipInitialFocus || this.focusInitialElement(e, this.options.initialFocusEl);
     }, i.prototype.releaseFocus = function() {
-      [].slice.call(this.root.querySelectorAll("." + q)).forEach(function(e) {
+      [].slice.call(this.root.querySelectorAll("." + $)).forEach(function(e) {
         e.parentElement.removeChild(e);
       }), !this.options.skipRestoreFocus && this.elFocusedBeforeTrapFocus && this.elFocusedBeforeTrapFocus.focus();
     }, i.prototype.wrapTabFocus = function(e) {
@@ -104,16 +104,16 @@ var q = "mdc-dom-focus-sentinel", Ht = (
     }, i.prototype.getFocusableElements = function(e) {
       var t = [].slice.call(e.querySelectorAll("[autofocus], [tabindex], a, input, textarea, select, button"));
       return t.filter(function(n) {
-        var o = n.getAttribute("aria-disabled") === "true" || n.getAttribute("disabled") != null || n.getAttribute("hidden") != null || n.getAttribute("aria-hidden") === "true", a = n.tabIndex >= 0 && n.getBoundingClientRect().width > 0 && !n.classList.contains(q) && !o, f = !1;
+        var o = n.getAttribute("aria-disabled") === "true" || n.getAttribute("disabled") != null || n.getAttribute("hidden") != null || n.getAttribute("aria-hidden") === "true", a = n.tabIndex >= 0 && n.getBoundingClientRect().width > 0 && !n.classList.contains($) && !o, f = !1;
         if (a) {
-          var h = getComputedStyle(n);
-          f = h.display === "none" || h.visibility === "hidden";
+          var p = getComputedStyle(n);
+          f = p.display === "none" || p.visibility === "hidden";
         }
         return a && !f;
       });
     }, i.prototype.createSentinel = function() {
       var e = document.createElement("div");
-      return e.setAttribute("tabindex", "0"), e.setAttribute("aria-hidden", "true"), e.classList.add(q), e;
+      return e.setAttribute("tabindex", "0"), e.setAttribute("aria-hidden", "true"), e.classList.add($), e;
     }, i;
   }()
 );
@@ -172,7 +172,7 @@ var r = {
   // to prevent interactions with the content behind this scrim, and to capture
   // scrim clicks.
   SCRIM_HIDDEN: "mdc-dialog__scrim--hidden"
-}, v = {
+}, y = {
   ACTION_ATTRIBUTE: "data-mdc-dialog-action",
   BUTTON_DEFAULT_ATTRIBUTE: "data-mdc-dialog-button-default",
   BUTTON_SELECTOR: ".mdc-dialog__button",
@@ -192,7 +192,7 @@ var r = {
     ".mdc-menu .mdc-deprecated-list-item"
   ].join(", "),
   SURFACE_SELECTOR: ".mdc-dialog__surface"
-}, $ = {
+}, Y = {
   DIALOG_ANIMATION_CLOSE_TIME_MS: 75,
   DIALOG_ANIMATION_OPEN_TIME_MS: 150
 };
@@ -228,7 +228,7 @@ var rt = (
     at(e, i);
     function e(t) {
       var n = i.call(this, ot(ot({}, e.defaultAdapter), t)) || this;
-      return n.dialogOpen = !1, n.isFullscreen = !1, n.animationFrame = 0, n.animationTimer = 0, n.escapeKeyAction = v.CLOSE_ACTION, n.scrimClickAction = v.CLOSE_ACTION, n.autoStackButtons = !0, n.areButtonsStacked = !1, n.suppressDefaultPressSelector = v.SUPPRESS_DEFAULT_PRESS_SELECTOR, n.animFrame = new Dt(), n.contentScrollHandler = function() {
+      return n.dialogOpen = !1, n.isFullscreen = !1, n.animationFrame = 0, n.animationTimer = 0, n.escapeKeyAction = y.CLOSE_ACTION, n.scrimClickAction = y.CLOSE_ACTION, n.autoStackButtons = !0, n.areButtonsStacked = !1, n.suppressDefaultPressSelector = y.SUPPRESS_DEFAULT_PRESS_SELECTOR, n.animFrame = new Dt(), n.contentScrollHandler = function() {
         n.handleScrollEvent();
       }, n.windowResizeHandler = function() {
         n.layout();
@@ -244,13 +244,13 @@ var rt = (
       configurable: !0
     }), Object.defineProperty(e, "strings", {
       get: function() {
-        return v;
+        return y;
       },
       enumerable: !1,
       configurable: !0
     }), Object.defineProperty(e, "numbers", {
       get: function() {
-        return $;
+        return Y;
       },
       enumerable: !1,
       configurable: !0
@@ -320,19 +320,19 @@ var rt = (
     }), e.prototype.init = function() {
       this.adapter.hasClass(r.STACKED) && this.setAutoStackButtons(!1), this.isFullscreen = this.adapter.hasClass(r.FULLSCREEN);
     }, e.prototype.destroy = function() {
-      this.dialogOpen && this.close(v.DESTROY_ACTION), this.animationTimer && (clearTimeout(this.animationTimer), this.handleAnimationTimerEnd()), this.isFullscreen && this.adapter.deregisterContentEventHandler("scroll", this.contentScrollHandler), this.animFrame.cancelAll(), this.adapter.deregisterWindowEventHandler("resize", this.windowResizeHandler), this.adapter.deregisterWindowEventHandler("orientationchange", this.windowOrientationChangeHandler);
+      this.dialogOpen && this.close(y.DESTROY_ACTION), this.animationTimer && (clearTimeout(this.animationTimer), this.handleAnimationTimerEnd()), this.isFullscreen && this.adapter.deregisterContentEventHandler("scroll", this.contentScrollHandler), this.animFrame.cancelAll(), this.adapter.deregisterWindowEventHandler("resize", this.windowResizeHandler), this.adapter.deregisterWindowEventHandler("orientationchange", this.windowOrientationChangeHandler);
     }, e.prototype.open = function(t) {
       var n = this;
       this.dialogOpen = !0, this.adapter.notifyOpening(), this.adapter.addClass(r.OPENING), this.isFullscreen && this.adapter.registerContentEventHandler("scroll", this.contentScrollHandler), t && t.isAboveFullscreenDialog && this.adapter.addClass(r.SCRIM_HIDDEN), this.adapter.registerWindowEventHandler("resize", this.windowResizeHandler), this.adapter.registerWindowEventHandler("orientationchange", this.windowOrientationChangeHandler), this.runNextAnimationFrame(function() {
         n.adapter.addClass(r.OPEN), n.adapter.addBodyClass(r.SCROLL_LOCK), n.layout(), n.animationTimer = setTimeout(function() {
           n.handleAnimationTimerEnd(), n.adapter.trapFocus(n.adapter.getInitialFocusEl()), n.adapter.notifyOpened();
-        }, $.DIALOG_ANIMATION_OPEN_TIME_MS);
+        }, Y.DIALOG_ANIMATION_OPEN_TIME_MS);
       });
     }, e.prototype.close = function(t) {
       var n = this;
       t === void 0 && (t = ""), this.dialogOpen && (this.dialogOpen = !1, this.adapter.notifyClosing(t), this.adapter.addClass(r.CLOSING), this.adapter.removeClass(r.OPEN), this.adapter.removeBodyClass(r.SCROLL_LOCK), this.isFullscreen && this.adapter.deregisterContentEventHandler("scroll", this.contentScrollHandler), this.adapter.deregisterWindowEventHandler("resize", this.windowResizeHandler), this.adapter.deregisterWindowEventHandler("orientationchange", this.windowOrientationChangeHandler), cancelAnimationFrame(this.animationFrame), this.animationFrame = 0, clearTimeout(this.animationTimer), this.animationTimer = setTimeout(function() {
         n.adapter.releaseFocus(), n.handleAnimationTimerEnd(), n.adapter.notifyClosed(t);
-      }, $.DIALOG_ANIMATION_CLOSE_TIME_MS));
+      }, Y.DIALOG_ANIMATION_CLOSE_TIME_MS));
     }, e.prototype.showSurfaceScrim = function() {
       var t = this;
       this.adapter.addClass(r.SURFACE_SCRIM_SHOWING), this.runNextAnimationFrame(function() {
@@ -366,7 +366,7 @@ var rt = (
         t.layoutInternal();
       });
     }, e.prototype.handleClick = function(t) {
-      var n = this.adapter.eventTargetMatches(t.target, v.SCRIM_SELECTOR);
+      var n = this.adapter.eventTargetMatches(t.target, y.SCRIM_SELECTOR);
       if (n && this.scrimClickAction !== "")
         this.close(this.scrimClickAction);
       else {
@@ -478,23 +478,23 @@ var u = rt.strings, Pt = (
       return new e(t);
     }, e.prototype.initialize = function(t) {
       var n, o;
-      t === void 0 && (t = function(g, p) {
-        return new Ht(g, p);
+      t === void 0 && (t = function(h, S) {
+        return new Ht(h, S);
       });
       var a = this.root.querySelector(u.CONTAINER_SELECTOR);
       if (!a)
         throw new Error("Dialog component requires a " + u.CONTAINER_SELECTOR + " container element");
       this.container = a, this.content = this.root.querySelector(u.CONTENT_SELECTOR), this.buttons = [].slice.call(this.root.querySelectorAll(u.BUTTON_SELECTOR)), this.defaultButton = this.root.querySelector("[" + u.BUTTON_DEFAULT_ATTRIBUTE + "]"), this.focusTrapFactory = t, this.buttonRipples = [];
       try {
-        for (var f = vt(this.buttons), h = f.next(); !h.done; h = f.next()) {
-          var S = h.value;
-          this.buttonRipples.push(new Tt(S));
+        for (var f = vt(this.buttons), p = f.next(); !p.done; p = f.next()) {
+          var v = p.value;
+          this.buttonRipples.push(new Tt(v));
         }
-      } catch (g) {
-        n = { error: g };
+      } catch (h) {
+        n = { error: h };
       } finally {
         try {
-          h && !h.done && (o = f.return) && o.call(f);
+          p && !p.done && (o = f.return) && o.call(f);
         } finally {
           if (n) throw n.error;
         }
@@ -796,38 +796,38 @@ const Ut = {
     badge: o,
     backButton: a,
     children: f,
-    className: h,
-    content: S,
-    defaultButton: g,
-    dismissiveButton: p,
-    footerSupplemental: y,
-    headerActions: J,
-    hideCloseIcon: H,
+    className: p,
+    content: v,
+    defaultButton: h,
+    dismissiveButton: S,
+    footerSupplemental: g,
+    headerActions: H,
+    hideCloseIcon: P,
     indicator: st,
     initialFocus: O,
-    mobileStackedButtons: P,
+    mobileStackedButtons: U,
     modalSize: _,
     nextButton: T,
     noActions: A,
-    onClose: U,
-    onClosed: x,
+    onClose: x,
+    onClosed: G,
     onOpen: D,
     onOpened: I,
     open: Q,
-    preventClose: G,
+    preventClose: K,
     preventPrimaryAccept: X,
     primaryButton: c,
-    returnFocusSelector: K,
+    returnFocusSelector: W,
     scrollable: Z,
     title: tt,
     ...lt
   } = i, N = et(), l = et();
   _t(e, () => N.current, []);
-  const [W, ct] = nt(), [V, dt] = nt(() => T || a);
+  const [V, ct] = nt(), [z, dt] = nt(() => T || a);
   E(() => {
     dt(T || a);
   }, [T, a]);
-  const L = j(() => {
+  const L = q(() => {
     ct(window.innerWidth <= 600);
   }, []);
   E(() => (L(), window.addEventListener("resize", L), () => {
@@ -835,18 +835,18 @@ const Ut = {
   }), [L]), E(() => (l.current = Pt.attachTo(N.current), () => {
     l.current.destroy();
   }), [l, N]), E(() => {
-    l.current.foundation.setAutoStackButtons(P);
-  }, [P]), E(() => {
+    l.current.foundation.setAutoStackButtons(U);
+  }, [U]), E(() => {
     A && (l.current.foundation.adapter.trapFocus = () => {
     });
   }, [A]), E(() => {
-    l.current.scrimClickAction = G ? "" : "close", l.current.escapeKeyAction = G ? "" : "close";
-  }, [G]);
-  const F = j((m) => {
-    U && U(m);
-  }, [U]), R = j((m) => {
-    K && Ct(K), x && x(m);
-  }, [K, x]);
+    l.current.scrimClickAction = K ? "" : "close", l.current.escapeKeyAction = K ? "" : "close";
+  }, [K]);
+  const F = q((m) => {
+    x && x(m);
+  }, [x]), R = q((m) => {
+    W && Ct(W), G && G(m);
+  }, [W, G]);
   E(() => (l.current.unlisten("MDCDialog: opening", D), l.current.listen("MDCDialog: opening", D), () => {
     l.current.unlisten("MDCDialog: opening", D);
   }), [l, D]), E(() => (l.current.unlisten("MDCDialog:opened", I), l.current.listen("MDCDialog:opened", I), () => {
@@ -858,59 +858,59 @@ const Ut = {
   }), [l, R]), E(() => {
     Q ? l.current.open() : l.current.close();
   }, [l, Q]);
-  const ut = Y(() => () => {
+  const ut = J(() => () => {
     const m = {
       className: "lmnt-modal__button mdc-dialog__button",
       elevation: t?.props.elevation !== "default" ? t?.props.elevation : "flat",
       variant: t?.props.variant || "filled"
     };
-    return g === "action" && (m["data-mdc-dialog-button-default"] = !0), O === "action" && (m["data-mdc-dialog-initial-focus"] = !0), m;
-  }, [t?.props.elevation, t?.props.variant, g, O]), mt = Y(() => () => {
+    return h === "action" && (m["data-mdc-dialog-button-default"] = !0), O === "action" && (m["data-mdc-dialog-initial-focus"] = !0), m;
+  }, [t?.props.elevation, t?.props.variant, h, O]), mt = J(() => () => {
     const m = {
       className: "lmnt-modal__button mdc-dialog__button",
       "data-mdc-dialog-action": X ? "" : "accept",
       elevation: c?.props.elevation !== "default" ? c?.props.elevation : "flat",
       variant: c?.props.variant || "filled"
     };
-    return g === "primary" && (m["data-mdc-dialog-button-default"] = !0), O === "primary" && (m["data-mdc-dialog-initial-focus"] = !0), m;
-  }, [X, g, O, c?.props.elevation, c?.props.variant]);
+    return h === "primary" && (m["data-mdc-dialog-button-default"] = !0), O === "primary" && (m["data-mdc-dialog-initial-focus"] = !0), m;
+  }, [X, h, O, c?.props.elevation, c?.props.variant]);
   return /* @__PURE__ */ d.createElement("aside", ht({
     ref: N,
-    className: B("lmnt", "lmnt-modal", "mdc-dialog", Z && "lmnt-modal--scrollable mdc-dialog--scrollable", h),
+    className: B("lmnt", "lmnt-modal", "mdc-dialog", Z && "lmnt-modal--scrollable mdc-dialog--scrollable", p),
     role: "alertdialog"
   }, lt), /* @__PURE__ */ d.createElement("div", {
-    className: B("lmnt-modal__container", "mdc-dialog__container", _ === "fullscreen" && "mdc-dialog--fullscreen", _ === "max" && "lmnt-modal__max", _ === "xlarge" && "lmnt-modal__xl", _ === "large" && "lmnt-modal__lg", _ === "medium" && "lmnt-modal__md", _ === "small" && "lmnt-modal__sm", (_ === "mobile" || W) && "lmnt-modal__mobile", _ === "dialog" && "lmnt-modal__dialog", A && "lmnt-modal-no-actions")
+    className: B("lmnt-modal__container", "mdc-dialog__container", _ === "fullscreen" && "mdc-dialog--fullscreen", _ === "max" && "lmnt-modal__max", _ === "xlarge" && "lmnt-modal__xl", _ === "large" && "lmnt-modal__lg", _ === "medium" && "lmnt-modal__md", _ === "small" && "lmnt-modal__sm", (_ === "mobile" || V) && "lmnt-modal__mobile", _ === "dialog" && "lmnt-modal__dialog", A && "lmnt-modal-no-actions")
   }, /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-modal__surface mdc-dialog__surface"
   }, /* @__PURE__ */ d.createElement("header", {
-    className: B("lmnt-modal__title", "mdc-dialog__title", (_ === "dialog" || H) && "lmnt-modal_title-hide-close-icon", n && "lmnt-modal_title-actionsIcons", Z && "lmnt-modal__title-scrollable", (H || _ === "dialog" || A) && "lmnt-modal--no-close-icon")
-  }, !H && _ !== "dialog" && !A && /* @__PURE__ */ d.createElement(it, {
+    className: B("lmnt-modal__title", "mdc-dialog__title", (_ === "dialog" || P) && "lmnt-modal_title-hide-close-icon", n && "lmnt-modal_title-actionsIcons", Z && "lmnt-modal__title-scrollable", (P || _ === "dialog" || A) && "lmnt-modal--no-close-icon")
+  }, !P && _ !== "dialog" && !A && /* @__PURE__ */ d.createElement(it, {
     className: "mdc-icon-button material-icons mdc-dialog__close",
     "data-mdc-dialog-action": "close",
     icon: "clear"
-  }), tt && /* @__PURE__ */ d.createElement("div", null, tt), J && /* @__PURE__ */ d.createElement("div", {
+  }), tt && /* @__PURE__ */ d.createElement("div", null, tt), H && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-dialog__title-actions"
-  }, J), o && /* @__PURE__ */ d.createElement("div", {
+  }, H), o && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-badge--modal",
     style: {
       marginLeft: "0"
     }
-  }, o)), (S || f) && /* @__PURE__ */ d.createElement("section", {
+  }, o)), (v || f) && /* @__PURE__ */ d.createElement("section", {
     className: "lmnt-modal__content mdc-dialog__content"
-  }, S || f), st, (t || a || p || T || c || y) && /* @__PURE__ */ d.createElement("footer", {
-    className: B("lmnt-modal__actions", "mdc-dialog__actions", W && "lmnt-dialog__actions__mobile", y && "lmnt-modal__actions--supplemental-btn", W && P && "lmnt-modal_actions-mobile-stacked")
-  }, !V && y && /* @__PURE__ */ d.createElement("div", {
+  }, v || f), st, (t || a || S || T || c || g) && /* @__PURE__ */ d.createElement("footer", {
+    className: B("lmnt-modal__actions", "mdc-dialog__actions", V && "lmnt-dialog__actions__mobile", g && "lmnt-modal__actions--supplemental-btn", V && U && "lmnt-modal_actions-mobile-stacked")
+  }, !z && g && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-dialog__actions__supplemental"
-  }, b(y, () => {
+  }, b(g, () => {
     const m = {};
-    return g === "footerSupplemental" && (m["data-mdc-dialog-button-default"] = !0), O === "footerSupplemental" && (m["data-mdc-dialog-initial-focus"] = !0), m;
-  })), !V && (t || p || c) && /* @__PURE__ */ d.createElement("div", {
+    return h === "footerSupplemental" && (m["data-mdc-dialog-button-default"] = !0), O === "footerSupplemental" && (m["data-mdc-dialog-initial-focus"] = !0), m;
+  })), !z && (t || S || c) && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-dialog__actions__right-align lmnt-modal_actions_button"
-  }, p && b(p, {
+  }, S && b(S, {
     variant: "text",
     className: "lmnt-modal__button mdc-dialog__button",
     "data-mdc-dialog-action": "close"
-  }), t && !c && b(t, ut), c && b(c, mt)), V && /* @__PURE__ */ d.createElement("div", {
+  }), t && !c && b(t, ut), c && b(c, mt)), z && /* @__PURE__ */ d.createElement("div", {
     className: "lmnt-modal_actions_button lmnt-dialog__actions__directional"
   }, /* @__PURE__ */ d.createElement("div", null, St(a, "lmnt-modal__button")), /* @__PURE__ */ d.createElement("div", null, b(T, {
     className: "lmnt-modal__button",
@@ -931,18 +931,19 @@ const Gt = "_modal_fr8bw_1", Kt = "_title_fr8bw_6", Wt = "_titleWithoutCloseIcon
   onClose: i,
   title: e,
   headerActions: t,
-  hideCloseIcon: n,
-  leadingIcon: o,
-  isOnline: a = !0,
-  offlineViewProps: f,
-  children: h,
-  ...S
+  actionButton: n,
+  hideCloseIcon: o,
+  leadingIcon: a,
+  isOnline: f = !0,
+  offlineViewProps: p,
+  children: v,
+  ...h
 }) => {
-  const g = Y(() => {
-    const p = {
+  const S = J(() => {
+    const g = {
       id: "base",
-      action: /* @__PURE__ */ ft(z, { primaryAlign: "center", secondaryAlign: "center", children: [
-        !n && /* @__PURE__ */ C(
+      action: /* @__PURE__ */ ft(j, { primaryAlign: "center", secondaryAlign: "center", children: [
+        !o && /* @__PURE__ */ C(
           it,
           {
             icon: "close",
@@ -951,29 +952,30 @@ const Gt = "_modal_fr8bw_1", Kt = "_title_fr8bw_6", Wt = "_titleWithoutCloseIcon
             className: w.closeButton
           }
         ),
-        o ? /* @__PURE__ */ C(It, { customPadding: "0.25rem 0 0 0.75rem", children: /* @__PURE__ */ C(Lt, { icon: o }) }) : /* @__PURE__ */ C(pt, {}),
+        a ? /* @__PURE__ */ C(It, { customPadding: "0.25rem 0 0 0.75rem", children: /* @__PURE__ */ C(Lt, { icon: a }) }) : /* @__PURE__ */ C(pt, {}),
         /* @__PURE__ */ C(
           Nt,
           {
             level: 6,
-            className: n && !o ? w.titleWithoutCloseIcon : "",
+            className: o && !a ? w.titleWithoutCloseIcon : "",
             children: e
           }
         )
       ] }, "base-group")
     };
-    return t ? Array.isArray(t) ? [p, { id: "action-group", action: /* @__PURE__ */ C(z, { children: t }, "action-group") }] : [p, { id: "action", action: t }] : [p];
-  }, [t, n, o, i, e]);
+    return t ? Array.isArray(t) ? [g, { id: "action-group", action: /* @__PURE__ */ C(j, { children: t }, "action-group") }] : [g, { id: "action", action: t }] : [g];
+  }, [t, o, a, i, e]);
   return /* @__PURE__ */ C(
     k,
     {
-      ...S,
+      ...h,
       "data-testid": "modal",
-      className: `${w.modal} ${w.title} ${S.className ?? ""}`,
+      className: `${w.modal} ${w.title} ${h.className ?? ""}`,
       hideCloseIcon: !0,
-      headerActions: /* @__PURE__ */ C(z, { primaryAlign: "space-between", secondaryAlign: "center", children: g.map((p) => /* @__PURE__ */ C(Et, { children: p.action }, p.id)) }, "header-group"),
+      actionButton: n,
+      headerActions: /* @__PURE__ */ C(j, { primaryAlign: "space-between", secondaryAlign: "center", children: S.map((g) => /* @__PURE__ */ C(Et, { children: g.action }, g.id)) }, "header-group"),
       preventClose: !0,
-      children: a ? h : /* @__PURE__ */ C(Ft, { ...f })
+      children: f ? v : /* @__PURE__ */ C(Ft, { ...p })
     }
   );
 };

package/dist/components/SafeForm/SafeForm.d.ts

@@ -0,0 +1,11 @@
+/**
+ * A form component that prevents accidental submission when pressing Enter in input fields.
+ * It handles the 'keydown' event and intercepts the Enter key press.
+ * If the focused element is a button, submit button or text area, it allows the default behavior.
+ * Otherwise, it prevents the default action to avoid unintended submissions.
+ *
+ * @param children - The form children elements.
+ * @param props - Additional form props.
+ * @returns JSX.Element
+ */
+export declare const SafeForm: ({ children, ...props }: JSX.IntrinsicElements["form"]) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SafeForm/SafeForm.js

@@ -0,0 +1,9 @@
+import { jsx as e } from "react/jsx-runtime";
+const a = ({ children: t, ...r }) => /* @__PURE__ */ e("form", { onKeyDown: n, ...r, children: t }), n = async (t) => {
+  if (t.key !== "Enter") return;
+  const r = t.target;
+  r?.type !== "submit" && r?.type !== "button" && r?.type !== "textarea" && (t.preventDefault(), t.stopPropagation());
+};
+export {
+  a as SafeForm
+};

package/dist/components/SafeForm/SafeForm.test.d.ts

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

package/dist/components/SafeForm/SafeForm.test.js

@@ -0,0 +1,91 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { a as u, s as i, f as r } from "../../react.esm-CX1WJ2Pp.js";
+import { u as y } from "../../index-I7uTh4Tr.js";
+import { SafeForm as p } from "./SafeForm.js";
+import { d as b, t as c, g as s, v as l } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+b("SafeForm", () => {
+  c("renders form with children", () => {
+    u(
+      /* @__PURE__ */ a(p, { children: [
+        /* @__PURE__ */ t("input", { "data-testid": "test-input", type: "text" }),
+        /* @__PURE__ */ t("button", { "data-testid": "submit-button", type: "submit", children: "Submit" })
+      ] })
+    ), s(i.getByTestId("test-input")).toBeInTheDocument(), s(i.getByTestId("submit-button")).toBeInTheDocument();
+  }), c("prevents Enter key default behavior on text inputs", async () => {
+    const e = y.setup();
+    u(
+      /* @__PURE__ */ a(p, { children: [
+        /* @__PURE__ */ t("input", { "data-testid": "text-input", type: "text" }),
+        /* @__PURE__ */ t("button", { "data-testid": "submit-button", type: "submit", children: "Submit" })
+      ] })
+    );
+    const n = i.getByTestId("text-input");
+    await e.click(n);
+    const o = r.keyDown(n, { key: "Enter" });
+    s(o).toBe(!1);
+  }), c("allows Enter key press on submit button (does not prevent default)", async () => {
+    u(
+      /* @__PURE__ */ a(p, { children: [
+        /* @__PURE__ */ t("input", { type: "text" }),
+        /* @__PURE__ */ t("button", { "data-testid": "submit-button", type: "submit", children: "Submit" })
+      ] })
+    );
+    const e = i.getByTestId("submit-button");
+    e.focus();
+    const n = r.keyDown(e, { key: "Enter" });
+    s(n).toBe(!0);
+  }), c("allows Enter key press on regular button (does not prevent default)", async () => {
+    const e = l.fn();
+    u(
+      /* @__PURE__ */ a(p, { children: [
+        /* @__PURE__ */ t("input", { type: "text" }),
+        /* @__PURE__ */ t("button", { "data-testid": "cancel-button", type: "button", onClick: e, children: "Cancel" })
+      ] })
+    );
+    const n = i.getByTestId("cancel-button");
+    n.focus();
+    const o = r.keyDown(n, { key: "Enter" });
+    s(o).toBe(!0);
+  }), c("allows Enter key press on textarea (does not prevent default)", async () => {
+    u(
+      /* @__PURE__ */ a(p, { children: [
+        /* @__PURE__ */ t("input", { type: "text" }),
+        /* @__PURE__ */ t("textarea", { "data-testid": "textarea" }),
+        /* @__PURE__ */ t("button", { type: "submit", children: "Submit" })
+      ] })
+    );
+    const e = i.getByTestId("textarea");
+    e.focus();
+    const n = r.keyDown(e, { key: "Enter" });
+    s(n).toBe(!0);
+  }), c("does not interfere with other key presses", async () => {
+    const e = y.setup();
+    u(
+      /* @__PURE__ */ a(p, { children: [
+        /* @__PURE__ */ t("input", { "data-testid": "text-input", type: "text" }),
+        /* @__PURE__ */ t("button", { type: "submit", children: "Submit" })
+      ] })
+    );
+    const n = i.getByTestId("text-input");
+    await e.click(n), await e.keyboard("a"), await e.keyboard("{Tab}"), await e.keyboard("{Escape}"), s(n).toHaveValue("a");
+    const o = r.keyDown(n, { key: "Tab" }), d = r.keyDown(n, { key: "Escape" });
+    s(o).toBe(!0), s(d).toBe(!0);
+  }), c("prevents Enter key on various input types", async () => {
+    u(
+      /* @__PURE__ */ a(p, { children: [
+        /* @__PURE__ */ t("input", { "data-testid": "input1", type: "text" }),
+        /* @__PURE__ */ t("input", { "data-testid": "input2", type: "email" }),
+        /* @__PURE__ */ t("input", { "data-testid": "input3", type: "password" }),
+        /* @__PURE__ */ t("input", { "data-testid": "input4", type: "number" }),
+        /* @__PURE__ */ t("button", { type: "submit", children: "Submit" })
+      ] })
+    );
+    const e = ["input1", "input2", "input3", "input4"];
+    for (const n of e) {
+      const o = i.getByTestId(n);
+      o.focus();
+      const d = r.keyDown(o, { key: "Enter" });
+      s(d).toBe(!1);
+    }
+  });
+});

package/dist/components/SearchBar/SearchBar.js

@@ -1,36 +1,37 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { I as i } from "../../index.es-Kg9soDed.js";
 import { T as l } from "../../index.es-CUuzYysw.js";
 import '../../assets/SearchBar.css';const u = "_searchbar_gnvwc_1", b = {
   searchbar: u
-}, p = ({
-  className: o = "",
+}, f = ({
+  className: r = "",
   dense: n = !1,
-  searchTerm: a,
-  setSearchTerm: t,
-  placeholder: s,
-  fullWidth: e = !0
-}) => /* @__PURE__ */ r(
+  searchTerm: t,
+  setSearchTerm: a,
+  placeholder: e,
+  fullWidth: s = !0
+}) => /* @__PURE__ */ o(
   l,
   {
     "data-testid": "search-bar-input",
-    className: `${o ?? ""} ${b.searchbar}`,
+    className: `${r ?? ""} ${b.searchbar}`,
     dense: n,
     variant: "outlined",
-    placeholder: s,
-    value: a,
-    onChange: (c) => t(c.target.value),
-    fullWidth: e,
-    trailingIcon: /* @__PURE__ */ r(
+    placeholder: e,
+    value: t,
+    onChange: (c) => a(c.target.value),
+    fullWidth: s,
+    trailingIcon: /* @__PURE__ */ o(
       i,
       {
         "data-testid": "search-bar-icon-button",
-        icon: a ? "close" : "search",
-        onClick: () => a ? t("") : void 0
+        icon: t ? "close" : "search",
+        onClick: () => t ? a("") : void 0,
+        type: "button"
       }
     )
   }
 );
 export {
-  p as SearchBar
+  f as SearchBar
 };

package/dist/main.d.ts

@@ -39,6 +39,7 @@ export { FormSelect } from './components/FormComponents/FormSelect/FormSelect';
 export { FormSlider } from './components/FormComponents/FormSlider/FormSlider';
 export { FormText } from './components/FormComponents/FormText/FormText';
 export { FormToggle } from './components/FormComponents/FormToggle/FormToggle';
+export { SafeForm } from './components/SafeForm/SafeForm';
 export { AvailableCustomIcons } from './enums/AvailableCustomIcons';
 export { ThemeColor } from './enums/ThemeColor';
 export { useBreakpoints } from './hooks/useBreakpoints';
@@ -54,6 +55,6 @@ export type { FilterData, FilterOption, FilterSelection } from './types/Filter';
 export type { CellTemplate, CellTemplateProps, TableLayoutProps } from './types/GenericTable';
 export type { HashTab } from './types/HashTab';
 export type { BaseListElement, ListElement } from './types/ListElement';
-export { DATE_FORMAT, TIME_FORMAT, DATE_TIME_FORMAT } from './types/Time';
+export { DATE_FORMAT, DATE_TIME_FORMAT, TIME_FORMAT } from './types/Time';
 export { AVAILABLE_COUNTRY_KEYS, AVAILABLE_LOCALES, ENGLISH_LANGUAGE_ID, GERMAN_LANGUAGE_ID, LANGUAGE_CODES_MAPPER, LANGUAGE_ID_MAPPER, SPANISH_LANGUAGE_ID, TURKISH_LANGUAGE_ID, } from './types/Languages';
 export type { AVAILABLE_LANGUAGE_CODES, LANGUAGE_COUNTRY_CODES } from './types/Languages';

package/dist/main.js

@@ -5,9 +5,9 @@ import { BasicHeading as a } from "./components/BasicHeading/BasicHeading.js";
 import { BlockView as A } from "./components/BlockView/BlockView.js";
 import { ChipCard as n } from "./components/ChipCard/ChipCard.js";
 import { ContextMenu as E } from "./components/ContextMenu/ContextMenu.js";
-import { DeleteModal as L } from "./components/DeleteModal/DeleteModal.js";
+import { DeleteModal as c } from "./components/DeleteModal/DeleteModal.js";
 import { DetailContentWrapper as _ } from "./components/DetailContentWrapper/DetailContentWrapper.js";
-import { Disclaimer as F } from "./components/Disclaimer/Disclaimer.js";
+import { Disclaimer as s } from "./components/Disclaimer/Disclaimer.js";
 import { EmptyView as G } from "./components/EmptyView/EmptyView.js";
 import { Filter as D } from "./components/Filter/Filter.js";
 import { FormattedNumberDisplay as M } from "./components/FormattedNumberDisplay/FormattedNumberDisplay.js";
@@ -31,56 +31,57 @@ import { StepperHeader as xr } from "./components/Stepper/components/StepperHead
 import { StepperIndicator as ir } from "./components/Stepper/components/StepperIndicator.js";
 import { Stepper as lr } from "./components/Stepper/Stepper.js";
 import { VerticalDivider as dr } from "./components/VerticalDivider/VerticalDivider.js";
-import { FormCheckBox as cr } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
-import { FormDatePicker as Sr } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
-import { FormNumber as sr } from "./components/FormComponents/FormNumber/FormNumber.js";
+import { FormCheckBox as Sr } from "./components/FormComponents/FormCheckBox/FormCheckBox.js";
+import { FormDatePicker as Lr } from "./components/FormComponents/FormDatePicker/FormDatePicker.js";
+import { FormNumber as Fr } from "./components/FormComponents/FormNumber/FormNumber.js";
 import { FormRadio as Tr } from "./components/FormComponents/FormRadio/FormRadio.js";
 import { FormSelect as Ir } from "./components/FormComponents/FormSelect/FormSelect.js";
 import { FormSlider as Nr } from "./components/FormComponents/FormSlider/FormSlider.js";
 import { FormText as gr } from "./components/FormComponents/FormText/FormText.js";
 import { FormToggle as Cr } from "./components/FormComponents/FormToggle/FormToggle.js";
-import { AvailableCustomIcons as br } from "./enums/AvailableCustomIcons.js";
-import { ThemeColor as Rr } from "./enums/ThemeColor.js";
-import { u as Ur } from "./useBreakpoints-MzTZ0tCT.js";
-import { capitalizeFirstLetters as hr, getFormattedDateTime as Pr, getNumberAsLocaleString as kr, trimLeadingAndTrailingSpaces as wr } from "./services/UtilService.js";
-import { DATE_FORMAT as yr, DATE_TIME_FORMAT as Yr, TIME_FORMAT as Kr } from "./types/Time.js";
-import { AVAILABLE_COUNTRY_KEYS as Wr, AVAILABLE_LOCALES as Xr, ENGLISH_LANGUAGE_ID as jr, GERMAN_LANGUAGE_ID as qr, LANGUAGE_CODES_MAPPER as Jr, LANGUAGE_ID_MAPPER as Qr, SPANISH_LANGUAGE_ID as Zr, TURKISH_LANGUAGE_ID as $r } from "./types/Languages.js";
+import { SafeForm as br } from "./components/SafeForm/SafeForm.js";
+import { AvailableCustomIcons as Rr } from "./enums/AvailableCustomIcons.js";
+import { ThemeColor as Ur } from "./enums/ThemeColor.js";
+import { u as hr } from "./useBreakpoints-MzTZ0tCT.js";
+import { capitalizeFirstLetters as kr, getFormattedDateTime as wr, getNumberAsLocaleString as vr, trimLeadingAndTrailingSpaces as yr } from "./services/UtilService.js";
+import { DATE_FORMAT as Kr, DATE_TIME_FORMAT as zr, TIME_FORMAT as Wr } from "./types/Time.js";
+import { AVAILABLE_COUNTRY_KEYS as jr, AVAILABLE_LOCALES as qr, ENGLISH_LANGUAGE_ID as Jr, GERMAN_LANGUAGE_ID as Qr, LANGUAGE_CODES_MAPPER as Zr, LANGUAGE_ID_MAPPER as $r, SPANISH_LANGUAGE_ID as ro, TURKISH_LANGUAGE_ID as oo } from "./types/Languages.js";
 export {
-  Wr as AVAILABLE_COUNTRY_KEYS,
-  Xr as AVAILABLE_LOCALES,
+  jr as AVAILABLE_COUNTRY_KEYS,
+  qr as AVAILABLE_LOCALES,
   e as AlertBanner,
-  br as AvailableCustomIcons,
+  Rr as AvailableCustomIcons,
   f as BaseView,
   a as BasicHeading,
   A as BlockView,
   n as ChipCard,
   E as ContextMenu,
-  yr as DATE_FORMAT,
-  Yr as DATE_TIME_FORMAT,
-  L as DeleteModal,
+  Kr as DATE_FORMAT,
+  zr as DATE_TIME_FORMAT,
+  c as DeleteModal,
   _ as DetailContentWrapper,
-  F as Disclaimer,
-  jr as ENGLISH_LANGUAGE_ID,
+  s as Disclaimer,
+  Jr as ENGLISH_LANGUAGE_ID,
   G as EmptyView,
   D as Filter,
-  cr as FormCheckBox,
-  Sr as FormDatePicker,
-  sr as FormNumber,
+  Sr as FormCheckBox,
+  Lr as FormDatePicker,
+  Fr as FormNumber,
   Tr as FormRadio,
   Ir as FormSelect,
   Nr as FormSlider,
   gr as FormText,
   Cr as FormToggle,
   M as FormattedNumberDisplay,
-  qr as GERMAN_LANGUAGE_ID,
+  Qr as GERMAN_LANGUAGE_ID,
   B as GenericTable,
   O as HashTabView,
   u as HeaderFilter,
   H as HealthCheckFailed,
   V as Iconify,
   P as InfoGroup,
-  Jr as LANGUAGE_CODES_MAPPER,
-  Qr as LANGUAGE_ID_MAPPER,
+  Zr as LANGUAGE_CODES_MAPPER,
+  $r as LANGUAGE_ID_MAPPER,
   m as LinkBanner,
   w as ListArea,
   y as LoadingSpinner,
@@ -89,7 +90,8 @@ export {
   j as OfflineView,
   J as OnboardingBanner,
   Z as OverflowTooltip,
-  Zr as SPANISH_LANGUAGE_ID,
+  ro as SPANISH_LANGUAGE_ID,
+  br as SafeForm,
   rr as ScrollbarX,
   or as ScrollbarY,
   tr as SearchBar,
@@ -97,13 +99,13 @@ export {
   lr as Stepper,
   xr as StepperHeader,
   ir as StepperIndicator,
-  Kr as TIME_FORMAT,
-  $r as TURKISH_LANGUAGE_ID,
-  Rr as ThemeColor,
+  Wr as TIME_FORMAT,
+  oo as TURKISH_LANGUAGE_ID,
+  Ur as ThemeColor,
   dr as VerticalDivider,
-  hr as capitalizeFirstLetters,
-  Pr as getFormattedDateTime,
-  kr as getNumberAsLocaleString,
-  wr as trimLeadingAndTrailingSpaces,
-  Ur as useBreakpoints
+  kr as capitalizeFirstLetters,
+  wr as getFormattedDateTime,
+  vr as getNumberAsLocaleString,
+  yr as trimLeadingAndTrailingSpaces,
+  hr as useBreakpoints
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",