@bagisto-native/core 1.0.0 → 1.0.2

package/dist/index.cjs

@@ -171,14 +171,14 @@ function triggerHotwireNativeToast(message) {
     nativeToasts[0].click();
   }
 }
-function triggerHistorySyncEvent(url) {
+function triggerHistorySyncEvent(url, tabTitle) {
   if (typeof document === "undefined") return;
   const hotwireElements = document.querySelectorAll(
     "[data-controller='bridge--historysync']"
   );
   if (hotwireElements.length > 0) {
     hotwireElements[0].dispatchEvent(new CustomEvent("turbo:next-history-sync", {
-      detail: url,
+      detail: { url, title: tabTitle },
       bubbles: true
     }));
   }
@@ -203,9 +203,25 @@ function triggerCartCountValue(cartcount) {
     nativeButton[0].click();
   }
 }
+function triggerDynamicButtonModalOpenEvent() {
+  if (typeof document === "undefined") return;
+  const nativeButton = document.querySelectorAll('[data-controller="bridge--dynamicbutton"][data-action="click->bridge--dynamicbutton#sendModalOpenEvent"]');
+  if (nativeButton.length > 0) {
+    nativeButton[0].click();
+  }
+}
+function triggerDynamicButtonModalDismissEvent() {
+  if (typeof document === "undefined") return;
+  const nativeButton = document.querySelectorAll('[data-controller="bridge--dynamicbutton"][data-action="click->bridge--dynamicbutton#sendModalDismissEvent"]');
+  if (nativeButton.length > 0) {
+    nativeButton[0].click();
+  }
+}
 
 exports.isTurboNativeUserAgent = isTurboNativeUserAgent;
 exports.triggerCartCountValue = triggerCartCountValue;
+exports.triggerDynamicButtonModalDismissEvent = triggerDynamicButtonModalDismissEvent;
+exports.triggerDynamicButtonModalOpenEvent = triggerDynamicButtonModalOpenEvent;
 exports.triggerHistorySyncEvent = triggerHistorySyncEvent;
 exports.triggerHotwireNativeToast = triggerHotwireNativeToast;
 exports.triggerThemeModeEvent = triggerThemeModeEvent;

package/dist/index.d.cts

@@ -87,16 +87,20 @@ declare function triggerHotwireNativeToast(message: string): void;
  * Dispatches a custom Turbo history sync event to the first
  * `bridge--historysync` controller found in the DOM.
  *
- * This is used to notify the native / Hotwire bridge that the
- * browser history should be synchronized with the given URL.
+ * This notifies the native / Hotwire bridge that the browser history
+ * should be synchronized with the given URL, along with the current
+ * document title from the active browser tab.
  *
- * The event name dispatched is `turbo:next-history-sync` and it
- * bubbles up the DOM tree.
+ * The event name dispatched is `turbo:next-history-sync`. It bubbles
+ * up the DOM tree so parent listeners (including native bridges)
+ * can react to the navigation change.
  *
- * @param url - A `URL` object representing the next location
- * to be synced with Turbo / native navigation.
+ * @param url - A `URL` object representing the next location to be
+ * synced with Turbo / native navigation.
+ * @param tabTitle - The current document title of the active browser
+ * tab, passed to the native layer for display or navigation context.
  */
-declare function triggerHistorySyncEvent(url: URL): void;
+declare function triggerHistorySyncEvent(url: URL, tabTitle: string): void;
 /**
  * Triggers the Theme Mode bridge event by programmatically clicking
  * the hidden theme mode button in the DOM.
@@ -123,5 +127,35 @@ declare function triggerThemeModeEvent(theme: string): void;
  * @param {number} cartcount - The total number of items in the cart
  */
 declare function triggerCartCountValue(cartcount: number): void;
+/**
+ * Triggers the modal open event by simulating a click on the first button
+ * that matches the specified `data-controller` and `data-action` attributes.
+ * This is typically used to send a signal to the native side to open a modal.
+ *
+ * @remarks
+ * - The function first checks if the `document` object is available (to avoid errors in non-browser environments).
+ * - It looks for a button element that has the `data-controller="bridge--dynamicbutton"` and
+ *   `data-action="click->bridge--dynamicbutton#sendModalOpenEvent"` attributes.
+ * - If such a button exists, it simulates a click on the first button in the NodeList.
+ *
+ * @example
+ * triggerDynamicButtonModalOpenEvent(); // Opens the modal
+ */
+declare function triggerDynamicButtonModalOpenEvent(): void;
+/**
+ * Triggers the modal dismiss event by simulating a click on the first button
+ * that matches the specified `data-controller` and `data-action` attributes.
+ * This is typically used to send a signal to the native side to dismiss or close a modal.
+ *
+ * @remarks
+ * - The function first checks if the `document` object is available (to avoid errors in non-browser environments).
+ * - It looks for a button element that has the `data-controller="bridge--dynamicbutton"` and
+ *   `data-action="click->bridge--dynamicbutton#sendModalDismissEvent"` attributes.
+ * - If such a button exists, it simulates a click on the first button in the NodeList.
+ *
+ * @example
+ * triggerDynamicButtonModalDismissEvent(); // Closes the modal
+ */
+declare function triggerDynamicButtonModalDismissEvent(): void;
 
-export { DynamicButton, type FrameworkDelegate, HotwireHistorySync, HotwireLocation, HotwireSearch, HotwireThemeMode, HotwireToast, isTurboNativeUserAgent, triggerCartCountValue, triggerHistorySyncEvent, triggerHotwireNativeToast, triggerThemeModeEvent };
+export { DynamicButton, type FrameworkDelegate, HotwireHistorySync, HotwireLocation, HotwireSearch, HotwireThemeMode, HotwireToast, isTurboNativeUserAgent, triggerCartCountValue, triggerDynamicButtonModalDismissEvent, triggerDynamicButtonModalOpenEvent, triggerHistorySyncEvent, triggerHotwireNativeToast, triggerThemeModeEvent };

package/dist/index.d.ts

@@ -87,16 +87,20 @@ declare function triggerHotwireNativeToast(message: string): void;
  * Dispatches a custom Turbo history sync event to the first
  * `bridge--historysync` controller found in the DOM.
  *
- * This is used to notify the native / Hotwire bridge that the
- * browser history should be synchronized with the given URL.
+ * This notifies the native / Hotwire bridge that the browser history
+ * should be synchronized with the given URL, along with the current
+ * document title from the active browser tab.
  *
- * The event name dispatched is `turbo:next-history-sync` and it
- * bubbles up the DOM tree.
+ * The event name dispatched is `turbo:next-history-sync`. It bubbles
+ * up the DOM tree so parent listeners (including native bridges)
+ * can react to the navigation change.
  *
- * @param url - A `URL` object representing the next location
- * to be synced with Turbo / native navigation.
+ * @param url - A `URL` object representing the next location to be
+ * synced with Turbo / native navigation.
+ * @param tabTitle - The current document title of the active browser
+ * tab, passed to the native layer for display or navigation context.
  */
-declare function triggerHistorySyncEvent(url: URL): void;
+declare function triggerHistorySyncEvent(url: URL, tabTitle: string): void;
 /**
  * Triggers the Theme Mode bridge event by programmatically clicking
  * the hidden theme mode button in the DOM.
@@ -123,5 +127,35 @@ declare function triggerThemeModeEvent(theme: string): void;
  * @param {number} cartcount - The total number of items in the cart
  */
 declare function triggerCartCountValue(cartcount: number): void;
+/**
+ * Triggers the modal open event by simulating a click on the first button
+ * that matches the specified `data-controller` and `data-action` attributes.
+ * This is typically used to send a signal to the native side to open a modal.
+ *
+ * @remarks
+ * - The function first checks if the `document` object is available (to avoid errors in non-browser environments).
+ * - It looks for a button element that has the `data-controller="bridge--dynamicbutton"` and
+ *   `data-action="click->bridge--dynamicbutton#sendModalOpenEvent"` attributes.
+ * - If such a button exists, it simulates a click on the first button in the NodeList.
+ *
+ * @example
+ * triggerDynamicButtonModalOpenEvent(); // Opens the modal
+ */
+declare function triggerDynamicButtonModalOpenEvent(): void;
+/**
+ * Triggers the modal dismiss event by simulating a click on the first button
+ * that matches the specified `data-controller` and `data-action` attributes.
+ * This is typically used to send a signal to the native side to dismiss or close a modal.
+ *
+ * @remarks
+ * - The function first checks if the `document` object is available (to avoid errors in non-browser environments).
+ * - It looks for a button element that has the `data-controller="bridge--dynamicbutton"` and
+ *   `data-action="click->bridge--dynamicbutton#sendModalDismissEvent"` attributes.
+ * - If such a button exists, it simulates a click on the first button in the NodeList.
+ *
+ * @example
+ * triggerDynamicButtonModalDismissEvent(); // Closes the modal
+ */
+declare function triggerDynamicButtonModalDismissEvent(): void;
 
-export { DynamicButton, type FrameworkDelegate, HotwireHistorySync, HotwireLocation, HotwireSearch, HotwireThemeMode, HotwireToast, isTurboNativeUserAgent, triggerCartCountValue, triggerHistorySyncEvent, triggerHotwireNativeToast, triggerThemeModeEvent };
+export { DynamicButton, type FrameworkDelegate, HotwireHistorySync, HotwireLocation, HotwireSearch, HotwireThemeMode, HotwireToast, isTurboNativeUserAgent, triggerCartCountValue, triggerDynamicButtonModalDismissEvent, triggerDynamicButtonModalOpenEvent, triggerHistorySyncEvent, triggerHotwireNativeToast, triggerThemeModeEvent };

package/dist/index.js

@@ -169,14 +169,14 @@ function triggerHotwireNativeToast(message) {
     nativeToasts[0].click();
   }
 }
