@integration-app/react 2.0.3-beta.3 → 2.0.4-beta.0

package/dist/esm/components/DataBuilderUI/FieldControlPanel/index.mjs

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

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

@@ -2,14 +2,15 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.3
+ * v2.0.4-beta.0
  */
 'use client';
 
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef, Children } from 'react';
 import clsx from 'clsx';
-import { SvgIcon, SvgIconType } from '../SvgIcon/index.mjs';
+import { SvgIcon } from '../SvgIcon/index.mjs';
+import { SvgIconType } from '../SvgIcon/svg-icon-type.mjs';
 import { Tooltip } from '../Tooltip/index.mjs';
 import useEventStopPropagation from '../../hooks/useEventStopPropagation.mjs';
 import classes from './styles.module.css.mjs';

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

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

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

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

package/dist/esm/components/DataLinks/data-link-tables-option-factory.mjs

@@ -2,11 +2,11 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.3
+ * v2.0.4-beta.0
  */
 'use client';
 
-import { filterOptionsByLabel } from '../ComboBox/options-factories/base.mjs';
+import { filterOptionsByLabel } from '../ComboBox/options-factories/utils.mjs';
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;

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

@@ -0,0 +1,70 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId } from 'react';
+import { SvgIcon } from '../SvgIcon/index.mjs';
+import { SvgIconType } from '../SvgIcon/svg-icon-type.mjs';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/helpers.mjs';
+import { sva } from '../../styled-system/css/sva.mjs';
+import '../../styled-system/jsx/is-valid-prop.mjs';
+import { Flex } from '../../styled-system/jsx/flex.mjs';
+import '../../styled-system/patterns/visually-hidden.mjs';
+import { Text } from '../../ui-kit/styled/text.mjs';
+import { IconButton } from '../../ui-kit/styled/icon-button.mjs';
+import { preventFocusShift } from './utils.mjs';
+
+const dropdownBackButtonRecipe = sva({
+  className: "dropdown-back-button",
+  slots: ["container", "button", "icon", "title"],
+  base: {
+    container: {
+      gap: "2",
+      alignItems: "center",
+      px: "1.5",
+      py: "1"
+    },
+    button: {
+      h: "6",
+      w: "6",
+      minW: "unset",
+      rounded: "md",
+      color: "slate.11"
+    },
+    icon: {
+      w: "4",
+      h: "4"
+    },
+    title: { fontWeight: "medium", color: "slate.11", fontSize: "sm" }
+  }
+});
+const BackButton = forwardRef(({ className, children, ...props }, ref) => {
+  const { container, button, icon, title } = dropdownBackButtonRecipe({
+    className
+  });
+  const id = useId();
+  return /* @__PURE__ */ jsxs(Flex, { className: container, children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ref,
+        variant: "ghost",
+        colorPalette: "gray",
+        className: button,
+        "aria-labelledby": id,
+        onMouseDown: preventFocusShift,
+        ...props,
+        children: /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.ChevronLeft, className: icon })
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { as: "span", className: title, id, children })
+  ] });
+});
+
+export { BackButton };

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

@@ -0,0 +1,24 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { dropdownRecipe } from './sva-recipe.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 '../../styled-system/patterns/visually-hidden.mjs';
+
+const Content = forwardRef(({ children, className, ...props }, ref) => {
+  const { content } = dropdownRecipe({});
+  return /* @__PURE__ */ jsx(Flex, { ref, className: clsx(content, className), ...props, children });
+});
+
+export { Content };

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

@@ -0,0 +1,40 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { dropdownRecipe } from './sva-recipe.mjs';
+import { SvgIconType } from '../SvgIcon/svg-icon-type.mjs';
+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
+      ]
+    }
+  );
+});
+
+export { ErrorHeading };

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

