@shopify/app-bridge-react 4.1.7 → 4.1.9

package/build/esnext/components/SaveBar.esnext

@@ -0,0 +1,63 @@
+import { forwardRef, useState, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * This component is a wrapper around the App Bridge `ui-save-bar` element.
+ * It is used to display a contextual save bar to signal dirty state in the app.
+ *
+ * @see {@link https://shopify.dev/docs/api/app-bridge-library/react-components/save-bar}
+ */
+const SaveBar = /*#__PURE__*/forwardRef(function InternalSaveBar({
+  open,
+  onShow,
+  onHide,
+  children,
+  ...rest
+}, forwardedRef) {
+  const [saveBar, setSaveBar] = useState();
+  useEffect(() => {
+    if (!saveBar) return;
+    if (open) {
+      saveBar.show();
+    } else {
+      saveBar.hide();
+    }
+  }, [saveBar, open]);
+  useEffect(() => {
+    if (!saveBar || !onShow) return;
+    saveBar.addEventListener('show', onShow);
+    return () => {
+      saveBar.removeEventListener('show', onShow);
+    };
+  }, [saveBar, onShow]);
+  useEffect(() => {
+    if (!saveBar || !onHide) return;
+    saveBar.addEventListener('hide', onHide);
+    return () => {
+      saveBar.removeEventListener('hide', onHide);
+    };
+  }, [saveBar, onHide]);
+  useEffect(() => {
+    if (!saveBar) return;
+    return () => {
+      saveBar.hide();
+    };
+  }, [saveBar]);
+  return /*#__PURE__*/jsx("ui-save-bar", {
+    ...rest,
+    ref: saveBar => {
+      setSaveBar(saveBar);
+      if (forwardedRef) {
+        if (typeof forwardedRef === 'function') {
+          forwardedRef(saveBar);
+        } else {
+          forwardedRef.current = saveBar;
+        }
+      }
+    },
+    children: children
+  });
+});
+SaveBar.displayName = 'ui-save-bar';
+
+export { SaveBar };

package/build/esnext/components/TitleBar.esnext

@@ -0,0 +1,10 @@
+/**
+ * This component is a wrapper around the App Bridge `ui-title-bar` element.
+ * It is used to to populate the app title bar with button actions or the
+ * modal header and footer when used within the Modal component.
+ *
+ * @see {@link https://shopify.dev/docs/api/app-bridge-library/react-components/titlebar}
+ */
+const TitleBar = 'ui-title-bar';
+
+export { TitleBar };

package/build/esnext/hooks/useAppBridge.esnext

@@ -0,0 +1,45 @@
+/**
+ * This proxy is used to throw a helpful error message when trying to access
+ * the `shopify` global in a server environment.
+ */
+const serverProxy = new Proxy({}, {
+  get(_, prop) {
+    throw Error(`shopify.${String(prop)} can't be used in a server environment. You likely need to move this code into an Effect.`);
+  }
+});
+
+/**
+ *
+ * This hook returns the `shopify` global variable to use
+ * App Bridge APIs such as `toast` and `resourcePicker`.
+ *
+ * @see {@link https://shopify.dev/docs/api/app-bridge-library/react-hooks/useappbridge}
+ *
+ * @example
+ * ```jsx
+ * import {useAppBridge} from '@shopify/app-bridge-react';
+ * function GenerateBlogPostButton() {
+ *   const shopify = useAppBridge();
+ *
+ *   function generateBlogPost() {
+ *     // Handle generating
+ *     shopify.toast.show('Blog post template generated');
+ *   }
+ *
+ *   return <button onClick={generateBlogPost}>Generate Blog Post</button>;
+ * }
+ * ```
+ *
+ * @returns `shopify` variable or a Proxy that throws when incorrectly accessed when not in a browser context
+ */
+function useAppBridge() {
+  if (typeof window === 'undefined') {
+    return serverProxy;
+  }
+  if (!window.shopify) {
+    throw Error('The shopify global is not defined. This likely means the App Bridge script tag was not added correctly to this page');
+  }
+  return window.shopify;
+}
+
+export { useAppBridge };

package/build/esnext/index.esnext

@@ -0,0 +1,5 @@
+export { Modal } from './components/Modal.esnext';
+export { NavMenu } from './components/NavMenu.esnext';
+export { TitleBar } from './components/TitleBar.esnext';
+export { SaveBar } from './components/SaveBar.esnext';
+export { useAppBridge } from './hooks/useAppBridge.esnext';

package/build/types/cjs/components/Modal.d.cts

@@ -0,0 +1,38 @@
+
+import { ReactNode, LegacyRef } from 'react';
+import { UIModalAttributes } from '@shopify/app-bridge-types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ui-modal': UIModalAttributes & {
+                ref?: LegacyRef<UIModalElement | null>;
+            };
+        }
+    }
+}
+export interface ModalProps extends Omit<UIModalAttributes, 'children'> {
+    /**
+     * Whether the modal is open or not
+     *
+     * @defaultValue false
+     */
+    open?: boolean;
+    /**
+     * Callback that is called when the modal is opened
+     */
+    onShow?(): void;
+    /**
+     * Callback that is called when the modal is closed
+     */
+    onHide?(): void;
+    children?: ReactNode;
+}
+/**
+ * This component is a wrapper around the App Bridge `ui-modal` element.
+ * It is used to display an overlay that prevents interaction with the
+ * rest of the app until dismissed.
+ *
+ * @see {@link https://shopify.dev/docs/api/app-bridge-library/react-components/modal}
+ */
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<UIModalElement>>;
+//# sourceMappingURL=Modal.d.cts.map

