mainstack-design-system 1.3.9 → 1.4.1

package/dist/mainstack-design-system606.cjs

@@ -0,0 +1,10 @@
+'use client';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),q=require("./index-hyBpqx_X.cjs"),T=require("./index-4R9KShCu.cjs"),I=require("./mainstack-design-system590.cjs"),s=require("react"),w=require("./use-presence-DO2ahDUQ.cjs");function N(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const E=N(s),A=s.createContext({}),H=w.isBrowser?s.useLayoutEffect:s.useEffect;function W(e){return w.isObject(e)&&"offsetHeight"in e}const B=s.createContext({transformPagePoint:e=>e,isStatic:!1,reducedMotion:"never"});function z(e,n){if(typeof e=="function")return e(n);e!=null&&(e.current=n)}function K(...e){return n=>{let t=!1;const o=e.map(i=>{const r=z(i,n);return!t&&typeof r=="function"&&(t=!0),r});if(t)return()=>{for(let i=0;i<o.length;i++){const r=o[i];typeof r=="function"?r():z(e[i],null)}}}}function U(...e){return E.useCallback(K(...e),e)}class V extends E.Component{getSnapshotBeforeUpdate(n){const t=this.props.childRef.current;if(t&&n.isPresent&&!this.props.isPresent){const o=t.offsetParent,i=W(o)&&o.offsetWidth||0,r=this.props.sizeRef.current;r.height=t.offsetHeight||0,r.width=t.offsetWidth||0,r.top=t.offsetTop,r.left=t.offsetLeft,r.right=i-r.width-r.left}return null}componentDidUpdate(){}render(){return this.props.children}}function X({children:e,isPresent:n,anchorX:t,root:o}){const i=s.useId(),r=s.useRef(null),m=s.useRef({width:0,height:0,top:0,left:0,right:0}),{nonce:x}=s.useContext(B),y=U(r,e?.ref);return s.useInsertionEffect(()=>{const{width:c,height:g,top:u,left:d,right:p}=m.current;if(n||!r.current||!c||!g)return;const C=t==="left"?`left: ${d}`:`right: ${p}`;r.current.dataset.motionPopId=i;const a=document.createElement("style");x&&(a.nonce=x);const R=o??document.head;return R.appendChild(a),a.sheet&&a.sheet.insertRule(`
+          [data-motion-pop-id="${i}"] {
+            position: absolute !important;
+            width: ${c}px !important;
+            height: ${g}px !important;
+            ${C}px !important;
+            top: ${u}px !important;
+          }
+        `),()=>{R.contains(a)&&R.removeChild(a)}},[n]),f.jsx(V,{isPresent:n,childRef:r,sizeRef:m,children:E.cloneElement(e,{ref:y})})}const F=({children:e,initial:n,isPresent:t,onExitComplete:o,custom:i,presenceAffectsLayout:r,mode:m,anchorX:x,root:y})=>{const c=w.useConstant(G),g=s.useId();let u=!0,d=s.useMemo(()=>(u=!1,{id:g,initial:n,isPresent:t,custom:i,onExitComplete:p=>{c.set(p,!0);for(const C of c.values())if(!C)return;o&&o()},register:p=>(c.set(p,!1),()=>c.delete(p))}),[t,c,o]);return r&&u&&(d={...d}),s.useMemo(()=>{c.forEach((p,C)=>c.set(C,!1))},[t]),E.useEffect(()=>{!t&&!c.size&&o&&o()},[t]),m==="popLayout"&&(e=f.jsx(X,{isPresent:t,anchorX:x,root:y,children:e})),f.jsx(w.PresenceContext.Provider,{value:d,children:e})};function G(){return new Map}const j=e=>e.key||"";function S(e){const n=[];return s.Children.forEach(e,t=>{s.isValidElement(t)&&n.push(t)}),n}const _=({children:e,custom:n,initial:t=!0,onExitComplete:o,presenceAffectsLayout:i=!0,mode:r="sync",propagate:m=!1,anchorX:x="left",root:y})=>{const[c,g]=w.usePresence(m),u=s.useMemo(()=>S(e),[e]),d=m&&!c?[]:u.map(j),p=s.useRef(!0),C=s.useRef(u),a=w.useConstant(()=>new Map),[R,$]=s.useState(u),[v,D]=s.useState(u);H(()=>{p.current=!1,C.current=u;for(let h=0;h<v.length;h++){const l=j(v[h]);d.includes(l)?a.delete(l):a.get(l)!==!0&&a.set(l,!1)}},[v,d.length,d.join("-")]);const M=[];if(u!==R){let h=[...u];for(let l=0;l<v.length;l++){const P=v[l],b=j(P);d.includes(b)||(h.splice(l,0,P),M.push(P))}return r==="wait"&&M.length&&(h=M),D(S(h)),$(u),null}process.env.NODE_ENV!=="production"&&r==="wait"&&v.length>1&&console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);const{forceRender:k}=s.useContext(A);return f.jsx(f.Fragment,{children:v.map(h=>{const l=j(h),P=m&&!c?!1:u===v||d.includes(l),b=()=>{if(a.has(l))a.set(l,!0);else return;let O=!0;a.forEach(L=>{L||(O=!1)}),O&&(k?.(),D(C.current),m&&g?.(),o&&o())};return f.jsx(F,{isPresent:P,initial:!p.current||t?void 0:!1,custom:n,presenceAffectsLayout:i,mode:r,root:y,onExitComplete:P?void 0:b,anchorX:x,children:h},l)})})},Y=({children:e,...n})=>{const{isDesktop:t,open:o}=I.useResponsivePopoverDrawerContext();return t?f.jsx(T.PopoverPortal,{forceMount:!0,...n,children:f.jsx(_,{children:o?f.jsx("div",{className:"relative z-100","data-slot":"responsive-popover-drawer-portal",children:e}):null})}):f.jsx(q.Drawer.Portal,{forceMount:!0,"data-slot":"responsive-popover-drawer-portal",...n,children:f.jsx(_,{children:o?f.jsx("div",{className:"relative z-100","data-slot":"responsive-popover-drawer-portal",children:e}):null})})};exports.ResponsivePopoverDrawerPortal=Y;

