@admin-layout/tailwind-ui 12.2.5-alpha.2 → 12.2.5-alpha.22
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/lib/components/InputToolBar/InputToolBar.d.ts.map +1 -1
- package/lib/components/InputToolBar/InputToolBar.js +40 -7
- package/lib/components/InputToolBar/InputToolBar.js.map +1 -1
- package/lib/components/InputToolBar/__tests__/RightOverflowMenu.test.d.ts +8 -0
- package/lib/components/InputToolBar/__tests__/RightOverflowMenu.test.d.ts.map +1 -0
- package/lib/components/PageContainer/PageContainer.d.ts +9 -0
- package/lib/components/PageContainer/PageContainer.d.ts.map +1 -1
- package/lib/components/PageContainer/PageContainer.js +24 -8
- package/lib/components/PageContainer/PageContainer.js.map +1 -1
- package/lib/components/PageContainer/__tests__/PageContainer.test.d.ts +7 -0
- package/lib/components/PageContainer/__tests__/PageContainer.test.d.ts.map +1 -0
- package/lib/components/ThemeProvider/ThemeProvider.js +1 -1
- package/lib/hooks/__tests__/useMediaQuery.test.d.ts +2 -0
- package/lib/hooks/__tests__/useMediaQuery.test.d.ts.map +1 -0
- package/lib/hooks/useMediaQuery.d.ts +9 -2
- package/lib/hooks/useMediaQuery.d.ts.map +1 -1
- package/lib/hooks/useMediaQuery.js +39 -31
- package/lib/hooks/useMediaQuery.js.map +1 -1
- package/lib/hooks/useWindowSize.d.ts +4 -0
- package/lib/hooks/useWindowSize.d.ts.map +1 -1
- package/lib/hooks/useWindowSize.js +13 -19
- package/lib/hooks/useWindowSize.js.map +1 -1
- package/lib/index.js +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputToolBar.d.ts","sourceRoot":"","sources":["../../../src/components/InputToolBar/InputToolBar.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAER,iBAAiB,EAQpB,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"InputToolBar.d.ts","sourceRoot":"","sources":["../../../src/components/InputToolBar/InputToolBar.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAER,iBAAiB,EAQpB,MAAM,SAAS,CAAC;AA4jBjB;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EACzB,SAAS,EACT,UAAU,EACV,WAAW,EACX,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,EAC1B,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,wBAAwB,EACxB,2BAA2B,EAC3B,0BAA0B,EAC1B,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,QAAQ,EACR,gBAAgB,GACnB,EAAE,iBAAiB,2CAwFnB;AAED,eAAe,YAAY,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {Lightbulb,Zap,Search,Mic,Paperclip,Image,Camera,WandSparkles,Settings,X,Layout,Check,Plus,ArrowUpRight,StopCircle}from'lucide-react';import React__default,{useState,useMemo}from'react';import'../../utils/isBrowser/index.js';import {cn}from'../../utils/util.js';import'fast-deep-equal/react.js';const iconSize = 'h-3.5 w-3.5';
|
|
1
|
+
import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {Lightbulb,Zap,Search,Mic,Paperclip,Image,Camera,WandSparkles,Settings,X,Layout,Check,Plus,ArrowUpRight,StopCircle}from'lucide-react';import React__default,{useState,useMemo,useRef,useEffect,useLayoutEffect}from'react';import'../../utils/isBrowser/index.js';import {cn}from'../../utils/util.js';import'fast-deep-equal/react.js';const iconSize = 'h-3.5 w-3.5';
|
|
2
2
|
const iconSizeRight = 'h-4 w-4';
|
|
3
3
|
const defaultLeftIconMap = {
|
|
4
4
|
search: jsx(Search, {
|
|
@@ -237,13 +237,37 @@ function TemplatePill({
|
|
|
237
237
|
});
|
|
238
238
|
}
|
|
239
239
|
const getRightIcon = id => defaultRightIconMap[id] ?? null;
|
|
240
|
-
|
|
240
|
+
// Layout effects warn during SSR on React 18; the menu is closed on the server anyway.
|
|
241
|
+
const useClientLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
|
|
242
|
+
/** Gap between the "+" button and its menu (Tailwind `mb-2` / `mt-2`). */
|
|
243
|
+
const MENU_GAP_PX = 8;
|
|
244
|
+
/**
|
|
245
|
+
* Below `lg`, the right action cluster collapses into this "+" button → popover. Send/mic stays inline.
|
|
246
|
+
*
|
|
247
|
+
* The menu opens upward, over the conversation, since the composer normally docks at the bottom.
|
|
248
|
+
* When the composer sits near the top of the screen instead (e.g. a template gallery below it),
|
|
249
|
+
* there is no room above, so it flips below the button. Placement is measured before paint.
|
|
250
|
+
*/
|
|
241
251
|
function RightOverflowMenu({
|
|
242
252
|
items,
|
|
243
253
|
classNames
|
|
244
254
|
}) {
|
|
245
255
|
const [open, setOpen] = useState(false);
|
|
256
|
+
const [placement, setPlacement] = useState('above');
|
|
257
|
+
const rootRef = useRef(null);
|
|
258
|
+
const menuRef = useRef(null);
|
|
259
|
+
useClientLayoutEffect(() => {
|
|
260
|
+
if (!open) return;
|
|
261
|
+
const trigger = rootRef.current?.getBoundingClientRect();
|
|
262
|
+
const menuHeight = menuRef.current?.offsetHeight;
|
|
263
|
+
if (!trigger || !menuHeight) return;
|
|
264
|
+
const spaceAbove = trigger.top;
|
|
265
|
+
const spaceBelow = window.innerHeight - trigger.bottom;
|
|
266
|
+
const fitsAbove = spaceAbove >= menuHeight + MENU_GAP_PX;
|
|
267
|
+
setPlacement(fitsAbove || spaceAbove >= spaceBelow ? 'above' : 'below');
|
|
268
|
+
}, [open]);
|
|
246
269
|
return jsxs("div", {
|
|
270
|
+
ref: rootRef,
|
|
247
271
|
className: "relative",
|
|
248
272
|
children: [jsx("button", {
|
|
249
273
|
type: "button",
|
|
@@ -263,15 +287,24 @@ function RightOverflowMenu({
|
|
|
263
287
|
className: "fixed inset-0 z-40 cursor-default",
|
|
264
288
|
onClick: () => setOpen(false)
|
|
265
289
|
}), jsx("div", {
|
|
290
|
+
ref: menuRef,
|
|
266
291
|
role: "menu",
|
|
267
|
-
className:
|
|
292
|
+
className: cn('absolute right-0 z-50 flex w-56 flex-col gap-0.5 rounded-2xl border border-border bg-card p-1.5 text-foreground shadow-lg', placement === 'above' ? 'bottom-full mb-2' : 'top-full mt-2'),
|
|
268
293
|
children: items.map(item => jsxs("div", {
|
|
269
294
|
role: "menuitem",
|
|
270
|
-
// ponytail: row click forwards to the inner button so the whole row is a hit
|
|
271
|
-
// target — without nesting <button> in <button> (customButton items render their own).
|
|
272
295
|
onClick: e => {
|
|
273
|
-
|
|
274
|
-
|
|
296
|
+
// React bubbles events out of a portal along the COMPONENT tree, so a
|
|
297
|
+
// click inside a dialog or sheet that a customButton portaled out still
|
|
298
|
+
// arrives here. It is not a click on this row: ignore it.
|
|
299
|
+
if (!e.currentTarget.contains(e.target)) return;
|
|
300
|
+
// ponytail: row click forwards to the inner button so the whole row is a hit
|
|
301
|
+
// target — without nesting <button> in <button> (customButton items render their own).
|
|
302
|
+
if (!e.target.closest('button')) {
|
|
303
|
+
e.currentTarget.querySelector('button')?.click();
|
|
304
|
+
}
|
|
305
|
+
// A plain action is done once picked. A customButton owns whatever it opens
|
|
306
|
+
// (a dialog, a sheet); closing the menu would unmount it, so it stays.
|
|
307
|
+
if (!item.customButton && !item.disabled && !item.loading) setOpen(false);
|
|
275
308
|
},
|
|
276
309
|
className: "flex cursor-pointer items-center gap-2.5 rounded-xl px-1.5 py-1 hover:bg-secondary/60",
|
|
277
310
|
children: [jsx(ToolbarIconButton, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputToolBar.js","sources":["../../../src/components/InputToolBar/InputToolBar.tsx"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"InputToolBar.js","sources":["../../../src/components/InputToolBar/InputToolBar.tsx"],"sourcesContent":[null],"names":[],"mappings":"iYA4lBG,MAAA,QAAA,GAAA,aAAA;AACH,MAAA,aAAA,GAAA;AA4GA,MAAA,qBAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The "+" overflow menu that holds the right-hand actions below `lg`. It opens above the button
|
|
3
|
+
* unless there is no room there (a composer near the top of the screen), closes once a plain
|
|
4
|
+
* action is picked, keeps custom buttons (which own their own dialogs) mounted, and ignores
|
|
5
|
+
* clicks that React bubbles out of a customButton's portal.
|
|
6
|
+
*/
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=RightOverflowMenu.test.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RightOverflowMenu.test.d.ts","sourceRoot":"","sources":["../../../../src/components/InputToolBar/__tests__/RightOverflowMenu.test.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG"}
|
|
@@ -1,4 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { PageContainerProps } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* The tab to highlight for `pathname`: the deepest tab whose path it equals or sits under, so
|
|
5
|
+
* `/billing/plans` owns `/billing/plans/checkout/pro` but not `/billing/plansx`. The bare module path
|
|
6
|
+
* (`/billing`, rendered as its first tab) highlights the first tab. A page outside every listed tab
|
|
7
|
+
* (a page whose own tab is hidden from this viewer) highlights none, instead of passing for the first.
|
|
8
|
+
*/
|
|
9
|
+
export declare function findActiveTabPath(tabList: ReadonlyArray<{
|
|
10
|
+
path: string;
|
|
11
|
+
}>, pathname: string): string | undefined;
|
|
3
12
|
export declare const PageContainer: React.FC<PageContainerProps>;
|
|
4
13
|
//# sourceMappingURL=PageContainer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageContainer.d.ts","sourceRoot":"","sources":["../../../src/components/PageContainer/PageContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"PageContainer.d.ts","sourceRoot":"","sources":["../../../src/components/PageContainer/PageContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAKlD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,aAAa,CAAC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAWhH;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgEtD,CAAC"}
|
|
@@ -1,4 +1,21 @@
|
|
|
1
|
-
import {jsx,jsxs}from'react/jsx-runtime';import {useState,useEffect}from'react';import {useLocation,useNavigate}from'@remix-run/react';import {Spin}from'../Spin/index.js';const
|
|
1
|
+
import {jsx,jsxs}from'react/jsx-runtime';import {useState,useEffect}from'react';import {useLocation,useNavigate}from'@remix-run/react';import {Spin}from'../Spin/index.js';const trimSlash = path => path.replace(/\/+$/, '');
|
|
2
|
+
/**
|
|
3
|
+
* The tab to highlight for `pathname`: the deepest tab whose path it equals or sits under, so
|
|
4
|
+
* `/billing/plans` owns `/billing/plans/checkout/pro` but not `/billing/plansx`. The bare module path
|
|
5
|
+
* (`/billing`, rendered as its first tab) highlights the first tab. A page outside every listed tab
|
|
6
|
+
* (a page whose own tab is hidden from this viewer) highlights none, instead of passing for the first.
|
|
7
|
+
*/
|
|
8
|
+
function findActiveTabPath(tabList, pathname) {
|
|
9
|
+
const current = trimSlash(pathname);
|
|
10
|
+
const owner = tabList.filter(tab => {
|
|
11
|
+
const tabPath = trimSlash(tab.path);
|
|
12
|
+
return current === tabPath || current.startsWith(`${tabPath}/`);
|
|
13
|
+
}).sort((a, b) => trimSlash(b.path).length - trimSlash(a.path).length)[0];
|
|
14
|
+
if (owner) return owner.path;
|
|
15
|
+
const isModuleRoot = tabList.some(tab => trimSlash(tab.path).startsWith(`${current}/`));
|
|
16
|
+
return isModuleRoot ? tabList[0]?.path : undefined;
|
|
17
|
+
}
|
|
18
|
+
const PageContainer = props => {
|
|
2
19
|
const {
|
|
3
20
|
tabList,
|
|
4
21
|
tabActiveKey,
|
|
@@ -6,16 +23,15 @@ import {jsx,jsxs}from'react/jsx-runtime';import {useState,useEffect}from'react';
|
|
|
6
23
|
tabBarExtraContent,
|
|
7
24
|
loading
|
|
8
25
|
} = props;
|
|
9
|
-
const [activeTabKey, setActiveTabKey] = useState(tabActiveKey);
|
|
10
26
|
const location = useLocation();
|
|
11
27
|
const navigate = useNavigate();
|
|
28
|
+
// Derived from the URL on the first render too, so the server-rendered highlight is the one the
|
|
29
|
+
// browser keeps (it used to start from `tabActiveKey` and move after hydration).
|
|
30
|
+
const activeForLocation = () => tabList && tabList.length > 0 ? findActiveTabPath(tabList, location.pathname) : tabActiveKey;
|
|
31
|
+
const [activeTabKey, setActiveTabKey] = useState(activeForLocation);
|
|
12
32
|
useEffect(() => {
|
|
13
33
|
if (tabList && tabList.length > 0) {
|
|
14
|
-
|
|
15
|
-
// Find a tab where the current path starts with the tab's path (to handle child routes)
|
|
16
|
-
const matchedTab = tabList.find(tab => currentPath.startsWith(tab.path));
|
|
17
|
-
const defaultKey = tabList[0]?.path;
|
|
18
|
-
setActiveTabKey(matchedTab ? matchedTab.path : defaultKey);
|
|
34
|
+
setActiveTabKey(findActiveTabPath(tabList, location.pathname));
|
|
19
35
|
}
|
|
20
36
|
}, [location.pathname, tabList]);
|
|
21
37
|
const handleTabChange = path => {
|
|
@@ -60,4 +76,4 @@ import {jsx,jsxs}from'react/jsx-runtime';import {useState,useEffect}from'react';
|
|
|
60
76
|
children: props.children
|
|
61
77
|
})]
|
|
62
78
|
});
|
|
63
|
-
};export{PageContainer};//# sourceMappingURL=PageContainer.js.map
|
|
79
|
+
};export{PageContainer,findActiveTabPath};//# sourceMappingURL=PageContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageContainer.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PageContainer.js","sources":["../../../src/components/PageContainer/PageContainer.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;AAYG;AACH;;;AAaA,SAAO,kBAAmB,OAAO,EAAC,QAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Which tab the PageContainer strip highlights. It follows the URL: the deepest tab that owns the
|
|
3
|
+
* path, the first tab on the bare module path, and none on a page outside every listed tab - a
|
|
4
|
+
* billing page whose own tab is hidden from the viewer used to show the first tab as current.
|
|
5
|
+
*/
|
|
6
|
+
export {};
|
|
7
|
+
//# sourceMappingURL=PageContainer.test.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PageContainer.test.d.ts","sourceRoot":"","sources":["../../../../src/components/PageContainer/__tests__/PageContainer.test.tsx"],"names":[],"mappings":"AAAA;;;;GAIG"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {jsx}from'react/jsx-runtime';import {createContext,useState,useEffect,useMemo}from'react';import'../../hooks/
|
|
1
|
+
import {jsx}from'react/jsx-runtime';import {createContext,useState,useEffect,useMemo}from'react';import {useMediaQuery}from'../../hooks/useMediaQuery.js';import'../../hooks/useToast.js';const themes = [{
|
|
2
2
|
value: 'default',
|
|
3
3
|
label: 'Default',
|
|
4
4
|
description: 'Clean and minimal design'
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMediaQuery.test.d.ts","sourceRoot":"","sources":["../../../src/hooks/__tests__/useMediaQuery.test.tsx"],"names":[],"mappings":""}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
interface MediaQueryResult {
|
|
1
|
+
export interface MediaQueryResult {
|
|
2
2
|
width: number;
|
|
3
3
|
height: number;
|
|
4
4
|
isMobile: boolean;
|
|
@@ -9,6 +9,13 @@ interface MediaQueryResult {
|
|
|
9
9
|
xl: boolean;
|
|
10
10
|
'2xl': boolean;
|
|
11
11
|
}
|
|
12
|
+
/**
|
|
13
|
+
* Viewport size and Tailwind breakpoint flags.
|
|
14
|
+
*
|
|
15
|
+
* Hydration-safe: while hydrating, React renders the server snapshot (desktop) so the
|
|
16
|
+
* markup matches what the server sent, then re-renders with the real viewport. Reading
|
|
17
|
+
* `window` in the first render instead made every phone-width load throw React #418 and
|
|
18
|
+
* discard the server HTML. Client-only mounts get the real viewport straight away.
|
|
19
|
+
*/
|
|
12
20
|
export declare const useMediaQuery: () => MediaQueryResult;
|
|
13
|
-
export {};
|
|
14
21
|
//# sourceMappingURL=useMediaQuery.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.ts"],"names":[],"mappings":"AAEA,
|
|
1
|
+
{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaQuery.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,EAAE,EAAE,OAAO,CAAC;IACZ,EAAE,EAAE,OAAO,CAAC;IACZ,EAAE,EAAE,OAAO,CAAC;IACZ,EAAE,EAAE,OAAO,CAAC;IACZ,EAAE,EAAE,OAAO,CAAC;IACZ,KAAK,EAAE,OAAO,CAAC;CAClB;AAoDD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,QAAO,gBAAmF,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {useSyncExternalStore}from'react';const breakpoints = {
|
|
2
2
|
sm: 640,
|
|
3
3
|
md: 768,
|
|
4
4
|
lg: 1024,
|
|
@@ -13,36 +13,44 @@ const getFlags = width => ({
|
|
|
13
13
|
xl: width >= breakpoints.xl && width < breakpoints['2xl'],
|
|
14
14
|
'2xl': width >= breakpoints['2xl']
|
|
15
15
|
});
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
16
|
+
/** The server cannot see the viewport, so it always renders the desktop layout. */
|
|
17
|
+
const SERVER_SNAPSHOT = Object.freeze({
|
|
18
|
+
width: 0,
|
|
19
|
+
height: 0,
|
|
20
|
+
isMobile: false,
|
|
21
|
+
xs: false,
|
|
22
|
+
sm: false,
|
|
23
|
+
md: false,
|
|
24
|
+
lg: false,
|
|
25
|
+
xl: false,
|
|
26
|
+
'2xl': false
|
|
27
|
+
});
|
|
28
|
+
// One cached snapshot per viewport size: useSyncExternalStore needs a stable value between changes.
|
|
29
|
+
let snapshot = null;
|
|
30
|
+
const getSnapshot = () => {
|
|
31
|
+
const width = window.innerWidth;
|
|
32
|
+
const height = window.innerHeight;
|
|
33
|
+
if (!snapshot || snapshot.width !== width || snapshot.height !== height) {
|
|
34
|
+
snapshot = {
|
|
23
35
|
width,
|
|
24
36
|
height,
|
|
25
|
-
isMobile,
|
|
26
|
-
...
|
|
27
|
-
};
|
|
28
|
-
};
|
|
29
|
-
const [state, setState] = useState(() => typeof window !== 'undefined' ? getDimensions() : {
|
|
30
|
-
width: 0,
|
|
31
|
-
height: 0,
|
|
32
|
-
isMobile: false,
|
|
33
|
-
xs: false,
|
|
34
|
-
sm: false,
|
|
35
|
-
md: false,
|
|
36
|
-
lg: false,
|
|
37
|
-
xl: false,
|
|
38
|
-
'2xl': false
|
|
39
|
-
});
|
|
40
|
-
useEffect(() => {
|
|
41
|
-
const handleResize = () => {
|
|
42
|
-
setState(getDimensions());
|
|
37
|
+
isMobile: width < breakpoints.md,
|
|
38
|
+
...getFlags(width)
|
|
43
39
|
};
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
40
|
+
}
|
|
41
|
+
return snapshot;
|
|
42
|
+
};
|
|
43
|
+
const getServerSnapshot = () => SERVER_SNAPSHOT;
|
|
44
|
+
const subscribe = onChange => {
|
|
45
|
+
window.addEventListener('resize', onChange);
|
|
46
|
+
return () => window.removeEventListener('resize', onChange);
|
|
47
|
+
};
|
|
48
|
+
/**
|
|
49
|
+
* Viewport size and Tailwind breakpoint flags.
|
|
50
|
+
*
|
|
51
|
+
* Hydration-safe: while hydrating, React renders the server snapshot (desktop) so the
|
|
52
|
+
* markup matches what the server sent, then re-renders with the real viewport. Reading
|
|
53
|
+
* `window` in the first render instead made every phone-width load throw React #418 and
|
|
54
|
+
* discard the server HTML. Client-only mounts get the real viewport straight away.
|
|
55
|
+
*/
|
|
56
|
+
const useMediaQuery = () => useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);export{useMediaQuery};//# sourceMappingURL=useMediaQuery.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMediaQuery.js","sources":["../../src/hooks/useMediaQuery.ts"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useMediaQuery.js","sources":["../../src/hooks/useMediaQuery.ts"],"sourcesContent":[null],"names":[],"mappings":"+CAGI,WAAa,GAAC;IAEd,EAAA,GAAA;IACA,EAAE;IACF,EAAE;IACF,EAAE;OACA;;MAEF,gBAAe,KAAA;AAClB,EAAA,EAAA,EAAA,KAAA,GAAA,WAAA,CAAA,EAAA;AAoDD,EAAA,EAAA,EAAA,KAAA,IAAA,WAAA,CAAA,EAAA,IAAA,KAAA,GAAA,WAAA,CAAA,EAAA;;;;;;;AAOG,MAAA,eAAA,GAAA,MAAA,CAAA,MAAA,CAAA;AACH,EAAA,KAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useWindowSize.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useWindowSize.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,wBAAgB,aAAa;;;EAG5B"}
|
|
@@ -1,20 +1,14 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
// Add event listener for window resize
|
|
15
|
-
window.addEventListener('resize', handleResize);
|
|
16
|
-
// Cleanup the event listener on component unmount
|
|
17
|
-
return () => window.removeEventListener('resize', handleResize);
|
|
18
|
-
}, []);
|
|
19
|
-
return windowSize;
|
|
1
|
+
import {useMemo}from'react';import {useMediaQuery}from'./useMediaQuery.js';/**
|
|
2
|
+
* Viewport width and height - 0 x 0 on the server and while hydrating (see useMediaQuery),
|
|
3
|
+
* the real size after that. The object only changes when the size does.
|
|
4
|
+
*/
|
|
5
|
+
function useWindowSize() {
|
|
6
|
+
const {
|
|
7
|
+
width,
|
|
8
|
+
height
|
|
9
|
+
} = useMediaQuery();
|
|
10
|
+
return useMemo(() => ({
|
|
11
|
+
width,
|
|
12
|
+
height
|
|
13
|
+
}), [width, height]);
|
|
20
14
|
}export{useWindowSize};//# sourceMappingURL=useWindowSize.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useWindowSize.js","sources":["../../src/hooks/useWindowSize.ts"],"sourcesContent":[null],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useWindowSize.js","sources":["../../src/hooks/useWindowSize.ts"],"sourcesContent":[null],"names":[],"mappings":";AAMG;AACH;;;AAGC,EAAA,MAAA;;;;;;;;"}
|
package/lib/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{default as PageLoading}from'./components/PageLoading/index.js';export{ApplicationErrorHandler}from'./components/ErrorHandlers/ApplicationErrorHandler.js';export{ErrorBoundary}from'./components/ErrorHandlers/ErrorBoundary.js';export{LayoutErrorBoundary}from'./components/ErrorHandlers/LayoutErrorBoundary.js';export{MANIFEST_RELOAD_FALLBACK_MS,RemixErrorBoundary,isManifestVersionMismatchError}from'./components/ErrorHandlers/RemixErrorBoundary.js';export{SPAErrorBoundary}from'./components/ErrorHandlers/SPAErrorBoundary.js';export{ReactTable}from'./components/ReactTable/Table.js';export{DefaultColumnFilter,SelectColumnFilter}from'./components/ReactTable/TableFilters.js';export{Error404}from'./components/ErrorPages/404.js';export{Error500}from'./components/ErrorPages/500.js';export{Error403}from'./components/ErrorPages/403.js';export{PageContainer}from'./components/PageContainer/PageContainer.js';export{Spin}from'./components/Spin/index.js';export{OTPInput}from'./components/OTP/OTPInput.js';export{SingleInput}from'./components/OTP/SingleInput.js';export{useOTPInput}from'./components/OTP/hooks.js';export{OTPVerification}from'./components/OTP/OTPVerification.js';export{SearchInput}from'./components/Search/SearchInput.js';export{Select,SelectContent,SelectItem,SelectSearch,SelectTrigger,SelectValue}from'./components/Select/Select.js';export{DatePicker}from'./components/DatePicker/DatePicker.js';export{Dialog}from'./components/Dialog/Dialog.js';export{TailwindUiButton}from'./components/Button/Button.js';export{TailwindThemeProvider,ThemeContext,themes}from'./components/ThemeProvider/ThemeProvider.js';export{ThemeToggle}from'./components/ThemeProvider/ThemeToggle.js';export{LanguageMenuDropdown}from'./components/LanguageMenuDropdown/LanguageMenuDropdown.js';export{InputToolBar}from'./components/InputToolBar/InputToolBar.js';export{getDefaultLeftItems,getDefaultRightItems}from'./components/InputToolBar/defaults.js';export{CharacterSlotPicker}from'./components/CharacterSlotPicker/CharacterSlotPicker.js';export{AIToolbar,AIToolbarInputSurface,AIToolbarLeading,AIToolbarMain,AIToolbarStatusDot,AIToolbarTrailing}from'./components/AIToolbar/components/AIToolbarPrimitives.js';export{Completion}from'./components/AIToolbar/components/completion/index.js';export{SystemAudio}from'./components/AIToolbar/components/speech/index.js';export{AudioVisualizer}from'./components/AIToolbar/components/speech/audio-visualizer.js';export{StatusIndicator}from'./components/AIToolbar/components/speech/StatusIndicator.js';export{AIToolBar}from'./components/AIToolbar/components/AIToolBar.js';export{CustomCursor}from'./components/AIToolbar/components/CustomCursor.js';export{MessageHistory}from'./components/AIToolbar/components/completion/MessageHistory.js';export{Screenshot}from'./components/AIToolbar/components/completion/Screenshot.js';export{Header}from'./components/AIToolbar/components/speech/Header.js';export{ModeSwitcher}from'./components/AIToolbar/components/speech/ModeSwitcher.js';export{PermissionFlow}from'./components/AIToolbar/components/speech/PermissionFlow.js';export{setMarketplaceCharacters,useActiveCharacter,useCharacterPicker}from'./components/AIToolbar/hooks/useActiveCharacter.js';export{ACTIVE_CHARACTER_CHANGE_EVENT,ACTIVE_CHARACTER_FILE_NAME_STORAGE_KEY,readPreferredActiveCharacterFileName,resolveActiveCharacterFromList,setPreferredActiveCharacterFileName}from'./hooks/activeCharacterPreference.js';export{default as ChannelBar}from'./components/Inbox/Channels/ChannelBar.js';export{default as ChannelConnectModal}from'./components/Inbox/Channels/ChannelConnectModal.js';export{CHANNELS}from'./components/Inbox/Channels/channelsMeta.js';export{YantraIcon}from'./components/YantraIcon.js';export{Markdown as AIToolbarMarkdown}from'./components/AIToolbar/components/Markdown/index.js';export{MarkdownBreadcrumbs}from'./components/Markdown/MarkdownBreadcrumbs.js';export{MarkdownCopyButton}from'./components/Markdown/MarkdownCopyButton.js';export{MarkdownHeader}from'./components/Markdown/MarkdownHeader.js';export{MarkdownNavigation}from'./components/Markdown/MarkdownNavigation.js';export{MarkdownPage}from'./components/Markdown/MarkdownPage.js';export{MarkdownTableOfContents}from'./components/Markdown/MarkdownTableOfContents.js';export{CHARACTER_SLOTS_CHANGE_EVENT,CHARACTER_SLOTS_DEFAULT_KEY,CHARACTER_SLOTS_STORAGE_KEY,SLOT_NUMBERS,readCharacterSlots,readDefaultCharacterFileName,readDefaultSlot,setDefaultSlot,setSlot,useCharacterSlots,writeCharacterSlots}from'./hooks/characterSlotsPreference.js';export{CHARACTER_OVERRIDES_CHANGE_EVENT,readCharacterAddendum,readCharacterOverrides,readCharacterVoiceId,setCharacterAddendum,setCharacterOverrides,setCharacterVoiceId,useCharacterOverrides}from'./hooks/characterOverrides.js';export{BAR_TOGGLE_AUDIO_EVENT,BAR_TOGGLE_EYE_EVENT,BAR_TOGGLE_MIC_EVENT,useGlobalShortcutBridge}from'./hooks/useGlobalShortcutBridge.js';export{useTheme}from'./hooks/useTheme.js';export{useWindowSize}from'./hooks/useWindowSize.js';export{ToastContainer,useToast,useToastCloseAll}from'./hooks/useToast.js';export{useMediaQuery}from'./hooks/useMediaQuery.js';export{cn}from'./utils/util.js';export{AssistantMessageActions}from'./components/AIToolbar/components/completion/AssistantMessageActions.js';export{DragButton}from'./components/AIToolbar/components/DragButton.js';//# sourceMappingURL=index.js.map
|
|
1
|
+
export{default as PageLoading}from'./components/PageLoading/index.js';export{ApplicationErrorHandler}from'./components/ErrorHandlers/ApplicationErrorHandler.js';export{ErrorBoundary}from'./components/ErrorHandlers/ErrorBoundary.js';export{LayoutErrorBoundary}from'./components/ErrorHandlers/LayoutErrorBoundary.js';export{MANIFEST_RELOAD_FALLBACK_MS,RemixErrorBoundary,isManifestVersionMismatchError}from'./components/ErrorHandlers/RemixErrorBoundary.js';export{SPAErrorBoundary}from'./components/ErrorHandlers/SPAErrorBoundary.js';export{ReactTable}from'./components/ReactTable/Table.js';export{DefaultColumnFilter,SelectColumnFilter}from'./components/ReactTable/TableFilters.js';export{Error404}from'./components/ErrorPages/404.js';export{Error500}from'./components/ErrorPages/500.js';export{Error403}from'./components/ErrorPages/403.js';export{PageContainer,findActiveTabPath}from'./components/PageContainer/PageContainer.js';export{Spin}from'./components/Spin/index.js';export{OTPInput}from'./components/OTP/OTPInput.js';export{SingleInput}from'./components/OTP/SingleInput.js';export{useOTPInput}from'./components/OTP/hooks.js';export{OTPVerification}from'./components/OTP/OTPVerification.js';export{SearchInput}from'./components/Search/SearchInput.js';export{Select,SelectContent,SelectItem,SelectSearch,SelectTrigger,SelectValue}from'./components/Select/Select.js';export{DatePicker}from'./components/DatePicker/DatePicker.js';export{Dialog}from'./components/Dialog/Dialog.js';export{TailwindUiButton}from'./components/Button/Button.js';export{TailwindThemeProvider,ThemeContext,themes}from'./components/ThemeProvider/ThemeProvider.js';export{ThemeToggle}from'./components/ThemeProvider/ThemeToggle.js';export{LanguageMenuDropdown}from'./components/LanguageMenuDropdown/LanguageMenuDropdown.js';export{InputToolBar}from'./components/InputToolBar/InputToolBar.js';export{getDefaultLeftItems,getDefaultRightItems}from'./components/InputToolBar/defaults.js';export{CharacterSlotPicker}from'./components/CharacterSlotPicker/CharacterSlotPicker.js';export{AIToolbar,AIToolbarInputSurface,AIToolbarLeading,AIToolbarMain,AIToolbarStatusDot,AIToolbarTrailing}from'./components/AIToolbar/components/AIToolbarPrimitives.js';export{Completion}from'./components/AIToolbar/components/completion/index.js';export{SystemAudio}from'./components/AIToolbar/components/speech/index.js';export{AudioVisualizer}from'./components/AIToolbar/components/speech/audio-visualizer.js';export{StatusIndicator}from'./components/AIToolbar/components/speech/StatusIndicator.js';export{AIToolBar}from'./components/AIToolbar/components/AIToolBar.js';export{CustomCursor}from'./components/AIToolbar/components/CustomCursor.js';export{MessageHistory}from'./components/AIToolbar/components/completion/MessageHistory.js';export{Screenshot}from'./components/AIToolbar/components/completion/Screenshot.js';export{Header}from'./components/AIToolbar/components/speech/Header.js';export{ModeSwitcher}from'./components/AIToolbar/components/speech/ModeSwitcher.js';export{PermissionFlow}from'./components/AIToolbar/components/speech/PermissionFlow.js';export{setMarketplaceCharacters,useActiveCharacter,useCharacterPicker}from'./components/AIToolbar/hooks/useActiveCharacter.js';export{ACTIVE_CHARACTER_CHANGE_EVENT,ACTIVE_CHARACTER_FILE_NAME_STORAGE_KEY,readPreferredActiveCharacterFileName,resolveActiveCharacterFromList,setPreferredActiveCharacterFileName}from'./hooks/activeCharacterPreference.js';export{default as ChannelBar}from'./components/Inbox/Channels/ChannelBar.js';export{default as ChannelConnectModal}from'./components/Inbox/Channels/ChannelConnectModal.js';export{CHANNELS}from'./components/Inbox/Channels/channelsMeta.js';export{YantraIcon}from'./components/YantraIcon.js';export{Markdown as AIToolbarMarkdown}from'./components/AIToolbar/components/Markdown/index.js';export{MarkdownBreadcrumbs}from'./components/Markdown/MarkdownBreadcrumbs.js';export{MarkdownCopyButton}from'./components/Markdown/MarkdownCopyButton.js';export{MarkdownHeader}from'./components/Markdown/MarkdownHeader.js';export{MarkdownNavigation}from'./components/Markdown/MarkdownNavigation.js';export{MarkdownPage}from'./components/Markdown/MarkdownPage.js';export{MarkdownTableOfContents}from'./components/Markdown/MarkdownTableOfContents.js';export{CHARACTER_SLOTS_CHANGE_EVENT,CHARACTER_SLOTS_DEFAULT_KEY,CHARACTER_SLOTS_STORAGE_KEY,SLOT_NUMBERS,readCharacterSlots,readDefaultCharacterFileName,readDefaultSlot,setDefaultSlot,setSlot,useCharacterSlots,writeCharacterSlots}from'./hooks/characterSlotsPreference.js';export{CHARACTER_OVERRIDES_CHANGE_EVENT,readCharacterAddendum,readCharacterOverrides,readCharacterVoiceId,setCharacterAddendum,setCharacterOverrides,setCharacterVoiceId,useCharacterOverrides}from'./hooks/characterOverrides.js';export{BAR_TOGGLE_AUDIO_EVENT,BAR_TOGGLE_EYE_EVENT,BAR_TOGGLE_MIC_EVENT,useGlobalShortcutBridge}from'./hooks/useGlobalShortcutBridge.js';export{useTheme}from'./hooks/useTheme.js';export{useWindowSize}from'./hooks/useWindowSize.js';export{ToastContainer,useToast,useToastCloseAll}from'./hooks/useToast.js';export{useMediaQuery}from'./hooks/useMediaQuery.js';export{cn}from'./utils/util.js';export{AssistantMessageActions}from'./components/AIToolbar/components/completion/AssistantMessageActions.js';export{DragButton}from'./components/AIToolbar/components/DragButton.js';//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@admin-layout/tailwind-ui",
|
|
3
|
-
"version": "12.2.5-alpha.
|
|
3
|
+
"version": "12.2.5-alpha.22",
|
|
4
4
|
"description": "Sample core for higher packages to depend on",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"author": "CDMBase LLC",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"watch": "npm run build:lib:watch"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@admin-layout/client": "12.2.5-alpha.
|
|
33
|
+
"@admin-layout/client": "12.2.5-alpha.22",
|
|
34
34
|
"@radix-ui/react-accordion": "^1.2.0",
|
|
35
35
|
"@radix-ui/react-alert-dialog": "^1.1.1",
|
|
36
36
|
"@radix-ui/react-aspect-ratio": "^1.1.0",
|
|
@@ -111,5 +111,5 @@
|
|
|
111
111
|
"typescript": {
|
|
112
112
|
"definition": "lib/index.d.ts"
|
|
113
113
|
},
|
|
114
|
-
"gitHead": "
|
|
114
|
+
"gitHead": "d8db495e828063c09a588df4e27936a00dce3293"
|
|
115
115
|
}
|