@integration-app/react 2.0.3 → 2.0.4-beta.0

package/dist/cjs/ui-kit/button.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/ui-kit/spinner.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/alert.cjs

@@ -3,7 +3,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/avatar.cjs

@@ -3,7 +3,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/badge.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/button.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/icon-button.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/icon.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/input.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/menu.cjs

@@ -3,7 +3,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/popover.cjs

@@ -3,7 +3,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -19,7 +19,7 @@ var createStyleContext = require('./utils/create-style-context.cjs');
 const { withRootProvider, withContext } = createStyleContext.createStyleContext(popover$1.popover);
 withRootProvider(popover.Popover.RootProvider);
 const Root = withRootProvider(popover.Popover.Root);
-withContext(popover.Popover.Anchor, "anchor");
+const Anchor = withContext(popover.Popover.Anchor, "anchor");
 withContext(popover.Popover.Arrow, "arrow");
 withContext(popover.Popover.ArrowTip, "arrowTip");
 withContext(popover.Popover.CloseTrigger, "closeTrigger");
@@ -27,14 +27,20 @@ const Content = withContext(popover.Popover.Content, "content");
 withContext(popover.Popover.Description, "description");
 withContext(popover.Popover.Indicator, "indicator");
 const Positioner = withContext(popover.Popover.Positioner, "positioner");
-withContext(popover.Popover.Title, "title");
+const Title = withContext(popover.Popover.Title, "title");
 const Trigger = withContext(popover.Popover.Trigger, "trigger");
 
 Object.defineProperty(exports, "Context", {
   enumerable: true,
   get: function () { return popover.PopoverContext; }
 });
+Object.defineProperty(exports, "usePopoverContext", {
+  enumerable: true,
+  get: function () { return popover.usePopoverContext; }
+});
+exports.Anchor = Anchor;
 exports.Content = Content;
 exports.Positioner = Positioner;
 exports.Root = Root;
+exports.Title = Title;
 exports.Trigger = Trigger;

package/dist/cjs/ui-kit/styled/skeleton.cjs

@@ -3,7 +3,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/spinner.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/text.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/tooltip.cjs

@@ -3,7 +3,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/cjs/ui-kit/styled/utils/create-style-context.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/esm/_modules/awesome-debounce-promise.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/esm/_modules/react-use-promise.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/esm/components/AdvancedOptions.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/esm/components/Button/Button.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/esm/components/Button/Button.module.css.mjs

@@ -1,7 +1,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

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

@@ -2,17 +2,13 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
-import { CATEGORY_COMPONENTS } from './categoryContentMapping.mjs';
-import '../context/combobox-context.mjs';
 import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
