@membranehq/react 0.1.0

package/dist/esm/components/ComboBox/Dropdown/KeyboardNavigation/NavigationContext.mjs

@@ -0,0 +1,188 @@
+"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, useReducer, useRef, createContext, useId, useContext, useEffect } from 'react';
+import deepEqual from 'fast-deep-equal';
+import { useDeepEffect } from '../../../../helpers/hooks/useDeepEffect.mjs';
+import { useComboBoxDropdownContext } from '../../context/combobox-dropdown-context.mjs';
+
+const NavigationContext = createContext({
+  currentItem: null,
+  moveToNextItem: () => null,
+  moveToPreviousItem: () => null,
+  onOptionsListChange: () => null
+});
+function payloadReducer(state, action) {
+  const compactState = Object.entries(state).reduce((acc, [sourceId, payload]) => {
+    if (!payload.options.length && !payload.fallbackOptions.length) {
+      return acc;
+    }
+    return {
+      ...acc,
+      [sourceId]: payload
+    };
+  }, {});
+  return {
+    ...compactState,
+    [action.sourceId]: {
+      index: action.index,
+      options: action.options,
+      fallbackOptions: action.fallbackOptions
+    }
+  };
+}
+function NavigationContextProvider({ children }) {
+  const [currentItem, setCurrentItem] = useState(null);
+  const [payload, dispatch] = useReducer(payloadReducer, {});
+  const { isOptionSelected, drillDownStackTop } = useComboBoxDropdownContext();
+  const insertionCounter = useRef(0);
+  useDeepEffect(() => {
+    const itemOptions = getUnifiedOptionsList(payload);
+    if (!itemOptions.length) {
+      return;
+    }
+    if (currentItem === "drill-up") {
+      setCurrentItem(itemOptions[0]);
+      return;
+    }
+    if (!currentItem || itemOptions.indexOf(currentItem) == -1) {
+      setCurrentItem(itemOptions[0]);
+      return;
+    }
+    if (getOptionIndex(currentItem, itemOptions) == -1) {
+      const selectedOption = itemOptions.find(isOptionSelected);
+      if (selectedOption) {
+        setCurrentItem(selectedOption);
+      } else {
+        const onlyOptions = getOnlyItemOptions(itemOptions);
+        setCurrentItem(onlyOptions[0]);
+      }
+    }
+  }, [payload]);
+  const moveToPreviousItem = () => {
+    if (currentItem === "drill-up") {
+      return;
+    }
+    const itemOptions = getUnifiedOptionsList(payload);
+    if (!currentItem) {
+      setCurrentItem(itemOptions[itemOptions.length - 1]);
+      return;
+    }
+    const idx = getOptionIndex(currentItem, itemOptions);
+    if (idx === 0 && !!drillDownStackTop) {
+      setCurrentItem("drill-up");
+      return;
+    }
+    if (idx === 0) {
+      return;
+    }
+    if (idx > 0) {
+      const currentOption = itemOptions[idx - 1];
+      setCurrentItem(currentOption);
+      return;
+    }
+    setCurrentItem(itemOptions[itemOptions.length - 1]);
+  };
+  const moveToNextItem = () => {
+    const itemOptions = getUnifiedOptionsList(payload);
+    if (itemOptions.length === 0) {
+      setCurrentItem(null);
+      return;
+    }
+    if (!currentItem || currentItem === "drill-up") {
+      setCurrentItem(itemOptions[0]);
+      return;
+    }
+    const idx = getOptionIndex(currentItem, itemOptions);
+    if (idx === itemOptions.length - 1) {
+      return;
+    }
+    if (idx === -1) {
+      setCurrentItem(itemOptions[0]);
+    }
+    if (idx < itemOptions.length - 1) {
+      const currentOption = itemOptions[idx + 1];
+      setCurrentItem(currentOption);
+    }
+  };
+  const onOptionsListChange = ({ sourceId, options, fallbackOptions }) => {
+    insertionCounter.current++;
+    dispatch({
+      sourceId,
+      index: insertionCounter.current,
+      options,
+      fallbackOptions
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    NavigationContext.Provider,
+    {
+      value: {
+        currentItem,
+        moveToNextItem,
+        moveToPreviousItem,
+        onOptionsListChange
+      },
+      children
+    }
+  );
+}
+function useNavigationContext(options = [], fallbackOptions = []) {
+  const sourceId = useId();
+  const { currentItem, moveToNextItem, moveToPreviousItem, onOptionsListChange } = useContext(NavigationContext);
+  useDeepEffect(() => {
+    onOptionsListChange({
+      sourceId,
+      options,
+      fallbackOptions
+    });
+  }, [options, fallbackOptions]);
+  useEffect(() => {
+    return () => {
+      onOptionsListChange({
+        sourceId,
+        options: [],
+        fallbackOptions: []
+      });
+    };
+  }, []);
+  return {
+    currentItem,
+    moveToNextItem,
+    moveToPreviousItem
+  };
+}
+const makeOptionComparable = (option) => {
+  return option && {
+    ...option,
+    label: option.searchLabel ?? option.label?.toString()
+  };
+};
+const getOnlyItemOptions = (options) => options.filter((o) => !o.isSection);
+function getOptionIndex(option, options) {
+  return options.findIndex((o) => deepEqual(makeOptionComparable(o), makeOptionComparable(option)));
+}
+const getUnifiedOptionsList = (payload) => {
+  const { options, fallbackOptions } = Object.entries(payload).sort(([_, { index }]) => index).reduce(
+    (acc, [_, { options: options2, fallbackOptions: fallbackOptions2 }]) => {
+      return {
+        options: [...acc.options, ...options2],
+        fallbackOptions: [...acc.fallbackOptions, ...fallbackOptions2]
+      };
+    },
+    {
+      options: [],
+      fallbackOptions: []
+    }
+  );
+  const itemOptions = getOnlyItemOptions(options);
+  return itemOptions.length ? itemOptions : getOnlyItemOptions(fallbackOptions);
+};
+
+export { NavigationContextProvider, useNavigationContext };

package/dist/esm/components/ComboBox/Dropdown/KeyboardNavigation/useKeyboardBinding.mjs

@@ -0,0 +1,58 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { useComboBox } from '../../context/combobox-context.mjs';
+import { useComboBoxDropdownContext } from '../../context/combobox-dropdown-context.mjs';
+import { useKeyboardEventSubscribe, EVENT_TYPE } from '../../../../helpers/hooks/keyboard-events.mjs';
+import { useNavigationContext } from './NavigationContext.mjs';
+
+const useKeyboardBinding = ({
+  options,
+  fallbackOptions,
+  onEnter = () => {
+  }
+}) => {
+  const { scopedComboboxId } = useComboBox();
+  const { drillUp } = useComboBoxDropdownContext();
+  const { currentItem, moveToNextItem, moveToPreviousItem } = useNavigationContext(options, fallbackOptions);
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_DOWN,
+    callback: moveToPreviousItem
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_UP,
+    callback: moveToNextItem
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_LEFT,
+    callback: drillUp
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_RIGHT,
+    callback: () => {
+      if (currentItem) {
+        onEnter(currentItem);
+      }
+    }
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_SELECT,
+    callback: () => {
+      if (currentItem) {
+        onEnter(currentItem);
+      }
+    }
+  });
+};
+
+export { useKeyboardBinding };

