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

package/dist/cjs/components/DataBuilder/field-context.cjs

@@ -0,0 +1,87 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var dataField = require('./data-field.cjs');
+
+function useDataBuilderField() {
+  return React.useContext(DataBuilderFieldContext);
+}
+const DataBuilderFieldContext = React.createContext(
+  {
+    field: { level: 0, optionFactories: [] },
+    localSchema: {},
+    setLocalSchema: () => {
+    },
+    resetLocalSchema: () => {
+    },
+    localSchemaChangedManually: false,
+    setLocalSchemaChangedManually: () => {
+    },
+    autoOpen: false,
+    setAutoOpen: () => {
+    }
+  }
+);
+DataBuilderFieldContext.displayName = "DataBuilderFieldContext";
+const DataBuilderFieldProvider = ({ field, children }) => {
+  const [localSchema, setLocalSchema] = React.useState(
+    getDefaultLocalSchema(field)
+  );
+  function resetLocalSchema() {
+    setLocalSchema(getDefaultLocalSchema(field));
+  }
+  const [localSchemaChangedManually, setLocalSchemaChangedManually] = React.useState(false);
+  const [autoOpen, setAutoOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DataBuilderFieldContext.Provider,
+    {
+      value: {
+        field,
+        localSchema,
+        setLocalSchema,
+        resetLocalSchema,
+        localSchemaChangedManually,
+        setLocalSchemaChangedManually,
+        autoOpen,
+        setAutoOpen
+      },
+      children
+    }
+  );
+};
+function getDefaultLocalSchema(field) {
+  const fieldSchemaFromValue = dataField.getFieldSchemaFromValue(field);
+  const fieldSchemaOptions = dataField.getFieldSchemaOptions(field);
+  if (field?.schema) {
+    if (!field?.schema?.type) {
+      return fieldSchemaFromValue || {
+        ...field.schema,
+        type: fieldSchemaOptions[0].type
+      };
+    }
+    if (Array.isArray(field.schema.type)) {
+      return fieldSchemaFromValue || {
+        ...field.schema,
+        type: field.schema.type[0]
+      };
+    }
+    return field.schema;
+  }
+  return fieldSchemaFromValue || {
+    type: fieldSchemaOptions[0].type
+  };
+}
+
+exports.DataBuilderFieldProvider = DataBuilderFieldProvider;
+exports.default = useDataBuilderField;

package/dist/cjs/components/DataBuilder/hooks.cjs

@@ -0,0 +1,30 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var valueSpec = require('../ComboBox/value-spec.cjs');
+var fieldContext = require('./field-context.cjs');
+
+function useDataBuilderFieldCanUseVarFromVariables() {
+  const { field, localSchema } = fieldContext.default();
+  const localSchemaIsArrayOrObject = ["array", "object"].includes(
+    localSchema?.type || ""
+  );
+  if (!localSchemaIsArrayOrObject) {
+    return false;
+  }
+  const valueSpec$1 = valueSpec.getValueSpecFromSchema(localSchema);
+  const hasMatchedVariables = Object.values(
+    field?.variablesSchema?.properties ?? {}
+  ).some((schema) => valueSpec.doesSchemaMatchValueType(schema, valueSpec$1, true));
+  const hasOptionFactories = (field?.optionFactories ?? []).length > 0;
+  return hasMatchedVariables || hasOptionFactories;
+}
+
+exports.useDataBuilderFieldCanUseVarFromVariables = useDataBuilderFieldCanUseVarFromVariables;

package/dist/cjs/components/DataBuilder/index.cjs

