@integration-app/react 2.20.0 → 2.22.0

package/dist/esm/components/ComboBox/Badges/ComboBoxSchemaValueBadge.mjs

@@ -0,0 +1,122 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.22.0
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { getSchemaFromValue, getReferenceCollectionPointerForSchema } from '@integration-app/sdk';
+import useSWR from 'swr';
+import { EditorTagBadge, EditorTagBadgeIcon } from './EditorTagBadge/index.mjs';
+import { SvgIcon } from '../../SvgIcon/index.mjs';
+import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
+import { useIntegrationAppConnection } from '../../../contexts/integration-app-connection-context.mjs';
+import { useIntegrationApp } from '../../../contexts/integration-app-context.mjs';
+import { css } from '../../../styled-system/css/css.mjs';
+import '../../../styled-system/helpers.mjs';
+import { Truncate } from '../../Truncate/index.mjs';
+import { CUSTOM_ARRAY_VALUE_LABEL, CUSTOM_OBJECT_VALUE_LABEL } from '../options-factories/custom-field/constants.mjs';
+
+const ComboBoxSchemaValueBadge = forwardRef(
+  ({ value, schema: providedSchema, variablesSchema, className, disabled, ...props }, ref) => {
+    let valueElement;
+    const schema = providedSchema?.type ? providedSchema : getSchemaFromValue(value, variablesSchema);
+    const refCollection = getReferenceCollectionPointerForSchema(schema);
+    if (refCollection) {
+      return /* @__PURE__ */ jsx(ReferenceCollectionValue, { schema, value, onDelete: props.onDelete });
+    }
+    if (schema?.referenceRecords) {
+      const selectedRecord = schema.referenceRecords.find((r) => r.id == value);
+      if (selectedRecord?.name) {
+        valueElement = /* @__PURE__ */ jsx(Truncate, { children: selectedRecord.name });
+      }
+    }
+    if (!valueElement) {
+      valueElement = getChildrenForSchemaType(schema, value);
+    }
+    if (valueElement) {
+      const icon = getIconForSchemaType(schema);
+      return /* @__PURE__ */ jsxs(EditorTagBadge, { className, ref, disabled, variant: "static-value", ...props, children: [
+        icon && /* @__PURE__ */ jsx(EditorTagBadgeIcon, { type: icon }),
+        valueElement
+      ] });
+    } else {
+      return /* @__PURE__ */ jsxs(EditorTagBadge, { className, ref, disabled, variant: "static-value", ...props, children: [
+        /* @__PURE__ */ jsx(EditorTagBadgeIcon, { type: SvgIconType.QuestionMark }),
+        "Unknown"
+      ] });
+    }
+  }
+);
+ComboBoxSchemaValueBadge.displayName = "ComboBoxSchemaValue";
+function getChildrenForSchemaType(schema, value) {
+  switch (schema?.type) {
+    case "boolean":
+      return value === void 0 ? void 0 : value ? /* @__PURE__ */ jsx(Fragment, { children: "Yes" }) : /* @__PURE__ */ jsx(Fragment, { children: "No" });
+    case "object":
+      if (Object.keys(schema?.properties ?? {}).length === 0) {
+        return /* @__PURE__ */ jsx(Truncate, { children: CUSTOM_OBJECT_VALUE_LABEL });
+      }
+      break;
+    case "array":
+      return /* @__PURE__ */ jsx(Truncate, { children: CUSTOM_ARRAY_VALUE_LABEL });
+    case "string":
+    case "number":
+    case "integer":
+    default:
+      if (value !== void 0) {
+        return /* @__PURE__ */ jsx(Truncate, { children: value?.toString() });
+      }
+  }
+  return void 0;
+}
+function getIconForSchemaType(schema) {
+  switch (schema?.type) {
+    case "string":
+      return SvgIconType.SchemaType_string;
+    case "boolean":
+      return SvgIconType.SchemaType_boolean;
+    case "number":
+    case "integer":
+      return SvgIconType.Braces;
+    default:
+      return void 0;
+  }
+}
+function ReferenceCollectionValue({
+  value,
+  schema,
+  onDelete
+}) {
+  const client = useIntegrationApp();
+  const { connectionId } = useIntegrationAppConnection();
+  const strValue = value?.toString() ?? "";
+  const key = `reference-value-${connectionId}-${strValue}`;
+  const pointer = getReferenceCollectionPointerForSchema(schema);
+  const { data: findResponse, isLoading } = useSWR(
+    client && connectionId ? key : void 0,
+    async () => {
+      try {
+        return await client.connection(connectionId).dataCollection(pointer.key, pointer.parameters).findById({ id: String(value) });
+      } catch {
+        return void 0;
+      }
+    }
+  );
+  const record = findResponse?.record;
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs(EditorTagBadge, { variant: "value", onDelete, children: [
+      /* @__PURE__ */ jsx("span", { children: record?.name || strValue }),
+      /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.Loader, className: css({ w: "3", aspectRatio: "aspect-square" }) })
+    ] });
+  }
+  if (record?.name) {
+    return /* @__PURE__ */ jsx(EditorTagBadge, { variant: "value", onDelete, children: record.name });
+  }
+  return /* @__PURE__ */ jsx(EditorTagBadge, { variant: "value", onDelete, children: strValue });
+}
+
+export { ComboBoxSchemaValueBadge };

