@integration-app/react 2.1.2 → 2.1.3

package/dist/cjs/components/ComboBoxElements/Popper.cjs

@@ -1,164 +0,0 @@
-"use strict";
-/*
- * Integration App React package
- * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.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 usehooksTs = require('usehooks-ts');
-var useResizeObserver = require('../../hooks/useResizeObserver.cjs');
-var useDeepEffect = require('../../hooks/useDeepEffect.cjs');
-var Popper_module = require('./Popper.module.css.cjs');
-var getRefElement = require('../../helpers/getRefElement.cjs');
-
-function DropdownUIPopper({
-  referenceElement,
-  children
-}) {
-  const [popperElement, setPopperElement] = React.useState();
-  const popperOptions = usePopperJsOptions();
-  const safeReferenceElement = getRefElement.getRefElement(referenceElement);
-  const {
-    styles,
-    attributes,
-    update: updatePopover
-  } = reactPopper.usePopper(safeReferenceElement, popperElement, popperOptions);
-  useDebouncedCallbackOnResize(safeReferenceElement, updatePopover);
-  const popperStyles = useDeepEffect.useDeepMemo(() => {
-    return styles.popper;
-  }, [styles.popper]);
-  const popperAttributes = useDeepEffect.useDeepMemo(
-    () => attributes.popper,
-    [attributes.popper]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-combobox": true,
-      role: "dialog",
-      ref: setPopperElement,
-      style: popperStyles,
-      ...popperAttributes,
-      className: Popper_module.default.popper,
-      children: popperElement && children
-    }
-  ) });
-}
-function usePopperJsOptions() {
-  return React.useMemo(() => {
-    const modifiers = [];
-    modifiers.push({
-      name: "setPlacement",
-      enabled: true,
-      phase: "beforeRead",
-      requires: ["flip"],
-      fn({ state }) {
-        const { offsetToTop, offsetToBottom } = getOffsetsFromState(state);
-        const { placement, fallbackPlacements } = getPopperPlacement(
-          state,
-          offsetToTop,
-          offsetToBottom
-        );
-        state.placement = placement;
-        state.options.modifiers.find(
-          (x) => x.name === "flip"
-        ).options.fallbackPlacements = fallbackPlacements;
-      }
-    });
-    modifiers.push({
-      name: "applyMaxHeight",
-      enabled: true,
-      phase: "beforeRead",
-      fn({ state }) {
-        const { offsetToTop, offsetToBottom } = getOffsetsFromState(state);
-        const additionalOffset = state.placement.includes("top") ? 20 : 0;
-        const maxHeight = getMinHeight(offsetToTop, offsetToBottom) - additionalOffset;
-        state.styles.popper = {
-          ...state.styles.popper,
-          maxHeight: `${maxHeight}px`
-        };
-      }
-    });
-    modifiers.push({
-      name: "offset",
-      options: {
-        offset: [0, 4]
-      }
-    });
-    modifiers.push({
-      name: "flip",
-      options: {
-        fallbackPlacements: [
-          "bottom-start",
-          "bottom-end",
-          "top-start",
-          "top-end"
-        ],
-        flipVariations: true
-      }
-    });
-    return {
-      placement: "bottom-start",
-      modifiers
-    };
-  }, []);
-}
-function useDebouncedCallbackOnResize(target, callback) {
-  const [width, setWidth] = React.useState(0);
-  const [height, setHeight] = React.useState(0);
-  const debouncedWidth = usehooksTs.useDebounce(width, 100);
-  const debouncedHeight = usehooksTs.useDebounce(height, 100);
-  React.useEffect(() => {
-    void callback?.();
-  }, [debouncedWidth, debouncedHeight, callback]);
-  useResizeObserver.default(target, ({ resized, size }) => {
-    if (resized.width) {
-      setWidth(size.width);
-    }
-    if (resized.height) {
-      setHeight(size.height);
-    }
-  });
-}
-function getOffsetsFromState(state) {
-  const additionalPadding = 20;
-  const { y: elPositionYRelatedToWindow, height: elHeight } = state.rects.reference;
-  const visualViewport = state.scrollParents.reference.find(
-    (x) => x instanceof VisualViewport
-  );
-  const viewportTopOffset = visualViewport?.pageTop ?? 0;
-  const viewportHeight = visualViewport?.height || window.innerHeight;
-  const topOffsetRelatedToViewport = elPositionYRelatedToWindow - viewportTopOffset;
-  const bottomOffsetRelatedToViewport = viewportHeight - topOffsetRelatedToViewport - elHeight;
-  return {
-    // Calculate available space to show the popper on the top
-    offsetToTop: topOffsetRelatedToViewport - additionalPadding,
-    // Calculate available space to show the popper on the bottom
-    offsetToBottom: bottomOffsetRelatedToViewport - additionalPadding
-  };
-}
-function getPopperPlacement(state, offsetToTop, offsetToBottom) {
-  const freeSpaceBasePlacement = offsetToTop > offsetToBottom ? "top" : "bottom";
-  const [_, baseHorizontalPlacement = "start"] = state.placement.split("-");
-  const placement = `${freeSpaceBasePlacement}-${baseHorizontalPlacement}`;
-  const fallbackPlacements = [
-    `${freeSpaceBasePlacement}-${baseHorizontalPlacement === "start" ? "end" : "start"}`
-  ];
-  return { placement, fallbackPlacements };
-}
-function getMinHeight(offsetToTop, offsetToBottom) {
-  const minAvailableHeight = 300;
-  return Math.max(
-    Math.round(Math.max(offsetToTop, offsetToBottom)),
-    minAvailableHeight
-  );
-}
-
-exports.DropdownUIPopper = DropdownUIPopper;

package/dist/cjs/components/ComboBoxElements/Popper.module.css.cjs

@@ -1,18 +0,0 @@
-/*
- * Integration App React package
- * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
- */
-'use client';
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styleInject = require('style-inject');
-
-var css_248z = "/* Dropdown Popper */\n.Popper-module_popper__HPG3S {\n  z-index: 600;\n  will-change: transform, width, max-height;\n  max-width: -moz-fit-content;\n  max-width: fit-content;\n  display: flex;\n  flex-direction: column;\n}\n.Popper-module_popper__HPG3S[data-popper-reference-hidden='true'] {\n  visibility: hidden;\n  pointer-events: none;\n}\n.Popper-module_popper__HPG3S[data-popper-placement^='top'] {\n  justify-content: flex-end;\n\n  /*\n  When Dropdown is placed on the top, it has additional offset\n  Because we shift Dropdown to the top by 24px to keep SchemaSelector visible\n  */\n  margin-bottom: 20px;\n  margin-left: -9px;\n}\n.Popper-module_popper__HPG3S[data-popper-placement^='bottom'] {\n  justify-content: flex-start;\n}\n";
-var classes = {"popper":"Popper-module_popper__HPG3S"};
-styleInject(css_248z);
-
-exports.default = classes;

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

