@integration-app/react 2.18.0 → 2.20.0

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -15,26 +15,10 @@ import { ItemIcon } from './ItemIcon.mjs';
 
 const ErrorHeading = forwardRef(({ className, text, ...props }, ref) => {
   const styles = dropdownRecipe();
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      role: "heading",
-      "aria-level": 2,
-      className: clsx(styles["error-heading"], className),
-      ...props,
-      ref,
-      children: [
-        /* @__PURE__ */ jsx(
-          ItemIcon,
-          {
-            type: SvgIconType.AlertCircle,
-            className: styles["error-heading-icon"]
-          }
-        ),
-        text
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("span", { role: "heading", "aria-level": 2, className: clsx(styles["error-heading"], className), ...props, ref, children: [
+    /* @__PURE__ */ jsx(ItemIcon, { type: SvgIconType.AlertCircle, className: styles["error-heading-icon"] }),
+    text
+  ] });
 });
 
 export { ErrorHeading };

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -15,26 +15,10 @@ import { ItemIcon } from './ItemIcon.mjs';
 
 const InfoHeading = forwardRef(({ className, text, ...props }, ref) => {
   const styles = dropdownRecipe();
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      role: "heading",
-      "aria-level": 2,
-      className: clsx(styles["info-heading"], className),
-      ...props,
-      ref,
-      children: [
-        /* @__PURE__ */ jsx(
-          ItemIcon,
-          {
-            type: SvgIconType.InfoCircle,
-            className: styles["info-heading-icon"]
-          }
-        ),
-        text
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("span", { role: "heading", "aria-level": 2, className: clsx(styles["info-heading"], className), ...props, ref, children: [
+    /* @__PURE__ */ jsx(ItemIcon, { type: SvgIconType.InfoCircle, className: styles["info-heading-icon"] }),
+    text
+  ] });
 });
 
 export { InfoHeading };

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -15,32 +15,32 @@ import { dropdownRecipe } from '../../recipes/dropdown.mjs';
 import { DropdownItemAriaContextProvider } from './item-aria-context.mjs';
 import { preventFocusShift } from './utils.mjs';
 
-const Item = forwardRef(({ children, className, current = false, ...props }, ref) => {
-  const titleId = useId();
-  const styles = dropdownRecipe();
-  return /* @__PURE__ */ jsx(DropdownItemAriaContextProvider, { value: { titleId }, children: /* @__PURE__ */ jsx(
-    DropdownItemDiv,
-    {
-      ref,
-      active: current,
-      className: clsx(styles.item, className),
-      "data-current": current || void 0,
-      role: "listitem",
-      "aria-labelledby": titleId,
-      onMouseDown: preventFocusShift,
-      ...props,
-      children
-    }
-  ) });
-});
-const DropdownItemDiv = forwardRef(
-  ({ children, active, ...props }, ref) => {
-    if (active) {
-      return /* @__PURE__ */ jsx(ScrollIntoViewDiv, { ...props, children });
-    }
-    return /* @__PURE__ */ jsx("div", { ref, ...props, children });
+const Item = forwardRef(
+  ({ children, className, current = false, ...props }, ref) => {
+    const titleId = useId();
+    const styles = dropdownRecipe();
+    return /* @__PURE__ */ jsx(DropdownItemAriaContextProvider, { value: { titleId }, children: /* @__PURE__ */ jsx(
+      DropdownItemDiv,
+      {
+        ref,
+        active: current,
+        className: clsx(styles.item, className),
+        "data-current": current || void 0,
+        role: "listitem",
+        "aria-labelledby": titleId,
+        onMouseDown: preventFocusShift,
+        ...props,
+        children
+      }
+    ) });
   }
 );
+const DropdownItemDiv = forwardRef(({ children, active, ...props }, ref) => {
+  if (active) {
+    return /* @__PURE__ */ jsx(ScrollIntoViewDiv, { ...props, children });
+  }
+  return /* @__PURE__ */ jsx("div", { ref, ...props, children });
+});
 const ScrollIntoViewDiv = forwardRef(({ children, ...props }, ref) => {
   const actualRef = useForwardedRef(ref);
   useScrollIntoViewOnce(actualRef);

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -10,10 +10,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Truncate } from '../Truncate/index.mjs';
 import { dropdownRecipe } from '../../recipes/dropdown.mjs';
 
-function ItemHint({
-  value,
-  prefix
-}) {
+function ItemHint({ value, prefix }) {
   const styles = dropdownRecipe();
   if (!value) return null;
   return /* @__PURE__ */ jsx(

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

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

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -38,21 +38,12 @@ const pluralForms = {
   one: " child",
   other: " children"
 };
-function ItemNestingIndicator({
-  count,
-  children
-}) {
+function ItemNestingIndicator({ count, children }) {
   const styles = itemNestedIndicatorRecipe();
   return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
     !!count && /* @__PURE__ */ jsxs("span", { className: styles["children-counter"], children: [
       count,
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: clsx(styles["counter-hidden-title"], visuallyHidden()),
-          children: pluralForms[pluralRules.select(count)]
-        }
-      )
+      /* @__PURE__ */ jsx("span", { className: clsx(styles["counter-hidden-title"], visuallyHidden()), children: pluralForms[pluralRules.select(count)] })
     ] }),
     children
   ] });

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

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

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -21,17 +21,7 @@ const List = forwardRef(
   ({ children, className, ...props }, ref) => {
     const { list } = dropdownRecipe();
     const sc = scrollShadow();
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        role: "list",
-        "aria-label": "Options",
-        className: clsx(list, sc, className),
-        ...props,
-        ref,
-        children
-      }
-    );
+    return /* @__PURE__ */ jsx(Box, { role: "list", "aria-label": "Options", className: clsx(list, sc, className), ...props, ref, children });
   }
 );
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -11,19 +11,11 @@ import { forwardRef } from 'react';
 import { clsx } from 'clsx';
 import { dropdownRecipe } from '../../recipes/dropdown.mjs';
 
-const ListHeader = forwardRef(({ children, className, ...props }, ref) => {
-  const styles = dropdownRecipe({});
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: clsx(styles["items-list-header"], className),
-      role: "heading",
-      "aria-level": 2,
-      ref,
-      ...props,
-      children
-    }
-  );
-});
+const ListHeader = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const styles = dropdownRecipe({});
+    return /* @__PURE__ */ jsx("span", { className: clsx(styles["items-list-header"], className), role: "heading", "aria-level": 2, ref, ...props, children });
+  }
+);
 
 export { ListHeader };

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -33,18 +33,10 @@ const LoadingItem = forwardRef(({ className, delay = 300, ...props }, ref) => {
   if (!shouldShow) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(
-    Flex,
-    {
-      className: clsx(styles["loading-item-container"], className),
-      ...props,
-      ref,
-      children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: styles["loading-item-icon"] }),
-        /* @__PURE__ */ jsx(Skeleton, { className: styles["loading-item-title"] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Flex, { className: clsx(styles["loading-item-container"], className), ...props, ref, children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: styles["loading-item-icon"] }),
+    /* @__PURE__ */ jsx(Skeleton, { className: styles["loading-item-title"] })
+  ] });
 });
 
 export { LoadingItem };

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -16,26 +16,10 @@ import { dropdownRecipe } from '../../recipes/dropdown.mjs';
 
 const NoOptionsHeading = forwardRef(({ className, text, ...props }, ref) => {
   const styles = dropdownRecipe();
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      role: "heading",
-      "aria-level": 2,
-      className: clsx(styles["no-options-heading"], className),
-      ...props,
-      ref,
-      children: [
-        /* @__PURE__ */ jsx(
-          SvgIcon,
-          {
-            type: SvgIconType.ZoomCancel,
-            className: styles["no-options-heading-icon"]
-          }
-        ),
-        /* @__PURE__ */ jsx(Truncate, { children: text })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("span", { role: "heading", "aria-level": 2, className: clsx(styles["no-options-heading"], className), ...props, ref, children: [
+    /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.ZoomCancel, className: styles["no-options-heading-icon"] }),
+    /* @__PURE__ */ jsx(Truncate, { children: text })
+  ] });
 });
 
 export { NoOptionsHeading };

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

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

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -16,17 +16,11 @@ import '../../styled-system/jsx/is-valid-prop.mjs';
 import { Box } from '../../styled-system/jsx/box.mjs';
 import '../../styled-system/patterns/visually-hidden.mjs';
 
