mainstack-design-system 1.0.0 → 1.1.2

package/dist/mainstack-design-system593.cjs

@@ -0,0 +1,10 @@
+'use client';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),z=require("./index-hyBpqx_X.cjs"),T=require("./index-4R9KShCu.cjs"),I=require("./mainstack-design-system575.cjs"),s=require("react"),w=require("./use-presence-DO2ahDUQ.cjs");function A(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const E=A(s),H=s.createContext({}),N=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 S(e,n){if(typeof e=="function")return e(n);e!=null&&(e.current=n)}function K(...e){return n=>{let t=!1;const r=e.map(i=>{const o=S(i,n);return!t&&typeof o=="function"&&(t=!0),o});if(t)return()=>{for(let i=0;i<r.length;i++){const o=r[i];typeof o=="function"?o():S(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 r=t.offsetParent,i=W(r)&&r.offsetWidth||0,o=this.props.sizeRef.current;o.height=t.offsetHeight||0,o.width=t.offsetWidth||0,o.top=t.offsetTop,o.left=t.offsetLeft,o.right=i-o.width-o.left}return null}componentDidUpdate(){}render(){return this.props.children}}function X({children:e,isPresent:n,anchorX:t,root:r}){const i=s.useId(),o=s.useRef(null),m=s.useRef({width:0,height:0,top:0,left:0,right:0}),{nonce:v}=s.useContext(B),y=U(o,e?.ref);return s.useInsertionEffect(()=>{const{width:c,height:g,top:u,left:d,right:p}=m.current;if(n||!o.current||!c||!g)return;const C=t==="left"?`left: ${d}`:`right: ${p}`;o.current.dataset.motionPopId=i;const f=document.createElement("style");v&&(f.nonce=v);const R=r??document.head;return R.appendChild(f),f.sheet&&f.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(f)&&R.removeChild(f)}},[n]),a.jsx(V,{isPresent:n,childRef:o,sizeRef:m,children:E.cloneElement(e,{ref:y})})}const F=({children:e,initial:n,isPresent:t,onExitComplete:r,custom:i,presenceAffectsLayout:o,mode:m,anchorX:v,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;r&&r()},register:p=>(c.set(p,!1),()=>c.delete(p))}),[t,c,r]);return o&&u&&(d={...d}),s.useMemo(()=>{c.forEach((p,C)=>c.set(C,!1))},[t]),E.useEffect(()=>{!t&&!c.size&&r&&r()},[t]),m==="popLayout"&&(e=a.jsx(X,{isPresent:t,anchorX:v,root:y,children:e})),a.jsx(w.PresenceContext.Provider,{value:d,children:e})};function G(){return new Map}const j=e=>e.key||"";function _(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:r,presenceAffectsLayout:i=!0,mode:o="sync",propagate:m=!1,anchorX:v="left",root:y})=>{const[c,g]=w.usePresence(m),u=s.useMemo(()=>_(e),[e]),d=m&&!c?[]:u.map(j),p=s.useRef(!0),C=s.useRef(u),f=w.useConstant(()=>new Map),[R,k]=s.useState(u),[x,D]=s.useState(u);N(()=>{p.current=!1,C.current=u;for(let h=0;h<x.length;h++){const l=j(x[h]);d.includes(l)?f.delete(l):f.get(l)!==!0&&f.set(l,!1)}},[x,d.length,d.join("-")]);const M=[];if(u!==R){let h=[...u];for(let l=0;l<x.length;l++){const P=x[l],b=j(P);d.includes(b)||(h.splice(l,0,P),M.push(P))}return o==="wait"&&M.length&&(h=M),D(_(h)),k(u),null}process.env.NODE_ENV!=="production"&&o==="wait"&&x.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:L}=s.useContext(H);return a.jsx(a.Fragment,{children:x.map(h=>{const l=j(h),P=m&&!c?!1:u===x||d.includes(l),b=()=>{if(f.has(l))f.set(l,!0);else return;let O=!0;f.forEach(q=>{q||(O=!1)}),O&&(L?.(),D(C.current),m&&g?.(),r&&r())};return a.jsx(F,{isPresent:P,initial:!p.current||t?void 0:!1,custom:n,presenceAffectsLayout:i,mode:o,root:y,onExitComplete:P?void 0:b,anchorX:v,children:h},l)})})},Y=({children:e,...n})=>{const{isDesktop:t,open:r}=I.useResponsivePopoverDrawerContext();return t?a.jsx(T.PopoverPortal,{forceMount:!0,...n,children:a.jsx($,{children:r?a.jsx("div",{"data-slot":"responsive-popover-drawer-portal",children:e}):null})}):a.jsx(z.Drawer.Portal,{forceMount:!0,"data-slot":"responsive-popover-drawer-portal",...n,children:a.jsx($,{children:r?a.jsx("div",{"data-slot":"responsive-popover-drawer-portal",children:e}):null})})};exports.ResponsivePopoverDrawerPortal=Y;

