@integration-app/react 2.18.0 → 2.20.0

package/dist/cjs/components/DropdownUI/ClearSearchButton.cjs

@@ -0,0 +1,59 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.20.0
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var svgIconType = require('../SvgIcon/svg-icon-type.cjs');
+require('../../styled-system/css/css.cjs');
+require('../../styled-system/helpers.cjs');
+var sva = require('../../styled-system/css/sva.cjs');
+var iconButton = require('../../ui-kit/styled/icon-button.cjs');
+var index = require('../SvgIcon/index.cjs');
+
+const dropdownClearSearchButtonRecipe = sva.sva({
+  className: "dropdown-clear-search-button",
+  slots: ["container", "button", "icon", "title"],
+  base: {
+    button: {
+      h: "6",
+      w: "6",
+      minW: "unset",
+      rounded: "md",
+      color: "slate.11",
+      _current: {
+        bg: "slate.3"
+      }
+    },
+    icon: {
+      w: "4",
+      h: "4"
+    }
+  }
+});
+const ClearSearchButton = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { button, icon } = dropdownClearSearchButtonRecipe();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      iconButton.IconButton,
+      {
+        ref,
+        variant: "ghost",
+        colorPalette: "gray",
+        className: clsx.clsx(button, className),
+        "aria-label": "Clear search",
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(index.SvgIcon, { type: svgIconType.SvgIconType.Close, className: icon })
+      }
+    );
+  }
+);
+
+exports.ClearSearchButton = ClearSearchButton;

package/dist/cjs/components/DropdownUI/Content.cjs

@@ -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';
 
@@ -18,9 +18,11 @@ require('../../styled-system/jsx/is-valid-prop.cjs');
 var flex = require('../../styled-system/jsx/flex.cjs');
 require('../../styled-system/patterns/visually-hidden.cjs');
 
-const Content = React.forwardRef(({ children, className, ...props }, ref) => {
-  const { content } = dropdown.dropdownRecipe({});
-  return /* @__PURE__ */ jsxRuntime.jsx(flex.Flex, { ref, className: clsx.clsx(content, className), ...props, children });
-});
+const Content = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { content } = dropdown.dropdownRecipe({});
+    return /* @__PURE__ */ jsxRuntime.jsx(flex.Flex, { ref, className: clsx.clsx(content, className), ...props, children });
+  }
+);
 
 exports.Content = Content;

package/dist/cjs/components/DropdownUI/ErrorHeading.cjs

@@ -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';
 
@@ -17,26 +17,10 @@ var ItemIcon = require('./ItemIcon.cjs');
 
 const ErrorHeading = React.forwardRef(({ className, text, ...props }, ref) => {
   const styles = dropdown.dropdownRecipe();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      role: "heading",
-      "aria-level": 2,
-      className: clsx.clsx(styles["error-heading"], className),
-      ...props,
-      ref,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ItemIcon.ItemIcon,
-          {
-            type: svgIconType.SvgIconType.AlertCircle,
-            className: styles["error-heading-icon"]
-          }
-        ),
-        text
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { role: "heading", "aria-level": 2, className: clsx.clsx(styles["error-heading"], className), ...props, ref, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ItemIcon.ItemIcon, { type: svgIconType.SvgIconType.AlertCircle, className: styles["error-heading-icon"] }),
+    text
+  ] });
 });
 
 exports.ErrorHeading = ErrorHeading;

package/dist/cjs/components/DropdownUI/InfoHeading.cjs

@@ -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';
 
@@ -17,26 +17,10 @@ var ItemIcon = require('./ItemIcon.cjs');
 
 const InfoHeading = React.forwardRef(({ className, text, ...props }, ref) => {
   const styles = dropdown.dropdownRecipe();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      role: "heading",
-      "aria-level": 2,
-      className: clsx.clsx(styles["info-heading"], className),
-      ...props,
-      ref,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ItemIcon.ItemIcon,
-          {
-            type: svgIconType.SvgIconType.InfoCircle,
-            className: styles["info-heading-icon"]
-          }
-        ),
-        text
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { role: "heading", "aria-level": 2, className: clsx.clsx(styles["info-heading"], className), ...props, ref, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ItemIcon.ItemIcon, { type: svgIconType.SvgIconType.InfoCircle, className: styles["info-heading-icon"] }),
+    text
+  ] });
 });
 
 exports.InfoHeading = InfoHeading;

package/dist/cjs/components/DropdownUI/Item.cjs

@@ -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';
 
@@ -17,32 +17,32 @@ var dropdown = require('../../recipes/dropdown.cjs');
 var itemAriaContext = require('./item-aria-context.cjs');
 var utils = require('./utils.cjs');
 
