linear-react-components-ui 1.1.26-beta.16 → 1.1.26-beta.18

package/lib/dialog/base/index.js

@@ -1,176 +1,203 @@
-import { jsx as z, jsxs as Ce } from "react/jsx-runtime";
-import { c as De } from "../../_virtual/compiler-runtime.js";
-import '../../assets/styles/dialog.css';/* empty css                              */
-import Re from "react-dom";
-import { createContext as _e, useContext as Oe, useState as he, useRef as le, useEffect as q, useLayoutEffect as Le } from "react";
-import Ne from "./style.js";
-import { FormDialogContext as Se } from "../form/index.js";
-import Pe from "../../node_modules/uuid/dist/v4.js";
-const Me = _e({}), {
-  body: ke
-} = document, ze = (c) => {
-  const e = De.c(68);
-  let m;
-  e[0] === Symbol.for("react.memo_cache_sentinel") ? (m = Pe(), e[0] = m) : m = e[0];
-  const we = m, {
-    id: re,
-    overlay: ce,
-    closeOnEsc: f,
-    closeOnOutsideClick: F,
-    wrapperClassName: ae,
-    className: de,
-    children: T,
-    open: a,
-    onOpenChange: d,
-    zIndex: me,
-    handlerClose: E
-  } = c, U = re === void 0 ? we : re, G = ce === void 0 ? !0 : ce, J = ae === void 0 ? "" : ae, be = de === void 0 ? "" : de, {
-    headerRef: Q
-  } = Oe(Se), [fe, ue] = he(a), t = fe === void 0 ? !0 : fe, [i, pe] = he(!1), o = le(null), V = le(null);
-  let x;
-  e[1] === Symbol.for("react.memo_cache_sentinel") ? (x = [], e[1] = x) : x = e[1];
-  const ye = le(x);
-  a !== void 0 && a !== t && ue(a);
-  let C;
-  e[2] !== E || e[3] !== d || e[4] !== a ? (C = () => {
-    a !== void 0 && d ? d(!1) : (E && E(), d && d(!1));
-  }, e[2] = E, e[3] = d, e[4] = a, e[5] = C) : C = e[5];
-  const l = C;
-  let D;
-  e[6] !== F || e[7] !== l || e[8] !== i ? (D = (n) => {
-    if (!F)
-      return;
-    const s = n.target;
-    n.stopPropagation(), o !== null && o.current !== null && !i && !o.current.contains(s) && l();
-  }, e[6] = F, e[7] = l, e[8] = i, e[9] = D) : D = e[9];
-  const Z = D;
-  let R;
-  e[10] !== l ? (R = (n) => {
-    n?.key === "Escape" && (n.stopPropagation(), l());
-  }, e[10] = l, e[11] = R) : R = e[11];
-  const _ = R;
-  let O, L;
-  e[12] !== t ? (O = () => {
-    t && V.current && (ye.current = Array.from(V.current.querySelectorAll("button, a, input, select, textarea, [tabindex]:not([tabindex='-1'])")));
-  }, L = [t], e[12] = t, e[13] = O, e[14] = L) : (O = e[13], L = e[14]), q(O, L);
-  let N;
-  e[15] === Symbol.for("react.memo_cache_sentinel") ? (N = (n) => {
-    const {
-      positionX: s,
-      positionY: r
-    } = n;
-    if (o.current) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DialogContext = void 0;
+require("../../assets/styles/dialog.scss");
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var uuid = _interopRequireWildcard(require("uuid"));
+var _style = _interopRequireDefault(require("./style"));
+var _form = require("../form");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DialogContext = exports.DialogContext = /*#__PURE__*/_react.default.createContext({});
+const {
+  body
+} = document;
+const BaseDialog = props => {
+  const baseDialogId = uuid.v4();
+  const {
+    id = baseDialogId,
+    overlay = true,
+    closeOnEsc,
+    closeOnOutsideClick,
+    wrapperClassName = '',
+    className = '',
+    children,
+    open: openProp,
+    onOpenChange,
+    zIndex,
+    handlerClose
+  } = props;
+  const {
+    headerRef
+  } = _react.default.useContext(_form.FormDialogContext);
+  const [open = true, setOpen] = _react.default.useState(openProp);
+  const [isDragging, setIsDragging] = _react.default.useState(false);
+  const wrapperEl = _react.default.useRef(null);
+  const modalContainerRef = _react.default.useRef(null);
+  const focusableElementsRef = _react.default.useRef([]);
+  if (openProp !== undefined && openProp !== open) {
+    setOpen(openProp);
+  }
+  const handleClose = () => {
+    if (openProp !== undefined && onOpenChange) {
+      onOpenChange(false);
+    } else {
+      if (handlerClose) handlerClose();
+      if (onOpenChange) onOpenChange(false);
+    }
+  };
+  const handleClickOutside = event => {
+    if (!closeOnOutsideClick) return;
+    const target = event.target;
+    event.stopPropagation();
+    if (wrapperEl !== null && wrapperEl.current !== null && !isDragging && !wrapperEl.current.contains(target)) {
+      handleClose();
+    }
+  };
+  const onKeyDownPress = event => {
+    if (event?.key === 'Escape') {
+      event.stopPropagation();
+      handleClose();
+    }
+  };
+  _react.default.useEffect(() => {
+    if (open && modalContainerRef.current) {
+      focusableElementsRef.current = Array.from(modalContainerRef.current.querySelectorAll("button, a, input, select, textarea, [tabindex]:not([tabindex='-1'])"));
+    }
+  }, [open]);
+  const onDialogPositionChange = _ref => {
+    let {
+      positionX,
+      positionY
+    } = _ref;
+    if (wrapperEl.current) {
       const {
-        width: b,
-        height: ge
-      } = o.current.getBoundingClientRect();
-      let se = s <= 0 ? 0 : s, ie = r <= 0 ? 0 : r;
-      se + b >= window.innerWidth && (se = window.innerWidth - b), ie + ge >= window.innerHeight && (ie = window.innerHeight - ge), o.current.style.transform = `translate(${se}px, ${ie}px)`, o.current.style.transition = "none", o.current.style.left = "0", o.current.style.top = "0", o.current.style.position = "absolute";
+        width,
+        height
+      } = wrapperEl.current.getBoundingClientRect();
+      let x = positionX <= 0 ? 0 : positionX;
+      let y = positionY <= 0 ? 0 : positionY;
+      if (x + width >= window.innerWidth) x = window.innerWidth - width;
+      if (y + height >= window.innerHeight) y = window.innerHeight - height;
+      wrapperEl.current.style.transform = `translate(${x}px, ${y}px)`;
+      wrapperEl.current.style.transition = 'none';
+      wrapperEl.current.style.left = '0';
+      wrapperEl.current.style.top = '0';
+      wrapperEl.current.style.position = 'absolute';
     }
-  }, e[15] = N) : N = e[15];
-  const Ee = N;
-  let S;
-  e[16] !== i ? (S = (n) => {
-    if (o.current && i) {
+  };
+  const onMouseMove = event => {
+    if (wrapperEl.current && isDragging) {
       const {
-        left: s,
-        top: r
-      } = o.current.getBoundingClientRect();
-      Ee({
-        positionX: n.movementX + s,
-        positionY: n.movementY + r
+        left,
+        top
+      } = wrapperEl.current.getBoundingClientRect();
+      onDialogPositionChange({
+        positionX: event.movementX + left,
+        positionY: event.movementY + top
       });
     }
-  }, e[16] = i, e[17] = S) : S = e[17];
-  const P = S;
-  let M;
-  e[18] !== Q ? (M = (n) => {
-    const s = n.target, r = Q?.current?.contains(s);
-    o.current && r && pe(!0);
-  }, e[18] = Q, e[19] = M) : M = e[19];
-  const k = M;
-  let K;
-  e[20] === Symbol.for("react.memo_cache_sentinel") ? (K = () => {
-    o.current && pe(!1);
-  }, e[20] = K) : K = e[20];
-  const ve = K;
-  let W;
-  e[21] === Symbol.for("react.memo_cache_sentinel") ? (W = (n) => {
-    if (n.key === "Tab") {
+  };
+  const onMouseDown = event => {
+    const element = event.target;
+    const isHeader = headerRef?.current?.contains(element);
+    if (wrapperEl.current && isHeader) setIsDragging(true);
+  };
+  const onMouseUp = () => {
+    if (wrapperEl.current) setIsDragging(false);
+  };
+  const handleKeyDown = e => {
+    if (e.key === 'Tab') {
       const {
-        current: s
-      } = ye;
-      if (s.length === 0)
-        return;
-      const r = s[0], b = s[s.length - 1];
-      n.shiftKey && document.activeElement === r ? (b.focus(), n.preventDefault()) : !n.shiftKey && document.activeElement === b && (r.focus(), n.preventDefault());
+        current: elements
+      } = focusableElementsRef;
+      if (elements.length === 0) return;
+      const firstElement = elements[0];
+      const lastElement = elements[elements.length - 1];
+      if (e.shiftKey && document.activeElement === firstElement) {
+        lastElement.focus();
+        e.preventDefault();
+      } else if (!e.shiftKey && document.activeElement === lastElement) {
+        firstElement.focus();
+        e.preventDefault();
+      }
     }
-  }, e[21] = W) : W = e[21];
-  const xe = W, ee = me ? Number(me) : void 0;
-  let u;
-  e[22] !== ee ? (u = {
-    zIndex: ee
-  }, e[22] = ee, e[23] = u) : u = e[23];
-  let p;
-  e[24] !== G ? (p = G && /* @__PURE__ */ z("div", { className: "modal-overlay", "data-testid": "modal-overlay" }), e[24] = G, e[25] = p) : p = e[25];
-  const te = `dialog ${be}`;
-  let y;
-  e[26] !== c ? (y = Ne(c), e[26] = c, e[27] = y) : y = e[27];
-  let v;
-  e[28] !== T || e[29] !== y || e[30] !== J ? (v = /* @__PURE__ */ z("div", { className: J, "data-testid": "dialog-wrapper", style: y, ref: o, children: T }), e[28] = T, e[29] = y, e[30] = J, e[31] = v) : v = e[31];
-  let g;
-  e[32] !== te || e[33] !== v ? (g = /* @__PURE__ */ z("div", { className: te, "data-testid": "dialog-component", children: v }), e[32] = te, e[33] = v, e[34] = g) : g = e[34];
-  let $;
-  e[35] !== Z || e[36] !== U || e[37] !== u || e[38] !== p || e[39] !== g ? ($ = /* @__PURE__ */ Ce("div", { id: U, onKeyDown: xe, ref: V, className: "modalcontainer", onMouseDown: Z, style: u, children: [
-    p,
-    g
-  ] }), e[35] = Z, e[36] = U, e[37] = u, e[38] = p, e[39] = g, e[40] = $) : $ = e[40];
-  const ne = $;
-  let B;
-  e[41] === Symbol.for("react.memo_cache_sentinel") ? (B = [], e[41] = B) : B = e[41], Le(Ke, B);
-  let I;
-  e[42] !== f || e[43] !== _ || e[44] !== t ? (I = () => (t && f && document.addEventListener("keydown", _), () => {
-    document.removeEventListener("keydown", _);
-  }), e[42] = f, e[43] = _, e[44] = t, e[45] = I) : I = e[45];
-  let A;
-  e[46] !== f || e[47] !== t ? (A = [t, f], e[46] = f, e[47] = t, e[48] = A) : A = e[48], q(I, A);
-  let H;
-  e[49] !== i || e[50] !== k || e[51] !== P || e[52] !== t ? (H = () => (t && (document.addEventListener("mousedown", k), document.addEventListener("mouseup", ve), i && document.addEventListener("mousemove", P)), () => {
-    document.removeEventListener("mousedown", k), document.removeEventListener("mouseup", ve), document.removeEventListener("mousemove", P);
-  }), e[49] = i, e[50] = k, e[51] = P, e[52] = t, e[53] = H) : H = e[53];
-  let X;
-  e[54] !== i || e[55] !== t ? (X = [i, t], e[54] = i, e[55] = t, e[56] = X) : X = e[56], q(H, X);
-  let Y;
-  if (e[57] !== t ? (Y = [t], e[57] = t, e[58] = Y) : Y = e[58], q(We, Y), !t)
-    return null;
-  const oe = d || ue;
-  let h;
-  e[59] !== l || e[60] !== t || e[61] !== oe ? (h = {
-    handleClose: l,
-    open: t,
-    onOpenChange: oe
-  }, e[59] = l, e[60] = t, e[61] = oe, e[62] = h) : h = e[62];
-  let w;
-  e[63] !== ne ? (w = Re.createPortal(ne, ke), e[63] = ne, e[64] = w) : w = e[64];
-  let j;
-  return e[65] !== h || e[66] !== w ? (j = /* @__PURE__ */ z(Me.Provider, { value: h, children: w }), e[65] = h, e[66] = w, e[67] = j) : j = e[67], j;
-};
-function Ke() {
-  const {
-    activeElement: c
-  } = document, e = c;
-  return () => {
-    e?.focus();
-  };
-}
-function We() {
-  const c = window.innerWidth - document.documentElement.clientWidth, e = document.body.style.overflow, m = document.body.style.paddingRight;
-  return document.body.style.overflow = "hidden", document.body.style.paddingRight = `${c}px`, () => {
-    document.body.style.overflow = e, document.body.style.paddingRight = m;
   };
-}
-export {
-  Me as DialogContext,
-  ze as default
+  const createdModal = /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    onKeyDown: handleKeyDown,
+    ref: modalContainerRef,
+    className: "modalcontainer",
+    onMouseDown: handleClickOutside,
+    style: {
+      zIndex: zIndex ? Number(zIndex) : undefined
+    }
+  }, overlay && /*#__PURE__*/_react.default.createElement("div", {
+    className: "modal-overlay",
+    "data-testid": "modal-overlay"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: `dialog ${className}`,
+    "data-testid": "dialog-component"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: wrapperClassName,
+    "data-testid": "dialog-wrapper",
+    style: (0, _style.default)(props),
+    ref: wrapperEl
+  }, children)));
+  _react.default.useLayoutEffect(() => {
+    const {
+      activeElement
+    } = document;
+    const lastElementActiveBeforeOpen = activeElement;
+    return () => {
+      lastElementActiveBeforeOpen?.focus();
+    };
+  }, []);
+  _react.default.useEffect(() => {
+    if (open) {
+      if (closeOnEsc) {
+        document.addEventListener('keydown', onKeyDownPress);
+      }
+    }
+    return () => {
+      document.removeEventListener('keydown', onKeyDownPress);
+    };
+  }, [open, closeOnEsc]);
+  _react.default.useEffect(() => {
+    if (open) {
+      document.addEventListener('mousedown', onMouseDown);
+      document.addEventListener('mouseup', onMouseUp);
+      if (isDragging) document.addEventListener('mousemove', onMouseMove);
+    }
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown);
+      document.removeEventListener('mouseup', onMouseUp);
+      document.removeEventListener('mousemove', onMouseMove);
+    };
+  }, [isDragging, open]);
+  _react.default.useEffect(() => {
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    const originalOverflow = document.body.style.overflow;
+    const originalPaddingRight = document.body.style.paddingRight;
+    document.body.style.overflow = 'hidden';
+    document.body.style.paddingRight = `${scrollbarWidth}px`;
+    return () => {
+      document.body.style.overflow = originalOverflow;
+      document.body.style.paddingRight = originalPaddingRight;
+    };
+  }, [open]);
+  if (!open) return null;
+  return /*#__PURE__*/_react.default.createElement(DialogContext.Provider, {
+    value: {
+      handleClose,
+      open,
+      onOpenChange: onOpenChange || setOpen
+    }
+  }, /*#__PURE__*/_reactDom.default.createPortal(createdModal, body));
 };
