@integration-app/react 2.15.0 → 2.16.1

package/dist/styles.css

@@ -2688,46 +2688,6 @@
       color: var(--iap-colors-fg-muted);
 }
 
-    .iap-field__root {
-      display: flex;
-      gap: var(--iap-spacing-1\.5);
-      flex-direction: column;
-}
-
-    .iap-field__errorText {
-      color: var(--iap-colors-fg-error);
-      display: inline-flex;
-      gap: var(--iap-spacing-2);
-      font-size: var(--iap-font-sizes-sm);
-      line-height: 1.25rem;
-      align-items: center;
-}
-
-    .iap-field__errorText:is(:disabled, [disabled], [data-disabled]) {
-      color: var(--iap-colors-fg-disabled);
-}
-
-    .iap-field__helperText {
-      color: var(--iap-colors-fg-muted);
-      font-size: var(--iap-font-sizes-sm);
-      line-height: 1.25rem;
-}
-
-    .iap-field__helperText:is(:disabled, [disabled], [data-disabled]) {
-      color: var(--iap-colors-fg-disabled);
-}
-
-    .iap-field__label {
-      color: var(--iap-colors-fg-default);
-      font-size: var(--iap-font-sizes-sm);
-      line-height: 1.25rem;
-      font-weight: var(--iap-font-weights-medium);
-}
-
-    .iap-field__label:is(:disabled, [disabled], [data-disabled]) {
-      color: var(--iap-colors-fg-disabled);
-}
-
     .iap-avatar__root {
       border-radius: var(--iap-radii-full);
       overflow: hidden;
@@ -3267,6 +3227,38 @@
     min-width: var(--iap-sizes-5);
 }
 
+  .iap-cursor_default {
+    cursor: default;
+}
+
+  .iap-pos_relative {
+    position: relative;
+}
+
+  .iap-pos_absolute {
+    position: absolute;
+}
+
+  .iap-inset_0 {
+    inset: var(--iap-spacing-0);
+}
+
+  .iap-w_full {
+    width: var(--iap-sizes-full);
+}
+
+  .iap-op_0 {
+    opacity: 0;
+}
+
+  .iap-d_block {
+    display: block;
+}
+
+  .iap-vis_visible {
+    visibility: visible;
+}
+
   .iap-bg_surface\.default {
     background: var(--iap-colors-surface-default);
 }
@@ -3299,10 +3291,6 @@
     padding-block: var(--iap-spacing-2);
 }
 
-  .iap-w_full {
-    width: var(--iap-sizes-full);
-}
-
   .iap-h_auto {
     height: auto;
 }
@@ -3375,10 +3363,6 @@
     fill: var(--iap-colors-success-11);
 }
 
-  .iap-pos_absolute {
-    position: absolute;
-}
-
   .iap-c_white {
     color: var(--iap-colors-white);
 }
@@ -3391,10 +3375,6 @@
     border-radius: var(--iap-radii-full);
 }
 
-  .iap-pos_relative {
-    position: relative;
-}
-
   .iap-max-h_initial {
     max-height: initial;
 }
@@ -3605,10 +3585,6 @@
     color: var(--iap-colors-fg-default);
 }
 
-  .iap-op_0 {
-    opacity: 0;
-}
-
   .iap-d_inline-flex {
     display: inline-flex;
 }
@@ -4923,6 +4899,15 @@
     line-height: 1.2;
 }
 
+  .iap-trs-prop_colors {
+    --transition-prop: colors;
+    transition-property: colors;
+}
+
+  .iap-bd-t-c_transparent {
+    border-top-color: var(--iap-colors-transparent);
+}
+
   .iap-bd-w_thin {
     border-width: thin;
 }
@@ -5085,6 +5070,14 @@
     padding-bottom: var(--iap-spacing-0);
 }
 
+  .focus\:iap-op_1:is(:focus, [data-focus]) {
+    opacity: 1;
+}
+
+  .focus\:iap-ring_none:is(:focus, [data-focus]) {
+    outline: var(--iap-borders-none);
+}
+
   .focusVisible\:iap-bg_neutral\.2:is(:focus-visible, [data-focus-visible]) {
     background: var(--iap-colors-neutral-2);
 }
