@hortiview/shared-components 2.6.1 → 2.8.0

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+## [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
+
+* create getFormattedDateTime function ([2c0bee8](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/2c0bee8ab990f28cf4d9cbc198863ca411070b6c))
+
+### Documentation
+
+* mention using formats from Time.ts for consistency ([0026a3a](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/0026a3acb5422cfdda722b69020c9cbc1521ebd8))
+* update README ([846bca1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/846bca135f16d3f673ef1db3a8c37700371eb115))
+
+### Code Refactoring
+
+* add Date prop ([f962c7c](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/f962c7c106c66e0a55dcd7f49642233cf69344fe))
+* create Time file and import/export date formats ([d7b6fd9](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/d7b6fd974bf4634d8300426ece110881090e2653))
+
 ## [2.6.1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.6.0...v2.6.1) (2025-10-02)
 
 ### Styles

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)
@@ -66,6 +67,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [capitalizeFirstLetters](#capitalizefirstletters)
 1. [trimLeadingAndTrailingSpaces](#trimleadingandtrailingspaces)
 1. [getNumberAsLocaleString](#getnumberaslocalestring)
+1. [getFormattedDateTime](#getformatteddatetime)
 
 ## Available constants
 
@@ -357,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>;
 ```
 
@@ -383,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>;
 ```
 
@@ -408,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'
@@ -419,7 +421,7 @@ const { handleSubmit } = formMethods;
       allowLeadingZeros={false}
       prefix=" €"
     />
-  </form>
+  </SafeForm>
 </FormProvider>;
 ```
 
@@ -438,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={[
@@ -446,7 +448,7 @@ const { handleSubmit } = formMethods;
           { value: 'free', label: 'Free },
         ]}
       />
-  </form>
+  </SafeForm>
 </FormProvider>;
 ```
 
@@ -478,7 +480,7 @@ const typeOptions = [
 ];
 
 <FormProvider {...formMethods}>
-  <form onSubmit={handleSubmit(onSubmit)}>
+  <SafeForm onSubmit={handleSubmit(onSubmit)}>
     <FormSelect<{ type: string }>
       propertyName='type'
       label='Type'
@@ -488,7 +490,7 @@ const typeOptions = [
       requiredText='required'
       required
     />
-  </form>
+  </SafeForm>
 </FormProvider>;
 ```
 
@@ -507,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>;
 ```
 
@@ -528,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'
@@ -537,7 +539,7 @@ const { handleSubmit } = formMethods;
       requiredText='required'
       textarea
     />
-  </form>
+  </SafeForm>
 </FormProvider>;
 ```
 
@@ -896,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
@@ -929,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.
@@ -1108,6 +1130,24 @@ const overlineTitle = `${getNumberAsLocaleString(userLocale, totalArea, 5)} ${t(
 )}`;
 ```
 
+### getFormattedDateTime
+
+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 `DATE_FORMAT`, `TIME_FORMAT` and `DATE_TIME_FORMAT`.
+
+```typescript
+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
 
 ### Languages and countries

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

@@ -18,15 +18,16 @@ import "../../get-B8c-T4F8.js";
 import "../../omit-1Eom1PmQ.js";
 import "../../isArray-Dub1wGJM.js";
 import "../../isString-BW9UHONv.js";
+import "../../types/Time.js";
 import '../../assets/Filter.css';const K = "_filterButton_qtl7a_1", T = "_relativeParent_qtl7a_6", V = "_filterBadge_qtl7a_10", E = "_dense_qtl7a_17", u = {
   filterButton: K,
   relativeParent: T,
   filterBadge: V,
   dense: E
-}, ct = ({
+}, ut = ({
   clearFilterText: m,
   closeCallback: s,
-  currentFilter: i,
+  currentFilter: r,
   filterButtonAsIcon: d = !1,
   filterButtonText: a,
   filterModalTitle: t,
@@ -34,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(
@@ -65,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 }),
@@ -78,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,
@@ -97,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",
@@ -113,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(
@@ -122,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
 }) => {
@@ -140,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"
@@ -170,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"
@@ -184,5 +185,5 @@ import '../../assets/Filter.css';const K = "_filterButton_qtl7a_1", T = "_relati
   );
 };
 export {
-  ct as Filter
+  ut as Filter
 };

package/dist/components/GenericTable/GenericTable.js

@@ -29,6 +29,7 @@ import "react-hook-form";
 import "../../get-B8c-T4F8.js";
 import "../../isArray-Dub1wGJM.js";
 import "../../isString-BW9UHONv.js";
+import "../../types/Time.js";
 import { useGenerateColumns as yl, useGenerateTableData as bl } from "./GenericTableService.js";
 import { GenericCardList as wl } from "./Mobile/GenericCardList.js";
 import '../../assets/GenericTable.css';function Rl(r, o) {
@@ -10407,7 +10408,7 @@ const cd = "_topBar_1tmb3_1", fd = "_filterBar_1tmb3_5", pd = "_start_1tmb3_10",
   elevation: vd,
   table: hd,
   noBorder: md
-}, Jd = ({
+}, Qd = ({
   data: r = [],
   hiddenColumns: o = [],
   order: e = [],
@@ -10527,5 +10528,5 @@ const cd = "_topBar_1tmb3_1", fd = "_filterBar_1tmb3_5", pd = "_start_1tmb3_10",
   );
 };
 export {
-  Jd as GenericTable
+  Qd as GenericTable
 };

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 {};