package/dist/esm/components/ComboBox/Badges/ComboBoxValueBadge.mjs

@@ -0,0 +1,74 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.22.0
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { isFormula } from '@integration-app/sdk';
+import { EditorTagBadge } from './EditorTagBadge/index.mjs';
+import { ComboBoxFormulaBadge } from './ComboBoxFormulaBadge.mjs';
+import { ComboBoxSchemaValueBadge } from './ComboBoxSchemaValueBadge.mjs';
+import { isDefinedValue } from './isDefinedValue.mjs';
+import { useComboBox } from '../context/combobox-context.mjs';
+
+const ComboBoxValueBadge = forwardRef(function({ placeholder, isDropdownOpen, disabled, onClick, className, onDelete }, ref) {
+  const { value, variablesSchema, schema, options: staticOptions } = useComboBox();
+  const isValueDefined = isDefinedValue(value);
+  if (isDropdownOpen && (!isValueDefined || value === "")) {
+    return /* @__PURE__ */ jsx(EditorTagBadge, { ref, className, variant: "ghost" });
+  }
+  if (isValueDefined) {
+    if (isFormula(value)) {
+      return /* @__PURE__ */ jsx(
+        ComboBoxFormulaBadge,
+        {
+          ref,
+          value,
+          variablesSchema,
+          disabled,
+          onClick,
+          className,
+          onDelete
+        }
+      );
+    }
+    if (staticOptions) {
+      const selectedOption = staticOptions.find((option) => option.value === value);
+      if (selectedOption) {
+        return /* @__PURE__ */ jsx(
+          EditorTagBadge,
+          {
+            ref,
+            disabled,
+            className,
+            variant: "value",
+            onDelete,
+            onClick,
+            children: selectedOption.label
+          }
+        );
+      }
+    }
+    return /* @__PURE__ */ jsx(
+      ComboBoxSchemaValueBadge,
+      {
+        ref,
+        value,
+        schema,
+        variablesSchema,
+        disabled,
+        onClick,
+        className,
+        onDelete
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { ref, className, onClick, children: placeholder });
+});
+ComboBoxValueBadge.displayName = "ComboBoxValue";
+
+export { ComboBoxValueBadge };

package/dist/esm/components/ComboBox/Badges/EditorTagBadge/NestedBadgeValue.mjs

@@ -0,0 +1,89 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.22.0
+ */
+'use client';
+
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Fragment as Fragment$1 } from 'react';
+import clsx from 'clsx';
+import { EditorTagBadgeIcon } from './index.mjs';
+import { SvgIconType } from '../../../SvgIcon/svg-icon-type.mjs';
+import { intersperse } from '../../../../helpers/intersperse.mjs';
+import { css } from '../../../../styled-system/css/css.mjs';
+import '../../../../styled-system/helpers.mjs';
+import { sva } from '../../../../styled-system/css/sva.mjs';
+
+const nestedBadgeValueRecipe = sva({
+  className: "nested-badge-value",
+  slots: ["root", "segment", "visible-segment", "truncated-segment", "chunk"],
+  base: {
+    root: {
+      display: "flex",
+      flexDir: "row",
+      flexWrap: "nowrap",
+      alignItems: "center",
+      truncate: true,
+      "& svg": {
+        display: "inline-block",
+        verticalAlign: "middle"
+      }
+    },
+    segment: {
+      fontSize: "token(sizes.3)",
+      lineHeight: "token(sizes.4)"
+    },
+    "visible-segment": {
+      flexShrink: "0",
+      flexGrow: "0"
+    },
+    "truncated-segment": {
+      display: "inline-block",
+      truncate: true
+    },
+    chunk: {
+      whiteSpace: "nowrap",
+      fontSize: "token(sizes.3)",
+      lineHeight: "token(sizes.4)",
+      truncate: true
+    }
+  }
+});
+function NestedBadgeValue({ nameChunks, fullName }) {
+  if (nameChunks.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children: "Error: undefined" });
+  }
+  const styles = nestedBadgeValueRecipe();
+  const nameElements = nameChunks.map((chunk, idx) => /* @__PURE__ */ jsx("span", { className: styles.chunk, children: chunk }, idx + chunk));
+  if (nameElements.length === 1) {
+    return /* @__PURE__ */ jsx("span", { className: styles.root, children: nameElements[0] });
+  }
+  if (nameElements.length <= 2) {
+    return /* @__PURE__ */ jsx("span", { className: styles.root, children: intersperse(nameElements, /* @__PURE__ */ jsx(ValueNestingIcon, {})).map((segment, i) => /* @__PURE__ */ jsx(Fragment$1, { children: segment }, i)) });
+  }
+  const { 0: first, [nameChunks.length - 1]: last, ...rest } = nameElements;
+  const middle = Object.values(rest);
+  return /* @__PURE__ */ jsxs("span", { className: styles.root, title: fullName, children: [
+    /* @__PURE__ */ jsx("span", { className: clsx(styles.segment, styles["visible-segment"]), children: first }),
+    /* @__PURE__ */ jsx("span", { className: clsx(styles.segment, styles["truncated-segment"]), children: middle.map((segment, idx) => [/* @__PURE__ */ jsx(ValueNestingIcon, {}, idx), segment]).flat().map((segment, i) => /* @__PURE__ */ jsx(Fragment$1, { children: segment }, i)) }),
+    /* @__PURE__ */ jsxs("span", { className: clsx(styles.segment, styles["visible-segment"]), children: [
+      /* @__PURE__ */ jsx(ValueNestingIcon, {}),
+      last
+    ] })
+  ] });
+}
+function ValueNestingIcon() {
+  return /* @__PURE__ */ jsx(
+    EditorTagBadgeIcon,
+    {
+      type: SvgIconType.ChevronRight,
+      className: css({
+        mb: "0.5"
+      })
+    }
+  );
+}
+
+export { NestedBadgeValue, ValueNestingIcon, nestedBadgeValueRecipe };

