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

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

@@ -0,0 +1,212 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useLayoutEffect } from 'react';
+import clsx from 'clsx';
+import { useIntersectionObserver } from 'usehooks-ts';
+import { SvgIconType } from '../SvgIcon/index.mjs';
+import '../Input/Input.mjs';
+import { SearchInput } from '../Input/SearchInput.mjs';
+import useEventStopPropagation from '../../hooks/useEventStopPropagation.mjs';
+import { ItemIcon, ItemTitle } from './DropdownUIElements.mjs';
+import * as DropdownUIElements from './DropdownUIElements.mjs';
+export { DropdownUIElements };
+import classes from './DropdownUI.module.css.mjs';
+import { useForwardedRef } from '../../hooks/useForwardedRef.mjs';
+export { DropdownTab } from './DropdownUITab.mjs';
+
+const DropdownRoot = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: clsx(classes.dropdown, className), ...props, children });
+  }
+);
+function DropdownTabs({ children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: classes.dropdown_tabs, ...props, children });
+}
+function DropdownTab({ children, selected, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      className: classes.dropdown_tab,
+      "aria-selected": selected || void 0,
+      ...props,
+      children
+    }
+  );
+}
+const DropdownSearch = forwardRef(
+  ({ value, onChange, autoFocus, ...props }, ref) => {
+    function handleSearchChange(event) {
+      onChange?.(event.target.value);
+    }
+    const handleEventAndStopPropagation = useEventStopPropagation(true);
+    return /* @__PURE__ */ jsx(
+      DropdownPanel,
+      {
+        className: classes.dropdown_searchWrapper,
+        ...props,
+        ref,
+        children: /* @__PURE__ */ jsx(
+          SearchInput,
+          {
+            variant: "border",
+            className: classes.dropdown_searchInput,
+            placeholder: props.placeholder || "Search",
+            value,
+            autoFocus,
+            onChange: handleSearchChange,
+            onKeyUp: handleEventAndStopPropagation,
+            onClick: handleEventAndStopPropagation
+          }
+        )
+      }
+    );
+  }
+);
+const DropdownPanel = forwardRef(
+  ({ withPaddings, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          classes.dropdown_panel,
+          className,
+          withPaddings && classes.dropdown_panel__withPaddings
+        ),
+        ref,
+        ...props,
+        children
+      }
+    );
+  }
+);
+const DropdownList = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { className: classes.dropdown_optionList, ...props, ref, children });
+  }
+);
+const DropdownItem = forwardRef(
+  ({
+    children,
+    className,
+    active = false,
+    selected = false,
+    disabled = false,
+    readonly = false,
+    hasError = false,
+    isHighlighted = false,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      DropdownItemDiv,
+      {
+        ref,
+        active,
+        className: clsx(
+          classes.dropdown_optionItem,
+          isHighlighted && classes.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__ */ jsx(DropdownPanel, { children: /* @__PURE__ */ jsx(DropdownList, { children: /* @__PURE__ */ jsxs(DropdownItem, { readonly: true, children: [
+    /* @__PURE__ */ jsx(ItemIcon, { type: SvgIconType.Loader }),
+    /* @__PURE__ */ jsx(ItemTitle, { children })
+  ] }) }) });
+}
+function DropdownErrorPanel({ children }) {
+  return /* @__PURE__ */ jsx(DropdownPanel, { children: /* @__PURE__ */ jsx(DropdownList, { children: /* @__PURE__ */ jsxs(DropdownItem, { hasError: true, children: [
+    /* @__PURE__ */ jsx(ItemIcon, { type: SvgIconType.AlertTriangle }),
+    /* @__PURE__ */ jsx(ItemTitle, { children })
+  ] }) }) });
+}
+function DropdownHeaderItem({
+  children,
+  className,
+  clickable,
+  active,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownItem,
+    {
+      className: clsx(
+        classes.dropdown_optionItem__header,
+        clickable && classes.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 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);
+  return /* @__PURE__ */ jsx("div", { ...props, ref: actualRef, children });
+});
+function useScrollIntoViewOnce(ref) {
+  const threshold = 0.7;
+  const freezeOnceVisible = true;
+  const entry = useIntersectionObserver(ref, {
+    threshold,
+    freezeOnceVisible
+  });
+  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]);
+}
+
+export { DropdownUI, ItemTitle };

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

@@ -0,0 +1,30 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+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 }) });
+  }
+);
+Formula.displayName = "Formula";
+function Variable({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: classes.variable, children });
+}
+function VariableSvgIcon({ type }) {
+  return /* @__PURE__ */ jsx(SvgIcon, { type, className: classes.variableSvgIcon });
+}
+
+export { Formula, Variable, VariableSvgIcon };

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

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+var css_248z = ".styles-module_formula__OQfTk {\n  display: inline-flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  border-width: 1px;\n  border-color: transparent;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n  padding-left: 0.375rem;\n  padding-right: 0.625rem;\n  border-radius: 0.25rem;\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n  max-width: 100%;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.styles-module_formula__OQfTk,\n.styles-module_formula__OQfTk .styles-module_formula__OQfTk .styles-module_formula__OQfTk,\n.styles-module_formula__OQfTk .styles-module_formula__OQfTk .styles-module_formula__OQfTk .styles-module_formula__OQfTk .styles-module_formula__OQfTk {\n  --tw-bg-opacity: 1;\n  background-color: rgb(13 121 194 / var(--tw-bg-opacity));\n}\n.styles-module_formula__OQfTk .styles-module_formula__OQfTk,\n.styles-module_formula__OQfTk .styles-module_formula__OQfTk .styles-module_formula__OQfTk .styles-module_formula__OQfTk,\n.styles-module_formula__OQfTk .styles-module_formula__OQfTk .styles-module_formula__OQfTk .styles-module_formula__OQfTk .styles-module_formula__OQfTk .styles-module_formula__OQfTk {\n  background-color: #3394d6;\n}\n[aria-disabled='true'] .styles-module_formula__OQfTk {\n  cursor: default;\n  --tw-border-opacity: 1;\n  border-color: rgb(170 170 170 / var(--tw-border-opacity));\n  --tw-bg-opacity: 1;\n  background-color: rgb(170 170 170 / var(--tw-bg-opacity));\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.styles-module_variables__oh8zv {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-start;\n  -moz-column-gap: 0.5rem;\n       column-gap: 0.5rem;\n  row-gap: 0.25rem;\n}\n.styles-module_variable__iiz48 {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: flex-start;\n  flex-shrink: 1;\n  flex-grow: 0;\n  border-radius: 0.25rem;\n}\n.styles-module_variable__iiz48 [class*='tagPlaceholder'],\n.styles-module_variable__iiz48 .tiptap {\n  border-radius: 0.25rem;\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n.styles-module_variable__iiz48 [class*='tagPlaceholder']:empty {\n  width: 4rem;\n}\n.styles-module_variableSvgIcon__WRHNL {\n  margin-right: 0.375rem;\n  height: 1.25rem;\n  width: 1.25rem;\n}\n.styles-module_addButton__E1zAr {\n  flex-shrink: 0;\n  flex-grow: 0;\n  margin-left: 0.5rem;\n  height: 1rem;\n  width: 1rem;\n  padding: 0px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n.styles-module_addButton__E1zAr:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity));\n}\n.styles-module_addButton__E1zAr svg {\n  height: 0.75rem;\n  width: 0.75rem;\n}\n";
+var classes = {"formula":"styles-module_formula__OQfTk","variables":"styles-module_variables__oh8zv","variable":"styles-module_variable__iiz48","variableSvgIcon":"styles-module_variableSvgIcon__WRHNL","addButton":"styles-module_addButton__E1zAr"};
+styleInject(css_248z);
+
+export { classes as default };