package/dist/esm/components/ComboBox/Dropdown/Option.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, jsxs } from 'react/jsx-runtime';
+import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
+import useEventStopPropagation from '../../../helpers/hooks/useEventStopPropagation.mjs';
+import { DropdownUI } from '../../DropdownUI/index.mjs';
+
+function DropdownOption({
+  option,
+  selected,
+  current = false,
+  onSelect
+}) {
+  const handleOnSelect = useEventStopPropagation(() => {
+    if (option.isSection && !option.drillDownOptionFactory) {
+      return;
+    }
+    onSelect?.();
+  });
+  const iconProps = getIconProps(option);
+  const valueProps = getValueProps(option);
+  const hasChild = !!option.drillDownOptionFactory;
+  if (option.isSection) {
+    return /* @__PURE__ */ jsx(DropdownUI.ListHeader, { children: valueProps.label });
+  }
+  return /* @__PURE__ */ jsxs(DropdownUI.Item, { current, onClick: handleOnSelect, "aria-selected": selected, children: [
+    /* @__PURE__ */ jsx(DropdownUI.ItemIcon, { ...iconProps, framed: true }),
+    /* @__PURE__ */ jsx(DropdownUI.ItemTitle, { children: option.label }),
+    option.hint && /* @__PURE__ */ jsx(DropdownUI.ItemHint, { value: option.hint, prefix: option.hintPrefix }),
+    hasChild && /* @__PURE__ */ jsx(DropdownUI.ItemNestingIndicator, { count: option.childrenCount, children: /* @__PURE__ */ jsx(DropdownUI.ItemIcon, { type: SvgIconType.ChevronRight }) }),
+    selected && /* @__PURE__ */ jsx(DropdownUI.ItemIcon, { type: SvgIconType.Check })
+  ] });
+}
+function getIconProps(option) {
+  const { iconType: type, iconUri: src } = option;
+  return { type, src };
+}
+function getValueProps(option) {
+  const { label } = option;
+  return {
+    label: label ?? "Missing label"
+  };
+}
+
+export { DropdownOption as default };