@@ -5105,10 +5098,22 @@
     color: var(--iap-colors-gray-9);
 }
 
+  .empty\:after\:iap-c_gray\.9:is(:empty, [data-empty])::after {
+    color: var(--iap-colors-gray-9);
+}
+
   .\[\&_p\]\:before\:iap-content_var\(--placeholder-text\) p::before {
     content: var(--placeholder-text);
 }
 
+  .empty\:after\:iap-content_var\(--placeholder-text\):is(:empty, [data-empty])::after {
+    content: var(--placeholder-text);
+}
+
+  .focus\:\[\&_\+_\.span\]\:iap-vis_hidden:is(:focus, [data-focus]) + .span {
+    visibility: hidden;
+}
+
   @media screen and (min-width: 40rem) {
     .sm\:iap-offset_4 {
       offset: 4px;
@@ -5125,6 +5130,12 @@
     .hover\:iap-bg_neutral\.3:is(:hover, [data-hover]) {
       background: var(--iap-colors-neutral-3);
 }
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .hover\:iap-op_1:is(:hover, [data-hover]) {
+      opacity: 1;
+}
 }
 
   @media (hover: hover) and (pointer: fine) {
@@ -5149,5 +5160,17 @@
     .hover\:iap-bg_slate\.3:is(:hover, [data-hover]) {
       background: var(--iap-colors-slate-3);
 }
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .hover\:\[\&_\.span\]\:iap-vis_hidden:is(:hover, [data-hover]) .span {
+      visibility: hidden;
+}
+}
+
+  @media (hover: hover) and (pointer: fine) {
+    .hover\:\[\&_\.input\]\:iap-vis_visible:is(:hover, [data-hover]) .input {
+      visibility: visible;
+}
 }
 }

package/dist/types/components/DataBuilder/{Field.d.ts → DataBuilderFormField.d.ts}

@@ -1,2 +1,2 @@
 import { IFieldComponent } from './data-field';
-export default function DataBuilderFormField({ field, onChange, onKeyChange, onDelete, onEnter, }: IFieldComponent): import("react/jsx-runtime").JSX.Element | null;
+export declare function DataBuilderFormField({ field, onChange, onKeyChange, onDelete, onEnter, }: IFieldComponent): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/components/DataBuilder/FieldName/FieldNameInput.d.ts