-const Item = React.forwardRef(({ children, className, current = false, ...props }, ref) => {
-  const titleId = React.useId();
-  const styles = dropdown.dropdownRecipe();
-  return /* @__PURE__ */ jsxRuntime.jsx(itemAriaContext.DropdownItemAriaContextProvider, { value: { titleId }, children: /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownItemDiv,
-    {
-      ref,
-      active: current,
-      className: clsx.clsx(styles.item, className),
-      "data-current": current || void 0,
-      role: "listitem",
-      "aria-labelledby": titleId,
-      onMouseDown: utils.preventFocusShift,
-      ...props,
-      children
-    }
-  ) });
-});
-const DropdownItemDiv = React.forwardRef(
-  ({ children, active, ...props }, ref) => {
-    if (active) {
-      return /* @__PURE__ */ jsxRuntime.jsx(ScrollIntoViewDiv, { ...props, children });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...props, children });
+const Item = React.forwardRef(
+  ({ children, className, current = false, ...props }, ref) => {
+    const titleId = React.useId();
+    const styles = dropdown.dropdownRecipe();
+    return /* @__PURE__ */ jsxRuntime.jsx(itemAriaContext.DropdownItemAriaContextProvider, { value: { titleId }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      DropdownItemDiv,
+      {
+        ref,
+        active: current,
+        className: clsx.clsx(styles.item, className),
+        "data-current": current || void 0,
+        role: "listitem",
+        "aria-labelledby": titleId,
+        onMouseDown: utils.preventFocusShift,
+        ...props,
+        children
+      }
+    ) });
   }
 );
+const DropdownItemDiv = React.forwardRef(({ children, active, ...props }, ref) => {
+  if (active) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ScrollIntoViewDiv, { ...props, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...props, children });
+});
 const ScrollIntoViewDiv = React.forwardRef(({ children, ...props }, ref) => {
   const actualRef = useForwardedRef.useForwardedRef(ref);
   useScrollIntoViewOnce(actualRef);

package/dist/cjs/components/DropdownUI/ItemHint.cjs

@@ -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';
 
@@ -12,10 +12,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var index = require('../Truncate/index.cjs');
 var dropdown = require('../../recipes/dropdown.cjs');
 
-function ItemHint({
-  value,
-  prefix
-}) {
+function ItemHint({ value, prefix }) {
   const styles = dropdown.dropdownRecipe();
   if (!value) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/components/DropdownUI/ItemIcon.cjs

@@ -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/cjs/components/DropdownUI/ItemNestingIndicator.cjs

@@ -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';
 
@@ -40,21 +40,12 @@ const pluralForms = {
   one: " child",
   other: " children"
 };
-function ItemNestingIndicator({
-  count,
-  children
-}) {
+function ItemNestingIndicator({ count, children }) {
   const styles = itemNestedIndicatorRecipe();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.wrapper, children: [
     !!count && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles["children-counter"], children: [
       count,
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: clsx.clsx(styles["counter-hidden-title"], visuallyHidden.visuallyHidden()),
-          children: pluralForms[pluralRules.select(count)]
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(styles["counter-hidden-title"], visuallyHidden.visuallyHidden()), children: pluralForms[pluralRules.select(count)] })
     ] }),
     children
   ] });

package/dist/cjs/components/DropdownUI/ItemTitle.cjs

@@ -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/cjs/components/DropdownUI/List.cjs

@@ -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';
 
@@ -23,17 +23,7 @@ const List = React.forwardRef(
   ({ children, className, ...props }, ref) => {
     const { list } = dropdown.dropdownRecipe();
     const sc = svaRecipe.scrollShadow();
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      box.Box,
-      {
-        role: "list",
-        "aria-label": "Options",
-        className: clsx.clsx(list, sc, className),
-        ...props,
-        ref,
-        children
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(box.Box, { role: "list", "aria-label": "Options", className: clsx.clsx(list, sc, className), ...props, ref, children });
   }
 );
 

package/dist/cjs/components/DropdownUI/ListHeader.cjs

@@ -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';
 
@@ -13,19 +13,11 @@ var React = require('react');
 var clsx = require('clsx');
 var dropdown = require('../../recipes/dropdown.cjs');
 
-const ListHeader = React.forwardRef(({ children, className, ...props }, ref) => {
-  const styles = dropdown.dropdownRecipe({});
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: clsx.clsx(styles["items-list-header"], className),
-      role: "heading",
-      "aria-level": 2,
-      ref,
-      ...props,
-      children
-    }
-  );
-});
+const ListHeader = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const styles = dropdown.dropdownRecipe({});
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(styles["items-list-header"], className), role: "heading", "aria-level": 2, ref, ...props, children });
+  }
+);
 
 exports.ListHeader = ListHeader;

package/dist/cjs/components/DropdownUI/LoadingItem.cjs

@@ -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';
 