package/build/types/cjs/components/Modal.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.cts","sourceRoot":"","sources":["../../../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAEd,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AAEjE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,UAAU,EAAE,iBAAiB,GAAG;gBAC9B,GAAG,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;aACxC,CAAC;SACH;KACF;CACF;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC;IACrE;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,KAAK,mFAoFhB,CAAC"}

package/build/types/cjs/components/NavMenu.d.cts

@@ -0,0 +1,23 @@
+
+import { LegacyRef, ReactNode } from 'react';
+import { UINavMenuAttributes } from '@shopify/app-bridge-types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ui-nav-menu': UINavMenuAttributes & {
+                ref?: LegacyRef<UINavMenuElement | null>;
+            };
+        }
+    }
+}
+export interface NavMenuProps extends Omit<UINavMenuAttributes, 'children'> {
+    children?: ReactNode;
+}
+/**
+ * This component is a wrapper around the App Bridge `ui-nav-menu` element.
+ * It is used to create a navigation menu for your app.
+ *
+ * @see {@link https://shopify.dev/docs/api/app-bridge-library/react-components/navmenu}
+ */
+export declare const NavMenu: React.ComponentType<NavMenuProps>;
+//# sourceMappingURL=NavMenu.d.cts.map

package/build/types/cjs/components/NavMenu.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavMenu.d.cts","sourceRoot":"","sources":["../../../../src/components/NavMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,2BAA2B,CAAC;AAEnE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,aAAa,EAAE,mBAAmB,GAAG;gBACnC,GAAG,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;aAC1C,CAAC;SACH;KACF;CACF;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC;IACzE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,eAAO,MAAM,OAAO,mCAC2C,CAAC"}

package/build/types/cjs/components/SaveBar.d.cts

