@hortiview/shared-components 2.22.0 → 2.23.1

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [2.23.1](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.23.0...v2.23.1) (2026-04-14)
+
+### Bug Fixes
+
+* update BaseView to conditionally apply fullHeight class ([7862e04](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/7862e04236b407afe357cc2eee66f03a1ff38592))
+
+### Code Refactoring
+
+* improve Modal component layout and error banner display ([5586676](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/55866762e965d66ce1d3540957c7e6fe469e9e4d))
+* update Modal component layout and enhance error banner functionality ([8a10088](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/8a10088582d759454c893a63cde767880e4fc88d))
+
+## [2.23.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.22.0...v2.23.0) (2026-04-13)
+
+### Features
+
+* improve FormDatePicker UTC handling and date conversion logic ([d2e6000](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/d2e6000f5e6e60acdd4c424297b76ea5d1d2f88a))
+
+### Code Refactoring
+
+* extract FormDatePicker utility functions into a separate service file; linting ([7908c2c](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/7908c2c5233c841965a515f7144656fdd0d12285))
+* rename and update date handling functions for improved clarity and functionality ([1f6713b](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/commit/1f6713bbe19e84f01f57890f7c77559ce281e9d5))
+
 ## [2.22.0](https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared/compare/v2.21.0...v2.22.0) (2026-04-13)
 
 ### Features

package/dist/assets/BaseView.css