@@ -1,18 +0,0 @@
-/*
- * Integration App React package
- * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
- */
-'use client';
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styleInject = require('style-inject');
-
-var css_248z = ".Popover-module_defaultPopover__-jzrr {\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  border-radius: 0.25rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  min-width: 7rem\n}\n";
-var classes = {"defaultPopover":"Popover-module_defaultPopover__-jzrr"};
-styleInject(css_248z);
-
-exports.default = classes;

package/dist/cjs/helpers/Debounce.cjs

@@ -1,27 +0,0 @@
-"use strict";
-/*
- * Integration App React package
- * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
- */
-'use client';
-
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function debounce(fn, ms) {
-  let timer = null;
-  const debouncedFunc = (args) => new Promise((resolve) => {
-    if (timer !== null) {
-      clearTimeout(timer);
-    }
-    timer = setTimeout(() => {
-      resolve(fn(args));
-    }, ms);
-  });
-  const teardown = () => timer && clearTimeout(timer);
-  return [debouncedFunc, teardown];
-}
-
-exports.default = debounce;

package/dist/esm/components/ComboBox/DropdownPopover/helpers.mjs

@@ -1,20 +0,0 @@
-"use strict";
-/*
- * Integration App React package
- * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
- */
-'use client';
-
-import { useEffect } from 'react';
-import '../../../ui-kit/styled/popover.mjs';
-import { usePopoverContext } from '@ark-ui/react/popover';
-
-const useMountDropdownReposition = () => {
-  const context = usePopoverContext();
-  useEffect(() => {
-    context.reposition();
-  }, [context.reposition]);
-};
-
-export { useMountDropdownReposition };

package/dist/esm/components/ComboBoxElements/Popper.mjs