-const PopoverContainer = forwardRef(({ children, className, ...props }, ref) => {
-  const styles = dropdownRecipe({});
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref,
-      className: clsx(styles["popover-container"], className),
-      ...props,
-      children
-    }
-  );
-});
+const PopoverContainer = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const styles = dropdownRecipe({});
+    return /* @__PURE__ */ jsx(Box, { ref, className: clsx(styles["popover-container"], className), ...props, children });
+  }
+);
 
 export { PopoverContainer };

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

@@ -2,11 +2,11 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from 'clsx';
 import useEventStopPropagation from '../../helpers/hooks/useEventStopPropagation.mjs';
@@ -21,26 +21,27 @@ const Search = forwardRef(
       onChange?.(event.target.value);
     }
     const handleEventAndStopPropagation = useEventStopPropagation(true);
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          className: clsx(styles["search-input"], className),
-          role: "searchbox",
-          placeholder: placeholder || "Start typing to search...",
-          value,
-          autoFocus,
-          onChange: handleSearchChange,
-          onKeyUp: handleEventAndStopPropagation,
-          onClick: handleEventAndStopPropagation,
-          "data-navigation-emitter-id": DROPDOWN_SEARCH_INPUT_ID,
-          ref,
-          ...props
-        }
-      ),
-      /* @__PURE__ */ jsx("hr", { className: styles["search-divider"] })
-    ] });
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        className: clsx(styles["search-input"], className),
+        role: "searchbox",
+        placeholder: placeholder || "Start typing to search...",
+        value,
+        autoFocus,
+        onChange: handleSearchChange,
+        onKeyUp: handleEventAndStopPropagation,
+        onClick: handleEventAndStopPropagation,
+        "data-navigation-emitter-id": DROPDOWN_SEARCH_INPUT_ID,
+        ref,
+        ...props
+      }
+    );
   }
 );
