@integration-app/react 2.0.3-beta.2 → 2.0.3

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

@@ -2,214 +2,39 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.2
+ * v2.0.3
  */
 'use client';
 
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var usehooksTs = require('usehooks-ts');
-var index = require('../SvgIcon/index.cjs');
-require('../Input/Input.cjs');
-var SearchInput = require('../Input/SearchInput.cjs');
-var useEventStopPropagation = require('../../hooks/useEventStopPropagation.cjs');
-var DropdownUIElements = require('./DropdownUIElements.cjs');
-var DropdownUI_module = require('./DropdownUI.module.css.cjs');
-var useForwardedRef = require('../../hooks/useForwardedRef.cjs');
-var DropdownUITab = require('./DropdownUITab.cjs');
+var Root = require('./Root.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 ItemIcon = require('./ItemIcon.cjs');
+var ItemTitle = require('./ItemTitle.cjs');
+var ItemNestingIndicator = require('./ItemNestingIndicator.cjs');
 
-const DropdownRoot = React.forwardRef(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx(DropdownUI_module.default.dropdown, className), ...props, children });
-  }
-);
-function DropdownTabs({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: DropdownUI_module.default.dropdown_tabs, ...props, children });
-}
-function DropdownTab({ children, selected, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      type: "button",
-      role: "tab",
-      className: DropdownUI_module.default.dropdown_tab,
-      "aria-selected": selected || void 0,
-      ...props,
-      children
-    }
-  );
-}
-const DropdownSearch = React.forwardRef(
-  ({ value, onChange, autoFocus, ...props }, ref) => {
-    function handleSearchChange(event) {
-      onChange?.(event.target.value);
-    }
-    const handleEventAndStopPropagation = useEventStopPropagation.default(true);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      DropdownPanel,
-      {
-        className: DropdownUI_module.default.dropdown_searchWrapper,
-        ...props,
-        ref,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          SearchInput.SearchInput,
-          {
-            variant: "border",
-            className: DropdownUI_module.default.dropdown_searchInput,
-            placeholder: props.placeholder || "Search",
-            value,
-            autoFocus,
-            onChange: handleSearchChange,
-            onKeyUp: handleEventAndStopPropagation,
-            onClick: handleEventAndStopPropagation
-          }
-        )
-      }
-    );
-  }
-);
-const DropdownPanel = React.forwardRef(
-  ({ withPaddings, className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: clsx(
-          DropdownUI_module.default.dropdown_panel,
-          className,
-          withPaddings && DropdownUI_module.default.dropdown_panel__withPaddings
-        ),
-        ref,
-        ...props,
-        children
-      }
-    );
-  }
-);
-const DropdownList = React.forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: DropdownUI_module.default.dropdown_optionList, ...props, ref, children });
-  }
-);
-const DropdownItem = React.forwardRef(
-  ({
-    children,
-    className,
-    active = false,
-    selected = false,
-    disabled = false,
-    readonly = false,
-    hasError = false,
-    isHighlighted = false,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      DropdownItemDiv,
-      {
-        ref,
-        active,
-        className: clsx(
-          DropdownUI_module.default.dropdown_optionItem,
-          isHighlighted && DropdownUI_module.default.dropdown_optionItem__highlighted,
-          className
-        ),
-        "aria-selected": selected || void 0,
-        "aria-current": active || void 0,
-        "aria-readonly": readonly || void 0,
-        "aria-disabled": disabled || void 0,
-        "aria-invalid": hasError || void 0,
-        role: "listitem",
-        ...props,
-        children
-      }
-    );
-  }
-);
-function DropdownLoadingPanel({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownList, { children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownItem, { readonly: true, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.ItemIcon, { type: index.SvgIconType.Loader }),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.ItemTitle, { children })
-  ] }) }) });
-}
-function DropdownErrorPanel({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DropdownPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownList, { children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownItem, { hasError: true, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.ItemIcon, { type: index.SvgIconType.AlertTriangle }),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownUIElements.ItemTitle, { children })
-  ] }) }) });
-}
-function DropdownHeaderItem({
-  children,
-  className,
-  clickable,
-  active,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DropdownItem,
-    {
-      className: clsx(
-        DropdownUI_module.default.dropdown_optionItem__header,
-        clickable && DropdownUI_module.default.dropdown_optionItem__clickableHeader,
-        className
-      ),
-      "aria-current": active || void 0,
-      role: "listitem",
-      ...props,
-      children
-    }
-  );
-}
-const DropdownUI = Object.assign(DropdownRoot, {
-  Tabs: DropdownTabs,
-  Tab: DropdownTab,
-  Search: DropdownSearch,
-  Panel: DropdownPanel,
-  List: DropdownList,
-  Item: DropdownItem,
-  HeaderItem: DropdownHeaderItem,
-  LoadingPanel: DropdownLoadingPanel,
-  ErrorPanel: DropdownErrorPanel
+const DropdownUI = Object.assign(Root.Root, {
+  Search: Search.Search,
+  Panel: Panel.Panel,
+  List: List.List,
+  Item: Item.Item,
+  ListHeader: ListHeader.ListHeader,
+  BackButton: BackButton.BackButton,
+  NoOptionsHeading: NoOptionsHeading.NoOptionsHeading,
+  ErrorHeading: ErrorHeading.ErrorHeading,
+  LoadingItem: LoadingItem.LoadingItem,
+  ItemIcon: ItemIcon.ItemIcon,
+  ItemTitle: ItemTitle.ItemTitle,
+  ItemNestingIndicator: ItemNestingIndicator.ItemNestingIndicator
 });
-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);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, ref: actualRef, children });
-});
-function useScrollIntoViewOnce(ref) {
-  const threshold = 0.7;
-  const freezeOnceVisible = true;
-  const entry = usehooksTs.useIntersectionObserver(ref, {
-    threshold,
-    freezeOnceVisible
-  });
-  React.useLayoutEffect(() => {
-    if (!entry) {
-      return;
-    }
-    if (
-      // Hack for TS
-      // IntersectionObserverEntry.isVisible is not in the type definition
-      entry["isVisible"] || entry.isIntersecting && entry.intersectionRatio > 0.7
-    ) {
-      return;
-    }
-    entry.target.scrollIntoView({
-      block: "nearest"
-    });
-  }, [entry]);
-}
 