package/dist/esm/components/ComboBox/Dropdown/OptionsList.mjs

@@ -0,0 +1,111 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import deepEqual from 'fast-deep-equal';
+import { toSnakeCase } from 'js-convert-case';
+import { css } from '../../../styled-system/css/css.mjs';
+import '../../../styled-system/helpers.mjs';
+import DropdownOption from './Option.mjs';
+import useDataBuilder from '../../DataBuilder/data-builder-context.mjs';
+import useDataBuilderField from '../../DataBuilder/field-context.mjs';
+import { DropdownUI } from '../../DropdownUI/index.mjs';
+import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
+import { useNavigationContext } from './KeyboardNavigation/NavigationContext.mjs';
+import { useComboBox } from '../context/combobox-context.mjs';
+import { useKeyboardBinding } from './KeyboardNavigation/useKeyboardBinding.mjs';
+
+function OptionsList({ onOptionSelect }) {
+  const { onAddVariable } = useDataBuilder();
+  const { field } = useDataBuilderField();
+  const { isOptionSelected, canUseParentInputSearchValue, drillDown, optionsPayload, drillUp } = useComboBoxDropdownContext();
+  const { value: parentInputValue } = useComboBox();
+  const [result, optionsError, optionsState] = optionsPayload;
+  const { options = [], fallbackOptions = [] } = result || {};
+  useKeyboardBinding({ options, fallbackOptions, onEnter: handleOptionSelect });
+  function handleOptionSelect(option) {
+    if (option === "drill-up") {
+      drillUp();
+      return;
+    }
+    if (option.addVariable) {
+      const objectLocator = option.addVariable;
+      const variableLocator = `${objectLocator}.${field.key || toSnakeCase(field.name) || toSnakeCase(field?.schema?.title)}`;
+      onAddVariable?.(variableLocator, field.schema ?? {});
+      onOptionSelect({
+        $var: variableLocator
+      });
+    } else if (option.drillDownOptionFactory || option.childCategory && !option.value) {
+      drillDown(option);
+    } else {
+      onOptionSelect(option.value);
+    }
+  }
+  return /* @__PURE__ */ jsx(DropdownListState, { state: optionsState, error: optionsError, children: /* @__PURE__ */ jsx(
+    DropdownListOptions,
+    {
+      searchTerm: canUseParentInputSearchValue ? parentInputValue : void 0,
+      options,
+      fallbackOptions,
+      isOptionSelected,
+      handleOptionSelect
+    }
+  ) });
+}
+function DropdownListState({
+  state,
+  error,
+  children
+}) {
+  if (state === "rejected" || error) {
+    return /* @__PURE__ */ jsx(DropdownUI.ErrorHeading, { text: error?.message || "Something went wrong" });
+  }
+  if (state === "pending") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {}),
+      /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {}),
+      /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {})
+    ] });
+  }
+  return children;
+}
+function DropdownListOptions({
+  options,
+  fallbackOptions,
+  isOptionSelected,
+  handleOptionSelect,
+  searchTerm
+}) {
+  const { currentItem } = useNavigationContext();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !options.length && /* @__PURE__ */ jsx(DropdownUI.NoOptionsHeading, { text: searchTerm ? `No results found for: ${searchTerm}` : "No results found" }),
+    options.map((option, idx) => /* @__PURE__ */ jsx(
+      DropdownOption,
+      {
+        option,
+        selected: isOptionSelected(option),
+        current: deepEqual(option, currentItem),
+        onSelect: () => handleOptionSelect(option)
+      },
+      idx
+    )),
+    fallbackOptions.length > 0 && /* @__PURE__ */ jsx("hr", { className: css({ my: 2 }) }),
+    fallbackOptions.map((option, idx) => /* @__PURE__ */ jsx(
+      DropdownOption,
+      {
+        option,
+        selected: isOptionSelected(option),
+        current: deepEqual(option, currentItem),
+        onSelect: () => handleOptionSelect(option)
+      },
+      idx
+    ))
+  ] });
+}
+
+export { OptionsList };

