@membranehq/react 0.1.0

package/dist/esm/components/ComboBox/FocusTrap/index.mjs

@@ -0,0 +1,29 @@
+"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 FocusLock from 'react-focus-lock';
+import { useComboBox } from '../context/combobox-context.mjs';
+
+const TRAP_GROUP = "combobox-dropdown";
+function DropdownFocusTrap({ children, className }) {
+  const { isDropdownOpen, scopedComboboxId } = useComboBox();
+  return /* @__PURE__ */ jsx(
+    FocusLock,
+    {
+      group: TRAP_GROUP + scopedComboboxId,
+      disabled: !isDropdownOpen,
+      returnFocus: true,
+      autoFocus: false,
+      className,
+      children
+    }
+  );
+}
+
+export { DropdownFocusTrap };

package/dist/esm/components/ComboBox/context/combobox-context.mjs

@@ -0,0 +1,99 @@
+"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, useId, useState, useEffect } from 'react';
+
+const ComboBoxContext = createContext({
+  value: null,
+  onValueChange: () => {
+  },
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'DataSchema ... Remove this comment to see the full error message
+  schema: null,
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'IValueSpec ... Remove this comment to see the full error message
+  valueSpec: null,
+  variablesSchema: null,
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'IComboBoxOp... Remove this comment to see the full error message
+  options: null,
+  /* FIXME: strictNullCheck temporary fix */
+  // @ts-expect-error TS(2322): Type 'null' is not assignable to type 'IComboBoxOp... Remove this comment to see the full error message
+  optionFactories: null,
+  allowCustom: false,
+  isDropdownOpen: false,
+  openDropdown: () => {
+  },
+  closeDropdown: () => {
+  }
+});
+ComboBoxContext.displayName = "ComboBoxOptionsContext";
+const ComboBoxProvider = ({
+  value,
+  onValueChange,
+  schema,
+  valueSpec,
+  variablesSchema,
+  options,
+  optionFactories,
+  refsToIgnoreClick,
+  // Dropdown
+  onDropdownOpen,
+  onDropdownClose,
+  autoOpen,
+  topDropdownPanelComponent,
+  children
+}) => {
+  const scopedComboboxId = useId();
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  useEffect(() => {
+    if (autoOpen) {
+      openDropdown();
+    }
+  }, [autoOpen]);
+  function openDropdown() {
+    if (isDropdownOpen) return;
+    setTimeout(() => {
+      setIsDropdownOpen(true);
+      onDropdownOpen?.();
+    }, 10);
+  }
+  function closeDropdown() {
+    if (!isDropdownOpen) return;
+    setIsDropdownOpen(false);
+    onDropdownClose?.();
+  }
+  return /* @__PURE__ */ jsx(
+    ComboBoxContext.Provider,
+    {
+      value: {
+        scopedComboboxId,
+        value,
+        onValueChange,
+        schema,
+        valueSpec,
+        variablesSchema,
+        options,
+        optionFactories,
+        allowCustom: valueSpec?.allowCustom ?? false,
+        refsToIgnoreClick,
+        isDropdownOpen,
+        openDropdown,
+        closeDropdown,
+        topDropdownPanelComponent
+      },
+      children
+    }
+  );
+};
+function useComboBox() {
+  return useContext(ComboBoxContext);
+}
+
+export { ComboBoxProvider, useComboBox };

package/dist/esm/components/ComboBox/context/combobox-dropdown-context.mjs

