@lanaco/lnc-react-ui 4.0.141 → 4.0.142

package/dist/SwipeableDrawer.cjs

@@ -1,11 +1,11 @@
-"use strict";const g=require("react/jsx-runtime"),u=require("react"),t=require("./index-BpbMKBf_.cjs"),v=require("./emotion-styled.browser.esm-BtEseadx.cjs"),y=require("./utils-Dl9xPH4c.cjs"),V=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),X=(e,o,n,c,a)=>{if(e==="right"||e==="left"||o&&n)return"height: 100%;";if(!(o&&a===!0))return o?"height: "+c+";":"height: 0;"},Y=(e,o,n,c,a)=>{if(e==="top"||e==="bottom"||o&&n)return"width: 100%;";if(!(o&&a===!0))return o?"width: "+c+";":"width: 0;"},A=v.styled.div`
+"use strict";const f=require("react/jsx-runtime"),u=require("react"),t=require("./index-BpbMKBf_.cjs"),$=require("./emotion-styled.browser.esm-BtEseadx.cjs"),y=require("./utils-Dl9xPH4c.cjs"),X=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),Y=(e,o,n,c,a)=>{if(e==="right"||e==="left"||o&&n)return"height: 100%;";if(!(o&&a===!0))return o?"height: "+c+";":"height: 0;"},A=(e,o,n,c,a)=>{if(e==="top"||e==="bottom"||o&&n)return"width: 100%;";if(!(o&&a===!0))return o?"width: "+c+";":"width: 0;"},B=$.styled.div`
   touch-action: none;
   overflow: auto;
   max-height: ${e=>e.isOpen||e.unsetHeight===!1?"100dvh":0};
-  ${e=>X(e.direction,e.isOpen,e.isFullPage,e.drawerSize,e.unsetHeight)}
+  ${e=>Y(e.direction,e.isOpen,e.isFullPage,e.drawerSize,e.unsetHeight)}
   max-width: ${e=>e.isOpen||e.unsetWidth===!1?"100vw":0};
-  ${e=>Y(e.direction,e.isOpen,e.isFullPage,e.drawerSize,e.unsetWidth)}
-  position: fixed;
+  ${e=>A(e.direction,e.isOpen,e.isFullPage,e.drawerSize,e.unsetWidth)}
+  position: ${e=>e.position};
   z-index: ${e=>e.zIndex};
   ${e=>e.direction==="bottom"?"bottom: 0":"top: 0"};
   ${e=>e.direction==="right"?"right: 0":"left: 0"};
@@ -21,13 +21,13 @@
   background-color: ${e=>y.getColorRgbaValue(e.theme,"Drawer",e.color,"enabled","background")};
   color: ${e=>y.getColorRgbaValue(e.theme,"Drawer",e.color,"enabled","text")};
   ${e=>y.getComponentTypographyCss(e.theme,"Drawer",e.size,"enabled")};
-`,B=v.styled.div`
+`,G=$.styled.div`
   z-index: ${e=>e.zIndex};
-  position: fixed;
+  position: ${e=>e.position};
   top: 0;
   left: 0;
 
   height: ${e=>e.isOpen===!0&&e.enableOverlay===!0?"100dvh":0};
   width: ${e=>e.isOpen===!0&&e.enableOverlay===!0?"100vw":0};
   background-color: ${e=>e.overlayColor};
