prime-ui-kit 0.17.0 → 0.18.0

package/src/layout/page/examples/guard.tsx

@@ -0,0 +1,87 @@
+/** A client's card edited on its own page: after an edit a press on the navigation or the path asks before the changes are lost, and while it saves nothing leaves — `Page.Guard`, `dirty`, `busy`. */
+import { AppShell, Breadcrumb, Button, Card, Icon, Input, Page, Sidebar } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const SAVED_NAME = "ООО «Северный ветер»";
+const SAVED_MANAGER = "Анна Морозова";
+
+export default function PageGuardExample() {
+  const [name, setName] = React.useState(SAVED_NAME);
+  const [manager, setManager] = React.useState(SAVED_MANAGER);
+  const [saved, setSaved] = React.useState({ name: SAVED_NAME, manager: SAVED_MANAGER });
+  const [saving, setSaving] = React.useState(false);
+  const formId = React.useId();
+  const dirty = name !== saved.name || manager !== saved.manager;
+
+  const save = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSaving(true);
+    window.setTimeout(() => {
+      setSaved({ name, manager });
+      setSaving(false);
+    }, 1200);
+  };
+
+  return (
+    <div className={styles.window}>
+      <AppShell.Root fillViewport className={styles.shell}>
+        <AppShell.Nav>
+          <Sidebar.Root>
+            <Sidebar.Content>
+              <Sidebar.Item href="#orders">
+                <Sidebar.ItemIcon>
+                  <Icon name="object.package" />
+                </Sidebar.ItemIcon>
+                Заказы
+              </Sidebar.Item>
+              <Sidebar.Item href="#clients" current>
+                <Sidebar.ItemIcon>
+                  <Icon name="object.users" />
+                </Sidebar.ItemIcon>
+                Клиенты
+              </Sidebar.Item>
+            </Sidebar.Content>
+          </Sidebar.Root>
+        </AppShell.Nav>
+        <AppShell.Main>
+          <Page.Root>
+            <Page.Guard dirty={dirty} busy={saving} />
+            <Page.TopBar>
+              <Page.Heading>
+                <Breadcrumb.Root>
+                  <Breadcrumb.Item href="#clients">Клиенты</Breadcrumb.Item>
+                </Breadcrumb.Root>
+                <Page.Title>{saved.name}</Page.Title>
+              </Page.Heading>
+              <Page.Actions>
+                <Button.Root type="submit" form={formId} loading={saving} disabled={!dirty}>
+                  Сохранить
+                </Button.Root>
+              </Page.Actions>
+            </Page.TopBar>
+            <Page.Body>
+              <Card.Root>
+                <Card.Body>
+                  <form id={formId} className={styles.fields} onSubmit={save}>
+                    <Input.Root label="Название">
+                      <Input.Wrapper>
+                        <Input.Field value={name} onValueChange={setName} />
+                      </Input.Wrapper>
+                    </Input.Root>
+                    <Input.Root label="Менеджер">
+                      <Input.Wrapper>
+                        <Input.Field value={manager} onValueChange={setManager} />
+                      </Input.Wrapper>
+                    </Input.Root>
+                  </form>
+                </Card.Body>
+              </Card.Root>
+            </Page.Body>
+          </Page.Root>
+        </AppShell.Main>
+      </AppShell.Root>
+    </div>
+  );
+}

package/src/layout/page/examples/loading.tsx