package/dist/esm/components/ComboBox/Dropdown/SearchInput.mjs

@@ -0,0 +1,69 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '../../../styled-system/css/css.mjs';
+import '../../../styled-system/helpers.mjs';
+import '../../../styled-system/jsx/is-valid-prop.mjs';
+import { Flex } from '../../../styled-system/jsx/flex.mjs';
+import '../../../styled-system/patterns/visually-hidden.mjs';
+import { DropdownUI } from '../../DropdownUI/index.mjs';
+import { SvgIcon } from '../../SvgIcon/index.mjs';
+import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
+import { useComboBox } from '../context/combobox-context.mjs';
+import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
+import { useComboBoxDropdownSearchContext } from '../context/combobox-dropdown-search.mjs';
+import { dropdownCategoryConfig } from '../shared.mjs';
+
+const SearchInput = forwardRef(({ autoFocus }, ref) => {
+  const { activeCategory } = useComboBoxDropdownContext();
+  const { hideSearch } = useComboBoxDropdownSearchContext();
+  if (activeCategory && dropdownCategoryConfig[activeCategory]?.hideSearchInput) {
+    return null;
+  }
+  if (hideSearch) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(DropdownSearchComponent, { autoFocus, ref });
+});
+const DropdownSearchComponent = forwardRef(({ autoFocus }, ref) => {
+  const { value: parentInputValue, onValueChange: setParentValue } = useComboBox();
+  const { canUseParentInputSearchValue } = useComboBoxDropdownContext();
+  const { dropdownSearchInputValue, setDropdownSearchInputValue, setSearchSource } = useComboBoxDropdownSearchContext();
+  const hasParentInputSearch = !!parentInputValue && typeof parentInputValue === "string" && canUseParentInputSearchValue;
+  const hasDropdownInputSearch = dropdownSearchInputValue && typeof dropdownSearchInputValue === "string";
+  const hasSearchValue = hasParentInputSearch || hasDropdownInputSearch;
+  const handleClear = () => {
+    if (hasParentInputSearch) {
+      setParentValue?.("");
+    }
+    if (hasDropdownInputSearch) {
+      setDropdownSearchInputValue("");
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Flex, { dir: "row", gap: "0", justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsx(
+        DropdownUI.Search,
+        {
+          ref,
+          value: dropdownSearchInputValue,
+          onChange: setDropdownSearchInputValue,
+          autoFocus,
+          placeholder: canUseParentInputSearchValue ? parentInputValue : void 0,
+          onFocus: () => setSearchSource("dropdown-search-input")
+        }
+      ),
+      hasSearchValue && /* @__PURE__ */ jsx(DropdownUI.ClearSearchButton, { onClick: handleClear, children: /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.Close }) })
+    ] }),
+    /* @__PURE__ */ jsx(DropdownUI.SearchDivider, {})
+  ] });
+});
+
+export { SearchInput };

