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

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.3
+ */
+'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.3
+ */
+'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.3
+ */
+'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.3
+ */
+'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/Root.mjs

@@ -0,0 +1,30 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import clsx from 'clsx';
+import { dropdownRecipe } from './sva-recipe.mjs';
+import { useOptionListKeyNavDispatch } from '../../hooks/keyboard-events.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 { Flex } from '../../styled-system/jsx/flex.mjs';
+import '../../styled-system/patterns/visually-hidden.mjs';
+
+const Root = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const [keyboardRef, setKeyboardRef] = useState(null);
+    const { root, navigator } = dropdownRecipe({});
+    useOptionListKeyNavDispatch(keyboardRef);
+    return /* @__PURE__ */ jsx(Box, { ref: setKeyboardRef, className: navigator, tabIndex: 0, children: /* @__PURE__ */ jsx(Flex, { ref, className: clsx(root, className), ...props, children }) });
+  }
+);
+
+export { Root };

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

@@ -0,0 +1,44 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3
+ */
+'use client';
+
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { dropdownRecipe } from './sva-recipe.mjs';
+import useEventStopPropagation from '../../hooks/useEventStopPropagation.mjs';
+import { Input } from '../../ui-kit/styled/input.mjs';
+
+const Search = forwardRef(
+  ({ value, onChange, autoFocus, className, placeholder, ...props }, ref) => {
+    const styles = dropdownRecipe();
+    function handleSearchChange(event) {
+      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,
+          ref,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx("hr", { className: styles["search-divider"] })
+    ] });
+  }
+);
+
+export { Search };

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

@@ -2,211 +2,37 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.0.3-beta.2
+ * v2.0.3
  */
 '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';
+import { Root } from './Root.mjs';
+import { Search } from './Search.mjs';
+import { Panel } from './Panel.mjs';
+import { List } from './List.mjs';
+import { Item } from './Item.mjs';
+import { NoOptionsHeading } from './NoOptionsHeading.mjs';
+import { ErrorHeading } from './ErrorHeading.mjs';
+import { LoadingItem } from './LoadingItem.mjs';
+import { ListHeader } from './ListHeader.mjs';
+import { BackButton } from './BackButton.mjs';
+import { ItemIcon } from './ItemIcon.mjs';
+import { ItemTitle } from './ItemTitle.mjs';
+import { ItemNestingIndicator } from './ItemNestingIndicator.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 DropdownUI = Object.assign(Root, {
+  Search,
+  Panel,
+  List,
+  Item,
+  ListHeader,
+  BackButton,
+  NoOptionsHeading,
+  ErrorHeading,
+  LoadingItem,
+  ItemIcon,
+  ItemTitle,
+  ItemNestingIndicator
 });
-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 };
+export { DropdownUI };

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

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

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

@@ -0,0 +1,177 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3
+ */
+'use client';
+
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/helpers.mjs';
+import { sva } from '../../styled-system/css/sva.mjs';
+
+const dropdownRecipe = 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"
+    }
+  }
+});
+
+export { dropdownRecipe };

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

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

package/dist/esm/components/InlineEditable.mjs

@@ -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/esm/components/InlineEditable.module.css.mjs

@@ -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';