@opencxh/ui-kit 3.181.0 → 3.183.0
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/index.cjs +3 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1446 -1405
- package/dist/index.js.map +1 -1
- package/dist/src/content/Page.d.ts +6 -1
- package/dist/src/content/PageHeader.d.ts +16 -4
- package/dist/src/index.d.ts +2 -2
- package/dist/src/utils/identity.d.ts +10 -0
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { default as React, ReactNode } from 'react';
|
|
2
2
|
import { ContentLoadingShape } from '../feedback/ContentLoading';
|
|
3
|
-
import { PageHeaderAction } from './PageHeader';
|
|
3
|
+
import { BreadcrumbItem, PageHeaderAction } from './PageHeader';
|
|
4
4
|
/**
|
|
5
5
|
* The `md` gutter matches `PageHeader`'s own horizontal padding, so the table
|
|
6
6
|
* or form below lines up with the title above it. The top value is small
|
|
@@ -18,6 +18,11 @@ export interface PageProps {
|
|
|
18
18
|
subtitle?: string;
|
|
19
19
|
/** Line under the title — a count, a record, a timestamp. */
|
|
20
20
|
meta?: ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* Trail above the title. Leave the last entry without an `onClick` — it is
|
|
23
|
+
* this page. See `BreadcrumbItem`.
|
|
24
|
+
*/
|
|
25
|
+
breadcrumbs?: BreadcrumbItem[];
|
|
21
26
|
/** Toolbar actions, right-aligned in the header. */
|
|
22
27
|
actions?: PageHeaderAction[];
|
|
23
28
|
/** Renders the back chevron beside the title. */
|
|
@@ -18,6 +18,13 @@ export interface PageHeaderAction {
|
|
|
18
18
|
*/
|
|
19
19
|
render?: () => React.ReactNode;
|
|
20
20
|
}
|
|
21
|
+
export interface BreadcrumbItem {
|
|
22
|
+
label: string;
|
|
23
|
+
/** Mark before the label — an identity plate, a channel glyph. */
|
|
24
|
+
icon?: React.ReactNode;
|
|
25
|
+
/** Omit on the last entry: you are already there. */
|
|
26
|
+
onClick?: () => void;
|
|
27
|
+
}
|
|
21
28
|
export interface PageHeaderProps {
|
|
22
29
|
/**
|
|
23
30
|
* `plain` sits directly on the page. `surface` is the app-bar treatment:
|
|
@@ -36,10 +43,15 @@ export interface PageHeaderProps {
|
|
|
36
43
|
* an inline row of properties survives a narrow window.
|
|
37
44
|
*/
|
|
38
45
|
meta?: React.ReactNode;
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
46
|
+
/**
|
|
47
|
+
* Trail above the title: where this page sits. The last entry is the current
|
|
48
|
+
* page and is never a control, so give only the ones before it an `onClick`.
|
|
49
|
+
*
|
|
50
|
+
* `onClick`, not `href`: an anchor inside a federated app is a full page
|
|
51
|
+
* load. Routing belongs to the app, so the crumb reports the click and the
|
|
52
|
+
* caller navigates.
|
|
53
|
+
*/
|
|
54
|
+
breadcrumbs?: BreadcrumbItem[];
|
|
43
55
|
actions?: PageHeaderAction[];
|
|
44
56
|
children?: React.ReactNode;
|
|
45
57
|
className?: string;
|
package/dist/src/index.d.ts
CHANGED
|
@@ -19,7 +19,7 @@ export { List, ListBulkAction, type ListGroup, type ListProps } from './content/
|
|
|
19
19
|
export { MessageBubble, type MessageBubbleProps } from './content/MessageBubble';
|
|
20
20
|
export { MetaSeparator, MetaValue, type MetaValueProps } from './content/MetaValue';
|
|
21
21
|
export { Page, type PageProps } from './content/Page';
|
|
22
|
-
export { PageHeader, type PageHeaderAction, type PageHeaderProps, } from './content/PageHeader';
|
|
22
|
+
export { type BreadcrumbItem, PageHeader, type PageHeaderAction, type PageHeaderProps, } from './content/PageHeader';
|
|
23
23
|
export { PageToolbar, PageToolbarActions, type PageToolbarActionsProps, type PageToolbarProps, } from './content/PageToolbar';
|
|
24
24
|
export { RichText, type RichTextProps } from './content/RichText';
|
|
25
25
|
export type { MentionRef } from './content/richTextMentions';
|
|
@@ -71,6 +71,6 @@ export * from './typography/Text';
|
|
|
71
71
|
export { Text, type TextProps } from './typography/Text';
|
|
72
72
|
export { type CatTone, catTone } from './utils/catTone';
|
|
73
73
|
export { cn, createSizes, createVariants } from './utils/cn';
|
|
74
|
-
export { IDENTITY_TONE_COUNT, type IdentityTone, identityDotClass, identityPlateClass, identityTone, } from './utils/identity';
|
|
74
|
+
export { IDENTITY_TONE_COUNT, type IdentityTone, identityDotClass, identityPlateClass, identityStrongClass, identityTone, } from './utils/identity';
|
|
75
75
|
export { normalizeText, text } from './utils/text';
|
|
76
76
|
export { type AnchoredPositionOptions, type AnchorRect, useAnchoredPosition, } from './utils/useAnchoredPosition';
|
|
@@ -23,3 +23,13 @@ export declare function identityTone(seed: string | undefined | null): IdentityT
|
|
|
23
23
|
export declare function identityPlateClass(seed: string | undefined | null): string;
|
|
24
24
|
/** The solid colour, for a dot or a rule. */
|
|
25
25
|
export declare function identityDotClass(seed: string | undefined | null): string;
|
|
26
|
+
/**
|
|
27
|
+
* Dark ground, light mark — for a plate that carries **text** rather than a
|
|
28
|
+
* monogram or a glyph: a project key, a short reference.
|
|
29
|
+
*
|
|
30
|
+
* Not {@link identityPlateClass}: a wash with a same-hue mark on it is
|
|
31
|
+
* colour-on-colour, and at 10px the key stops being legible before the colour
|
|
32
|
+
* stops being decorative. This ramp keeps its dark ground in both themes, so
|
|
33
|
+
* the same key reads the same way in light and dark.
|
|
34
|
+
*/
|
|
35
|
+
export declare function identityStrongClass(seed: string | undefined | null): string;
|