package/dist/esm/components/InlineEditable.mjs

@@ -0,0 +1,86 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useState } from 'react';
+import classes from './InlineEditable.module.css.mjs';
+
+function InlineEditable({
+  value,
+  className,
+  placeholder = "Enter some text",
+  onChange,
+  onEnter,
+  onEsc,
+  onFocus,
+  onBlur,
+  editable = true,
+  required = false,
+  autoFocus = false,
+  ...props
+}) {
+  const [requiredWarning, setRequiredWarning] = useState(false);
+  function handleChange(event) {
+    onChange?.(event?.target?.value);
+  }
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.target.blur();
+      onEnter?.(value);
+      return;
+    }
+    if (event.key === "Escape") {
+      event.target.blur();
+      onEsc?.(value);
+      return;
+    }
+  };
+  const handleFocus = (event) => {
+    onFocus?.(event?.target?.value);
+  };
+  const handleBlur = (event) => {
+    if (required) {
+      setRequiredWarning(!event?.target?.value);
+      if (!event?.target?.value) {
+        return;
+      }
+    }
+    onChange?.(event?.target?.value);
+    onBlur?.(event?.target?.value);
+  };
+  const placeholderText = requiredWarning ? "Required field" : placeholder;
+  const style = {
+    "--placeholder-text": `"${placeholderText}"`
+  };
+  const classNames = clsx(
+    classes.wrapper,
+    className,
+    requiredWarning && classes.wrapperRequired
+  );
+  return /* @__PURE__ */ jsxs("span", { className: classNames, ...props, title: value, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: classes.input,
+        onChange: handleChange,
+        value,
+        placeholder: placeholderText,
+        readOnly: !editable,
+        required,
+        autoFocus,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: classes.span, style, children: value?.replace(/\s/g, "\xA0") })
+  ] });
+}
+
+export { InlineEditable };

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

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+var css_248z = ".InlineEditable-module_wrapper__yfCEq,\n.InlineEditable-module_input__5qjuK {\n\n  color: currentColor\n}\n\n.InlineEditable-module_wrapper__yfCEq {\n\n  position: relative;\n\n  display: inline-block;\n\n  cursor: default\n}\n\n.InlineEditable-module_span__Mc5je {\n\n  visibility: visible;\n\n  display: block;\n\n  --placeholder-text: 'Enter some text'\n}\n\n.InlineEditable-module_span__Mc5je:empty::after {\n\n  --tw-text-opacity: 1;\n\n  color: rgb(156 163 175 / var(--tw-text-opacity));\n  content: var(--placeholder-text)\n}\n\n.InlineEditable-module_wrapperRequired__1EmUH .InlineEditable-module_span__Mc5je:empty::after {\n\n  --tw-text-opacity: 1;\n\n  color: rgb(153 27 27 / var(--tw-text-opacity))\n}\n\n.InlineEditable-module_input__5qjuK {\n\n  position: absolute;\n\n  top: 0px;\n\n  left: 0px;\n\n  right: 0px;\n\n  bottom: 0px;\n\n  width: 100%;\n\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-duration: 150ms;\n\n  margin: 0px;\n\n  padding: 0px;\n  border-top-color: transparent !important;\n  opacity: 0\n}\n\n.InlineEditable-module_input__5qjuK:hover,\n.InlineEditable-module_input__5qjuK:focus {\n\n  opacity: 1\n}\n\n.InlineEditable-module_input__5qjuK:focus {\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px\n}\n\n.InlineEditable-module_input__5qjuK:focus + .InlineEditable-module_span__Mc5je {\n\n  visibility: hidden\n}\n\n.InlineEditable-module_wrapper__yfCEq:hover .InlineEditable-module_span__Mc5je {\n\n  visibility: hidden\n}\n\n.InlineEditable-module_wrapper__yfCEq:hover .InlineEditable-module_input__5qjuK {\n\n  visibility: visible\n}\n";
+var classes = {"wrapper":"InlineEditable-module_wrapper__yfCEq","input":"InlineEditable-module_input__5qjuK","span":"InlineEditable-module_span__Mc5je","wrapperRequired":"InlineEditable-module_wrapperRequired__1EmUH"};
+styleInject(css_248z);
+
+export { classes as default };

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