@@ -0,0 +1,319 @@
+"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 { useState, useEffect, useCallback, createContext, useContext } from 'react';
+import deepEqual from 'fast-deep-equal';
+import useDataBuilder from '../../DataBuilder/data-builder-context.mjs';
+import { useIntegrationAppClient } from '../../../contexts/integration-app-client-context.mjs';
+import { useIntegrationAppConnection } from '../../../contexts/integration-app-connection-context.mjs';
+import { useIntegrationAppIntegration } from '../../../contexts/integration-app-integration-context.mjs';
+import { usePromise } from '../../../hooks/usePromise.mjs';
+import { useComboBox } from './combobox-context.mjs';
+import { useComboBoxDropdownSearchContext } from './combobox-dropdown-search.mjs';
+import { BooleanOptionsFactory } from '../options-factories/boolean.mjs';
+import { ConstantOptionFactory } from '../options-factories/constant.mjs';
+import { DropdownCategoryType } from '../shared.mjs';
+import '@membranehq/sdk';
+import 'fuse';
+import { EnumOptionFactory } from '../options-factories/enum.mjs';
+import '../options-factories/formula/config-mapping.mjs';
+import 'js-convert-case';
+import '../Badges/EditorTagBadge/NestedBadgeValue.mjs';
+import { ReferenceRecordsOptionsFactory } from '../options-factories/reference-records.mjs';
+import { RootOptionFactory } from '../options-factories/root.mjs';
+import { getAvailableRootCategories, getCurrentPath, getStackForPath } from './helpers.mjs';
+
+const ComboBoxDropdownContext = createContext({
+  availableCategories: [],
+  activeCategory: DropdownCategoryType.ROOT,
+  drillDown: () => {
+  },
+  drillUp: () => {
+  },
+  isOptionSelected: () => false,
+  optionsPayload: [{ options: [], fallbackOptions: [] }, void 0, "resolved"],
+  canUseParentInputSearchValue: false,
+  drillDownStackTop: void 0
+});
+ComboBoxDropdownContext.displayName = "ComboBoxDropdownContext";
+const ComboBoxDropdownContextProvider = ({ children }) => {
+  const { editableVariablesSchemaLocators } = useDataBuilder();
+  const {
+    value: comboboxValue,
+    schema,
+    valueSpec,
+    variablesSchema,
+    variablesOnly,
+    options: staticOptions,
+    optionFactories,
+    isDropdownOpen
+  } = useComboBox();
+  const { client } = useIntegrationAppClient();
+  const { connectionId } = useIntegrationAppConnection();
+  const { integrationId } = useIntegrationAppIntegration();
+  const { setDropdownSearchInputValue, dropdownSearchInputValue, searchSource } = useComboBoxDropdownSearchContext();
+  const [drillDownOptionsStack, setDrillDownOptionsStack] = useState([]);
+  const [availableCategories, setAvailableCategories] = useState(null);
+  const [drillPath, setDrillPath] = useState([]);
+  const hasVariables = variablesSchema?.type === "object" && Object.keys(variablesSchema.properties ?? {}).length > 0;
+  const recoverStack = (path, availableCategories2) => {
+    void getStackForPath(
+      path,
+      comboboxValue,
+      async (searchValue, stack) => {
+        const { options } = await getOptions({
+          availableCategories: availableCategories2,
+          schema,
+          variablesSchema,
+          searchValue,
+          valueSpec,
+          drillDownStack: stack,
+          staticOptions,
+          optionFactories,
+          editableVariablesSchemaLocators
+        });
+        return options;
+      },
+      [],
+      canUseParentInputSearchValue ? comboboxValue : dropdownSearchInputValue
+    ).then((stack) => {
+      setDrillDownOptionsStack(stack);
+    });
+  };
+  useEffect(() => {
+    void getAvailableRootCategories({
+      schema,
+      options: staticOptions,
+      optionFactories,
+      variablesOnly,
+      hasVariables,
+      client,
+      connectionId,
+      integrationId
+    }).then((categories) => {
+      setAvailableCategories(categories);
+      if (!isDropdownOpen) {
+        const currentPath = getCurrentPath(categories || [], comboboxValue);
+        setDrillPath(currentPath);
+        recoverStack(currentPath, categories);
+      }
+    });
+  }, [schema, staticOptions, optionFactories, variablesOnly, hasVariables, client, integrationId, connectionId]);
+  useEffect(() => {
+    if (!isDropdownOpen) {
+      resetDrillDown();
+    } else {
+      recoverStack(drillPath, availableCategories);
+    }
+  }, [isDropdownOpen]);
+  const [activeCategory] = drillPath.toReversed();
+  function drillDown(option) {
+    setDropdownSearchInputValue("");
+    const newStack = [...drillDownOptionsStack, option];
+    setDrillDownOptionsStack(newStack);
+    setDrillPath((path) => {
+      if (option.childCategory) {
+        return [...path, option.childCategory];
+      }
+      return path;
+    });
+  }
+  function drillUp() {
+    if (drillDownOptionsStack.length) {
+      const newStack = [...drillDownOptionsStack];
+      newStack.pop();
+      setDrillDownOptionsStack(newStack);
+      const newPath = [...drillPath];
+      newPath.pop();
+      if (!newPath.length) {
+        setDrillPath(getCurrentPath(availableCategories || [], comboboxValue));
+      } else {
+        setDrillPath(newPath);
+      }
+    }
+  }
+  function resetDrillDown() {
+    setDrillDownOptionsStack([]);
+    setDrillPath(getCurrentPath(availableCategories || [], comboboxValue));
+  }
+  const canUseParentInputSearchValue = searchSource === "parent-input" && !dropdownSearchInputValue && typeof comboboxValue === "string" && !!comboboxValue && drillDownOptionsStack.length === 0;
+  const optionsPayload = usePromise(() => {
+    return getOptions({
+      availableCategories,
+      schema,
+      variablesSchema,
+      searchValue: canUseParentInputSearchValue ? comboboxValue : dropdownSearchInputValue,
+      valueSpec,
+      drillDownStack: drillDownOptionsStack,
+      staticOptions,
+      optionFactories,
+      editableVariablesSchemaLocators
+    });
+  }, [
+    activeCategory,
+    JSON.stringify(availableCategories),
+    JSON.stringify(schema),
+    JSON.stringify(variablesSchema),
+    comboboxValue,
+    canUseParentInputSearchValue,
+    dropdownSearchInputValue,
+    JSON.stringify(valueSpec),
+    drillDownOptionsStack.length,
+    JSON.stringify(staticOptions),
+    optionFactories?.length,
+    JSON.stringify(editableVariablesSchemaLocators)
+  ]);
+  const isOptionSelected = useCallback(
+    function(option) {
+      if (comboboxValue === void 0 || comboboxValue === null) {
+        return false;
+      }
+      return deepEqual(option.value, comboboxValue);
+    },
+    [comboboxValue]
+  );
+  const [drillDownStackTop] = drillDownOptionsStack.toReversed();
+  return /* @__PURE__ */ jsx(
+    ComboBoxDropdownContext.Provider,
+    {
+      value: {
+        availableCategories,
+        activeCategory,
+        drillDown,
+        drillUp,
+        isOptionSelected,
+        optionsPayload,
+        canUseParentInputSearchValue,
+        drillDownStackTop
+      },
+      children
+    }
+  );
+};
+function useComboBoxDropdownContext() {
+  return useContext(ComboBoxDropdownContext);
+}
+async function getOptions({
+  availableCategories,
+  schema,
+  variablesSchema,
+  searchValue,
+  valueSpec,
+  drillDownStack,
+  staticOptions,
+  optionFactories = [],
+  editableVariablesSchemaLocators
+}) {
+  const factories = [...optionFactories];
+  factories.push(new RootOptionFactory(availableCategories));
+  if (schema?.referenceRecords) {
+    factories.push(new ReferenceRecordsOptionsFactory({ schema }));
+  } else if (schema?.enum) {
+    factories.push(new EnumOptionFactory({ schema }));
+  } else if (schema?.type === "boolean") {
+    factories.push(new BooleanOptionsFactory());
+  } else if (staticOptions) {
+    factories.push(new ConstantOptionFactory(staticOptions));
+  }
+  const options = await getOptionsForState({
+    drillDownStack,
+    variablesSchema,
+    searchValue,
+    valueSpec,
+    editableVariablesSchemaLocators,
+    factories
+  });
+  const fallbackOptions = [];
+  if (!options.length) {
+    fallbackOptions.push(
+      ...await getOptionsForState({
+        searchValue: "",
+        drillDownStack,
+        variablesSchema,
+        valueSpec,
+        editableVariablesSchemaLocators,
+        factories
+      })
+    );
+  }
+  return { options, fallbackOptions };
+}
+async function getOptionsForState({
+  drillDownStack,
+  variablesSchema,
+  searchValue,
+  valueSpec,
+  editableVariablesSchemaLocators,
+  factories
+}) {
+  const options = [];
+  if (drillDownStack.length > 0) {
+    const option = drillDownStack[drillDownStack.length - 1];
+    if (option?.drillDownOptionFactory) {
+      options.push(
+        ...await getOptionsFromFactory({
+          factory: option?.drillDownOptionFactory,
+          variablesSchema,
+          searchValue,
+          valueSpec,
+          editableVariablesSchemaLocators
+        })
+      );
+    }
+  } else {
+    for (const optionFactory of [...factories]) {
+      options.push(
+        ...await getOptionsFromFactory({
+          factory: optionFactory,
+          variablesSchema,
+          searchValue,
+          valueSpec,
+          editableVariablesSchemaLocators
+        })
+      );
+    }
+  }
+  return options;
+}
+async function getOptionsFromFactory({
+  factory,
+  ...rest
+}) {
+  const { variablesSchema, searchValue, valueSpec, editableVariablesSchemaLocators } = rest;
+  const options = [];
+  options.push(
+    ...await factory.getOptions({
+      input: searchValue,
+      spec: valueSpec,
+      editableVariablesSchemaLocators,
+      variablesSchema
+    })
+  );
+  if (searchValue) {
+    const unfilteredOptions = await factory.getOptions({
+      input: "",
+      spec: valueSpec,
+      editableVariablesSchemaLocators,
+      variablesSchema
+    });
+    for (const option of unfilteredOptions) {
+      if (option.drillDownOptionFactory) {
+        options.push(
+          ...await getOptionsFromFactory({
+            factory: option.drillDownOptionFactory,
+            ...rest
+          })
+        );
+      }
+    }
+  }
+  return options;
+}
+
+export { ComboBoxDropdownContextProvider, useComboBoxDropdownContext };

