automoby-kit 1.0.35 → 1.0.37
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 +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/esm/Drawer.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/types/Drawer.js +18 -5
- package/dist/types/components/Drawer/Drawer.d.ts +5 -0
- package/dist/types/components/Drawer/Drawer.stories.d.ts +23 -0
- package/dist/types/index.js +1 -0
- package/package.json +1 -1
package/dist/cjs/Drawer.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("./utils.js"),l=require("./contexts.js");const n=t.forwardRef(({children:n,direction:
|
|
1
|
+
"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("react-dom"),o=require("./utils.js"),l=require("./contexts.js");const n=t.forwardRef(({children:n,direction:a="bottom",fullScreen:u=!1,isOpen:s=!1,onClose:i,className:d,isMobile:c,keepMounted:f,...m},b)=>{const[h,w]=t.useState(!1),x=l.useMobile(),p=c??x,y=t.useRef(null),g=t.useRef(null);t.useEffect(()=>{w(!0)},[]),t.useEffect(()=>{const handleEscape=e=>{"Escape"===e.key&&s&&i&&i()};return s&&(document.addEventListener("keydown",handleEscape),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",handleEscape),document.body.style.overflow="auto"}},[s,i]);const v=o("fixed inset-0 z-[1000] transition-all duration-300",{"bg-neutral-darker/50 backdrop-blur-sm":s,"bg-transparent pointer-events-none":!s}),k=o("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 u?"w-full h-full":e?"w-full max-h-[90vh]":"h-full max-w-[90vw]"})(),(()=>{if(!s)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&&!u,"rounded-b-2xl":"top"===a&&!u,"rounded-r-2xl":"left"===a&&!u,"rounded-l-2xl":"right"===a&&!u,"p-6":!p,"p-4":p},d),E=e.jsx("div",{ref:y,className:v,onClick:e=>{!u&&i&&y.current&&e.target===y.current&&i()},onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||!u&&i&&y.current&&e.target===y.current&&i()},tabIndex:-1,role:"button","aria-label":"Close drawer","aria-hidden":!s,children:e.jsx("div",{ref:b||g,className:k,role:"dialog","aria-modal":"true","aria-label":"Drawer",...m,children:n})});return s||f?h?r.createPortal(E,document.body):E:null});n.displayName="Drawer",exports.Drawer=n;
|
package/dist/cjs/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var r=require("./Typography.js"),e=require("./Button.js"),i=require("./Input.js"),o=require("./Tabs.js"),s=require("./Drawer.js"),u=require("./Backdrop.js"),t=require("./Breadcrumb.js"),p=require("./Pagination.js"),a=require("./Accordion.js"),n=require("./Divider.js"),c=require("./RadioGroup.js"),q=require("./Chips.js"),d=require("./Menu.js"),j=require("./contexts.js");require("react"),require("./utils.js"),require("react/jsx-runtime"),require("./chunks/chevron-left-Do__K6cA.js"),require("./chunks/createLucideIcon-BqJVOzoK.js");const x=r.Typography,b=e.Button,h=i.Input,B=o.Tabs,v=s.Drawer,M=u.Backdrop,g=t.Breadcrumb,l=p.Pagination,y=a.Accordion,D=n.Divider,T=c.RadioGroup,k=q.Chips,
|
|
1
|
+
"use strict";var r=require("./Typography.js"),e=require("./Button.js"),i=require("./Input.js"),o=require("./Tabs.js"),s=require("./Drawer.js"),u=require("./Backdrop.js"),t=require("./Breadcrumb.js"),p=require("./Pagination.js"),a=require("./Accordion.js"),n=require("./Divider.js"),c=require("./RadioGroup.js"),q=require("./Chips.js"),d=require("./Menu.js"),j=require("./contexts.js");require("react"),require("./utils.js"),require("react/jsx-runtime"),require("react-dom"),require("./chunks/chevron-left-Do__K6cA.js"),require("./chunks/createLucideIcon-BqJVOzoK.js");const x=r.Typography,b=e.Button,h=i.Input,B=o.Tabs,v=s.Drawer,M=u.Backdrop,g=t.Breadcrumb,l=p.Pagination,y=a.Accordion,D=n.Divider,T=c.RadioGroup,k=q.Chips,m=d.Menu;exports.MobileProvider=j.MobileProvider,exports.useMobile=j.useMobile,exports.Accordion=y,exports.Backdrop=M,exports.Breadcrumb=g,exports.Button=b,exports.Chips=k,exports.Divider=D,exports.Drawer=v,exports.Input=h,exports.Menu=m,exports.Pagination=l,exports.RadioGroup=T,exports.Tabs=B,exports.Typography=x;
|
package/dist/esm/Drawer.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as t}from"react/jsx-runtime";import e,{
|
|
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 u}from"./contexts.js";const s=e.forwardRef(({children:e,direction:s="bottom",fullScreen:i=!1,isOpen:d=!1,onClose:c,className:m,isMobile:f,keepMounted:b,...p},h)=>{const[w,x]=r(!1),y=u(),g=f??y,v=o(null),k=o(null);n(()=>{x(!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 E=a("fixed inset-0 z-[1000] transition-all duration-300",{"bg-neutral-darker/50 backdrop-blur-sm":d,"bg-transparent pointer-events-none":!d}),N=a("fixed bg-white shadow-2xl transition-all duration-300 ease-out overflow-auto",(()=>{switch(s){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"===s||"bottom"===s;return i?"w-full h-full":t?"w-full max-h-[90vh]":"h-full max-w-[90vw]"})(),(()=>{if(!d)switch(s){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"===s&&!i,"rounded-b-2xl":"top"===s&&!i,"rounded-r-2xl":"left"===s&&!i,"rounded-l-2xl":"right"===s&&!i,"p-6":!g,"p-4":g},m),j=t("div",{ref:v,className:E,onClick:t=>{!i&&c&&v.current&&t.target===v.current&&c()},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||!i&&c&&v.current&&t.target===v.current&&c()},tabIndex:-1,role:"button","aria-label":"Close drawer","aria-hidden":!d,children:t("div",{ref:h||k,className:N,role:"dialog","aria-modal":"true","aria-label":"Drawer",...p,children:e})});return d||b?w?l(j,document.body):j:null});s.displayName="Drawer";export{s as Drawer};
|
package/dist/esm/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Typography as r}from"./Typography.js";import{Button as o}from"./Button.js";import{Input as s}from"./Input.js";import{Tabs as i}from"./Tabs.js";import{Drawer as t}from"./Drawer.js";import{Backdrop as m}from"./Backdrop.js";import{Breadcrumb as a}from"./Breadcrumb.js";import{Pagination as p}from"./Pagination.js";import{Accordion as e}from"./Accordion.js";import{Divider as
|
|
1
|
+
import{Typography as r}from"./Typography.js";import{Button as o}from"./Button.js";import{Input as s}from"./Input.js";import{Tabs as i}from"./Tabs.js";import{Drawer as t}from"./Drawer.js";import{Backdrop as m}from"./Backdrop.js";import{Breadcrumb as a}from"./Breadcrumb.js";import{Pagination as p}from"./Pagination.js";import{Accordion as e}from"./Accordion.js";import{Divider as c}from"./Divider.js";import{RadioGroup as n}from"./RadioGroup.js";import{Chips as j}from"./Chips.js";import{Menu as u}from"./Menu.js";export{MobileProvider,useMobile}from"./contexts.js";import"react";import"./utils.js";import"react/jsx-runtime";import"react-dom";import"./chunks/chevron-left-4HSuTes3.js";import"./chunks/createLucideIcon-DGp0SoUT.js";const f=r,d=o,h=s,b=i,B=t,g=m,k=a,l=p,v=e,x=c,y=n,D=j,M=u;export{v as Accordion,g as Backdrop,k as Breadcrumb,d as Button,D as Chips,x as Divider,B as Drawer,h as Input,M as Menu,l as Pagination,y as RadioGroup,b as Tabs,f as Typography};
|
package/dist/types/Drawer.js
CHANGED
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import React, { useRef, useEffect } from 'react';
|
|
2
|
+
import React, { useState, useRef, useEffect } from 'react';
|
|
3
|
+
import { createPortal } from 'react-dom';
|
|
3
4
|
import cn from './utils.js';
|
|
4
5
|
import { useMobile } from './contexts.js';
|
|
5
6
|
|
|
6
|
-
const Drawer = React.forwardRef(({ children, direction = 'bottom', fullScreen = false, isOpen = false, onClose, className, isMobile, ...props }, ref) => {
|
|
7
|
+
const Drawer = React.forwardRef(({ children, direction = 'bottom', fullScreen = false, isOpen = false, onClose, className, isMobile, keepMounted, ...props }, ref) => {
|
|
8
|
+
const [isClient, setIsClient] = useState(false);
|
|
7
9
|
const detectedIsMobile = useMobile();
|
|
8
10
|
const actualIsMobile = isMobile ?? detectedIsMobile;
|
|
9
11
|
const overlayRef = useRef(null);
|
|
10
12
|
const drawerRef = useRef(null);
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
setIsClient(true);
|
|
15
|
+
}, []);
|
|
11
16
|
// Handle escape key
|
|
12
17
|
useEffect(() => {
|
|
13
18
|
const handleEscape = (event) => {
|
|
@@ -86,7 +91,7 @@ const Drawer = React.forwardRef(({ children, direction = 'bottom', fullScreen =
|
|
|
86
91
|
}
|
|
87
92
|
return 'h-full max-w-[90vw]';
|
|
88
93
|
};
|
|
89
|
-
const baseOverlayClasses = 'fixed inset-0 z-
|
|
94
|
+
const baseOverlayClasses = 'fixed inset-0 z-[1000] transition-all duration-300';
|
|
90
95
|
const baseDrawerClasses = 'fixed bg-white shadow-2xl transition-all duration-300 ease-out overflow-auto';
|
|
91
96
|
const overlayClasses = cn(baseOverlayClasses, {
|
|
92
97
|
'bg-neutral-darker/50 backdrop-blur-sm': isOpen,
|
|
@@ -100,10 +105,18 @@ const Drawer = React.forwardRef(({ children, direction = 'bottom', fullScreen =
|
|
|
100
105
|
'p-6': !actualIsMobile,
|
|
101
106
|
'p-4': actualIsMobile,
|
|
102
107
|
}, className);
|
|
103
|
-
|
|
108
|
+
const content = (jsx("div", { ref: overlayRef, className: overlayClasses, onClick: handleOverlayClick, onKeyDown: handleOverlayKeyDown, tabIndex: -1, role: "button", "aria-label": "Close drawer", "aria-hidden": !isOpen, children: jsx("div", { ref: ref || drawerRef, className: drawerClasses, role: "dialog", "aria-modal": "true", "aria-label": "Drawer", ...props, children: children }) }));
|
|
109
|
+
// If not open and not requested to keep mounted, render nothing
|
|
110
|
+
if (!isOpen && !keepMounted) {
|
|
104
111
|
return null;
|
|
105
112
|
}
|
|
106
|
-
|
|
113
|
+
// During SSR or before client mounts, we cannot portal.
|
|
114
|
+
// If keepMounted is true, render the content inline (hidden when closed).
|
|
115
|
+
if (!isClient) {
|
|
116
|
+
return content;
|
|
117
|
+
}
|
|
118
|
+
// On the client, render into body using a portal.
|
|
119
|
+
return createPortal(content, document.body);
|
|
107
120
|
});
|
|
108
121
|
Drawer.displayName = 'Drawer';
|
|
109
122
|
|
|
@@ -11,6 +11,11 @@ export type DrawerProps = {
|
|
|
11
11
|
* Whether the component is in mobile mode (optional, auto-detected if not provided)
|
|
12
12
|
*/
|
|
13
13
|
isMobile?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* If true, keep the drawer mounted in the DOM when closed.
|
|
16
|
+
* This allows SSR rendering but keeps it visually hidden until opened.
|
|
17
|
+
*/
|
|
18
|
+
keepMounted?: boolean;
|
|
14
19
|
};
|
|
15
20
|
declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
|
|
16
21
|
export { Drawer };
|
|
@@ -40,6 +40,13 @@ declare const _default: {
|
|
|
40
40
|
defaultValue: boolean;
|
|
41
41
|
description: string;
|
|
42
42
|
};
|
|
43
|
+
keepMounted: {
|
|
44
|
+
name: string;
|
|
45
|
+
control: {
|
|
46
|
+
type: string;
|
|
47
|
+
};
|
|
48
|
+
description: string;
|
|
49
|
+
};
|
|
43
50
|
children: {
|
|
44
51
|
table: {
|
|
45
52
|
disable: boolean;
|
|
@@ -64,6 +71,7 @@ export declare const Default: {
|
|
|
64
71
|
args: {
|
|
65
72
|
direction: string;
|
|
66
73
|
isMobile: boolean;
|
|
74
|
+
keepMounted: boolean;
|
|
67
75
|
};
|
|
68
76
|
};
|
|
69
77
|
export declare const TopDirection: {
|
|
@@ -73,6 +81,7 @@ export declare const TopDirection: {
|
|
|
73
81
|
direction: string;
|
|
74
82
|
triggerButtonText: string;
|
|
75
83
|
isMobile: boolean;
|
|
84
|
+
keepMounted: boolean;
|
|
76
85
|
};
|
|
77
86
|
};
|
|
78
87
|
export declare const LeftDirection: {
|
|
@@ -82,6 +91,7 @@ export declare const LeftDirection: {
|
|
|
82
91
|
direction: string;
|
|
83
92
|
triggerButtonText: string;
|
|
84
93
|
isMobile: boolean;
|
|
94
|
+
keepMounted: boolean;
|
|
85
95
|
};
|
|
86
96
|
};
|
|
87
97
|
export declare const RightDirection: {
|
|
@@ -91,6 +101,7 @@ export declare const RightDirection: {
|
|
|
91
101
|
direction: string;
|
|
92
102
|
triggerButtonText: string;
|
|
93
103
|
isMobile: boolean;
|
|
104
|
+
keepMounted: boolean;
|
|
94
105
|
};
|
|
95
106
|
};
|
|
96
107
|
export declare const FullScreenDrawer: {
|
|
@@ -101,6 +112,17 @@ export declare const FullScreenDrawer: {
|
|
|
101
112
|
triggerButtonText: string;
|
|
102
113
|
direction: string;
|
|
103
114
|
isMobile: boolean;
|
|
115
|
+
keepMounted: boolean;
|
|
116
|
+
};
|
|
117
|
+
};
|
|
118
|
+
export declare const KeepMounted: {
|
|
119
|
+
(args: StoryArgs): import("react/jsx-runtime").JSX.Element;
|
|
120
|
+
storyName: string;
|
|
121
|
+
args: {
|
|
122
|
+
keepMounted: boolean;
|
|
123
|
+
triggerButtonText: string;
|
|
124
|
+
direction: string;
|
|
125
|
+
isMobile: boolean;
|
|
104
126
|
};
|
|
105
127
|
};
|
|
106
128
|
export declare const NavigationDrawer: {
|
|
@@ -120,6 +142,7 @@ export declare const MobileVersion: {
|
|
|
120
142
|
direction: string;
|
|
121
143
|
triggerButtonText: string;
|
|
122
144
|
isMobile: boolean;
|
|
145
|
+
keepMounted: boolean;
|
|
123
146
|
};
|
|
124
147
|
};
|
|
125
148
|
export declare const ResponsiveComparison: {
|
package/dist/types/index.js
CHANGED