@membranehq/react 0.1.0

package/dist/cjs/helpers/hooks/keyboard-events.cjs

@@ -0,0 +1,137 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var React = require('react');
+var constants = require('../../components/DropdownUI/constants.cjs');
+
+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 = React.useRef(handler);
+  const targetElement = ref instanceof Element ? ref : ref?.current;
+  return React.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 React.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 = [constants.DROPDOWN_NAVIGATOR_ID, constants.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 === constants.DROPDOWN_NAVIGATOR_ID) {
+    return true;
+  }
+  const isInput = target instanceof HTMLInputElement;
+  if (!isInput) {
+    return true;
+  }
+  const hasValue = !!target.value;
+  return targetId === constants.DROPDOWN_SEARCH_INPUT_ID && !hasValue;
+};
+
+exports.EVENT_TYPE = EVENT_TYPE;
+exports.useKeyboardEventSubscribe = useKeyboardEventSubscribe;
+exports.useOptionListKeyNavDispatch = useOptionListKeyNavDispatch;

package/dist/cjs/helpers/hooks/useDeepEffect.cjs

@@ -0,0 +1,37 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var React = require('react');
+var deepEqual = require('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 = React.useRef();
+  const triggerDeps = React.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 React.useEffect(fn, getTriggerDeps(dependencies, comparisonFn));
+};
+
+exports.useDeepEffect = useDeepEffect;

package/dist/cjs/helpers/hooks/useEventStopPropagation.cjs

@@ -0,0 +1,26 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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);
+  };
+}
+
+exports.default = useEventStopPropagation;

package/dist/cjs/helpers/hooks/useForwardedRef.cjs

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

package/dist/cjs/helpers/hooks/useIsTextTruncated.cjs

@@ -0,0 +1,51 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var React = require('react');
+var useResizeObserver = require('./useResizeObserver.cjs');
+
+const useIsTextTruncated = (ref) => {
+  const [isTruncated, setIsTruncated] = React.useState(false);
+  useResizeObserver.default(ref, () => {
+    isTruncatedCb(ref.current, setIsTruncated);
+  });
+  React.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;
+}
+
+exports.useIsTextTruncated = useIsTextTruncated;

package/dist/cjs/helpers/hooks/useResizeObserver.cjs

@@ -0,0 +1,51 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var getRefElement = require('../getRefElement.cjs');
+
+function useResizeObserver(ref, callback) {
+  const [prevWidth, setPrevWidth] = React.useState(0);
+  const [prevHeight, setPrevHeight] = React.useState(0);
+  React.useLayoutEffect(() => {
+    const target = getRefElement.getRefElement(ref);
+    if (!target) return () => {
+    };
+    const resizeObserver = new ResizeObserver((entries) => {
+      const { width, height } = entries[0].contentRect;
+      const widthResized = width !== prevWidth;
+      const heightResized = height !== prevHeight;
+      if (widthResized || heightResized) {
+        callback({
+          resized: {
+            width: widthResized,
+            height: heightResized
+          },
+          size: {
+            width,
+            height
+          }
+        });
+        if (widthResized) {
+          setPrevWidth(width);
+        }
+        if (heightResized) {
+          setPrevHeight(height);
+        }
+      }
+    });
+    resizeObserver.observe(target);
+    return () => resizeObserver.unobserve(target);
+  }, [ref]);
+}
+
+exports.default = useResizeObserver;

package/dist/cjs/helpers/hooks/useThrottle.cjs

@@ -0,0 +1,34 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var React = require('react');
+
+function useThrottle(value, interval = 500) {
+  const [throttledValue, setThrottledValue] = React.useState(value);
+  const lastUpdated = React.useRef();
+  React.useEffect(() => {
+    const now = Date.now();
+    if (lastUpdated.current && now >= lastUpdated.current + interval) {
+      lastUpdated.current = now;
+      setThrottledValue(value);
+    } else {
+      const id = window.setTimeout(() => {
+        lastUpdated.current = now;
+        setThrottledValue(value);
+      }, interval);
+      return () => window.clearTimeout(id);
+    }
+    return () => {
+    };
+  }, [value, interval]);
+  return throttledValue;
+}
+
+exports.useThrottle = useThrottle;

package/dist/cjs/helpers/hooks/useWindowEvent.cjs

@@ -0,0 +1,25 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var React = require('react');
+
+function useWindowEvent(type, listener) {
+  const listenerRef = React.useRef(listener);
+  listenerRef.current = listener;
+  React.useLayoutEffect(() => {
+    function handler(event) {
+      listenerRef.current.call(window, event);
+    }
+    window.addEventListener(type, handler);
+    return () => window.removeEventListener(type, handler);
+  }, [type]);
+}
+
+exports.useWindowEvent = useWindowEvent;

package/dist/cjs/helpers/intersperse.cjs

@@ -0,0 +1,15 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+function intersperse(arr, separator) {
+  return arr.flatMap((item, idx) => idx < arr.length - 1 ? [item, separator] : [item]);
+}
+
+exports.intersperse = intersperse;

package/dist/cjs/helpers/simple-unique-id.cjs

@@ -0,0 +1,15 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+const simpleUniqueId = function(length = 6) {
+  return Math.random().toString(36).substring(2, length + 2);
+};
+
+exports.simpleUniqueId = simpleUniqueId;

package/dist/cjs/hooks/actions/useAction.cjs

