@membranehq/react 0.1.0

package/dist/esm/components/Textarea/recipe.mjs

@@ -0,0 +1,68 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import '../../styled-system/css/css.mjs';
+import { cva } from '../../styled-system/css/cva.mjs';
+import '../../styled-system/helpers.mjs';
+
+const textAreaRecipe = cva({
+  base: {
+    w: "full",
+    py: "2",
+    px: "4",
+    rounded: "sm",
+    transition: "all",
+    transitionDuration: "faster",
+    borderWidth: "1px",
+    borderColor: "transparent",
+    borderStyle: "solid",
+    bg: "transparent",
+    color: "black",
+    _focus: {
+      outline: "none"
+    },
+    _placeholder: {
+      color: "neutral.9"
+    },
+    _disabled: {
+      color: "neutral.8",
+      _placeholder: {
+        color: "neutral.7"
+      }
+    }
+  }
+});
+const textAreaWrapperRecipe = cva({
+  base: {
+    display: "grid",
+    w: "full",
+    overflowY: "hidden",
+    _after: {
+      content: "attr(data-replicated-value) ' '",
+      whiteSpace: "pre-wrap",
+      visibility: "hidden",
+      maxH: "var(--uikit-textarea-max-height, auto)",
+      rounded: "sm",
+      px: "4",
+      py: "2",
+      transition: "all",
+      transitionDuration: "faster",
+      borderWidth: "1px",
+      borderColor: "transparent",
+      borderStyle: "solid",
+      gridArea: "1 / 1 / 2 / 2"
+    },
+    "& > textarea": {
+      resize: "none",
+      overflow: "auto",
+      gridArea: "1 / 1 / 2 / 2"
+    }
+  }
+});
+
+export { textAreaRecipe, textAreaWrapperRecipe };

package/dist/esm/components/Toggle/index.mjs

@@ -0,0 +1,16 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { Switch } from '../../ui-kit/switch.mjs';
+
+function Toggle(props) {
+  return /* @__PURE__ */ jsx(Switch, { ...props, size: "md" });
+}
+
+export { Toggle };

package/dist/esm/components/Tooltip/index.mjs