-import '../context/combobox-dropdown-search.mjs';
-import '../context/combobox-dropdown-stack.mjs';
-import '@integration-app/sdk';
+import { CATEGORY_COMPONENTS } from './categoryContentMapping.mjs';
 
 function ActiveCategoryContent({
   onOptionSelect

package/dist/esm/components/ComboBox/Dropdown/Categories/CustomValue.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/Dropdown/Categories/Formulas/DropdownPanelFormulaConfig.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -56,14 +56,18 @@ function DropdownPanelFormulaConfig({
 }) {
   const styles = formulaConfigRecipe();
   const formulas = getFormulas();
-  const { value, schema, variablesSchema } = useComboBox();
+  const { value, schema, variablesSchema, scopedComboboxId } = useComboBox();
   const { drillUp } = useComboBoxDropdownContext();
   const [localValue, setLocalValue] = useState(value);
   useEffect(() => {
     setLocalValue(value);
   }, [JSON.stringify(value)]);
-  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_LEFT, () => {
-    drillUp();
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_LEFT,
+    callback: () => {
+      drillUp();
+    }
   });
   const formula = getFormula(localValue);
   const formulaSpec = formula?.type && formulas[formula?.type];

package/dist/esm/components/ComboBox/Dropdown/Categories/Formulas/index.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/Dropdown/Categories/Lookup.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -28,11 +28,12 @@ import DataBuilderFormField from '../../../DataBuilder/Field.mjs';
 import { makeDataField } from '../../../DataBuilder/index.mjs';
 import { DataBuilderForm } from '../../../DataBuilder/Form.mjs';
 import { useKeyboardEventSubscribe, EVENT_TYPE } from '../../../../hooks/keyboard-events.mjs';
-import '../../context/combobox-context.mjs';
+import { useComboBox } from '../../context/combobox-context.mjs';
 import { useComboBoxDropdownContext } from '../../context/combobox-dropdown-context.mjs';
 import '../../context/combobox-dropdown-search.mjs';
 import '../../context/combobox-dropdown-stack.mjs';
 import { getLookupCollection } from './getLookupCollection.mjs';
+import { useMountDropdownReposition } from '../../DropdownPopover/helpers.mjs';
 
 function LookupCategoryContent({
   onOptionSelect
@@ -73,10 +74,12 @@ const lookupConfigRecipe = sva({
   }
 });
 function DataBuilderDrillDownLookup({ field, onChange }) {
+  useMountDropdownReposition();
   const { client } = useIntegrationAppClient();
   const { integrationId } = useIntegrationAppIntegration();
   const { connectionId } = useIntegrationAppConnection();
   const { drillUp } = useComboBoxDropdownContext();
+  const { scopedComboboxId } = useComboBox();
   const lookupValue = field.value?.$lookup ?? {};
   const styles = lookupConfigRecipe();
   const [
@@ -90,8 +93,12 @@ function DataBuilderDrillDownLookup({ field, onChange }) {
     () => getLookupSchemas({ field, client, connectionId, integrationId }),
     [getReferenceCollectionPathForSchema(field.schema)]
   );
-  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_LEFT, () => {
-    drillUp();
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_LEFT,
+    callback: () => {
+      drillUp();
+    }
   });
   function handleLookupChange(value) {
     onChange?.({

package/dist/esm/components/ComboBox/Dropdown/Categories/LookupOptions/ParametersPanel.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/Dropdown/Categories/LookupOptions/UiComponents.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/Dropdown/Categories/LookupOptions/index.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -226,16 +226,37 @@ function LookupOptionsList({
   onOptionSelect
 }) {
   const { isOptionSelected, drillUp } = useComboBoxDropdownContext();
+  const { scopedComboboxId } = useComboBox();
   const [currentOption, setCurrentOption] = useState(
     null
   );
-  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_DOWN, makePreviousOptionCurrent);
-  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_UP, makeNextOptionCurrent);
-  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_LEFT, () => {
-    drillUp();
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_DOWN,
+    callback: makePreviousOptionCurrent
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_UP,
+    callback: makeNextOptionCurrent
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_LEFT,
+    callback: () => {
+      drillUp();
+    }
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_RIGHT,
+    callback: handleKeyEnter
+  });
+  useKeyboardEventSubscribe({
+    scopedComboboxId,
+    event: EVENT_TYPE.OPTION_SELECT,
+    callback: handleKeyEnter
   });
-  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_RIGHT, handleKeyEnter);
-  useKeyboardEventSubscribe(EVENT_TYPE.OPTION_SELECT, handleKeyEnter);
   useDeepEffect(() => {
     if (!options?.length) {
       return;

package/dist/esm/components/ComboBox/Dropdown/Categories/Options.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/Dropdown/Categories/Root.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 
@@ -11,11 +11,7 @@ import { DropdownCategoryType } from '../../types.mjs';
 import { DropdownUI } from '../../../DropdownUI/index.mjs';
 import { OptionsList } from '../OptionsList.mjs';
 import { LookupOptionsCategoryContent } from './LookupOptions/index.mjs';
-import '../../context/combobox-context.mjs';
 import { useComboBoxDropdownContext } from '../../context/combobox-dropdown-context.mjs';
-import '../../context/combobox-dropdown-search.mjs';
-import '../../context/combobox-dropdown-stack.mjs';
-import '@integration-app/sdk';
 
 function RootCategoryContent({
   onOptionSelect

package/dist/esm/components/ComboBox/Dropdown/Categories/Variables.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

package/dist/esm/components/ComboBox/Dropdown/Categories/getLookupCollection.mjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 

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

@@ -2,18 +2,14 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import '../context/combobox-context.mjs';
-import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
-import '../context/combobox-dropdown-search.mjs';
-import '../context/combobox-dropdown-stack.mjs';
-import '@integration-app/sdk';
 import { DropdownUI } from '../../DropdownUI/index.mjs';
+import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
 
 const DrillUpButton = forwardRef(({ onClick, ...props }, ref) => {
   const { drillUp, drillDownStackTop } = useComboBoxDropdownContext();

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

@@ -2,62 +2,48 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';
 
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { DropdownUIPopper } from '../../ComboBoxElements/Popper.mjs';
 import { DropdownUI } from '../../DropdownUI/index.mjs';
-import { useWindowEvent } from '../../../hooks/useWindowEvent.mjs';
 import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context.mjs';
-import { useDropdownStackContext, DropdownStackContextProvider } from '../context/combobox-dropdown-stack.mjs';
+import { DropdownStackContextProvider } from '../context/combobox-dropdown-stack.mjs';
 import { SearchInput } from './SearchInput.mjs';
 import { ActiveCategoryContent } from './ActiveCategoryContent.mjs';
 import { DrillUpButton } from './DrillUpButton.mjs';
+import { DropdownPopoverProvider, DropdownAnchor, DropdownPopoverContent } from '../DropdownPopover/index.mjs';
 
-const Dropdown = forwardRef(
-  ({
-    referenceElement,
-    topDropdownPanelComponent,
-    autoFocusOnSearch,
-    onOptionSelect,
-    onClose
-  }, ref) => {
-    const { isClickInsideRefsAndChildren } = useDropdownStackContext(
-      ref
-    );
-    useClick((event) => {
-      if (!isClickInsideRefsAndChildren(event)) {
-        onClose();
-      }
-    });
-    useWindowEvent("keydown", (e) => {
-      e.key === "Escape" && onClose();
-    });
-    const { availableCategories } = useComboBoxDropdownContext();
-    if (availableCategories === null) {
-      return null;
-    }
-    if (availableCategories?.length < 1) {
-      return /* @__PURE__ */ jsx(DropdownStackContextProvider, { children: /* @__PURE__ */ jsx(DropdownUIPopper, { referenceElement, children: /* @__PURE__ */ jsx(DropdownUI, { ref, children: /* @__PURE__ */ jsxs(DropdownUI.List, { children: [
+function Dropdown({
+  topDropdownPanelComponent,
+  autoFocusOnSearch,
+  onOptionSelect,
+  children
+}) {
+  const { availableCategories } = useComboBoxDropdownContext();
+  if (availableCategories === null) {
+    return children;
+  }
+  if (availableCategories?.length < 1) {
+    return /* @__PURE__ */ jsx(DropdownStackContextProvider, { children: /* @__PURE__ */ jsxs(DropdownPopoverProvider, { children: [
+      /* @__PURE__ */ jsx(DropdownAnchor, { children }),
+      /* @__PURE__ */ jsx(DropdownPopoverContent, { children: /* @__PURE__ */ jsxs(DropdownUI.List, { children: [
         /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {}),
         /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {}),
         /* @__PURE__ */ jsx(DropdownUI.LoadingItem, {})
-      ] }) }) }) });
-    }
-    return /* @__PURE__ */ jsx(DropdownStackContextProvider, { children: /* @__PURE__ */ jsx(DropdownUIPopper, { referenceElement, children: /* @__PURE__ */ jsxs(DropdownUI, { ref, children: [
+      ] }) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(DropdownStackContextProvider, { children: /* @__PURE__ */ jsxs(DropdownPopoverProvider, { children: [
+    /* @__PURE__ */ jsx(DropdownAnchor, { children }),
+    /* @__PURE__ */ jsxs(DropdownPopoverContent, { children: [
       /* @__PURE__ */ jsx(DrillUpButton, {}),
       topDropdownPanelComponent && /* @__PURE__ */ jsx(Fragment, { children: topDropdownPanelComponent }),
       /* @__PURE__ */ jsx(SearchInput, { autoFocus: autoFocusOnSearch }),
       /* @__PURE__ */ jsx(ActiveCategoryContent, { onOptionSelect })
-    ] }) }) });
-  }
-);
-function useClick(cb) {
-  useWindowEvent("mouseup", cb);
-  useWindowEvent("touchend", cb);
+    ] })
+  ] }) });
 }
 
 export { Dropdown };

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3
+ * v2.0.4-beta.0
  */
 'use client';