@@ -0,0 +1,37 @@
+
+import { ReactNode, LegacyRef } from 'react';
+import { UISaveBarAttributes } from '@shopify/app-bridge-types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ui-save-bar': UISaveBarAttributes & {
+                ref?: LegacyRef<UISaveBarElement | null>;
+            };
+        }
+    }
+}
+export interface SaveBarProps extends Omit<UISaveBarAttributes, 'children'> {
+    /**
+     * Whether the saveBar is open or not
+     *
+     * @defaultValue false
+     */
+    open?: boolean;
+    /**
+     * Callback that is called when the saveBar is opened
+     */
+    onShow?(): void;
+    /**
+     * Callback that is called when the saveBar is closed
+     */
+    onHide?(): void;
+    children?: ReactNode;
+}
+/**
+ * This component is a wrapper around the App Bridge `ui-save-bar` element.
+ * It is used to display a contextual save bar to signal dirty state in the app.
+ *
+ * @see {@link https://shopify.dev/docs/api/app-bridge-library/react-components/save-bar}
+ */
+export declare const SaveBar: React.ForwardRefExoticComponent<SaveBarProps & React.RefAttributes<UISaveBarElement>>;
+//# sourceMappingURL=SaveBar.d.cts.map

package/build/types/cjs/components/SaveBar.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaveBar.d.cts","sourceRoot":"","sources":["../../../../src/components/SaveBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAEd,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,2BAA2B,CAAC;AAEnE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,aAAa,EAAE,mBAAmB,GAAG;gBACnC,GAAG,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;aAC1C,CAAC;SACH;KACF;CACF;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC;IACzE;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,eAAO,MAAM,OAAO,uFAuDlB,CAAC"}

package/build/types/cjs/components/TitleBar.d.cts

@@ -0,0 +1,24 @@
+
+import { LegacyRef, ReactNode } from 'react';
+import { UITitleBarAttributes } from '@shopify/app-bridge-types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ui-title-bar': UITitleBarAttributes & {
+                ref?: LegacyRef<UITitleBarElement | null>;
+            };
+        }
+    }
+}
+export interface TitleBarProps extends Omit<UITitleBarAttributes, 'children'> {
+    children?: ReactNode;
+}
+/**
+ * This component is a wrapper around the App Bridge `ui-title-bar` element.
+ * It is used to to populate the app title bar with button actions or the
+ * modal header and footer when used within the Modal component.
+ *
+ * @see {@link https://shopify.dev/docs/api/app-bridge-library/react-components/titlebar}
+ */
+export declare const TitleBar: React.ComponentType<TitleBarProps>;
+//# sourceMappingURL=TitleBar.d.cts.map

package/build/types/cjs/components/TitleBar.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleBar.d.cts","sourceRoot":"","sources":["../../../../src/components/TitleBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,2BAA2B,CAAC;AAEpE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,cAAc,EAAE,oBAAoB,GAAG;gBACrC,GAAG,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;aAC3C,CAAC;SACH;KACF;CACF;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,oCAC4C,CAAC"}

package/build/types/cjs/hooks/useAppBridge.d.cts

@@ -0,0 +1,28 @@
+
+import { ShopifyGlobal } from '@shopify/app-bridge-types';
+/**
+ *
+ * This hook returns the `shopify` global variable to use
+ * App Bridge APIs such as `toast` and `resourcePicker`.
+ *
+ * @see {@link https://shopify.dev/docs/api/app-bridge-library/react-hooks/useappbridge}
+ *
+ * @example
+ * ```jsx
+ * import {useAppBridge} from '@shopify/app-bridge-react';
+ * function GenerateBlogPostButton() {
+ *   const shopify = useAppBridge();
+ *
+ *   function generateBlogPost() {
+ *     // Handle generating
+ *     shopify.toast.show('Blog post template generated');
+ *   }
+ *
+ *   return <button onClick={generateBlogPost}>Generate Blog Post</button>;
+ * }
+ * ```
+ *
+ * @returns `shopify` variable or a Proxy that throws when incorrectly accessed when not in a browser context
+ */
+export declare function useAppBridge(): ShopifyGlobal;
+//# sourceMappingURL=useAppBridge.d.cts.map

package/build/types/cjs/hooks/useAppBridge.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAppBridge.d.cts","sourceRoot":"","sources":["../../../../src/hooks/useAppBridge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAmB7D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,YAAY,kBAU3B"}

package/build/types/cjs/index.d.cts