-exports.DropdownUIElements = DropdownUIElements;
-exports.ItemTitle = DropdownUIElements.ItemTitle;
-exports.DropdownTab = DropdownUITab.DropdownTab;
 exports.DropdownUI = DropdownUI;

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

@@ -0,0 +1,20 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3
+ */
+'use client';
+
+'use strict';
+
+var React = require('react');
+
+const DropdownItemContext = React.createContext({});
+const DropdownItemContextProvider = DropdownItemContext.Provider;
+const useDropdownItemContext = () => {
+  return React.useContext(DropdownItemContext);
+};
+
+exports.DropdownItemContextProvider = DropdownItemContextProvider;
+exports.useDropdownItemContext = useDropdownItemContext;

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

@@ -0,0 +1,179 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3
+ */
+'use client';
+
+'use strict';
+
+require('../../styled-system/css/css.cjs');
+require('../../styled-system/helpers.cjs');
+var sva = require('../../styled-system/css/sva.cjs');
+
+const dropdownRecipe = sva.sva({
+  className: "dropdown",
+  slots: [
+    "root",
+    "navigator",
+    "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"
+  ],
+  base: {
+    navigator: {
+      outline: "none",
+      display: "flex",
+      overflow: "hidden",
+      background: "white",
+      boxShadow: "xl",
+      rounded: "lg",
+      borderColor: "gray.2",
+      borderWidth: "0.5"
+    },
+    root: {
+      display: "flex",
+      flexDir: "column",
+      p: "1.5",
+      w: "full",
+      minW: "56",
+      maxW: "min(65em, 90vw)",
+      maxH: "full"
+    },
+    panel: {
+      display: "flex",
+      flexDir: "column",
+      // TODO: should not be hidden
+      overflow: "hidden",
+      pb: "1.5",
+      _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",
+      // todo: is this valid?
+      minH: "0"
+      // TODO: limit options max width
+      // maxW: 'xl',
+    },
+    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"
+    }
+  }
+});
+
+exports.dropdownRecipe = dropdownRecipe;

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.0.3-beta.2
+ * v2.0.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.0.3-beta.2
+ * v2.0.3
  */
 'use client';
 

package/dist/cjs/components/InlineEditable.cjs

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

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.0.3-beta.2
+ * v2.0.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.0.3-beta.2
+ * v2.0.3
  */
 'use client';
 

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.0.3-beta.2
+ * v2.0.3
  */
 'use client';
 

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

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

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.0.3-beta.2
+ * v2.0.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.0.3-beta.2
+ * v2.0.3
  */
 'use client';
 

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

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.2
+ * v2.0.3
  */
 'use client';
 
@@ -14,9 +14,9 @@ var useSWR = require('swr');
 var sdk = require('@integration-app/sdk');
 var jsConvertCase = require('js-convert-case');
 var index = require('../../DataBuilderUI/index.cjs');
-var index$1 = require('../../ComboBox/index.cjs');
+var ComboBox = require('../../ComboBox/ComboBox.cjs');
 var Form = require('../../DataBuilder/Form.cjs');
-var index$2 = require('../../DataBuilder/index.cjs');
+var index$1 = require('../../DataBuilder/index.cjs');
 var integrationAppContext = require('../../../contexts/integration-app-context.cjs');
 
 function DataCollectionSelect({
@@ -85,7 +85,7 @@ function DataCollectionSelect({
     /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Name, { children: "Data Collection" }),
       /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Combobox, { disabled: isLoading, className: "flex-grow", children: /* @__PURE__ */ jsxRuntime.jsx(
-        index$1.ComboBox,
+        ComboBox.ComboBox,
         {
           value: currentKey,
           onChange: handleKeyChange,
@@ -100,7 +100,7 @@ function DataCollectionSelect({
       Form.DataBuilderForm,
       {
         onChange: handleParametersChange,
-        field: index$2.makeDataField({
+        field: index$1.makeDataField({
           schema: sdk.schemaWithTitle(
             location ? location.parametersSchema : {
               type: "object",

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.0.3-beta.2
+ * v2.0.3
  */
 'use client';
 
@@ -10,7 +10,7 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var sdk = require('@integration-app/sdk');
-var index$1 = require('../../ComboBox/index.cjs');
+var ComboBox = require('../../ComboBox/ComboBox.cjs');
 var index = require('../../DataBuilderUI/index.cjs');
 
 function UdmSelect({ value, onChange }) {
@@ -24,7 +24,7 @@ function UdmSelect({ value, onChange }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Name, { children: "Data Model" }),
     /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Combobox, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      index$1.ComboBox,
+      ComboBox.ComboBox,
       {
         placeholder: "Select Universal Data Model",
         value,

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.0.3-beta.2
+ * v2.0.3
  */
 'use client';
 

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

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

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.0.3-beta.2
+ * v2.0.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.0.3-beta.2
+ * v2.0.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.0.3-beta.2
+ * v2.0.3
  */
 'use client';
 
@@ -16,6 +16,7 @@ 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');
 
 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.0.3-beta.2
+ * v2.0.3
  */
 'use client';