@astryxdesign/core 0.4.2 → 0.4.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/CHANGELOG.md +45 -0
- package/dist/Avatar/Avatar.d.ts.map +1 -1
- package/dist/Avatar/Avatar.js +3 -19
- package/dist/Banner/Banner.d.ts +6 -2
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +71 -30
- package/dist/Banner/index.d.ts +14 -12
- package/dist/Banner/index.d.ts.map +1 -1
- package/dist/Banner/index.js +10 -8
- package/dist/Chat/ChatTokenizedText.js +1 -1
- package/dist/ComplexSelector/ComplexSelector.d.ts +38 -4
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +96 -35
- package/dist/ComplexSelector/index.d.ts +2 -2
- package/dist/ComplexSelector/index.d.ts.map +1 -1
- package/dist/ComplexSelector/index.js +1 -1
- package/dist/Markdown/parser.d.ts.map +1 -1
- package/dist/Markdown/parser.js +55 -12
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +4 -1
- package/dist/PowerSearch/formatFilterValue.d.ts.map +1 -1
- package/dist/PowerSearch/formatFilterValue.js +2 -4
- package/dist/Table/columnUtils.d.ts.map +1 -1
- package/dist/Table/columnUtils.js +4 -1
- package/dist/TextArea/TextArea.d.ts +6 -3
- package/dist/TextArea/TextArea.d.ts.map +1 -1
- package/dist/TextArea/TextArea.js +17 -6
- package/dist/TreeList/TreeList.js +2 -1
- package/dist/astryx.css +6 -4
- package/dist/astryx.umd.js +51 -51
- package/dist/astryx.umd.js.map +4 -4
- package/dist/theme/defineTheme.d.ts +8 -3
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/defineTheme.js +36 -47
- package/dist/theme/mergeComponents.d.ts +20 -0
- package/dist/theme/mergeComponents.d.ts.map +1 -0
- package/dist/theme/mergeComponents.js +56 -0
- package/dist/theme/onMediaTokens.d.ts +6 -1
- package/dist/theme/onMediaTokens.d.ts.map +1 -1
- package/dist/theme/onMediaTokens.js +11 -3
- package/dist/utils/characters.d.ts +27 -0
- package/dist/utils/characters.d.ts.map +1 -0
- package/dist/utils/characters.js +83 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +1 -0
- package/package.json +2 -2
- package/src/Avatar/Avatar.test.tsx +6 -1
- package/src/Avatar/Avatar.tsx +3 -21
- package/src/Banner/Banner.doc.mjs +9 -7
- package/src/Banner/Banner.test.tsx +68 -0
- package/src/Banner/Banner.tsx +97 -36
- package/src/Banner/index.ts +15 -13
- package/src/Chat/ChatTokenizedText.tsx +1 -1
- package/src/ComplexSelector/ComplexSelector.doc.mjs +55 -6
- package/src/ComplexSelector/ComplexSelector.test.tsx +197 -6
- package/src/ComplexSelector/ComplexSelector.tsx +153 -32
- package/src/ComplexSelector/index.ts +3 -1
- package/src/Markdown/parser.test.ts +53 -0
- package/src/Markdown/parser.ts +53 -12
- package/src/PowerSearch/PowerSearch.test.tsx +48 -3
- package/src/PowerSearch/PowerSearch.tsx +4 -1
- package/src/PowerSearch/formatFilterValue.test.ts +22 -0
- package/src/PowerSearch/formatFilterValue.ts +2 -4
- package/src/Table/Table.test.tsx +6 -0
- package/src/Table/columnUtils.ts +3 -1
- package/src/TextArea/TextArea.doc.mjs +1 -1
- package/src/TextArea/TextArea.test.tsx +72 -0
- package/src/TextArea/TextArea.tsx +26 -8
- package/src/TreeList/TreeList.doc.mjs +2 -2
- package/src/TreeList/TreeList.tsx +1 -1
- package/src/theme/defineTheme.test.ts +127 -0
- package/src/theme/defineTheme.ts +48 -51
- package/src/theme/extensibleAxes.test.ts +365 -0
- package/src/theme/mergeComponents.ts +59 -0
- package/src/theme/onMediaTokens.ts +9 -2
- package/src/utils/characters.test.ts +141 -0
- package/src/utils/characters.ts +88 -0
- package/src/utils/index.ts +2 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,50 @@
|
|
|
1
1
|
# @xds/core
|
|
2
2
|
|
|
3
|
+
# 0.4.3
|
|
4
|
+
|
|
5
|
+
#### New Features
|
|
6
|
+
|
|
7
|
+
- New string utilities: `characterCount`, `firstCharacter`, and `truncateCharacters` — replacements for `.length`, `.charAt(0)`, and slice-based truncation that measure and cut user-visible strings by whole characters, so an emoji, flag, or accented letter counts as one and never gets split. Built on `Intl.Segmenter` with a code-point fallback.
|
|
8
|
+
- ComplexSelector: support ghost toolbar triggers, leading icons, popup alignment, and an imperative `handleRef` (open/close/toggle/isOpen) for programmatic control.
|
|
9
|
+
- `useContainerReveal`: two ways to control the reveal without reaching into the hook's private custom properties. `getContainerProps({hoverDelay})` gates the reveal on pointer dwell — the hover-intent idea Tooltip and HoverCard already have as `delay` — so a cursor sweeping down a list no longer lights up every row it grazes, and `getContainerProps({forceState})` pins the container's trigger state when something else owns the interaction (a scroll, a drag, an open row menu). Per element, `getContentRevealProps({forceVisibility})` pins how one child looks regardless of its container. Still CSS-only: no hover state in React, no re-render. Keyboard and touch are untouched — focus always reveals, `forceState: 'inactive'` and `forceVisibility: 'hidden'` both yield to `:focus-within`.
|
|
10
|
+
|
|
11
|
+
#### Fixes
|
|
12
|
+
|
|
13
|
+
- Banner: a dismissed banner no longer drops focus, a custom status no longer loses its ARIA role, and the info banner paints again under the neutral theme.
|
|
14
|
+
Dismissing unmounted the focused dismiss button, so focus landed on `<body>` and a keyboard user lost their place in the page. Banner now records where focus entered from and returns it there, the same handoff `ToastViewport` makes for a dismissed toast. Measured in Chromium: `document.activeElement` was `BODY`, and is now the control the user tabbed in from.
|
|
15
|
+
|
|
16
|
+
`BannerStatusMap` is documented as augmentable, but all four status lookups were closed `Record<BannerStatus, ...>` maps. Adding the augmentation the docs show produced four TypeScript errors inside `Banner.tsx` itself, which a consumer cannot fix, and at runtime an unknown status resolved to `undefined` for its icon, its background and its ARIA role, so the banner stopped being a live region at all. The lookups are partial now: an unrecognized status renders with no status fill, no default glyph and `role="status"`.
|
|
17
|
+
|
|
18
|
+
A theme could not reach the banner's radius. `--_banner-radius` was declared in the doc file and in `derivedVarRegistry.ts`, but no rule read it, so a theme's `borderRadius` on the `banner` target expanded into a variable nothing consumed. The four card-silhouette radii read it now, falling back to `--radius-container`.
|
|
19
|
+
|
|
20
|
+
Under `@astryxdesign/theme-neutral` the info banner had no background at all, light or dark: the override set `background-color` directly and forced `--color-accent-muted` to `transparent`, and a plain CSS property written by a theme lands in `@layer astryx-theme`, which StyleX's `@layer priority4` outranks. Info now goes through `--color-accent-muted` like the other three statuses and like the stone theme already did.
|
|
21
|
+
|
|
22
|
+
Also in this change: `children={false}` (the ordinary `{cond && <ul/>}` idiom) no longer produces an expand toggle that opens an empty box, and `description=""` no longer leaves an empty 20px row, both via `isRenderable`; a long unbroken word in the title or description no longer forces the page into horizontal scrolling at a 320px viewport, measured at `document.scrollWidth` 529px before; and the content area's bottom border uses logical `border-block-end` alongside its inline siblings.
|
|
23
|
+
- Count and cut text the way people read it: the TextArea character counter (and its over-limit state and screen-reader announcements) counts user-perceived characters — an emoji is 1, not 2; PowerSearch token truncation no longer cuts an emoji or accented letter in half; Table's auto-generated headers capitalize astral-plane letters correctly; Avatar's initials now use the shared character utilities.
|
|
24
|
+
- ComplexSelector: honor the `sm`, `md`, and `lg` element-height tokens exactly.
|
|
25
|
+
- TreeList's `variant` axis is themeable, and a new guard keeps every extensible axis honest. `TreeListVariantMap` invites theme packages to add variants — its own JSDoc shows the module augmentation — but `themeProps('tree-list', {density})` never passed `variant`, so a custom variant type-checked, rendered, and produced no selector to style. It is passed now, and documented in the target's `visualProps` so `astryx theme build` stops calling it an unknown prop.
|
|
26
|
+
`packages/core/src/theme/extensibleAxes.test.ts` is the third theming-drift guard, beside the ones covering `targets` and `vars`/`derived`. Those two check what a component renders against what it documents; neither looked at the open prop unions, which is why this went unnoticed. For every `*Map` that types a component prop, it now asserts the three places that have to agree: the interface is declared in the index a consumer augments (a re-export is invisible to both module augmentation and the CLI), the prop is reflected through `themeProps`, and it is documented as a visual prop. It reads the TypeScript AST rather than the type checker, and holds the map's OWNER accountable — a component forwarding `actionVariant` or `statusVariant` to the component that owns the map is not separately responsible for it.
|
|
27
|
+
|
|
28
|
+
Registry maps that widen a set of NAMES rather than a visual prop (`IndicatorMap`, `IndicatorFamilyMap`) are out of scope by construction, not by allowlist: the guard only considers maps whose alias types a prop on a `*Props` interface.
|
|
29
|
+
- Security: reject `javascript:`, `vbscript:` and `data:text/html` URLs in the Markdown parser, so untrusted markdown can no longer produce an executable link href or image src; and fix `escapeRegExp` in `ChatTokenizedText`, whose character class closed early and left `]` and `\` unescaped, so token values containing them were injected raw into a `RegExp`
|
|
30
|
+
- `extends` now reaches the CSS. A theme that extended another built a stylesheet holding only the declarations it stated itself: the base's tokens, component overrides and surface rules were all absent, and because each theme is `@scope`d to its own `data-astryx-theme` value, loading the base's stylesheet alongside could not fill the gap either. Every consumer of an inheritance chain silently got stock geometry, elevation and type with a new palette painted over it (#5067). Nothing warned; the loss only showed up by diffing two generated stylesheets token by token.
|
|
31
|
+
The cause was `theme build` shadowing its own inputs. It writes `<name>.js` next to `<name>.ts`, and the loader resolved a plain `./<name>` specifier to that generated artifact before the source — so the second build of a family read the artifact, which carries no `components` and exports `<name>Theme` rather than whatever the source exports. A named import that missed became `extends: undefined`, and `defineTheme` treated an absent base as no base at all. The loader now resolves source extensions first, which is also the resolution the author's TypeScript sees, so the CSS a build emits matches the theme that type-checked.
|
|
32
|
+
|
|
33
|
+
Three things behind it are fixed too, so the failure cannot come back by another route. `defineTheme` **throws** when `extends` is present but is not a theme, naming the likely cause, instead of inheriting nothing — the one behavior change here, and it turns a silent stylesheet into a build error. A theme's `onDark`/`onLight` surfaces and its `__inputTokens` are now inherited like its tokens and components were, so a child no longer reverts its base's inverted-surface customizations to the defaults or loses its `[light, dark]` tuples. And a built theme module now carries the resolved `components` and surfaces alongside its tokens, so extending one — the `./built` subpath every shipped theme exposes — is no longer lossy. `theme build` also stopped hand-picking fields when it re-resolves a plain object theme file, which dropped `extends`, `color` and `syntax` on the way in.
|
|
34
|
+
|
|
35
|
+
An extended theme is flat: everything it inherits is resolved into its own output, and its stylesheet stands alone. Measured on a 14-theme family (one base, 13 palettes extending it): each palette went from 25 custom properties and no component rules to the base's full 175 and 70, with its own colours still winning.
|
|
36
|
+
|
|
37
|
+
#### Contributors
|
|
38
|
+
|
|
39
|
+
Thanks to everyone who contributed to this release:
|
|
40
|
+
|
|
41
|
+
- @AKnassa
|
|
42
|
+
- @cixzhang
|
|
43
|
+
- @ernestt
|
|
44
|
+
- @Sunil56224972
|
|
45
|
+
|
|
46
|
+
---
|
|
47
|
+
|
|
3
48
|
# 0.4.2
|
|
4
49
|
|
|
5
50
|
#### New Features
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAoC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAoC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AA4BrD;;;;;;GAMG;AACH,KAAK,eAAe,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AA6HD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD;AA0DD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,GAAG,EACH,MAAM,EACN,OAAc,EACd,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,EACH,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BA+Pb;yBAlRe,MAAM"}
|
package/dist/Avatar/Avatar.js
CHANGED
|
@@ -25,6 +25,7 @@ import { AvatarSizeContext } from "./AvatarSizeContext.js";
|
|
|
25
25
|
import { useAvatarGroup } from "../AvatarGroup/AvatarGroupContext.js";
|
|
26
26
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
27
27
|
import { themeProps } from "../utils/themeProps.js";
|
|
28
|
+
import { firstCharacter } from "../utils/characters.js";
|
|
28
29
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
29
30
|
import { useTooltip } from "../Tooltip/useTooltip.js";
|
|
30
31
|
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
@@ -194,23 +195,6 @@ const groupDynamicStyles = {
|
|
|
194
195
|
"--x---_avatar-group-overlap": `${offset}px` != null ? `${offset}px` : undefined
|
|
195
196
|
}]
|
|
196
197
|
};
|
|
197
|
-
/**
|
|
198
|
-
* Reuse a single segmenter when the runtime supports Intl.Segmenter.
|
|
199
|
-
*/
|
|
200
|
-
const graphemeSegmenter = typeof Intl.Segmenter === 'function' ? new Intl.Segmenter(undefined, {
|
|
201
|
-
granularity: 'grapheme'
|
|
202
|
-
}) : null;
|
|
203
|
-
|
|
204
|
-
/**
|
|
205
|
-
* Return the first user-perceived character, with a code-point fallback.
|
|
206
|
-
*/
|
|
207
|
-
function firstGrapheme(word) {
|
|
208
|
-
if (graphemeSegmenter) {
|
|
209
|
-
return [...graphemeSegmenter.segment(word)][0]?.segment ?? '';
|
|
210
|
-
}
|
|
211
|
-
return [...word][0] ?? '';
|
|
212
|
-
}
|
|
213
|
-
|
|
214
198
|
/**
|
|
215
199
|
* Generates initials from a name string.
|
|
216
200
|
* Takes the first letter of the first two words.
|
|
@@ -226,9 +210,9 @@ function getInitials(name) {
|
|
|
226
210
|
return '';
|
|
227
211
|
}
|
|
228
212
|
if (words.length === 1) {
|
|
229
|
-
return
|
|
213
|
+
return firstCharacter(words[0]).toUpperCase();
|
|
230
214
|
}
|
|
231
|
-
return (
|
|
215
|
+
return (firstCharacter(words[0]) + firstCharacter(words[words.length - 1])).toUpperCase();
|
|
232
216
|
}
|
|
233
217
|
|
|
234
218
|
/**
|
package/dist/Banner/Banner.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file Banner.tsx
|
|
3
|
-
* @input Uses React useState, Button, Icon (with registry string names), StyleX
|
|
3
|
+
* @input Uses React useState/useRef/useId, Button, Icon (with registry string names), StyleX
|
|
4
4
|
* @output Exports Banner component, BannerProps, BannerStatus, BannerContainer types
|
|
5
5
|
* @position Core implementation; consumed by index.ts, tested by Banner.test.tsx
|
|
6
6
|
*
|
|
@@ -15,6 +15,10 @@
|
|
|
15
15
|
* - Each visual area owns its own border-radius (no overflow:clip on the container)
|
|
16
16
|
* - When children are provided, a collapse/expand toggle button appears in the end area
|
|
17
17
|
*
|
|
18
|
+
* A status added through `BannerStatusMap` augmentation has no entry in the
|
|
19
|
+
* status lookups, so it renders with no status fill, no default glyph and the
|
|
20
|
+
* polite `role="status"` rather than losing its ARIA role entirely.
|
|
21
|
+
*
|
|
18
22
|
* Title and description render as <div> (not <p>): they accept arbitrary
|
|
19
23
|
* ReactNode content, and <p> cannot legally contain block-level children
|
|
20
24
|
* (the HTML parser reparents them, desyncing SSR markup from the hydrated
|
|
@@ -159,7 +163,7 @@ export interface BannerProps extends BaseProps<HTMLDivElement> {
|
|
|
159
163
|
* </Banner>
|
|
160
164
|
* ```
|
|
161
165
|
*/
|
|
162
|
-
export declare function Banner({ status, title, description, icon, isDismissable, onDismiss, endContent, container, elevation, defaultIsExpanded, children, xstyle, className, style, ref, ...rest }: BannerProps): import("react").JSX.Element | null;
|
|
166
|
+
export declare function Banner({ status, title, description, icon, isDismissable, onDismiss, endContent, container, elevation, defaultIsExpanded, children, xstyle, className, style, ref, onFocusCapture, onPointerDownCapture, ...rest }: BannerProps): import("react").JSX.Element | null;
|
|
163
167
|
export declare namespace Banner {
|
|
164
168
|
var displayName: string;
|
|
165
169
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAA0B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,eAAe,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAMjE;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,eAAe,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAiMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,UAAU,EACV,SAAkB,EAClB,SAAkB,EAClB,iBAAyB,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,cAAc,EACd,oBAAoB,EACpB,GAAG,IAAI,EACR,EAAE,WAAW,sCA2Mb;yBA9Ne,MAAM"}
|
package/dist/Banner/Banner.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Banner.tsx
|
|
7
|
-
* @input Uses React useState, Button, Icon (with registry string names), StyleX
|
|
7
|
+
* @input Uses React useState/useRef/useId, Button, Icon (with registry string names), StyleX
|
|
8
8
|
* @output Exports Banner component, BannerProps, BannerStatus, BannerContainer types
|
|
9
9
|
* @position Core implementation; consumed by index.ts, tested by Banner.test.tsx
|
|
10
10
|
*
|
|
@@ -19,6 +19,10 @@
|
|
|
19
19
|
* - Each visual area owns its own border-radius (no overflow:clip on the container)
|
|
20
20
|
* - When children are provided, a collapse/expand toggle button appears in the end area
|
|
21
21
|
*
|
|
22
|
+
* A status added through `BannerStatusMap` augmentation has no entry in the
|
|
23
|
+
* status lookups, so it renders with no status fill, no default glyph and the
|
|
24
|
+
* polite `role="status"` rather than losing its ARIA role entirely.
|
|
25
|
+
*
|
|
22
26
|
* Title and description render as <div> (not <p>): they accept arbitrary
|
|
23
27
|
* ReactNode content, and <p> cannot legally contain block-level children
|
|
24
28
|
* (the HTML parser reparents them, desyncing SSR markup from the hydrated
|
|
@@ -33,13 +37,13 @@
|
|
|
33
37
|
* - /apps/storybook/stories/Banner.stories.tsx (storybook stories)
|
|
34
38
|
* - /packages/cli/assets/templates/blocks/components/Banner/ (showcase blocks)
|
|
35
39
|
*/
|
|
36
|
-
import { useId, useState } from 'react';
|
|
40
|
+
import { useId, useRef, useState } from 'react';
|
|
37
41
|
import * as stylex from '@stylexjs/stylex';
|
|
38
42
|
import { Button } from "../Button/index.js";
|
|
39
43
|
import { Icon } from "../Icon/index.js";
|
|
40
44
|
import "../theme/tokens.stylex.js";
|
|
41
45
|
import { colorVars, spacingVars, radiusVars, fontWeightVars, typeScaleVars, borderVars, durationVars, easeVars, shadowVars } from "../theme/tokens.stylex.js";
|
|
42
|
-
import { mergeProps } from "../utils/index.js";
|
|
46
|
+
import { composeEventHandlers, isRenderable, mergeProps } from "../utils/index.js";
|
|
43
47
|
import { edgeCompSlot } from "../Layout/edgeCompensation.stylex.js";
|
|
44
48
|
import { themeProps } from "../utils/themeProps.js";
|
|
45
49
|
import { useTranslator } from "../i18n/index.js";
|
|
@@ -62,20 +66,21 @@ import { useTranslator } from "../i18n/index.js";
|
|
|
62
66
|
*/
|
|
63
67
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
64
68
|
// =============================================================================
|
|
65
|
-
// Status
|
|
69
|
+
// Status lookups
|
|
66
70
|
// =============================================================================
|
|
67
71
|
|
|
72
|
+
// `BannerStatus` is `keyof BannerStatusMap`, and index.ts documents augmenting
|
|
73
|
+
// that interface to add a status. Every lookup below is therefore partial: an
|
|
74
|
+
// augmented status the library has never heard of falls through to the base
|
|
75
|
+
// treatment (no status fill, no glyph, the polite role) instead of resolving to
|
|
76
|
+
// `undefined` and dropping the ARIA role along with it.
|
|
77
|
+
|
|
68
78
|
const defaultIconNames = {
|
|
69
79
|
info: 'info',
|
|
70
80
|
warning: 'warning',
|
|
71
81
|
error: 'error',
|
|
72
82
|
success: 'success'
|
|
73
83
|
};
|
|
74
|
-
|
|
75
|
-
// =============================================================================
|
|
76
|
-
// Status → ARIA role mapping
|
|
77
|
-
// =============================================================================
|
|
78
|
-
|
|
79
84
|
const statusRole = {
|
|
80
85
|
info: 'status',
|
|
81
86
|
warning: 'alert',
|
|
@@ -83,10 +88,8 @@ const statusRole = {
|
|
|
83
88
|
success: 'status'
|
|
84
89
|
};
|
|
85
90
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
// =============================================================================
|
|
89
|
-
|
|
91
|
+
/** An unknown status is not urgent by definition, so it announces politely. */
|
|
92
|
+
const FALLBACK_ROLE = 'status';
|
|
90
93
|
const statusIconColor = {
|
|
91
94
|
info: 'accent',
|
|
92
95
|
warning: 'warning',
|
|
@@ -106,7 +109,7 @@ const styles = {
|
|
|
106
109
|
$$css: true
|
|
107
110
|
},
|
|
108
111
|
rootElevatedCard: {
|
|
109
|
-
kaIpWk: "
|
|
112
|
+
kaIpWk: "x1vf2byn",
|
|
110
113
|
$$css: true
|
|
111
114
|
},
|
|
112
115
|
header: {
|
|
@@ -118,12 +121,12 @@ const styles = {
|
|
|
118
121
|
$$css: true
|
|
119
122
|
},
|
|
120
123
|
headerCardStandalone: {
|
|
121
|
-
kaIpWk: "
|
|
124
|
+
kaIpWk: "x1vf2byn",
|
|
122
125
|
$$css: true
|
|
123
126
|
},
|
|
124
127
|
headerCardWithContent: {
|
|
125
|
-
krdFHd: "
|
|
126
|
-
kfmiAY: "
|
|
128
|
+
krdFHd: "xwxb7qi",
|
|
129
|
+
kfmiAY: "x13nour3",
|
|
127
130
|
kVL7Gh: "xbiv7yw",
|
|
128
131
|
kT0f0o: "x16uus16",
|
|
129
132
|
$$css: true
|
|
@@ -171,6 +174,15 @@ const statusStyles = {
|
|
|
171
174
|
}
|
|
172
175
|
};
|
|
173
176
|
|
|
177
|
+
/**
|
|
178
|
+
* Narrows an augmented `BannerStatus` to one the style map actually carries,
|
|
179
|
+
* so an unknown status renders with no status fill rather than crashing the
|
|
180
|
+
* lookup. StyleX style maps cannot be declared `Partial`, hence the guard.
|
|
181
|
+
*/
|
|
182
|
+
function hasStatusStyle(status) {
|
|
183
|
+
return Object.prototype.hasOwnProperty.call(statusStyles, status);
|
|
184
|
+
}
|
|
185
|
+
|
|
174
186
|
// Resting elevation for the banner. Applied to the root so the shadow wraps
|
|
175
187
|
// the whole banner (header + optional content). 'none' is the default and
|
|
176
188
|
// leaves the layout-only root untouched. For the `card` container the root is
|
|
@@ -260,51 +272,80 @@ export function Banner({
|
|
|
260
272
|
className,
|
|
261
273
|
style,
|
|
262
274
|
ref,
|
|
275
|
+
onFocusCapture,
|
|
276
|
+
onPointerDownCapture,
|
|
263
277
|
...rest
|
|
264
278
|
}) {
|
|
265
279
|
const t = useTranslator();
|
|
266
280
|
const [isDismissed, setIsDismissed] = useState(false);
|
|
267
281
|
const [isExpanded, setIsExpanded] = useState(defaultIsExpanded);
|
|
282
|
+
// The element focus came from before it entered the banner. Dismissing
|
|
283
|
+
// unmounts the whole banner, dismiss button included, so without a handoff
|
|
284
|
+
// the browser drops focus to <body> and a keyboard user loses their place.
|
|
285
|
+
// ToastViewport makes the same handoff when a focused toast is dismissed.
|
|
286
|
+
const focusOriginRef = useRef(null);
|
|
268
287
|
// Links the expand/collapse toggle to the content region it shows/hides so
|
|
269
288
|
// assistive tech can move from the button to its controlled content
|
|
270
289
|
// (disclosure pattern). The region is conditionally rendered, so aria-controls
|
|
271
290
|
// below is set only while it's mounted to avoid a dangling reference.
|
|
272
291
|
const contentId = useId();
|
|
273
292
|
const defaultIconName = defaultIconNames[status];
|
|
274
|
-
const role = statusRole[status];
|
|
293
|
+
const role = statusRole[status] ?? FALLBACK_ROLE;
|
|
275
294
|
const iconColor = statusIconColor[status];
|
|
276
|
-
const hasChildren = children
|
|
295
|
+
const hasChildren = isRenderable(children);
|
|
277
296
|
if (isDismissed) {
|
|
278
297
|
return null;
|
|
279
298
|
}
|
|
299
|
+
|
|
300
|
+
// `focusin` reports the element focus came *from* as relatedTarget; on
|
|
301
|
+
// pointerdown focus has not moved yet, so document.activeElement is it.
|
|
302
|
+
const rememberFocusOrigin = (candidate, root) => {
|
|
303
|
+
if (candidate instanceof HTMLElement && candidate !== document.body && !root.contains(candidate)) {
|
|
304
|
+
focusOriginRef.current = candidate;
|
|
305
|
+
}
|
|
306
|
+
};
|
|
307
|
+
const handleFocusCapture = event => {
|
|
308
|
+
rememberFocusOrigin(event.relatedTarget, event.currentTarget);
|
|
309
|
+
};
|
|
310
|
+
const handlePointerDownCapture = event => {
|
|
311
|
+
rememberFocusOrigin(document.activeElement, event.currentTarget);
|
|
312
|
+
};
|
|
280
313
|
const handleDismiss = () => {
|
|
314
|
+
const origin = focusOriginRef.current;
|
|
281
315
|
setIsDismissed(true);
|
|
282
316
|
onDismiss?.();
|
|
317
|
+
// Move focus before React removes the subtree, so the browser never has a
|
|
318
|
+
// frame where the focused node is gone.
|
|
319
|
+
if (origin?.isConnected) {
|
|
320
|
+
origin.focus();
|
|
321
|
+
}
|
|
283
322
|
};
|
|
284
323
|
const handleToggleExpand = () => {
|
|
285
324
|
setIsExpanded(prev => !prev);
|
|
286
325
|
};
|
|
287
326
|
|
|
288
327
|
// Show the end area if there are actions, dismiss, or a collapsible toggle
|
|
289
|
-
const showEndArea = endContent
|
|
328
|
+
const showEndArea = isRenderable(endContent) || isDismissable || hasChildren;
|
|
290
329
|
// Center items vertically when there's only a title (no description)
|
|
291
330
|
// and the banner has action buttons
|
|
292
|
-
const hasActions = endContent
|
|
293
|
-
const isSingleLine = description
|
|
331
|
+
const hasActions = isRenderable(endContent) || isDismissable;
|
|
332
|
+
const isSingleLine = !isRenderable(description) && hasActions;
|
|
294
333
|
const showContent = hasChildren && isExpanded;
|
|
295
334
|
const isCard = container === 'card';
|
|
296
335
|
return /*#__PURE__*/_jsxs("div", {
|
|
297
336
|
ref: ref,
|
|
298
337
|
role: role,
|
|
338
|
+
onFocusCapture: composeEventHandlers(onFocusCapture, handleFocusCapture),
|
|
339
|
+
onPointerDownCapture: composeEventHandlers(onPointerDownCapture, handlePointerDownCapture),
|
|
299
340
|
...mergeProps(stylex.props(styles.root, elevationStyles[elevation], isCard && elevation !== 'none' && styles.rootElevatedCard, xstyle), className, style),
|
|
300
341
|
...rest,
|
|
301
342
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
302
343
|
...mergeProps(themeProps('banner', {
|
|
303
344
|
container,
|
|
304
345
|
status
|
|
305
|
-
}), stylex.props(styles.header, isSingleLine && styles.headerCentered, statusStyles[status], isCard && (showContent ? styles.headerCardWithContent : styles.headerCardStandalone))),
|
|
346
|
+
}), stylex.props(styles.header, isSingleLine && styles.headerCentered, hasStatusStyle(status) && statusStyles[status], isCard && (showContent ? styles.headerCardWithContent : styles.headerCardStandalone))),
|
|
306
347
|
children: [/*#__PURE__*/_jsx("div", {
|
|
307
|
-
...(icon
|
|
348
|
+
...(isRenderable(icon) ? mergeProps(themeProps('banner-icon', {
|
|
308
349
|
status
|
|
309
350
|
}), {
|
|
310
351
|
className: "x78zum5 x6s0dn4 x2lah0s"
|
|
@@ -312,7 +353,7 @@ export function Banner({
|
|
|
312
353
|
className: "x78zum5 x6s0dn4 x2lah0s"
|
|
313
354
|
}),
|
|
314
355
|
"aria-hidden": "true",
|
|
315
|
-
children: icon != null ?
|
|
356
|
+
children: isRenderable(icon) ? icon : defaultIconName != null ?
|
|
316
357
|
/*#__PURE__*/
|
|
317
358
|
// Applied to the status <Icon> itself rather than the wrapper, so
|
|
318
359
|
// the element that paints the glyph is the element a theme
|
|
@@ -325,19 +366,19 @@ export function Banner({
|
|
|
325
366
|
...themeProps('banner-icon', {
|
|
326
367
|
status
|
|
327
368
|
})
|
|
328
|
-
})
|
|
369
|
+
}) : null
|
|
329
370
|
}), /*#__PURE__*/_jsxs("div", {
|
|
330
371
|
...{
|
|
331
372
|
className: "x78zum5 xdt5ytf xxhr3t x98rzlu xeuugli"
|
|
332
373
|
},
|
|
333
374
|
children: [/*#__PURE__*/_jsx("div", {
|
|
334
375
|
...{
|
|
335
|
-
className: "x1ghz6dp xjb2p0i xcr08ib x2mo6ok x1kq96og x1tgivj0"
|
|
376
|
+
className: "x1ghz6dp xjb2p0i xcr08ib x2mo6ok x1kq96og x1tgivj0 xj0a0fe"
|
|
336
377
|
},
|
|
337
378
|
children: title
|
|
338
|
-
}), description
|
|
379
|
+
}), isRenderable(description) && /*#__PURE__*/_jsx("div", {
|
|
339
380
|
...{
|
|
340
|
-
className: "x1ghz6dp xjb2p0i x141an7d x1sodnla x1ltkj2j xv1l7n4"
|
|
381
|
+
className: "x1ghz6dp xjb2p0i x141an7d x1sodnla x1ltkj2j xv1l7n4 xj0a0fe"
|
|
341
382
|
},
|
|
342
383
|
children: description
|
|
343
384
|
})]
|
|
@@ -382,7 +423,7 @@ export function Banner({
|
|
|
382
423
|
className: "x1de1mus x8o8v82 x1pzlopt xgbv0en xw8tdv1 x92x3c3 x1t7ytsu x18b5jzi x1q0q8m5 x1j92z86 x1gejf6u xw8gpjh"
|
|
383
424
|
},
|
|
384
425
|
1: {
|
|
385
|
-
className: "x1de1mus x8o8v82 x1pzlopt xgbv0en xw8tdv1 x92x3c3 x1t7ytsu x18b5jzi x1q0q8m5 x1j92z86 x1gejf6u xw8gpjh
|
|
426
|
+
className: "x1de1mus x8o8v82 x1pzlopt xgbv0en xw8tdv1 x92x3c3 x1t7ytsu x18b5jzi x1q0q8m5 x1j92z86 x1gejf6u xw8gpjh x1k5g1gk x1eprgri"
|
|
386
427
|
}
|
|
387
428
|
}[!!isCard << 0]),
|
|
388
429
|
children: children
|
package/dist/Banner/index.d.ts
CHANGED
|
@@ -7,35 +7,37 @@
|
|
|
7
7
|
* SYNC: When modified, update this header and /packages/core/src/Banner/Banner.doc.mjs
|
|
8
8
|
*/
|
|
9
9
|
/**
|
|
10
|
-
* Extensible
|
|
10
|
+
* Extensible container map for Banner.
|
|
11
11
|
*
|
|
12
|
-
* Theme packages can add custom
|
|
12
|
+
* Theme packages can add custom container types via TypeScript module augmentation:
|
|
13
13
|
* @example
|
|
14
14
|
* ```
|
|
15
15
|
* declare module '@astryxdesign/core/Banner' {
|
|
16
|
-
* interface
|
|
17
|
-
* '
|
|
16
|
+
* interface BannerContainerMap {
|
|
17
|
+
* 'floating': true;
|
|
18
18
|
* }
|
|
19
19
|
* }
|
|
20
20
|
* ```
|
|
21
21
|
*/
|
|
22
|
+
export interface BannerContainerMap {
|
|
23
|
+
card: true;
|
|
24
|
+
section: true;
|
|
25
|
+
}
|
|
22
26
|
/**
|
|
23
|
-
* Extensible
|
|
27
|
+
* Extensible status map for Banner.
|
|
24
28
|
*
|
|
25
|
-
* Theme packages can add custom
|
|
29
|
+
* Theme packages can add custom statuses via TypeScript module augmentation.
|
|
30
|
+
* A status the library does not know falls through to the base treatment: no
|
|
31
|
+
* status fill, no default glyph, and `role="status"`.
|
|
26
32
|
* @example
|
|
27
33
|
* ```
|
|
28
34
|
* declare module '@astryxdesign/core/Banner' {
|
|
29
|
-
* interface
|
|
30
|
-
* '
|
|
35
|
+
* interface BannerStatusMap {
|
|
36
|
+
* 'neutral': true;
|
|
31
37
|
* }
|
|
32
38
|
* }
|
|
33
39
|
* ```
|
|
34
40
|
*/
|
|
35
|
-
export interface BannerContainerMap {
|
|
36
|
-
card: true;
|
|
37
|
-
section: true;
|
|
38
|
-
}
|
|
39
41
|
export interface BannerStatusMap {
|
|
40
42
|
info: true;
|
|
41
43
|
warning: true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Banner/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH;;;;;;;;;;;;GAYG;AACH
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Banner/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;CACf;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,IAAI,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,IAAI,CAAC;CACf;AAED,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,YAAY,EAAC,WAAW,EAAE,YAAY,EAAE,eAAe,EAAC,MAAM,UAAU,CAAC"}
|
package/dist/Banner/index.js
CHANGED
|
@@ -12,27 +12,29 @@
|
|
|
12
12
|
*/
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
|
-
* Extensible
|
|
15
|
+
* Extensible container map for Banner.
|
|
16
16
|
*
|
|
17
|
-
* Theme packages can add custom
|
|
17
|
+
* Theme packages can add custom container types via TypeScript module augmentation:
|
|
18
18
|
* @example
|
|
19
19
|
* ```
|
|
20
20
|
* declare module '@astryxdesign/core/Banner' {
|
|
21
|
-
* interface
|
|
22
|
-
* '
|
|
21
|
+
* interface BannerContainerMap {
|
|
22
|
+
* 'floating': true;
|
|
23
23
|
* }
|
|
24
24
|
* }
|
|
25
25
|
* ```
|
|
26
26
|
*/
|
|
27
27
|
/**
|
|
28
|
-
* Extensible
|
|
28
|
+
* Extensible status map for Banner.
|
|
29
29
|
*
|
|
30
|
-
* Theme packages can add custom
|
|
30
|
+
* Theme packages can add custom statuses via TypeScript module augmentation.
|
|
31
|
+
* A status the library does not know falls through to the base treatment: no
|
|
32
|
+
* status fill, no default glyph, and `role="status"`.
|
|
31
33
|
* @example
|
|
32
34
|
* ```
|
|
33
35
|
* declare module '@astryxdesign/core/Banner' {
|
|
34
|
-
* interface
|
|
35
|
-
* '
|
|
36
|
+
* interface BannerStatusMap {
|
|
37
|
+
* 'neutral': true;
|
|
36
38
|
* }
|
|
37
39
|
* }
|
|
38
40
|
* ```
|
|
@@ -45,7 +45,7 @@ function isCustomToken(token) {
|
|
|
45
45
|
return 'render' in token && typeof token.render === 'function';
|
|
46
46
|
}
|
|
47
47
|
function escapeRegExp(str) {
|
|
48
|
-
return str.replace(/[.*+?^${}()|[
|
|
48
|
+
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
// =============================================================================
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file ComplexSelector.tsx
|
|
3
|
-
* @input Uses React, StyleX, Field, usePopover
|
|
4
|
-
* @output Exports
|
|
3
|
+
* @input Uses React, StyleX, Field, Icon slots, Layer positioning, and usePopover
|
|
4
|
+
* @output Exports a rich-selector shell with exact token-sized input and ghost triggers, plus an imperative open/close handle
|
|
5
5
|
* @position Core implementation; consumed by index.ts
|
|
6
6
|
*
|
|
7
7
|
* SYNC: When modified, update:
|
|
@@ -9,12 +9,16 @@
|
|
|
9
9
|
* - /packages/core/src/ComplexSelector/ComplexSelector.test.tsx
|
|
10
10
|
* - /packages/core/src/ComplexSelector/index.ts
|
|
11
11
|
* - /apps/storybook/stories/ComplexSelector.stories.tsx
|
|
12
|
+
* - /packages/cli/assets/templates/blocks/components/ComplexSelector/ (showcase blocks)
|
|
12
13
|
*/
|
|
13
14
|
import React, { type ReactNode } from 'react';
|
|
14
15
|
import type { StyleXStyles } from '@stylexjs/stylex';
|
|
15
16
|
import type { BaseProps } from '../BaseProps';
|
|
16
17
|
import { type FieldStatusVariant } from '../Field';
|
|
18
|
+
import { type IconType } from '../Icon';
|
|
19
|
+
import type { LayerAlignment, LayerPlacement } from '../Layer/useLayer';
|
|
17
20
|
import type { SizeValue } from '../utils/types';
|
|
21
|
+
export type ComplexSelectorVariant = 'input' | 'ghost';
|
|
18
22
|
export type ComplexSelectorSize = 'sm' | 'md' | 'lg';
|
|
19
23
|
export interface ComplexSelectorRenderState {
|
|
20
24
|
/** Whether the selector surface is open. */
|
|
@@ -26,6 +30,24 @@ export interface ComplexSelectorRenderState {
|
|
|
26
30
|
/** ID of the popup content container. */
|
|
27
31
|
contentId: string;
|
|
28
32
|
}
|
|
33
|
+
/**
|
|
34
|
+
* Imperative control surface for ComplexSelector, accessed via the `handleRef`
|
|
35
|
+
* prop. Methods drive the same popover machinery as the built-in trigger, so
|
|
36
|
+
* they respect focus restoration, light dismiss, and Escape. Prefer these
|
|
37
|
+
* callbacks over mirroring open state in the parent — the selector owns its
|
|
38
|
+
* visibility, and imperative calls avoid the focus-management pitfalls of
|
|
39
|
+
* syncing an external `isOpen` prop.
|
|
40
|
+
*/
|
|
41
|
+
export interface ComplexSelectorHandle {
|
|
42
|
+
/** Open the selector surface. No-op when disabled or already open. */
|
|
43
|
+
open(): void;
|
|
44
|
+
/** Close the selector surface. Restores focus to the trigger. */
|
|
45
|
+
close(): void;
|
|
46
|
+
/** Toggle the selector surface open or closed. */
|
|
47
|
+
toggle(): void;
|
|
48
|
+
/** Whether the selector surface is currently open. Reads live state. */
|
|
49
|
+
isOpen(): boolean;
|
|
50
|
+
}
|
|
29
51
|
export interface ComplexSelectorStatus {
|
|
30
52
|
type: 'warning' | 'error' | 'success';
|
|
31
53
|
message?: string;
|
|
@@ -65,10 +87,22 @@ export interface ComplexSelectorProps<Value> extends Omit<BaseProps<HTMLDivEleme
|
|
|
65
87
|
labelTooltip?: string;
|
|
66
88
|
/** Trigger and field size. */
|
|
67
89
|
size?: ComplexSelectorSize;
|
|
90
|
+
/** Visual trigger style. Ghost matches toolbar buttons. */
|
|
91
|
+
variant?: ComplexSelectorVariant;
|
|
92
|
+
/** Icon displayed at the start of the trigger. */
|
|
93
|
+
startIcon?: ReactNode | IconType;
|
|
68
94
|
/** Width of the field. */
|
|
69
95
|
width?: SizeValue;
|
|
70
96
|
/** Popup placement. */
|
|
71
|
-
placement?:
|
|
97
|
+
placement?: LayerPlacement;
|
|
98
|
+
/** Popup alignment along the placement axis. */
|
|
99
|
+
alignment?: LayerAlignment;
|
|
100
|
+
/**
|
|
101
|
+
* Imperative handle for programmatic open/close control. Exposes open,
|
|
102
|
+
* close, toggle, and the isOpen query. Use this instead of mirroring open
|
|
103
|
+
* state in the parent — the selector owns its visibility.
|
|
104
|
+
*/
|
|
105
|
+
handleRef?: React.Ref<ComplexSelectorHandle>;
|
|
72
106
|
/** StyleX styles for the popup content container. */
|
|
73
107
|
contentXstyle?: StyleXStyles;
|
|
74
108
|
/** Test ID for the trigger container. */
|
|
@@ -101,7 +135,7 @@ export interface ComplexSelectorProps<Value> extends Omit<BaseProps<HTMLDivEleme
|
|
|
101
135
|
* </ComplexSelector>
|
|
102
136
|
* ```
|
|
103
137
|
*/
|
|
104
|
-
export declare function ComplexSelector<Value>({ label, value, onChange, changeAction, children, triggerLabel, placeholder: placeholderFromProps, isLabelHidden, description, isOptional, isRequired, isDisabled, isLoading, status, statusVariant, labelTooltip, size, width, placement, contentXstyle, xstyle, className, style, 'data-testid': testId, onClick: onClickProp, ...props }: ComplexSelectorProps<Value>): React.JSX.Element;
|
|
138
|
+
export declare function ComplexSelector<Value>({ label, value, onChange, changeAction, children, triggerLabel, placeholder: placeholderFromProps, isLabelHidden, description, isOptional, isRequired, isDisabled, isLoading, status, statusVariant, labelTooltip, size, variant, startIcon, width, placement, alignment, handleRef, contentXstyle, xstyle, className, style, 'data-testid': testId, onClick: onClickProp, ...props }: ComplexSelectorProps<Value>): React.JSX.Element;
|
|
105
139
|
export declare namespace ComplexSelector {
|
|
106
140
|
var displayName: string;
|
|
107
141
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"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"}
|