@@ -0,0 +1,57 @@
+/** A page whose figures load after it opens: the line of data keeps its place under the title while it loads, so nothing in the bar moves — `loading`. */
+import { Button, Card, Crossfade, Icon, Page, Skeleton, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+const ORDERS = [
+  { id: "№ 4821", client: "ООО «Север»", sum: "84 000 ₽" },
+  { id: "№ 4820", client: "ИП Котов", sum: "12 500 ₽" },
+  { id: "№ 4819", client: "ООО «Вектор»", sum: "230 000 ₽" },
+];
+
+const LOAD_MS = 1200;
+
+export default function PageLoadingExample() {
+  const [loading, setLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    if (!loading) return;
+    const timer = window.setTimeout(() => setLoading(false), LOAD_MS);
+    return () => window.clearTimeout(timer);
+  }, [loading]);
+
+  return (
+    <Page.Root>
+      <Page.TopBar sticky={false}>
+        <Page.Heading>
+          <Page.Title>Заказы</Page.Title>
+          <Page.Description loading={loading}>128 в работе · 6 ждут оплаты</Page.Description>
+        </Page.Heading>
+        <Page.Actions>
+          <Button.Root variant="soft" tone="neutral" onClick={() => setLoading(true)}>
+            <Button.Icon>
+              <Icon name="action.refresh" />
+            </Button.Icon>
+            Обновить
+          </Button.Root>
+        </Page.Actions>
+      </Page.TopBar>
+      <Page.Body>
+        <Card.Root variant="list" aria-busy={loading || undefined}>
+          <Card.Body>
+            <Crossfade state={loading ? "loading" : "data"}>
+              {loading ? (
+                <Skeleton lines={ORDERS.length} />
+              ) : (
+                ORDERS.map((order) => (
+                  <Typography key={order.id} variant="body-m">
+                    {order.id} · {order.client} · {order.sum}
+                  </Typography>
+                ))
+              )}
+            </Crossfade>
+          </Card.Body>
+        </Card.Root>
+      </Page.Body>
+    </Page.Root>
+  );
+}

package/src/layout/sidebar/COMPONENT.md

@@ -299,6 +299,7 @@ Put `<Sidebar.Toggle variant="header" />` next to `Sidebar.Brand` in the header,
 ## States
 | State | Driven by | DOM |
 |---|---|---|
+| held | a `Page.Guard` that is `busy` or `dirty` on the page | a press on `Sidebar.Item` or `Sidebar.Brand` stops before it navigates (a router link included) and the panel stays; `dirty` asks first, then repeats it |
 | mode | `mode` / `defaultMode` | Root `data-mode`, `data-panel-mode` (the last visible mode while hidden); `<nav inert>` while hidden |
 | off-canvas | `offCanvas="always"`, or `"auto"` + viewport < 768px | Root `data-off-canvas`, `data-state="open" \| "closed"`; `<nav inert>` while closed; the kit scrim (`role="presentation"`) while open; in an `AppShell` the shell Root `data-off-canvas` |
 | placing | the viewport crossed the off-canvas breakpoint (not a person's choice) | Root `data-placing` for one painted frame: the rail lands at its new width with no motion (no growing from 0, no folding rows, no sliding panel) |

package/src/styles/theme-light.css

@@ -367,6 +367,7 @@
   --prime-message-padding-x: var(--prime-ref-space-3);
   --prime-message-padding-y: var(--prime-ref-space-2);
   --prime-message-radius: var(--prime-ref-radius-14);
+  --prime-message-sticker: 10rem;
   --prime-message-tail-height: var(--prime-ref-space-4);
   --prime-message-tail-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16' preserveAspectRatio='none'%3E%3Cpath d='M8 0C8 7 6.5 12.5 0.6 15.3C0.2 15.5 0.3 16 0.8 16H8Z'/%3E%3C/svg%3E");
   --prime-message-tail-width: var(--prime-ref-space-2);

package/dist/components/scroll-container/useWheelToInline.d.ts

@@ -1,10 +0,0 @@
-import * as React from "react";
-/**
- * A vertical wheel over a strip that scrolls only sideways (`axis="horizontal"`) scrolls the strip:
- * a mouse has no other way to reach what is hidden to the side. The browser's own sideways wheel
- * (a trackpad swipe, Shift + wheel) stays native, and so does a page scroll that passes over the
- * strip (a wheel gesture that began outside it keeps scrolling the page) or a strip already at the
- * edge in that direction (the wheel chains to the page). The steps glide to an accumulated target
- * (instant under reduced motion), so fast wheeling loses no distance.
- */
-export declare function useWheelToInline(ref: React.RefObject<HTMLElement | null>, enabled: boolean): void;