@membranehq/react 0.1.0

package/dist/cjs/components/ComboBox/Badges/EditorTagBadge/index.cjs

@@ -0,0 +1,194 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var index = require('../../../SvgIcon/index.cjs');
+var svgIconType = require('../../../SvgIcon/svg-icon-type.cjs');
+var useEventStopPropagation = require('../../../../helpers/hooks/useEventStopPropagation.cjs');
+require('../../../../styled-system/css/css.cjs');
+require('../../../../styled-system/helpers.cjs');
+var sva = require('../../../../styled-system/css/sva.cjs');
+
+const editorTagBadgeRecipe = sva.sva({
+  className: "editor-tag-badge",
+  slots: ["root", "icon", "close-button-container", "close-button"],
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      flexDir: "row",
+      flexWrap: "nowrap",
+      alignItems: "center",
+      justifyContent: "start",
+      maxW: "full",
+      minH: "5",
+      gap: "0.5",
+      px: "1.5",
+      py: "0.5",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      rounded: "lg",
+      fontSize: "token(sizes.3)",
+      lineHeight: "token(sizes.4)",
+      fontWeight: "medium",
+      bg: "colorPalette.3",
+      borderColor: "colorPalette.4",
+      color: "colorPalette.12",
+      userSelect: "none",
+      _hover: {
+        cursor: "pointer",
+        bg: "colorPalette.4",
+        borderColor: "colorPalette.5"
+      },
+      "&:hover .editor-tag-badge__close-button-container": {
+        display: "flex",
+        gradientVia: "colorPalette.4!",
+        gradientTo: "colorPalette.4!"
+      },
+      _active: {
+        bg: "colorPalette.5",
+        borderColor: "colorPalette.6"
+      },
+      "[data-selected='true'] &, [data-tag-dropdown-open='true'] &": {
+        bg: "colorPalette.5",
+        borderColor: "colorPalette.6",
+        "& .editor-tag-badge__close-button-container": {
+          gradientFrom: "transparent",
+          gradientVia: "colorPalette.5",
+          gradientTo: "colorPalette.5"
+        }
+      },
+      "[aria-disabled='true'] &": {
+        pointerEvents: "none",
+        bg: "slate.4",
+        borderColor: "slate.5",
+        color: "black",
+        cursor: "initial"
+      }
+    },
+    icon: {
+      h: "3",
+      w: "3",
+      minW: "3",
+      strokeWidth: "token(sizes.0.5)"
+    },
+    "close-button-container": {
+      display: "none",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      position: "absolute",
+      right: "1",
+      strokeWidth: "token(sizes.0.5)",
+      borderTopRightRadius: "md",
+      borderBottomRightRadius: "md",
+      w: "7",
+      maxW: "1/2",
+      h: "full",
+      bgGradient: "to-r",
+      gradientFrom: "transparent",
+      "[data-selected='true'] &, [data-tag-dropdown-open='true'] &": {
+        display: "flex"
+      }
+    },
+    "close-button": {
+      rounded: "sm",
+      outline: "none",
+      _focus: {
+        bg: "colorPalette.6",
+        "& svg": {
+          strokeWidth: "3px"
+        }
+      },
+      "& svg": {
+        h: "3",
+        w: "3",
+        _hover: {
+          strokeWidth: "3px"
+        }
+      }
+    }
+  },
+  variants: {
+    variant: {
+      "static-value": {
+        root: {
+          color: "black",
+          colorPalette: "gray"
+        }
+      },
+      formula: {
+        root: {
+          colorPalette: "indigo"
+        }
+      },
+      value: {
+        root: {
+          colorPalette: "blue"
+        }
+      },
+      error: {
+        root: {
+          colorPalette: "tomato",
+          color: "tomato.10"
+        }
+      },
+      ghost: {
+        root: {
+          bg: "transparent!",
+          borderColor: "transparent!",
+          "[data-selected='true'] &, [data-tag-dropdown-open='true'] &": {
+            "& .editor-tag-badge__close-button-container": {
+              gradientFrom: "transparent",
+              gradientVia: "transparent",
+              gradientTo: "transparent"
+            }
+          }
+        },
+        "close-button": {
+          display: "none!"
+        }
+      }
+    },
+    disabled: {
+      true: {
+        root: {
+          pointerEvents: "none",
+          bg: "slate.4",
+          borderColor: "slate.5",
+          color: "black",
+          cursor: "initial"
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    variant: "value"
+  }
+});
+const EditorTagBadge = React.forwardRef(({ children, className, variant, disabled, onDelete, ...rest }, ref) => {
+  const styles = editorTagBadgeRecipe({ variant, disabled });
+  const handleOnClick = useEventStopPropagation.default(() => onDelete?.());
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx(styles.root, className), ...rest, ref, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles["close-button-container"], children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: styles["close-button"], disabled, "aria-label": "Delete", onClick: handleOnClick, children: /* @__PURE__ */ jsxRuntime.jsx(index.SvgIcon, { type: svgIconType.SvgIconType.Close, className: styles.icon }) }) })
+  ] });
+});
+EditorTagBadge.displayName = "EditorTagBadge";
+function EditorTagBadgeIcon({ type, className }) {
+  const styles = editorTagBadgeRecipe();
+  return /* @__PURE__ */ jsxRuntime.jsx(index.SvgIcon, { type, className: clsx(styles.icon, className) });
+}
+
+exports.EditorTagBadge = EditorTagBadge;
+exports.EditorTagBadgeIcon = EditorTagBadgeIcon;
+exports.editorTagBadgeRecipe = editorTagBadgeRecipe;