package/dist/esm/components/ComboBox/Badges/EditorTagBadge/index.mjs

@@ -0,0 +1,183 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.22.0
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { SvgIcon } from '../../../SvgIcon/index.mjs';
+import { SvgIconType } from '../../../SvgIcon/svg-icon-type.mjs';
+import useEventStopPropagation from '../../../../helpers/hooks/useEventStopPropagation.mjs';
+import '../../../../styled-system/css/css.mjs';
+import '../../../../styled-system/helpers.mjs';
+import { sva } from '../../../../styled-system/css/sva.mjs';
+
+const editorTagBadgeRecipe = sva({
+  className: "editor-tag-badge",
+  slots: ["root", "icon", "close-button-container", "close-button"],
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      flexDir: "row",
+      flexWrap: "nowrap",
+      alignItems: "center",
+      justifyContent: "start",
+      maxW: "full",
+      minH: "5",
+      gap: "0.5",
+      px: "1.5",
+      py: "0.5",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      rounded: "lg",
+      fontSize: "token(sizes.3)",
+      lineHeight: "token(sizes.4)",
+      fontWeight: "medium",
+      bg: "colorPalette.3",
+      borderColor: "colorPalette.4",
+      color: "colorPalette.12",
+      userSelect: "none",
+      _hover: {
+        cursor: "pointer",
+        bg: "colorPalette.4",
+        borderColor: "colorPalette.5"
+      },
+      "&:hover .editor-tag-badge__close-button-container": {
+        display: "flex",
+        gradientVia: "colorPalette.4!",
+        gradientTo: "colorPalette.4!"
+      },
+      _active: {
+        bg: "colorPalette.5",
+        borderColor: "colorPalette.6"
+      },
+      "[data-selected='true'] &, [data-tag-dropdown-open='true'] &": {
+        bg: "colorPalette.5",
+        borderColor: "colorPalette.6",
+        "& .editor-tag-badge__close-button-container": {
+          gradientFrom: "transparent",
+          gradientVia: "colorPalette.5",
+          gradientTo: "colorPalette.5"
+        }
+      },
+      "[aria-disabled='true'] &": {
+        pointerEvents: "none",
+        bg: "slate.4",
+        borderColor: "slate.5",
+        color: "black",
+        cursor: "initial"
+      }
+    },
+    icon: {
+      h: "3",
+      w: "3",
+      minW: "3",
+      strokeWidth: "token(sizes.0.5)"
+    },
+    "close-button-container": {
+      display: "none",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      position: "absolute",
+      right: "1",
+      strokeWidth: "token(sizes.0.5)",
+      borderTopRightRadius: "md",
+      borderBottomRightRadius: "md",
+      w: "7",
+      maxW: "1/2",
+      h: "full",
+      bgGradient: "to-r",
+      gradientFrom: "transparent",
+      "[data-selected='true'] &, [data-tag-dropdown-open='true'] &": {
+        display: "flex"
+      }
+    },
+    "close-button": {
+      rounded: "sm",
+      outline: "none",
+      _focus: {
+        bg: "colorPalette.6",
+        "& svg": {
+          strokeWidth: "3px"
+        }
+      },
+      "& svg": {
+        h: "3",
+        w: "3",
+        _hover: {
+          strokeWidth: "3px"
+        }
+      }
+    }
+  },
+  variants: {
+    variant: {
+      "static-value": {
+        root: {
+          color: "black",
+          colorPalette: "gray"
+        }
+      },
+      formula: {
+        root: {
+          colorPalette: "indigo"
+        }
+      },
+      value: {
+        root: {
+          colorPalette: "blue"
+        }
+      },
+      error: {
+        root: {
+          colorPalette: "tomato",
+          color: "tomato.10"
+        }
+      },
+      ghost: {
+        root: {
+          bg: "transparent!",
+          borderColor: "transparent!"
+        },
+        "close-button": {
+          display: "none!"
+        }
+      }
+    },
+    disabled: {
+      true: {
+        root: {
+          pointerEvents: "none",
+          bg: "slate.4",
+          borderColor: "slate.5",
+          color: "black",
+          cursor: "initial"
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    variant: "value"
+  }
+});
+const EditorTagBadge = forwardRef(({ children, className, variant, disabled, onDelete, ...rest }, ref) => {
+  const styles = editorTagBadgeRecipe({ variant, disabled });
+  const handleOnClick = useEventStopPropagation(() => onDelete?.());
+  return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), ...rest, ref, children: [
+    children,
+    /* @__PURE__ */ jsx("div", { className: styles["close-button-container"], children: /* @__PURE__ */ jsx("button", { className: styles["close-button"], disabled, "aria-label": "Delete", onClick: handleOnClick, children: /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.Close, className: styles.icon }) }) })
+  ] });
+});
+EditorTagBadge.displayName = "EditorTagBadge";
+function EditorTagBadgeIcon({ type, className }) {
+  const styles = editorTagBadgeRecipe();
+  return /* @__PURE__ */ jsx(SvgIcon, { type, className: clsx(styles.icon, className) });
+}
+
+export { EditorTagBadge, EditorTagBadgeIcon, editorTagBadgeRecipe };