@@ -0,0 +1,72 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var sdk = require('@integration-app/sdk');
+var dataField = require('./data-field.cjs');
+require('react/jsx-runtime');
+require('../../ui-kit/styled/text.cjs');
+require('../Tooltip/index.cjs');
+
+function makeDataField({
+  key = void 0,
+  schema: inputSchema,
+  value,
+  optionFactories,
+  variablesSchema,
+  exampleVariables,
+  iconUri,
+  valueLocator,
+  level = 1
+}) {
+  const schema = addAdditionalPropertiesPropertyToNestedObjects(
+    sdk.buildData(inputSchema, sdk.buildData(value))
+  );
+  const field = {
+    key,
+    valueLocator: valueLocator ?? schema?.locator ?? "$",
+    schema,
+    level,
+    isInSchema: !schema?.isImplied,
+    hasSiblings: false,
+    variablesSchema,
+    exampleVariables,
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2322): Type 'ComboBoxOptionsFactoryInterface[] | undefined' is no... Remove this comment to see the full error message
+    optionFactories,
+    value,
+    iconUri,
+    dynamicSchema: inputSchema,
+    dynamicSchemaVariables: value
+  };
+  field.subFields = dataField.extractFieldSubFields(field);
+  return field;
+}
+function addAdditionalPropertiesPropertyToNestedObjects(schema) {
+  if (schema?.type !== "object") {
+    return schema;
+  }
+  const isAdditionalPropertiesAllowed = schema?.additionalProperties ?? dataField.isObjectAllowedAdditionalProperties({
+    schema
+  });
+  const additionalPropertiesObject = isAdditionalPropertiesAllowed ? { additionalProperties: true } : {};
+  return {
+    ...schema,
+    ...additionalPropertiesObject,
+    // Iterate over all properties and calculate `additionalProperties` flag for them
+    properties: Object.fromEntries(
+      Object.entries(schema?.properties ?? {}).map(([k, v]) => [
+        k,
+        addAdditionalPropertiesPropertyToNestedObjects(v)
+      ])
+    )
+  };
+}
+
+exports.makeDataField = makeDataField;

package/dist/cjs/components/DataBuilder/styles.module.css.cjs

@@ -0,0 +1,18 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject = require('style-inject');
+
+var css_248z = ".styles-module_tagGeneric__8PwLz {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.5rem;\n  border-radius: 0.25rem;\n  background-color: rgb(239 246 255 / var(--tw-bg-opacity));\n  --tw-bg-opacity: 0.7;\n  cursor: pointer;\n}\n.styles-module_tagGeneric__8PwLz + .styles-module_tagGeneric__8PwLz {\n  margin-left: 0.5rem;\n}\n.styles-module_tagIcon__1UWRr {\n  color: #b8c6dc;\n  margin-right: 0.25rem;\n  height: 1rem;\n  width: 1rem;\n}\n.styles-module_scalarArrayField__wJ59Y {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\n  min-height: 2.5rem;\n}\n.styles-module_scalarArrayField__wJ59Y::after {\n  margin: 0.25rem;\n  display: inline-flex;\n  height: 2rem;\n  align-items: center;\n  border-radius: 0.25rem;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n  font-size: 1.188rem;\n  line-height: 1.2;\n  --tw-text-opacity: 1;\n  color: rgb(238 238 238 / var(--tw-text-opacity));\n}\n.styles-module_scalarArrayField__wJ59Y:hover::after {\n  --tw-text-opacity: 1;\n  color: rgb(221 221 221 / var(--tw-text-opacity));\n}\n.styles-module_scalarArrayField__wJ59Y:not(:empty)::after {\n  content: '+';\n}\n.styles-module_fieldset__Ob8aH {\n  margin-top: 1rem;\n}\n.styles-module_fieldset__Ob8aH h3 {\n  font-size: 0.875rem;\n  line-height: 1.4;\n  font-weight: 700;\n}\n.styles-module_fieldset__Ob8aH label {\n  margin-bottom: 0.25rem;\n  display: block;\n  cursor: pointer;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.styles-module_backButton__if8y- {\n  margin-bottom: -0.5rem;\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity));\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity));\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n  font-size: 0.75rem;\n  line-height: 1.4;\n  --tw-text-opacity: 1;\n  color: rgb(105 105 105 / var(--tw-text-opacity));\n\n  border-radius: 3px 3px 0 0 !important;\n  border-bottom: none;\n}\n.styles-module_saveButton__quwic {\n  margin-top: 1rem;\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity));\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity));\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.styles-module_drilldownContent__ybSnu {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.styles-module_drilldownContent__ybSnu .styles-module_recordName__1WPiq {\n  border-top-left-radius: 0;\n}\n.styles-module_drilldownContent__ybSnu > .styles-module_nestedLevel__rigjy > .styles-module_record__atsLj {\n  padding-top: 0px;\n}\n.styles-module_drilldownContent__ybSnu .styles-module_nestedLevel__rigjy .styles-module_nestedLevel__rigjy > .styles-module_record__atsLj::before {\n  background-image: none;\n}\n";
+var classes = {"tagGeneric":"styles-module_tagGeneric__8PwLz","tagIcon":"styles-module_tagIcon__1UWRr","scalarArrayField":"styles-module_scalarArrayField__wJ59Y","fieldset":"styles-module_fieldset__Ob8aH","backButton":"styles-module_backButton__if8y-","saveButton":"styles-module_saveButton__quwic","drilldownContent":"styles-module_drilldownContent__ybSnu","recordName":"styles-module_recordName__1WPiq","nestedLevel":"styles-module_nestedLevel__rigjy","record":"styles-module_record__atsLj"};
+styleInject(css_248z);
+
+exports.default = classes;