package/dist/mainstack-design-system606.js

@@ -0,0 +1,186 @@
+'use client';
+import { jsx as a, Fragment as K } from "react/jsx-runtime";
+import { D as O } from "./index-eeqUt-Tb.js";
+import { b as U } from "./index-RoCFhqzC.js";
+import { useResponsivePopoverDrawerContext as V } from "./mainstack-design-system590.js";
+import * as E from "react";
+import { createContext as T, useLayoutEffect as X, useEffect as _, useId as j, useRef as R, useContext as A, useInsertionEffect as F, useMemo as b, Children as G, isValidElement as Y, useState as $ } from "react";
+import { i as q, a as J, u as H, P as Q, b as Z } from "./use-presence-Dept-wE7.js";
+const ee = T({}), te = q ? X : _;
+function ne(e) {
+  return J(e) && "offsetHeight" in e;
+}
+const oe = T({
+  transformPagePoint: (e) => e,
+  isStatic: !1,
+  reducedMotion: "never"
+});
+function k(e, o) {
+  if (typeof e == "function")
+    return e(o);
+  e != null && (e.current = o);
+}
+function re(...e) {
+  return (o) => {
+    let t = !1;
+    const r = e.map((s) => {
+      const n = k(s, o);
+      return !t && typeof n == "function" && (t = !0), n;
+    });
+    if (t)
+      return () => {
+        for (let s = 0; s < r.length; s++) {
+          const n = r[s];
+          typeof n == "function" ? n() : k(e[s], null);
+        }
+      };
+  };
+}
+function se(...e) {
+  return E.useCallback(re(...e), e);
+}
+class ie extends E.Component {
+  getSnapshotBeforeUpdate(o) {
+    const t = this.props.childRef.current;
+    if (t && o.isPresent && !this.props.isPresent) {
+      const r = t.offsetParent, s = ne(r) && r.offsetWidth || 0, n = this.props.sizeRef.current;
+      n.height = t.offsetHeight || 0, n.width = t.offsetWidth || 0, n.top = t.offsetTop, n.left = t.offsetLeft, n.right = s - n.width - n.left;
+    }
+    return null;
+  }
+  /**
+   * Required with getSnapshotBeforeUpdate to stop React complaining.
+   */
+  componentDidUpdate() {
+  }
+  render() {
+    return this.props.children;
+  }
+}
+function ce({ children: e, isPresent: o, anchorX: t, root: r }) {
+  const s = j(), n = R(null), h = R({
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    right: 0
+  }), { nonce: v } = A(oe), P = se(n, e?.ref);
+  return F(() => {
+    const { width: i, height: g, top: c, left: u, right: p } = h.current;
+    if (o || !n.current || !i || !g)
+      return;
+    const m = t === "left" ? `left: ${u}` : `right: ${p}`;
+    n.current.dataset.motionPopId = s;
+    const f = document.createElement("style");
+    v && (f.nonce = v);
+    const y = r ?? document.head;
+    return y.appendChild(f), f.sheet && f.sheet.insertRule(`
+          [data-motion-pop-id="${s}"] {
+            position: absolute !important;
+            width: ${i}px !important;
+            height: ${g}px !important;
+            ${m}px !important;
+            top: ${c}px !important;
+          }
+        `), () => {
+      y.contains(f) && y.removeChild(f);
+    };
+  }, [o]), a(ie, { isPresent: o, childRef: n, sizeRef: h, children: E.cloneElement(e, { ref: P }) });
+}
+const le = ({ children: e, initial: o, isPresent: t, onExitComplete: r, custom: s, presenceAffectsLayout: n, mode: h, anchorX: v, root: P }) => {
+  const i = H(fe), g = j();
+  let c = !0, u = b(() => (c = !1, {
+    id: g,
+    initial: o,
+    isPresent: t,
+    custom: s,
+    onExitComplete: (p) => {
+      i.set(p, !0);
+      for (const m of i.values())
+        if (!m)
+          return;
+      r && r();
+    },
+    register: (p) => (i.set(p, !1), () => i.delete(p))
+  }), [t, i, r]);
+  return n && c && (u = { ...u }), b(() => {
+    i.forEach((p, m) => i.set(m, !1));
+  }, [t]), E.useEffect(() => {
+    !t && !i.size && r && r();
+  }, [t]), h === "popLayout" && (e = a(ce, { isPresent: t, anchorX: v, root: P, children: e })), a(Q.Provider, { value: u, children: e });
+};
+function fe() {
+  return /* @__PURE__ */ new Map();
+}
+const x = (e) => e.key || "";
+function I(e) {
+  const o = [];
+  return G.forEach(e, (t) => {
+    Y(t) && o.push(t);
+  }), o;
+}
+const N = ({ children: e, custom: o, initial: t = !0, onExitComplete: r, presenceAffectsLayout: s = !0, mode: n = "sync", propagate: h = !1, anchorX: v = "left", root: P }) => {
+  const [i, g] = Z(h), c = b(() => I(e), [e]), u = h && !i ? [] : c.map(x), p = R(!0), m = R(c), f = H(() => /* @__PURE__ */ new Map()), [y, S] = $(c), [C, z] = $(c);
+  te(() => {
+    p.current = !1, m.current = c;
+    for (let d = 0; d < C.length; d++) {
+      const l = x(C[d]);
+      u.includes(l) ? f.delete(l) : f.get(l) !== !0 && f.set(l, !1);
+    }
+  }, [C, u.length, u.join("-")]);
+  const M = [];
+  if (c !== y) {
+    let d = [...c];
+    for (let l = 0; l < C.length; l++) {
+      const w = C[l], D = x(w);
+      u.includes(D) || (d.splice(l, 0, w), M.push(w));
+    }
+    return n === "wait" && M.length && (d = M), z(I(d)), S(c), null;
+  }
+  process.env.NODE_ENV !== "production" && n === "wait" && C.length > 1 && console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
+  const { forceRender: W } = A(ee);
+  return a(K, { children: C.map((d) => {
+    const l = x(d), w = h && !i ? !1 : c === C || u.includes(l), D = () => {
+      if (f.has(l))
+        f.set(l, !0);
+      else
+        return;
+      let L = !0;
+      f.forEach((B) => {
+        B || (L = !1);
+      }), L && (W?.(), z(m.current), h && g?.(), r && r());
+    };
+    return a(le, { isPresent: w, initial: !p.current || t ? void 0 : !1, custom: o, presenceAffectsLayout: s, mode: n, root: P, onExitComplete: w ? void 0 : D, anchorX: v, children: d }, l);
+  }) });
+}, Ce = ({
+  children: e,
+  ...o
+}) => {
+  const { isDesktop: t, open: r } = V();
+  return t ? /* @__PURE__ */ a(U, { forceMount: !0, ...o, children: /* @__PURE__ */ a(N, { children: r ? /* @__PURE__ */ a(
+    "div",
+    {
+      className: "relative z-100",
+      "data-slot": "responsive-popover-drawer-portal",
+      children: e
+    }
+  ) : null }) }) : /* @__PURE__ */ a(
+    O.Portal,
+    {
+      forceMount: !0,
+      "data-slot": "responsive-popover-drawer-portal",
+      ...o,
+      children: /* @__PURE__ */ a(N, { children: r ? /* @__PURE__ */ a(
+        "div",
+        {
+          className: "relative z-100",
+          "data-slot": "responsive-popover-drawer-portal",
+          children: e
+        }
+      ) : null })
+    }
+  );
+};
+export {
+  Ce as ResponsivePopoverDrawerPortal
+};