@integration-app/react 2.20.0 → 2.22.0

package/dist/esm/components/DataBuilder/Nested/FieldControlPanel/ControlPanelForNonObjectRootField.mjs

@@ -2,17 +2,22 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.20.0
+ * v2.22.0
  */
 'use client';
 
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { SvgIconType } from '../../../SvgIcon/svg-icon-type.mjs';
 import useEventStopPropagation from '../../../../helpers/hooks/useEventStopPropagation.mjs';
-import '../../../DataBuilderUI/index.mjs';
+import { FieldControlPanel } from '../../../DataBuilderUI/FieldControlPanel/index.mjs';
+import '../../../DataBuilderUI/ActionBar.mjs';
+import '../../../DataBuilderUI/Cell.mjs';
+import 'clsx';
+import '../../../DataBuilderUI/styles.module.css.mjs';
+import '../../../DataBuilderUI/Row.mjs';
+import '../../../DataBuilderUI/Title.mjs';
 import { SvgIcon } from '../../../SvgIcon/index.mjs';
 import { DEFAULT_FIELD_KEY } from '../../data-field.mjs';
-import { FieldControlPanel } from '../../../DataBuilderUI/FieldControlPanel/index.mjs';
 
 function ControlPanelForNonObjectRootField({
   addFieldLabel = "Add Field",

package/dist/esm/components/DataBuilder/Nested/FieldControlPanel/index.mjs

@@ -2,17 +2,21 @@
 /*
  * 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 { ControlPanel } from './ControlPanel.mjs';
 import { ControlPanelForNonObjectRootField } from './ControlPanelForNonObjectRootField.mjs';
-import { NestedLevel } from '../../../DataBuilderUI/index.mjs';
+import { FieldControlPanel } from '../../../DataBuilderUI/FieldControlPanel/index.mjs';
+import '../../../DataBuilderUI/ActionBar.mjs';
+import '../../../DataBuilderUI/Cell.mjs';
+import { NestedLevel } from '../../../DataBuilderUI/NestedLevel.mjs';
+import '../../../DataBuilderUI/Row.mjs';
+import '../../../DataBuilderUI/Title.mjs';
 import { isObjectAllowedAdditionalProperties, isFieldVisible, fieldLabel } from '../../data-field.mjs';
 import useDataBuilderField from '../../field-context.mjs';
-import { FieldControlPanel } from '../../../DataBuilderUI/FieldControlPanel/index.mjs';
 
 function DataBuilderFieldControlPanel({
   field,
@@ -46,7 +50,7 @@ function DataBuilderFieldControlPanel({
 function FieldControlPanelWrapper({ field, children }) {
   const fieldIsVisible = isFieldVisible(field);
   const level = fieldIsVisible ? field.level + 1 : field.level;
-  return /* @__PURE__ */ jsx(NestedLevel, { level, children: /* @__PURE__ */ jsx(FieldControlPanel, { compact: fieldIsVisible, children }) });
+  return /* @__PURE__ */ jsx(NestedLevel, { level, children: /* @__PURE__ */ jsx(FieldControlPanel, { children }) });
 }
 function useAddFieldLabel(labelFromProps) {
   const { field, localSchema } = useDataBuilderField();

package/dist/esm/components/DataBuilder/Nested/FieldListWrapper/FieldListWrapper.module.css.mjs

@@ -1,7 +1,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/DataBuilder/Nested/FieldListWrapper/index.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/DataBuilder/Nested/LevelKeysConflictProvider.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/DataBuilder/Nested/NoSchema.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/DataBuilder/Nested/ObjectFields.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/DataBuilder/Nested/ValueMapping.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';
 
@@ -12,7 +12,12 @@ import usePromise from '../../../_modules/react-use-promise.mjs';
 import { SvgIconType } from '../../SvgIcon/svg-icon-type.mjs';
 import { useIntegrationAppClient } from '../../../contexts/integration-app-client-context.mjs';
 import { useIntegrationAppConnection } from '../../../contexts/integration-app-connection-context.mjs';
-import { NestedLevel, Row, Cell, Title } from '../../DataBuilderUI/index.mjs';
+import '../../DataBuilderUI/FieldControlPanel/index.mjs';
+import '../../DataBuilderUI/ActionBar.mjs';
+import { Cell } from '../../DataBuilderUI/Cell.mjs';
+import { NestedLevel } from '../../DataBuilderUI/NestedLevel.mjs';
+import { Row } from '../../DataBuilderUI/Row.mjs';
+import { Title } from '../../DataBuilderUI/Title.mjs';
 import { makeSubField } from '../data-field.mjs';
 import { FieldDelete } from '../FieldDelete.mjs';
 import DataBuilderFormFieldValue from '../FieldValue/index.mjs';
@@ -83,9 +88,9 @@ function AutoExpandedMapping({ valueRecords, field, fieldRecords, onChange }) {
       variablesSchema: []
     });
     return /* @__PURE__ */ jsx(NestedLevel, { level: field.level + 1, children: /* @__PURE__ */ jsxs(Row, { children: [
-      /* @__PURE__ */ jsx(Cell.Name, { grow: true, width: "49%", children: /* @__PURE__ */ jsx(Title, { childrenWrap: true, children: valueRecord.name ?? valueRecord.id }) }),
-      /* @__PURE__ */ jsx(Cell.Icon, { type: SvgIconType.ValueMapping }),
-      /* @__PURE__ */ jsx(Cell.Combobox, { grow: true, width: "49%", children: /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field: subField, onChange: (value) => handleMappingChange(valueRecord, value) }) })
+      /* @__PURE__ */ jsx(Cell, { type: "name", span: "grow", children: /* @__PURE__ */ jsx(Title, { childrenWrap: true, children: valueRecord.name ?? valueRecord.id }) }),
+      /* @__PURE__ */ jsx(Cell, { type: "icon", icon: SvgIconType.ValueMapping }),
+      /* @__PURE__ */ jsx(Cell, { type: "combobox", span: "grow", children: /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field: subField, onChange: (value) => handleMappingChange(valueRecord, value) }) })
     ] }) }, idx);
   }) });
 }
