@integration-app/react 2.1.1 → 2.1.3

package/dist/cjs/components/DropdownUI/index.cjs

@@ -2,26 +2,27 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.1
+ * v2.1.3
  */
 'use client';
 
 'use strict';
 
+var BackButton = require('./BackButton.cjs');
 var Content = require('./Content.cjs');
-var Search = require('./Search.cjs');
-var Panel = require('./Panel.cjs');
-var List = require('./List.cjs');
-var Item = require('./Item.cjs');
-var NoOptionsHeading = require('./NoOptionsHeading.cjs');
 var ErrorHeading = require('./ErrorHeading.cjs');
-var LoadingItem = require('./LoadingItem.cjs');
-var ListHeader = require('./ListHeader.cjs');
-var BackButton = require('./BackButton.cjs');
+var InfoHeading = require('./InfoHeading.cjs');
+var Item = require('./Item.cjs');
 var ItemIcon = require('./ItemIcon.cjs');
-var ItemTitle = require('./ItemTitle.cjs');
 var ItemNestingIndicator = require('./ItemNestingIndicator.cjs');
+var ItemTitle = require('./ItemTitle.cjs');
+var List = require('./List.cjs');
+var ListHeader = require('./ListHeader.cjs');
+var LoadingItem = require('./LoadingItem.cjs');
+var NoOptionsHeading = require('./NoOptionsHeading.cjs');
+var Panel = require('./Panel.cjs');
 var PopoverContainer = require('./PopoverContainer.cjs');
