@shopify/app-bridge-react 4.1.7 → 4.1.9

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 4.1.9
+
+### Patch Changes
+
+- [#383](https://github.com/Shopify/extensibility/pull/383) [`699da8fa064a60883caea326804b0a5b309e5c00`](https://github.com/Shopify/extensibility/commit/699da8fa064a60883caea326804b0a5b309e5c00) Thanks [@henrytao-me](https://github.com/henrytao-me)! - Fix build tools for app-bridge-react and all extensibility packages to support both ESM and CommonJS build output
+
+## 4.1.8
+
+### Patch Changes
+
+- [#325](https://github.com/Shopify/extensibility/pull/325) [`dfac2e4a775102b81488155dc4b00c8132988a22`](https://github.com/Shopify/extensibility/commit/dfac2e4a775102b81488155dc4b00c8132988a22) Thanks [@elanalynn](https://github.com/elanalynn)! - Expose ResourcePicker and Toast types
+
+- Updated dependencies [[`dfac2e4a775102b81488155dc4b00c8132988a22`](https://github.com/Shopify/extensibility/commit/dfac2e4a775102b81488155dc4b00c8132988a22)]:
+  - @shopify/app-bridge-types@0.0.18
+
 ## 4.1.7
 
 ### Patch Changes

package/build/cjs/components/Modal.cjs

@@ -0,0 +1,104 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var ReactDOM = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
+
+/**
+ * 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}
+ */
+const Modal = /*#__PURE__*/react.forwardRef(function InternalModal({
+  open,
+  onShow,
+  onHide,
+  children,
+  ...rest
+}, forwardedRef) {
+  const [modal, setModal] = react.useState();
+  const {
+    titleBar,
+    saveBar,
+    modalContent
+  } = react.Children.toArray(children).reduce((acc, node) => {
+    const nodeName = getNodeName(node);
+    const isTitleBar = nodeName === 'ui-title-bar';
+    const isSaveBar = nodeName === 'ui-save-bar';
+    const belongToModalContent = !isTitleBar && !isSaveBar;
+    if (belongToModalContent) {
+      acc.modalContent.push(node);
+    }
+    return {
+      ...acc,
+      titleBar: isTitleBar ? node : acc.titleBar,
+      saveBar: isSaveBar ? node : acc.saveBar
+    };
+  }, {
+    modalContent: []
+  });
+  const contentPortal = modal && modal.content ? /*#__PURE__*/ReactDOM__default.default.createPortal(modalContent, modal.content) : null;
+  react.useEffect(() => {
+    if (!modal) return;
+    if (open) {
+      modal.show();
+    } else {
+      modal.hide();
+    }
+  }, [modal, open]);
+  react.useEffect(() => {
+    if (!modal || !onShow) return;
+    modal.addEventListener('show', onShow);
+    return () => {
+      modal.removeEventListener('show', onShow);
+    };
+  }, [modal, onShow]);
+  react.useEffect(() => {
+    if (!modal || !onHide) return;
+    modal.addEventListener('hide', onHide);
+    return () => {
+      modal.removeEventListener('hide', onHide);
+    };
+  }, [modal, onHide]);
+  react.useEffect(() => {
+    if (!modal) return;
+    return () => {
+      modal.hide();
+    };
+  }, [modal]);
+  return /*#__PURE__*/jsxRuntime.jsxs("ui-modal", {
+    ...rest,
+    ref: modal => {
+      setModal(modal);
+      if (forwardedRef) {
+        if (typeof forwardedRef === 'function') {
+          forwardedRef(modal);
+        } else {
+          forwardedRef.current = modal;
+        }
+      }
+    },
+    children: [titleBar, saveBar, /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: contentPortal
+    })]
+  });
+});
+Modal.displayName = 'ui-modal';
+function getNodeName(node) {
+  if (!node) return;
+  const rawNodeType = typeof node === 'object' && 'type' in node ? node.type : undefined;
+  const nodeType = typeof rawNodeType === 'string' ? rawNodeType : undefined;
+  const rawDisplayName = typeof rawNodeType === 'object' ? rawNodeType.displayName : undefined;
+  const displayName = typeof rawDisplayName === 'string' ? rawDisplayName : undefined;
+  return nodeType || displayName;
+}
+
+exports.Modal = Modal;

package/build/cjs/components/NavMenu.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 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}
+ */
+const NavMenu = 'ui-nav-menu';
+
+exports.NavMenu = NavMenu;

package/build/cjs/components/SaveBar.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var jsxRuntime = require('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__*/react.forwardRef(function InternalSaveBar({
+  open,
+  onShow,
+  onHide,
+  children,
+  ...rest
+}, forwardedRef) {
+  const [saveBar, setSaveBar] = react.useState();
+  react.useEffect(() => {
+    if (!saveBar) return;
+    if (open) {
+      saveBar.show();
+    } else {
+      saveBar.hide();
+    }
+  }, [saveBar, open]);
+  react.useEffect(() => {
+    if (!saveBar || !onShow) return;
+    saveBar.addEventListener('show', onShow);
+    return () => {
+      saveBar.removeEventListener('show', onShow);
+    };
+  }, [saveBar, onShow]);
+  react.useEffect(() => {
+    if (!saveBar || !onHide) return;
+    saveBar.addEventListener('hide', onHide);
+    return () => {
+      saveBar.removeEventListener('hide', onHide);
+    };
+  }, [saveBar, onHide]);
+  react.useEffect(() => {
+    if (!saveBar) return;
+    return () => {
+      saveBar.hide();
+    };
+  }, [saveBar]);
+  return /*#__PURE__*/jsxRuntime.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';
+
+exports.SaveBar = SaveBar;

package/build/cjs/components/TitleBar.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 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';
+
+exports.TitleBar = TitleBar;

package/build/cjs/hooks/useAppBridge.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 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;
+}
+
+exports.useAppBridge = useAppBridge;