-`,$=u.forwardRef((e,o)=>{const{direction:n="right",open:c=!1,duration:a=.8,enableOverlay:x=!0,zIndex:m=100,closeOnClickOutside:O=!0,closeOnSwipe:d=!0,isFullPage:P=!1,unsetHeight:z=!1,unsetWidth:S=!1,onClose:C=()=>{},onOpen:D=()=>{},className:k="",style:q={},color:F="neutral",overlayColor:H="rgba(123, 123, 123, 0.5)",size:I="small",drawerSize:j="12.5rem",children:E,...W}=e,M=V.useTheme(),i=u.useRef(),[p,b]=u.useState(!1);var h=null,f=null;function _(r){return r.touches||r.originalEvent.touches}function R(r){const l=_(r)[0];h=l.clientX,f=l.clientY}function L(r){if(!(!h||!f)){var l=r.touches[0].clientX,U=r.touches[0].clientY,w=h-l,T=f-U;Math.abs(w)>Math.abs(T)?w>0?d==!0&&n=="left"&&s():d==!0&&n=="right"&&s():T>0?d==!0&&n=="top"&&s():d==!0&&n=="bottom"&&s(),h=null,f=null}}u.useImperativeHandle(o,()=>({open(){N()},close(){s()},isOpen(){return p}}));const N=r=>{b(!0),D(r)},s=r=>{b(!1),C(r)};return u.useEffect(()=>{const r=l=>{i!=null&&i.current&&!(i!=null&&i.current.contains(l.target))&&O==!0&&s()};return document.addEventListener("click",r,!0),()=>{document.removeEventListener("click",r,!0)}},[]),g.jsx(g.Fragment,{children:g.jsx(B,{enableOverlay:x,overlayColor:H,isOpen:p,zIndex:m,children:g.jsx(A,{ref:i,zIndex:m,isOpen:p,direction:n,isFullPage:P,unsetHeight:z,unsetWidth:S,duration:a,color:F,theme:M,className:k,style:q,size:I,drawerSize:j,onTouchStart:R,onTouchMove:L,...W,children:E})})})});$.propTypes={direction:t.PropTypes.oneOf(["top","right","left","bottom"]),open:t.PropTypes.bool,duration:t.PropTypes.number,enableOverlay:t.PropTypes.bool,zIndex:t.PropTypes.number,closeOnClickOutside:t.PropTypes.bool,closeOnSwipe:t.PropTypes.bool,isFullPage:t.PropTypes.bool,unsetHeight:t.PropTypes.bool,unsetWidth:t.PropTypes.bool,onClose:t.PropTypes.func,onOpen:t.PropTypes.func,className:t.PropTypes.string,style:t.PropTypes.object,overlayColor:t.PropTypes.string,drawerSize:t.PropTypes.string,size:t.PropTypes.oneOf(["small","medium","large"]),color:t.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"])};module.exports=$;
+`,v=u.forwardRef((e,o)=>{const{direction:n="right",open:c=!1,duration:a=.8,enableOverlay:x=!0,zIndex:m=100,position:O="fixed",closeOnClickOutside:P=!0,closeOnSwipe:d=!0,isFullPage:z=!1,unsetHeight:S=!1,unsetWidth:C=!1,onClose:D=()=>{},onOpen:k=()=>{},className:q="",style:F={},color:H="neutral",overlayColor:I="rgba(123, 123, 123, 0.5)",size:j="small",drawerSize:E="12.5rem",children:W,...M}=e,_=X.useTheme(),i=u.useRef(),[g,b]=u.useState(!1);var h=null,p=null;function R(r){return r.touches||r.originalEvent.touches}function L(r){const l=R(r)[0];h=l.clientX,p=l.clientY}function N(r){if(!(!h||!p)){var l=r.touches[0].clientX,V=r.touches[0].clientY,w=h-l,T=p-V;Math.abs(w)>Math.abs(T)?w>0?d==!0&&n=="left"&&s():d==!0&&n=="right"&&s():T>0?d==!0&&n=="top"&&s():d==!0&&n=="bottom"&&s(),h=null,p=null}}u.useImperativeHandle(o,()=>({open(){U()},close(){s()},isOpen(){return g}}));const U=r=>{b(!0),k(r)},s=r=>{b(!1),D(r)};return u.useEffect(()=>{const r=l=>{i!=null&&i.current&&!(i!=null&&i.current.contains(l.target))&&P==!0&&s()};return document.addEventListener("click",r,!0),()=>{document.removeEventListener("click",r,!0)}},[]),f.jsx(f.Fragment,{children:f.jsx(G,{enableOverlay:x,overlayColor:I,isOpen:g,zIndex:m,position:O,children:f.jsx(B,{ref:i,zIndex:m,isOpen:g,direction:n,isFullPage:z,unsetHeight:S,unsetWidth:C,duration:a,color:H,theme:_,className:q,style:F,size:j,drawerSize:E,onTouchStart:L,onTouchMove:N,...M,children:W})})})});v.propTypes={direction:t.PropTypes.oneOf(["top","right","left","bottom"]),open:t.PropTypes.bool,duration:t.PropTypes.number,enableOverlay:t.PropTypes.bool,zIndex:t.PropTypes.number,position:t.PropTypes.string,closeOnClickOutside:t.PropTypes.bool,closeOnSwipe:t.PropTypes.bool,isFullPage:t.PropTypes.bool,unsetHeight:t.PropTypes.bool,unsetWidth:t.PropTypes.bool,onClose:t.PropTypes.func,onOpen:t.PropTypes.func,className:t.PropTypes.string,style:t.PropTypes.object,overlayColor:t.PropTypes.string,drawerSize:t.PropTypes.string,size:t.PropTypes.oneOf(["small","medium","large"]),color:t.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"])};module.exports=v;

package/dist/SwipeableDrawer.js

@@ -1,22 +1,22 @@
-import { jsx as g, Fragment as Y } from "react/jsx-runtime";
-import { forwardRef as V, useRef as q, useState as A, useImperativeHandle as B, useEffect as G } from "react";
+import { jsx as g, Fragment as V } from "react/jsx-runtime";
+import { forwardRef as q, useRef as A, useState as B, useImperativeHandle as G, useEffect as J } from "react";
 import { P as t } from "./index-CblbdqjE.js";
 import { s as y } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { b as $, c as J } from "./utils-BdsZgOUE.js";
-import { u as K } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-const Q = (e, r, o, u, s) => {
-  if (e === "right" || e === "left" || r && o) return "height: 100%;";
-  if (!(r && s === !0))
-    return r ? "height: " + u + ";" : "height: 0;";
-}, R = (e, r, o, u, s) => {
-  if (e === "top" || e === "bottom" || r && o) return "width: 100%;";
-  if (!(r && s === !0))
-    return r ? "width: " + u + ";" : "width: 0;";
-}, Z = y.div`
+import { b as w, c as K } from "./utils-BdsZgOUE.js";
+import { u as Q } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
+const R = (e, o, r, u, s) => {
+  if (e === "right" || e === "left" || o && r) return "height: 100%;";
+  if (!(o && s === !0))
+    return o ? "height: " + u + ";" : "height: 0;";
+}, Z = (e, o, r, u, s) => {
+  if (e === "top" || e === "bottom" || o && r) return "width: 100%;";
+  if (!(o && s === !0))
+    return o ? "width: " + u + ";" : "width: 0;";
+}, _ = y.div`
   touch-action: none;
   overflow: auto;
   max-height: ${(e) => e.isOpen || e.unsetHeight === !1 ? "100dvh" : 0};
-  ${(e) => Q(
+  ${(e) => R(
   e.direction,
   e.isOpen,
   e.isFullPage,
@@ -24,14 +24,14 @@ const Q = (e, r, o, u, s) => {
   e.unsetHeight
 )}
   max-width: ${(e) => e.isOpen || e.unsetWidth === !1 ? "100vw" : 0};
-  ${(e) => R(
+  ${(e) => Z(
   e.direction,
   e.isOpen,
   e.isFullPage,
   e.drawerSize,
   e.unsetWidth
 )}
-  position: fixed;
+  position: ${(e) => e.position};
   z-index: ${(e) => e.zIndex};
   ${(e) => e.direction === "bottom" ? "bottom: 0" : "top: 0"};
   ${(e) => e.direction === "right" ? "right: 0" : "left: 0"};
@@ -44,68 +44,69 @@ const Q = (e, r, o, u, s) => {
 
   box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
 
-  background-color: ${(e) => $(
+  background-color: ${(e) => w(
   e.theme,
   "Drawer",
   e.color,
   "enabled",
   "background"
 )};
-  color: ${(e) => $(e.theme, "Drawer", e.color, "enabled", "text")};
-  ${(e) => J(e.theme, "Drawer", e.size, "enabled")};
-`, _ = y.div`
+  color: ${(e) => w(e.theme, "Drawer", e.color, "enabled", "text")};
+  ${(e) => K(e.theme, "Drawer", e.size, "enabled")};
+`, ee = y.div`
   z-index: ${(e) => e.zIndex};
-  position: fixed;
+  position: ${(e) => e.position};
   top: 0;
   left: 0;
 
   height: ${(e) => e.isOpen === !0 && e.enableOverlay === !0 ? "100dvh" : 0};
   width: ${(e) => e.isOpen === !0 && e.enableOverlay === !0 ? "100vw" : 0};
   background-color: ${(e) => e.overlayColor};
-`, ee = V((e, r) => {
+`, te = q((e, o) => {
   const {
-    direction: o = "right",
+    direction: r = "right",
     open: u = !1,
     duration: s = 0.8,
     enableOverlay: O = !0,
     zIndex: m = 100,
+    position: p = "fixed",
     closeOnClickOutside: x = !0,
     closeOnSwipe: c = !0,
-    isFullPage: p = !1,
-    unsetHeight: z = !1,
-    unsetWidth: S = !1,
+    isFullPage: z = !1,
+    unsetHeight: S = !1,
+    unsetWidth: C = !1,
     //----------------
-    onClose: C = () => {
+    onClose: D = () => {
     },
-    onOpen: D = () => {
+    onOpen: T = () => {
     },
     //----------------
-    className: T = "",
-    style: k = {},
-    color: H = "neutral",
-    overlayColor: I = "rgba(123, 123, 123, 0.5)",
-    size: P = "small",
-    drawerSize: F = "12.5rem",
-    children: W,
-    ...E
-  } = e, M = K(), i = q(), [f, b] = A(!1);
+    className: k = "",
+    style: H = {},
+    color: I = "neutral",
+    overlayColor: P = "rgba(123, 123, 123, 0.5)",
+    size: F = "small",
+    drawerSize: W = "12.5rem",
+    children: E,
+    ...M
+  } = e, j = Q(), i = A(), [f, b] = B(!1);
   var d = null, h = null;
-  function j(n) {
+  function L(n) {
     return n.touches || n.originalEvent.touches;
   }
-  function L(n) {
-    const a = j(n)[0];
+  function N(n) {
+    const a = L(n)[0];
     d = a.clientX, h = a.clientY;
   }
-  function N(n) {
+  function U(n) {
     if (!(!d || !h)) {
-      var a = n.touches[0].clientX, X = n.touches[0].clientY, v = d - a, w = h - X;
-      Math.abs(v) > Math.abs(w) ? v > 0 ? c == !0 && o == "left" && l() : c == !0 && o == "right" && l() : w > 0 ? c == !0 && o == "top" && l() : c == !0 && o == "bottom" && l(), d = null, h = null;
+      var a = n.touches[0].clientX, Y = n.touches[0].clientY, $ = d - a, v = h - Y;
+      Math.abs($) > Math.abs(v) ? $ > 0 ? c == !0 && r == "left" && l() : c == !0 && r == "right" && l() : v > 0 ? c == !0 && r == "top" && l() : c == !0 && r == "bottom" && l(), d = null, h = null;
     }
   }
-  B(r, () => ({
+  G(o, () => ({
     open() {
-      U();
+      X();
     },
     close() {
       l();
@@ -114,52 +115,53 @@ const Q = (e, r, o, u, s) => {
       return f;
     }
   }));
-  const U = (n) => {
-    b(!0), D(n);
+  const X = (n) => {
+    b(!0), T(n);
   }, l = (n) => {
-    b(!1), C(n);
+    b(!1), D(n);
   };
-  return G(() => {
+  return J(() => {
     const n = (a) => {
       i != null && i.current && !(i != null && i.current.contains(a.target)) && x == !0 && l();
     };
     return document.addEventListener("click", n, !0), () => {
       document.removeEventListener("click", n, !0);
     };
-  }, []), /* @__PURE__ */ g(Y, { children: /* @__PURE__ */ g(
-    _,
+  }, []), /* @__PURE__ */ g(V, { children: /* @__PURE__ */ g(
+    ee,
     {
       enableOverlay: O,
-      overlayColor: I,
+      overlayColor: P,
       isOpen: f,
       zIndex: m,
+      position: p,
       children: /* @__PURE__ */ g(
-        Z,
+        _,
         {
           ref: i,
           zIndex: m,
           isOpen: f,
-          direction: o,
-          isFullPage: p,
-          unsetHeight: z,
-          unsetWidth: S,
+          direction: r,
+          isFullPage: z,
+          unsetHeight: S,
+          unsetWidth: C,
           duration: s,
-          color: H,
-          theme: M,
-          className: T,
-          style: k,
-          size: P,
-          drawerSize: F,
-          onTouchStart: L,
-          onTouchMove: N,
-          ...E,
-          children: W
+          color: I,
+          theme: j,
+          className: k,
+          style: H,
+          size: F,
+          drawerSize: W,
+          onTouchStart: N,
+          onTouchMove: U,
+          ...M,
+          children: E
         }
       )
     }
   ) });
 });
-ee.propTypes = {
+te.propTypes = {
   direction: t.oneOf(["top", "right", "left", "bottom"]),
   open: t.bool,
   /**
@@ -174,6 +176,7 @@ ee.propTypes = {
    * z-index of Drawer
    */
   zIndex: t.number,
+  position: t.string,
   closeOnClickOutside: t.bool,
   closeOnSwipe: t.bool,
   /**
@@ -209,5 +212,5 @@ ee.propTypes = {
   ])
 };
 export {
-  ee as default
+  te as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "4.0.141",
+  "version": "4.0.142",
   "description": "React component library",
   "type": "module",
   "keywords": [