@@ -1,162 +0,0 @@
-"use strict";
-/*
- * Integration App React package
- * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
- */
-'use client';
-
-import { jsx } from 'react/jsx-runtime';
-import { useState, useMemo, useEffect } from 'react';
-import { usePopper } from 'react-popper';
-import { Portal } from '../Portal/index.mjs';
-import { useDebounce } from 'usehooks-ts';
-import useResizeObserver from '../../hooks/useResizeObserver.mjs';
-import { useDeepMemo } from '../../hooks/useDeepEffect.mjs';
-import classes from './Popper.module.css.mjs';
-import { getRefElement } from '../../helpers/getRefElement.mjs';
-
-function DropdownUIPopper({
-  referenceElement,
-  children
-}) {
-  const [popperElement, setPopperElement] = useState();
-  const popperOptions = usePopperJsOptions();
-  const safeReferenceElement = getRefElement(referenceElement);
-  const {
-    styles,
-    attributes,
-    update: updatePopover
-  } = usePopper(safeReferenceElement, popperElement, popperOptions);
-  useDebouncedCallbackOnResize(safeReferenceElement, updatePopover);
-  const popperStyles = useDeepMemo(() => {
-    return styles.popper;
-  }, [styles.popper]);
-  const popperAttributes = useDeepMemo(
-    () => attributes.popper,
-    [attributes.popper]
-  );
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-combobox": true,
-      role: "dialog",
-      ref: setPopperElement,
-      style: popperStyles,
-      ...popperAttributes,
-      className: classes.popper,
-      children: popperElement && children
-    }
-  ) });
-}
-function usePopperJsOptions() {
-  return useMemo(() => {
-    const modifiers = [];
-    modifiers.push({
-      name: "setPlacement",
-      enabled: true,
-      phase: "beforeRead",
-      requires: ["flip"],
-      fn({ state }) {
-        const { offsetToTop, offsetToBottom } = getOffsetsFromState(state);
-        const { placement, fallbackPlacements } = getPopperPlacement(
-          state,
-          offsetToTop,
-          offsetToBottom
-        );
-        state.placement = placement;
-        state.options.modifiers.find(
-          (x) => x.name === "flip"
-        ).options.fallbackPlacements = fallbackPlacements;
-      }
-    });
-    modifiers.push({
-      name: "applyMaxHeight",
-      enabled: true,
-      phase: "beforeRead",
-      fn({ state }) {
-        const { offsetToTop, offsetToBottom } = getOffsetsFromState(state);
-        const additionalOffset = state.placement.includes("top") ? 20 : 0;
-        const maxHeight = getMinHeight(offsetToTop, offsetToBottom) - additionalOffset;
-        state.styles.popper = {
-          ...state.styles.popper,
-          maxHeight: `${maxHeight}px`
-        };
-      }
-    });
-    modifiers.push({
-      name: "offset",
-      options: {
-        offset: [0, 4]
-      }
-    });
-    modifiers.push({
-      name: "flip",
-      options: {
-        fallbackPlacements: [
-          "bottom-start",
-          "bottom-end",
-          "top-start",
-          "top-end"
-        ],
-        flipVariations: true
-      }
-    });
-    return {
-      placement: "bottom-start",
-      modifiers
-    };
-  }, []);
-}
-function useDebouncedCallbackOnResize(target, callback) {
-  const [width, setWidth] = useState(0);
-  const [height, setHeight] = useState(0);
-  const debouncedWidth = useDebounce(width, 100);
-  const debouncedHeight = useDebounce(height, 100);
-  useEffect(() => {
-    void callback?.();
-  }, [debouncedWidth, debouncedHeight, callback]);
-  useResizeObserver(target, ({ resized, size }) => {
-    if (resized.width) {
-      setWidth(size.width);
-    }
-    if (resized.height) {
-      setHeight(size.height);
-    }
-  });
-}
-function getOffsetsFromState(state) {
-  const additionalPadding = 20;
-  const { y: elPositionYRelatedToWindow, height: elHeight } = state.rects.reference;
-  const visualViewport = state.scrollParents.reference.find(
-    (x) => x instanceof VisualViewport
-  );
-  const viewportTopOffset = visualViewport?.pageTop ?? 0;
-  const viewportHeight = visualViewport?.height || window.innerHeight;
-  const topOffsetRelatedToViewport = elPositionYRelatedToWindow - viewportTopOffset;
-  const bottomOffsetRelatedToViewport = viewportHeight - topOffsetRelatedToViewport - elHeight;
-  return {
-    // Calculate available space to show the popper on the top
-    offsetToTop: topOffsetRelatedToViewport - additionalPadding,
-    // Calculate available space to show the popper on the bottom
-    offsetToBottom: bottomOffsetRelatedToViewport - additionalPadding
-  };
-}
-function getPopperPlacement(state, offsetToTop, offsetToBottom) {
-  const freeSpaceBasePlacement = offsetToTop > offsetToBottom ? "top" : "bottom";
-  const [_, baseHorizontalPlacement = "start"] = state.placement.split("-");
-  const placement = `${freeSpaceBasePlacement}-${baseHorizontalPlacement}`;
-  const fallbackPlacements = [
-    `${freeSpaceBasePlacement}-${baseHorizontalPlacement === "start" ? "end" : "start"}`
-  ];
-  return { placement, fallbackPlacements };
-}
-function getMinHeight(offsetToTop, offsetToBottom) {
-  const minAvailableHeight = 300;
-  return Math.max(
-    Math.round(Math.max(offsetToTop, offsetToBottom)),
-    minAvailableHeight
-  );
-}
-
-export { DropdownUIPopper };