@@ -0,0 +1,73 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useLayoutEffect } from 'react';
+import clsx from 'clsx';
+import { useIntersectionObserver } from 'usehooks-ts';
+import { dropdownRecipe } from './sva-recipe.mjs';
+import { DropdownItemContextProvider } from './item-context.mjs';
+import { useForwardedRef } from '../../hooks/useForwardedRef.mjs';
+import { preventFocusShift } from './utils.mjs';
+
+const Item = forwardRef(({ children, className, current = false, ...props }, ref) => {
+  const id = useId();
+  const styles = dropdownRecipe();
+  return /* @__PURE__ */ jsx(DropdownItemContextProvider, { value: { id }, children: /* @__PURE__ */ jsx(
+    DropdownItemDiv,
+    {
+      ref,
+      active: current,
+      className: clsx(styles.item, className),
+      "data-current": current || void 0,
+      role: "listitem",
+      "aria-labelledby": id,
+      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);
+  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 { Item };

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

@@ -0,0 +1,67 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { SvgIcon } from '../SvgIcon/index.mjs';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/helpers.mjs';
+import { sva } from '../../styled-system/css/sva.mjs';
+
+function GenericSvgIcon({ type, ...props }) {
+  return /* @__PURE__ */ jsx(SvgIcon, { type, ...props, "aria-hidden": "true" });
+}
+function GenericImgIcon({ src, ...props }) {
+  return /* @__PURE__ */ jsx("img", { src, ...props, "aria-hidden": "true" });
+}
+const itemIcon = sva({
+  className: "item_icon",
+  slots: ["icon"],
+  variants: {
+    framed: {
+      true: {
+        icon: {
+          bg: "gray.3",
+          borderColor: "gray.5",
+          borderWidth: "0.5",
+          color: "slate.11"
+        }
+      }
+    }
+  },
+  base: {
+    icon: {
+      display: "flex",
+      flexShrink: "0",
+      flexGrow: "0",
+      w: "6",
+      h: "6",
+      rounded: "lg",
+      p: "1"
+    }
+  },
+  defaultVariants: {
+    framed: false
+  }
+});
+function ItemIcon({
+  className,
+  framed,
+  ...props
+}) {
+  const { icon } = itemIcon({ framed });
+  if ("type" in props && props?.type) {
+    return /* @__PURE__ */ jsx(GenericSvgIcon, { className: clsx(icon, className), ...props });
+  }
+  if ("src" in props && props?.src) {
+    return /* @__PURE__ */ jsx(GenericImgIcon, { className: clsx(icon, className), ...props });
+  }
+  return null;
+}
+
+export { ItemIcon };

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

@@ -0,0 +1,62 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/helpers.mjs';
+import { sva } from '../../styled-system/css/sva.mjs';
+import { visuallyHidden } from '../../styled-system/patterns/visually-hidden.mjs';
+
+const itemNestedIndicatorRecipe = sva({
+  className: "item-nested-indicator",
+  slots: ["wrapper", "children-counter", "counter-hidden-title"],
+  base: {
+    wrapper: {
+      display: "flex",
+      alignItems: "center"
+    },
+    "children-counter": {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      w: "4",
+      h: "4",
+      color: "slate.11",
+      textStyle: "sm"
+    },
+    "counter-hidden-title": {}
+  }
+});
+const pluralRules = new Intl.PluralRules("en");
+const pluralForms = {
+  one: "child",
+  other: "children"
+};
+function ItemNestingIndicator({
+  // TODO: add tests for counter
+  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(1)]
+        }
+      )
+    ] }),
+    children
+  ] });
+}
+
+export { ItemNestingIndicator };

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

@@ -0,0 +1,28 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { Truncate } from '../Truncate/index.mjs';
+import { useDropdownItemContext } from './item-context.mjs';
+import { dropdownRecipe } from './sva-recipe.mjs';
+
+function ItemTitle({ children }) {
+  const styles = dropdownRecipe();
+  const { id } = useDropdownItemContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: styles["item-title"],
+      id,
+      "aria-label": typeof children === "string" ? children : void 0,
+      children: /* @__PURE__ */ jsx(Truncate, { mode: "end", children })
+    }
+  );
+}
+
+export { ItemTitle };

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

@@ -0,0 +1,36 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { dropdownRecipe } from './sva-recipe.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';
+
+const List = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { list } = dropdownRecipe();
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        role: "list",
+        "aria-label": "Options",
+        className: clsx(list, className),
+        ...props,
+        ref,
+        children
+      }
+    );
+  }
+);
+
+export { List };

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

@@ -0,0 +1,29 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { dropdownRecipe } from './sva-recipe.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
+    }
+  );
+});
+
+export { ListHeader };

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

@@ -0,0 +1,50 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect } from 'react';
+import clsx from 'clsx';
+import { dropdownRecipe } from './sva-recipe.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 '../../styled-system/patterns/visually-hidden.mjs';
+import { Skeleton } from '../../ui-kit/styled/skeleton.mjs';
+
+const LoadingItem = forwardRef(({ className, delay = 300, ...props }, ref) => {
+  const styles = dropdownRecipe();
+  const [shouldShow, setShouldShow] = useState(delay === 0);
+  useEffect(() => {
+    if (delay !== 0) {
+      const timer = setTimeout(() => {
+        setShouldShow(true);
+      }, delay);
+      return () => clearTimeout(timer);
+    }
+    return () => {
+    };
+  }, []);
+  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"] })
+      ]
+    }
+  );
+});
+
+export { LoadingItem };

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

@@ -0,0 +1,29 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { dropdownRecipe } from './sva-recipe.mjs';
+
+const NoOptionsHeading = forwardRef(({ className, text, ...props }, ref) => {
+  const styles = dropdownRecipe();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "heading",
+      "aria-level": 2,
+      className: clsx(styles["no-options-heading"], className),
+      ...props,
+      ref,
+      children: text
+    }
+  );
+});
+
+export { NoOptionsHeading };

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

@@ -0,0 +1,26 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { dropdownRecipe } from './sva-recipe.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';
+
+const Panel = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { panel } = dropdownRecipe();
+    return /* @__PURE__ */ jsx(Box, { className: clsx(panel, className), ref, ...props, children });
+  }
+);
+
+export { Panel };

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

@@ -0,0 +1,32 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.4-beta.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { dropdownRecipe } from './sva-recipe.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';
+
+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 };