prime-ui-kit 0.7.2 → 0.7.4
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/components/drawer/Drawer.d.ts +11 -66
- package/dist/components/drawer/Drawer.d.ts.map +1 -1
- package/dist/components/drawer/examples/cart-preview.d.ts.map +1 -1
- package/dist/components/drawer/examples/explicit-panel.d.ts +1 -1
- package/dist/components/drawer/examples/explicit-panel.d.ts.map +1 -1
- package/dist/components/drawer/examples/filters-panel.d.ts.map +1 -1
- package/dist/components/drawer/examples/mobile-nav-sheet.d.ts +1 -1
- package/dist/components/drawer/examples/mobile-nav-sheet.d.ts.map +1 -1
- package/dist/components/drawer/examples/settings-side.d.ts +1 -1
- package/dist/components/drawer/examples/settings-side.d.ts.map +1 -1
- package/dist/components/index.css +77 -82
- package/dist/components/index.css.map +3 -3
- package/dist/components/index.js +665 -651
- package/dist/components/index.js.map +4 -4
- package/dist/hooks/useScrollLock.d.ts +1 -1
- package/dist/index.css +77 -82
- package/dist/index.css.map +3 -3
- package/dist/index.js +665 -651
- package/dist/index.js.map +4 -4
- package/dist/layout/index.d.ts +1 -0
- package/dist/layout/index.d.ts.map +1 -1
- package/dist/layout/sidebar/Sidebar.d.ts +2 -0
- package/dist/layout/sidebar/Sidebar.d.ts.map +1 -1
- package/dist/layout/sidebar/SidebarRoot.d.ts +10 -0
- package/dist/layout/sidebar/SidebarRoot.d.ts.map +1 -1
- package/dist/layout/sidebar/sidebarDesktopStorage.d.ts +5 -0
- package/dist/layout/sidebar/sidebarDesktopStorage.d.ts.map +1 -0
- package/dist/layout/sidebar/useSidebarNarrowViewport.d.ts +6 -0
- package/dist/layout/sidebar/useSidebarNarrowViewport.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/components/drawer/COMPONENT.md +93 -153
- package/src/components/drawer/examples/cart-preview.tsx +43 -38
- package/src/components/drawer/examples/explicit-panel.tsx +29 -29
- package/src/components/drawer/examples/filters-panel.tsx +45 -40
- package/src/components/drawer/examples/mobile-nav-sheet.tsx +35 -30
- package/src/components/drawer/examples/settings-side.tsx +47 -42
package/dist/layout/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export type { AppShellMainProps, AppShellNavProps, AppShellRootProps, AppShellTe
|
|
|
2
2
|
export { AppShell } from "./app-shell/AppShell";
|
|
3
3
|
export type { SidebarContentProps, SidebarFooterProps, SidebarGroupLabelProps, SidebarGroupProps, SidebarHeaderMainProps, SidebarHeaderProps, SidebarHeaderRowProps, SidebarIdentityButtonProps, SidebarMenuActionProps, SidebarMenuButtonProps, SidebarMenuIconProps, SidebarMenuItemProps, SidebarMenuLabelProps, SidebarMenuLinkProps, SidebarMenuProps, SidebarMenuRouterLinkProps, SidebarMenuTrailingProps, SidebarNavCategoryCountProps, SidebarNavCategoryLabelProps, SidebarNavCategoryPanelProps, SidebarNavCategoryProps, SidebarNavCategoryTriggerProps, SidebarNavDocTreeProps, SidebarNavPanelBodyProps, SidebarNavPanelHeadingProps, SidebarNavPanelProps, SidebarResponsive, SidebarRootProps, SidebarSize, SidebarTextProps, SidebarToggleButtonProps, } from "./sidebar/Sidebar";
|
|
4
4
|
export { Sidebar, useSidebarContext } from "./sidebar/Sidebar";
|
|
5
|
+
export type { StoredSidebarDesktopMode } from "./sidebar/sidebarDesktopStorage";
|
|
5
6
|
export type { SidebarLayoutMode } from "./sidebar/sidebarLayout";
|
|
6
7
|
export { SIDEBAR_LAYOUT_BREAKPOINT_MAX, SIDEBAR_MEDIA_QUERY_INLINE, SIDEBAR_MEDIA_QUERY_NARROW, SIDEBAR_MEDIA_QUERY_XS_HIDDEN, } from "./sidebar/sidebarLayout";
|
|
7
8
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,sBAAsB,EACtB,kBAAkB,EAClB,qBAAqB,EACrB,0BAA0B,EAC1B,sBAAsB,EACtB,sBAAsB,EACtB,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,gBAAgB,EAChB,0BAA0B,EAC1B,wBAAwB,EACxB,4BAA4B,EAC5B,4BAA4B,EAC5B,4BAA4B,EAC5B,uBAAuB,EACvB,8BAA8B,EAC9B,sBAAsB,EACtB,wBAAwB,EACxB,2BAA2B,EAC3B,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,GACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EACL,6BAA6B,EAC7B,0BAA0B,EAC1B,0BAA0B,EAC1B,6BAA6B,GAC9B,MAAM,yBAAyB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,sBAAsB,EACtB,kBAAkB,EAClB,qBAAqB,EACrB,0BAA0B,EAC1B,sBAAsB,EACtB,sBAAsB,EACtB,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,gBAAgB,EAChB,0BAA0B,EAC1B,wBAAwB,EACxB,4BAA4B,EAC5B,4BAA4B,EAC5B,4BAA4B,EAC5B,uBAAuB,EACvB,8BAA8B,EAC9B,sBAAsB,EACtB,wBAAwB,EACxB,2BAA2B,EAC3B,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,GACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAChF,YAAY,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EACL,6BAA6B,EAC7B,0BAA0B,EAC1B,0BAA0B,EAC1B,6BAA6B,GAC9B,MAAM,yBAAyB,CAAC"}
|
|
@@ -170,6 +170,7 @@ export declare const Sidebar: React.ForwardRefExoticComponent<Omit<Omit<React.De
|
|
|
170
170
|
onOpenChange?: (open: boolean) => void;
|
|
171
171
|
responsive?: boolean;
|
|
172
172
|
sidebarSlot?: "page-nav";
|
|
173
|
+
persistStateKey?: string;
|
|
173
174
|
} & React.RefAttributes<HTMLElement>> & {
|
|
174
175
|
Root: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
|
|
175
176
|
children: React.ReactNode;
|
|
@@ -186,6 +187,7 @@ export declare const Sidebar: React.ForwardRefExoticComponent<Omit<Omit<React.De
|
|
|
186
187
|
onOpenChange?: (open: boolean) => void;
|
|
187
188
|
responsive?: boolean;
|
|
188
189
|
sidebarSlot?: "page-nav";
|
|
190
|
+
persistStateKey?: string;
|
|
189
191
|
} & React.RefAttributes<HTMLElement>>;
|
|
190
192
|
NavPanel: typeof SidebarNavPanel;
|
|
191
193
|
NavPanelBody: typeof SidebarNavPanelBody;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../../src/layout/sidebar/Sidebar.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../../src/layout/sidebar/Sidebar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -24,6 +24,11 @@ export type SidebarRootProps = Omit<React.ComponentPropsWithoutRef<"aside">, "ch
|
|
|
24
24
|
onOpenChange?: (open: boolean) => void;
|
|
25
25
|
responsive?: boolean;
|
|
26
26
|
sidebarSlot?: "page-nav";
|
|
27
|
+
/**
|
|
28
|
+
* Ключ `localStorage`: запоминаются только режимы рабочего стола `expanded` / `compact`.
|
|
29
|
+
* На узком вьюпорте drawer при загрузке всегда закрыт; при возврате на широкий экран подставляется сохранённый режим.
|
|
30
|
+
*/
|
|
31
|
+
persistStateKey?: string;
|
|
27
32
|
};
|
|
28
33
|
declare const SidebarRoot: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "children"> & {
|
|
29
34
|
children: React.ReactNode;
|
|
@@ -46,6 +51,11 @@ declare const SidebarRoot: React.ForwardRefExoticComponent<Omit<Omit<React.Detai
|
|
|
46
51
|
onOpenChange?: (open: boolean) => void;
|
|
47
52
|
responsive?: boolean;
|
|
48
53
|
sidebarSlot?: "page-nav";
|
|
54
|
+
/**
|
|
55
|
+
* Ключ `localStorage`: запоминаются только режимы рабочего стола `expanded` / `compact`.
|
|
56
|
+
* На узком вьюпорте drawer при загрузке всегда закрыт; при возврате на широкий экран подставляется сохранённый режим.
|
|
57
|
+
*/
|
|
58
|
+
persistStateKey?: string;
|
|
49
59
|
} & React.RefAttributes<HTMLElement>>;
|
|
50
60
|
export { SidebarRoot };
|
|
51
61
|
//# sourceMappingURL=SidebarRoot.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarRoot.d.ts","sourceRoot":"","sources":["../../../../src/layout/sidebar/SidebarRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"SidebarRoot.d.ts","sourceRoot":"","sources":["../../../../src/layout/sidebar/SidebarRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEtE,OAAO,EACL,KAAK,uBAAuB,EAG5B,KAAK,iBAAiB,EACvB,MAAM,iBAAiB,CAAC;AAGzB,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,CAAC;AAE/C,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,GAAG;IACzF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACnD,kBAAkB;IAClB,IAAI,CAAC,EAAE,iBAAiB,GAAG,uBAAuB,CAAC;IACnD,kBAAkB;IAClB,WAAW,CAAC,EAAE,iBAAiB,GAAG,uBAAuB,CAAC;IAC1D,kBAAkB;IAClB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,kBAAkB;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kBAAkB;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAiCF,QAAA,MAAM,WAAW;cA1DL,KAAK,CAAC,SAAS;WAClB,WAAW;WACX,WAAW;YACV,iBAAiB;mBACV,iBAAiB;oBAChB,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI;IAClD,kBAAkB;WACX,iBAAiB,GAAG,uBAAuB;IAClD,kBAAkB;kBACJ,iBAAiB,GAAG,uBAAuB;IACzD,kBAAkB;mBACH,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI;IACjD,kBAAkB;WACX,OAAO;IACd,kBAAkB;kBACJ,OAAO;IACrB,kBAAkB;mBACH,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;iBACzB,OAAO;kBACN,UAAU;IACxB;;;OAGG;sBACe,MAAM;qCA8PxB,CAAC;AAIH,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { SidebarLayoutMode } from "./sidebarLayout";
|
|
2
|
+
export type StoredSidebarDesktopMode = Extract<SidebarLayoutMode, "expanded" | "compact">;
|
|
3
|
+
export declare function readStoredDesktopMode(key: string): StoredSidebarDesktopMode | null;
|
|
4
|
+
export declare function writeStoredDesktopMode(key: string, mode: StoredSidebarDesktopMode): void;
|
|
5
|
+
//# sourceMappingURL=sidebarDesktopStorage.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebarDesktopStorage.d.ts","sourceRoot":"","sources":["../../../../src/layout/sidebar/sidebarDesktopStorage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,MAAM,MAAM,wBAAwB,GAAG,OAAO,CAAC,iBAAiB,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;AAa1F,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,GAAG,wBAAwB,GAAG,IAAI,CAWlF;AAED,wBAAgB,sBAAsB,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,wBAAwB,GAAG,IAAI,CAQxF"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Подписка на `(max-width: 47.999rem)` без рассинхрона с эффектом:
|
|
3
|
+
* первый клиентский кадр совпадает с `matchMedia` (в т.ч. после гидрации).
|
|
4
|
+
*/
|
|
5
|
+
export declare function useSidebarNarrowViewport(enabled: boolean): boolean;
|
|
6
|
+
//# sourceMappingURL=useSidebarNarrowViewport.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSidebarNarrowViewport.d.ts","sourceRoot":"","sources":["../../../../src/layout/sidebar/useSidebarNarrowViewport.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAuBlE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "prime-ui-kit",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.4",
|
|
4
4
|
"description": "React 19 UI kit: CSS Modules, semantic design tokens (--prime-sys-*), composable components — forms, modals, selects, tables, navigation, overlays. TypeScript, ESM, a11y-oriented.",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -1,185 +1,125 @@
|
|
|
1
1
|
# Drawer
|
|
2
2
|
|
|
3
|
-
**Проектирование по умолчанию:** при проектировании экранов и примеров изначально выбирай **`m`** для `size` (где есть ось размера), если явно не оговорено иное.
|
|
4
|
-
|
|
5
3
|
## About
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
`Drawer` — модальная боковая панель поверх страницы.
|
|
6
|
+
|
|
7
|
+
Что делает компонент при `open=true`:
|
|
8
|
+
- рендерится в `Portal`;
|
|
9
|
+
- блокирует скролл страницы;
|
|
10
|
+
- закрывается по `Escape`;
|
|
11
|
+
- закрывается по клику на overlay;
|
|
12
|
+
- показывает шапку (иконка, заголовок, подзаголовок), scroll-body и опциональный footer;
|
|
13
|
+
- воспроизводит анимации `slide-in` / `slide-out`.
|
|
14
|
+
|
|
15
|
+
Используйте `Drawer` для вторичных сценариев: фильтры, быстрые формы, детали сущности, action-панели.
|
|
16
|
+
|
|
17
|
+
## Breaking Change
|
|
8
18
|
|
|
9
|
-
|
|
10
|
-
- **Use** for bottom or top sheets when the main canvas (for example a map) should stay partly visible.
|
|
11
|
-
- **Use** for the same modal-style contract as a dialog (focus trap, blocked background) but with an edge-attached panel instead of a centered box.
|
|
12
|
-
- **Do not use** for short confirmations or compact prompts; prefer a centered [Modal](../modal/COMPONENT.md).
|
|
13
|
-
- **Do not use** for inline expandable regions; use disclosure or a non-modal sidebar if you should not block the whole page.
|
|
14
|
-
- **Do not use** for full page changes driven only by the URL; the kit does not wire routing—control `open` / `onOpenChange` from the app.
|
|
19
|
+
Старый compound API удалён полностью.
|
|
15
20
|
|
|
16
|
-
|
|
21
|
+
Удалены:
|
|
22
|
+
- `Drawer.Root`
|
|
23
|
+
- `Drawer.Trigger`
|
|
24
|
+
- `Drawer.Portal`
|
|
25
|
+
- `Drawer.Overlay`
|
|
26
|
+
- `Drawer.Content`
|
|
27
|
+
- `Drawer.Body`
|
|
28
|
+
- `Drawer.Header`
|
|
29
|
+
- `Drawer.Title`
|
|
30
|
+
- `Drawer.Footer`
|
|
31
|
+
- `Drawer.Close`
|
|
17
32
|
|
|
18
|
-
|
|
19
|
-
- **`Drawer.Trigger`** (optional) — exactly one child element; opens on click unless the child’s `onClick` calls `preventDefault`.
|
|
20
|
-
- **`Drawer.Portal`** — renders nothing when closed; when open, portals children (default container `document.body` via the internal `Portal`).
|
|
21
|
-
- **`Drawer.Overlay`** and the panel surface should be **siblings** inside **`Drawer.Portal`** (backdrop is not a wrapper around the panel). List **`Drawer.Overlay`** before the panel so it stacks under the dialog when `z-index` ties.
|
|
22
|
-
- **Panel surface:** at the portal root, **`Drawer.Content`** renders the full dialog shell (`role="dialog"`, focus trap, scroll lock, inert siblings, chrome size for header/footer). For a split where only the middle scrolls, use **`Drawer.Panel`** as the shell and nest **`Drawer.Content`** for the body region — see **`examples/explicit-panel.tsx`**.
|
|
23
|
-
- **`Drawer.Header`** → **`Drawer.Title`**, **`Drawer.Body`**, **`Drawer.Footer`** — all **must** be nested inside the panel surface (**`Drawer.Content`** at root or **`Drawer.Panel`**). **`Drawer.Close`** wraps a single control that should close the drawer (often a button in the footer or custom actions).
|
|
33
|
+
Новый API: один компонент `Drawer`.
|
|
24
34
|
|
|
25
|
-
|
|
35
|
+
## Minimal Example
|
|
26
36
|
|
|
27
37
|
```tsx
|
|
38
|
+
import * as React from "react";
|
|
28
39
|
import { Button, Drawer } from "prime-ui-kit";
|
|
29
40
|
|
|
30
41
|
export function DrawerMinimal() {
|
|
42
|
+
const [open, setOpen] = React.useState(false);
|
|
43
|
+
|
|
31
44
|
return (
|
|
32
|
-
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
45
|
+
<>
|
|
46
|
+
<Button.Root type="button" onClick={() => setOpen(true)}>
|
|
47
|
+
Open drawer
|
|
48
|
+
</Button.Root>
|
|
49
|
+
|
|
50
|
+
<Drawer
|
|
51
|
+
open={open}
|
|
52
|
+
onOpenChange={setOpen}
|
|
53
|
+
title="Edit workspace"
|
|
54
|
+
description="Update settings and save changes"
|
|
55
|
+
footer={
|
|
56
|
+
<>
|
|
57
|
+
<Button.Root variant="neutral" mode="stroke" onClick={() => setOpen(false)}>
|
|
58
|
+
Cancel
|
|
59
|
+
</Button.Root>
|
|
60
|
+
<Button.Root variant="primary" onClick={() => setOpen(false)}>
|
|
61
|
+
Save
|
|
62
|
+
</Button.Root>
|
|
63
|
+
</>
|
|
64
|
+
}
|
|
65
|
+
>
|
|
66
|
+
<p>Body content</p>
|
|
67
|
+
</Drawer>
|
|
68
|
+
</>
|
|
50
69
|
);
|
|
51
70
|
}
|
|
52
71
|
```
|
|
53
72
|
|
|
54
|
-
### Playground snippets (source of truth)
|
|
55
|
-
|
|
56
|
-
Runnable demos and copy-paste references: `playground/snippets/drawer/*.tsx` (Russian copy in UI; workspace imports use `@/`).
|
|
57
|
-
|
|
58
|
-
| File | Intent |
|
|
59
|
-
|------|--------|
|
|
60
|
-
| `sizes.tsx` | Ladder **`size`** `s`–`xl` on **`Drawer.Content`**; padding, title tier, header close button, and footer controls share one control tier. |
|
|
61
|
-
| `variants-sides.tsx` | **`side`** `right` (default), `left`, `bottom`, `top`; top/bottom sheets use capped height (~**`80vh`** in styles) and scroll in **`Drawer.Body`**. |
|
|
62
|
-
| `states.tsx` | **`closeOnEscape={false}`** and **`closeOnOverlayClick={false}`** for dismiss only via actions; **`showCloseButton={false}`** on **`Drawer.Header`**. |
|
|
63
|
-
| `controlled.tsx` | **`open`** / **`onOpenChange`** on **`Drawer.Root`** without **`Drawer.Trigger`**. |
|
|
64
|
-
| `composition.tsx` | Header, **`Input`** in **`Drawer.Body`**, footer with **`Drawer.Close`** on cancel. |
|
|
65
|
-
| `full-width.tsx` | Vertical stack in **`Drawer.Footer`** with **`Button.Root`** **`fullWidth`**. |
|
|
66
|
-
| `responsive.tsx` | Side width cap **`min(28rem, 90vw)`**; long copy scrolls in **`Drawer.Body`**. |
|
|
67
|
-
| `trigger-link.tsx` | **`Drawer.Trigger`** with a single **`LinkButton`** child; opening merges with existing **`onClick`** (e.g. **`preventDefault`** on **`href`**). |
|
|
68
|
-
| `features.tsx` | **`Drawer.Portal`** **`container`**, **`aria-label`** on **`Drawer.Content`** without a visible title row, long list scroll inside **`Drawer.Body`**. |
|
|
69
|
-
|
|
70
|
-
### Examples (`examples/`)
|
|
71
|
-
|
|
72
|
-
English scenario starters next to this file (workspace **`@/`**; published **`prime-ui-kit`**):
|
|
73
|
-
|
|
74
|
-
| File | Intent |
|
|
75
|
-
|------|--------|
|
|
76
|
-
| `examples/filters-panel.tsx` | Leading-edge filters; scroll criteria, **Apply** / **Reset** in footer. |
|
|
77
|
-
| `examples/cart-preview.tsx` | Trailing-edge cart preview; line items scroll; checkout in footer. |
|
|
78
|
-
| `examples/settings-side.tsx` | Trailing-edge settings; form fields share drawer **`size`** with chrome. |
|
|
79
|
-
| `examples/mobile-nav-sheet.tsx` | Bottom sheet nav; rows wrapped in **`Drawer.Close`**. |
|
|
80
|
-
| `examples/explicit-panel.tsx` | **`Drawer.Panel`** shell with inner **`Drawer.Content`** as scroll body only. |
|
|
81
|
-
|
|
82
|
-
## Rules
|
|
83
|
-
|
|
84
|
-
- **Controlled vs uncontrolled:** pass `open` and `onOpenChange` for controlled mode; otherwise use `defaultOpen` on `Drawer.Root`. Omit `Drawer.Trigger` when you open/close from parent state only.
|
|
85
|
-
- **Closing:** Escape and overlay click update open state by default (and invoke **`onOpenChange`** when controlled). Disable with `closeOnEscape={false}` and/or `closeOnOverlayClick={false}` on `Drawer.Root` for explicit-dismiss-only flows. Escape is handled while the panel is open (same layer as the dialog focus trap). Backdrop close runs only when the click target is the overlay element itself (not bubbled from children).
|
|
86
|
-
- **`Drawer.Trigger` / `Drawer.Close`:** each expects **exactly one** React child that accepts an `onClick` handler; the kit merges its handler with yours and respects `preventDefault`.
|
|
87
|
-
- **Accessible name:** set `aria-labelledby` on the panel to the `id` of `Drawer.Title`, or `aria-label` when there is no visible title.
|
|
88
|
-
- **Header close control:** `showCloseButton={false}` on `Drawer.Header` removes the built-in ghost button (`aria-label` is `"Close drawer"` in code when shown).
|
|
89
|
-
- **Sizing:** `size` on the panel (`Drawer.Content` at root or `Drawer.Panel`) is `s` | `m` | `l` | `xl` (default `m`); it drives padding, title scale, and control sizing in chrome via `ControlSizeProvider`. Side panels cap width in CSS (**`min(28rem, 90vw)`**); top/bottom sheets cap height (~**`80vh`**), not separate width/height props.
|
|
90
|
-
- **Portal:** `Drawer.Portal` renders `null` while closed, so portal subtree is unmounted when not open.
|
|
91
|
-
|
|
92
73
|
## API
|
|
93
74
|
|
|
94
|
-
### Drawer
|
|
95
|
-
|
|
96
|
-
| Prop | Type | Default | Required | Description |
|
|
97
|
-
|------|------|---------|----------|-------------|
|
|
98
|
-
| `open` | `boolean` | — | No | Controlled open state. |
|
|
99
|
-
| `defaultOpen` | `boolean` | `false` | No | Initial open state when uncontrolled. |
|
|
100
|
-
| `onOpenChange` | `(open: boolean) => void` | — | No | Called when open state changes (trigger, dismiss, programmatic). |
|
|
101
|
-
| `closeOnEscape` | `boolean` | `true` | No | Close on Escape while the panel is open. |
|
|
102
|
-
| `closeOnOverlayClick` | `boolean` | `true` | No | Close when the overlay receives a direct click. |
|
|
103
|
-
| `children` | `React.ReactNode` | — | Yes | Tree: trigger, portal, etc. |
|
|
104
|
-
|
|
105
|
-
### Drawer.Trigger
|
|
106
|
-
|
|
107
|
-
| Prop | Type | Default | Required | Description |
|
|
108
|
-
|------|------|---------|----------|-------------|
|
|
109
|
-
| `children` | `React.ReactElement<{ onClick?: React.MouseEventHandler }>` | — | Yes | Single child; click opens unless default prevented. |
|
|
110
|
-
|
|
111
|
-
### Drawer.Close
|
|
112
|
-
|
|
113
|
-
| Prop | Type | Default | Required | Description |
|
|
114
|
-
|------|------|---------|----------|-------------|
|
|
115
|
-
| `children` | `React.ReactElement<{ onClick?: React.MouseEventHandler; className?: string }>` | — | Yes | Single child; click runs your `onClick` then closes unless default prevented. |
|
|
116
|
-
|
|
117
|
-
### Drawer.Portal
|
|
118
|
-
|
|
119
|
-
| Prop | Type | Default | Required | Description |
|
|
120
|
-
|------|------|---------|----------|-------------|
|
|
121
|
-
| `children` | `React.ReactNode` | — | No | Portaled subtree; not mounted when closed. |
|
|
122
|
-
| `container` | `HTMLElement \| null` | `document.body` | No | DOM node for `createPortal` (falls back when `null`/omitted per `Portal` implementation). |
|
|
123
|
-
|
|
124
|
-
### Drawer.Overlay
|
|
125
|
-
|
|
126
|
-
| Prop | Type | Default | Required | Description |
|
|
127
|
-
|------|------|---------|----------|-------------|
|
|
128
|
-
| `className` | `string` | — | No | Extra class on the backdrop. |
|
|
129
|
-
| `onClick` | `React.MouseEventHandler<HTMLDivElement>` | — | No | Fires before overlay dismiss logic. |
|
|
130
|
-
| … | `React.HTMLAttributes<HTMLDivElement>` | — | No | `role="presentation"`; remaining attributes on the backdrop `div`. |
|
|
131
|
-
|
|
132
|
-
### Drawer.Content
|
|
133
|
-
|
|
134
|
-
When used as the **direct** child of **`Drawer.Portal`** (after **`Drawer.Overlay`**), renders the dialog panel. When nested **inside** an existing panel, renders the scrollable body region only (see **`examples/explicit-panel.tsx`**).
|
|
135
|
-
|
|
136
|
-
| Prop | Type | Default | Required | Description |
|
|
137
|
-
|------|------|---------|----------|-------------|
|
|
138
|
-
| `side` | `"left" \| "right" \| "bottom" \| "top"` | `"right"` | No | Edge from which the panel enters. |
|
|
139
|
-
| `size` | `"s" \| "m" \| "l" \| "xl"` | `"m"` | No | Chrome and spacing tier for header/footer controls (`ControlSizeProvider`). |
|
|
140
|
-
| `aria-label` | `string` | — | No | Accessible name when no visible title. |
|
|
141
|
-
| `aria-labelledby` | `string` | — | No | `id` of the visible title element. |
|
|
142
|
-
| `aria-describedby` | `string` | — | No | `id` of auxiliary description content. |
|
|
143
|
-
| `className` | `string` | — | No | Class on the panel or inner body root. |
|
|
144
|
-
| `children` | `React.ReactNode` | — | No | Shell slots (header, body, footer) when panel root; scroll content when nested. |
|
|
145
|
-
| … | `React.HTMLAttributes<HTMLDivElement>` | — | No | Panel: `role="dialog"`, `aria-modal`, `tabIndex={-1}`, focus trap, scroll lock, inert siblings. |
|
|
146
|
-
|
|
147
|
-
### Drawer.Panel
|
|
148
|
-
|
|
149
|
-
Same props as **`Drawer.Content`** when **`Drawer.Content`** is the portal-root panel. Use **`Drawer.Panel`** for explicit shell + inner **`Drawer.Content`** body scrolling — **`examples/explicit-panel.tsx`**.
|
|
150
|
-
|
|
151
|
-
### Drawer.Header
|
|
75
|
+
### Drawer
|
|
152
76
|
|
|
153
77
|
| Prop | Type | Default | Required | Description |
|
|
154
78
|
|------|------|---------|----------|-------------|
|
|
155
|
-
| `
|
|
156
|
-
| `
|
|
157
|
-
| `
|
|
158
|
-
|
|
|
79
|
+
| `open` | `boolean` | — | Yes | Контролируемое состояние открытия. |
|
|
80
|
+
| `onOpenChange` | `(open: boolean) => void` | — | Yes | Вызывается при закрытии/открытии (Esc, overlay, крестик, внешние действия). |
|
|
81
|
+
| `title` | `React.ReactNode` | — | Yes | Заголовок в шапке. |
|
|
82
|
+
| `description` | `React.ReactNode` | — | No | Подзаголовок в шапке. |
|
|
83
|
+
| `icon` | `React.ReactNode` | — | No | Иконка слева в шапке. |
|
|
84
|
+
| `children` | `React.ReactNode` | — | Yes | Контент body внутри `ScrollContainer`. |
|
|
85
|
+
| `footer` | `React.ReactNode` | — | No | Контент футера (обычно кнопки `Cancel` / `Save`). |
|
|
86
|
+
| `side` | `'left' \| 'right'` | `'right'` | No | Сторона выезда панели. |
|
|
87
|
+
| `className` | `string` | — | No | Дополнительный класс панели. |
|
|
88
|
+
| `overlayClassName` | `string` | — | No | Дополнительный класс overlay. |
|
|
159
89
|
|
|
160
|
-
|
|
90
|
+
## Rules
|
|
161
91
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
92
|
+
- Компонент только контролируемый: состояние хранится в родителе (`open`, `onOpenChange`).
|
|
93
|
+
- `side` поддерживает только `left` и `right`.
|
|
94
|
+
- Шапка всегда содержит кнопку закрытия (крестик) справа.
|
|
95
|
+
- Footer опционален: если `footer` не передан, нижняя зона не рендерится.
|
|
96
|
+
- Для доступности `aria-labelledby`/`aria-describedby` формируются автоматически из `title`/`description`.
|
|
167
97
|
|
|
168
|
-
|
|
98
|
+
## Playground snippets
|
|
169
99
|
|
|
170
|
-
|
|
171
|
-
|------|------|---------|----------|-------------|
|
|
172
|
-
| `className` | `string` | — | No | Class on the scroll container root. |
|
|
173
|
-
| `children` | `React.ReactNode` | — | No | Main content; vertical scroll when overflowing. |
|
|
174
|
-
| … | `React.HTMLAttributes<HTMLDivElement>` | — | No | Scrollable body via `ScrollContainer`. |
|
|
100
|
+
Source of truth: `playground/snippets/drawer/*.tsx`.
|
|
175
101
|
|
|
176
|
-
|
|
102
|
+
| File | Intent |
|
|
103
|
+
|------|--------|
|
|
104
|
+
| `controlled.tsx` | Базовый контролируемый сценарий `open` / `onOpenChange`. |
|
|
105
|
+
| `composition.tsx` | Форма в body + действия в footer. |
|
|
106
|
+
| `variants-sides.tsx` | Сравнение `side='left'` и `side='right'`. |
|
|
107
|
+
| `states.tsx` | Варианты с footer и без footer. |
|
|
108
|
+
| `full-width.tsx` | Вертикальный стек `fullWidth` кнопок в footer. |
|
|
109
|
+
| `responsive.tsx` | Поведение ширины панели (`min(28rem, 90vw)`). |
|
|
110
|
+
| `trigger-link.tsx` | Открытие из `LinkButton` через внешний `setOpen(true)`. |
|
|
111
|
+
| `features.tsx` | Длинный scroll-body и шапка с иконкой/description. |
|
|
112
|
+
| `sizes.tsx` | Паттерны расположения и действий для левой/правой панели. |
|
|
113
|
+
|
|
114
|
+
## Examples (`examples/`)
|
|
177
115
|
|
|
178
|
-
|
|
|
179
|
-
|
|
180
|
-
| `
|
|
181
|
-
| `
|
|
182
|
-
|
|
|
116
|
+
| File | Intent |
|
|
117
|
+
|------|--------|
|
|
118
|
+
| `examples/filters-panel.tsx` | Левая панель фильтров с действиями Apply/Reset. |
|
|
119
|
+
| `examples/cart-preview.tsx` | Правая панель корзины с checkout-действиями. |
|
|
120
|
+
| `examples/settings-side.tsx` | Правая панель настроек формы. |
|
|
121
|
+
| `examples/mobile-nav-sheet.tsx` | Навигационные действия с закрытием по клику на пункт. |
|
|
122
|
+
| `examples/explicit-panel.tsx` | Канонический сценарий новой шапки/body/footer. |
|
|
183
123
|
|
|
184
124
|
## Related
|
|
185
125
|
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
|
|
1
3
|
import { Button } from "@/components/button/Button";
|
|
2
4
|
import { Drawer } from "@/components/drawer/Drawer";
|
|
5
|
+
import { Icon } from "@/icons";
|
|
3
6
|
|
|
4
7
|
import styles from "./examples-scenarios.module.css";
|
|
5
8
|
|
|
@@ -12,44 +15,46 @@ const lines = [
|
|
|
12
15
|
* Trailing-edge preview of the cart: scroll line items; primary checkout stays in the footer.
|
|
13
16
|
*/
|
|
14
17
|
export default function DrawerExampleCartPreview() {
|
|
18
|
+
const [open, setOpen] = React.useState(false);
|
|
19
|
+
|
|
15
20
|
return (
|
|
16
|
-
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
))}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
<
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
</
|
|
51
|
-
|
|
52
|
-
</Drawer
|
|
53
|
-
|
|
21
|
+
<>
|
|
22
|
+
<Button.Root type="button" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
|
|
23
|
+
Cart (3)
|
|
24
|
+
</Button.Root>
|
|
25
|
+
<Drawer
|
|
26
|
+
open={open}
|
|
27
|
+
onOpenChange={setOpen}
|
|
28
|
+
side="right"
|
|
29
|
+
title="Your cart"
|
|
30
|
+
description="2 products ready for checkout"
|
|
31
|
+
icon={<Icon name="nav.itemDot" tone="subtle" />}
|
|
32
|
+
footer={
|
|
33
|
+
<div className={styles.footerActions}>
|
|
34
|
+
<Button.Root
|
|
35
|
+
type="button"
|
|
36
|
+
variant="neutral"
|
|
37
|
+
mode="stroke"
|
|
38
|
+
onClick={() => setOpen(false)}
|
|
39
|
+
>
|
|
40
|
+
View cart
|
|
41
|
+
</Button.Root>
|
|
42
|
+
<Button.Root type="button" variant="primary" onClick={() => setOpen(false)}>
|
|
43
|
+
Checkout
|
|
44
|
+
</Button.Root>
|
|
45
|
+
</div>
|
|
46
|
+
}
|
|
47
|
+
>
|
|
48
|
+
{lines.map((line) => (
|
|
49
|
+
<div key={line.title} className={styles.cartLine}>
|
|
50
|
+
<div className={styles.cartLineMain}>
|
|
51
|
+
<p className={styles.cartTitle}>{line.title}</p>
|
|
52
|
+
<p className={styles.cartPrice}>{line.price}</p>
|
|
53
|
+
</div>
|
|
54
|
+
<p className={styles.cartMeta}>{line.meta}</p>
|
|
55
|
+
</div>
|
|
56
|
+
))}
|
|
57
|
+
</Drawer>
|
|
58
|
+
</>
|
|
54
59
|
);
|
|
55
60
|
}
|
|
@@ -1,40 +1,40 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
|
|
1
3
|
import { Button } from "@/components/button/Button";
|
|
2
4
|
import { Drawer } from "@/components/drawer/Drawer";
|
|
5
|
+
import { Icon } from "@/icons";
|
|
3
6
|
|
|
4
7
|
import styles from "./examples-scenarios.module.css";
|
|
5
8
|
|
|
6
9
|
/**
|
|
7
|
-
*
|
|
10
|
+
* Canonical new API with icon + subtitle in header and actions in footer.
|
|
8
11
|
*/
|
|
9
12
|
export default function DrawerExampleExplicitPanel() {
|
|
13
|
+
const [open, setOpen] = React.useState(false);
|
|
14
|
+
|
|
10
15
|
return (
|
|
11
|
-
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
</Drawer.Close>
|
|
35
|
-
</Drawer.Footer>
|
|
36
|
-
</Drawer.Panel>
|
|
37
|
-
</Drawer.Portal>
|
|
38
|
-
</Drawer.Root>
|
|
16
|
+
<>
|
|
17
|
+
<Button.Root type="button" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
|
|
18
|
+
Open details
|
|
19
|
+
</Button.Root>
|
|
20
|
+
<Drawer
|
|
21
|
+
open={open}
|
|
22
|
+
onOpenChange={setOpen}
|
|
23
|
+
title="Details"
|
|
24
|
+
description="Only body scrolls when content overflows"
|
|
25
|
+
icon={<Icon name="nav.layoutGrid" tone="subtle" />}
|
|
26
|
+
side="right"
|
|
27
|
+
footer={
|
|
28
|
+
<Button.Root type="button" variant="neutral" mode="stroke" onClick={() => setOpen(false)}>
|
|
29
|
+
Close
|
|
30
|
+
</Button.Root>
|
|
31
|
+
}
|
|
32
|
+
>
|
|
33
|
+
<p className={styles.intro}>
|
|
34
|
+
This drawer uses the new single-component API: header with icon/title/description,
|
|
35
|
+
scrollable content area, and footer actions.
|
|
36
|
+
</p>
|
|
37
|
+
</Drawer>
|
|
38
|
+
</>
|
|
39
39
|
);
|
|
40
40
|
}
|