@acoustte-digital-services/digitalstore-controls-dev 0.8.1-dev.20260713105440 → 0.8.1-dev.20260714120443

package/dist/index.d.mts

@@ -191,6 +191,8 @@ interface PageBodyRendererProps {
 }
 declare const PageBodyRenderer: (props: PageBodyRendererProps) => React__default.JSX.Element;
 
+declare function EnterAnimationHydrator(): null;
+
 declare const Toast: () => React__default.JSX.Element;
 
 declare class ToastService {
@@ -451,4 +453,4 @@ interface DataFormRendererProps {
 }
 declare const DataFormRenderer: ({ formDefinition, dataItem, params, tabs, apiBaseUrl, session, widgetProps, onSave, onDelete, onCancelAdd, isAddPage, entityId, }: DataFormRendererProps) => React.JSX.Element | null;
 
-export { type ActionResponse$1 as ActionResponse, BooleanSelect, Button, CheckboxInput, ColorInput, DataFormRenderer, DataList, DataListRenderer, DateTimeInput, EmailInput, InputControl, type InputControlProps, InputControlType, LineTextInput, MoneyInput, MultilineTextInput, NavigationTabsV2, NumberInput, OtpInput, PageBodyRenderer, PercentageInput, PhoneInput, StyleTypes, TimeInput, Toast, ToastService, ViewControl, type ViewControlProps, ViewControlTypes };
+export { type ActionResponse$1 as ActionResponse, BooleanSelect, Button, CheckboxInput, ColorInput, DataFormRenderer, DataList, DataListRenderer, DateTimeInput, EmailInput, EnterAnimationHydrator, InputControl, type InputControlProps, InputControlType, LineTextInput, MoneyInput, MultilineTextInput, NavigationTabsV2, NumberInput, OtpInput, PageBodyRenderer, PercentageInput, PhoneInput, StyleTypes, TimeInput, Toast, ToastService, ViewControl, type ViewControlProps, ViewControlTypes };

package/dist/index.d.ts

@@ -191,6 +191,8 @@ interface PageBodyRendererProps {
 }
 declare const PageBodyRenderer: (props: PageBodyRendererProps) => React__default.JSX.Element;
 
+declare function EnterAnimationHydrator(): null;
+
 declare const Toast: () => React__default.JSX.Element;
 
 declare class ToastService {
@@ -451,4 +453,4 @@ interface DataFormRendererProps {
 }
 declare const DataFormRenderer: ({ formDefinition, dataItem, params, tabs, apiBaseUrl, session, widgetProps, onSave, onDelete, onCancelAdd, isAddPage, entityId, }: DataFormRendererProps) => React.JSX.Element | null;
 
-export { type ActionResponse$1 as ActionResponse, BooleanSelect, Button, CheckboxInput, ColorInput, DataFormRenderer, DataList, DataListRenderer, DateTimeInput, EmailInput, InputControl, type InputControlProps, InputControlType, LineTextInput, MoneyInput, MultilineTextInput, NavigationTabsV2, NumberInput, OtpInput, PageBodyRenderer, PercentageInput, PhoneInput, StyleTypes, TimeInput, Toast, ToastService, ViewControl, type ViewControlProps, ViewControlTypes };
+export { type ActionResponse$1 as ActionResponse, BooleanSelect, Button, CheckboxInput, ColorInput, DataFormRenderer, DataList, DataListRenderer, DateTimeInput, EmailInput, EnterAnimationHydrator, InputControl, type InputControlProps, InputControlType, LineTextInput, MoneyInput, MultilineTextInput, NavigationTabsV2, NumberInput, OtpInput, PageBodyRenderer, PercentageInput, PhoneInput, StyleTypes, TimeInput, Toast, ToastService, ViewControl, type ViewControlProps, ViewControlTypes };

package/dist/index.js

@@ -1,5 +1,3 @@
-"use client";
-
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -4139,6 +4137,7 @@ __export(index_exports, {
   DataListRenderer: () => DataListRenderer_default,
   DateTimeInput: () => DateTimeInput_default,
   EmailInput: () => EmailInput_default,
+  EnterAnimationHydrator: () => EnterAnimationHydrator,
   InputControl: () => InputControl_default,
   InputControlType: () => InputControlType_default,
   LineTextInput: () => LineTextInput_default,
@@ -6883,23 +6882,71 @@ var PageBodyRenderer = (props) => {
 };
 var PageBodyRenderer_default = PageBodyRenderer;
 
-// src/components/Toast.tsx
+// src/components/pageRenderingEngine/EnterAnimationHydrator.tsx
 var import_react54 = require("react");
+var ENTER_ANIMATION_SELECTOR = ".enter-animation";
+function EnterAnimationHydrator() {
+  (0, import_react54.useEffect)(() => {
+    let observer;
+    const observedElements = /* @__PURE__ */ new WeakSet();
+    const revealAnimatedElements = () => {
+      const animatedElements = document.querySelectorAll(ENTER_ANIMATION_SELECTOR);
+      if (!("IntersectionObserver" in window)) {
+        animatedElements.forEach((element) => {
+          element.classList.add("visible");
+        });
+        return;
+      }
+      observer ?? (observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              entry.target.classList.add("visible");
+              observer?.unobserve(entry.target);
+            }
+          });
+        },
+        { threshold: 0.1 }
+      ));
+      animatedElements.forEach((element) => {
+        if (element.classList.contains("visible") || observedElements.has(element)) {
+          return;
+        }
+        observedElements.add(element);
+        observer?.observe(element);
+      });
+    };
+    revealAnimatedElements();
+    const mutationObserver = new MutationObserver(revealAnimatedElements);
+    mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      mutationObserver.disconnect();
+      observer?.disconnect();
+    };
+  }, []);
+  return null;
+}
+
+// src/components/Toast.tsx
+var import_react55 = require("react");
 init_ToastService();
 var import_jsx_runtime74 = require("react/jsx-runtime");
 var Toast = () => {
-  const [showToast, setShowToast] = (0, import_react54.useState)(false);
-  const [message, setMessage] = (0, import_react54.useState)("");
-  const [messageType, setMessageType] = (0, import_react54.useState)("error");
-  const timeoutRef = (0, import_react54.useRef)(null);
-  const closeToast = (0, import_react54.useCallback)(() => {
+  const [showToast, setShowToast] = (0, import_react55.useState)(false);
+  const [message, setMessage] = (0, import_react55.useState)("");
+  const [messageType, setMessageType] = (0, import_react55.useState)("error");
+  const timeoutRef = (0, import_react55.useRef)(null);
+  const closeToast = (0, import_react55.useCallback)(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
     setShowToast(false);
   }, []);
-  const showMessage = (0, import_react54.useCallback)((message2, messageType2) => {
+  const showMessage = (0, import_react55.useCallback)((message2, messageType2) => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
     }
@@ -6911,7 +6958,7 @@ var Toast = () => {
       timeoutRef.current = null;
     }, 4e3);
   }, []);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     ToastService_default.initialize(showMessage, closeToast);
     return () => {
       closeToast();
@@ -7003,14 +7050,14 @@ var NavigationTabsV2 = ({ tabs, params = {} }) => {
 var NavigationTabsV2_default = NavigationTabsV2;
 
 // src/components/dataForm/DataList.tsx
-var import_react57 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 var import_navigation2 = require("next/navigation");
 
 // src/components/dataForm/NoContentView.tsx
-var import_react55 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
 var import_jsx_runtime76 = require("react/jsx-runtime");
 var NoContentView = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_react55.default.Fragment, { children: props.isDataFound === false && props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_react56.default.Fragment, { children: props.isDataFound === false && props.children });
 };
 var NoContentView_default = NoContentView;
 
@@ -7018,10 +7065,10 @@ var NoContentView_default = NoContentView;
 init_InputControlType();
 
 // src/components/dataForm/ContentView.tsx
-var import_react56 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var ContentView = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_react56.default.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_react57.default.Fragment, { children: [
     props.isDataFound == null && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "bg-gray-200 rounded-md p-4 animate-pulse", children: [
       /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex items-center mb-4", children: [
         /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "bg-gray-300 h-8 w-8 rounded-full animate-pulse" }),
@@ -7118,9 +7165,9 @@ var DataList = (props) => {
   let activePageNumber = 0;
   let pages = 0;
   console.log(props.addLinkText);
-  const [isDataFound, setIsDataFound] = (0, import_react57.useState)(null);
-  const [searchTerm, setSearchTerm] = (0, import_react57.useState)(props.query?.searchTerm ?? "");
-  (0, import_react57.useEffect)(() => {
+  const [isDataFound, setIsDataFound] = (0, import_react58.useState)(null);
+  const [searchTerm, setSearchTerm] = (0, import_react58.useState)(props.query?.searchTerm ?? "");
+  (0, import_react58.useEffect)(() => {
     if (props?.dataset) {
       if (props?.dataset.result && props.dataset.result.length > 0) {
         setIsDataFound(true);
@@ -7129,7 +7176,7 @@ var DataList = (props) => {
       }
     }
   }, [props.dataset]);
-  (0, import_react57.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (!props.query?.["$filter"] || !props.filters) return;
     const filterQuery = props.query["$filter"];
     props.filters.forEach((filter) => {
@@ -7157,11 +7204,11 @@ var DataList = (props) => {
     inputValues: {},
     lastPropertyChanged: ""
   };
-  const [formState, dispatch] = (0, import_react57.useReducer)(FormReducer_default, initialState);
+  const [formState, dispatch] = (0, import_react58.useReducer)(FormReducer_default, initialState);
   const getSearchableColumns = () => {
     return props.columns?.filter((c) => c.isSearchable)?.map((c) => c.name)?.join(",");
   };
-  const handleFilterChange = (0, import_react57.useCallback)(
+  const handleFilterChange = (0, import_react58.useCallback)(
     (updatedValues) => {
       dispatch({
         type: FORM_INPUT_UPDATE,
@@ -7192,7 +7239,7 @@ var DataList = (props) => {
     },
     [dispatch, props, router]
   );
-  (0, import_react57.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (!props.columns.some((col) => col.isSearchable)) {
       return;
     }
@@ -7227,7 +7274,7 @@ var DataList = (props) => {
   const renderPageNumbers = () => {
     if (pages <= 10) {
       return Array.from({ length: pages }, (_, index) => index + 1).map(
-        (page) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react57.default.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        (page) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react58.default.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           Hyperlink,
           {
             className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -7241,7 +7288,7 @@ var DataList = (props) => {
       const showLastPages = activePageNumber > pages - 5;
       if (showFirstPages) {
         return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
-          Array.from({ length: 8 }, (_, index) => index + 1).map((page) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react57.default.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          Array.from({ length: 8 }, (_, index) => index + 1).map((page) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react58.default.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
             Hyperlink,
             {
               className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -7307,7 +7354,7 @@ var DataList = (props) => {
           ),
           /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "px-2 py-1", children: "..." }),
           Array.from({ length: 8 }, (_, index) => pages - 7 + index).map(
-            (page) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react57.default.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+            (page) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react58.default.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               Hyperlink,
               {
                 className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -7339,7 +7386,7 @@ var DataList = (props) => {
           Array.from(
             { length: 5 },
             (_, index) => activePageNumber - 2 + index
-          ).map((page) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react57.default.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          ).map((page) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react58.default.Fragment, { children: activePageNumber !== page ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
             Hyperlink,
             {
               className: "px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-100",
@@ -7385,7 +7432,7 @@ var DataList = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_react57.default.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_react58.default.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(ContentView_default, { isDataFound, children: [
       (props.title || props.filters || props.addLinkHref) && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
         "div",
@@ -7475,7 +7522,7 @@ var DataList = (props) => {
           }
           return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("tr", { className: validityClass, children: props?.columns?.map((column, colindex) => {
             console.log("column", column);
-            return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react57.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react58.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               "td",
               {
                 className: "px-6 py-2 whitespace-normal " + (column.controlType == ViewControlTypes_default.money ? "" : ""),
@@ -7639,7 +7686,7 @@ var DataList = (props) => {
 var DataList_default = DataList;
 
 // src/components/dataForm/DataListRenderer.tsx
-var import_react58 = __toESM(require("react"));
+var import_react59 = __toESM(require("react"));
 init_ServiceClient();
 init_OdataBuilder();
 init_SelectWithSearchInput();
@@ -7699,14 +7746,14 @@ var DataListRenderer = ({
   widgetProps
 }) => {
   const serviceClient = new ServiceClient_default(apiBaseUrl, session);
-  const [columns, setColumns] = (0, import_react58.useState)([]);
-  const [dataset, setDataset] = (0, import_react58.useState)();
-  const [filter, setFilters] = (0, import_react58.useState)([]);
-  const [addLinkHref, setAddLinkHref] = (0, import_react58.useState)("");
-  const [addLinkText, setAddLinkText] = (0, import_react58.useState)("");
-  const [serviceRoute, setServiceRoute] = (0, import_react58.useState)("");
+  const [columns, setColumns] = (0, import_react59.useState)([]);
+  const [dataset, setDataset] = (0, import_react59.useState)();
+  const [filter, setFilters] = (0, import_react59.useState)([]);
+  const [addLinkHref, setAddLinkHref] = (0, import_react59.useState)("");
+  const [addLinkText, setAddLinkText] = (0, import_react59.useState)("");
+  const [serviceRoute, setServiceRoute] = (0, import_react59.useState)("");
   const pathname = (0, import_navigation3.usePathname)();
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (!formDefinition) return;
     setColumns(mapApiToColumns(formDefinition));
     setFilters(mapApiToFilters(formDefinition));
@@ -7719,7 +7766,7 @@ var DataListRenderer = ({
     setAddLinkHref(resolvedAddLinkHref);
     setAddLinkText(formDefinition?.siteFormDataList?.addLinkText ?? "");
   }, [formDefinition, params]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     const fetchData = async () => {
       if (!serviceRoute) return;
       const resolvedRoute = resolveRoutePlaceholders2(serviceRoute, params);
@@ -7739,7 +7786,7 @@ var DataListRenderer = ({
       isActive: landingPageUrl === pathname
     };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_react58.default.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_react59.default.Fragment, { children: [
     resolvedTabs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
       NavigationTabsV2_default,
       {
@@ -7752,7 +7799,7 @@ var DataListRenderer = ({
       {
         addLinkHref,
         addLinkText,
-        title: formDefinition?.formTitle || "",
+        title: (formDefinition?.formTitle || "") + "-V2",
         path,
         columns,
         dataset,
@@ -7769,13 +7816,13 @@ var DataListRenderer_default = DataListRenderer;
 init_InputControlType();
 
 // src/components/dataForm/DataForm.tsx
-var import_react60 = __toESM(require("react"));
+var import_react61 = __toESM(require("react"));
 init_Icon();
 init_Button();
 init_StyleTypes();
 
 // src/components/dataForm/DataFormChildSection.tsx
-var import_react59 = __toESM(require("react"));
+var import_react60 = __toESM(require("react"));
 
 // src/components/dataForm/StyleTypes.tsx
 var StyleTypes2 = /* @__PURE__ */ ((StyleTypes3) => {
@@ -7814,7 +7861,7 @@ var DataFormChildSection = (props) => {
     return childItems.map((item, originalIndex) => ({ item, originalIndex })).filter((x) => !x.item.isDeleted) || [];
   };
   const childItemsToRender = getChildItemsForRendering();
-  const handleChildInputChange = (0, import_react59.useCallback)(
+  const handleChildInputChange = (0, import_react60.useCallback)(
     (updatedValues) => {
       if (isOneToOne) {
         props.callback({
@@ -7841,7 +7888,7 @@ var DataFormChildSection = (props) => {
     },
     [props, isOneToOne, childItemsToRender]
   );
-  const onAddRow = (0, import_react59.useCallback)(() => {
+  const onAddRow = (0, import_react60.useCallback)(() => {
     props.callback({
       sectionName: props.section.name,
       actionType: FORM_CHILD_ROW_ADD,
@@ -7850,7 +7897,7 @@ var DataFormChildSection = (props) => {
       rowIndex: -1
     });
   }, [props]);
-  const onDeleteRow = (0, import_react59.useCallback)(
+  const onDeleteRow = (0, import_react60.useCallback)(
     (filteredIndex) => {
       const visibleItem = childItemsToRender[filteredIndex];
       if (visibleItem) {
@@ -7870,7 +7917,7 @@ var DataFormChildSection = (props) => {
     childItemsToRender,
     allChildItems: childItems
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react59.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "rounded border-neutral-200 border px-6 py-4 mb-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react60.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "rounded border-neutral-200 border px-6 py-4 mb-2", children: [
     section.sectionTitle && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "mb-4 text-lg font-medium text-body-950", children: section.sectionTitle }),
     /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "flex-grow flex flex-col justify-between overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex flex-col justify-between gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("table", { className: "w-full border-separate divide-y divide-gray-200", children: [
@@ -7892,7 +7939,7 @@ var DataFormChildSection = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("tbody", { className: "divide-y divide-gray-200", children: childItemsToRender.map((visibleItem, filteredIndex) => {
           const { item, originalIndex } = visibleItem;
           const rowKey = originalIndex;
-          return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react59.default.Fragment, { children: section.sectionRows.map(
+          return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react60.default.Fragment, { children: section.sectionRows.map(
             (sectionRow, sectionRowIndex) => {
               return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
                 "tr",
@@ -7963,7 +8010,7 @@ var DataFormChildSection_default = DataFormChildSection;
 // src/components/dataForm/DataForm.tsx
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var DataForm = (props) => {
-  const formRef = (0, import_react60.useRef)(null);
+  const formRef = (0, import_react61.useRef)(null);
   console.log(props.dataItem, "dssads");
   const initialState = {
     inputValues: {},
@@ -7972,9 +8019,9 @@ var DataForm = (props) => {
   const childInitialState = {
     inputValues: []
   };
-  const [formState, dispatch] = (0, import_react60.useReducer)(FormReducer_default, initialState);
+  const [formState, dispatch] = (0, import_react61.useReducer)(FormReducer_default, initialState);
   console.log(props.sections, "sections");
-  const clearHiddenChildSections = (0, import_react60.useCallback)(
+  const clearHiddenChildSections = (0, import_react61.useCallback)(
     (changedProperty, newValues) => {
       if (!props.sections) return;
       const allChildSections = [];
@@ -8012,7 +8059,7 @@ var DataForm = (props) => {
     },
     [props.sections, formState.inputValues]
   );
-  const handleInputChange = (0, import_react60.useCallback)(
+  const handleInputChange = (0, import_react61.useCallback)(
     async (updatedValues) => {
       dispatch({
         type: FORM_INPUT_UPDATE,
@@ -8027,7 +8074,7 @@ var DataForm = (props) => {
     },
     [dispatch, formState.inputValues, clearHiddenChildSections]
   );
-  const fetchData = (0, import_react60.useCallback)(async () => {
+  const fetchData = (0, import_react61.useCallback)(async () => {
     if (!props.rules) return;
     if (Object.keys(formState.inputValues).length === 0) {
       return;
@@ -8058,7 +8105,7 @@ var DataForm = (props) => {
       console.error("Error fetching data:", error);
     }
   }, [formState.lastPropertyChanged, formState.inputValues]);
-  (0, import_react60.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     fetchData();
   }, [formState.inputValues, formState.lastPropertyChanged]);
   function replacePlaceholders(template, context, params) {
@@ -8078,7 +8125,7 @@ var DataForm = (props) => {
       }
     );
   }
-  const handleChildSectionChangeCallback = (0, import_react60.useCallback)(
+  const handleChildSectionChangeCallback = (0, import_react61.useCallback)(
     (params) => {
       dispatch({
         type: params.actionType,
@@ -8123,7 +8170,7 @@ var DataForm = (props) => {
     });
     return cloned;
   }
-  const onClick = (0, import_react60.useCallback)(async () => {
+  const onClick = (0, import_react61.useCallback)(async () => {
     if (props.onClick) {
       const isEdit = props.dataItem && Object.keys(props.dataItem).length > 0;
       const normalizedValues = normalizeChildSections(
@@ -8139,21 +8186,21 @@ var DataForm = (props) => {
       return { isSuccessful: true };
     }
   }, [formState, props]);
-  const handleAdditionalOnClick = (0, import_react60.useCallback)(async () => {
+  const handleAdditionalOnClick = (0, import_react61.useCallback)(async () => {
     if (props.additionalActions?.onClick) {
       return await props.additionalActions.onClick(formState);
     } else {
       return { isSuccessful: true, message: "Action completed successfully" };
     }
   }, [formState, props]);
-  const onDelete = (0, import_react60.useCallback)(async () => {
+  const onDelete = (0, import_react61.useCallback)(async () => {
     if (props.onDelete) {
       return await props.onDelete(formState);
     } else {
       return { isSuccessful: true };
     }
   }, [formState, props]);
-  (0, import_react60.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     if (props.dataItem) {
       dispatch({
         type: FORM_INITIAL_UPDATE,
@@ -8181,7 +8228,7 @@ var DataForm = (props) => {
       return false;
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react60.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex-grow flex flex-col", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react61.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex-grow flex flex-col", children: [
     props.title && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "inline-flex items-center gap-2 px-6 py-3 border border-neutral-200 bg-white shadow-sm rounded-t-md", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
       "div",
       {
@@ -8215,7 +8262,7 @@ var DataForm = (props) => {
           }
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "flex flex-col gap-6", children: props.sections?.map((section, sectionIndex) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react60.default.Fragment, { children: !section.isChildSection && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: " rounded-b-lg bg-white shadow border-neutral-200 border px-8 py-6 ", children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react61.default.Fragment, { children: !section.isChildSection && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: " rounded-b-lg bg-white shadow border-neutral-200 border px-8 py-6 ", children: [
             section.sectionRows?.map(
               (sectionRow, sectionRowIndex) => {
                 const elementsCount = sectionRow.elements.length;
@@ -8226,7 +8273,7 @@ var DataForm = (props) => {
                     sectionRow.visible
                   );
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react60.default.Fragment, { children: isVisible && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "lg:flex gap-14 flex-1 mb-4 ", children: sectionRow.elements.map((field, index) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react61.default.Fragment, { children: isVisible && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "lg:flex gap-14 flex-1 mb-4 ", children: sectionRow.elements.map((field, index) => {
                   return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
                     "div",
                     {
@@ -8379,6 +8426,7 @@ var DataFormRenderer_default = DataFormRenderer;
   DataListRenderer,
   DateTimeInput,
   EmailInput,
+  EnterAnimationHydrator,
   InputControl,
   InputControlType,
   LineTextInput,

package/dist/index.mjs

@@ -2743,8 +2743,56 @@ var PageBodyRenderer = (props) => {
 };
 var PageBodyRenderer_default = PageBodyRenderer;
 
+// src/components/pageRenderingEngine/EnterAnimationHydrator.tsx
+import { useEffect } from "react";
+var ENTER_ANIMATION_SELECTOR = ".enter-animation";
+function EnterAnimationHydrator() {
+  useEffect(() => {
+    let observer;
+    const observedElements = /* @__PURE__ */ new WeakSet();
+    const revealAnimatedElements = () => {
+      const animatedElements = document.querySelectorAll(ENTER_ANIMATION_SELECTOR);
+      if (!("IntersectionObserver" in window)) {
+        animatedElements.forEach((element) => {
+          element.classList.add("visible");
+        });
+        return;
+      }
+      observer ?? (observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              entry.target.classList.add("visible");
+              observer?.unobserve(entry.target);
+            }
+          });
+        },
+        { threshold: 0.1 }
+      ));
+      animatedElements.forEach((element) => {
+        if (element.classList.contains("visible") || observedElements.has(element)) {
+          return;
+        }
+        observedElements.add(element);
+        observer?.observe(element);
+      });
+    };
+    revealAnimatedElements();
+    const mutationObserver = new MutationObserver(revealAnimatedElements);
+    mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      mutationObserver.disconnect();
+      observer?.disconnect();
+    };
+  }, []);
+  return null;
+}
+
 // src/components/Toast.tsx
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect as useEffect2, useRef, useState } from "react";
 import { Fragment as Fragment7, jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
 var Toast = () => {
   const [showToast, setShowToast] = useState(false);
@@ -2770,7 +2818,7 @@ var Toast = () => {
       timeoutRef.current = null;
     }, 4e3);
   }, []);
-  useEffect(() => {
+  useEffect2(() => {
     ToastService_default.initialize(showMessage, closeToast);
     return () => {
       closeToast();
@@ -2845,7 +2893,7 @@ var NavigationTabsV2 = ({ tabs, params = {} }) => {
 var NavigationTabsV2_default = NavigationTabsV2;
 
 // src/components/dataForm/DataList.tsx
-import React27, { useEffect as useEffect2, useState as useState2, useCallback as useCallback2, useReducer } from "react";
+import React27, { useEffect as useEffect3, useState as useState2, useCallback as useCallback2, useReducer } from "react";
 import { useRouter } from "next/navigation";
 
 // src/components/dataForm/NoContentView.tsx
@@ -2953,7 +3001,7 @@ var DataList = (props) => {
   console.log(props.addLinkText);
   const [isDataFound, setIsDataFound] = useState2(null);
   const [searchTerm, setSearchTerm] = useState2(props.query?.searchTerm ?? "");
-  useEffect2(() => {
+  useEffect3(() => {
     if (props?.dataset) {
       if (props?.dataset.result && props.dataset.result.length > 0) {
         setIsDataFound(true);
@@ -2962,7 +3010,7 @@ var DataList = (props) => {
       }
     }
   }, [props.dataset]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!props.query?.["$filter"] || !props.filters) return;
     const filterQuery = props.query["$filter"];
     props.filters.forEach((filter) => {
@@ -3025,7 +3073,7 @@ var DataList = (props) => {
     },
     [dispatch, props, router]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     if (!props.columns.some((col) => col.isSearchable)) {
       return;
     }
@@ -3472,7 +3520,7 @@ var DataList = (props) => {
 var DataList_default = DataList;
 
 // src/components/dataForm/DataListRenderer.tsx
-import React28, { useState as useState3, useEffect as useEffect3 } from "react";
+import React28, { useState as useState3, useEffect as useEffect4 } from "react";
 import { usePathname as usePathname2 } from "next/navigation";
 import { jsx as jsx41, jsxs as jsxs17 } from "react/jsx-runtime";
 var viewControlMap = {
@@ -3536,7 +3584,7 @@ var DataListRenderer = ({
   const [addLinkText, setAddLinkText] = useState3("");
   const [serviceRoute, setServiceRoute] = useState3("");
   const pathname = usePathname2();
-  useEffect3(() => {
+  useEffect4(() => {
     if (!formDefinition) return;
     setColumns(mapApiToColumns(formDefinition));
     setFilters(mapApiToFilters(formDefinition));
@@ -3549,7 +3597,7 @@ var DataListRenderer = ({
     setAddLinkHref(resolvedAddLinkHref);
     setAddLinkText(formDefinition?.siteFormDataList?.addLinkText ?? "");
   }, [formDefinition, params]);
-  useEffect3(() => {
+  useEffect4(() => {
     const fetchData = async () => {
       if (!serviceRoute) return;
       const resolvedRoute = resolveRoutePlaceholders2(serviceRoute, params);
@@ -3582,7 +3630,7 @@ var DataListRenderer = ({
       {
         addLinkHref,
         addLinkText,
-        title: formDefinition?.formTitle || "",
+        title: (formDefinition?.formTitle || "") + "-V2",
         path,
         columns,
         dataset,
@@ -3596,7 +3644,7 @@ var DataListRenderer = ({
 var DataListRenderer_default = DataListRenderer;
 
 // src/components/dataForm/DataForm.tsx
-import React30, { useCallback as useCallback4, useEffect as useEffect4, useReducer as useReducer2, useRef as useRef2 } from "react";
+import React30, { useCallback as useCallback4, useEffect as useEffect5, useReducer as useReducer2, useRef as useRef2 } from "react";
 
 // src/components/dataForm/DataFormChildSection.tsx
 import React29, { useCallback as useCallback3 } from "react";
@@ -3878,7 +3926,7 @@ var DataForm = (props) => {
       console.error("Error fetching data:", error);
     }
   }, [formState.lastPropertyChanged, formState.inputValues]);
-  useEffect4(() => {
+  useEffect5(() => {
     fetchData();
   }, [formState.inputValues, formState.lastPropertyChanged]);
   function replacePlaceholders(template, context, params) {
@@ -3973,7 +4021,7 @@ var DataForm = (props) => {
       return { isSuccessful: true };
     }
   }, [formState, props]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (props.dataItem) {
       dispatch({
         type: FORM_INITIAL_UPDATE,
@@ -4197,6 +4245,7 @@ export {
   DataListRenderer_default as DataListRenderer,
   DateTimeInput_default as DateTimeInput,
   EmailInput_default as EmailInput,
+  EnterAnimationHydrator,
   InputControl_default as InputControl,
   InputControlType_default as InputControlType,
   LineTextInput_default as LineTextInput,
@@ -4214,3 +4263,5 @@ export {
   ViewControl_default as ViewControl,
   ViewControlTypes_default as ViewControlTypes
 };
+ontrolTypes
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acoustte-digital-services/digitalstore-controls-dev",
-  "version": "0.8.1-dev.20260713105440",
+  "version": "0.8.1-dev.20260714120443",
   "description": "Reusable React components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",