package/build/cjs/index.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_Modal = require('./components/Modal.cjs');
+var components_NavMenu = require('./components/NavMenu.cjs');
+var components_TitleBar = require('./components/TitleBar.cjs');
+var components_SaveBar = require('./components/SaveBar.cjs');
+var hooks_useAppBridge = require('./hooks/useAppBridge.cjs');
+
+
+
+exports.Modal = components_Modal.Modal;
+exports.NavMenu = components_NavMenu.NavMenu;
+exports.TitleBar = components_TitleBar.TitleBar;
+exports.SaveBar = components_SaveBar.SaveBar;
+exports.useAppBridge = hooks_useAppBridge.useAppBridge;

package/build/esm/components/Modal.js

@@ -0,0 +1,96 @@
+import { forwardRef, useState, Children, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * 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}
+ */
+const Modal = /*#__PURE__*/forwardRef(function InternalModal({
+  open,
+  onShow,
+  onHide,
+  children,
+  ...rest
+}, forwardedRef) {
+  const [modal, setModal] = useState();
+  const {
+    titleBar,
+    saveBar,
+    modalContent
+  } = Children.toArray(children).reduce((acc, node) => {
+    const nodeName = getNodeName(node);
+    const isTitleBar = nodeName === 'ui-title-bar';
+    const isSaveBar = nodeName === 'ui-save-bar';
+    const belongToModalContent = !isTitleBar && !isSaveBar;
+    if (belongToModalContent) {
+      acc.modalContent.push(node);
+    }
+    return {
+      ...acc,
+      titleBar: isTitleBar ? node : acc.titleBar,
+      saveBar: isSaveBar ? node : acc.saveBar
+    };
+  }, {
+    modalContent: []
+  });
+  const contentPortal = modal && modal.content ? /*#__PURE__*/ReactDOM.createPortal(modalContent, modal.content) : null;
+  useEffect(() => {
+    if (!modal) return;
+    if (open) {
+      modal.show();
+    } else {
+      modal.hide();
+    }
+  }, [modal, open]);
+  useEffect(() => {
+    if (!modal || !onShow) return;
+    modal.addEventListener('show', onShow);
+    return () => {
+      modal.removeEventListener('show', onShow);
+    };
+  }, [modal, onShow]);
+  useEffect(() => {
+    if (!modal || !onHide) return;
+    modal.addEventListener('hide', onHide);
+    return () => {
+      modal.removeEventListener('hide', onHide);
+    };
+  }, [modal, onHide]);
+  useEffect(() => {
+    if (!modal) return;
+    return () => {
+      modal.hide();
+    };
+  }, [modal]);
+  return /*#__PURE__*/jsxs("ui-modal", {
+    ...rest,
+    ref: modal => {
+      setModal(modal);
+      if (forwardedRef) {
+        if (typeof forwardedRef === 'function') {
+          forwardedRef(modal);
+        } else {
+          forwardedRef.current = modal;
+        }
+      }
+    },
+    children: [titleBar, saveBar, /*#__PURE__*/jsx("div", {
+      children: contentPortal
+    })]
+  });
+});
+Modal.displayName = 'ui-modal';
+function getNodeName(node) {
+  if (!node) return;
+  const rawNodeType = typeof node === 'object' && 'type' in node ? node.type : undefined;
+  const nodeType = typeof rawNodeType === 'string' ? rawNodeType : undefined;
+  const rawDisplayName = typeof rawNodeType === 'object' ? rawNodeType.displayName : undefined;
+  const displayName = typeof rawDisplayName === 'string' ? rawDisplayName : undefined;
+  return nodeType || displayName;
+}
+
+export { Modal };