package/dist/esm/components/ComboBox/context/combobox-dropdown-search.mjs

@@ -0,0 +1,50 @@
+"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 { useState, useMemo, useEffect, createContext, useContext } from 'react';
+import { useComboBox } from './combobox-context.mjs';
+
+const ComboBoxDropdownSearchContext = createContext({
+  hideSearch: false,
+  dropdownSearchInputValue: "",
+  setDropdownSearchInputValue: () => null,
+  searchSource: "indeterminate",
+  setSearchSource: () => {
+  }
+});
+ComboBoxDropdownSearchContext.displayName = "ComboBoxDropdownSearchContext";
+const ComboBoxDropdownSearchProvider = ({
+  children,
+  hideSearch = false
+}) => {
+  const [dropdownSearchInputValue, setDropdownSearchInputValue] = useState("");
+  const [searchSource, setSearchSource] = useState("indeterminate");
+  const { isDropdownOpen } = useComboBox();
+  const contextValue = useMemo(
+    () => ({
+      dropdownSearchInputValue,
+      setDropdownSearchInputValue,
+      hideSearch,
+      searchSource,
+      setSearchSource
+    }),
+    [dropdownSearchInputValue, hideSearch, searchSource]
+  );
+  useEffect(() => {
+    if (!isDropdownOpen && dropdownSearchInputValue) {
+      setDropdownSearchInputValue("");
+    }
+  }, [isDropdownOpen]);
+  return /* @__PURE__ */ jsx(ComboBoxDropdownSearchContext.Provider, { value: contextValue, children });
+};
+function useComboBoxDropdownSearchContext() {
+  return useContext(ComboBoxDropdownSearchContext);
+}
+
+export { ComboBoxDropdownSearchProvider, useComboBoxDropdownSearchContext };