@@ -0,0 +1,12 @@
+
+export type { ModalProps } from './components/Modal.cjs';
+export { Modal } from './components/Modal.cjs';
+export type { NavMenuProps } from './components/NavMenu.cjs';
+export { NavMenu } from './components/NavMenu.cjs';
+export type { TitleBarProps } from './components/TitleBar.cjs';
+export { TitleBar } from './components/TitleBar.cjs';
+export type { SaveBarProps } from './components/SaveBar.cjs';
+export { SaveBar } from './components/SaveBar.cjs';
+export { useAppBridge } from './hooks/useAppBridge.cjs';
+export type * from '@shopify/app-bridge-types';
+//# sourceMappingURL=index.d.cts.map

package/build/types/cjs/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAEzC,YAAY,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAC;AAE7C,YAAY,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAC,QAAQ,EAAC,MAAM,uBAAuB,CAAC;AAE/C,YAAY,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAC;AAE7C,OAAO,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAElD,mBAAmB,2BAA2B,CAAC"}

package/build/types/esm/components/Modal.d.ts

@@ -0,0 +1,38 @@
+
+import { ReactNode, LegacyRef } from 'react';
+import { UIModalAttributes } from '@shopify/app-bridge-types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ui-modal': UIModalAttributes & {
+                ref?: LegacyRef<UIModalElement | null>;
+            };
+        }
+    }
+}
+export interface ModalProps extends Omit<UIModalAttributes, 'children'> {
+    /**
+     * Whether the modal is open or not
+     *
+     * @defaultValue false
+     */
+    open?: boolean;
+    /**
+     * Callback that is called when the modal is opened
+     */
+    onShow?(): void;
+    /**
+     * Callback that is called when the modal is closed
+     */
+    onHide?(): void;
+    children?: ReactNode;
+}
+/**
+ * This component is a wrapper around the App Bridge `ui-modal` element.
+ * It is used to display an overlay that prevents interaction with the
+ * rest of the app until dismissed.
+ *
+ * @see {@link https://shopify.dev/docs/api/app-bridge-library/react-components/modal}
+ */
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<UIModalElement>>;
+//# sourceMappingURL=Modal.d.ts.map

package/build/types/esm/components/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAEd,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,2BAA2B,CAAC;AAEjE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,UAAU,EAAE,iBAAiB,GAAG;gBAC9B,GAAG,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;aACxC,CAAC;SACH;KACF;CACF;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC;IACrE;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,KAAK,mFAoFhB,CAAC"}

package/build/types/esm/components/NavMenu.d.ts

@@ -0,0 +1,23 @@
+
+import { LegacyRef, ReactNode } from 'react';
+import { UINavMenuAttributes } from '@shopify/app-bridge-types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ui-nav-menu': UINavMenuAttributes & {
+                ref?: LegacyRef<UINavMenuElement | null>;
+            };
+        }
+    }
+}
+export interface NavMenuProps extends Omit<UINavMenuAttributes, 'children'> {
+    children?: ReactNode;
+}
+/**
+ * This component is a wrapper around the App Bridge `ui-nav-menu` element.
+ * It is used to create a navigation menu for your app.
+ *
+ * @see {@link https://shopify.dev/docs/api/app-bridge-library/react-components/navmenu}
+ */
+export declare const NavMenu: React.ComponentType<NavMenuProps>;
+//# sourceMappingURL=NavMenu.d.ts.map

package/build/types/esm/components/NavMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/NavMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,2BAA2B,CAAC;AAEnE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,aAAa,EAAE,mBAAmB,GAAG;gBACnC,GAAG,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;aAC1C,CAAC;SACH;KACF;CACF;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC;IACzE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,eAAO,MAAM,OAAO,mCAC2C,CAAC"}

package/build/types/esm/components/SaveBar.d.ts