package/build/esm/components/NavMenu.js

@@ -0,0 +1,9 @@
+/**
+ * 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}
+ */
+const NavMenu = 'ui-nav-menu';
+
+export { NavMenu };

package/build/esm/components/SaveBar.js

@@ -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/esm/components/TitleBar.js

@@ -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/esm/hooks/useAppBridge.js

@@ -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/esm/index.js

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

package/build/esnext/components/Modal.esnext

@@ -0,0 +1,96 @@
+import { forwardRef, useState, Children, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * 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}
+ */
+const Modal = /*#__PURE__*/forwardRef(function InternalModal({
+  open,
+  onShow,
+  onHide,
+  children,
+  ...rest
+}, forwardedRef) {
+  const [modal, setModal] = useState();
+  const {
+    titleBar,
+    saveBar,
+    modalContent
+  } = Children.toArray(children).reduce((acc, node) => {
+    const nodeName = getNodeName(node);
+    const isTitleBar = nodeName === 'ui-title-bar';
+    const isSaveBar = nodeName === 'ui-save-bar';
+    const belongToModalContent = !isTitleBar && !isSaveBar;
+    if (belongToModalContent) {
+      acc.modalContent.push(node);
+    }
+    return {
+      ...acc,
+      titleBar: isTitleBar ? node : acc.titleBar,
+      saveBar: isSaveBar ? node : acc.saveBar
+    };
+  }, {
+    modalContent: []
+  });
+  const contentPortal = modal && modal.content ? /*#__PURE__*/ReactDOM.createPortal(modalContent, modal.content) : null;
+  useEffect(() => {
+    if (!modal) return;
+    if (open) {
+      modal.show();
+    } else {
+      modal.hide();
+    }
+  }, [modal, open]);
+  useEffect(() => {
+    if (!modal || !onShow) return;
+    modal.addEventListener('show', onShow);
+    return () => {
+      modal.removeEventListener('show', onShow);
+    };
+  }, [modal, onShow]);
+  useEffect(() => {
+    if (!modal || !onHide) return;
+    modal.addEventListener('hide', onHide);
+    return () => {
+      modal.removeEventListener('hide', onHide);
+    };
+  }, [modal, onHide]);
+  useEffect(() => {
+    if (!modal) return;
+    return () => {
+      modal.hide();
+    };
+  }, [modal]);
+  return /*#__PURE__*/jsxs("ui-modal", {
+    ...rest,
+    ref: modal => {
+      setModal(modal);
+      if (forwardedRef) {
+        if (typeof forwardedRef === 'function') {
+          forwardedRef(modal);
+        } else {
+          forwardedRef.current = modal;
+        }
+      }
+    },
+    children: [titleBar, saveBar, /*#__PURE__*/jsx("div", {
+      children: contentPortal
+    })]
+  });
+});
+Modal.displayName = 'ui-modal';
+function getNodeName(node) {
+  if (!node) return;
+  const rawNodeType = typeof node === 'object' && 'type' in node ? node.type : undefined;
+  const nodeType = typeof rawNodeType === 'string' ? rawNodeType : undefined;
+  const rawDisplayName = typeof rawNodeType === 'object' ? rawNodeType.displayName : undefined;
+  const displayName = typeof rawDisplayName === 'string' ? rawDisplayName : undefined;
+  return nodeType || displayName;
+}
+
+export { Modal };

package/build/esnext/components/NavMenu.esnext

@@ -0,0 +1,9 @@
+/**
+ * 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}
+ */
+const NavMenu = 'ui-nav-menu';
+
+export { NavMenu };