automoby-kit 1.0.74 → 1.0.75
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/cjs/Drawer.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("react-dom"),n=require("./utils.js"),l=require("./contexts.js");const o=t.forwardRef(({children:o,direction:a="bottom",fullScreen:
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("react-dom"),n=require("./utils.js"),l=require("./contexts.js");const o=t.forwardRef(({children:o,direction:a="bottom",fullScreen:s=!1,isOpen:u=!1,onClose:i,className:d,isMobile:c,keepMounted:f,zIndex:b,backdrop:m=!0,...h},p)=>{const[w,x]=t.useState(!1),y=l.useMobile(),g=c??y,v=t.useRef(null),k=t.useRef(null);t.useEffect(()=>{x(!0)},[]),t.useEffect(()=>{const handleEscape=e=>{"Escape"===e.key&&u&&i&&i()};return u&&(document.addEventListener("keydown",handleEscape),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",handleEscape),document.body.style.overflow="auto"}},[u,i]);const E=n("fixed inset-0 transition-all duration-300",`z-[${b??"10000000001"}]`),j=n(E,{"bg-neutral-darker/50 backdrop-blur-sm":u&&m,"bg-transparent":u&&!m,"bg-transparent pointer-events-none":!u,"hidden invisible absolute inset-0":f&&!w}),q=n("fixed bg-white shadow-2xl transition-all duration-300 ease-out overflow-auto",(()=>{switch(a){case"top":return"top-0 left-0 right-0";case"bottom":default:return"bottom-0 left-0 right-0";case"left":return"top-0 left-0 bottom-0";case"right":return"top-0 right-0 bottom-0"}})(),(()=>{const e="top"===a||"bottom"===a;return s?"w-full h-full":e?"w-full max-h-[90vh]":"h-full max-w-[90vw]"})(),(()=>{if(!u)switch(a){case"top":return"-translate-y-full";case"bottom":default:return"translate-y-full";case"left":return"-translate-x-full";case"right":return"translate-x-full"}return"translate-x-0 translate-y-0"})(),{"rounded-t-2xl":"bottom"===a&&!s,"rounded-b-2xl":"top"===a&&!s,"rounded-r-2xl":"left"===a&&!s,"rounded-l-2xl":"right"===a&&!s,"p-6":!g,"p-4":g},d),D=e.jsx("div",{ref:v,className:j,onClick:e=>{!s&&i&&v.current&&e.target===v.current&&i()},onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||!s&&i&&v.current&&e.target===v.current&&i()},tabIndex:-1,role:"button","aria-label":"Close drawer","aria-hidden":!u,children:e.jsx("div",{ref:p||k,className:q,role:"dialog","aria-modal":"true","aria-label":"Drawer",...h,children:o})});return f||w?f&&!w?D:u?r.createPortal(D,document.body):null:null});o.displayName="Drawer",exports.Drawer=o;
|
package/dist/esm/Drawer.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as t}from"react/jsx-runtime";import e,{useState as r,useRef as o,useEffect as n}from"react";import{createPortal as l}from"react-dom";import a from"./utils.js";import{useMobile as s}from"./contexts.js";const i=e.forwardRef(({children:e,direction:i="bottom",fullScreen:u=!1,isOpen:d=!1,onClose:c,className:m,isMobile:f,keepMounted:b,zIndex:p,backdrop:h=!0,...w},x)=>{const[y,g]=r(!1),v=s(),k=f??v,E=o(null),N=o(null);n(()=>{g(!0)},[]),n(()=>{const handleEscape=t=>{"Escape"===t.key&&d&&c&&c()};return d&&(document.addEventListener("keydown",handleEscape),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",handleEscape),document.body.style.overflow="auto"}},[d,c]);const j=a("fixed inset-0 transition-all duration-300",`z-[${p??"10000000001"}]`),C=a(j,{"bg-neutral-darker/50 backdrop-blur-sm":d&&h,"bg-transparent":d&&!h,"bg-transparent pointer-events-none":!d,"hidden invisible absolute inset-0":b&&!y}),D=a("fixed bg-white shadow-2xl transition-all duration-300 ease-out overflow-auto",(()=>{switch(i){case"top":return"top-0 left-0 right-0";case"bottom":default:return"bottom-0 left-0 right-0";case"left":return"top-0 left-0 bottom-0";case"right":return"top-0 right-0 bottom-0"}})(),(()=>{const t="top"===i||"bottom"===i;return u?"w-full h-full":t?"w-full max-h-[90vh]":"h-full max-w-[90vw]"})(),(()=>{if(!d)switch(i){case"top":return"-translate-y-full";case"bottom":default:return"translate-y-full";case"left":return"-translate-x-full";case"right":return"translate-x-full"}return"translate-x-0 translate-y-0"})(),{"rounded-t-2xl":"bottom"===i&&!u,"rounded-b-2xl":"top"===i&&!u,"rounded-r-2xl":"left"===i&&!u,"rounded-l-2xl":"right"===i&&!u,"p-6":!k,"p-4":k},m),z=t("div",{ref:E,className:C,onClick:t=>{!u&&c&&E.current&&t.target===E.current&&c()},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||!u&&c&&E.current&&t.target===E.current&&c()},tabIndex:-1,role:"button","aria-label":"Close drawer","aria-hidden":!d,children:t("div",{ref:x||N,className:D,role:"dialog","aria-modal":"true","aria-label":"Drawer",...w,children:e})});return b||y?b&&!y?z:d?l(z,document.body):null:null});i.displayName="Drawer";export{i as Drawer};
|
package/dist/types/Drawer.js
CHANGED
|
@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
|
|
|
4
4
|
import cn from './utils.js';
|
|
5
5
|
import { useMobile } from './contexts.js';
|
|
6
6
|
|
|
7
|
-
const Drawer = React.forwardRef(({ children, direction = 'bottom', fullScreen = false, isOpen = false, onClose, className, isMobile, keepMounted, zIndex, ...props }, ref) => {
|
|
7
|
+
const Drawer = React.forwardRef(({ children, direction = 'bottom', fullScreen = false, isOpen = false, onClose, className, isMobile, keepMounted, zIndex, backdrop = true, ...props }, ref) => {
|
|
8
8
|
const [isClient, setIsClient] = useState(false);
|
|
9
9
|
const detectedIsMobile = useMobile();
|
|
10
10
|
const actualIsMobile = isMobile ?? detectedIsMobile;
|
|
@@ -97,7 +97,8 @@ const Drawer = React.forwardRef(({ children, direction = 'bottom', fullScreen =
|
|
|
97
97
|
const baseOverlayClasses = cn('fixed inset-0 transition-all duration-300', zIndexClass);
|
|
98
98
|
const baseDrawerClasses = 'fixed bg-white shadow-2xl transition-all duration-300 ease-out overflow-auto';
|
|
99
99
|
const overlayClasses = cn(baseOverlayClasses, {
|
|
100
|
-
'bg-neutral-darker/50 backdrop-blur-sm': isOpen,
|
|
100
|
+
'bg-neutral-darker/50 backdrop-blur-sm': isOpen && backdrop,
|
|
101
|
+
'bg-transparent': isOpen && !backdrop,
|
|
101
102
|
'bg-transparent pointer-events-none': !isOpen,
|
|
102
103
|
'hidden invisible absolute inset-0': keepMounted && !isClient,
|
|
103
104
|
});
|
|
@@ -20,6 +20,11 @@ export type DrawerProps = {
|
|
|
20
20
|
* Custom z-index value for the overlay. Defaults to 10000000001.
|
|
21
21
|
*/
|
|
22
22
|
zIndex?: number | string;
|
|
23
|
+
/**
|
|
24
|
+
* Whether to show the dark, blurred backdrop behind the drawer.
|
|
25
|
+
* Defaults to true.
|
|
26
|
+
*/
|
|
27
|
+
backdrop?: boolean;
|
|
23
28
|
};
|
|
24
29
|
declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
|
|
25
30
|
export { Drawer };
|