@@ -0,0 +1,37 @@
+
+import { ReactNode, LegacyRef } from 'react';
+import { UISaveBarAttributes } from '@shopify/app-bridge-types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ui-save-bar': UISaveBarAttributes & {
+                ref?: LegacyRef<UISaveBarElement | null>;
+            };
+        }
+    }
+}
+export interface SaveBarProps extends Omit<UISaveBarAttributes, 'children'> {
+    /**
+     * Whether the saveBar is open or not
+     *
+     * @defaultValue false
+     */
+    open?: boolean;
+    /**
+     * Callback that is called when the saveBar is opened
+     */
+    onShow?(): void;
+    /**
+     * Callback that is called when the saveBar is closed
+     */
+    onHide?(): void;
+    children?: ReactNode;
+}
+/**
+ * This component is a wrapper around the App Bridge `ui-save-bar` element.
+ * It is used to display a contextual save bar to signal dirty state in the app.
+ *
+ * @see {@link https://shopify.dev/docs/api/app-bridge-library/react-components/save-bar}
+ */
+export declare const SaveBar: React.ForwardRefExoticComponent<SaveBarProps & React.RefAttributes<UISaveBarElement>>;
+//# sourceMappingURL=SaveBar.d.ts.map

package/build/types/esm/components/SaveBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SaveBar.d.ts","sourceRoot":"","sources":["../../../../src/components/SaveBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAEd,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,2BAA2B,CAAC;AAEnE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,aAAa,EAAE,mBAAmB,GAAG;gBACnC,GAAG,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;aAC1C,CAAC;SACH;KACF;CACF;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC;IACzE;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,eAAO,MAAM,OAAO,uFAuDlB,CAAC"}

package/build/types/esm/components/TitleBar.d.ts

@@ -0,0 +1,24 @@
+
+import { LegacyRef, ReactNode } from 'react';
+import { UITitleBarAttributes } from '@shopify/app-bridge-types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'ui-title-bar': UITitleBarAttributes & {
+                ref?: LegacyRef<UITitleBarElement | null>;
+            };
+        }
+    }
+}
+export interface TitleBarProps extends Omit<UITitleBarAttributes, 'children'> {
+    children?: ReactNode;
+}
+/**
+ * This component is a wrapper around the App Bridge `ui-title-bar` element.
+ * It is used to to populate the app title bar with button actions or the
+ * modal header and footer when used within the Modal component.
+ *
+ * @see {@link https://shopify.dev/docs/api/app-bridge-library/react-components/titlebar}
+ */
+export declare const TitleBar: React.ComponentType<TitleBarProps>;
+//# sourceMappingURL=TitleBar.d.ts.map

package/build/types/esm/components/TitleBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleBar.d.ts","sourceRoot":"","sources":["../../../../src/components/TitleBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,2BAA2B,CAAC;AAEpE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,cAAc,EAAE,oBAAoB,GAAG;gBACrC,GAAG,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;aAC3C,CAAC;SACH;KACF;CACF;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,oCAC4C,CAAC"}

package/build/types/esm/hooks/useAppBridge.d.ts

@@ -0,0 +1,28 @@
+
+import { ShopifyGlobal } from '@shopify/app-bridge-types';
+/**
+ *
+ * This hook returns the `shopify` global variable to use
+ * App Bridge APIs such as `toast` and `resourcePicker`.
+ *
+ * @see {@link https://shopify.dev/docs/api/app-bridge-library/react-hooks/useappbridge}
+ *
+ * @example
+ * ```jsx
+ * import {useAppBridge} from '@shopify/app-bridge-react';
+ * function GenerateBlogPostButton() {
+ *   const shopify = useAppBridge();
+ *
+ *   function generateBlogPost() {
+ *     // Handle generating
+ *     shopify.toast.show('Blog post template generated');
+ *   }
+ *
+ *   return <button onClick={generateBlogPost}>Generate Blog Post</button>;
+ * }
+ * ```
+ *
+ * @returns `shopify` variable or a Proxy that throws when incorrectly accessed when not in a browser context
+ */
+export declare function useAppBridge(): ShopifyGlobal;
+//# sourceMappingURL=useAppBridge.d.ts.map