@@ -0,0 +1,48 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+import clsx from 'clsx';
+import classes from './Input.module.css.mjs';
+import { useAutofocus } from '../../hooks/useAutofocus.mjs';
+
+const Input = forwardRef(
+  ({ variant, className, autoFocus, ...props }, ref) => {
+    const inputRef = useRef();
+    useImperativeHandle(ref, () => inputRef.current);
+    useAutofocus(inputRef, autoFocus);
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        autoComplete: "off",
+        className: clsx(
+          classes["uikit-input"],
+          getClassNameByVariant(variant),
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+function getClassNameByVariant(variant) {
+  switch (variant) {
+    case "background":
+      return classes["uikit-input__background"];
+    case "transparent":
+      return classes["uikit-input__transparent"];
+    case "border":
+    default:
+      return classes["uikit-input__border"];
+  }
+}
+
+export { Input };

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

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+var css_248z = ".Input-module_container__zLqel {\n    width: 100%\n}\n@media (min-width: 640px) {\n    .Input-module_container__zLqel {\n        max-width: 640px\n    }\n}\n@media (min-width: 768px) {\n    .Input-module_container__zLqel {\n        max-width: 768px\n    }\n}\n@media (min-width: 1024px) {\n    .Input-module_container__zLqel {\n        max-width: 1024px\n    }\n}\n@media (min-width: 1280px) {\n    .Input-module_container__zLqel {\n        max-width: 1280px\n    }\n}\n@media (min-width: 1536px) {\n    .Input-module_container__zLqel {\n        max-width: 1536px\n    }\n}\n.Input-module_uikit-input__flF6E {\n    border-radius: 0.25rem;\n    padding-left: 1rem;\n    padding-right: 1rem;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 100ms;\n    height: 2.25rem;\n    border-width: 1px\n}\n.Input-module_uikit-input__flF6E::-moz-placeholder {\n    --tw-placeholder-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-placeholder-opacity))\n}\n.Input-module_uikit-input__flF6E::placeholder {\n    --tw-placeholder-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-placeholder-opacity))\n}\n.Input-module_uikit-input__flF6E {\n    --tw-text-opacity: 1;\n    color: rgb(0 0 0 / var(--tw-text-opacity))\n}\n.Input-module_uikit-input__flF6E:focus {\n    outline: 2px solid transparent;\n    outline-offset: 2px\n}\n.Input-module_uikit-input__flF6E:disabled {\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity))\n}\n.Input-module_uikit-input__flF6E:disabled::-moz-placeholder {\n    --tw-placeholder-opacity: 1;\n    color: rgb(221 221 221 / var(--tw-placeholder-opacity))\n}\n.Input-module_uikit-input__flF6E:disabled::placeholder {\n    --tw-placeholder-opacity: 1;\n    color: rgb(221 221 221 / var(--tw-placeholder-opacity))\n}\n.Input-module_uikit-input__border__3atRZ {\n    --tw-border-opacity: 1;\n    border-color: rgb(221 221 221 / var(--tw-border-opacity));\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n.Input-module_uikit-input__border__3atRZ:focus {\n    --tw-border-opacity: 1;\n    border-color: rgb(0 0 0 / var(--tw-border-opacity))\n}\n.Input-module_uikit-input__border__3atRZ:disabled {\n    --tw-border-opacity: 0.6\n}\n.Input-module_uikit-input__border__3atRZ:hover:not(:disabled,:focus) {\n    --tw-border-opacity: 1;\n    border-color: rgb(170 170 170 / var(--tw-border-opacity))\n}\n.Input-module_uikit-input__background__B0f1R {\n    --tw-border-opacity: 1;\n    border-color: rgb(248 248 248 / var(--tw-border-opacity));\n    --tw-bg-opacity: 1;\n    background-color: rgb(248 248 248 / var(--tw-bg-opacity))\n}\n.Input-module_uikit-input__background__B0f1R:focus {\n    --tw-border-opacity: 1;\n    border-color: rgb(0 0 0 / var(--tw-border-opacity))\n}\n.Input-module_uikit-input__background__B0f1R:disabled {\n    --tw-border-opacity: 0.6;\n    --tw-bg-opacity: 0.6\n}\n.Input-module_uikit-input__background__B0f1R:hover:not(:disabled,:focus) {\n    --tw-border-opacity: 1;\n    border-color: rgb(221 221 221 / var(--tw-border-opacity))\n}\n.Input-module_uikit-input__transparent__D8kde {\n    border-color: transparent;\n    background-color: transparent\n}\n";
+var classes = {"container":"Input-module_container__zLqel","uikit-input":"Input-module_uikit-input__flF6E","uikit-input__border":"Input-module_uikit-input__border__3atRZ","uikit-input__background":"Input-module_uikit-input__background__B0f1R","uikit-input__transparent":"Input-module_uikit-input__transparent__D8kde"};
+styleInject(css_248z);
+
+export { classes as default };

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

@@ -0,0 +1,30 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Input } from './Input.mjs';
+import classes from './SearchInput.module.css.mjs';
+
+const SearchInput = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: "search-input",
+        className: clsx(className, classes["uikit-searchInput"]),
+        type: "search",
+        ...props,
+        ref
+      }
+    );
+  }
+);
+
+export { SearchInput };

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

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+var css_248z = "input.SearchInput-module_uikit-searchInput__7ah3R {\n  padding-left: 2.25rem;\n  background-repeat: no-repeat;\n  background-size: 1.25rem;\n  background-position: 0.625rem 0.45rem;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath stroke='%23AAA' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.333a5.834 5.834 0 1 0 11.667 0 5.834 5.834 0 0 0-11.667 0ZM17.5 17.5l-5-5'/%3E%3C/svg%3E\");\n}\n\ninput.SearchInput-module_uikit-searchInput__7ah3R:hover:not(:disabled,:focus) {\n    /* @apply stroke-current text-neutral05; */\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath stroke='%23696969' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.333a5.834 5.834 0 1 0 11.667 0 5.834 5.834 0 0 0-11.667 0ZM17.5 17.5l-5-5'/%3E%3C/svg%3E\");\n  }\n\ninput.SearchInput-module_uikit-searchInput__7ah3R:focus {\n    /* @apply stroke-current text-black; */\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.333a5.834 5.834 0 1 0 11.667 0 5.834 5.834 0 0 0-11.667 0ZM17.5 17.5l-5-5'/%3E%3C/svg%3E\");\n  }\n\ninput.SearchInput-module_uikit-searchInput__7ah3R::-webkit-search-decoration,input.SearchInput-module_uikit-searchInput__7ah3R::-webkit-search-cancel-button,input.SearchInput-module_uikit-searchInput__7ah3R::-webkit-search-results-button,input.SearchInput-module_uikit-searchInput__7ah3R::-webkit-search-results-decoration {\n    display: none !important;\n  }\n";
+var classes = {"uikit-searchInput":"SearchInput-module_uikit-searchInput__7ah3R"};
+styleInject(css_248z);
+
+export { classes as default };

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

