@hortiview/shared-components 2.7.0 → 2.8.1

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## [2.8.1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.8.0...v2.8.1) (2025-10-28)
+
+### Code Refactoring
+
+* adjust FormDatePicker and add DATE_FORMAT as options fallback in getFormattedDateTime ([e18e00d](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/e18e00d80fd20c774009b2839d289f507793bc3c))
+
+## [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/{AlertBanner-JnX0tJGC.js → AlertBanner-DlgFtlZm.js}

@@ -1,7 +1,7 @@
 import { jsx as n, Fragment as i, jsxs as t } from "react/jsx-runtime";
-import { G as l } from "./index.es-CbBdaRO2.js";
-import { I as _ } from "./index.es-DErA6zWG.js";
-import { T as m } from "./index.es--yyG47az.js";
+import { G as l } from "./index.es-Dw1eih7R.js";
+import { I as _ } from "./index.es-8MVlRCi4.js";
+import { T as m } from "./index.es-1zrFd4Te.js";
 import './assets/AlertBanner.css';const d = "_messageContainer_2hnjr_1", g = "_info_2hnjr_9", h = "_danger_2hnjr_14", f = "_success_2hnjr_19", p = "_warning_2hnjr_24", u = "_closeIcon_2hnjr_29", j = "_linkBanner_2hnjr_34", s = {
   messageContainer: d,
   info: g,

package/dist/{BigLoadingSpinner-chQoiNY9.js → BigLoadingSpinner-B_HFhx2F.js}

@@ -1,5 +1,5 @@
 import { jsx as i, jsxs as n } from "react/jsx-runtime";
-import { T as r } from "./index.es--yyG47az.js";
+import { T as r } from "./index.es-1zrFd4Te.js";
 import { Iconify as d } from "./components/Iconify/Iconify.js";
 import './assets/BigLoadingSpinner.css';const e = "_loadingBigOverlay_7dxo1_1", s = "_bigLoadSpinnerCard_7dxo1_12", g = "_bigLoadSpinnerCardText_7dxo1_27", t = "_logo_7dxo1_33", o = {
   loadingBigOverlay: e,

package/dist/{GenericCard-c9yuyN3m.js → GenericCard-Cv8qaFLu.js}

@@ -1,7 +1,7 @@
 import { jsx as r, jsxs as d, Fragment as C } from "react/jsx-runtime";
-import { C as h, a as m, b as T, c as g, d as v } from "./index.es-DDo_AHL0.js";
-import { G as b, a as x, b as c } from "./index.es-DOX4XTz_.js";
-import { d as f } from "./index.es--yyG47az.js";
+import { C as h, a as m, b as T, c as g, d as v } from "./index.es-CDMu_yu0.js";
+import { G as b, a as x, b as c } from "./index.es-DgTJmbgD.js";
+import { d as f } from "./index.es-1zrFd4Te.js";
 import { useMemo as w } from "react";
 import { OverflowTooltip as l } from "./components/OverflowTooltip/OverflowTooltip.js";
 import './assets/GenericCard.css';const u = "_cardTitle_ny9m0_1", B = "_cardBody_ny9m0_5", N = "_cardContent_ny9m0_10", $ = "_row_ny9m0_14", G = "_font_ny9m0_18", k = "_fontHeader_ny9m0_23", H = "_title_ny9m0_27", S = "_emptyContainer_ny9m0_33", A = "_empty_ny9m0_33", n = {

package/dist/{ListAreaService-BY6ZTds9.js → ListAreaService-D9HRsvH0.js}

@@ -1,9 +1,9 @@
 import { jsx as r, jsxs as b } from "react/jsx-runtime";
-import { G as E } from "./index.es-CbBdaRO2.js";
-import { I as O } from "./index.es-DErA6zWG.js";
-import { P as k } from "./index.es-D-ph6ImM.js";
-import { c as $, d as j, T as H } from "./index.es--yyG47az.js";
-import { c as M } from "./_setToString-Do1lSQTZ.js";
+import { G as E } from "./index.es-Dw1eih7R.js";
+import { I as O } from "./index.es-8MVlRCi4.js";
+import { P as k } from "./index.es-DFFyENnI.js";
+import { c as $, d as j, T as H } from "./index.es-1zrFd4Te.js";
+import { c as M } from "./index-D5m--65X.js";
 import { Iconify as P } from "./components/Iconify/Iconify.js";
 import { AvailableCustomIcons as W } from "./enums/AvailableCustomIcons.js";
 import './assets/ListAreaService.css';const L = "_fullWidth_v1ae9_1", w = "_mainElevation_v1ae9_5", A = "_searchbar_v1ae9_11", q = "_roundedBottom_v1ae9_19", z = "_primaryText_v1ae9_24", D = "_list_v1ae9_28", F = "_listItem_v1ae9_56", J = "_noGroupHeaderMargin_v1ae9_76", K = "_indentGroupedElement_v1ae9_80", Q = "_isNotSelected_v1ae9_84", R = "_isSelected_v1ae9_89", U = "_iconColor_v1ae9_94", V = "_overlineTitle_v1ae9_98", X = "_noOverlineTitle_v1ae9_103", Y = "_truncate_v1ae9_107", Z = "_truncateOverlineText_v1ae9_118", t = {

package/dist/{OfflineView-BUSWAKez.js → OfflineView-Bw-sbsym.js}

@@ -1,8 +1,8 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { G as o } from "./index.es-CbBdaRO2.js";
+import { G as o } from "./index.es-Dw1eih7R.js";
 import { Iconify as _ } from "./components/Iconify/Iconify.js";
-import { b as m, d as y, T as h } from "./index.es--yyG47az.js";
-import { B as A } from "./index.es-Bx1E5MPK.js";
+import { b as m, d as y, T as h } from "./index.es-1zrFd4Te.js";
+import { B as A } from "./index.es-DmsyeHLO.js";
 import './assets/OfflineView.css';const T = "_gapAndTextAlign_10nts_1", v = "_container_10nts_6", x = "_bgWhite_10nts_12", G = "_bgGrey_10nts_17", W = "_subtitle_10nts_22", t = {
   gapAndTextAlign: T,
   container: v,

package/dist/{_baseIsEqual-CZNn3LMM.js → _baseIsEqual-Df2URKWm.js}

@@ -1,8 +1,7 @@
-import { g as ur, h as ir, b as sr, d as fr } from "./_setToString-Do1lSQTZ.js";
-import { c as tr, d as _r } from "./_MapCache-B75dXJyg.js";
-import { c as lr, r as vr, b as dr } from "./isArray-DN9s620O.js";
-import { r as gr } from "./_getAllKeys-tc1bcd1W.js";
-import { a as qr } from "./_getTag-DYHrLaIw.js";
+import { h as ur, i as ir, b as sr, c as fr } from "./_setToString-B6E13pDg.js";
+import { h as tr, c as _r, i as lr, r as vr, b as dr } from "./isArray-DDZrq40X.js";
+import { r as gr } from "./_getAllKeys-BQWmkEw5.js";
+import { a as qr } from "./_getTag-BkGSRa18.js";
 var D, Q;
 function Ar() {
   if (Q) return D;
@@ -13,18 +12,18 @@ function Ar() {
   }
   return D = e, D;
 }
-var m, X;
+var H, X;
 function yr() {
-  if (X) return m;
+  if (X) return H;
   X = 1;
   function u(e) {
     return this.__data__.has(e);
   }
-  return m = u, m;
+  return H = u, H;
 }
-var H, Y;
+var m, Y;
 function pr() {
-  if (Y) return H;
+  if (Y) return m;
   Y = 1;
   var u = tr(), e = Ar(), _ = yr();
   function n(f) {
@@ -32,7 +31,7 @@ function pr() {
     for (this.__data__ = new u(); ++t < r; )
       this.add(f[t]);
   }
-  return n.prototype.add = n.prototype.push = e, n.prototype.has = _, H = n, H;
+  return n.prototype.add = n.prototype.push = e, n.prototype.has = _, m = n, m;
 }
 var B, Z;
 function Tr() {
@@ -123,15 +122,15 @@ var U, V;
 function Er() {
   if (V) return U;
   V = 1;
-  var u = lr(), e = ur(), _ = _r(), n = ar(), f = Or(), t = Rr(), r = 1, d = 2, c = "[object Boolean]", R = "[object Date]", q = "[object Error]", l = "[object Map]", S = "[object Number]", E = "[object RegExp]", w = "[object Set]", A = "[object String]", g = "[object Symbol]", v = "[object ArrayBuffer]", y = "[object DataView]", p = u ? u.prototype : void 0, i = p ? p.valueOf : void 0;
-  function T(s, a, O, h, P, I, L) {
+  var u = _r(), e = ur(), _ = lr(), n = ar(), f = Or(), t = Rr(), r = 1, d = 2, c = "[object Boolean]", R = "[object Date]", q = "[object Error]", l = "[object Map]", S = "[object Number]", E = "[object RegExp]", w = "[object Set]", A = "[object String]", g = "[object Symbol]", v = "[object ArrayBuffer]", y = "[object DataView]", p = u ? u.prototype : void 0, i = p ? p.valueOf : void 0;
+  function T(s, a, O, h, P, C, L) {
     switch (O) {
       case y:
         if (s.byteLength != a.byteLength || s.byteOffset != a.byteOffset)
           return !1;
         s = s.buffer, a = a.buffer;
       case v:
-        return !(s.byteLength != a.byteLength || !I(new e(s), new e(a)));
+        return !(s.byteLength != a.byteLength || !C(new e(s), new e(a)));
       case c:
       case R:
       case S:
@@ -142,16 +141,16 @@ function Er() {
       case A:
         return s == a + "";
       case l:
-        var o = f;
+        var I = f;
       case w:
         var b = h & r;
-        if (o || (o = t), s.size != a.size && !b)
+        if (I || (I = t), s.size != a.size && !b)
           return !1;
-        var C = L.get(s);
-        if (C)
-          return C == a;
+        var o = L.get(s);
+        if (o)
+          return o == a;
         h |= d, L.set(s, a);
-        var nr = n(o(s), o(a), h, P, I, L);
+        var nr = n(I(s), I(a), h, P, C, L);
         return L.delete(s), nr;
       case g:
         if (i)
@@ -207,22 +206,22 @@ function Sr() {
   function w(A, g, v, y, p, i) {
     var T = t(A), s = t(g), a = T ? q : f(A), O = s ? q : f(g);
     a = a == R ? l : a, O = O == R ? l : O;
-    var h = a == l, P = O == l, I = a == O;
-    if (I && r(A)) {
+    var h = a == l, P = O == l, C = a == O;
+    if (C && r(A)) {
       if (!r(g))
         return !1;
       T = !0, h = !1;
     }
-    if (I && !h)
+    if (C && !h)
       return i || (i = new u()), T || d(A) ? e(A, g, v, y, p, i) : _(A, g, a, v, y, p, i);
     if (!(v & c)) {
-      var L = h && E.call(A, "__wrapped__"), o = P && E.call(g, "__wrapped__");
-      if (L || o) {
-        var b = L ? A.value() : A, C = o ? g.value() : g;
-        return i || (i = new u()), p(b, C, v, y, i);
+      var L = h && E.call(A, "__wrapped__"), I = P && E.call(g, "__wrapped__");
+      if (L || I) {
+        var b = L ? A.value() : A, o = I ? g.value() : g;
+        return i || (i = new u()), p(b, o, v, y, i);
       }
     }
-    return I ? (i || (i = new u()), n(A, g, v, y, p, i)) : !1;
+    return C ? (i || (i = new u()), n(A, g, v, y, p, i)) : !1;
   }
   return K = w, K;
 }

package/dist/{_getAllKeys-tc1bcd1W.js → _getAllKeys-BQWmkEw5.js}

@@ -1,6 +1,6 @@
-import { r as d } from "./isArray-DN9s620O.js";
-import { f as p, a as S } from "./_setToString-Do1lSQTZ.js";
-import { r as k } from "./_getTag-DYHrLaIw.js";
+import { r as d } from "./isArray-DDZrq40X.js";
+import { g as p, a as S } from "./_setToString-B6E13pDg.js";
+import { r as k } from "./_getTag-BkGSRa18.js";
 var l, b;
 function P() {
   if (b) return l;
@@ -23,9 +23,9 @@ function R() {
   }
   return y = u, y;
 }
-var f, A;
+var o, A;
 function G() {
-  if (A) return f;
+  if (A) return o;
   A = 1;
   function a(e, u) {
     for (var r = -1, t = e == null ? 0 : e.length, s = 0, n = []; ++r < t; ) {
@@ -34,16 +34,16 @@ function G() {
     }
     return n;
   }
-  return f = a, f;
+  return o = a, o;
 }
-var o, g;
+var f, g;
 function F() {
-  if (g) return o;
+  if (g) return f;
   g = 1;
   function a() {
     return [];
   }
-  return o = a, o;
+  return f = a, f;
 }
 var v, m;
 function I() {

package/dist/_getTag-BkGSRa18.js

@@ -0,0 +1,79 @@
+import { f as x, d as B } from "./_setToString-B6E13pDg.js";
+import { d as v, e as c, f as z, a as E, g as F } from "./isArray-DDZrq40X.js";
+var g, j;
+function H() {
+  if (j) return g;
+  j = 1;
+  var e = x(), r = e(Object.keys, Object);
+  return g = r, g;
+}
+var f, K;
+function Y() {
+  if (K) return f;
+  K = 1;
+  var e = B(), r = H(), a = Object.prototype, u = a.hasOwnProperty;
+  function s(i) {
+    if (!e(i))
+      return r(i);
+    var t = [];
+    for (var n in Object(i))
+      u.call(i, n) && n != "constructor" && t.push(n);
+    return t;
+  }
+  return f = s, f;
+}
+var _, V;
+function I() {
+  if (V) return _;
+  V = 1;
+  var e = v(), r = c(), a = e(r, "DataView");
+  return _ = a, _;
+}
+var p, k;
+function J() {
+  if (k) return p;
+  k = 1;
+  var e = v(), r = c(), a = e(r, "Promise");
+  return p = a, p;
+}
+var q, D;
+function L() {
+  if (D) return q;
+  D = 1;
+  var e = v(), r = c(), a = e(r, "Set");
+  return q = a, q;
+}
+var w, O;
+function Q() {
+  if (O) return w;
+  O = 1;
+  var e = v(), r = c(), a = e(r, "WeakMap");
+  return w = a, w;
+}
+var b, R;
+function Z() {
+  if (R) return b;
+  R = 1;
+  var e = I(), r = z(), a = J(), u = L(), s = Q(), i = E(), t = F(), n = "[object Map]", W = "[object Object]", m = "[object Promise]", S = "[object Set]", y = "[object WeakMap]", d = "[object DataView]", C = t(e), N = t(r), l = t(a), A = t(u), G = t(s), o = i;
+  return (e && o(new e(new ArrayBuffer(1))) != d || r && o(new r()) != n || a && o(a.resolve()) != m || u && o(new u()) != S || s && o(new s()) != y) && (o = function(M) {
+    var P = i(M), T = P == W ? M.constructor : void 0, h = T ? t(T) : "";
+    if (h)
+      switch (h) {
+        case C:
+          return d;
+        case N:
+          return n;
+        case l:
+          return m;
+        case A:
+          return S;
+        case G:
+          return y;
+      }
+    return P;
+  }), b = o, b;
+}
+export {
+  Z as a,
+  Y as r
+};