package/dist/esm/components/ComboBox/Dropdown/categoryContentMapping.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 { DropdownCategoryType } from '../shared.mjs';
+import { CustomValueCategoryContent } from './Categories/CustomValue.mjs';
+import { FormulasCategoryContent } from './Categories/Formulas/index.mjs';
+import { DropdownPanelFormulaConfig } from './Categories/Formulas/DropdownPanelFormulaConfig.mjs';
+import { LookupCategoryContent } from './Categories/Lookup.mjs';
+import { OptionsCategoryContent } from './Categories/Options.mjs';
+import { RootCategoryContent } from './Categories/Root.mjs';
+import { VariablesCategoryContent } from './Categories/Variables.mjs';
+
+const CATEGORY_COMPONENTS = {
+  [DropdownCategoryType.ROOT]: RootCategoryContent,
+  [DropdownCategoryType.OPTIONS]: OptionsCategoryContent,
+  [DropdownCategoryType.VARIABLE]: VariablesCategoryContent,
+  [DropdownCategoryType.FORMULA]: FormulasCategoryContent,
+  [DropdownCategoryType.FORMULA_CONFIG]: DropdownPanelFormulaConfig,
+  [DropdownCategoryType.CUSTOM]: CustomValueCategoryContent,
+  [DropdownCategoryType.SELECT_FROM_UDM_DYNAMICALLY]: LookupCategoryContent,
+  [DropdownCategoryType.LOOKUP_OPTIONS]: RootCategoryContent
+};
+
+export { CATEGORY_COMPONENTS };

package/dist/esm/components/ComboBox/DropdownPopover/DropdownPositioner.mjs

@@ -0,0 +1,55 @@
+"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 { usePopoverContext } from '@ark-ui/react/popover';
+import { useFloating, offset, shift, autoPlacement, size, autoUpdate } from '@floating-ui/react';
+import 'react';
+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';
+
+const GUTTER = 10;
+const VIEWPORT_PADDING = 8;
+const DropdownPositioner = ({ children }) => {
+  const context = usePopoverContext();
+  const anchorPops = context.getAnchorProps();
+  const { refs, floatingStyles } = useFloating({
+    whileElementsMounted: autoUpdate,
+    elements: {
+      reference: anchorPops.id ? document.getElementById(anchorPops.id) : void 0
+    },
+    middleware: [
+      offset({ mainAxis: GUTTER }),
+      shift({
+        padding: GUTTER * 2
+      }),
+      autoPlacement({
+        allowedPlacements: ["bottom-start", "top-start"],
+        crossAxis: true,
+        boundary: "clippingAncestors",
+        padding: GUTTER / 2
+      }),
+      size({
+        padding: VIEWPORT_PADDING,
+        apply({ elements, availableHeight, availableWidth }) {
+          const floating = elements.floating;
+          availableWidth = Math.floor(availableWidth);
+          availableHeight = Math.floor(availableHeight);
+          floating.style.setProperty("--available-width", `${availableWidth}px`);
+          floating.style.setProperty("--available-height", `${availableHeight}px`);
+        }
+      })
+    ]
+  });
+  return /* @__PURE__ */ jsx(Box, { ref: refs.setFloating, style: floatingStyles, zIndex: "popover", isolation: "isolate", children });
+};
+
+export { DropdownPositioner };

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