@@ -157,9 +162,9 @@ function MappingListItem({
     });
   }
   return /* @__PURE__ */ jsx(NestedLevel, { level: field.level + 1, children: /* @__PURE__ */ jsxs(Row, { children: [
-    /* @__PURE__ */ jsx(Cell.Combobox, { grow: true, width: "49%", children: /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field: fromField, onChange: (value) => handleFromChange(value) }) }),
-    /* @__PURE__ */ jsx(Cell.Icon, { type: SvgIconType.ValueMapping }),
-    /* @__PURE__ */ jsx(Cell.Combobox, { grow: true, width: "49%", children: /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field: toField, onChange: (value) => handleToChange(value) }) }),
+    /* @__PURE__ */ jsx(Cell, { type: "combobox", span: "grow", children: /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field: fromField, onChange: (value) => handleFromChange(value) }) }),
+    /* @__PURE__ */ jsx(Cell, { type: "icon", icon: SvgIconType.ValueMapping }),
+    /* @__PURE__ */ jsx(Cell, { type: "combobox", span: "grow", children: /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field: toField, onChange: (value) => handleToChange(value) }) }),
     /* @__PURE__ */ jsx(FieldDelete, { onClick: onDelete })
   ] }) });
 }

package/dist/esm/components/DataBuilder/Nested.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/DataBuilder/data-builder-context.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/DataBuilder/data-field.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/DataBuilder/field-context.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/DataBuilder/hooks.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/DataBuilder/index.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/DataBuilderUI/ActionBar.mjs

@@ -0,0 +1,90 @@
+"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 { clsx } from 'clsx';
+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';
+import { SvgIcon } from '../SvgIcon/index.mjs';
+import { Tooltip } from '../Tooltip/index.mjs';
+
+const dataBuilderActionBarRecipe = sva({
+  className: "data-builder-action-bar",
+  slots: ["root", "button"],
+  base: {
+    root: {
+      display: "flex",
+      flexDir: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "1",
+      w: "5",
+      ml: "-0.5",
+      mr: "-2.5"
+    },
+    button: {
+      display: "flex",
+      flexShrink: "0",
+      flexGrow: "0",
+      justifyContent: "center",
+      alignItems: "center",
+      w: "5",
+      h: "5",
+      border: "1px",
+      borderStyle: "solid",
+      borderColor: "gray.6",
+      bg: "slate.2",
+      color: "slate.10",
+      _hover: {
+        bg: "slate.4"
+      },
+      "& > svg": {
+        w: "3",
+        h: "3",
+        strokeWidth: "2"
+      }
+    }
+  }
+});
+const ActionBarRoot = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const styles = dataBuilderActionBarRecipe();
+    return /* @__PURE__ */ jsx("div", { className: clsx(styles.root, className), ...props, ref, children });
+  }
+);
+ActionBarRoot.displayName = "ActionBarRoot";
+const ActionBarDeleteButton = forwardRef(
+  ({ className, onClick, ...props }, ref) => {
+    const styles = dataBuilderActionBarRecipe();
+    const handleOnClick = useEventStopPropagation(
+      (e) => onClick?.(e)
+    );
+    return /* @__PURE__ */ jsx(Tooltip, { tooltip: "Delete", className: styles.root, usePortal: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: clsx(styles["button"], className),
+        onClick: handleOnClick,
+        "aria-label": "Delete",
+        ...props,
+        ref,
+        children: /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.Close })
+      }
+    ) });
+  }
+);
+ActionBarDeleteButton.displayName = "ActionBarDeleteButton";
+const ActionBar = Object.assign(ActionBarRoot, {
+  DeleteButton: ActionBarDeleteButton
+});
+
+export { ActionBar, dataBuilderActionBarRecipe };

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