+var Search = require('./Search.cjs');
 
 const DropdownUI = Object.assign(PopoverContainer.PopoverContainer, {
   Content: Content.Content,
@@ -33,6 +34,7 @@ const DropdownUI = Object.assign(PopoverContainer.PopoverContainer, {
   BackButton: BackButton.BackButton,
   NoOptionsHeading: NoOptionsHeading.NoOptionsHeading,
   ErrorHeading: ErrorHeading.ErrorHeading,
+  InfoHeading: InfoHeading.InfoHeading,
   LoadingItem: LoadingItem.LoadingItem,
   ItemIcon: ItemIcon.ItemIcon,
   ItemTitle: ItemTitle.ItemTitle,

package/dist/cjs/components/DropdownUI/item-context.cjs

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

package/dist/cjs/components/DropdownUI/sva-recipe.cjs

@@ -2,16 +2,30 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.1
+ * v2.1.3
  */
 'use client';
 
 'use strict';
 
 require('../../styled-system/css/css.cjs');
-require('../../styled-system/helpers.cjs');
+var cva = require('../../styled-system/css/cva.cjs');
 var sva = require('../../styled-system/css/sva.cjs');
 
+const scrollShadow = cva.cva({
+  base: {
+    background: `
+      linear-gradient(#ffffff 33%, rgba(255, 255, 255, 0)),
+      linear-gradient(rgba(255, 255, 255, 0), #ffffff 66%) 0 100%,
+      radial-gradient(farthest-side at 50% 0, rgba(34, 34, 34, 0.5), rgba(0, 0, 0, 0)),
+      radial-gradient(farthest-side at 50% 100%, rgba(34, 34, 34, 0.5), rgba(0, 0, 0, 0)) 0 100%
+    `,
+    backgroundColor: "transparent",
+    backgroundRepeat: "no-repeat",
+    backgroundAttachment: "local, local, scroll, scroll",
+    backgroundSize: "100% 15px, 100% 15px, 100% 2px, 100% 2px"
+  }
+});
 const dropdownRecipe = sva.sva({
   className: "dropdown",
   slots: [
@@ -25,6 +39,8 @@ const dropdownRecipe = sva.sva({
     "no-options-heading",
     "error-heading",
     "error-heading-icon",
+    "info-heading",
+    "info-heading-icon",
     "loading-item-container",
     "loading-item-icon",
     "loading-item-title",
@@ -43,7 +59,7 @@ const dropdownRecipe = sva.sva({
       borderWidth: "0.5",
       padding: "0",
       maxW: "none",
-      maxH: "var(--available-height, 100%)",
+      maxH: "var(--available-height)",
       h: "full",
       w: "fit-content"
     },
@@ -54,7 +70,7 @@ const dropdownRecipe = sva.sva({
       w: "full",
       minW: "56",
       maxW: "min(65em, 90vw)",
-      maxH: "var(--available-height, 100%)"
+      maxH: "inherit"
     },
     panel: {
       display: "flex",
@@ -132,6 +148,22 @@ const dropdownRecipe = sva.sva({
       h: "7",
       w: "7"
     },
+    "info-heading": {
+      display: "flex",
+      flexDir: "row",
+      gap: "1.5",
+      alignItems: "center",
+      px: "2",
+      py: "1",
+      minH: "6",
+      fontWeight: "medium",
+      textStyle: "sm"
+    },
+    "info-heading-icon": {
+      color: "fg.default",
+      h: "7",
+      w: "7"
+    },
     "loading-item-container": {
       display: "flex",
       flexDir: "row",
@@ -180,3 +212,4 @@ const dropdownRecipe = sva.sva({
 });
 
 exports.dropdownRecipe = dropdownRecipe;
+exports.scrollShadow = scrollShadow;

package/dist/cjs/components/DropdownUI/utils.cjs

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

package/dist/cjs/components/Formula/index.cjs

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

package/dist/cjs/components/Formula/styles.module.css.cjs

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

package/dist/cjs/components/InlineEditable.cjs

@@ -2,15 +2,15 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.1
+ * v2.1.3
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
 var React = require('react');
+var clsx = require('clsx');
 var InlineEditable_module = require('./InlineEditable.module.css.cjs');
 
 function InlineEditable({
@@ -60,7 +60,7 @@ function InlineEditable({
   const style = {
     "--placeholder-text": `"${placeholderText}"`
   };
-  const classNames = clsx(
+  const classNames = clsx.clsx(
     InlineEditable_module.default.wrapper,
     className,
     requiredWarning && InlineEditable_module.default.wrapperRequired

package/dist/cjs/components/InlineEditable.module.css.cjs

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

package/dist/cjs/components/Input/Input.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.1
+ * v2.1.3
  */
 'use client';
 
@@ -11,8 +11,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var Input_module = require('./Input.module.css.cjs');
 var useAutofocus = require('../../hooks/useAutofocus.cjs');
+var Input_module = require('./Input.module.css.cjs');
 
 const Input = React.forwardRef(
   ({ variant, className, autoFocus, ...props }, ref) => {
@@ -24,7 +24,7 @@ const Input = React.forwardRef(
       {
         ref: inputRef,
         autoComplete: "off",
-        className: clsx(
+        className: clsx.clsx(
           Input_module.default["uikit-input"],
           getClassNameByVariant(variant),
           className

package/dist/cjs/components/Input/Input.module.css.cjs

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

package/dist/cjs/components/Input/SearchInput.cjs

@@ -2,15 +2,15 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.1
+ * v2.1.3
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
 var React = require('react');
+var clsx = require('clsx');
 var Input = require('./Input.cjs');
 var SearchInput_module = require('./SearchInput.module.css.cjs');
 
@@ -20,7 +20,7 @@ const SearchInput = React.forwardRef(
       Input.Input,
       {
         id: "search-input",
-        className: clsx(className, SearchInput_module.default["uikit-searchInput"]),
+        className: clsx.clsx(className, SearchInput_module.default["uikit-searchInput"]),
         type: "search",
         ...props,
         ref

package/dist/cjs/components/Input/SearchInput.module.css.cjs

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

package/dist/cjs/components/Input/index.cjs

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

package/dist/cjs/components/IntegrationElements/DataSource/DataCollectionSelect.cjs

@@ -2,22 +2,22 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.1
+ * v2.1.3
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var integrationElementContext = require('../integration-element-context.cjs');
-var useSWR = require('swr');
 var sdk = require('@integration-app/sdk');
 var jsConvertCase = require('js-convert-case');
-var index = require('../../DataBuilderUI/index.cjs');
+var useSWR = require('swr');
 var ComboBox = require('../../ComboBox/ComboBox.cjs');
 var Form = require('../../DataBuilder/Form.cjs');
-var index$1 = require('../../DataBuilder/index.cjs');
 var integrationAppContext = require('../../../contexts/integration-app-context.cjs');
+var index$1 = require('../../DataBuilder/index.cjs');
+var index = require('../../DataBuilderUI/index.cjs');
+var integrationElementContext = require('../integration-element-context.cjs');
 
 function DataCollectionSelect({
   value,

package/dist/cjs/components/IntegrationElements/DataSource/UdmSelect.cjs

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

package/dist/cjs/components/IntegrationElements/DataSource/index.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.1
+ * v2.1.3
  */
 'use client';
 
@@ -10,17 +10,17 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var sdk = require('@integration-app/sdk');
-var integrationElementContext = require('../integration-element-context.cjs');
-var DataCollectionSelect = require('./DataCollectionSelect.cjs');
-var UdmSelect = require('./UdmSelect.cjs');
 var AdvancedOptions = require('../../AdvancedOptions.cjs');
 var SimpleInput = require('../../SimpleInput/SimpleInput.cjs');
+require('react');
+require('clsx');
 require('../../DataBuilderUI/index.cjs');
 require('../../Textarea/index.cjs');
 require('../../SimpleInput/SimpleInput.module.css.cjs');
-require('clsx');
-require('react');
 require('../../Radio/index.cjs');
+var integrationElementContext = require('../integration-element-context.cjs');
+var DataCollectionSelect = require('./DataCollectionSelect.cjs');
+var UdmSelect = require('./UdmSelect.cjs');
 
 function DataSourceConfig(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(LevelSpecificDataSourceConfig, { ...props }) });
@@ -100,6 +100,5 @@ function DataSourceConfigureEvents({
   ] });
 }
 
-exports.DataCollectionSelect = DataCollectionSelect.DataCollectionSelect;
 exports.DataSourceConfig = DataSourceConfig;
 exports.DataSourceConfigureEvents = DataSourceConfigureEvents;

package/dist/cjs/components/IntegrationElements/integration-element-context.cjs

@@ -2,17 +2,17 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.1
+ * v2.1.3
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var sdk = require('@integration-app/sdk');
 var React = require('react');
-var integrationAppIntegrationContext = require('../../contexts/integration-app-integration-context.cjs');
+var sdk = require('@integration-app/sdk');
 var integrationAppConnectionContext = require('../../contexts/integration-app-connection-context.cjs');
+var integrationAppIntegrationContext = require('../../contexts/integration-app-integration-context.cjs');
 
 const IntegrationElementContext = React.createContext({});
 function useIntegrationElementContext() {

package/dist/cjs/components/Integrations/IntegrationAvatar/index.cjs

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

package/dist/cjs/components/Integrations/IntegrationItem/index.cjs

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

package/dist/cjs/components/Integrations/IntegrationItemSkeleton.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.1
+ * v2.1.3
  */
 'use client';
 
@@ -10,13 +10,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var skeleton = require('../../ui-kit/styled/skeleton.cjs');
 require('../../styled-system/css/css.cjs');
 require('../../styled-system/helpers.cjs');
 require('../../styled-system/jsx/is-valid-prop.cjs');
 var flex = require('../../styled-system/jsx/flex.cjs');
 var circle = require('../../styled-system/jsx/circle.cjs');
 require('../../styled-system/patterns/visually-hidden.cjs');
+var skeleton = require('../../ui-kit/styled/skeleton.cjs');
 
 const IntegrationItemSkeleton = React.forwardRef(({ ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/cjs/components/Notification/Notification.module.css.cjs

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

package/dist/cjs/components/Notification/index.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.1
+ * v2.1.3
  */
 'use client';
 
@@ -11,8 +11,8 @@
 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 index = require('../SvgIcon/index.cjs');
 var index$1 = require('../Tooltip/index.cjs');
 var Notification_module = require('./Notification.module.css.cjs');
 
@@ -37,7 +37,7 @@ function NotificationBlock({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: clsx(
+      className: clsx.clsx(
         Notification_module.default.notification,
         getBlockClassnameByType(type),
         getBlockClassnameBySize(size),
@@ -73,7 +73,7 @@ function NotificationIcon({
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          className: clsx(
+          className: clsx.clsx(
             Notification_module.default.notificationIcon,
             getIconClassnameByType(type),
             className

package/dist/cjs/components/Popover/index.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.1
+ * v2.1.3
  */
 'use client';
 
@@ -10,104 +10,18 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var reactPopper = require('react-popper');
-var index = require('../Portal/index.cjs');
-var Popover_module = require('./Popover.module.css.cjs');
-var Debounce = require('../../helpers/Debounce.cjs');
-var useWindowEvent = require('../../hooks/useWindowEvent.cjs');
-var clsx = require('clsx');
-var getRefElement = require('../../helpers/getRefElement.cjs');
-require('../../styled-system/css/css.cjs');
-require('../../styled-system/helpers.cjs');
-require('../../styled-system/jsx/is-valid-prop.cjs');
-var box = require('../../styled-system/jsx/box.cjs');
-require('../../styled-system/patterns/visually-hidden.cjs');
+var index = require('../ComboBox/DropdownPortal/index.cjs');
 var popover = require('../../ui-kit/styled/popover.cjs');
 
-function GenericPopover({
-  refElement,
-  isOpen = false,
-  options = {},
-  children,
-  portalNode
-}) {
-  const [popperElement, setPopperElement] = React.useState();
-  const safeRefElement = getRefElement.getRefElement(refElement);
-  const {
-    styles,
-    attributes,
-    update: updatePopover
-  } = reactPopper.usePopper(safeRefElement, popperElement, options);
-  const [debouncedResizeCallback] = Debounce.default(() => {
-    void updatePopover?.();
-  }, 150);
-  useWindowEvent.useWindowEvent("resize", debouncedResizeCallback);
-  if (!isOpen) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Portal, { node: portalNode, children: /* @__PURE__ */ jsxRuntime.jsx(
-    box.Box,
-    {
-      ref: setPopperElement,
-      zIndex: "600",
-      style: styles.popper,
-      ...attributes.popper,
-      children
-    }
-  ) });
-}
 const DefaultPopper = React.forwardRef(
-  ({
-    placement = "bottom",
-    refElement,
-    isOpen = false,
-    offset = [0, 8],
-    className,
-    onClick,
-    children,
-    portalNode
-  }, ref) => {
-    const modifiers = [
-      {
-        name: "offset",
-        options: {
-          offset
-        }
-      }
-    ];
-    const popperJsOptions = {
-      placement,
-      modifiers
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      GenericPopover,
-      {
-        refElement,
-        isOpen: !!refElement && isOpen,
-        options: popperJsOptions,
-        portalNode,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            ref,
-            className: clsx(Popover_module.default.defaultPopover, className),
-            onClick,
-            children
-          }
-        )
-      }
-    ) });
-  }
-);
-DefaultPopper.displayName = "DefaultPopper";
-const PopoverNew = React.forwardRef(
   ({
     placement = "bottom-start",
     isOpen,
     offset = [0, 8],
     className,
     children,
-    triggerNode
+    triggerNode,
+    onClickOutside
   }, ref) => {
     const [crossAxis, mainAxis] = offset;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -115,6 +29,8 @@ const PopoverNew = React.forwardRef(
       {
         open: isOpen,
         lazyMount: true,
+        unmountOnExit: true,
+        onPointerDownOutside: onClickOutside,
         positioning: {
           placement,
           offset: {
@@ -123,8 +39,8 @@ const PopoverNew = React.forwardRef(
           }
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(popover.Trigger, { asChild: true, children: triggerNode }),
-          /* @__PURE__ */ jsxRuntime.jsx(popover.Positioner, { ref, children: /* @__PURE__ */ jsxRuntime.jsx(
+          triggerNode && /* @__PURE__ */ jsxRuntime.jsx(popover.Trigger, { asChild: true, children: triggerNode }),
+          /* @__PURE__ */ jsxRuntime.jsx(index.DropdownPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(popover.Positioner, { ref, children: /* @__PURE__ */ jsxRuntime.jsx(
             popover.Content,
             {
               bg: "neutral.2",
@@ -138,7 +54,7 @@ const PopoverNew = React.forwardRef(
               className,
               children
             }
-          ) })
+          ) }) })
         ]
       }
     );
@@ -146,4 +62,3 @@ const PopoverNew = React.forwardRef(
 );
 
 exports.DefaultPopper = DefaultPopper;
-exports.PopoverNew = PopoverNew;

package/dist/cjs/components/Portal/index.cjs

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

package/dist/cjs/components/Radio/Radio.module.css.cjs

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