@integration-app/react 2.1.2 → 2.1.4

package/dist/esm/components/DropdownUI/sva-recipe.mjs

@@ -2,179 +2,27 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 import '../../styled-system/css/css.mjs';
+import { cva } from '../../styled-system/css/cva.mjs';
 import '../../styled-system/helpers.mjs';
-import { sva } from '../../styled-system/css/sva.mjs';
 
-const dropdownRecipe = sva({
-  className: "dropdown",
-  slots: [
-    "popover-container",
-    "content",
-    "panel",
-    "search-input",
-    "search-divider",
-    "list",
-    "item",
-    "no-options-heading",
-    "error-heading",
-    "error-heading-icon",
-    "loading-item-container",
-    "loading-item-icon",
-    "loading-item-title",
-    "items-list-header",
-    "item-title"
-  ],
+const scrollShadow = cva({
   base: {
-    "popover-container": {
-      outline: "none",
-      display: "flex",
-      overflow: "hidden",
-      background: "white",
-      boxShadow: "xl",
-      rounded: "lg",
-      borderColor: "gray.2",
-      borderWidth: "0.5",
-      padding: "0",
-      maxW: "none",
-      maxH: "var(--available-height, 100%)",
-      h: "full",
-      w: "fit-content"
-    },
-    content: {
-      display: "flex",
-      flexDir: "column",
-      p: "1.5",
-      w: "full",
-      minW: "56",
-      maxW: "min(65em, 90vw)",
-      maxH: "var(--available-height, 100%)"
-    },
-    panel: {
-      display: "flex",
-      flexDir: "column",
-      overflow: "hidden",
-      pb: "1.5",
-      minH: "8",
-      _last: {
-        pb: "0"
-      }
-    },
-    "search-input": {
-      w: "full",
-      rounded: "none",
-      border: "none",
-      px: "2",
-      py: "1.5",
-      textStyle: "md",
-      fontWeight: "medium",
-      _placeholder: {}
-    },
-    "search-divider": {
-      pt: "0.5",
-      pb: "1.5"
-    },
-    list: {
-      overflowY: "auto",
-      position: "relative",
-      flexGrow: "1",
-      minH: "8",
-      maxW: "md"
-    },
-    item: {
-      display: "flex",
-      flexDir: "row",
-      gap: "1.5",
-      alignItems: "center",
-      px: "2",
-      py: "1",
-      cursor: "pointer",
-      minH: "6",
-      _hover: {
-        bg: "slate.3"
-      },
-      _current: {
-        bg: "slate.3"
-      },
-      rounded: "md"
-    },
-    "no-options-heading": {
-      display: "flex",
-      flexDir: "row",
-      gap: "1.5",
-      alignItems: "center",
-      px: "2",
-      py: "1",
-      minH: "6",
-      color: "slate.10",
-      fontWeight: "medium",
-      textStyle: "sm"
-    },
-    "error-heading": {
-      display: "flex",
-      flexDir: "row",
-      gap: "1.5",
-      alignItems: "center",
-      px: "2",
-      py: "1",
-      minH: "6",
-      fontWeight: "medium",
-      textStyle: "sm"
-    },
-    "error-heading-icon": {
-      color: "tomato.10",
-      h: "7",
-      w: "7"
-    },
-    "loading-item-container": {
-      display: "flex",
-      flexDir: "row",
-      gap: "1.5",
-      alignItems: "center",
-      px: "2",
-      py: "1"
-    },
-    "loading-item-icon": {
-      h: "6",
-      w: "6",
-      rounded: "md"
-    },
-    "loading-item-title": {
-      h: "5",
-      w: "3/5",
-      rounded: "md"
-    },
-    "items-list-header": {
-      display: "flex",
-      p: "2",
-      color: "slate.11",
-      textTransform: "uppercase",
-      fontSize: "xs",
-      fontWeight: "medium",
-      letterSpacing: "wide",
-      position: "sticky",
-      top: "0",
-      zIndex: "docked",
-      minH: "auto",
-      pointerEvents: "none",
-      background: "white"
-    },
-    "item-title": {
-      display: "flex",
-      flexGrow: "1",
-      flexDir: "row",
-      alignItems: "baseline",
-      gap: "1",
-      maxW: "full",
-      overflowWrap: "break-word",
-      textStyle: "sm",
-      fontWeight: "medium"
-    }
+    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"
   }
 });
 
-export { dropdownRecipe };
+export { scrollShadow };

package/dist/esm/components/DropdownUI/utils.mjs

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

package/dist/esm/components/Formula/index.mjs

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

package/dist/esm/components/Formula/styles.module.css.mjs

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

package/dist/esm/components/InlineEditable.mjs

@@ -2,13 +2,13 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
 import { useState } from 'react';
+import { clsx } from 'clsx';
 import classes from './InlineEditable.module.css.mjs';
 
 function InlineEditable({

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

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

package/dist/esm/components/Input/Input.mjs

@@ -2,15 +2,15 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useImperativeHandle } from 'react';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
+import { useAutofocus } from '../../helpers/hooks/useAutofocus.mjs';
 import classes from './Input.module.css.mjs';
-import { useAutofocus } from '../../hooks/useAutofocus.mjs';
 
 const Input = forwardRef(
   ({ variant, className, autoFocus, ...props }, ref) => {

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

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

package/dist/esm/components/Input/SearchInput.mjs

@@ -2,13 +2,13 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { clsx } from 'clsx';
 import { Input } from './Input.mjs';
 import classes from './SearchInput.module.css.mjs';
 

package/dist/esm/components/Input/SearchInput.module.css.mjs

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

package/dist/esm/components/Input/index.mjs

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

package/dist/esm/components/IntegrationElements/DataSource/DataCollectionSelect.mjs

@@ -2,20 +2,20 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useIntegrationElementContext } from '../integration-element-context.mjs';
-import useSWR from 'swr';
 import { getFormula, parseDataLocationPath, DataLocationType, schemaWithTitle } from '@integration-app/sdk';
 import { toHeaderCase } from 'js-convert-case';
-import { Row, Cell, DrilldownBlockContentWrapper } from '../../DataBuilderUI/index.mjs';
+import useSWR from 'swr';
 import { ComboBox } from '../../ComboBox/ComboBox.mjs';
 import { DataBuilderForm } from '../../DataBuilder/Form.mjs';
-import { makeDataField } from '../../DataBuilder/index.mjs';
 import { useIntegrationApp } from '../../../contexts/integration-app-context.mjs';
+import { makeDataField } from '../../DataBuilder/index.mjs';
+import { Row, Cell, DrilldownBlockContentWrapper } from '../../DataBuilderUI/index.mjs';
+import { useIntegrationElementContext } from '../integration-element-context.mjs';
 
 function DataCollectionSelect({
   value,

package/dist/esm/components/IntegrationElements/DataSource/UdmSelect.mjs

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

package/dist/esm/components/IntegrationElements/DataSource/index.mjs

@@ -2,23 +2,23 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { IntegrationElementLevel } from '@integration-app/sdk';
-import { useIntegrationElementContext } from '../integration-element-context.mjs';
-import { DataCollectionSelect } from './DataCollectionSelect.mjs';
-import { UdmSelect } from './UdmSelect.mjs';
 import { AdvancedOptions } from '../../AdvancedOptions.mjs';
 import { SimpleInput } from '../../SimpleInput/SimpleInput.mjs';
+import 'react';
+import 'clsx';
 import '../../DataBuilderUI/index.mjs';
 import '../../Textarea/index.mjs';
 import '../../SimpleInput/SimpleInput.module.css.mjs';
-import 'clsx';
-import 'react';
 import '../../Radio/index.mjs';
+import { useIntegrationElementContext } from '../integration-element-context.mjs';
+import { DataCollectionSelect } from './DataCollectionSelect.mjs';
+import { UdmSelect } from './UdmSelect.mjs';
 
 function DataSourceConfig(props) {
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 mb-2", children: /* @__PURE__ */ jsx(LevelSpecificDataSourceConfig, { ...props }) });
@@ -98,4 +98,4 @@ function DataSourceConfigureEvents({
   ] });
 }
 
-export { DataCollectionSelect, DataSourceConfig, DataSourceConfigureEvents };
+export { DataSourceConfig, DataSourceConfigureEvents };

package/dist/esm/components/IntegrationElements/integration-element-context.mjs

@@ -2,15 +2,15 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
-import { IntegrationElementLevel } from '@integration-app/sdk';
 import { createContext, useContext } from 'react';
-import { useIntegrationAppIntegration, IntegrationAppIntegrationProvider } from '../../contexts/integration-app-integration-context.mjs';
+import { IntegrationElementLevel } from '@integration-app/sdk';
 import { useIntegrationAppConnection, IntegrationAppConnectionProvider } from '../../contexts/integration-app-connection-context.mjs';
+import { useIntegrationAppIntegration, IntegrationAppIntegrationProvider } from '../../contexts/integration-app-integration-context.mjs';
 
 const IntegrationElementContext = createContext({});
 function useIntegrationElementContext() {

package/dist/esm/components/Integrations/IntegrationAvatar/index.mjs

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

package/dist/esm/components/Integrations/IntegrationItem/index.mjs

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

package/dist/esm/components/Integrations/IntegrationItemSkeleton.mjs

@@ -2,19 +2,19 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Skeleton } from '../../ui-kit/styled/skeleton.mjs';
 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 { Circle } from '../../styled-system/jsx/circle.mjs';
 import '../../styled-system/patterns/visually-hidden.mjs';
+import { Skeleton } from '../../ui-kit/styled/skeleton.mjs';
 
 const IntegrationItemSkeleton = forwardRef(({ ...props }, ref) => {
   return /* @__PURE__ */ jsxs(

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

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

package/dist/esm/components/Notification/index.mjs

@@ -2,15 +2,15 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { isValidElement } from 'react';
-import clsx from 'clsx';
-import { SvgIcon } from '../SvgIcon/index.mjs';
+import { clsx } from 'clsx';
 import { SvgIconType } from '../SvgIcon/svg-icon-type.mjs';
+import { SvgIcon } from '../SvgIcon/index.mjs';
 import { Tooltip } from '../Tooltip/index.mjs';
 import classes from './Notification.module.css.mjs';
 

package/dist/esm/components/Popover/index.mjs

@@ -2,110 +2,24 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
-import { usePopper } from 'react-popper';
-import { Portal } from '../Portal/index.mjs';
-import classes from './Popover.module.css.mjs';
-import debounce from '../../helpers/Debounce.mjs';
-import { useWindowEvent } from '../../hooks/useWindowEvent.mjs';
-import clsx from 'clsx';
-import { getRefElement } from '../../helpers/getRefElement.mjs';
-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';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { DropdownPortal } from '../ComboBox/DropdownPortal/index.mjs';
 import { Root, Trigger, Positioner, Content } from '../../ui-kit/styled/popover.mjs';
 
-function GenericPopover({
-  refElement,
-  isOpen = false,
-  options = {},
-  children,
-  portalNode
-}) {
-  const [popperElement, setPopperElement] = useState();
-  const safeRefElement = getRefElement(refElement);
-  const {
-    styles,
-    attributes,
-    update: updatePopover
-  } = usePopper(safeRefElement, popperElement, options);
-  const [debouncedResizeCallback] = debounce(() => {
-    void updatePopover?.();
-  }, 150);
-  useWindowEvent("resize", debouncedResizeCallback);
-  if (!isOpen) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Portal, { node: portalNode, children: /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref: setPopperElement,
-      zIndex: "600",
-      style: styles.popper,
-      ...attributes.popper,
-      children
-    }
-  ) });
-}
 const DefaultPopper = 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__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-      GenericPopover,
-      {
-        refElement,
-        isOpen: !!refElement && isOpen,
-        options: popperJsOptions,
-        portalNode,
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref,
-            className: clsx(classes.defaultPopover, className),
-            onClick,
-            children
-          }
-        )
-      }
-    ) });
-  }
-);
-DefaultPopper.displayName = "DefaultPopper";
-const PopoverNew = forwardRef(
   ({
     placement = "bottom-start",
     isOpen,
     offset = [0, 8],
     className,
     children,
-    triggerNode
+    triggerNode,
+    onClickOutside
   }, ref) => {
     const [crossAxis, mainAxis] = offset;
     return /* @__PURE__ */ jsxs(
@@ -113,6 +27,8 @@ const PopoverNew = forwardRef(
       {
         open: isOpen,
         lazyMount: true,
+        unmountOnExit: true,
+        onPointerDownOutside: onClickOutside,
         positioning: {
           placement,
           offset: {
@@ -121,8 +37,8 @@ const PopoverNew = forwardRef(
           }
         },
         children: [
-          /* @__PURE__ */ jsx(Trigger, { asChild: true, children: triggerNode }),
-          /* @__PURE__ */ jsx(Positioner, { ref, children: /* @__PURE__ */ jsx(
+          triggerNode && /* @__PURE__ */ jsx(Trigger, { asChild: true, children: triggerNode }),
+          /* @__PURE__ */ jsx(DropdownPortal, { children: /* @__PURE__ */ jsx(Positioner, { ref, children: /* @__PURE__ */ jsx(
             Content,
             {
               bg: "neutral.2",
@@ -136,11 +52,11 @@ const PopoverNew = forwardRef(
               className,
               children
             }
-          ) })
+          ) }) })
         ]
       }
     );
   }
 );
 
-export { DefaultPopper, PopoverNew };
+export { DefaultPopper };

package/dist/esm/components/Portal/index.mjs

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

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

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

package/dist/esm/components/Radio/index.mjs

@@ -2,14 +2,14 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
+ * v2.1.4
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
-import classes from './Radio.module.css.mjs';
 import { forwardRef } from 'react';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
+import classes from './Radio.module.css.mjs';
 
 const Radiobutton = forwardRef(
   ({ className, inline, ...props }, ref) => {