@@ -1 +1 @@
-._fullHeight_71rfc_1{height:100%}._fullWidth_71rfc_5{width:100%}._maxWidth_71rfc_9{background-color:var(--lmnt-theme-background)}._list_71rfc_13{box-shadow:0 8px 24px #959da533;background-color:var(--lmnt-theme-background);border-radius:.5rem;overflow-y:auto;width:100%;height:100%}._desktopList_71rfc_22{width:30%;align-self:stretch}._noRoundedCorners_71rfc_27 [class*="lmnt mdc-list-item"]{border-radius:0rem!important}._detail_71rfc_31{height:100%;box-shadow:0 8px 24px #959da533;border-radius:.5rem;background-color:var(--lmnt-theme-background);width:100%}._desktopDetail_71rfc_39{width:70%;overflow-y:auto;scrollbar-width:thin}
+._fullHeight_1yui7_1{height:100%}._fullWidth_1yui7_5{width:100%}._heading_1yui7_9{background-color:var(--lmnt-theme-background)}._list_1yui7_18{box-shadow:0 8px 24px #959da533;background-color:var(--lmnt-theme-background);border-radius:.5rem;overflow-y:auto;width:100%;height:100%}._desktopList_1yui7_27{width:30%;align-self:stretch}._noRoundedCorners_1yui7_32 [class*="lmnt mdc-list-item"]{border-radius:0rem!important}._detail_1yui7_36{height:100%;box-shadow:0 8px 24px #959da533;border-radius:.5rem;background-color:var(--lmnt-theme-background);width:100%}._desktopDetail_1yui7_44{width:70%;overflow-y:auto;scrollbar-width:thin}

package/dist/assets/Modal.css

@@ -1 +1 @@
-._modal_1yn30_1 div[class*=lmnt-modal__surface]{max-height:100svh!important;max-width:100svw!important}._modal_1yn30_1 div:not([class*=mdc-dialog--fullscreen]) div[class*=lmnt-modal__surface]{border-radius:1rem!important}._modal_1yn30_1 footer{margin-bottom:0!important}._gap_1yn30_14{gap:4px!important}._title_1yn30_18{header{display:flex;justify-content:start;padding-left:.5rem!important;>div{width:100%;margin-left:0!important}}}._titleWithoutCloseIcon_1yn30_31{margin-left:1rem!important}._closeButton_1yn30_35{color:var(--lmnt-theme-on-surface-inactive)}._closeButton_1yn30_35:before{display:none!important}._closeButton_1yn30_35:hover{background-color:var(--lmnt-theme-surface-variant)!important}._errorBanner_1yn30_47{margin:-20px -24px 20px}
+._modal_lk11w_1 div[class*=lmnt-modal__surface]{max-height:100svh!important;max-width:100svw!important}._modal_lk11w_1 div:not([class*=mdc-dialog--fullscreen]) div[class*=lmnt-modal__surface]{border-radius:1rem!important}._modal_lk11w_1 footer{margin-bottom:0!important}._gap_lk11w_14{gap:4px!important;padding-left:.5rem!important}._title_lk11w_19{header{display:flex;justify-content:start;padding-inline:0!important;>div{width:100%;margin-left:0!important}}}._titleWithoutCloseIcon_lk11w_32{margin-left:1rem!important}._closeButton_lk11w_36{color:var(--lmnt-theme-on-surface-inactive)}._closeButton_lk11w_36:before{display:none!important}._closeButton_lk11w_36:hover{background-color:var(--lmnt-theme-surface-variant)!important}._errorBanner_lk11w_48{width:100%}._headerActions_lk11w_52{margin-left:.5rem}

package/dist/components/BaseView/BaseView.js

@@ -5,43 +5,43 @@ import { P as $ } from "../../index.es-DgncYOqO.js";
 import { c as g } from "../../index-Df2FYN-K.js";
 import { useMemo as n } from "react";
 import { BasicHeading as w } from "../BasicHeading/BasicHeading.js";
-import { EmptyView as y } from "../EmptyView/EmptyView.js";
-import { ListArea as F } from "../ListArea/ListArea.js";
-import { useBreakpoints as M } from "../../hooks/useBreakpoints.js";
-import { OfflineView as P } from "../OfflineView/OfflineView.js";
-import { useScrollableInfo as T } from "./BaseView.service.js";
-import '../../assets/BaseView.css';const q = "_fullHeight_71rfc_1", z = "_fullWidth_71rfc_5", J = "_maxWidth_71rfc_9", K = "_list_71rfc_13", O = "_desktopList_71rfc_22", Q = "_noRoundedCorners_71rfc_27", U = "_detail_71rfc_31", X = "_desktopDetail_71rfc_39", i = {
-  fullHeight: q,
-  fullWidth: z,
-  maxWidth: J,
-  list: K,
-  desktopList: O,
-  noRoundedCorners: Q,
-  detail: U,
-  desktopDetail: X
-}, ct = ({
+import { EmptyView as F } from "../EmptyView/EmptyView.js";
+import { ListArea as M } from "../ListArea/ListArea.js";
+import { useBreakpoints as P } from "../../hooks/useBreakpoints.js";
+import { OfflineView as T } from "../OfflineView/OfflineView.js";
+import { useScrollableInfo as q } from "./BaseView.service.js";
+import '../../assets/BaseView.css';const z = "_fullHeight_1yui7_1", J = "_fullWidth_1yui7_5", K = "_heading_1yui7_9", O = "_list_1yui7_18", Q = "_desktopList_1yui7_27", U = "_noRoundedCorners_1yui7_32", X = "_detail_1yui7_36", Y = "_desktopDetail_1yui7_44", i = {
+  fullHeight: z,
+  fullWidth: J,
+  heading: K,
+  list: O,
+  desktopList: Q,
+  noRoundedCorners: U,
+  detail: X,
+  desktopDetail: Y
+}, ut = ({
   heading: u,
   action: f = /* @__PURE__ */ e(d, {}),
   hint: v = /* @__PURE__ */ e(d, {}),
   elements: r,
   emptyText: m,
   hasSearch: D = !0,
-  isSorted: W = !0,
-  className: k,
-  withAvatar: x = !1,
-  listMaxHeight: L = "calc(100vh - 220px)",
-  titleLevel: b = 5,
-  detailTitleLevel: H,
+  isSorted: k = !0,
+  className: y,
+  withAvatar: L = !1,
+  listMaxHeight: b = "calc(100vh - 220px)",
+  titleLevel: H = 5,
+  detailTitleLevel: N,
   pathname: s,
-  basicHeadingIcon: N,
+  basicHeadingIcon: W,
   isOnline: h = !0,
   offlineViewProps: p,
   noRoundedListItemEdges: _ = !0,
   routerLinkElement: B,
-  searchPlaceholder: R,
-  isGrouped: A = !1
+  searchPlaceholder: x,
+  isGrouped: R = !1
 }) => {
-  const { isDesktopNavbar: o } = M(), t = n(() => r.find((a) => a.route === s), [s, r]), C = n(() => r.filter((a) => a.isAllowed !== !1), [r]), I = n(() => h ? t?.component ? t.component : o ? /* @__PURE__ */ e($, { className: i.fullWidth, children: /* @__PURE__ */ e(y, { title: m }) }) : /* @__PURE__ */ e(d, {}) : /* @__PURE__ */ e(P, { ...p, fullWidth: !0 }), [t?.component, m, o, h, p]), { showList: S, showDetail: E } = n(() => o ? { showList: !0, showDetail: !0 } : { showList: !t, showDetail: !!t }, [t, o]), { ref: j, hasScrolled: G } = T([
+  const { isDesktopNavbar: o, isDesktop: A } = P(), t = n(() => r.find((a) => a.route === s), [s, r]), C = n(() => r.filter((a) => a.isAllowed !== !1), [r]), I = n(() => h ? t?.component ? t.component : o ? /* @__PURE__ */ e($, { className: i.fullWidth, children: /* @__PURE__ */ e(F, { title: m }) }) : /* @__PURE__ */ e(d, {}) : /* @__PURE__ */ e(T, { ...p, fullWidth: !0 }), [t?.component, m, o, h, p]), { showList: S, showDetail: E } = n(() => o ? { showList: !0, showDetail: !0 } : { showList: !t, showDetail: !!t }, [t, o]), { ref: j, hasScrolled: G } = q([
     s,
     o
   ]);
@@ -49,7 +49,7 @@ import '../../assets/BaseView.css';const q = "_fullHeight_71rfc_1", z = "_fullWi
     l,
     {
       "data-testid": "base-view-container",
-      className: `${i.fullHeight} ${k ?? ""}`,
+      className: `${A ? i.fullHeight : ""} ${y ?? ""}`,
       fullWidth: !0,
       children: [
         S && /* @__PURE__ */ c(
@@ -67,10 +67,10 @@ import '../../assets/BaseView.css';const q = "_fullHeight_71rfc_1", z = "_fullWi
               u && /* @__PURE__ */ e(
                 w,
                 {
-                  icon: N,
+                  icon: W,
                   "data-testid": "heading",
                   heading: u,
-                  level: b,
+                  level: H,
                   marginBottom: 0,
                   inList: !0,
                   children: f
@@ -78,17 +78,17 @@ import '../../assets/BaseView.css';const q = "_fullHeight_71rfc_1", z = "_fullWi
               ),
               v,
               /* @__PURE__ */ e(
-                F,
+                M,
                 {
                   hasLastItemNoRoundedEdges: _,
                   elements: C,
                   hasSearch: D,
-                  maxHeight: L,
-                  isSorted: W,
+                  maxHeight: b,
+                  isSorted: k,
                   pathname: s,
                   routerLinkElement: B,
-                  searchPlaceholder: R,
-                  isGrouped: A
+                  searchPlaceholder: x,
+                  isGrouped: R
                 }
               )
             ]
@@ -105,13 +105,13 @@ import '../../assets/BaseView.css';const q = "_fullHeight_71rfc_1", z = "_fullWi
               /* @__PURE__ */ e(
                 w,
                 {
-                  className: i.maxWidth,
+                  className: i.heading,
                   heading: t?.detailTitle ?? t?.title ?? "",
-                  level: H,
+                  level: N,
                   icon: t?.hideIconInDetail === !0 ? void 0 : t?.detailIcon ?? t?.icon,
                   marginBottom: 0,
                   invisibleButton: t?.detailAction === void 0,
-                  withAvatar: x,
+                  withAvatar: L,
                   subHeading: t?.detailSubTitle,
                   children: t?.detailAction ?? f
                 }
@@ -135,5 +135,5 @@ import '../../assets/BaseView.css';const q = "_fullHeight_71rfc_1", z = "_fullWi
   );
 };
 export {
-  ct as BaseView
+  ut as BaseView
 };

package/dist/components/FormComponents/FormDatePicker/FormDatePicker.d.ts

@@ -21,7 +21,7 @@ type DatePickerProps<T extends FieldValues> = {
     helperText?: string;
     /** Add the number of years to subtract from the current date as bottom of range */
     minRangeYear?: number;
-    /** Add the number of years to add to the current date as top of range */
+    /** Add the number of years to add to the current date as top of the range */
     maxRangeYear?: number;
     /** Locale to be used for the date picker. */
     locale?: string;
@@ -30,6 +30,18 @@ type DatePickerProps<T extends FieldValues> = {
  * FormDatePicker is a custom form input component for selecting dates.
  * It is integrated with react-hook-form for form management.
  *
+ * Date handling model used by this component:
+ *
+ * - The persisted/form value is a "date-only" value stored as a Date at 00:00:00 UTC.
+ * - The UI date picker works with Date objects in the browser's local timezone.
+ * - Before rendering, the stored UTC date is converted into a local Date with the same
+ *   calendar year/month/day so the picker shows the expected day for the user.
+ * - After selection, the picked local calendar date is converted back into a UTC-midnight Date
+ *   before storing it in react-hook-form.
+ *
+ * This conversion is necessary to avoid timezone-related off-by-one-day issues when working
+ * with date-only values.
+ *
  * @param propertyName - the name of the property this date picker maps to in the form.
  * @param label - label displayed along with the date picker.
  * @param closeLabel - label displayed as close button text.
@@ -43,5 +55,5 @@ type DatePickerProps<T extends FieldValues> = {
  *
  * @returns A JSX element that renders a date picker form input.
  */
-export declare const FormDatePicker: <T extends FieldValues>({ propertyName, label, closeLabel, className, minRangeYear, maxRangeYear, locale, rules, helperText, ...props }: Omit<ElementDatePickerProps, "locale"> & DatePickerProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormDatePicker: <T extends FieldValues>({ propertyName, label, closeLabel, className, minRangeYear, maxRangeYear, locale, rules, helperText, ...props }: Omit<ElementDatePickerProps, "locale" | "useUtc"> & DatePickerProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};