@@ -0,0 +1,108 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@membranehq/react}
+ * v0.1.0
+ */
+'use client';
+
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId, useRef } from 'react';
+import { DropdownUI } from '../../DropdownUI/index.mjs';
+import { DROPDOWN_NAVIGATOR_ID } from '../../DropdownUI/constants.mjs';
+import { useOptionListKeyNavDispatch } from '../../../helpers/hooks/keyboard-events.mjs';
+import { useWindowEvent } from '../../../helpers/hooks/useWindowEvent.mjs';
+import { css } from '../../../styled-system/css/css.mjs';
+import '../../../styled-system/helpers.mjs';
+import { Root, Anchor, Content as Content$1, Title } from '../../../ui-kit/styled/popover.mjs';
+import { useComboBox } from '../context/combobox-context.mjs';
+import '../context/combobox-dropdown-context.mjs';
+import '../context/combobox-dropdown-search.mjs';
+import { useDropdownStackContext } from '../context/combobox-dropdown-stack.mjs';
+import '@membranehq/sdk';
+import '../shared.mjs';
+import { DropdownPositioner } from './DropdownPositioner.mjs';
+import { BoundedPortal } from '../../FloatingPortalBoundary/index.mjs';
+import { DropdownFocusTrap } from '../FocusTrap/index.mjs';
+
+const GUTTER = 10;
+const POSITIONING = {
+  placement: "bottom-start",
+  gutter: GUTTER,
+  slide: true,
+  fitViewport: true
+};
+function DropdownPopoverProvider({ children, disabled }) {
+  const { isDropdownOpen, closeDropdown } = useComboBox();
+  return /* @__PURE__ */ jsx(
+    Root,
+    {
+      open: disabled ? false : isDropdownOpen,
+      onEscapeKeyDown: closeDropdown,
+      closeOnInteractOutside: false,
+      unmountOnExit: true,
+      lazyMount: true,
+      portalled: true,
+      autoFocus: false,
+      positioning: POSITIONING,
+      children: /* @__PURE__ */ jsx(
+        DropdownFocusTrap,
+        {
+          className: css({
+            w: "full",
+            ':not([contenteditable="true"]):not(:has([contenteditable="true"])) &': {
+              display: "flex",
+              alignItems: "center"
+            },
+            '[data-formula="condition"] &': {
+              p: "1.5",
+              alignItems: "flex-start!"
+            }
+          }),
+          children
+        }
+      )
+    }
+  );
+}
+function DropdownPopoverContent({ children }) {
+  return /* @__PURE__ */ jsx(BoundedPortal, { children: /* @__PURE__ */ jsx(DropdownPositioner, { children: /* @__PURE__ */ jsx(DropdownFocusTrap, { children: /* @__PURE__ */ jsx(Content, { children }) }) }) });
+}
+function DropdownAnchor({ children }) {
+  return /* @__PURE__ */ jsx(
+    Anchor,
+    {
+      className: css({
+        display: "inline",
+        maxW: "full",
+        ':not([contenteditable="true"]):not(:has([contenteditable="true"])) &': {
+          display: "inline-flex",
+          alignItems: "center"
+        }
+      }),
+      children
+    }
+  );
+}
+function Content({ children }) {
+  const id = useId();
+  const ref = useRef(null);
+  const { scopedComboboxId, closeDropdown } = useComboBox();
+  useOptionListKeyNavDispatch(ref.current, scopedComboboxId);
+  const { isClickWithinStackItem } = useDropdownStackContext(ref);
+  useClick((event) => {
+    if (!isClickWithinStackItem(event)) {
+      closeDropdown();
+    }
+  });
+  return /* @__PURE__ */ jsx(Content$1, { ref, "data-navigation-emitter-id": DROPDOWN_NAVIGATOR_ID, asChild: true, "aria-labelledby": id, children: /* @__PURE__ */ jsx(DropdownUI, { children: /* @__PURE__ */ jsxs(DropdownUI.Content, { children: [
+    /* @__PURE__ */ jsx(Title, { srOnly: true, id, children: "Options menu" }),
+    children
+  ] }) }) });
+}
+function useClick(cb) {
+  useWindowEvent("mouseup", cb);
+  useWindowEvent("touchend", cb);
+}
+
+export { DropdownAnchor, DropdownPopoverContent, DropdownPopoverProvider };