package/dist/cjs/components/DataBuilderUI/FieldControlPanel/FieldControlPanel.module.css.cjs

@@ -0,0 +1,18 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject = require('style-inject');
+
+var css_248z = ".FieldControlPanel-module_panel__UV0oU {\n    max-width: 100%;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    flex-wrap: wrap;\n    -moz-column-gap: 0.5rem;\n         column-gap: 0.5rem;\n    row-gap: 0.25rem;\n}\n.FieldControlPanel-module_panel__noWrap__1jpGD {\n    flex-wrap: nowrap;\n}\n.FieldControlPanel-module_panel_text__rGw-h {\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity));\n}\n.FieldControlPanel-module_button__RcITE {\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.625rem;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 200ms;\n    border-radius: 0.25rem;\n    border-width: 1px;\n    --tw-border-opacity: 1;\n    border-color: rgb(221 221 221 / var(--tw-border-opacity));\n    --tw-bg-opacity: 1;\n    background-color: rgb(248 248 248 / var(--tw-bg-opacity));\n    --tw-text-opacity: 1;\n    color: rgb(0 0 0 / var(--tw-text-opacity));\n    margin: 0px;\n    padding-top: 0.375rem;\n    padding-bottom: 0.375rem;\n    padding-left: 0.875rem;\n    padding-right: 0.875rem;\n}\n.FieldControlPanel-module_button__RcITE:hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(238 238 238 / var(--tw-bg-opacity));\n}\n.FieldControlPanel-module_button__RcITE svg {\n    height: 0.75rem;\n    width: 0.75rem;\n    flex-shrink: 0;\n    flex-grow: 0;\n    stroke-width: 2px;\n}\n:is(.FieldControlPanel-module_button__RcITE svg):first-child {\n    margin-left: -0.25rem;\n}\n:is(.FieldControlPanel-module_button__RcITE svg):last-child {\n    margin-right: -0.25rem;\n}\n.FieldControlPanel-module_panel__compact__GZTgY .FieldControlPanel-module_button__RcITE {\n    gap: 0.5rem;\n    --tw-text-opacity: 1;\n    color: rgb(170 170 170 / var(--tw-text-opacity));\n    padding-top: 0.125rem;\n    padding-bottom: 0.125rem;\n    padding-left: 0.625rem;\n    padding-right: 0.625rem;\n}\n:is(.FieldControlPanel-module_panel__compact__GZTgY .FieldControlPanel-module_button__RcITE) svg {\n    stroke-width: 1;\n    --tw-text-opacity: 1;\n    color: rgb(105 105 105 / var(--tw-text-opacity));\n}\n:is(.FieldControlPanel-module_panel__compact__GZTgY .FieldControlPanel-module_button__RcITE):hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(238 238 238 / var(--tw-bg-opacity));\n    --tw-text-opacity: 1;\n    color: rgb(39 39 39 / var(--tw-text-opacity));\n}\n:is(.FieldControlPanel-module_panel__compact__GZTgY .FieldControlPanel-module_button__RcITE):hover svg {\n    --tw-text-opacity: 1;\n    color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n.FieldControlPanel-module_buttonGroup__1G4iu {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    overflow: hidden;\n    max-width: 100%;\n}\n.FieldControlPanel-module_buttonGroup__1G4iu .FieldControlPanel-module_button__RcITE {\n    border-radius: 0;\n}\n:is(.FieldControlPanel-module_buttonGroup__1G4iu .FieldControlPanel-module_button__RcITE):not(:first-child) {\n    margin-left: -1px;\n  }\n:is(.FieldControlPanel-module_buttonGroup__1G4iu .FieldControlPanel-module_button__RcITE):first-child {\n    border-top-left-radius: 0.25rem;\n    border-bottom-left-radius: 0.25rem;\n}\n:is(.FieldControlPanel-module_buttonGroup__1G4iu .FieldControlPanel-module_button__RcITE):last-child {\n    border-top-right-radius: 0.25rem;\n    border-bottom-right-radius: 0.25rem;\n}\n";
+var classes = {"panel":"FieldControlPanel-module_panel__UV0oU","panel__noWrap":"FieldControlPanel-module_panel__noWrap__1jpGD","panel_text":"FieldControlPanel-module_panel_text__rGw-h","button":"FieldControlPanel-module_button__RcITE","panel__compact":"FieldControlPanel-module_panel__compact__GZTgY","buttonGroup":"FieldControlPanel-module_buttonGroup__1G4iu"};
+styleInject(css_248z);
+
+exports.default = classes;