@@ -0,0 +1,14 @@
+export interface FieldNameInputProps {
+    value: string;
+    className?: string;
+    placeholder?: string;
+    editable?: boolean;
+    required?: boolean;
+    autoFocus?: boolean;
+    onChange?: (value: string) => void;
+    onEnter?: (value: string) => void;
+    onEsc?: (value: string) => void;
+    onFocus?: (value: string) => void;
+    onBlur?: (value: string) => void;
+}
+export declare function FieldNameInput({ value, className, placeholder, onChange, onEnter, onEsc, onFocus, onBlur, editable, autoFocus, ...props }: FieldNameInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataBuilder/{FieldName.d.ts → FieldName/index.d.ts}

@@ -1,9 +1,9 @@
-import { IDataBuilderField } from './data-field';
-export default function FieldName({ field, onKeyChange, onEnter, onEsc, rightSlot, typeSelectorSlot, }: {
+import { IDataBuilderField } from '../data-field';
+export declare function FieldName({ field, onKeyChange, onEnter, onEsc, rightSlot, typeSelectorSlot, }: {
     field: IDataBuilderField;
     onKeyChange: (key: string) => void;
-    onEnter?: (any: any) => void;
-    onEsc?: (any: any) => void;
+    onEnter?: (key: string) => void;
+    onEsc?: (key: string) => void;
     rightSlot?: React.ReactNode;
     typeSelectorSlot?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataBuilder/Nested/LevelKeysConflictProvider.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const LevelKeysConflictProvider: React.Provider<Set<string>>;
+export declare const useLevelKeysConflicts: () => Set<string>;

package/dist/types/components/DataBuilder/stories/DataBuilder.test-formulas.helpers.d.ts

@@ -1,5 +1,5 @@
 import { DataBuilderFormulaType } from '@integration-app/sdk';
-import { PlayFunctionContext } from '@storybook/types';
+import { PlayFunctionContext } from 'storybook/internal/types';
 type ValidFormulaKey = `$${DataBuilderFormulaType}`;
 export declare function renderFormulaStory({ value: initialFormulaValue, additionalProps, }: {
     value: Partial<Record<ValidFormulaKey, any>> | string;

package/dist/types/components/DataBuilderUI/index.d.ts

@@ -37,6 +37,7 @@ export declare const Cell: import("react").ForwardRefExoticComponent<ICell & imp
 };
 interface TitleProps extends HTMLAttributes<HTMLDivElement> {
     hasError?: boolean;
+    hasNameConflict?: boolean;
     required?: boolean;
     hasValue?: boolean;
     leftSlot?: ReactNode;

package/dist/types/index.d.ts

@@ -82,7 +82,7 @@ export * from './components/Tag';
 export * from './components/Toggle';
 export * from './components/Tooltip';
 export * from './components/AdvancedOptions';
-export * from './components/InlineEditable';
+export * from './components/DataBuilder/FieldName/FieldNameInput';
 export * from './components/Popover';
 export * from './components/Truncate';
 export * from './contexts/integration-app-client-context';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integration-app/react",
-  "version": "2.15.0",
+  "version": "2.16.1",
   "description": "",
   "author": "Integration.app",
   "type": "module",

package/dist/cjs/components/InlineEditable.cjs

@@ -1,89 +0,0 @@
-"use strict";
-/*
- * Integration App React package
- * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.15.0
- */
-'use client';
-
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var InlineEditable_module = require('./InlineEditable.module.css.cjs');
-
-function InlineEditable({
-  value,
-  className,
-  placeholder = "Enter some text",
-  onChange,
-  onEnter,
-  onEsc,
-  onFocus,
-  onBlur,
-  editable = true,
-  required = false,
-  autoFocus = false,
-  ...props
-}) {
-  const [requiredWarning, setRequiredWarning] = React.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.clsx(
-    InlineEditable_module.default.wrapper,
-    className,
-    requiredWarning && InlineEditable_module.default.wrapperRequired
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: classNames, ...props, title: value, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        className: InlineEditable_module.default.input,
-        onChange: handleChange,
-        value,
-        placeholder: placeholderText,
-        "aria-label": placeholder,
-        readOnly: !editable,
-        required,
-        autoFocus,
-        onBlur: handleBlur,
-        onFocus: handleFocus,
-        onKeyDown: handleKeyDown
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: InlineEditable_module.default.span, style, children: value?.replace(/\s/g, "\xA0") })
-  ] });
-}
-
-exports.InlineEditable = InlineEditable;

package/dist/cjs/components/InlineEditable.module.css.cjs

@@ -1,18 +0,0 @@
-/*
- * Integration App React package
- * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.15.0
- */
-'use client';
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styleInject = require('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, 1));\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, 1))\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);
-
-exports.default = classes;

package/dist/esm/components/InlineEditable.mjs

@@ -1,87 +0,0 @@
-"use strict";
-/*
- * Integration App React package
- * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.15.0
- */
-'use client';
-
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
-import { clsx } from 'clsx';
-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,
-        "aria-label": placeholder,
-        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

@@ -1,14 +0,0 @@
-/*
- * Integration App React package
- * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.15.0
- */
-'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, 1));\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, 1))\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/types/components/InlineEditable.d.ts

@@ -1,14 +0,0 @@
-export interface InlineEditableProps {
-    value: string;
-    className?: string;
-    placeholder?: string;
-    editable?: boolean;
-    required?: boolean;
-    autoFocus?: boolean;
-    onChange?: (any: any) => void;
-    onEnter?: (any: any) => void;
-    onEsc?: (any: any) => void;
-    onFocus?: (any: any) => void;
-    onBlur?: (any: any) => void;
-}
-export declare function InlineEditable({ value, className, placeholder, onChange, onEnter, onEsc, onFocus, onBlur, editable, required, autoFocus, ...props }: InlineEditableProps): import("react/jsx-runtime").JSX.Element;