Merge branch 'main' into react-native-sdk-client-header

Author: roncohen

.github/workflows/publish.yml

@@ -5,10 +5,6 @@ on:
     branches:
       - main
 
-permissions:
-  id-token: write # Required publishing to npm using OIDC
-  contents: read
-
 jobs:
   release:
     runs-on: ubuntu-latest
@@ -20,27 +16,30 @@ jobs:
       # Setup .npmrc file to publish to npm
       - name: Enable corepack
         run: corepack enable
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
           node-version-file: ".nvmrc"
           cache: "yarn"
           cache-dependency-path: "**/yarn.lock"
           registry-url: "https://registry.npmjs.org"
           scope: "@reflag"
-      - name: update npm - remove this once we upgrade Node.js
-        run: npm install -g npm@11.8.0
-      - name: npm version
-        run: npm version
       - name: Install dependencies
         run: yarn install --immutable
       - name: Build packages
         run: yarn build
       - name: Publish
-        run: yarn lerna publish from-package --no-private --yes
-        env:
-          NODE_AUTH_TOKEN: ""
-          NPM_CONFIG_PROVENANCE: "true"
-          NPM_CONFIG_ACCESS: "public"
+        run: |
+          yarn lerna list --since --parseable --no-private | while read -r pkg; do
+            name=$(node -p "require('$pkg/package.json').name")
+            version=$(node -p "require('$pkg/package.json').version")
+            published=$(npm view "$name" version --json 2>/dev/null || echo "")
+            if [ "$published" = "\"$version\"" ]; then
+              echo "SKIP $name@$version"
+            else
+              echo "PUBLISH $name@$version (registry has $published)"
+              (cd "$pkg" && npm publish --access public --provenance)
+            fi
+          done
       - name: Build docs
         run: yarn docs
       - name: Checkout docs with SSH

README.md

@@ -8,6 +8,12 @@ Client side React SDK
 
 [Read the docs](packages/react-sdk/README.md)
 
+## React Native SDK (beta)
+
+React Native SDK for mobile apps
+
+[Read the docs](packages/react-native-sdk/README.md)
+
 ## Vue SDK (beta)
 
 Client side Vue SDK