package/dist/esm/components/ComboBoxElements/Popper.module.css.mjs

@@ -1,14 +0,0 @@
-/*
- * Integration App React package
- * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
- */
-'use client';
-
-import styleInject from 'style-inject';
-
-var css_248z = "/* Dropdown Popper */\n.Popper-module_popper__HPG3S {\n  z-index: 600;\n  will-change: transform, width, max-height;\n  max-width: -moz-fit-content;\n  max-width: fit-content;\n  display: flex;\n  flex-direction: column;\n}\n.Popper-module_popper__HPG3S[data-popper-reference-hidden='true'] {\n  visibility: hidden;\n  pointer-events: none;\n}\n.Popper-module_popper__HPG3S[data-popper-placement^='top'] {\n  justify-content: flex-end;\n\n  /*\n  When Dropdown is placed on the top, it has additional offset\n  Because we shift Dropdown to the top by 24px to keep SchemaSelector visible\n  */\n  margin-bottom: 20px;\n  margin-left: -9px;\n}\n.Popper-module_popper__HPG3S[data-popper-placement^='bottom'] {\n  justify-content: flex-start;\n}\n";
-var classes = {"popper":"Popper-module_popper__HPG3S"};
-styleInject(css_248z);
-
-export { classes as default };

package/dist/esm/components/Popover/Popover.module.css.mjs

@@ -1,14 +0,0 @@
-/*
- * Integration App React package
- * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
- */
-'use client';
-
-import styleInject from 'style-inject';
-
-var css_248z = ".Popover-module_defaultPopover__-jzrr {\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  border-radius: 0.25rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  min-width: 7rem\n}\n";
-var classes = {"defaultPopover":"Popover-module_defaultPopover__-jzrr"};
-styleInject(css_248z);
-
-export { classes as default };

package/dist/esm/helpers/Debounce.mjs

@@ -1,23 +0,0 @@
-"use strict";
-/*
- * Integration App React package
- * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.1.2
- */
-'use client';
-
-function debounce(fn, ms) {
-  let timer = null;
-  const debouncedFunc = (args) => new Promise((resolve) => {
-    if (timer !== null) {
-      clearTimeout(timer);
-    }
-    timer = setTimeout(() => {
-      resolve(fn(args));
-    }, ms);
-  });
-  const teardown = () => timer && clearTimeout(timer);
-  return [debouncedFunc, teardown];
-}
-
-export { debounce as default };

package/dist/types/components/ComboBox/DropdownPopover/helpers.d.ts

@@ -1 +0,0 @@
-export declare const useMountDropdownReposition: () => void;

package/dist/types/components/ComboBoxElements/Popper.d.ts

@@ -1,5 +0,0 @@
-import { MutableRefObject, PropsWithChildren } from 'react';
-export type DropdownUIPopperProps = PropsWithChildren<{
-    referenceElement: HTMLElement | MutableRefObject<HTMLElement | null> | null;
-}>;
-export declare function DropdownUIPopper({ referenceElement, children, }: DropdownUIPopperProps): import("react/jsx-runtime").JSX.Element;