package/dist/cjs/components/DataBuilderUI/FieldControlPanel/index.cjs

@@ -0,0 +1,48 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var FieldControlPanel_module = require('./FieldControlPanel.module.css.cjs');
+
+function FieldControlPanelRoot({
+  children,
+  compact,
+  noWrap
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: clsx(
+        FieldControlPanel_module.default.panel,
+        compact && FieldControlPanel_module.default.panel__compact,
+        noWrap && FieldControlPanel_module.default.panel__noWrap
+      ),
+      children
+    }
+  );
+}
+function FieldControlPanelText({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: FieldControlPanel_module.default.panel_text, children });
+}
+function FieldControlButtonGroup({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: FieldControlPanel_module.default.buttonGroup, children });
+}
+const FieldControlButtonElement = React.forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { ref, className: clsx(FieldControlPanel_module.default.button, className), ...props, children });
+});
+const FieldControlPanel = Object.assign(FieldControlPanelRoot, {
+  Text: FieldControlPanelText,
+  ButtonGroup: FieldControlButtonGroup,
+  Button: FieldControlButtonElement
+});
+
+exports.FieldControlPanel = FieldControlPanel;

package/dist/cjs/components/DataBuilderUI/index.cjs

@@ -0,0 +1,318 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var index$1 = require('../SvgIcon/index.cjs');
+var index$2 = require('../Tooltip/index.cjs');
+var useEventStopPropagation = require('../../hooks/useEventStopPropagation.cjs');
+var styles_module = require('./styles.module.css.cjs');
+var index = require('./FieldControlPanel/index.cjs');
+
+function RowRoot({
+  children,
+  className,
+  propertiesComponent,
+  embedded,
+  short
+}) {
+  const childrenList = Array.isArray(children) ? children : [];
+  const nestedPropertiesComponent = childrenList.find(
+    (component) => component?.type === RowProperties
+  );
+  const nestedActionBarComponent = childrenList.find(
+    (component) => component?.type === ActionBar
+  );
+  const childComponents = !childrenList.length ? children : childrenList.filter(
+    /* FIXME: strictNullCheck temporary fix */
+    // @ts-expect-error TS(2345): Argument of type 'string | JSXElementConstructor<a... Remove this comment to see the full error message
+    (component) => ![RowProperties, ActionBar].includes(component?.type)
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: clsx(
+        styles_module.default.rowWrapper,
+        embedded && styles_module.default.rowWrapperEmbedded
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: clsx(
+              styles_module.default.row,
+              embedded && styles_module.default.rowEmbedded,
+              short && styles_module.default.rowShort,
+              className
+            ),
+            children: [
+              childComponents,
+              nestedActionBarComponent
+            ]
+          }
+        ),
+        propertiesComponent,
+        nestedPropertiesComponent
+      ]
+    }
+  );
+}
+const RowProperties = React.forwardRef(
+  ({ children, className, expanded, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx(
+          styles_module.default.rowProperties,
+          expanded && styles_module.default.rowPropertiesExpanded,
+          className
+        ),
+        ...props,
+        ref,
+        children
+      }
+    );
+  }
+);
+RowProperties.displayName = "RowProperties";
+const Row = Object.assign(RowRoot, {
+  Properties: RowProperties
+});
+const PropertyRoot = React.forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default.propertyWrapper, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(styles_module.default.property, className), ...props, ref, children }) });
+});
+PropertyRoot.displayName = "PropertyRoot";
+const PropertyName = React.forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: clsx(styles_module.default.propertyName, className),
+      ...props,
+      ref,
+      children
+    }
+  );
+});
+PropertyName.displayName = "PropertyName";
+const PropertyValue = React.forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: clsx(styles_module.default.propertyValue, className),
+      ...props,
+      ref,
+      children
+    }
+  );
+});
+PropertyValue.displayName = "PropertyValue";
+const Property = Object.assign(PropertyRoot, {
+  Name: PropertyName,
+  Value: PropertyValue
+});
+const CellRoot = React.forwardRef(
+  ({ children, disabled, grow, shrink, width, className, ...props }, ref) => {
+    const style = width ? { flexBasis: width } : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx(
+          styles_module.default.cell,
+          grow && styles_module.default.cellGrow,
+          shrink && styles_module.default.cellShrink,
+          disabled && styles_module.default.cellDisabled,
+          className
+        ),
+        "aria-disabled": disabled,
+        "aria-readonly": disabled,
+        style,
+        ...props,
+        ref,
+        children
+      }
+    );
+  }
+);
+CellRoot.displayName = "CellRoot";
+const CellName = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: clsx(styles_module.default.cellName, className), ...props, ref, children });
+  }
+);
+CellName.displayName = "CellName";
+const CellCombobox = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Cell,
+      {
+        className: clsx(styles_module.default.cellCombobox, className),
+        ...props,
+        ref,
+        children
+      }
+    );
+  }
+);
+CellCombobox.displayName = "CellCombobox";
+const CellValue = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: clsx(styles_module.default.cellValue, className), ...props, ref, children });
+  }
+);
+CellValue.displayName = "CellValue";
+const CellDataInput = CellCombobox;
+CellDataInput.displayName = "CellDataInput";
+const CellInput = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: clsx(styles_module.default.cellInput, className), ...props, ref, children });
+  }
+);
+CellInput.displayName = "CellInput";
+const CellIcon = React.forwardRef(
+  ({ type, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: clsx(styles_module.default.cellIcon, className), ...props, ref, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type }) });
+  }
+);
+CellIcon.displayName = "CellIcon";
+const Cell = Object.assign(CellRoot, {
+  Name: CellName,
+  Combobox: CellCombobox,
+  // @deprecated
+  DataInput: CellDataInput,
+  Input: CellInput,
+  Tag: CellCombobox,
+  Icon: CellIcon,
+  Value: CellValue
+});
+const Title = React.forwardRef(
+  ({
+    children,
+    required,
+    hasValue,
+    hasError,
+    leftSlot,
+    typeSelectorSlot,
+    rightSlot,
+    ...props
+  }, ref) => {
+    const childrenAsText = React.Children.toArray(children).reduce(
+      (acc, el) => {
+        return acc + (typeof el === "string" ? el : "");
+      },
+      ""
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_module.default.title, ...props, ref, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_module.default.title_leftSide, children: [
+        leftSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { children: leftSlot }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default.title_title, title: childrenAsText, children }),
+        rightSlot && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: typeSelectorSlot })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_module.default.title_rightSide, children: [
+        rightSlot && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: rightSlot }),
+        hasError && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: clsx(styles_module.default.title_dot, styles_module.default.title_dot__error)
+          }
+        ),
+        required && !hasError && !hasValue && /* @__PURE__ */ jsxRuntime.jsx(index$2.Tooltip, { tooltip: "Field is required", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: clsx(styles_module.default.title_dot, styles_module.default.title_dot__required)
+          }
+        ) })
+      ] })
+    ] });
+  }
+);
+Title.displayName = "Title";
+const Description = React.forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default.description, ...props, ref, children });
+});
+Description.displayName = "Description";
+const ValueRoot = React.forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default.cellValue, ...props, ref, children });
+  }
+);
+ValueRoot.displayName = "Value";
+const ValueCombobox = React.forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ValueRoot, { className: styles_module.default.cellValueCombobox, ...props, ref, children });
+});
+ValueCombobox.displayName = "ValueCombobox";
+const Value = Object.assign(ValueRoot, {
+  Combobox: ValueCombobox,
+  Tag: ValueCombobox,
+  Inline: ValueRoot
+});
+const ActionBarRoot = React.forwardRef(({ children, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx(styles_module.default.actionBar, className), ...props, ref, children });
+});
+ActionBarRoot.displayName = "ActionBarRoot";
+const ActionBarGenericButton = React.forwardRef(({ className, iconType, tooltip, onClick, ...props }, ref) => {
+  const handleOnClick = useEventStopPropagation.default(
+    (e) => onClick?.(e)
+  );
+  const button = /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: clsx(styles_module.default.actionBarButton, className),
+      onClick: handleOnClick,
+      ...props,
+      ref,
+      children: iconType && /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type: iconType })
+    }
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ jsxRuntime.jsx(index$2.Tooltip, { tooltip, children: button });
+  }
+  return button;
+});
+ActionBarGenericButton.displayName = "ActionBarGenericButton";
+const ActionBarDeleteButton = React.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ActionBarGenericButton,
+    {
+      iconType: index$1.SvgIconType.Close,
+      tooltip: "Delete",
+      "aria-label": "Delete",
+      ...props,
+      ref
+    }
+  );
+});
+ActionBarDeleteButton.displayName = "ActionBarDeleteButton";
+const ActionBar = Object.assign(ActionBarRoot, {
+  GenericButton: ActionBarGenericButton,
+  DeleteButton: ActionBarDeleteButton
+});
+const BASE_LEVEL = 1;
+function NestedLevel({ level = BASE_LEVEL, children }) {
+  if (level === BASE_LEVEL - 1) {
+    return children;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx(styles_module.default.nestedLevel), children: /* @__PURE__ */ jsxRuntime.jsx(NestedLevel, { level: level - 1, children }) });
+}
+function DrilldownBlockContentWrapper({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_module.default.drilldownWrapper, children });
+}
+
+exports.FieldControlPanel = index.FieldControlPanel;
+exports.ActionBar = ActionBar;
+exports.Cell = Cell;
+exports.Description = Description;
+exports.DrilldownBlockContentWrapper = DrilldownBlockContentWrapper;
+exports.NestedLevel = NestedLevel;
+exports.Property = Property;
+exports.Row = Row;
+exports.Title = Title;
+exports.Value = Value;