@@ -0,0 +1,172 @@
+"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 { clsx } from 'clsx';
+import '../../styled-system/css/css.mjs';
+import '../../styled-system/helpers.mjs';
+import { sva } from '../../styled-system/css/sva.mjs';
+import { SvgIcon } from '../SvgIcon/index.mjs';
+
+const dataBuilderCellRecipe = sva({
+  className: "data-builder-cell",
+  slots: ["root"],
+  base: {
+    root: {
+      overflowX: "hidden",
+      display: "flex",
+      flexDir: "column",
+      alignItems: "start",
+      justifyContent: "center",
+      borderLeftWidth: "1px",
+      borderLeftColor: "slate.3",
+      px: "2.5",
+      py: "1.5",
+      minH: "8.5",
+      bg: "white",
+      borderWidth: "1px 1px 1px 0",
+      borderColor: "slate.3",
+      _first: {
+        borderLeftWidth: "1px",
+        borderBottomLeftRadius: "token(sizes.2.5)",
+        borderTopLeftRadius: "token(sizes.2.5)"
+      },
+      _last: {
+        borderBottomRightRadius: "token(sizes.2.5)",
+        borderTopRightRadius: "token(sizes.2.5)"
+      }
+    }
+  },
+  variants: {
+    type: {
+      name: {
+        root: {
+          flexGrow: "0",
+          flexShrink: "0",
+          flexWrap: "nowrap",
+          alignSelf: "stretch",
+          minW: "40"
+        }
+      },
+      combobox: {
+        root: {
+          flexDir: "row",
+          flexWrap: "wrap",
+          justifyContent: "start",
+          alignItems: "center",
+          px: "0",
+          py: "0"
+        }
+      },
+      input: {
+        root: {
+          px: "2",
+          py: "2",
+          "& > input": {
+            w: "full"
+          }
+        }
+      },
+      value: {
+        root: {
+          py: "2"
+        }
+      },
+      icon: {
+        root: {
+          flexGrow: "0",
+          flexShrink: "0",
+          flexWrap: "nowrap",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "neutral.10",
+          px: "2.5",
+          py: "2.5",
+          "& svg": {
+            w: "3.5",
+            h: "3.5"
+          }
+        }
+      }
+    },
+    disabled: {
+      true: {
+        root: {
+          pointerEvents: "none",
+          bg: "slate.1"
+        }
+      },
+      false: {}
+    },
+    span: {
+      shrink: {
+        root: {
+          flexGrow: "0",
+          flexShrink: "1"
+        }
+      },
+      grow: {
+        root: {
+          flexGrow: "1"
+        }
+      }
+    }
+  }
+});
+const Cell = forwardRef(
+  ({ children, disabled, className, type, span, icon, ...props }, ref) => {
+    const styles = dataBuilderCellRecipe({ type, disabled, span });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(styles.root, className),
+        "aria-disabled": disabled,
+        "aria-readonly": disabled,
+        ...props,
+        ref,
+        children: icon ? /* @__PURE__ */ jsx(SvgIcon, { type: icon }) : children
+      }
+    );
+  }
+);
+Cell.displayName = "Cell";
+const dataBuilderCellButtonRecipe = sva({
+  className: "data-builder-cell-button",
+  slots: ["root"],
+  base: {
+    root: {
+      cursor: "pointer",
+      _hover: {
+        bg: "slate.2"
+      },
+      _active: {
+        bg: "slate.3"
+      }
+    }
+  }
+});
+const CellButton = forwardRef(({ children, disabled, className, type, icon, ...props }, ref) => {
+  const styles = dataBuilderCellRecipe({ type, disabled });
+  const buttonStyles = dataBuilderCellButtonRecipe();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: clsx(styles.root, buttonStyles.root, className),
+      "aria-disabled": disabled,
+      "aria-readonly": disabled,
+      ...props,
+      ref,
+      children: icon ? /* @__PURE__ */ jsx(SvgIcon, { type: icon }) : children
+    }
+  );
+});
+CellButton.displayName = "CellButton";
+
+export { Cell, CellButton, dataBuilderCellButtonRecipe, dataBuilderCellRecipe };

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