@@ -0,0 +1,114 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { BoundedPortal } from '../FloatingPortalBoundary/index.mjs';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/helpers.mjs';
+import { sva } from '../../styled-system/css/sva.mjs';
+import { token } from '../../styled-system/tokens/index.mjs';
+import { Root, Trigger, Positioner, Content, Arrow, ArrowTip } from '../../ui-kit/styled/tooltip.mjs';
+
+const tooltipRecipe = sva({
+  className: "tooltip",
+  slots: ["content", "arrow-tip"],
+  base: {
+    content: {
+      shadow: "none",
+      fontWeight: "normal"
+    }
+  },
+  variants: {
+    type: {
+      default: {
+        content: {
+          background: "neutral.3",
+          rounded: "sm",
+          color: "black"
+        },
+        "arrow-tip": {
+          background: "neutral.3!"
+        }
+      },
+      dropdown: {
+        content: {
+          background: "black",
+          rounded: "xl",
+          color: "white",
+          fontWeight: "medium",
+          px: "2",
+          py: "1.5",
+          maxW: "full"
+        },
+        "arrow-tip": {
+          background: "black!"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    type: "default"
+  }
+});
+const Tooltip = forwardRef(
+  ({
+    tooltip,
+    placement = "right",
+    delayToShow = 300,
+    delayToHide = 50,
+    offset = [0, 6],
+    className,
+    children,
+    disabled,
+    withArrow = true,
+    type = "default",
+    usePortal = false,
+    id
+  }, ref) => {
+    const styles = tooltipRecipe({ type });
+    const [crossAxis, mainAxis] = offset;
+    return /* @__PURE__ */ jsxs(
+      Root,
+      {
+        lazyMount: true,
+        openDelay: delayToShow,
+        closeDelay: delayToHide,
+        positioning: {
+          offset: {
+            mainAxis,
+            crossAxis
+          },
+          placement
+        },
+        disabled,
+        ids: {
+          trigger: id
+        },
+        children: [
+          /* @__PURE__ */ jsx(Trigger, { asChild: true, children }),
+          /* @__PURE__ */ jsx(BoundedPortal, { usePortal, children: /* @__PURE__ */ jsx(Positioner, { className, ref, children: /* @__PURE__ */ jsxs(Content, { className: styles.content, children: [
+            withArrow && /* @__PURE__ */ jsx(
+              Arrow,
+              {
+                style: {
+                  // https://github.com/cschroeter/park-ui/issues/411
+                  "--arrow-size": token(`spacing.2`)
+                },
+                children: /* @__PURE__ */ jsx(ArrowTip, { className: styles["arrow-tip"] })
+              }
+            ),
+            tooltip
+          ] }) }) })
+        ]
+      }
+    );
+  }
+);
+
+export { Tooltip };

package/dist/esm/components/Truncate/index.mjs

@@ -0,0 +1,51 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { useIsTextTruncated } from '../../helpers/hooks/useIsTextTruncated.mjs';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/helpers.mjs';
+import '../../styled-system/jsx/is-valid-prop.mjs';
+import { Box } from '../../styled-system/jsx/box.mjs';
+import '../../styled-system/patterns/visually-hidden.mjs';
+import { Tooltip } from '../Tooltip/index.mjs';
+
+function Truncate({
+  children,
+  endLetters = 5,
+  className,
+  id,
+  placement,
+  offset,
+  usePortal,
+  tooltipBuilder = (children2) => children2,
+  ...rest
+}) {
+  const overflowContainer = useRef(null);
+  const isTruncated = useIsTextTruncated(overflowContainer);
+  if (typeof children !== "string" || children.length < endLetters) {
+    return className ? /* @__PURE__ */ jsx("span", { className, id, ...rest, children }) : /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      disabled: !isTruncated,
+      tooltip: tooltipBuilder(children),
+      type: "dropdown",
+      withArrow: false,
+      placement,
+      offset,
+      usePortal,
+      id,
+      children: /* @__PURE__ */ jsx(Box, { ref: overflowContainer, className, truncate: true, ...rest, children })
+    }
+  );
+}
+
+export { Truncate };

package/dist/esm/contexts/integration-app-client-context.mjs

@@ -0,0 +1,25 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { useContext, createContext } from 'react';
+
+const IntegrationAppClientContext = createContext({
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'Integration... Remove this comment to see the full error message
+  client: null
+});
+IntegrationAppClientContext.displayName = "IntegrationAppClientContext";
+const IntegrationAppClientProvider = ({ client, children }) => {
+  return /* @__PURE__ */ jsx(IntegrationAppClientContext.Provider, { value: { client }, children });
+};
+function useIntegrationAppClient() {
+  return useContext(IntegrationAppClientContext);
+}
+
+export { IntegrationAppClientProvider, useIntegrationAppClient };

package/dist/esm/contexts/integration-app-connection-context.mjs

@@ -0,0 +1,26 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { useContext, createContext, useMemo } from 'react';
+
+const IntegrationAppConnectionContext = createContext({
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'string'.
+  connectionId: null
+});
+IntegrationAppConnectionContext.displayName = "IntegrationAppConnectionContext";
+const IntegrationAppConnectionProvider = ({ connectionId, children }) => {
+  const value = useMemo(() => ({ connectionId }), [connectionId]);
+  return /* @__PURE__ */ jsx(IntegrationAppConnectionContext.Provider, { value, children });
+};
+function useIntegrationAppConnection() {
+  return useContext(IntegrationAppConnectionContext);
+}
+
+export { IntegrationAppConnectionProvider, useIntegrationAppConnection };

package/dist/esm/contexts/integration-app-context.mjs

@@ -0,0 +1,45 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useMemo } from 'react';
+import { IntegrationAppClient } from '@membranehq/sdk';
+
+const IntegrationAppContext = createContext(null);
+IntegrationAppContext.displayName = "IntegrationAppClientContext";
+const IntegrationAppProvider = ({
+  token,
+  fetchToken,
+  credentials,
+  fetchCredentials,
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'string'.
+  apiUri = null,
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'string'.
+  uiUri = null,
+  children
+}) => {
+  const client = useMemo(
+    () => new IntegrationAppClient({
+      token,
+      fetchToken,
+      credentials,
+      fetchCredentials,
+      apiUri,
+      uiUri
+    }),
+    [token, JSON.stringify(credentials), apiUri, uiUri]
+  );
+  return /* @__PURE__ */ jsx(IntegrationAppContext.Provider, { value: client, children });
+};
+function useIntegrationApp() {
+  return useContext(IntegrationAppContext);
+}
+
+export { IntegrationAppProvider, useIntegrationApp };

package/dist/esm/contexts/integration-app-integration-context.mjs

@@ -0,0 +1,26 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { useContext, createContext, useMemo } from 'react';
+
+const IntegrationAppIntegrationContext = createContext({
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type... Remove this comment to see the full error message
+  integrationId: null
+});
+IntegrationAppIntegrationContext.displayName = "IntegrationAppIntegrationContext";
+const IntegrationAppIntegrationProvider = ({ integrationId, children }) => {
+  const value = useMemo(() => ({ integrationId }), [integrationId]);
+  return /* @__PURE__ */ jsx(IntegrationAppIntegrationContext.Provider, { value, children });
+};
+function useIntegrationAppIntegration() {
+  return useContext(IntegrationAppIntegrationContext);
+}
+
+export { IntegrationAppIntegrationProvider, useIntegrationAppIntegration };

package/dist/esm/helpers/getRefElement.mjs

@@ -0,0 +1,20 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+function getRefElement(ref) {
+  if (!ref) return null;
+  if (isRefObject(ref)) {
+    return ref.current ?? null;
+  }
+  return ref;
+}
+function isRefObject(ref) {
+  return !!ref ? typeof ref === "object" && "current" in ref : false;
+}
+
+export { getRefElement };

package/dist/esm/helpers/hooks/keyboard-events.mjs

@@ -0,0 +1,133 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { DROPDOWN_NAVIGATOR_ID, DROPDOWN_SEARCH_INPUT_ID } from '../../components/DropdownUI/constants.mjs';
+
+var EVENT_TYPE = /* @__PURE__ */ ((EVENT_TYPE2) => {
+  EVENT_TYPE2["OPTION_DOWN"] = "option_down";
+  EVENT_TYPE2["OPTION_UP"] = "option_up";
+  EVENT_TYPE2["OPTION_RIGHT"] = "option_right";
+  EVENT_TYPE2["OPTION_LEFT"] = "option_left";
+  EVENT_TYPE2["OPTION_SELECT"] = "option_select";
+  EVENT_TYPE2["FORM_SUBMIT"] = "form_submit";
+  return EVENT_TYPE2;
+})(EVENT_TYPE || {});
+const eventEmitter = {
+  _events: {
+    ["option_down" /* OPTION_DOWN */]: {},
+    ["option_up" /* OPTION_UP */]: {},
+    ["option_right" /* OPTION_RIGHT */]: {},
+    ["option_left" /* OPTION_LEFT */]: {},
+    ["option_select" /* OPTION_SELECT */]: {},
+    ["form_submit" /* FORM_SUBMIT */]: {}
+  },
+  _isExist(event, scopedComboboxId) {
+    return !!this?._events?.[event]?.[scopedComboboxId];
+  },
+  dispatch(event, scopedComboboxId) {
+    if (!this._isExist(event, scopedComboboxId)) return;
+    this._events[event][scopedComboboxId].forEach((callback) => callback(scopedComboboxId));
+  },
+  subscribe(event, scopedComboboxId, callback) {
+    if (!this._isExist(event, scopedComboboxId)) {
+      this._events[event][scopedComboboxId] = [];
+    }
+    if (callback) {
+      this._events[event][scopedComboboxId].push(callback);
+    }
+  },
+  unsubscribe(event, scopedComboboxId, callback) {
+    if (!this._isExist(event, scopedComboboxId)) return;
+    if (callback) {
+      this._events[event][scopedComboboxId] = this._events[event][scopedComboboxId].filter(
+        (cb) => cb !== callback
+      );
+    }
+  }
+};
+function useOptionListKeyNavDispatch(ref = null, scopedComboboxId) {
+  return useKeyPressDispatch(ref, (e) => handleOptionListKeyNavigation(e, scopedComboboxId));
+}
+function useKeyPressDispatch(ref, handler = () => {
+}) {
+  const savedHandler = useRef(handler);
+  const targetElement = ref instanceof Element ? ref : ref?.current;
+  return useEffect(() => {
+    if (!targetElement || !targetElement?.addEventListener) {
+      return () => {
+      };
+    }
+    targetElement.addEventListener("keydown", savedHandler.current);
+    return () => {
+      targetElement.removeEventListener("keydown", savedHandler.current);
+    };
+  }, [targetElement, savedHandler]);
+}
+function useKeyboardEventSubscribe({
+  scopedComboboxId,
+  event,
+  callback
+}) {
+  return useEffect(() => {
+    eventEmitter.subscribe(event, scopedComboboxId, callback);
+    return () => {
+      eventEmitter.unsubscribe(event, scopedComboboxId, callback);
+    };
+  }, [event, callback]);
+}
+const dispatch = (event, scopedComboboxId) => eventEmitter.dispatch(event, scopedComboboxId);
+const handleOptionListKeyNavigation = (e, scopedComboboxId) => {
+  if (!(e.target instanceof HTMLElement)) {
+    return;
+  }
+  const targetId = e.target.getAttribute("data-navigation-emitter-id") || "";
+  const allowedTargets = [DROPDOWN_NAVIGATOR_ID, DROPDOWN_SEARCH_INPUT_ID];
+  if (!allowedTargets.includes(targetId)) {
+    return;
+  }
+  switch (e.key) {
+    case "Enter":
+      if (!e.shiftKey) {
+        dispatch("option_select" /* OPTION_SELECT */, scopedComboboxId);
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      break;
+    case "ArrowUp":
+      dispatch("option_down" /* OPTION_DOWN */, scopedComboboxId);
+      break;
+    case "ArrowDown":
+      dispatch("option_up" /* OPTION_UP */, scopedComboboxId);
+      break;
+    case "ArrowRight":
+      if (canHandleHorizontalNavigation(e.target)) {
+        dispatch("option_right" /* OPTION_RIGHT */, scopedComboboxId);
+      }
+      break;
+    case "ArrowLeft":
+      if (canHandleHorizontalNavigation(e.target)) {
+        dispatch("option_left" /* OPTION_LEFT */, scopedComboboxId);
+      }
+      break;
+  }
+};
+const canHandleHorizontalNavigation = (target) => {
+  const targetId = target.getAttribute("data-navigation-emitter-id") || "";
+  if (targetId === DROPDOWN_NAVIGATOR_ID) {
+    return true;
+  }
+  const isInput = target instanceof HTMLInputElement;
+  if (!isInput) {
+    return true;
+  }
+  const hasValue = !!target.value;
+  return targetId === DROPDOWN_SEARCH_INPUT_ID && !hasValue;
+};
+
+export { EVENT_TYPE, useKeyboardEventSubscribe, useOptionListKeyNavDispatch };

package/dist/esm/helpers/hooks/useDeepEffect.mjs

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { useEffect, useRef } from 'react';
+import deepEqual from 'fast-deep-equal';
+
+const isPrimitive = (value) => ["number", "string", "boolean"].includes(typeof value);
+const warnDeps = (dependencies) => {
+  if (dependencies.length === 0) {
+    console.warn("useDeepEffect should not be used with no dependencies. Use useEffect instead.");
+  }
+  if (dependencies.every(isPrimitive)) {
+    console.warn("useDeepEffect should not be used with primitive values. Use useEffect instead.");
+  }
+};
+const getTriggerDeps = (dependencies, comparisonFn) => {
+  const ref = useRef();
+  const triggerDeps = useRef(0);
+  if (!comparisonFn(dependencies, ref.current)) {
+    ref.current = dependencies;
+    triggerDeps.current = Math.random();
+  }
+  return [triggerDeps.current];
+};
+const useDeepEffect = (fn, dependencies = [], comparisonFn = deepEqual) => {
+  warnDeps(dependencies);
+  return useEffect(fn, getTriggerDeps(dependencies, comparisonFn));
+};
+
+export { useDeepEffect };

package/dist/esm/helpers/hooks/useEventStopPropagation.mjs

@@ -0,0 +1,22 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+function useEventStopPropagation(fn) {
+  if (!fn) return void 0;
+  return function(event) {
+    const isClickOnLink = !!event.target.closest("a");
+    if (!isClickOnLink) {
+      event?.preventDefault?.();
+    }
+    event?.stopPropagation?.();
+    event?.nativeEvent?.stopImmediatePropagation?.();
+    if (typeof fn === "function") fn?.(event);
+  };
+}
+
+export { useEventStopPropagation as default };

package/dist/esm/helpers/hooks/useForwardedRef.mjs

@@ -0,0 +1,24 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { useRef, useEffect } from 'react';
+
+function useForwardedRef(ref) {
+  const innerRef = useRef(null);
+  useEffect(() => {
+    if (!ref) return;
+    if (typeof ref === "function") {
+      ref(innerRef.current);
+    } else {
+      ref.current = innerRef.current;
+    }
+  }, []);
+  return innerRef;
+}
+
+export { useForwardedRef };

package/dist/esm/helpers/hooks/useIsTextTruncated.mjs

@@ -0,0 +1,49 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { useState, useLayoutEffect } from 'react';
+import useResizeObserver from './useResizeObserver.mjs';
+
+const useIsTextTruncated = (ref) => {
+  const [isTruncated, setIsTruncated] = useState(false);
+  useResizeObserver(ref, () => {
+    isTruncatedCb(ref.current, setIsTruncated);
+  });
+  useLayoutEffect(() => {
+    isTruncatedCb(ref.current, setIsTruncated);
+  }, [ref]);
+  return isTruncated;
+};
+function isTruncatedCb(el, callback) {
+  if (!el) return;
+  const isTruncated = isEllipsisActive(el);
+  callback?.(isTruncated);
+}
+function isEllipsisActive(el) {
+  return el.scrollWidth !== el.offsetWidth ? el.scrollWidth > el.offsetWidth : checkRanges(el);
+}
+function checkRanges(el) {
+  const range = new Range();
+  range.selectNodeContents(el);
+  const range_rect = range.getBoundingClientRect();
+  const el_rect = el.getBoundingClientRect();
+  if (range_rect.right > el_rect.right) {
+    return true;
+  }
+  const textOverflowPropName = "text-overflow";
+  const elTextOverflow = el.style.getPropertyValue(textOverflowPropName);
+  const elTextOverflowPriority = el.style.getPropertyPriority(textOverflowPropName);
+  el.style.setProperty(textOverflowPropName, "ellipsis", "important");
+  const rects_ellipsis = range.getClientRects();
+  el.style.setProperty(textOverflowPropName, "clip", "important");
+  const rects_clipped = range.getClientRects();
+  el.style.setProperty(textOverflowPropName, elTextOverflow, elTextOverflowPriority);
+  return rects_clipped.length !== rects_ellipsis.length;
+}
+
+export { useIsTextTruncated };