-//# sourceMappingURL=index.js.map
+var _default = exports.default = BaseDialog;

package/lib/dialog/base/style.js

@@ -1,10 +1,13 @@
-const e = (t) => ({
-  height: t.height,
-  maxHeight: "100%",
-  width: t.width,
-  textAlign: t.textAlign
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-export {
-  e as default
-};
-//# sourceMappingURL=style.js.map
+exports.default = void 0;
+const dialogStyle = props => ({
+  height: props.height,
+  maxHeight: '100%',
+  width: props.width,
+  textAlign: props.textAlign
+});
+var _default = exports.default = dialogStyle;

package/lib/dialog/form/index.d.ts

@@ -1,4 +1,10 @@
-import { IFormProps, IFormDialogContext } from '../types';
-export declare const FormDialogContext: import('react').Context<IFormDialogContext>;
-declare const _default: (props: IFormProps) => import("react/jsx-runtime").JSX.Element;
-export default _default;
+import React__default from 'react';
+import { IFormDialogContext, IFormProps } from '../types.js';
+import '../../@types/Align.js';
+import '../../@types/Icon.js';
+import '../../icons/helper.js';
+
+declare const FormDialogContext: React__default.Context<IFormDialogContext>;
+declare const _default: (props: IFormProps) => JSX.Element;
+
+export { FormDialogContext, _default as default };