@shiflo/ui 0.0.10 → 0.0.11

package/dist/components/BottomSheet/BottomSheet.mjs

@@ -7,6 +7,7 @@ const J = b.div`
   max-height: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
   overflow-y: auto;
   margin: ${({ theme: { spacing: t } }) => t[400]};
+  margin-bottom: ${({ theme: { spacing: t } }) => `calc(${t[400]} + var(--safe-area-inset-bottom, 0px))`};
   border-radius: ${({ theme: { radius: t } }) => t[150]};
   background-color: ${({
   theme: {
@@ -48,16 +49,16 @@ function _({
   onClose: c,
   children: T,
   transitionDuration: s = 200,
-  onClick: L,
+  onClick: $,
   ref: j,
-  hideDragHandleBar: F,
-  style: I,
-  ...O
+  hideDragHandleBar: I,
+  style: O,
+  ...A
 }) {
-  const [$, h] = V(!1), l = o(null), R = o(null), i = o(null), d = o(!1), v = o(0), f = o(0), m = o(0), g = o(0), p = o(0), A = o(0.25);
+  const [L, h] = V(!1), l = o(null), R = o(null), i = o(null), d = o(!1), v = o(0), f = o(0), m = o(0), g = o(0), p = o(0), F = o(0.25);
   z(j, () => l.current);
   const W = (r) => {
-    r.stopPropagation(), typeof L == "function" && L(r);
+    r.stopPropagation(), typeof $ == "function" && $(r);
   };
   return S(() => {
     let r;
@@ -69,7 +70,7 @@ function _({
   }, [t]), S(() => {
     const r = l.current, n = R.current, k = (e) => {
       r && (r.scrollTop > 0 || (d.current = !0, v.current = e, f.current = e, m.current = r.offsetHeight, p.current = Date.now(), r.style.transition = "none", r.style.cursor = "grabbing", n && (n.style.transition = "none"), i.current && (i.current.style.cursor = "grabbing")));
-    }, w = (e) => {
+    }, x = (e) => {
       if (!r || !d.current) return;
       const u = e - v.current;
       if (u < 0) return;
@@ -83,13 +84,13 @@ function _({
     }, a = () => {
       if (!r || !d.current) return;
       d.current = !1, r.style.cursor = "default", i.current && (i.current.style.cursor = "grab");
-      const e = f.current - v.current, u = m.current * A.current;
+      const e = f.current - v.current, u = m.current * F.current;
       r.style.transition = `transform ${s}ms ease-out`, n && (n.style.transition = `opacity ${s}ms ease-out`), e > u || g.current > 0.5 && g.current > 0 ? (r.style.transform = "translate3d(0, 200%, 0)", n && (n.style.opacity = "0"), c == null || c()) : (r.style.transform = "translate3d(0, 0, 0)", n && (n.style.opacity = "1"));
-    }, x = (e) => k(e.clientY), H = (e) => w(e.clientY), Y = (e) => k(e.touches[0].clientY), B = (e) => w(e.touches[0].clientY);
-    return r == null || r.addEventListener("mousedown", x), r == null || r.addEventListener("mousemove", H), r == null || r.addEventListener("mouseup", a), r == null || r.addEventListener("mouseleave", a), r == null || r.addEventListener("touchstart", Y), r == null || r.addEventListener("touchmove", B), r == null || r.addEventListener("touchend", a), r == null || r.addEventListener("touchcancel", a), () => {
-      r == null || r.removeEventListener("mousedown", x), r == null || r.removeEventListener("mousemove", H), r == null || r.removeEventListener("mouseup", a), r == null || r.removeEventListener("mouseleave", a), r == null || r.removeEventListener("touchstart", Y), r == null || r.removeEventListener("touchmove", B), r == null || r.removeEventListener("touchend", a), r == null || r.removeEventListener("touchcancel", a);
+    }, w = (e) => k(e.clientY), H = (e) => x(e.clientY), Y = (e) => k(e.touches[0].clientY), B = (e) => x(e.touches[0].clientY);
+    return r == null || r.addEventListener("mousedown", w), r == null || r.addEventListener("mousemove", H), r == null || r.addEventListener("mouseup", a), r == null || r.addEventListener("mouseleave", a), r == null || r.addEventListener("touchstart", Y), r == null || r.addEventListener("touchmove", B), r == null || r.addEventListener("touchend", a), r == null || r.addEventListener("touchcancel", a), () => {
+      r == null || r.removeEventListener("mousedown", w), r == null || r.removeEventListener("mousemove", H), r == null || r.removeEventListener("mouseup", a), r == null || r.removeEventListener("mouseleave", a), r == null || r.removeEventListener("touchstart", Y), r == null || r.removeEventListener("touchmove", B), r == null || r.removeEventListener("touchend", a), r == null || r.removeEventListener("touchcancel", a);
     };
-  }, [$, c, s]), /* @__PURE__ */ y(
+  }, [L, c, s]), /* @__PURE__ */ y(
     G,
     {
       ref: R,
@@ -104,13 +105,13 @@ function _({
           ease: t ? "in" : "out",
           transitionDuration: s,
           onClick: W,
-          ...O,
+          ...A,
           style: {
-            transform: `translate3d(0, ${$ ? "0" : "200%"}, 0)`,
-            ...I
+            transform: `translate3d(0, ${L ? "0" : "200%"}, 0)`,
+            ...O
           },
           children: [
-            !F && /* @__PURE__ */ y(K, { ref: i, children: /* @__PURE__ */ y(N, {}) }),
+            !I && /* @__PURE__ */ y(K, { ref: i, children: /* @__PURE__ */ y(N, {}) }),
             T
           ]
         }

package/dist/components/BottomSheet/BottomSheet.typing.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithRef } from 'react';
 export interface BottomSheetProps extends ComponentPropsWithRef<"div"> {
     open?: boolean;
-    onClose: () => void;
+    onClose?: () => void;
     transitionDuration?: number;
     hideDragHandleBar?: boolean;
 }

package/dist/components/Overlay/Overlay.d.ts

@@ -1,3 +1,3 @@
 import { OverlayProps } from './Overlay.typing';
-declare function Overlay({ children, open, onClose, transitionDuration, placement, style, ...props }: OverlayProps): import('react').ReactPortal | null;
+declare function Overlay({ children, open, onClose, transitionDuration, placement, style, ref, ...props }: OverlayProps): import('react').ReactPortal | null;
 export default Overlay;

package/dist/components/Overlay/Overlay.mjs

@@ -1,14 +1,15 @@
-import { jsxs as x, jsx as o } from "react/jsx-runtime";
-import { useState as f, useEffect as g } from "react";
-import { createPortal as b } from "react-dom";
-import a from "basic-styled";
-const j = a.div`
+import { jsxs as j, jsx as f } from "react/jsx-runtime";
+import { useState as c, useRef as h, useImperativeHandle as O, useLayoutEffect as I, useEffect as k } from "react";
+import { createPortal as C } from "react-dom";
+import i from "basic-styled";
+const v = i.div`
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-`, h = a.div`
+  z-index: 1;
+`, $ = i.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -16,23 +17,23 @@ const j = a.div`
   height: 100%;
   background-color: ${({
   theme: {
-    palette: { common: t }
+    palette: { common: n }
   }
-}) => t.overlay};
+}) => n.overlay};
   transition:
-    opacity ${({ transitionDuration: t }) => `${t}ms`}
-      ${({ ease: t }) => t === "in" ? "ease-in" : "ease-out"},
+    opacity ${({ transitionDuration: n }) => `${n}ms`}
+      ${({ ease: n }) => n === "in" ? "ease-in" : "ease-out"},
     background-color 0.2s;
-`, O = a.div`
+`, w = i.div`
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
 
-  ${({ placement: t }) => {
+  ${({ placement: n }) => {
   const e = {};
-  switch (t) {
+  switch (n) {
     case "top-left":
       Object.assign(e, {
         display: "flex",
@@ -100,44 +101,51 @@ const j = a.div`
   return e;
 }}
 `;
-function $({
-  children: t,
+function R({
+  children: n,
   open: e,
-  onClose: c,
-  transitionDuration: s = 200,
-  placement: d,
-  style: m,
-  ...u
+  onClose: d,
+  transitionDuration: a = 200,
+  placement: u,
+  style: y,
+  ref: m,
+  ...p
 }) {
-  const [y, l] = f(!0), [p, r] = f(!1);
-  return g(() => {
-    let n, i;
-    return e ? (l(!1), n = requestAnimationFrame(() => {
-      r(!0);
-    })) : (r(!1), i = setTimeout(() => {
+  const [x, r] = c(!0), [g, l] = c(!1), s = h(null);
+  return O(m, () => s.current), I(() => {
+    let t;
+    return e ? (r(!1), t = requestAnimationFrame(() => {
       l(!0);
-    }, s)), () => {
-      n && cancelAnimationFrame(n), i && clearTimeout(i);
+    })) : l(!1), () => {
+      t && cancelAnimationFrame(t);
     };
-  }, [e, s]), y ? null : b(
-    /* @__PURE__ */ x(j, { onClick: c, children: [
-      /* @__PURE__ */ o(
-        h,
+  }, [e, a]), k(() => {
+    const t = s.current, o = (b) => {
+      e || b.propertyName === "opacity" && r(!0);
+    };
+    return t == null || t.addEventListener("transitionend", o), () => {
+      t == null || t.removeEventListener("transitionend", o);
+    };
+  }, [e]), x ? null : C(
+    /* @__PURE__ */ j(v, { onClick: d, children: [
+      /* @__PURE__ */ f(
+        $,
         {
-          transitionDuration: s,
+          ref: s,
+          transitionDuration: a,
           ease: e ? "in" : "out",
           style: {
-            opacity: p ? 1 : 0,
-            ...m
+            opacity: g ? 1 : 0,
+            ...y
           },
-          ...u
+          ...p
         }
       ),
-      /* @__PURE__ */ o(O, { placement: d, children: t })
+      /* @__PURE__ */ f(w, { placement: u, children: n })
     ] }),
     document.body
   );
 }
 export {
-  $ as default
+  R as default
 };

package/dist/components/Overlay/Overlay.typing.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithRef } from 'react';
 export interface OverlayProps extends ComponentPropsWithRef<"div"> {
     open?: boolean;
-    onClose: () => void;
+    onClose?: () => void;
     transitionDuration?: number;
     placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center-top" | "center-bottom" | "center-middle" | "center-left" | "center-right";
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shiflo/ui",
   "description": "Shiflo React UI Components",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "files": [
     "dist"