package/dist/mainstack-design-system593.js

@@ -0,0 +1,172 @@
+'use client';
+import { jsx as a, Fragment as N } from "react/jsx-runtime";
+import { D as O } from "./index-Czas6QFh.js";
+import { b as U } from "./index-RoCFhqzC.js";
+import { useResponsivePopoverDrawerContext as V } from "./mainstack-design-system575.js";
+import * as E from "react";
+import { createContext as j, useLayoutEffect as X, useEffect as _, useId as A, useRef as R, useContext as H, useInsertionEffect as F, useMemo as b, Children as G, isValidElement as Y, useState as k } from "react";
+import { i as q, a as J, u as S, P as Q, b as Z } from "./use-presence-Dept-wE7.js";
+const ee = j({}), te = q ? X : _;
+function ne(e) {
+  return J(e) && "offsetHeight" in e;
+}
+const oe = j({
+  transformPagePoint: (e) => e,
+  isStatic: !1,
+  reducedMotion: "never"
+});
+function z(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 = z(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() : z(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 = A(), n = R(null), h = R({
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    right: 0
+  }), { nonce: g } = H(oe), P = se(n, e?.ref);
+  return F(() => {
+    const { width: i, height: v, top: c, left: u, right: p } = h.current;
+    if (o || !n.current || !i || !v)
+      return;
+    const m = t === "left" ? `left: ${u}` : `right: ${p}`;
+    n.current.dataset.motionPopId = s;
+    const l = document.createElement("style");
+    g && (l.nonce = g);
+    const y = r ?? document.head;
+    return y.appendChild(l), l.sheet && l.sheet.insertRule(`
+          [data-motion-pop-id="${s}"] {
+            position: absolute !important;
+            width: ${i}px !important;
+            height: ${v}px !important;
+            ${m}px !important;
+            top: ${c}px !important;
+          }
+        `), () => {
+      y.contains(l) && y.removeChild(l);
+    };
+  }, [o]), a(ie, { isPresent: o, childRef: n, sizeRef: h, children: E.cloneElement(e, { ref: P }) });
+}
+const fe = ({ children: e, initial: o, isPresent: t, onExitComplete: r, custom: s, presenceAffectsLayout: n, mode: h, anchorX: g, root: P }) => {
+  const i = S(le), v = A();
+  let c = !0, u = b(() => (c = !1, {
+    id: v,
+    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: g, root: P, children: e })), a(Q.Provider, { value: u, children: e });
+};
+function le() {
+  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 T = ({ children: e, custom: o, initial: t = !0, onExitComplete: r, presenceAffectsLayout: s = !0, mode: n = "sync", propagate: h = !1, anchorX: g = "left", root: P }) => {
+  const [i, v] = Z(h), c = b(() => I(e), [e]), u = h && !i ? [] : c.map(x), p = R(!0), m = R(c), l = S(() => /* @__PURE__ */ new Map()), [y, W] = k(c), [C, L] = k(c);
+  te(() => {
+    p.current = !1, m.current = c;
+    for (let d = 0; d < C.length; d++) {
+      const f = x(C[d]);
+      u.includes(f) ? l.delete(f) : l.get(f) !== !0 && l.set(f, !1);
+    }
+  }, [C, u.length, u.join("-")]);
+  const M = [];
+  if (c !== y) {
+    let d = [...c];
+    for (let f = 0; f < C.length; f++) {
+      const w = C[f], D = x(w);
+      u.includes(D) || (d.splice(f, 0, w), M.push(w));
+    }
+    return n === "wait" && M.length && (d = M), L(I(d)), W(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: B } = H(ee);
+  return a(N, { children: C.map((d) => {
+    const f = x(d), w = h && !i ? !1 : c === C || u.includes(f), D = () => {
+      if (l.has(f))
+        l.set(f, !0);
+      else
+        return;
+      let $ = !0;
+      l.forEach((K) => {
+        K || ($ = !1);
+      }), $ && (B?.(), L(m.current), h && v?.(), r && r());
+    };
+    return a(fe, { isPresent: w, initial: !p.current || t ? void 0 : !1, custom: o, presenceAffectsLayout: s, mode: n, root: P, onExitComplete: w ? void 0 : D, anchorX: g, children: d }, f);
+  }) });
+}, Ce = ({
+  children: e,
+  ...o
+}) => {
+  const { isDesktop: t, open: r } = V();
+  return t ? /* @__PURE__ */ a(U, { forceMount: !0, ...o, children: /* @__PURE__ */ a(T, { children: r ? /* @__PURE__ */ a("div", { "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(T, { children: r ? /* @__PURE__ */ a("div", { "data-slot": "responsive-popover-drawer-portal", children: e }) : null })
+    }
+  );
+};
+export {
+  Ce as ResponsivePopoverDrawerPortal
+};