@konce-pt/react 0.18.2 → 0.18.3
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/app-shell/app-shell.d.ts +3 -2
- package/dist/app-shell/llms.txt +64 -63
- package/package.json +14 -14
|
@@ -35,9 +35,10 @@ export interface KptAppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'ch
|
|
|
35
35
|
/**
|
|
36
36
|
* Włącza szynę ikon w paśmie od `sidenavBreakpoint` do tego breakpointa: zamknięty panel
|
|
37
37
|
* nie chowa się wtedy całkowicie, tylko zwęża do `--kpt-sidenav-rail-width`. Wartość musi
|
|
38
|
-
* być wyższa niż `sidenavBreakpoint`. `
|
|
38
|
+
* być wyższa niż `sidenavBreakpoint`. `'always'` - szyna bez górnej granicy: od
|
|
39
|
+
* `sidenavBreakpoint` w górę zamknięcie zawsze zwija panel do ikon. `null` (domyślnie) wyłącza szynę.
|
|
39
40
|
*/
|
|
40
|
-
sidenavRailBreakpoint?: KptBreakpoint | null;
|
|
41
|
+
sidenavRailBreakpoint?: KptBreakpoint | 'always' | null;
|
|
41
42
|
/** Etykieta dostępności panelu; puste = `appShell.navigation` ze słownika. */
|
|
42
43
|
sidenavLabel?: string;
|
|
43
44
|
}
|
package/dist/app-shell/llms.txt
CHANGED
|
@@ -1,63 +1,64 @@
|
|
|
1
|
-
# KptAppShell (@konce-pt/react)
|
|
2
|
-
|
|
3
|
-
The application skeleton: a bar on top, a side panel and the content.
|
|
4
|
-
Import: `import { KptAppShell, useKptShellNavToggle } from '@konce-pt/react';`
|
|
5
|
-
|
|
6
|
-
## DOM
|
|
7
|
-
<div class="kpt-app-shell kpt-app-shell--nav-open"
|
|
8
|
-
data-sidenav-mode="auto" data-sidenav-breakpoint="lg">
|
|
9
|
-
...toolbar...
|
|
10
|
-
<div class="kpt-app-shell__body">
|
|
11
|
-
<nav class="kpt-app-shell__sidenav" tabindex="-1" id="...">...sidenav...</nav>
|
|
12
|
-
<div class="kpt-app-shell__scrim" aria-hidden="true"></div>
|
|
13
|
-
<main class="kpt-app-shell__content">...children...</main>
|
|
14
|
-
</div>
|
|
15
|
-
</div>
|
|
16
|
-
|
|
17
|
-
## Props
|
|
18
|
-
- `toolbar`: ReactNode - the slot above the content area (usually `<KptToolbar>`)
|
|
19
|
-
- `sidenav`: ReactNode - the side panel slot (usually `<KptSidenav>`)
|
|
20
|
-
- `children`: ReactNode - the application content
|
|
21
|
-
- `sidenavOpen` / `defaultSidenavOpen` / `onSidenavOpenChange` - the docked layout's open state
|
|
22
|
-
(default open)
|
|
23
|
-
- `sidenavCompactOpen` / `defaultSidenavCompactOpen` / `onSidenavCompactOpenChange` - the overlay's
|
|
24
|
-
open state (default closed)
|
|
25
|
-
- `sidenavMode`: 'auto' | 'side' | 'over' (default 'auto')
|
|
26
|
-
- `sidenavBreakpoint`: 'sm' | 'md' | 'lg' | 'xl' | '2xl' (default 'lg')
|
|
27
|
-
- `sidenavRailBreakpoint`: the same union or null (default null)
|
|
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
|
-
|
|
53
|
-
|
|
54
|
-
`--kpt-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
-
|
|
59
|
-
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
1
|
+
# KptAppShell (@konce-pt/react)
|
|
2
|
+
|
|
3
|
+
The application skeleton: a bar on top, a side panel and the content.
|
|
4
|
+
Import: `import { KptAppShell, useKptShellNavToggle } from '@konce-pt/react';`
|
|
5
|
+
|
|
6
|
+
## DOM
|
|
7
|
+
<div class="kpt-app-shell kpt-app-shell--nav-open"
|
|
8
|
+
data-sidenav-mode="auto" data-sidenav-breakpoint="lg">
|
|
9
|
+
...toolbar...
|
|
10
|
+
<div class="kpt-app-shell__body">
|
|
11
|
+
<nav class="kpt-app-shell__sidenav" tabindex="-1" id="...">...sidenav...</nav>
|
|
12
|
+
<div class="kpt-app-shell__scrim" aria-hidden="true"></div>
|
|
13
|
+
<main class="kpt-app-shell__content">...children...</main>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
|
|
17
|
+
## Props
|
|
18
|
+
- `toolbar`: ReactNode - the slot above the content area (usually `<KptToolbar>`)
|
|
19
|
+
- `sidenav`: ReactNode - the side panel slot (usually `<KptSidenav>`)
|
|
20
|
+
- `children`: ReactNode - the application content
|
|
21
|
+
- `sidenavOpen` / `defaultSidenavOpen` / `onSidenavOpenChange` - the docked layout's open state
|
|
22
|
+
(default open)
|
|
23
|
+
- `sidenavCompactOpen` / `defaultSidenavCompactOpen` / `onSidenavCompactOpenChange` - the overlay's
|
|
24
|
+
open state (default closed)
|
|
25
|
+
- `sidenavMode`: 'auto' | 'side' | 'over' (default 'auto')
|
|
26
|
+
- `sidenavBreakpoint`: 'sm' | 'md' | 'lg' | 'xl' | '2xl' (default 'lg')
|
|
27
|
+
- `sidenavRailBreakpoint`: the same union, 'always' or null (default null) - `'always'` keeps the icon rail
|
|
28
|
+
at every width from `sidenavBreakpoint` up: the toggle switches between the full panel and the icons
|
|
29
|
+
- `sidenavLabel`: string - empty falls back to `appShell.navigation` from the dictionary
|
|
30
|
+
- `locale`, `dictionary` - i18n overrides for this component only
|
|
31
|
+
|
|
32
|
+
## Two open states, on purpose
|
|
33
|
+
The docked layout and the overlay keep separate state. If they shared one, narrowing the window
|
|
34
|
+
would have to overwrite the consumer's state, and widening it back would have nothing to restore.
|
|
35
|
+
`useKptShellNavToggle` hits whichever state governs the current layout, so one button serves both.
|
|
36
|
+
|
|
37
|
+
## The nav toggle
|
|
38
|
+
const toggle = useKptShellNavToggle(); // optional { label }
|
|
39
|
+
<KptButton variant="text" {...toggle}>Menu</KptButton>
|
|
40
|
+
|
|
41
|
+
It returns `aria-expanded`, `aria-controls`, `aria-label` and `onClick`. Spread them on a native
|
|
42
|
+
`<button>` or on `<KptButton>` (which forwards them to its inner `<button>`) - ARIA attributes must
|
|
43
|
+
land on the element that carries the role, never on a wrapper.
|
|
44
|
+
|
|
45
|
+
`useKptAppShell()` exposes the same state directly: `{ isSidenavOpen, isOverlay, sidenavId,
|
|
46
|
+
toggleSidenav, openSidenav, closeSidenav }`. It throws outside `<KptAppShell>`.
|
|
47
|
+
|
|
48
|
+
## Layout is CSS, behaviour is JS
|
|
49
|
+
Which layout applies is decided entirely by the stylesheet from the `data-*` attributes, so nothing
|
|
50
|
+
flickers before hydration and the page is correct with JavaScript disabled. The breakpoint hook only
|
|
51
|
+
decides WHICH state the button flips. The scrim is always in the DOM; CSS controls its visibility.
|
|
52
|
+
|
|
53
|
+
## Tokens
|
|
54
|
+
`--kpt-sidenav-width` (16rem), `--kpt-sidenav-rail-width` (4rem), `--kpt-z-overlay`,
|
|
55
|
+
`--kpt-color-overlay-scrim`, `--kpt-motion-duration-base`, `--kpt-motion-easing-standard`.
|
|
56
|
+
|
|
57
|
+
## Accessibility
|
|
58
|
+
- The panel is a `<nav>` with a label and an `id` for `aria-controls`.
|
|
59
|
+
- A closed docked panel leaves the tab order through `visibility`, correct on the first frame.
|
|
60
|
+
- While the overlay is open the content gets `inert`, and Escape closes the panel - unless something
|
|
61
|
+
opened above the shell (a dialog, menu or popover) already handled it.
|
|
62
|
+
- Opening the overlay moves focus into the panel (its first focusable element, or the `<nav>`
|
|
63
|
+
itself); closing it returns focus to where it came from - usually the menu button - unless the user
|
|
64
|
+
has already moved it elsewhere. An overlay that is open when the page loads does not take focus.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@konce-pt/react",
|
|
3
|
-
"version": "0.18.
|
|
3
|
+
"version": "0.18.3",
|
|
4
4
|
"description": "Open-source React 19 component library on the Koncept UI design system - the same kpt-* CSS layer and --kpt-* tokens as the Angular port. Zero runtime dependencies.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "konce.pt",
|
|
@@ -65,19 +65,19 @@
|
|
|
65
65
|
"leaflet": "^1.9.0"
|
|
66
66
|
},
|
|
67
67
|
"dependencies": {
|
|
68
|
-
"@konce-pt/
|
|
69
|
-
"@konce-pt/
|
|
70
|
-
"@konce-pt/
|
|
71
|
-
"@konce-pt/
|
|
72
|
-
"@konce-pt/
|
|
73
|
-
"@konce-pt/
|
|
74
|
-
"@konce-pt/
|
|
75
|
-
"@konce-pt/
|
|
76
|
-
"@konce-pt/
|
|
77
|
-
"@konce-pt/
|
|
78
|
-
"@konce-pt/
|
|
79
|
-
"@konce-pt/
|
|
80
|
-
"@konce-pt/
|
|
68
|
+
"@konce-pt/chat": "0.18.3",
|
|
69
|
+
"@konce-pt/roadmap": "0.18.3",
|
|
70
|
+
"@konce-pt/i18n": "0.18.3",
|
|
71
|
+
"@konce-pt/icons": "0.18.3",
|
|
72
|
+
"@konce-pt/motion": "0.18.3",
|
|
73
|
+
"@konce-pt/mention": "0.18.3",
|
|
74
|
+
"@konce-pt/chart": "0.18.3",
|
|
75
|
+
"@konce-pt/speech": "0.18.3",
|
|
76
|
+
"@konce-pt/backdrop": "0.18.3",
|
|
77
|
+
"@konce-pt/table": "0.18.3",
|
|
78
|
+
"@konce-pt/datetime": "0.18.3",
|
|
79
|
+
"@konce-pt/tokens": "0.18.3",
|
|
80
|
+
"@konce-pt/map": "0.18.3"
|
|
81
81
|
},
|
|
82
82
|
"devDependencies": {
|
|
83
83
|
"@types/react": "^19.2.0",
|