+const SearchDivider = () => {
+  const styles = dropdownRecipe();
+  return /* @__PURE__ */ jsx("hr", { className: styles["search-divider"] });
+};
 
-export { Search };
+export { Search, SearchDivider };

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

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

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

@@ -2,11 +2,12 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
 import { BackButton } from './BackButton.mjs';
+import { ClearSearchButton } from './ClearSearchButton.mjs';
 import { Content } from './Content.mjs';
 import { ErrorHeading } from './ErrorHeading.mjs';
 import { InfoHeading } from './InfoHeading.mjs';
@@ -21,11 +22,13 @@ import { LoadingItem } from './LoadingItem.mjs';
 import { NoOptionsHeading } from './NoOptionsHeading.mjs';
 import { Panel } from './Panel.mjs';
 import { PopoverContainer } from './PopoverContainer.mjs';
-import { Search } from './Search.mjs';
+import { SearchDivider, Search } from './Search.mjs';
 
 const DropdownUI = Object.assign(PopoverContainer, {
   Content,
   Search,
+  SearchDivider,
+  ClearSearchButton,
   Panel,
   List,
   Item,

package/dist/esm/components/DropdownUI/item-aria-context.mjs

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

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

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

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.18.0
+ * v2.20.0
  */
 'use client';
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -20,9 +20,7 @@ function FloatingPortalBoundary({
   const generatedId = useId();
   if (!React.isValidElement(children)) {
     if (process.env.NODE_ENV === "development") {
-      console.error(
-        "Error: FloatingPortalBoundary must have exactly one child element"
-      );
+      console.error("Error: FloatingPortalBoundary must have exactly one child element");
     }
     return /* @__PURE__ */ jsx(BoundaryContext.Provider, { value: id || generatedId, children });
   }
@@ -40,9 +38,7 @@ function BoundedPortal({
   const [container, setContainer] = useState(null);
   const containerRef = useRef(null);
   useEffect(() => {
-    const container2 = usePortal instanceof HTMLElement ? usePortal : document.querySelector(
-      `[${BOUNDARY_DATA_KEY}="${boundaryId}"]`
-    );
+    const container2 = usePortal instanceof HTMLElement ? usePortal : document.querySelector(`[${BOUNDARY_DATA_KEY}="${boundaryId}"]`);
     setContainer(container2);
   }, []);
   containerRef.current = container;

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.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -11,14 +11,12 @@ import { forwardRef } from 'react';
 import classes from './styles.module.css.mjs';
 import { SvgIcon } from '../SvgIcon/index.mjs';
 
-const Formula = forwardRef(
-  ({ children, onClick }, ref) => {
-    function handleClick() {
-      onClick?.();
-    }
-    return /* @__PURE__ */ jsx("div", { className: classes.formula, onClick: handleClick, ref, children: /* @__PURE__ */ jsx("div", { className: classes.variables, children }) });
+const Formula = forwardRef(({ children, onClick }, ref) => {
+  function handleClick() {
+    onClick?.();
   }
-);
+  return /* @__PURE__ */ jsx("div", { className: classes.formula, onClick: handleClick, ref, children: /* @__PURE__ */ jsx("div", { className: classes.variables, children }) });
+});
 Formula.displayName = "Formula";
 function Variable({ children }) {
   return /* @__PURE__ */ jsx("div", { className: classes.variable, children });

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.18.0
+ * v2.20.0
  */
 'use client';
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -36,13 +36,8 @@ function DataCollectionSelect({
     currentKey && !isDynamicLocation ? `/integrations/${integrationId}/data/${currentKey}` : null,
     (uri) => client.get(uri)
   );
-  const { data: locations = [], isLoading } = useSWR(
-    `/integrations/${integrationId}/data`,
-    (uri) => client.get(uri)
-  );
-  const filtered = locations.filter(
-    ({ type }) => type != DataLocationType.directory
-  );
+  const { data: locations = [], isLoading } = useSWR(`/integrations/${integrationId}/data`, (uri) => client.get(uri));
+  const filtered = locations.filter(({ type }) => type != DataLocationType.directory);
   const options = [];
   filtered.map((location2) => {
     options.push({

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.18.0
+ * v2.20.0
  */
 'use client';
 
@@ -21,15 +21,7 @@ function UdmSelect({ value, onChange }) {
   }
   return /* @__PURE__ */ jsxs(Row, { children: [
     /* @__PURE__ */ jsx(Cell.Name, { children: "Data Model" }),
-    /* @__PURE__ */ jsx(Cell.Combobox, { children: /* @__PURE__ */ jsx(
-      ComboBox,
-      {
-        placeholder: "Select Universal Data Model",
-        value,
-        options,
-        onChange
-      }
-    ) })
+    /* @__PURE__ */ jsx(Cell.Combobox, { children: /* @__PURE__ */ jsx(ComboBox, { placeholder: "Select Universal Data Model", value, options, onChange }) })
   ] });
 }