@@ -35,18 +35,10 @@ const LoadingItem = React.forwardRef(({ className, delay = 300, ...props }, ref)
   if (!shouldShow) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    flex.Flex,
-    {
-      className: clsx.clsx(styles["loading-item-container"], className),
-      ...props,
-      ref,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: styles["loading-item-icon"] }),
-        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: styles["loading-item-title"] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(flex.Flex, { className: clsx.clsx(styles["loading-item-container"], className), ...props, ref, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: styles["loading-item-icon"] }),
+    /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: styles["loading-item-title"] })
+  ] });
 });
 
 exports.LoadingItem = LoadingItem;

package/dist/cjs/components/DropdownUI/NoOptionsHeading.cjs

@@ -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';
 
@@ -18,26 +18,10 @@ var dropdown = require('../../recipes/dropdown.cjs');
 
 const NoOptionsHeading = React.forwardRef(({ className, text, ...props }, ref) => {
   const styles = dropdown.dropdownRecipe();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      role: "heading",
-      "aria-level": 2,
-      className: clsx.clsx(styles["no-options-heading"], className),
-      ...props,
-      ref,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          index.SvgIcon,
-          {
-            type: svgIconType.SvgIconType.ZoomCancel,
-            className: styles["no-options-heading-icon"]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(index$1.Truncate, { children: text })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { role: "heading", "aria-level": 2, className: clsx.clsx(styles["no-options-heading"], className), ...props, ref, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index.SvgIcon, { type: svgIconType.SvgIconType.ZoomCancel, className: styles["no-options-heading-icon"] }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$1.Truncate, { children: text })
+  ] });
 });
 
 exports.NoOptionsHeading = NoOptionsHeading;

package/dist/cjs/components/DropdownUI/Panel.cjs

@@ -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/cjs/components/DropdownUI/PopoverContainer.cjs

@@ -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';
 
@@ -18,17 +18,11 @@ require('../../styled-system/jsx/is-valid-prop.cjs');
 var box = require('../../styled-system/jsx/box.cjs');
 require('../../styled-system/patterns/visually-hidden.cjs');
 
-const PopoverContainer = React.forwardRef(({ children, className, ...props }, ref) => {
-  const styles = dropdown.dropdownRecipe({});
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    box.Box,
-    {
-      ref,
-      className: clsx.clsx(styles["popover-container"], className),
-      ...props,
-      children
-    }
-  );
-});
+const PopoverContainer = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const styles = dropdown.dropdownRecipe({});
+    return /* @__PURE__ */ jsxRuntime.jsx(box.Box, { ref, className: clsx.clsx(styles["popover-container"], className), ...props, children });
+  }
+);
 
 exports.PopoverContainer = PopoverContainer;

package/dist/cjs/components/DropdownUI/Search.cjs

@@ -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';
 
@@ -23,26 +23,28 @@ const Search = React.forwardRef(
       onChange?.(event.target.value);
     }
     const handleEventAndStopPropagation = useEventStopPropagation.default(true);
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        input.Input,
-        {
-          className: clsx.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": constants.DROPDOWN_SEARCH_INPUT_ID,
-          ref,
-          ...props
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("hr", { className: styles["search-divider"] })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      input.Input,
+      {
+        className: clsx.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": constants.DROPDOWN_SEARCH_INPUT_ID,
+        ref,
+        ...props
+      }
+    );
   }
 );
+const SearchDivider = () => {
+  const styles = dropdown.dropdownRecipe();
+  return /* @__PURE__ */ jsxRuntime.jsx("hr", { className: styles["search-divider"] });
+};
 
 exports.Search = Search;
+exports.SearchDivider = SearchDivider;

package/dist/cjs/components/DropdownUI/constants.cjs

@@ -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/cjs/components/DropdownUI/index.cjs

@@ -2,13 +2,14 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.18.0
+ * v2.20.0
  */
 'use client';
 
 'use strict';
 
 var BackButton = require('./BackButton.cjs');
+var ClearSearchButton = require('./ClearSearchButton.cjs');
 var Content = require('./Content.cjs');
 var ErrorHeading = require('./ErrorHeading.cjs');
 var InfoHeading = require('./InfoHeading.cjs');
@@ -28,6 +29,8 @@ var Search = require('./Search.cjs');
 const DropdownUI = Object.assign(PopoverContainer.PopoverContainer, {
   Content: Content.Content,
   Search: Search.Search,
+  SearchDivider: Search.SearchDivider,
+  ClearSearchButton: ClearSearchButton.ClearSearchButton,
   Panel: Panel.Panel,
   List: List.List,
   Item: Item.Item,

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

@@ -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/cjs/components/DropdownUI/sva-recipe.cjs

@@ -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/cjs/components/DropdownUI/utils.cjs

@@ -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/cjs/components/FloatingPortalBoundary/index.cjs

@@ -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';
 
@@ -22,9 +22,7 @@ function FloatingPortalBoundary({
   const generatedId = React.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__ */ jsxRuntime.jsx(BoundaryContext.Provider, { value: id || generatedId, children });
   }
@@ -42,9 +40,7 @@ function BoundedPortal({
   const [container, setContainer] = React.useState(null);
   const containerRef = React.useRef(null);
   React.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;