-function triggerHistorySyncEvent(url) {
+function triggerHistorySyncEvent(url, tabTitle) {
   if (typeof document === "undefined") return;
   const hotwireElements = document.querySelectorAll(
     "[data-controller='bridge--historysync']"
   );
   if (hotwireElements.length > 0) {
     hotwireElements[0].dispatchEvent(new CustomEvent("turbo:next-history-sync", {
-      detail: url,
+      detail: { url, title: tabTitle },
       bubbles: true
     }));
   }
@@ -201,5 +201,19 @@ function triggerCartCountValue(cartcount) {
     nativeButton[0].click();
   }
 }
+function triggerDynamicButtonModalOpenEvent() {
+  if (typeof document === "undefined") return;
+  const nativeButton = document.querySelectorAll('[data-controller="bridge--dynamicbutton"][data-action="click->bridge--dynamicbutton#sendModalOpenEvent"]');
+  if (nativeButton.length > 0) {
+    nativeButton[0].click();
+  }
+}
+function triggerDynamicButtonModalDismissEvent() {
+  if (typeof document === "undefined") return;
+  const nativeButton = document.querySelectorAll('[data-controller="bridge--dynamicbutton"][data-action="click->bridge--dynamicbutton#sendModalDismissEvent"]');
+  if (nativeButton.length > 0) {
+    nativeButton[0].click();
+  }
+}
 
-export { DynamicButton, HotwireHistorySync, HotwireLocation, HotwireSearch, HotwireThemeMode, HotwireToast, isTurboNativeUserAgent, triggerCartCountValue, triggerHistorySyncEvent, triggerHotwireNativeToast, triggerThemeModeEvent };
+export { DynamicButton, HotwireHistorySync, HotwireLocation, HotwireSearch, HotwireThemeMode, HotwireToast, isTurboNativeUserAgent, triggerCartCountValue, triggerDynamicButtonModalDismissEvent, triggerDynamicButtonModalOpenEvent, triggerHistorySyncEvent, triggerHotwireNativeToast, triggerThemeModeEvent };

package/dist/src/components/dynamic-button.d.ts

@@ -0,0 +1,2 @@
+declare let DynamicButton: typeof HTMLElement | undefined;
+export { DynamicButton };

package/dist/src/components/dynamic-button.js

@@ -0,0 +1,39 @@
+let DynamicButton;
+if (typeof window !== 'undefined') {
+    class DynamicButtonClass extends HTMLElement {
+        static get observedAttributes() {
+            return ['data-page-type'];
+        }
+        constructor() {
+            super();
+        }
+        connectedCallback() {
+            // Apply default attributes
+            this.type = 'button';
+            // Bridge action (Hotwire compatible)
+            this.setAttribute('data-controller', 'bridge--dynamicbutton');
+        }
+        attributeChangedCallback(name, oldVal, newVal) { }
+        disconnectedCallback() {
+        }
+    }
+    if (typeof window !== 'undefined' && !customElements.get('dynamic-button')) {
+        customElements.define('dynamic-button', DynamicButtonClass);
+    }
+    DynamicButton = DynamicButtonClass;
+}
+export { DynamicButton };
+//   <button
+//         type="button"
+//         data-controller="bridge--dynamicbutton"
+//         data-page-type="home"
+//         className="hidden"
+//         >
+//       </button>
+// example use
+// import "@hotwire/app/components";
+//  <dynamic-button
+//         data-page-type="home"
+//         style={{ backgroundColor: 'lightblue', padding: '10px', borderRadius: '5px' }}
+//         classList="dynamic-btn react"
+//       >Bridge Dynamic Button</dynamic-button>

package/dist/src/components/hotwire-history-sync.d.ts

@@ -0,0 +1,2 @@
+declare let HotwireHistorySync: typeof HTMLElement | undefined;
+export { HotwireHistorySync };

package/dist/src/components/hotwire-history-sync.js

@@ -0,0 +1,21 @@
+let HotwireHistorySync;
+if (typeof window !== 'undefined') {
+    class HistorySyncClass extends HTMLElement {
+        constructor() {
+            super();
+            this.handleClick = this.handleClick.bind(this);
+        }
+        connectedCallback() {
+            this.setAttribute('role', 'button');
+            this.setAttribute('data-controller', 'bridge--historysync');
+        }
+        handleClick(e) { }
+        disconnectedCallback() {
+        }
+    }
+    if (!customElements.get('hotwire-history-sync')) {
+        customElements.define('hotwire-history-sync', HistorySyncClass);
+    }
+    HotwireHistorySync = HistorySyncClass;
+}
+export { HotwireHistorySync };

package/dist/src/components/hotwire-location.d.ts

@@ -0,0 +1,2 @@
+declare let HotwireLocation: typeof HTMLElement | undefined;
+export { HotwireLocation };

package/dist/src/components/hotwire-location.js

@@ -0,0 +1,23 @@
+let HotwireLocation;
+if (typeof window !== 'undefined') {
+    class LocationClass extends HTMLElement {
+        constructor() {
+            super();
+            this.handleClick = this.handleClick.bind(this);
+        }
+        connectedCallback() {
+            this.setAttribute('role', 'button');
+            this.setAttribute('data-controller', 'bridge--location');
+            this.addEventListener('click', this.handleClick);
+        }
+        handleClick(e) { }
+        disconnectedCallback() {
+            this.removeEventListener('click', this.handleClick);
+        }
+    }
+    if (!customElements.get('hotwire-location')) {
+        customElements.define('hotwire-location', LocationClass);
+    }
+    HotwireLocation = LocationClass;
+}
+export { HotwireLocation };

package/dist/src/components/hotwire-search.d.ts

@@ -0,0 +1,2 @@
+declare let HotwireSearch: typeof HTMLElement | undefined;
+export { HotwireSearch };

package/dist/src/components/hotwire-search.js

@@ -0,0 +1,26 @@
+let HotwireSearch;
+if (typeof window !== 'undefined') {
+    class HotwireSearchClass extends HTMLElement {
+        constructor() {
+            super();
+        }
+        connectedCallback() {
+            this.innerHTML = '';
+            const p = document.createElement('p');
+            p.setAttribute('data-controller', 'bridge--search');
+            p.setAttribute('data-action', 'input->bridge--search#handleInput');
+            p.style.display = 'none';
+            p.appendChild(document.createTextNode('Search Form'));
+            const resultsDiv = document.createElement('div');
+            resultsDiv.setAttribute('data-bridge--search-target', 'results');
+            p.appendChild(resultsDiv);
+            this.appendChild(p);
+        }
+        disconnectedCallback() { }
+    }
+    if (!customElements.get('hotwire-search')) {
+        customElements.define('hotwire-search', HotwireSearchClass);
+    }
+    HotwireSearch = HotwireSearchClass;
+}
+export { HotwireSearch };

package/dist/src/components/hotwire-theme-mode.d.ts

@@ -0,0 +1,2 @@
+declare let HotwireThemeMode: typeof HTMLElement | undefined;
+export { HotwireThemeMode };

package/dist/src/components/hotwire-theme-mode.js

@@ -0,0 +1,24 @@
+let HotwireThemeMode;
+if (typeof window !== 'undefined') {
+    class ThemeModeClass extends HTMLElement {
+        constructor() {
+            super();
+            this.handleClick = this.handleClick.bind(this);
+        }
+        connectedCallback() {
+            this.setAttribute('role', 'button');
+            this.setAttribute('data-controller', 'bridge--thememode');
+            this.setAttribute('data-action', 'click->bridge--thememode#handleClick');
+            this.addEventListener('click', this.handleClick);
+        }
+        handleClick(e) { }
+        disconnectedCallback() {
+            this.removeEventListener('click', this.handleClick);
+        }
+    }
+    if (!customElements.get('hotwire-theme-mode')) {
+        customElements.define('hotwire-theme-mode', ThemeModeClass);
+    }
+    HotwireThemeMode = ThemeModeClass;
+}
+export { HotwireThemeMode };

package/dist/src/components/hotwire-toast.d.ts

@@ -0,0 +1,2 @@
+declare let HotwireToast: typeof HTMLElement | undefined;
+export { HotwireToast };

package/dist/src/components/hotwire-toast.js

@@ -0,0 +1,24 @@
+let HotwireToast;
+if (typeof window !== 'undefined') {
+    class ToastClass extends HTMLElement {
+        constructor() {
+            super();
+            this.handleClick = this.handleClick.bind(this);
+        }
+        connectedCallback() {
+            this.setAttribute('role', 'button');
+            this.setAttribute('data-controller', 'bridge--toast');
+            this.setAttribute('data-action', 'click->bridge--toast#show');
+            this.addEventListener('click', this.handleClick);
+        }
+        handleClick(e) { }
+        disconnectedCallback() {
+            this.removeEventListener('click', this.handleClick);
+        }
+    }
+    if (!customElements.get('hotwire-toast')) {
+        customElements.define('hotwire-toast', ToastClass);
+    }
+    HotwireToast = ToastClass;
+}
+export { HotwireToast };

package/dist/src/index.d.ts

@@ -0,0 +1,8 @@
+export * from './components/hotwire-toast.js';
+export * from './components/dynamic-button.js';
+export * from './components/hotwire-location.js';
+export * from './components/hotwire-search.js';
+export * from './components/hotwire-history-sync.js';
+export * from './components/hotwire-theme-mode.js';
+export type { FrameworkDelegate } from './types/interface.js';
+export * from './utils/utils.js';

package/dist/src/index.js

@@ -0,0 +1,7 @@
+export * from './components/hotwire-toast.js';
+export * from './components/dynamic-button.js';
+export * from './components/hotwire-location.js';
+export * from './components/hotwire-search.js';
+export * from './components/hotwire-history-sync.js';
+export * from './components/hotwire-theme-mode.js';
+export * from './utils/utils.js';

package/dist/src/utils/utils.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Check the turbo native user agent is present or not. (Hotwire)
+ * Function call from server components : isTurboNativeUserAgent(req.headers['user-agent']) or isTurboNativeUserAgent(useragent) where you have to find and send the useragent manually (ex. Next js Server Component);
+ * Function call from client components : isTurboNativeUserAgent();
+ * @param userAgent
+ * @returns
+ */
+export declare function isTurboNativeUserAgent(userAgent?: string): boolean;
+/**
+ * Triggers a native Hotwire toast message in the DOM.
+ *
+ * This function searches for the first element in the document
+ * that uses the Stimulus controller `bridge--toast`. If found,
+ * it updates its `data-bridge-message` attribute with the provided
+ * message and simulates a click event to display the toast.
+ *
+ * This utility is useful for programmatically invoking toasts from
+ * anywhere in your application (e.g., after form submissions or API actions).
+ *
+ * @function triggerHotwireNativeToast
+ * @param {string} message - The message text to display in the toast.
+ * @example
+ * // Trigger a simple toast notification
+ * TriggerHotwireNativeToast("Profile updated successfully!");
+ *
+ * @remarks
+ * The function safely checks for the presence of the `document` object,
+ * so it can be called in both browser and server environments.
+ */
+export declare function triggerHotwireNativeToast(message: string): void;
+/**
+ * Dispatches a custom Turbo history sync event to the first
+ * `bridge--historysync` controller found in the DOM.
+ *
+ * This notifies the native / Hotwire bridge that the browser history
+ * should be synchronized with the given URL, along with the current
+ * document title from the active browser tab.
+ *
+ * The event name dispatched is `turbo:next-history-sync`. It bubbles
+ * up the DOM tree so parent listeners (including native bridges)
+ * can react to the navigation change.
+ *
+ * @param url - A `URL` object representing the next location to be
+ * synced with Turbo / native navigation.
+ * @param tabTitle - The current document title of the active browser
+ * tab, passed to the native layer for display or navigation context.
+ */
+export declare function triggerHistorySyncEvent(url: URL, tabTitle: string): void;
+/**
+ * Triggers the Theme Mode bridge event by programmatically clicking
+ * the hidden theme mode button in the DOM.
+ *
+ * This function updates the `data-bridge-mode` attribute on the button
+ * and dispatches a click event so the native bridge can react.
+ *
+* @param theme - The theme mode to apply.
+ * Must be either `"dark"` or `"light"`.
+ */
+export declare function triggerThemeModeEvent(theme: string): void;
+/**
+ * Triggers a native cart count update via the Hotwire bridge.
+ *
+ * This function:
+ * - Finds the first DOM element wired with the Hotwire Dynamic Button controller
+ *   responsible for sending cart count data to the native app.
+ * - Sets the `data-bridge-cartcount` attribute with the provided cart count.
+ * - Programmatically triggers a click event to notify the native layer.
+ *
+ * The function safely exits when executed in a non-browser environment
+ * (e.g., during server-side rendering).
+ *
+ * @param {number} cartcount - The total number of items in the cart
+ */
+export declare function triggerCartCountValue(cartcount: number): void;
+/**
+ * Triggers the modal open event by simulating a click on the first button
+ * that matches the specified `data-controller` and `data-action` attributes.
+ * This is typically used to send a signal to the native side to open a modal.
+ *
+ * @remarks
+ * - The function first checks if the `document` object is available (to avoid errors in non-browser environments).
+ * - It looks for a button element that has the `data-controller="bridge--dynamicbutton"` and
+ *   `data-action="click->bridge--dynamicbutton#sendModalOpenEvent"` attributes.
+ * - If such a button exists, it simulates a click on the first button in the NodeList.
+ *
+ * @example
+ * triggerDynamicButtonModalOpenEvent(); // Opens the modal
+ */
+export declare function triggerDynamicButtonModalOpenEvent(): void;
+/**
+ * Triggers the modal dismiss event by simulating a click on the first button
+ * that matches the specified `data-controller` and `data-action` attributes.
+ * This is typically used to send a signal to the native side to dismiss or close a modal.
+ *
+ * @remarks
+ * - The function first checks if the `document` object is available (to avoid errors in non-browser environments).
+ * - It looks for a button element that has the `data-controller="bridge--dynamicbutton"` and
+ *   `data-action="click->bridge--dynamicbutton#sendModalDismissEvent"` attributes.
+ * - If such a button exists, it simulates a click on the first button in the NodeList.
+ *
+ * @example
+ * triggerDynamicButtonModalDismissEvent(); // Closes the modal
+ */
+export declare function triggerDynamicButtonModalDismissEvent(): void;