package/dist/cjs/components/DataBuilderUI/styles.module.css.cjs

@@ -0,0 +1,18 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject = require('style-inject');
+
+var css_248z = ".styles-module_rowWrapper__s8zSx {\n  position: relative;\n}\n\n.styles-module_row__RyekY {\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: stretch;\n  justify-content: flex-start;\n  border-radius: 0.25rem;\n  border-bottom-left-radius: 0;\n  border-width: 1px;\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity));\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n\n.styles-module_rowShort__tlARy {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n.styles-module_row__RyekY:first-child:last-child {\n  border-radius: 0.25rem;\n}\n\n.styles-module_cell__ZTpTA {\n  overflow-x: hidden;\n\n  /* Uses to help Truncate works well */\n\n  display: flex;\n\n  flex-direction: column;\n\n  align-items: flex-start;\n\n  border-left-width: 1px;\n\n  --tw-border-opacity: 1;\n\n  border-color: rgb(221 221 221 / var(--tw-border-opacity));\n\n  padding-left: 1rem;\n\n  padding-right: 1rem;\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n  min-height: 3rem;\n}\n\n.styles-module_cell__ZTpTA:first-child {\n  border-left-width: 0px;\n  border-bottom-left-radius: 0.25rem;\n  border-top-left-radius: 0.25rem;\n}\n\n.styles-module_cell__ZTpTA:last-child {\n  border-bottom-right-radius: 0.25rem;\n  border-top-right-radius: 0.25rem;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellGrow__N9BMH {\n  flex-grow: 1 !important;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellShrink__DX2QJ {\n  flex-shrink: 1 !important;\n  flex-grow: 0 !important;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellDisabled__0J77S {\n  --tw-gradient-via-position: 95%;\n  background-image: linear-gradient(to right, var(--tw-gradient-stops));\n  --tw-gradient-from: #F8F8F8 var(--tw-gradient-from-position);\n  --tw-gradient-to: rgb(248 248 248 / 0) var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n  --tw-gradient-to: rgb(248 248 248 / 0)  var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), #F8F8F8 var(--tw-gradient-via-position), var(--tw-gradient-to);\n  --tw-gradient-to: #fff var(--tw-gradient-to-position);\n  pointer-events: none;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellName__I0hSb {\n  flex-shrink: 0;\n  flex-grow: 0;\n  flex-wrap: nowrap;\n  align-self: stretch;\n  line-height: 1.5;\n  min-width: 10rem;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellCombobox__4XI6E {\n  flex-direction: row;\n  flex-wrap: wrap;\n  padding: 0px;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellCombobox__4XI6E > *[data-role='field-wrapper'] {\n  width: 100%;\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellInput__3nmbF {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.styles-module_cellValue__HSpou {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellInput__3nmbF > input {\n  width: 100%;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellIcon__jfVwU {\n  flex-shrink: 0;\n  flex-grow: 0;\n  flex-wrap: nowrap;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  --tw-text-opacity: 1;\n  color: rgb(105 105 105 / var(--tw-text-opacity));\n  padding: 0px;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellIcon__jfVwU svg {\n  margin: 0.75rem;\n  height: 1.25rem;\n  width: 1.25rem;\n  display: block;\n}\n\n.styles-module_rowWrapper__s8zSx.styles-module_rowWrapperEmbedded__C6L4N {\n  padding-top: 0px !important;\n}\n\n.styles-module_rowEmbedded__HR-4O {\n  border-radius: 0;\n  border-width: 0px;\n  margin: 0px;\n  font-size: 0.875rem;\n  line-height: 1.4;\n}\n\n.styles-module_rowEmbedded__HR-4O + .styles-module_rowEmbedded__HR-4O {\n  border-top-width: 1px;\n}\n\n.styles-module_rowEmbedded__HR-4O .styles-module_cellName__I0hSb {\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity));\n}\n\n.styles-module_title__MYqaj {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  width: 100%;\n  max-width: 100%;\n  white-space: nowrap;\n}\n\n.styles-module_title_leftSide__dtWos {\n  display: flex;\n  min-width: 0px;\n  flex: 1 1 0%;\n  flex-direction: row;\n  align-items: center;\n  gap: 0px;\n}\n\n.styles-module_title_rightSide__wCmXB {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.styles-module_title_title__EJEFa {\n  flex: 1 1 0%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: -moz-fit-content;\n  max-width: fit-content;\n}\n\n.styles-module_title_dot__fZa-R {\n  flex-shrink: 0;\n  flex-grow: 0;\n  margin-top: 0.125rem;\n  display: inline-block;\n  height: 0.5rem;\n  width: 0.5rem;\n  border-radius: 9999px;\n}\n\n.styles-module_title_dot__error__oJq53 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(194 154 6 / var(--tw-bg-opacity));\n}\n\n.styles-module_title_dot__required__EDi-g {\n  cursor: help;\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 54 5 / var(--tw-bg-opacity));\n}\n\n.styles-module_titleBadge__L4l0M {\n  margin-left: 0.375rem;\n  order: 3;\n  transform: translateY(0.05rem);\n}\n\n.styles-module_titleBadge__L4l0M.styles-module_titleBadgeRightSide__yK3S0 {\n  margin-left: auto;\n}\n\n.styles-module_titleBadge__L4l0M.styles-module_titleBadgeRightSide__yK3S0 + .styles-module_titleBadgeRightSide__yK3S0 {\n  margin-left: 0px;\n}\n\n.styles-module_description__nrm2- {\n  margin-top: 0.125rem;\n  width: 100%;\n  font-size: 0.75rem;\n  --tw-text-opacity: 1;\n  color: rgb(39 39 39 / var(--tw-text-opacity));\n  line-height: 1.2;\n}\n\n.styles-module_cell__ZTpTA.styles-module_cellCombobox__4XI6E .styles-module_description__nrm2- {\n  align-self: flex-start;\n}\n\n.styles-module_rowProperties__eYVmN {\n  display: block;\n  overflow: hidden;\n  font-size: 0.813rem;\n  line-height: 1.4;\n  width: -moz-fit-content;\n  width: fit-content;\n  max-width: calc(100% - 0.5rem);\n}\n\n.styles-module_rowProperties__eYVmN.styles-module_rowPropertiesExpanded__YkRyv {\n  width: 100%;\n  overflow: auto;\n  border-width: 1px;\n  border-top-width: 0px;\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity));\n  border-bottom-right-radius: 0.25rem;\n  border-bottom-left-radius: 0.25rem;\n}\n\n.styles-module_rowProperties__eYVmN.styles-module_rowPropertiesExpanded__YkRyv:first-child {\n  border-radius: 0.25rem;\n  border-top-width: 1px;\n}\n\n.styles-module_propertyWrapper__7rA-l {\n  border-right-width: 1px;\n  border-bottom-width: 1px;\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity));\n  border-bottom-right-radius: 0.25rem;\n  border-bottom-left-radius: 0.25rem;\n  display: inline-flex;\n  gap: 0.25rem;\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity));\n  padding-left: 0.5rem;\n  margin-left: -0.5rem;\n}\n\n.styles-module_property__YczwR {\n  border-left-width: 1px;\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity));\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n\n.styles-module_propertyName__rp7UZ {\n  --tw-text-opacity: 1;\n  color: rgb(170 170 170 / var(--tw-text-opacity));\n}\n\n.styles-module_propertyValue__-AKwp {\n  --tw-text-opacity: 1;\n  color: rgb(0 0 0 / var(--tw-text-opacity));\n}\n\n.styles-module_propertyName__rp7UZ + .styles-module_propertyValue__-AKwp {\n  margin-left: 0.25rem;\n}\n\n/* ### Action Bar ### */\n\n.styles-module_actionBar__GudS0 {\n  /* @apply absolute left-full top-0 bottom-0 -ml-2.5; */\n  margin-left: -0.125rem;\n  margin-right: -0.625rem;\n  width: 1.25rem;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n}\n\n.styles-module_actionBarButton__llyoR {\n  flex-shrink: 0;\n  flex-grow: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 1.25rem;\n  width: 1.25rem;\n  border-width: 1px;\n  --tw-border-opacity: 1;\n  border-color: rgb(221 221 221 / var(--tw-border-opacity));\n  --tw-bg-opacity: 1;\n  background-color: rgb(248 248 248 / var(--tw-bg-opacity));\n  --tw-text-opacity: 1;\n  color: rgb(105 105 105 / var(--tw-text-opacity));\n}\n\n.styles-module_actionBarButton__llyoR:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(221 221 221 / var(--tw-bg-opacity));\n}\n\n/* stylelint-disable-next-line */\n\n.styles-module_actionBarButton__llyoR > svg {\n  height: 0.75rem;\n  width: 0.75rem;\n  stroke-width: 2;\n}\n\n/* ### Nested Levels ### */\n\n.styles-module_nestedLevel__fV46p {\n  position: relative;\n}\n\n.styles-module_nestedLevel__fV46p:not(:has(.styles-module_nestedLevel__fV46p)) {\n  margin-right: 0.625rem;\n}\n\n.styles-module_nestedLevel__fV46p > .styles-module_nestedLevel__fV46p {\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+x8AAr8B3gzOjaQAAAAASUVORK5CYII=');\n  background-size: 1px 1px;\n  background-repeat: repeat-y;\n  background-position: top 0 left 1rem;\n  padding-left: 2rem;\n}\n\n.styles-module_nestedLevel__fV46p .styles-module_nestedLevel__fV46p {\n  flex-grow: 1;\n}\n\n.styles-module_nestedLevel__fV46p:not(:empty) + .styles-module_nestedLevel__fV46p:not(:has(> .styles-module_nestedLevel__fV46p)),\n.styles-module_nestedLevel__fV46p:not(:empty) > .styles-module_nestedLevel__fV46p:has(> :not(.styles-module_nestedLevel__fV46p)) {\n  padding-top: 0.5rem;\n}\n\n.styles-module_nestedLevel__fV46p .styles-module_nestedLevel__fV46p:has(> :not(.styles-module_nestedLevel__fV46p))::before {\n  content: '';\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+x8AAr8B3gzOjaQAAAAASUVORK5CYII=');\n  background-size: 3rem 1px;\n  background-repeat: repeat-x;\n  background-position: 0 0;\n  display: block;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: absolute;\n  top: 50%;\n  left: 1rem;\n  margin-top: 0.25rem;\n  width: 1rem;\n  height: 1px;\n}\n\n.styles-module_drilldownWrapper__pq6wB > .styles-module_nestedLevel__fV46p:last-child > .styles-module_nestedLevel__fV46p:last-child {\n  padding-bottom: 0.5rem;\n}\n";
+var classes = {"rowWrapper":"styles-module_rowWrapper__s8zSx","row":"styles-module_row__RyekY","rowShort":"styles-module_rowShort__tlARy","cell":"styles-module_cell__ZTpTA","cellGrow":"styles-module_cellGrow__N9BMH","cellShrink":"styles-module_cellShrink__DX2QJ","cellDisabled":"styles-module_cellDisabled__0J77S","cellName":"styles-module_cellName__I0hSb","cellCombobox":"styles-module_cellCombobox__4XI6E","cellInput":"styles-module_cellInput__3nmbF","cellValue":"styles-module_cellValue__HSpou","cellIcon":"styles-module_cellIcon__jfVwU","rowWrapperEmbedded":"styles-module_rowWrapperEmbedded__C6L4N","rowEmbedded":"styles-module_rowEmbedded__HR-4O","title":"styles-module_title__MYqaj","title_leftSide":"styles-module_title_leftSide__dtWos","title_rightSide":"styles-module_title_rightSide__wCmXB","title_title":"styles-module_title_title__EJEFa","title_dot":"styles-module_title_dot__fZa-R","title_dot__error":"styles-module_title_dot__error__oJq53","title_dot__required":"styles-module_title_dot__required__EDi-g","titleBadge":"styles-module_titleBadge__L4l0M","titleBadgeRightSide":"styles-module_titleBadgeRightSide__yK3S0","description":"styles-module_description__nrm2-","rowProperties":"styles-module_rowProperties__eYVmN","rowPropertiesExpanded":"styles-module_rowPropertiesExpanded__YkRyv","propertyWrapper":"styles-module_propertyWrapper__7rA-l","property":"styles-module_property__YczwR","propertyName":"styles-module_propertyName__rp7UZ","propertyValue":"styles-module_propertyValue__-AKwp","actionBar":"styles-module_actionBar__GudS0","actionBarButton":"styles-module_actionBarButton__llyoR","nestedLevel":"styles-module_nestedLevel__fV46p","drilldownWrapper":"styles-module_drilldownWrapper__pq6wB"};
+styleInject(css_248z);
+
+exports.default = classes;