@@ -0,0 +1,37 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var sdk = require('@membranehq/sdk');
+var useElement = require('../useElement.cjs');
+
+function useAction(selector) {
+  const {
+    item: action,
+    accessor,
+    refresh,
+    ...rest
+  } = useElement.useElement(
+    sdk.WorkspaceElementType.Action,
+    selector,
+    (integrationApp) => selector ? integrationApp.action(selector) : void 0
+  );
+  async function apply(integrationKeys) {
+    const result = await accessor?.apply(integrationKeys);
+    await refresh();
+    return result;
+  }
+  async function reset() {
+    await accessor?.reset();
+    await refresh();
+  }
+  return { action, apply, reset, refresh, accessor, ...rest };
+}
+
+exports.useAction = useAction;

package/dist/cjs/hooks/actions/useActionInstance.cjs

@@ -0,0 +1,51 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var sdk = require('@membranehq/sdk');
+var useElement = require('../useElement.cjs');
+
+function useActionInstance(selector) {
+  const {
+    item: actionInstance,
+    accessor,
+    refresh,
+    ...rest
+  } = useElement.useElement(
+    sdk.WorkspaceElementType.ActionInstance,
+    selector,
+    (integrationApp) => selector ? integrationApp.actionInstance(selector) : void 0
+  );
+  async function run(input) {
+    return accessor?.run(input);
+  }
+  async function setup() {
+    await accessor?.setup();
+    await refresh();
+  }
+  async function reset() {
+    await accessor?.reset();
+    await refresh();
+  }
+  async function openConfiguration(options) {
+    return accessor?.open(options);
+  }
+  return {
+    actionInstance,
+    accessor,
+    refresh,
+    setup,
+    reset,
+    openConfiguration,
+    run,
+    ...rest
+  };
+}
+
+exports.useActionInstance = useActionInstance;

package/dist/cjs/hooks/actions/useActionInstances.cjs

@@ -0,0 +1,21 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var useElements = require('../useElements.cjs');
+
+function useActionInstances(query) {
+  const { ...rest } = useElements.useElements("action-instances", query);
+  return {
+    actionInstances: rest.items,
+    ...rest
+  };
+}
+
+exports.useActionInstances = useActionInstances;

package/dist/cjs/hooks/actions/useActions.cjs

@@ -0,0 +1,21 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var useElements = require('../useElements.cjs');
+
+function useActions(query) {
+  const { ...rest } = useElements.useElements("actions", query);
+  return {
+    actions: rest.items,
+    ...rest
+  };
+}
+
+exports.useActions = useActions;

package/dist/cjs/hooks/app-data-schemas/useAppDataSchema.cjs

@@ -0,0 +1,23 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var sdk = require('@membranehq/sdk');
+var useElement = require('../useElement.cjs');
+
+function useAppDataSchema(selector) {
+  const { item: appDataSchema, ...rest } = useElement.useElement(
+    sdk.WorkspaceElementType.AppDataSchema,
+    selector,
+    (integrationApp) => selector ? integrationApp.appDataSchema(selector) : void 0
+  );
+  return { appDataSchema, ...rest };
+}
+
+exports.useAppDataSchema = useAppDataSchema;

package/dist/cjs/hooks/app-data-schemas/useAppDataSchemaInstance.cjs

@@ -0,0 +1,38 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var sdk = require('@membranehq/sdk');
+var useElement = require('../useElement.cjs');
+
+function useAppDataSchemaInstance(selector) {
+  const {
+    item: appDataSchemaInstance,
+    accessor,
+    refresh,
+    ...rest
+  } = useElement.useElement(
+    sdk.WorkspaceElementType.AppDataSchemaInstance,
+    selector,
+    (integrationApp) => selector ? integrationApp.appDataSchemaInstance(selector) : void 0
+  );
+  async function setup() {
+    await accessor?.setup();
+    await refresh();
+  }
+  return {
+    appDataSchemaInstance,
+    accessor,
+    refresh,
+    setup,
+    ...rest
+  };
+}
+
+exports.useAppDataSchemaInstance = useAppDataSchemaInstance;

package/dist/cjs/hooks/app-data-schemas/useAppDataSchemaInstances.cjs

@@ -0,0 +1,21 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var useElements = require('../useElements.cjs');
+
+function useAppDataSchemaInstances(query) {
+  const { ...rest } = useElements.useElements("app-data-schema-instances", query);
+  return {
+    appDataSchemaInstances: rest.items,
+    ...rest
+  };
+}
+
+exports.useAppDataSchemaInstances = useAppDataSchemaInstances;

package/dist/cjs/hooks/app-data-schemas/useAppDataSchemas.cjs

@@ -0,0 +1,21 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var useElements = require('../useElements.cjs');
+
+function useAppDataSchemas(query) {
+  const { ...rest } = useElements.useElements("app-data-schemas", query);
+  return {
+    appDataSchemas: rest.items,
+    ...rest
+  };
+}
+
+exports.useAppDataSchemas = useAppDataSchemas;

package/dist/cjs/hooks/app-events/useAppEventSubscription.cjs

@@ -0,0 +1,23 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var sdk = require('@membranehq/sdk');
+var useElement = require('../useElement.cjs');
+
+function useAppEventSubscription(selector) {
+  const { item: appEventSubscription, ...rest } = useElement.useElement(
+    sdk.WorkspaceElementType.AppEventSubscription,
+    selector,
+    (integrationApp) => selector ? integrationApp.appEventSubscription(selector) : void 0
+  );
+  return { appEventSubscription, ...rest };
+}
+
+exports.useAppEventSubscription = useAppEventSubscription;