@@ -0,0 +1,14 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { Input } from './Input.mjs';
+export { SearchInput } from './SearchInput.mjs';
+
+
+
+export { Input, Input as default };

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

@@ -0,0 +1,117 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'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 { ComboBox } from '../../ComboBox/index.mjs';
+import { DataBuilderForm } from '../../DataBuilder/Form.mjs';
+import { makeDataField } from '../../DataBuilder/index.mjs';
+import { useIntegrationApp } from '../../../contexts/integration-app-context.mjs';
+
+function DataCollectionSelect({
+  value,
+  onChange,
+  variablesSchema
+}) {
+  const { integrationId } = useIntegrationElementContext();
+  const client = useIntegrationApp();
+  let currentKey = value?.collectionKey;
+  let currentParameters = value?.collectionParameters;
+  const isDynamicLocation = !!getFormula(currentKey);
+  if (value?.path && !currentKey) {
+    const pointer = parseDataLocationPath(value?.path);
+    currentKey = pointer?.key;
+    currentParameters = pointer?.parameters;
+  }
+  const { data: location } = useSWR(
+    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 options = [];
+  filtered.map((location2) => {
+    options.push({
+      value: location2.key,
+      label: location2.name?.toString() ?? toHeaderCase(location2.key)
+    });
+  });
+  function handleKeyChange(key) {
+    if (key !== currentKey) {
+      return onChange({
+        collectionKey: key,
+        collectionParameters: void 0,
+        // Backward compat
+        // Remove it when we migrated all the configs to not use path/defaultPath
+        path: void 0,
+        defaultPath: void 0
+      });
+    }
+  }
+  function handleParametersChange(parameters) {
+    const patch = currentKey ? {
+      collectionKey: currentKey,
+      collectionParameters: parameters
+    } : {
+      collectionKey: void 0,
+      collectionParameters: void 0
+    };
+    onChange({
+      ...patch,
+      // Backward compat
+      // Remove it when we migrated all the configs to not use path/defaultPath
+      path: void 0,
+      defaultPath: void 0
+    });
+  }
+  const showParameters = location?.parametersSchema || isDynamicLocation;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsx(Cell.Name, { children: "Data Collection" }),
+      /* @__PURE__ */ jsx(Cell.Combobox, { disabled: isLoading, className: "flex-grow", children: /* @__PURE__ */ jsx(
+        ComboBox,
+        {
+          value: currentKey,
+          onChange: handleKeyChange,
+          disabled: isLoading,
+          options: options?.length > 0 ? options : void 0,
+          schema: { type: "string" },
+          variablesSchema
+        }
+      ) })
+    ] }),
+    showParameters && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(DrilldownBlockContentWrapper, { children: /* @__PURE__ */ jsx(
+      DataBuilderForm,
+      {
+        onChange: handleParametersChange,
+        field: makeDataField({
+          schema: schemaWithTitle(
+            location ? location.parametersSchema : {
+              type: "object",
+              additionalProperties: true
+            },
+            "Parameters"
+          ),
+          value: currentParameters,
+          variablesSchema
+        })
+      }
+    ) }) })
+  ] });
+}
+
+export { DataCollectionSelect };

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

@@ -0,0 +1,36 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { UNIFIED_DATA_MODELS } from '@integration-app/sdk';
+import { ComboBox } from '../../ComboBox/index.mjs';
+import { Row, Cell } from '../../DataBuilderUI/index.mjs';
+
+function UdmSelect({ value, onChange }) {
+  const options = [];
+  for (const [key, udm] of Object.entries(UNIFIED_DATA_MODELS)) {
+    options.push({
+      label: udm.pluralName,
+      value: key
+    });
+  }
+  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
+      }
+    ) })
+  ] });
+}
+
+export { UdmSelect };