@integration-app/react 2.15.0 → 2.17.0

package/dist/cjs/components/SimpleInput/SimpleInput.cjs

@@ -2,95 +2,47 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.15.0
+ * v2.17.0
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var clsx = require('clsx');
 require('@integration-app/sdk');
 require('js-convert-case');
 var FieldDescription = require('../DataBuilder/FieldDescription.cjs');
 var index = require('../DataBuilderUI/index.cjs');
-var Input = require('../Input/Input.cjs');
-var SimpleInput_module = require('./SimpleInput.module.css.cjs');
+var recipe = require('./recipe.cjs');
 
 function SimpleInput({
   label,
   value,
   description,
   onChange,
+  className,
   ...props
 }) {
+  const simpleInputClassNames = recipe.simpleInputRecipe({
+    disabled: props.disabled
+  });
   function handleChange(e) {
     onChange(e.target.value);
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { className: clsx.clsx(SimpleInput_module.default.row, props?.disabled && SimpleInput_module.default.rowDisabled), children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Name, { children: /* @__PURE__ */ jsxRuntime.jsx(index.Title, { rightSlot: /* @__PURE__ */ jsxRuntime.jsx(FieldDescription.FieldDescription, { text: description }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: label }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Input, { className: SimpleInput_module.default.cell, grow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-      Input.Input,
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { className: simpleInputClassNames.row, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Name, { children: /* @__PURE__ */ jsxRuntime.jsx(index.Title, { rightSlot: /* @__PURE__ */ jsxRuntime.jsx(FieldDescription.FieldDescription, { text: description }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: simpleInputClassNames.title, children: label }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Input, { className: simpleInputClassNames.cell, grow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
       {
         value: value ?? "",
         onChange: handleChange,
-        variant: "transparent",
         disabled: props?.disabled,
         ...props,
-        className: SimpleInput_module.default.input
+        className: clsx.clsx(simpleInputClassNames.input, className)
       }
     ) })
   ] });
 }
-function SimpleInputWithLocalState({
-  value,
-  onChange,
-  ...props
-}) {
-  const [localValue, setLocalValue] = React.useState(value);
-  const [dirtyInput, setDirtyInput] = React.useState(false);
-  React.useEffect(() => {
-    if (!dirtyInput) {
-      setLocalValue(value);
-    }
-  }, [value, dirtyInput]);
-  function handleLocalChange(value2) {
-    setLocalValue(value2);
-    setDirtyInput(true);
-  }
-  function handleFocus(e) {
-    props?.onFocus?.(e);
-    setDirtyInput(true);
-  }
-  function handleBlur(e) {
-    props?.onBlur?.(e);
-    handleChange();
-  }
-  function handleChange() {
-    onChange(localValue);
-    setDirtyInput(false);
-  }
-  function handleKeyUp(e) {
-    props.onKeyUp?.(e);
-    if (e.key === "Enter") {
-      handleChange();
-    }
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SimpleInput,
-    {
-      value: localValue,
-      onChange: handleLocalChange,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onKeyUp: handleKeyUp,
-      ...props
-    }
-  );
-}
-const DataBuilderSimpleInput = SimpleInput;
 
-exports.DataBuilderSimpleInput = DataBuilderSimpleInput;
 exports.SimpleInput = SimpleInput;
-exports.SimpleInputWithLocalState = SimpleInputWithLocalState;

package/dist/cjs/components/SimpleInput/SimpleTextarea.cjs

@@ -2,18 +2,16 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.15.0
+ * v2.17.0
  */
 'use client';
 
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
 var index = require('../DataBuilderUI/index.cjs');
 var index$1 = require('../Textarea/index.cjs');
-var SimpleInput_module = require('./SimpleInput.module.css.cjs');
+var recipe = require('./recipe.cjs');
 
 function SimpleTextarea({
   label,
@@ -21,71 +19,24 @@ function SimpleTextarea({
   onChange,
   ...props
 }) {
+  const simpleInputClassNames = recipe.simpleInputRecipe({
+    disabled: props.disabled
+  });
   function handleChange(e) {
     onChange(e.target.value);
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { className: clsx.clsx(SimpleInput_module.default.row, props?.disabled && SimpleInput_module.default.rowDisabled), children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Name, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: label }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(index.Cell, { className: SimpleInput_module.default.cell, grow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { className: simpleInputClassNames.row, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Name, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: simpleInputClassNames.title, children: label }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index.Cell, { className: simpleInputClassNames.cell, grow: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       index$1.Textarea,
       {
         value: value ?? "",
         onChange: handleChange,
-        variant: "transparent",
         ...props,
-        className: SimpleInput_module.default.textarea
+        className: simpleInputClassNames.textarea
       }
     ) })
   ] });
 }
-function SimpleTextareaWithLocalState({
-  value,
-  onChange,
-  ...props
-}) {
-  const [localValue, setLocalValue] = React.useState(value);
-  const [dirtyInput, setDirtyInput] = React.useState(false);
-  React.useEffect(() => {
-    if (!dirtyInput) {
-      setLocalValue(value);
-    }
-  }, [value, dirtyInput]);
-  function handleLocalChange(value2) {
-    setLocalValue(value2);
-    setDirtyInput(true);
-  }
-  function handleFocus(e) {
-    props?.onFocus?.(e);
-    setDirtyInput(true);
-  }
-  function handleBlur(e) {
-    props?.onBlur?.(e);
-    handleChange();
-  }
-  function handleChange() {
-    onChange(localValue);
-    setDirtyInput(false);
-  }
-  function handleKeyUp(e) {
-    props.onKeyUp?.(e);
-    if (e.key === "Enter") {
-      handleChange();
-    }
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SimpleTextarea,
-    {
-      value: localValue,
-      onChange: handleLocalChange,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onKeyUp: handleKeyUp,
-      ...props
-    }
-  );
-}
-const DataBuilderSimpleTextarea = SimpleTextarea;
 
-exports.DataBuilderSimpleTextarea = DataBuilderSimpleTextarea;
 exports.SimpleTextarea = SimpleTextarea;
-exports.SimpleTextareaWithLocalState = SimpleTextareaWithLocalState;

package/dist/cjs/components/SimpleInput/recipe.cjs

@@ -0,0 +1,73 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.17.0
+ */
+'use client';
+
+'use strict';
+
+require('../../styled-system/css/css.cjs');
+require('../../styled-system/helpers.cjs');
+var sva = require('../../styled-system/css/sva.cjs');
+
+const simpleInputRecipe = sva.sva({
+  className: "simple-input",
+  slots: ["row", "cell", "title", "input", "textarea"],
+  base: {
+    row: {
+      transition: "colors"
+    },
+    cell: {
+      _focusWithin: {
+        bg: "gray.2"
+      },
+      "&:has(.simple-input__input)": {
+        pt: "0.35rem",
+        pb: "0.35rem"
+      },
+      "&:has(.simple-input__textarea)": {
+        p: "0"
+      }
+    },
+    title: { whiteSpace: "nowrap" },
+    input: {
+      bg: "transparent",
+      border: "transparent",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      h: "9",
+      px: "4",
+      transition: "all",
+      transitionDuration: "faster",
+      rounded: "md",
+      color: "black",
+      _focus: {
+        outline: "none"
+      },
+      _disabled: {
+        color: "neutral.7",
+        _placeholder: {
+          color: "neutral.7"
+        }
+      }
+    }
+  },
+  variants: {
+    disabled: {
+      true: {
+        row: {
+          bg: "neutral.1",
+          color: "neutral.9"
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
+
+exports.simpleInputRecipe = simpleInputRecipe;

package/dist/cjs/components/SvgIcon/BasicEntities.cjs

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

package/dist/cjs/components/SvgIcon/index.cjs

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

package/dist/cjs/components/SvgIcon/svg-icon-type.cjs

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

package/dist/cjs/components/Tag/Components.cjs

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

package/dist/cjs/components/Tag/SegmentSeparator.cjs

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

package/dist/cjs/components/Tag/Tag.cjs

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

package/dist/cjs/components/Tag/TagPlaceholder.cjs

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

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

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

package/dist/cjs/components/Textarea/index.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.15.0
+ * v2.17.0
  */
 'use client';
 
@@ -11,7 +11,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var Textarea_module = require('./Textarea.module.css.cjs');
+var recipe = require('./recipe.cjs');
 
 const CssPropTextareaMaxHeight = "--uikit-textarea-max-height";
 const Textarea = React.forwardRef(
@@ -35,24 +35,22 @@ const Textarea = React.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
+const textAreaClassName = recipe.textAreaRecipe();
 const GenericTextarea = React.forwardRef(
-  ({ className, variant, children, ...props }, ref) => {
+  ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "textarea",
       {
         ref,
-        className: clsx.clsx(
-          Textarea_module.default["uikit-textarea"],
-          getClassNameByVariant(variant),
-          className
-        ),
+        className: clsx.clsx(textAreaClassName, className),
         ...props,
         children
       }
     );
   }
 );
-const TextareaWithAutoHeight = React.forwardRef(({ maxHeight, ...props }, ref) => {
+const textAreaWrapperClassName = recipe.textAreaWrapperRecipe();
+const TextareaWithAutoHeight = React.forwardRef(({ maxHeight = "auto", ...props }, ref) => {
   const refWrapper = React.useRef(null);
   const handleOnInput = (e) => {
     const wrapper = refWrapper.current;
@@ -67,18 +65,7 @@ const TextareaWithAutoHeight = React.forwardRef(({ maxHeight, ...props }, ref) =
       `${maxHeightValue}`
     );
   }, [maxHeight]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: refWrapper, className: Textarea_module.default.textareaWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(GenericTextarea, { ref, onInput: handleOnInput, ...props }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: refWrapper, className: textAreaWrapperClassName, children: /* @__PURE__ */ jsxRuntime.jsx(GenericTextarea, { ref, onInput: handleOnInput, ...props }) });
 });
-function getClassNameByVariant(variant) {
-  switch (variant) {
-    case "background":
-      return Textarea_module.default["uikit-textarea__background"];
-    case "transparent":
-      return Textarea_module.default["uikit-textarea__transparent"];
-    case "border":
-    default:
-      return Textarea_module.default["uikit-textarea__border"];
-  }
-}
 
 exports.Textarea = Textarea;

package/dist/cjs/components/Textarea/recipe.cjs

@@ -0,0 +1,71 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.17.0
+ */
+'use client';
+
+'use strict';
+
+require('../../styled-system/css/css.cjs');
+var cva = require('../../styled-system/css/cva.cjs');
+require('../../styled-system/helpers.cjs');
+
+const textAreaRecipe = cva.cva({
+  base: {
+    w: "full",
+    py: "2",
+    px: "4",
+    rounded: "sm",
+    transition: "all",
+    transitionDuration: "faster",
+    borderWidth: "1px",
+    borderColor: "transparent",
+    borderStyle: "solid",
+    bg: "transparent",
+    color: "black",
+    _focus: {
+      outline: "none"
+    },
+    _placeholder: {
+      color: "neutral.9"
+    },
+    _disabled: {
+      color: "neutral.8",
+      _placeholder: {
+        color: "neutral.7"
+      }
+    }
+  }
+});
+const textAreaWrapperRecipe = cva.cva({
+  base: {
+    display: "grid",
+    w: "full",
+    overflowY: "hidden",
+    _after: {
+      content: "attr(data-replicated-value) ' '",
+      whiteSpace: "pre-wrap",
+      visibility: "hidden",
+      maxH: "var(--uikit-textarea-max-height, auto)",
+      rounded: "sm",
+      px: "4",
+      py: "2",
+      transition: "all",
+      transitionDuration: "faster",
+      borderWidth: "1px",
+      borderColor: "transparent",
+      borderStyle: "solid",
+      gridArea: "1 / 1 / 2 / 2"
+    },
+    "& > textarea": {
+      resize: "none",
+      overflow: "auto",
+      gridArea: "1 / 1 / 2 / 2"
+    }
+  }
+});
+
+exports.textAreaRecipe = textAreaRecipe;
+exports.textAreaWrapperRecipe = textAreaWrapperRecipe;

package/dist/cjs/components/Toggle/index.cjs

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

package/dist/cjs/components/Tooltip/index.cjs

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

package/dist/cjs/components/Truncate/index.cjs

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

package/dist/cjs/contexts/integration-app-client-context.cjs

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

package/dist/cjs/contexts/integration-app-connection-context.cjs

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

package/dist/cjs/contexts/integration-app-context.cjs

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

package/dist/cjs/contexts/integration-app-integration-context.cjs

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

package/dist/cjs/helpers/getRefElement.cjs

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

package/dist/cjs/helpers/hooks/keyboard-events.cjs

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

package/dist/cjs/helpers/hooks/useDeepEffect.cjs

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

package/dist/cjs/helpers/hooks/useEventStopPropagation.cjs

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

package/dist/cjs/helpers/hooks/useForwardedRef.cjs

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

package/dist/cjs/helpers/hooks/useIsTextTruncated.cjs

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

package/dist/cjs/helpers/hooks/useResizeObserver.cjs

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

package/dist/cjs/helpers/hooks/useThrottle.cjs

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

package/dist/cjs/helpers/hooks/useWindowEvent.cjs

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

package/dist/cjs/helpers/simple-unique-id.cjs

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