package/dist/esm/components/ComboBox/context/combobox-dropdown-stack.mjs

@@ -0,0 +1,79 @@
+"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 { useState, useContext, createContext, useRef, useEffect } from 'react';
+
+const DropdownStackContext = createContext({
+  isNested: false,
+  stack: [],
+  setStack: () => {
+  }
+});
+const DropdownStackContextProvider = ({
+  children,
+  editorRef
+}) => {
+  const [stack, setStack] = useState([]);
+  const {
+    isNested: hasNestedDropdownsContext,
+    stack: parentStack,
+    setStack: setParentStack
+  } = useContext(DropdownStackContext);
+  if (hasNestedDropdownsContext) {
+    return /* @__PURE__ */ jsx(
+      DropdownStackContext.Provider,
+      {
+        value: {
+          isNested: true,
+          stack: parentStack,
+          setStack: setParentStack,
+          editorRef
+        },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    DropdownStackContext.Provider,
+    {
+      value: {
+        isNested: true,
+        stack,
+        setStack,
+        editorRef
+      },
+      children
+    }
+  );
+};
+const useDropdownStackContext = (dropdownRef) => {
+  const { isNested, stack, setStack, editorRef } = useContext(DropdownStackContext);
+  const mutableRefContainer = useRef(dropdownRef);
+  useEffect(() => {
+    if (isNested) {
+      setStack((prev) => [...prev, mutableRefContainer?.current]);
+    } else {
+      setStack([mutableRefContainer?.current]);
+    }
+    return () => {
+      setStack((prev) => prev.filter((record) => record !== mutableRefContainer?.current));
+    };
+  }, []);
+  function isClickWithinStackItem(event) {
+    const isClickOnCurrentEditor = editorRef?.current?.firstChild == event.target;
+    const stackStartedFromElement = stack.slice(stack.indexOf(mutableRefContainer.current));
+    const isClickInStack = stackStartedFromElement.some((ref) => {
+      return !!(ref?.current && ref.current.contains(event.target));
+    });
+    return isClickInStack || isClickOnCurrentEditor;
+  }
+  return { isClickWithinStackItem };
+};
+
+export { DropdownStackContextProvider, useDropdownStackContext };