package/dist/esm/components/ComboBox/{Value → Badges}/isDefinedValue.mjs

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

package/dist/esm/components/ComboBox/ComboBox.mjs

@@ -2,18 +2,18 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import { jsx } from 'react/jsx-runtime';
-import { LexicalProvider } from '../ComboBoxElements/Editor/editor.mjs';
+import { LexicalProvider } from '../ComboBoxElements/Editor/LexicalEditor.mjs';
+import { ComboboxEditorTrigger } from './ComboboxTriggers/ComboboxEditorTrigger.mjs';
+import { ComboboxTagTrigger } from './ComboboxTriggers/ComboboxTagTrigger.mjs';
 import { ComboBoxProvider } from './context/combobox-context.mjs';
 import { ComboBoxDropdownContextProvider } from './context/combobox-dropdown-context.mjs';
 import { ComboBoxDropdownSearchProvider } from './context/combobox-dropdown-search.mjs';
 import { canUserEnterValueFromKeyboard } from './context/helpers.mjs';
-import { OptionSelector } from './Edit/OptionSelector.mjs';
-import { TextInput } from './Edit/TextInput.mjs';
 import { ValueType } from './value-spec.mjs';
 
 function ComboBox({
@@ -36,7 +36,9 @@ function ComboBox({
   onOpen,
   onClose,
   topDropdownPanelComponent = void 0,
-  refsToIgnoreClick
+  refsToIgnoreClick,
+  onValueChange: _,
+  ...rest
 }) {
   const userCanEnterValueFromKeyboard = canUserEnterValueFromKeyboard(
     schema,
@@ -56,7 +58,8 @@ function ComboBox({
     className,
     onChange,
     required: isRequired,
-    disabled
+    disabled,
+    ...rest
   };
   return /* @__PURE__ */ jsx(
     ComboBoxProvider,
@@ -70,7 +73,7 @@ function ComboBox({
       optionFactories,
       refsToIgnoreClick,
       ...dropdownProps,
-      children: /* @__PURE__ */ jsx(ComboBoxDropdownSearchProvider, { hideSearch, children: /* @__PURE__ */ jsx(ComboBoxDropdownContextProvider, { children: /* @__PURE__ */ jsx(LexicalProvider, { children: userCanEnterValueFromKeyboard ? /* @__PURE__ */ jsx(TextInput, { ...props }) : /* @__PURE__ */ jsx(OptionSelector, { ...props, valueComponent }) }) }) })
+      children: /* @__PURE__ */ jsx(ComboBoxDropdownSearchProvider, { hideSearch, children: /* @__PURE__ */ jsx(ComboBoxDropdownContextProvider, { children: /* @__PURE__ */ jsx(LexicalProvider, { children: userCanEnterValueFromKeyboard ? /* @__PURE__ */ jsx(ComboboxEditorTrigger, { ...props }) : /* @__PURE__ */ jsx(ComboboxTagTrigger, { ...props, valueComponent }) }) }) })
     }
   );
 }

package/dist/esm/components/ComboBox/{Edit/TextInput.mjs → ComboboxTriggers/ComboboxEditorTrigger.mjs}

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
@@ -14,22 +14,15 @@ import { useComboBoxDropdownContext } from '../context/combobox-dropdown-context
 import { useComboBoxDropdownSearchContext } from '../context/combobox-dropdown-search.mjs';
 import { Dropdown } from '../Dropdown/Dropdown.mjs';
 import { DropdownCategoryType } from '../shared.mjs';
-import { LexicalEditor } from '../../ComboBoxElements/Editor/editor.mjs';
+import { ComboboxContainer } from '../../ComboBoxElements/ComboboxContainer/index.mjs';
 import { isClickOnEditorCustomTagComponent } from '../../ComboBoxElements/Editor/helpers/clicks.mjs';
 import { transformEditorSchemaToValue } from '../../ComboBoxElements/Editor/helpers/transformEditorSchemaToValue.mjs';
+import { LexicalEditor } from '../../ComboBoxElements/Editor/LexicalEditor.mjs';
 import { useEditor } from '../../ComboBoxElements/Editor/useEditor.mjs';
-import { FieldWrapper } from '../../ComboBoxElements/FieldWrapper.mjs';
 import { formulaComponentMapping } from '../../DataBuilder/Formula/index.mjs';
 import { getRefElement } from '../../../helpers/getRefElement.mjs';
-import { isDefinedValue } from '../Value/isDefinedValue.mjs';
 
-function TextInput({
-  placeholder,
-  className,
-  onChange,
-  disabled,
-  required
-}) {
+function ComboboxEditorTrigger({ placeholder, className, onChange, disabled }) {
   const textInputRef = useRef(null);
   const fieldValueRef = useRef(null);
   const {
@@ -75,16 +68,14 @@ function TextInput({
       });
     }
   };
-  const requiredAndEmptyField = required && isDefinedValue(value);
   return /* @__PURE__ */ jsx(
-    FieldWrapper,
+    ComboboxContainer,
     {
-      role: "combobox",
       ref: fieldValueRef,
       "aria-expanded": isDropdownOpen,
       onClick: handleClick,
       disabled,
-      requiredAndEmptyField,
+      level: "editor",
       children: /* @__PURE__ */ jsx(
         Dropdown,
         {
@@ -134,4 +125,4 @@ function valueHasDropdownWithFormula(value) {
   return !!formulaComponentMapping[getFormula(value)?.type]?.DropdownComponent;
 }
 
-export { TextInput };
+export { ComboboxEditorTrigger };