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

package/dist/cjs/components/Popover/index.cjs

@@ -0,0 +1,148 @@
+"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 reactPopper = require('react-popper');
+var index = require('../Portal/index.cjs');
+var Popover_module = require('./Popover.module.css.cjs');
+var Debounce = require('../../helpers/Debounce.cjs');
+var useWindowEvent = require('../../hooks/useWindowEvent.cjs');
+var clsx = require('clsx');
+var getRefElement = require('../../helpers/getRefElement.cjs');
+require('../../styled-system/css/css.cjs');
+require('../../styled-system/helpers.cjs');
+require('../../styled-system/jsx/is-valid-prop.cjs');
+var box = require('../../styled-system/jsx/box.cjs');
+var popover = require('../../ui-kit/styled/popover.cjs');
+
+function GenericPopover({
+  refElement,
+  isOpen = false,
+  options = {},
+  children,
+  portalNode
+}) {
+  const [popperElement, setPopperElement] = React.useState();
+  const safeRefElement = getRefElement.getRefElement(refElement);
+  const {
+    styles,
+    attributes,
+    update: updatePopover
+  } = reactPopper.usePopper(safeRefElement, popperElement, options);
+  const [debouncedResizeCallback] = Debounce.default(() => {
+    void updatePopover?.();
+  }, 150);
+  useWindowEvent.useWindowEvent("resize", debouncedResizeCallback);
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Portal, { node: portalNode, children: /* @__PURE__ */ jsxRuntime.jsx(
+    box.Box,
+    {
+      ref: setPopperElement,
+      zIndex: "600",
+      style: styles.popper,
+      ...attributes.popper,
+      children
+    }
+  ) });
+}
+const DefaultPopper = React.forwardRef(
+  ({
+    placement = "bottom",
+    refElement,
+    isOpen = false,
+    offset = [0, 8],
+    className,
+    onClick,
+    children,
+    portalNode
+  }, ref) => {
+    const modifiers = [
+      {
+        name: "offset",
+        options: {
+          offset
+        }
+      }
+    ];
+    const popperJsOptions = {
+      placement,
+      modifiers
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      GenericPopover,
+      {
+        refElement,
+        isOpen: !!refElement && isOpen,
+        options: popperJsOptions,
+        portalNode,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            className: clsx(Popover_module.default.defaultPopover, className),
+            onClick,
+            children
+          }
+        )
+      }
+    ) });
+  }
+);
+DefaultPopper.displayName = "DefaultPopper";
+const PopoverNew = React.forwardRef(
+  ({
+    placement = "bottom-start",
+    isOpen,
+    offset = [0, 8],
+    className,
+    children,
+    triggerNode
+  }, ref) => {
+    const [crossAxis, mainAxis] = offset;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      popover.Root,
+      {
+        open: isOpen,
+        lazyMount: true,
+        positioning: {
+          placement,
+          offset: {
+            crossAxis,
+            mainAxis
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(popover.Trigger, { asChild: true, children: triggerNode }),
+          /* @__PURE__ */ jsxRuntime.jsx(popover.Positioner, { ref, children: /* @__PURE__ */ jsxRuntime.jsx(
+            popover.Content,
+            {
+              bg: "neutral.2",
+              borderWidth: "thin",
+              borderColor: "neutral.5",
+              px: "4",
+              py: "2",
+              rounded: "sm",
+              minW: "28",
+              shadow: "none",
+              className,
+              children
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+
+exports.DefaultPopper = DefaultPopper;
+exports.PopoverNew = PopoverNew;

package/dist/cjs/components/Portal/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 reactPortal = require('react-portal');
+var getRefElement = require('../../helpers/getRefElement.cjs');
+
+const isStorybook = Boolean(globalThis?.__STORYBOOK_PREVIEW__);
+const storybookPortalNode = "#storybook-root";
+function Portal({
+  node,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPortal.Portal, { node: getPortalNode(node), children });
+}
+function getPortalNode(portalNode) {
+  if (!portalNode) {
+    if (isStorybook) {
+      return getPortalNode(storybookPortalNode);
+    }
+    return null;
+  }
+  if (typeof portalNode === "string") {
+    return document?.querySelector?.(cssEscapedSelector(portalNode));
+  }
+  if (typeof portalNode === "function") {
+    return portalNode();
+  }
+  return getRefElement.getRefElement(portalNode);
+}
+function cssEscapedSelector(selector) {
+  if (selector.startsWith("#") || selector.startsWith(".")) {
+    const firstChar = selector[0];
+    const rest = selector.slice(1);
+    return `${firstChar}${CSS.escape(rest)}`;
+  }
+  return selector;
+}
+
+exports.Portal = Portal;
+exports.getPortalNode = getPortalNode;

package/dist/cjs/components/Radio/Radio.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 = "@layer elements {\n  .Radio-module_uikit-radio__4iH4e {\n\n    position: relative;\n\n    display: inline-block;\n\n    -webkit-appearance: none;\n\n       -moz-appearance: none;\n\n            appearance: none;\n\n    align-self: baseline;\n\n    cursor: pointer;\n\n    border-width: 1px;\n\n    --tw-border-opacity: 1;\n\n    border-color: rgb(105 105 105 / var(--tw-border-opacity));\n\n    border-radius: 9999px;\n\n    --tw-bg-opacity: 1;\n\n    background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n\n    margin: 0px;\n\n    margin-right: 0.375rem;\n\n    height: 1rem;\n\n    width: 1rem;\n\n    border-style: solid;\n  }\n\n  .Radio-module_uikit-radio__inline__CNV2H {\n\n    vertical-align: baseline;\n    transform: translateY(0.15rem);\n  }\n\n  .Radio-module_uikit-radio__checked__S22n6 {\n    background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='2.5'/%3E%3C/svg%3E\");\n    background-size: 100% 100%;\n    background-position: center center;\n    background-repeat: no-repeat;\n  }\n\n  .Radio-module_uikit-radio__4iH4e:active {\n\n    --tw-border-opacity: 1;\n\n    border-color: rgb(0 0 0 / var(--tw-border-opacity));\n  }\n  .Radio-module_uikit-radio__4iH4e:disabled {\n\n    --tw-border-opacity: 1;\n\n    border-color: rgb(170 170 170 / var(--tw-border-opacity));\n  }\n  .Radio-module_uikit-radio__4iH4e:disabled:checked {\n    background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 10 10' fill='#aaa' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='2.5'/%3E%3C/svg%3E\");\n  }\n  .Radio-module_uikit-radio__4iH4e:hover:not(:disabled, :active) {\n\n    --tw-border-opacity: 1;\n\n    border-color: rgb(0 0 0 / var(--tw-border-opacity));\n\n    --tw-bg-opacity: 1;\n\n    background-color: rgb(248 248 248 / var(--tw-bg-opacity));\n  }\n}\n";
+var classes = {"uikit-radio":"Radio-module_uikit-radio__4iH4e","uikit-radio__inline":"Radio-module_uikit-radio__inline__CNV2H","uikit-radio__checked":"Radio-module_uikit-radio__checked__S22n6"};
+styleInject(css_248z);
+
+exports.default = classes;

package/dist/cjs/components/Radio/index.cjs

@@ -0,0 +1,36 @@
+"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 Radio_module = require('./Radio.module.css.cjs');
+var React = require('react');
+var clsx = require('clsx');
+
+const Radiobutton = React.forwardRef(
+  ({ className, inline, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "radio",
+        className: clsx(
+          Radio_module.default["uikit-radio"],
+          inline && Radio_module.default["uikit-radio__inline"],
+          props?.checked && Radio_module.default["uikit-radio__checked"],
+          className
+        ),
+        ...props,
+        ref
+      }
+    );
+  }
+);
+Radiobutton.displayName = "Radiobutton";
+
+exports.Radiobutton = Radiobutton;

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

@@ -0,0 +1,95 @@
+"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');
+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');
+require('../Input/SearchInput.cjs');
+var SimpleInput_module = require('./SimpleInput.module.css.cjs');
+var clsx = require('clsx');
+var React = require('react');
+
+function SimpleInput({
+  label,
+  value,
+  description,
+  onChange,
+  ...props
+}) {
+  function handleChange(e) {
+    onChange(e.target.value);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { className: 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,
+      {
+        value: value ?? "",
+        onChange: handleChange,
+        variant: "transparent",
+        disabled: props?.disabled,
+        ...props,
+        className: SimpleInput_module.default.input
+      }
+    ) })
+  ] });
+}
+function SimpleInputWithLocalState({
+  value,
+  onChange,
+  ...props
+}) {
+  const [localValue, setLocalValue] = React.useState(value);
+  const [dirtyInput, setDirtyInput] = React.useState(false);
+  React.useEffect(() => {
+    !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/SimpleInput.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 = "@layer elements {\n  .SimpleInput-module_row__6hKYf {\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n  }\n  .SimpleInput-module_rowDisabled__4tZXo {\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    .SimpleInput-module_rowDisabled__4tZXo .SimpleInput-module_input__YrGJe,.SimpleInput-module_rowDisabled__4tZXo .SimpleInput-module_textarea__8wEzp {\n    background-color: transparent;\n    --tw-text-opacity: 1;\n    color: rgb(105 105 105 / var(--tw-text-opacity));\n  }\n\n  .SimpleInput-module_row__6hKYf:focus-within .SimpleInput-module_cell__iN08T {\n    --tw-bg-opacity: 1;\n    background-color: rgb(248 248 248 / var(--tw-bg-opacity));\n  }\n\n  .SimpleInput-module_row__6hKYf .SimpleInput-module_cell__iN08T:has(.SimpleInput-module_input__YrGJe) {\n    padding-top: 0.35rem;\n    padding-bottom: 0.35rem;\n  }\n  .SimpleInput-module_row__6hKYf .SimpleInput-module_cell__iN08T:has(.SimpleInput-module_textarea__8wEzp) {\n    padding: 0;\n  }\n    :is(.SimpleInput-module_row__6hKYf .SimpleInput-module_cell__iN08T:has(.SimpleInput-module_textarea__8wEzp)) .SimpleInput-module_textarea__8wEzp,:is(.SimpleInput-module_row__6hKYf .SimpleInput-module_cell__iN08T:has(.SimpleInput-module_textarea__8wEzp)) > [class*='textareaWrapper']::after {\n      padding-top: 0.75rem;\n      padding-bottom: 0.75rem;\n      width: 100%;\n      form-sizing: normal;\n    }\n  .SimpleInput-module_simpleRadio__71CyG {\n    display: flex;\n    cursor: pointer;\n    align-items: flex-start;\n    gap: 0.25rem;\n    width: -moz-fit-content;\n    width: fit-content;\n  }\n  .SimpleInput-module_simpleRadio_radio__2OU8S {\n    margin-top: 0.13rem;\n  }\n}\n";
+var classes = {"row":"SimpleInput-module_row__6hKYf","rowDisabled":"SimpleInput-module_rowDisabled__4tZXo","input":"SimpleInput-module_input__YrGJe","textarea":"SimpleInput-module_textarea__8wEzp","cell":"SimpleInput-module_cell__iN08T","simpleRadio":"SimpleInput-module_simpleRadio__71CyG","simpleRadio_radio":"SimpleInput-module_simpleRadio_radio__2OU8S"};
+styleInject(css_248z);
+
+exports.default = classes;

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

@@ -0,0 +1,34 @@
+"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 index = require('../Radio/index.cjs');
+var SimpleInput_module = require('./SimpleInput.module.css.cjs');
+
+function SimpleRadio({
+  label,
+  checked,
+  onCheck
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: SimpleInput_module.default.simpleRadio, onClick: onCheck, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      index.Radiobutton,
+      {
+        checked,
+        onChange: () => {
+        },
+        className: SimpleInput_module.default.simpleRadio_radio
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+  ] });
+}
+
+exports.SimpleRadio = SimpleRadio;

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

@@ -0,0 +1,89 @@
+"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 index = require('../DataBuilderUI/index.cjs');
+var index$1 = require('../Textarea/index.cjs');
+var SimpleInput_module = require('./SimpleInput.module.css.cjs');
+var clsx = require('clsx');
+var React = require('react');
+
+function SimpleTextarea({
+  label,
+  value,
+  onChange,
+  ...props
+}) {
+  function handleChange(e) {
+    onChange(e.target.value);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { className: 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(
+      index$1.Textarea,
+      {
+        value: value ?? "",
+        onChange: handleChange,
+        variant: "transparent",
+        ...props,
+        className: SimpleInput_module.default.textarea
+      }
+    ) })
+  ] });
+}
+function SimpleTextareaWithLocalState({
+  value,
+  onChange,
+  ...props
+}) {
+  const [localValue, setLocalValue] = React.useState(value);
+  const [dirtyInput, setDirtyInput] = React.useState(false);
+  React.useEffect(() => {
+    !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/SimpleMenu/index.cjs

@@ -0,0 +1,80 @@
+"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 react = require('@ark-ui/react');
+var menu = require('../../ui-kit/styled/menu.cjs');
+
+const SimpleMenu = ({
+  triggerNode,
+  children,
+  placement = "bottom-start",
+  offset = [0, 4],
+  lazyMount = true,
+  unmountOnExit = true,
+  portalled = false
+}) => {
+  const [crossAxis, mainAxis] = offset;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    menu.Root,
+    {
+      lazyMount,
+      unmountOnExit,
+      positioning: {
+        placement,
+        offset: {
+          crossAxis,
+          mainAxis
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(menu.Trigger, { asChild: true, children: triggerNode }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { disabled: !portalled, children: /* @__PURE__ */ jsxRuntime.jsx(menu.Positioner, { zIndex: "1", children: /* @__PURE__ */ jsxRuntime.jsx(
+          menu.Content,
+          {
+            bg: "neutral.2",
+            borderWidth: "thin",
+            borderColor: "neutral.5",
+            p: "0",
+            rounded: "sm",
+            minW: "28",
+            w: "auto",
+            shadow: "none",
+            gap: "0",
+            children
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+SimpleMenu.Item = React.forwardRef(({ value, children, ...rest }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    menu.Item,
+    {
+      ref,
+      value,
+      m: "0",
+      borderTopWidth: "thin",
+      borderColor: "neutral.6",
+      px: "3",
+      py: "2",
+      fontWeight: "normal",
+      _first: {
+        borderTopWidth: "0"
+      },
+      ...rest,
+      children
+    }
+  );
+});
+
+exports.SimpleMenu = SimpleMenu;