package/build/types/esm/hooks/useAppBridge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAppBridge.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useAppBridge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAmB7D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,YAAY,kBAU3B"}

package/build/types/esm/index.d.ts

@@ -0,0 +1,12 @@
+
+export type { ModalProps } from './components/Modal.js';
+export { Modal } from './components/Modal.js';
+export type { NavMenuProps } from './components/NavMenu.js';
+export { NavMenu } from './components/NavMenu.js';
+export type { TitleBarProps } from './components/TitleBar.js';
+export { TitleBar } from './components/TitleBar.js';
+export type { SaveBarProps } from './components/SaveBar.js';
+export { SaveBar } from './components/SaveBar.js';
+export { useAppBridge } from './hooks/useAppBridge.js';
+export type * from '@shopify/app-bridge-types';
+//# sourceMappingURL=index.d.ts.map

package/build/types/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAEzC,YAAY,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAC;AAE7C,YAAY,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAC,QAAQ,EAAC,MAAM,uBAAuB,CAAC;AAE/C,YAAY,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAC;AAE7C,OAAO,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAElD,mBAAmB,2BAA2B,CAAC"}

package/package.json

@@ -1,65 +1,76 @@
 {
   "name": "@shopify/app-bridge-react",
-  "version": "4.1.7",
-  "license": "MIT",
+  "version": "4.1.9",
   "description": "React wrappers for the Shopify App Bridge library",
-  "private": false,
-  "publishConfig": {
-    "access": "public",
-    "@shopify:registry": "https://registry.npmjs.org"
-  },
-  "sideEffects": false,
+  "license": "MIT",
   "author": "Shopify Inc.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Shopify/shopify-app-bridge.git"
   },
+  "bugs": {
+    "url": "https://github.com/Shopify/shopify-app-bridge/issues"
+  },
   "homepage": "https://shopify.dev/docs/api/app-bridge",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "@shopify:registry": "https://registry.npmjs.org"
+  },
+  "engines": {
+    "node": "^20.11"
+  },
+  "sideEffects": false,
   "type": "module",
-  "main": "./dist/index.cjs",
-  "types": "./dist/index.d.ts",
-  "module": "./dist/index.js",
+  "main": "./build/cjs/index.cjs",
+  "types": "./build/types/esm/index.d.ts",
+  "module": "./build/esm/index.js",
+  "esnext": "./build/esnext/index.esnext",
   "exports": {
     ".": {
-      "module": "./dist/index.js",
+      "esnext": "./build/esnext/index.esnext",
       "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
+        "types": "./build/types/esm/index.d.ts",
+        "default": "./build/esm/index.js"
       },
       "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.cjs"
+        "types": "./build/types/cjs/index.d.cts",
+        "default": "./build/cjs/index.cjs"
+      }
+    },
+    "./*": {
+      "esnext": "./build/esnext/*.esnext",
+      "import": {
+        "types": "./build/types/esm/*.d.ts",
+        "default": "./build/esm/*.js"
       },
-      "default": "./dist/index.js"
+      "require": {
+        "types": "./build/types/cjs/*.d.cts",
+        "default": "./build/cjs/*.cjs"
+      }
     }
   },
   "files": [
-    "dist",
+    "build",
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@shopify/app-bridge-types": "0.0.17"
+    "@shopify/app-bridge-types": "0.0.18"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@types/react": "^18.2.42",
-    "@types/react-dom": "^18.2.17",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^5.3.3",
-    "vite": "^4.5.3",
-    "vite-plugin-dts": "^2.3.0",
-    "vitest": "^0.32.2"
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "*",
+    "react-dom": "*"
   },
   "scripts": {
     "build": "vite build",
-    "format": "prettier --write src/",
-    "lint": "oxlint src/*.{ts,tsx,js} -c .eslintrc.json",
-    "type-check": "tsc"
+    "watch": "vite build --watch --mode=development",
+    "test": "vitest run --passWithNoTests",
+    "type-check": "tsc --noEmit"
   }
 }