packages/browser-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reflag/browser-sdk",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "packageManager": "yarn@4.1.1",
   "license": "MIT",
   "repository": {

packages/browser-sdk/src/feedback/ui/FeedbackDialog.css

@@ -1,6 +1,7 @@
 .dialog {
   position: fixed;
   width: 210px;
+  overflow: visible;
   padding: 16px 22px 10px;
   font-size: var(--reflag-feedback-dialog-font-size, 1rem);
   font-family: var(

packages/browser-sdk/src/feedback/ui/index.ts

@@ -11,6 +11,14 @@ export const DEFAULT_POSITION: Position = {
   placement: "bottom-right",
 };
 
+function supportsPopoverApi() {
+  return (
+    typeof HTMLElement !== "undefined" &&
+    "showPopover" in HTMLElement.prototype &&
+    "hidePopover" in HTMLElement.prototype
+  );
+}
+
 function stopPropagation(e: Event) {
   e.stopPropagation();
 }
@@ -39,9 +47,18 @@ function attachDialogContainer() {
 let openInstances = 0;
 
 export function openFeedbackForm(options: OpenFeedbackFormOptions): void {
-  const shadowRoot = attachDialogContainer();
   const position = options.position || DEFAULT_POSITION;
 
+  if (position.type !== "MODAL" && !supportsPopoverApi()) {
+    console.warn(
+      "[Reflag]",
+      "Unable to open feedback popup. Popover API is not supported in this browser",
+    );
+    return;
+  }
+
+  const shadowRoot = attachDialogContainer();
+
   if (position.type === "POPOVER") {
     if (!position.anchor) {
       console.warn(

packages/browser-sdk/src/ui/Dialog.css

@@ -42,7 +42,7 @@
   margin: auto;
   margin-top: 4rem;
 
-  &[open] {
+  &.open {
     animation: /* easeOutQuint */
       scale 100ms cubic-bezier(0.22, 1, 0.36, 1),
       fade 100ms cubic-bezier(0.22, 1, 0.36, 1);
@@ -59,7 +59,7 @@
   position: absolute;
   margin: 0;
 
-  &[open] {
+  &.open {
     animation: /* easeOutQuint */
       scale 100ms cubic-bezier(0.22, 1, 0.36, 1),
       fade 100ms cubic-bezier(0.22, 1, 0.36, 1);
@@ -92,7 +92,7 @@
 
 /* Unanchored */
 
-.dialog[open].unanchored {
+.dialog.open.unanchored {
   &.unanchored-bottom-left,
   &.unanchored-bottom-right {
     animation: /* easeOutQuint */

packages/browser-sdk/src/ui/Dialog.tsx

@@ -81,7 +81,7 @@ export const Dialog: FunctionComponent<OpenDialogOptions> = ({
   showArrow = true,
 }) => {
   const arrowRef = useRef<HTMLDivElement>(null);
-  const dialogRef = useRef<HTMLDialogElement>(null);
+  const dialogRef = useRef<HTMLElement>(null);
 
   const anchor = position.type === "POPOVER" ? position.anchor : null;
   const placement =
@@ -173,23 +173,56 @@ export const Dialog: FunctionComponent<OpenDialogOptions> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- anchor only exists in popover
   }, [position.type, close, (position as any).anchor, dismiss, containerId]);
 
-  function setDiagRef(node: HTMLDialogElement | null) {
+  function setDiagRef(node: HTMLElement | null) {
     refs.setFloating(node);
     dialogRef.current = node;
   }
 
   useEffect(() => {
     if (!dialogRef.current) return;
-    if (isOpen && !dialogRef.current.hasAttribute("open")) {
-      dialogRef.current[position.type === "MODAL" ? "showModal" : "show"]();
+
+    const isPopoverOpen = () => {
+      try {
+        return dialogRef.current?.matches(":popover-open") ?? false;
+      } catch {
+        return false;
+      }
+    };
+
+    const isModalOpen =
+      dialogRef.current instanceof HTMLDialogElement &&
+      dialogRef.current.hasAttribute("open");
+
+    if (
+      isOpen &&
+      ((position.type === "MODAL" && !isModalOpen) ||
+        (position.type !== "MODAL" && !isPopoverOpen()))
+    ) {
+      if (
+        position.type === "MODAL" &&
+        dialogRef.current instanceof HTMLDialogElement
+      ) {
+        dialogRef.current.showModal();
+      } else {
+        dialogRef.current.showPopover();
+      }
     }
-    if (!isOpen && dialogRef.current.hasAttribute("open")) {
-      dialogRef.current.close();
+    if (!isOpen) {
+      if (
+        position.type === "MODAL" &&
+        dialogRef.current instanceof HTMLDialogElement &&
+        dialogRef.current.hasAttribute("open")
+      ) {
+        dialogRef.current.close();
+      } else if (position.type !== "MODAL" && isPopoverOpen()) {
+        dialogRef.current.hidePopover();
+      }
     }
   }, [dialogRef, isOpen, position.type]);
 
   const classes = [
     "dialog",
+    isOpen ? "open" : "",
     position.type === "MODAL"
       ? "modal"
       : position.type === "POPOVER"
@@ -201,21 +234,40 @@ export const Dialog: FunctionComponent<OpenDialogOptions> = ({
   return (
     <>
       <style dangerouslySetInnerHTML={{ __html: styles }} />
-      <dialog
-        ref={setDiagRef}
-        class={classes}
-        style={anchor ? floatingStyles : unanchoredPosition}
-      >
-        {children && <Fragment>{children}</Fragment>}
-
-        {anchor && showArrow && (
-          <DialogArrow
-            arrowData={middlewareData?.arrow}
-            arrowRef={arrowRef}
-            placement={actualPlacement}
-          />
-        )}
-      </dialog>
+      {position.type === "MODAL" ? (
+        <dialog
+          ref={setDiagRef}
+          class={classes}
+          style={anchor ? floatingStyles : unanchoredPosition}
+        >
+          {children && <Fragment>{children}</Fragment>}
+
+          {anchor && showArrow && (
+            <DialogArrow
+              arrowData={middlewareData?.arrow}
+              arrowRef={arrowRef}
+              placement={actualPlacement}
+            />
+          )}
+        </dialog>
+      ) : (
+        <div
+          ref={setDiagRef}
+          class={classes}
+          style={anchor ? floatingStyles : unanchoredPosition}
+          popover="manual"
+        >
+          {children && <Fragment>{children}</Fragment>}
+
+          {anchor && showArrow && (
+            <DialogArrow
+              arrowData={middlewareData?.arrow}
+              arrowRef={arrowRef}
+              placement={actualPlacement}
+            />
+          )}
+        </div>
+      )}
     </>
   );
 };