package/dist/cjs/components/ComboBox/Badges/isDefinedValue.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 isDefinedValue(value) {
+  return value !== null && value !== void 0;
+}
+
+exports.isDefinedValue = isDefinedValue;

package/dist/cjs/components/ComboBox/ComboBox.cjs

@@ -0,0 +1,83 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var LexicalEditor = require('../ComboBoxElements/Editor/LexicalEditor.cjs');
+var ComboboxEditorTrigger = require('./ComboboxTriggers/ComboboxEditorTrigger.cjs');
+var ComboboxTagTrigger = require('./ComboboxTriggers/ComboboxTagTrigger.cjs');
+var comboboxContext = require('./context/combobox-context.cjs');
+var comboboxDropdownContext = require('./context/combobox-dropdown-context.cjs');
+var comboboxDropdownSearch = require('./context/combobox-dropdown-search.cjs');
+var helpers = require('./context/helpers.cjs');
+var valueSpec = require('./value-spec.cjs');
+
+function ComboBox({
+  value,
+  schema,
+  valueSpec: valueSpec$1 = { type: valueSpec.ValueType.ANY, allowCustom: true },
+  variablesSchema,
+  variablesOnly = false,
+  options = void 0,
+  optionFactories = [],
+  onChange,
+  valueComponent = void 0,
+  placeholder = "",
+  isRequired = false,
+  disabled = false,
+  className,
+  hideSearch = false,
+  // Dropdown related
+  autoOpen = false,
+  onOpen,
+  onClose,
+  topDropdownPanelComponent = void 0,
+  refsToIgnoreClick,
+  onValueChange: _,
+  ...rest
+}) {
+  const userCanEnterValueFromKeyboard = helpers.canUserEnterValueFromKeyboard(
+    schema,
+    options,
+    optionFactories,
+    variablesOnly,
+    value
+  );
+  const dropdownProps = {
+    autoOpen,
+    onDropdownOpen: onOpen,
+    onDropdownClose: onClose,
+    topDropdownPanelComponent
+  };
+  const props = {
+    placeholder,
+    className,
+    onChange,
+    required: isRequired,
+    disabled,
+    ...rest
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    comboboxContext.ComboBoxProvider,
+    {
+      value,
+      onValueChange: onChange,
+      schema,
+      valueSpec: valueSpec$1,
+      variablesSchema,
+      options,
+      optionFactories,
+      refsToIgnoreClick,
+      ...dropdownProps,
+      children: /* @__PURE__ */ jsxRuntime.jsx(comboboxDropdownSearch.ComboBoxDropdownSearchProvider, { hideSearch, children: /* @__PURE__ */ jsxRuntime.jsx(comboboxDropdownContext.ComboBoxDropdownContextProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(LexicalEditor.LexicalProvider, { children: userCanEnterValueFromKeyboard ? /* @__PURE__ */ jsxRuntime.jsx(ComboboxEditorTrigger.ComboboxEditorTrigger, { ...props }) : /* @__PURE__ */ jsxRuntime.jsx(ComboboxTagTrigger.ComboboxTagTrigger, { ...props, valueComponent }) }) }) })
+    }
+  );
+}
+
+exports.ComboBox = ComboBox;