@@ -2,35 +2,120 @@
 /*
  * 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 { forwardRef } from 'react';
 import { clsx } from 'clsx';
-import classes from './FieldControlPanel.module.css.mjs';
+import '../../../styled-system/css/css.mjs';
+import '../../../styled-system/helpers.mjs';
+import { sva } from '../../../styled-system/css/sva.mjs';
 
-function FieldControlPanelRoot({
-  children,
-  compact,
-  noWrap
-}) {
-  return /* @__PURE__ */ jsx("div", { className: clsx(classes.panel, compact && classes.panel__compact, noWrap && classes.panel__noWrap), children });
+const fieldControlPanelRecipe = sva({
+  className: "field-control-panel",
+  slots: ["root", "delimiter", "group", "button"],
+  base: {
+    root: {
+      maxW: "full",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      columnGap: "2",
+      rowGap: "1"
+    },
+    delimiter: {
+      color: "slate.10",
+      fontWeight: "medium"
+    },
+    group: {
+      display: "flex",
+      flexDir: "row",
+      flexWrap: "nowrap",
+      overflow: "hidden",
+      maxW: "full"
+    },
+    button: {
+      maxW: "full",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "2",
+      transition: "all",
+      transitionDuration: "200ms",
+      bg: "slate.2",
+      color: "slate.10",
+      borderWidth: "1px",
+      borderColor: "slate.3",
+      rounded: "token(sizes.2.5)",
+      fontWeight: "medium",
+      m: "0",
+      py: "1",
+      px: "2.5",
+      _hover: {
+        bg: "slate.3",
+        borderColor: "slate.4",
+        color: "slate.11"
+      },
+      _disabled: {
+        color: "slate.8",
+        cursor: "not-allowed"
+      },
+      "& svg": {
+        h: "3",
+        w: "3",
+        flexShrink: "0",
+        flexGrow: "0",
+        strokeWidth: "token(sizes.0.5)"
+      },
+      ".field-control-panel__group &": {
+        rounded: "none",
+        "&:not(:first-child)": {
+          borderLeft: "none"
+        },
+        _first: {
+          roundedLeft: "token(sizes.2.5)"
+        },
+        _last: {
+          roundedRight: "token(sizes.2.5)"
+        }
+      }
+    }
+  },
+  variants: {
+    noWrap: {
+      true: {
+        root: {
+          flexWrap: "nowrap"
+        }
+      },
+      false: {}
+    }
+  }
+});
+function FieldControlPanelRoot({ children, noWrap }) {
+  const styles = fieldControlPanelRecipe({ noWrap });
+  return /* @__PURE__ */ jsx("div", { className: styles.root, children });
 }
-function FieldControlPanelText({ children }) {
-  return /* @__PURE__ */ jsx("span", { className: classes.panel_text, children });
+function FieldControlPanelDelimiter({ children }) {
+  const styles = fieldControlPanelRecipe();
+  return /* @__PURE__ */ jsx("span", { className: styles.delimiter, children });
 }
 function FieldControlButtonGroup({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: classes.buttonGroup, children });
+  const styles = fieldControlPanelRecipe();
+  return /* @__PURE__ */ jsx("div", { className: styles.group, children });
 }
 const FieldControlButtonElement = forwardRef(({ children, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx("button", { ref, className: clsx(classes.button, className), ...props, children });
+  const styles = fieldControlPanelRecipe();
+  return /* @__PURE__ */ jsx("button", { ref, className: clsx(styles.button, className), ...props, children });
 });
 const FieldControlPanel = Object.assign(FieldControlPanelRoot, {
-  Text: FieldControlPanelText,
+  Delimiter: FieldControlPanelDelimiter,
   ButtonGroup: FieldControlButtonGroup,
   Button: FieldControlButtonElement
 });
 
-export { FieldControlPanel };
+export { FieldControlPanel, fieldControlPanelRecipe };

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

@@ -0,0 +1,21 @@
+"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 { clsx } from 'clsx';
+import classes from './styles.module.css.mjs';
+
+const BASE_LEVEL = 1;
+function NestedLevel({ level = BASE_LEVEL, children }) {
+  if (level === BASE_LEVEL - 1) {
+    return children;
+  }
+  return /* @__PURE__ */ jsx("div", { className: clsx(classes.nestedLevel), children: /* @__PURE__ */ jsx(NestedLevel, { level: level - 1, children }) });
+}
+
+export { NestedLevel };