package/dist/cjs/components/ComboBox/ComboboxTriggers/ComboboxEditorTrigger.cjs

@@ -0,0 +1,130 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var sdk = require('@membranehq/sdk');
+var comboboxContext = require('../context/combobox-context.cjs');
+var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
+var comboboxDropdownSearch = require('../context/combobox-dropdown-search.cjs');
+var Dropdown = require('../Dropdown/Dropdown.cjs');
+var shared = require('../shared.cjs');
+var index = require('../../ComboBoxElements/ComboboxContainer/index.cjs');
+var clicks = require('../../ComboBoxElements/Editor/helpers/clicks.cjs');
+var transformEditorSchemaToValue = require('../../ComboBoxElements/Editor/helpers/transformEditorSchemaToValue.cjs');
+var LexicalEditor = require('../../ComboBoxElements/Editor/LexicalEditor.cjs');
+var useEditor = require('../../ComboBoxElements/Editor/useEditor.cjs');
+var index$1 = require('../../DataBuilder/Formula/index.cjs');
+var getRefElement = require('../../../helpers/getRefElement.cjs');
+
+function ComboboxEditorTrigger({ placeholder, className, onChange, disabled }) {
+  const textInputRef = React.useRef(null);
+  const fieldValueRef = React.useRef(null);
+  const {
+    value,
+    refsToIgnoreClick,
+    schema,
+    // Dropdown related
+    isDropdownOpen,
+    openDropdown,
+    closeDropdown,
+    topDropdownPanelComponent
+  } = comboboxContext.useComboBox();
+  const { setSearchSource, searchSource } = comboboxDropdownSearch.useComboBoxDropdownSearchContext();
+  const { pasteTag } = useEditor.useEditor();
+  const { activeCategory } = comboboxDropdownContext.useComboBoxDropdownContext();
+  function handleOpenDropdown() {
+    if (disabled) return;
+    openDropdown();
+  }
+  const refs = [textInputRef, fieldValueRef, ...refsToIgnoreClick ?? []];
+  const handleClick = function(e) {
+    const isClickInsideAnyOfElements = refs.map(getRefElement.getRefElement).some((el) => el.contains(e?.target));
+    if (isClickInsideAnyOfElements && !clicks.isClickOnEditorCustomTagComponent(e?.target, fieldValueRef?.current)) {
+      handleOpenDropdown();
+      e?.stopPropagation();
+    }
+  };
+  const handleOptionSelect = (value2) => {
+    if (shouldRewriteValue(activeCategory)) {
+      onChange(value2);
+      if (shouldCloseDropdown(activeCategory)) {
+        closeDropdown();
+      }
+    } else {
+      const openTagCombobox = valueHasDropdownWithFormula(value2);
+      if (openTagCombobox) {
+        closeDropdown();
+      }
+      pasteTag({
+        value: value2,
+        autoOpen: openTagCombobox,
+        allowEditorSearchClear: searchSource === "parent-input"
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.ComboboxContainer,
+    {
+      ref: fieldValueRef,
+      "aria-expanded": isDropdownOpen,
+      onClick: handleClick,
+      disabled,
+      level: "editor",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Dropdown.Dropdown,
+        {
+          topDropdownPanelComponent,
+          onOptionSelect: handleOptionSelect,
+          autoFocusOnSearch: false,
+          editorRef: textInputRef,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            LexicalEditor.LexicalEditor,
+            {
+              ref: textInputRef,
+              className,
+              onFocus: () => {
+                if (!value) {
+                  setSearchSource("parent-input");
+                } else {
+                  setSearchSource("indeterminate");
+                }
+              },
+              disabled,
+              value,
+              schema,
+              placeholder,
+              onChange: (state) => {
+                onChange(transformEditorSchemaToValue.transformEditorSchemaToValue(state));
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function shouldRewriteValue(category) {
+  return category && [
+    shared.DropdownCategoryType.OPTIONS,
+    shared.DropdownCategoryType.CUSTOM,
+    shared.DropdownCategoryType.LOOKUP_OPTIONS,
+    shared.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY
+  ].includes(category);
+}
+function shouldCloseDropdown(category) {
+  return category && [shared.DropdownCategoryType.OPTIONS, shared.DropdownCategoryType.CUSTOM, shared.DropdownCategoryType.LOOKUP_OPTIONS].includes(category);
+}
+function valueHasDropdownWithFormula(value) {
+  if (!sdk.isFormula(value)) return false;
+  return !!index$1.formulaComponentMapping[sdk.getFormula(value)?.type]?.DropdownComponent;
+}
+
+exports.ComboboxEditorTrigger = ComboboxEditorTrigger;

package/dist/cjs/components/ComboBox/ComboboxTriggers/ComboboxTagTrigger.cjs

@@ -0,0 +1,143 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var shared = require('../shared.cjs');
+var getRefElement = require('../../../helpers/getRefElement.cjs');
+require('../../../styled-system/css/css.cjs');
+require('../../../styled-system/helpers.cjs');
+var sva = require('../../../styled-system/css/sva.cjs');
+var index = require('../../ComboBoxElements/ComboboxContainer/index.cjs');
+var clicks = require('../../ComboBoxElements/Editor/helpers/clicks.cjs');
+require('../../DataBuilderUI/FieldControlPanel/index.cjs');
+var ActionBar = require('../../DataBuilderUI/ActionBar.cjs');
+require('../../DataBuilderUI/Cell.cjs');
+require('clsx');
+require('../../DataBuilderUI/styles.module.css.cjs');
+require('../../DataBuilderUI/Row.cjs');
+require('../../DataBuilderUI/Title.cjs');
+var ComboBoxValueBadge = require('../Badges/ComboBoxValueBadge.cjs');
+var isDefinedValue = require('../Badges/isDefinedValue.cjs');
+var comboboxContext = require('../context/combobox-context.cjs');
+var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
+var Dropdown = require('../Dropdown/Dropdown.cjs');
+
+const badgeWrapperRecipe = sva.sva({
+  className: "badge-wrapper",
+  slots: ["root", "action-bar"],
+  base: {
+    root: {
+      position: "relative",
+      display: "inline-flex",
+      maxW: "full",
+      w: "fit-content"
+    },
+    "action-bar": {
+      display: "none"
+    }
+  },
+  variants: {
+    expanded: {
+      true: {
+        "action-bar": {
+          position: "absolute",
+          top: "0",
+          left: "full",
+          bottom: "0",
+          mr: "0",
+          w: "0",
+          zIndex: "1"
+        }
+      },
+      false: {}
+    }
+  }
+});
+function ComboboxTagTrigger({
+  placeholder,
+  className,
+  onChange,
+  disabled,
+  valueComponent,
+  ...rest
+}) {
+  const valueRef = React.useRef(null);
+  const fieldValueRef = React.useRef(null);
+  const {
+    refsToIgnoreClick,
+    // Dropdown related
+    isDropdownOpen,
+    openDropdown,
+    closeDropdown,
+    topDropdownPanelComponent,
+    value
+  } = comboboxContext.useComboBox();
+  const { activeCategory } = comboboxDropdownContext.useComboBoxDropdownContext();
+  function handleOpenDropdown() {
+    if (disabled) return;
+    openDropdown();
+  }
+  const refs = [valueRef, fieldValueRef, ...refsToIgnoreClick ?? []];
+  const handleClick = function handleClick2(e) {
+    const isClickInsideAnyOfElements = refs.map(getRefElement.getRefElement).some((el) => el.contains(e?.target));
+    if (isClickInsideAnyOfElements && !clicks.isClickOnEditorComponent(e?.target, fieldValueRef?.current)) {
+      handleOpenDropdown();
+      e?.stopPropagation();
+    }
+  };
+  function handleOptionSelect(option) {
+    const keepDropdownOpen = activeCategory && [shared.DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY].includes(activeCategory);
+    onChange(option);
+    if (!keepDropdownOpen) {
+      closeDropdown();
+    }
+  }
+  const handleOnDelete = () => {
+    onChange(void 0);
+    closeDropdown();
+  };
+  const styles = badgeWrapperRecipe({ expanded: isDropdownOpen });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.ComboboxContainer,
+    {
+      ref: fieldValueRef,
+      "aria-expanded": isDropdownOpen,
+      "data-tag-dropdown-open": isDropdownOpen,
+      "data-selected": rest["data-selected"],
+      onClick: handleClick,
+      disabled,
+      level: "tag",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Dropdown.Dropdown,
+        {
+          topDropdownPanelComponent,
+          autoFocusOnSearch: true,
+          onOptionSelect: handleOptionSelect,
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.root, ref: valueRef, children: valueComponent ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            valueComponent,
+            isDefinedValue.isDefinedValue(value) && /* @__PURE__ */ jsxRuntime.jsx(ActionBar.ActionBar, { className: styles["action-bar"], children: /* @__PURE__ */ jsxRuntime.jsx(ActionBar.ActionBar.DeleteButton, { onClick: handleOnDelete }) })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+            ComboBoxValueBadge.ComboBoxValueBadge,
+            {
+              className,
+              placeholder,
+              disabled,
+              isDropdownOpen,
+              onDelete: handleOnDelete
+            }
+          ) })
+        }
+      )
+    }
+  );
+}
+
+exports.ComboboxTagTrigger = ComboboxTagTrigger;

package/dist/cjs/components/ComboBox/Dropdown/ActiveCategoryContent.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 jsxRuntime = require('react/jsx-runtime');
+var comboboxDropdownContext = require('../context/combobox-dropdown-context.cjs');
+var categoryContentMapping = require('./categoryContentMapping.cjs');
+
+function ActiveCategoryContent({ onOptionSelect }) {
+  const { activeCategory } = comboboxDropdownContext.useComboBoxDropdownContext();
+  const CategoryContainer = (activeCategory ? categoryContentMapping.CATEGORY_COMPONENTS[activeCategory] : void 0) ?? (() => /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Unknown category" }));
+  return /* @__PURE__ */ jsxRuntime.jsx(CategoryContainer, { onOptionSelect });
+}
+
+exports.ActiveCategoryContent = ActiveCategoryContent;

package/dist/cjs/components/ComboBox/Dropdown/Categories/CustomValue.cjs

@@ -0,0 +1,19 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../../../DropdownUI/index.cjs');
+var OptionsList = require('../OptionsList.cjs');
+
+function CustomValueCategoryContent({ onOptionSelect }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.Panel, { children: /* @__PURE__ */ jsxRuntime.jsx(index.DropdownUI.List, { children: /* @__PURE__ */ jsxRuntime.jsx(OptionsList.OptionsList, { onOptionSelect }) }) });
+}
+
+exports.CustomValueCategoryContent = CustomValueCategoryContent;