@astryxdesign/core 0.4.7-canary.581f844 → 0.4.7-canary.5da424d
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/Banner/Banner.d.ts +40 -15
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +51 -18
- package/dist/ButtonGroup/ButtonGroup.d.ts +5 -1
- package/dist/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/dist/ButtonGroup/ButtonGroup.js +14 -3
- package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
- package/dist/Chat/ChatComposerInput.js +2 -3
- package/dist/Chat/ChatTokenizedText.d.ts +2 -0
- package/dist/Chat/ChatTokenizedText.d.ts.map +1 -1
- package/dist/Chat/ChatTokenizedText.js +11 -6
- package/dist/Chat/useChatComposerTokens.js +1 -1
- package/dist/DateTimeInput/DateTimeInput.d.ts +21 -1
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +404 -11
- package/dist/DateTimeInput/index.d.ts +1 -1
- package/dist/DateTimeInput/index.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +1 -1
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchEditPopover.js +20 -6
- package/dist/Spinner/Spinner.d.ts +3 -3
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +130 -78
- package/dist/TabList/Tab.d.ts +15 -2
- package/dist/TabList/Tab.d.ts.map +1 -1
- package/dist/TabList/Tab.js +32 -7
- package/dist/TabList/TabList.d.ts +46 -7
- package/dist/TabList/TabList.d.ts.map +1 -1
- package/dist/TabList/TabList.js +351 -21
- package/dist/TabList/TabListContext.d.ts +11 -1
- package/dist/TabList/TabListContext.d.ts.map +1 -1
- package/dist/TabList/TabListContext.js +11 -2
- package/dist/TabList/index.d.ts +2 -2
- package/dist/TabList/index.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +8 -0
- package/dist/astryx.css +29 -1
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js +8 -4
- package/dist/utils/sharedResizeObserver.d.ts.map +1 -1
- package/dist/utils/sharedResizeObserver.js +10 -1
- package/locales/en.json +4 -0
- package/locales/pseudo.json +3 -0
- package/package.json +2 -2
- package/src/Banner/Banner.doc.mjs +13 -11
- package/src/Banner/Banner.test.tsx +102 -15
- package/src/Banner/Banner.tsx +72 -25
- package/src/ButtonGroup/ButtonGroup.doc.mjs +3 -0
- package/src/ButtonGroup/ButtonGroup.test.tsx +206 -0
- package/src/ButtonGroup/ButtonGroup.tsx +12 -2
- package/src/Chat/ChatComposerInput.tsx +5 -1
- package/src/Chat/ChatTokenizedText.tsx +17 -10
- package/src/Chat/useChatComposerTokens.ts +1 -1
- package/src/DateTimeInput/DateTimeInput.doc.mjs +18 -0
- package/src/DateTimeInput/DateTimeInput.test.tsx +1088 -0
- package/src/DateTimeInput/DateTimeInput.tsx +554 -22
- package/src/DateTimeInput/index.ts +1 -0
- package/src/Markdown/Markdown.doc.mjs +5 -0
- package/src/Markdown/parser.perf.test.ts +37 -5
- package/src/MultiSelector/MultiSelector.test.tsx +1 -0
- package/src/PowerSearch/PowerSearch.tsx +6 -1
- package/src/PowerSearch/PowerSearchEditPopover.test.tsx +201 -0
- package/src/PowerSearch/PowerSearchEditPopover.tsx +17 -2
- package/src/Selector/Selector.test.tsx +24 -1
- package/src/Spinner/Spinner.test.tsx +147 -1
- package/src/Spinner/Spinner.tsx +120 -101
- package/src/TabList/Tab.doc.mjs +13 -1
- package/src/TabList/Tab.tsx +67 -7
- package/src/TabList/TabList.doc.mjs +22 -6
- package/src/TabList/TabList.test.tsx +559 -0
- package/src/TabList/TabList.tsx +488 -21
- package/src/TabList/TabListContext.ts +13 -2
- package/src/TabList/index.ts +6 -2
- package/src/Typeahead/BaseTypeahead.tsx +8 -0
- package/src/Typeahead/Typeahead.test.tsx +49 -0
- package/src/hooks/useFocusTrap.test.tsx +14 -0
- package/src/hooks/useFocusTrap.ts +8 -4
- package/src/utils/sharedResizeObserver.ts +10 -2
- package/src/__tests__/complexComponentContract.test.tsx +0 -81
package/dist/Banner/Banner.d.ts
CHANGED
|
@@ -1,19 +1,23 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file Banner.tsx
|
|
3
|
-
* @input Uses React useState/useRef/useId, Button, Icon (with registry string names), StyleX
|
|
3
|
+
* @input Uses React useState/useRef/useId, useCollapsible, 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
|
*
|
|
7
7
|
* Visual structure:
|
|
8
8
|
* - Root container: layout-only wrapper (flex column), no visual styling, no theme target
|
|
9
9
|
* - Header area (themeProps 'banner'): colored status background with icon, title, description, actions, dismiss
|
|
10
|
-
* - Content area (themeProps 'banner-content'):
|
|
10
|
+
* - Content area (themeProps 'banner-content'): card background for additional content (children)
|
|
11
11
|
* - Status icon (themeProps 'banner-icon'): the target rides on the default
|
|
12
12
|
* <Icon> itself — the element that paints — so 'status:X' overrides reach
|
|
13
13
|
* the glyph (#4166); for a custom `icon` node it stays on the layout wrapper
|
|
14
14
|
* - No left border accent — color is expressed through the full header background
|
|
15
15
|
* - Each visual area owns its own border-radius (no overflow:clip on the container)
|
|
16
|
-
* -
|
|
16
|
+
* - Children are collapsible by default: a toggle appears in the header end
|
|
17
|
+
* area and the content starts closed. `collapsible={false}` opts out and
|
|
18
|
+
* pins the content open with no toggle. The whole collapse axis (enabled /
|
|
19
|
+
* default / controlled) lives on that one prop and is driven by the shared
|
|
20
|
+
* `useCollapsible` hook rather than local state.
|
|
17
21
|
*
|
|
18
22
|
* A status added through `BannerStatusMap` augmentation has no entry in the
|
|
19
23
|
* status lookups, so it renders with no status fill, no default glyph and the
|
|
@@ -35,6 +39,7 @@
|
|
|
35
39
|
*/
|
|
36
40
|
import { type ReactNode } from 'react';
|
|
37
41
|
import type { BaseProps } from '../BaseProps';
|
|
42
|
+
import type { CollapsibleConfig } from '../Collapsible/useCollapsible';
|
|
38
43
|
import type { Elevation } from '../utils/types';
|
|
39
44
|
import type { BannerStatusMap, BannerContainerMap } from './index';
|
|
40
45
|
/**
|
|
@@ -109,15 +114,29 @@ export interface BannerProps extends BaseProps<HTMLDivElement> {
|
|
|
109
114
|
*/
|
|
110
115
|
elevation?: Elevation;
|
|
111
116
|
/**
|
|
112
|
-
* Whether the content area (children)
|
|
113
|
-
*
|
|
114
|
-
*
|
|
117
|
+
* Whether the content area (children) sits behind an expand/collapse toggle
|
|
118
|
+
* in the header. On by default, so a banner with children behaves as it
|
|
119
|
+
* always has.
|
|
120
|
+
*
|
|
121
|
+
* - omitted / `true` — collapsible, starts collapsed
|
|
122
|
+
* - `{defaultIsOpen: true}` — collapsible, starts open
|
|
123
|
+
* - `{isOpen, onOpenChange}` — controlled by the consumer
|
|
124
|
+
* - `false` — not collapsible: children are always visible, with no toggle,
|
|
125
|
+
* no `aria-expanded`, and a content region that stays mounted
|
|
126
|
+
*
|
|
127
|
+
* Takes the shared `CollapsibleConfig` so a banner's disclosure is
|
|
128
|
+
* configured exactly like `Collapsible`'s, rather than through a
|
|
129
|
+
* Banner-only vocabulary. Banner's default differs from the hook's on one
|
|
130
|
+
* point — it starts closed, not open — because a banner's message lives in
|
|
131
|
+
* its header and the content is supplementary.
|
|
132
|
+
*
|
|
133
|
+
* @default true
|
|
115
134
|
*/
|
|
116
|
-
|
|
135
|
+
collapsible?: boolean | CollapsibleConfig;
|
|
117
136
|
/**
|
|
118
|
-
* Extra content rendered below the header in a
|
|
137
|
+
* Extra content rendered below the header in a card-background area.
|
|
119
138
|
* Use for rich content like lists, links, or detailed information.
|
|
120
|
-
*
|
|
139
|
+
* Collapsed behind a toggle unless `collapsible={false}`.
|
|
121
140
|
*/
|
|
122
141
|
children?: ReactNode;
|
|
123
142
|
}
|
|
@@ -126,11 +145,12 @@ export interface BannerProps extends BaseProps<HTMLDivElement> {
|
|
|
126
145
|
*
|
|
127
146
|
* Two-part visual structure:
|
|
128
147
|
* - Header: colored status background with icon, title, description, and actions
|
|
129
|
-
* - Content (optional):
|
|
148
|
+
* - Content (optional): card background area for additional rich content
|
|
130
149
|
*
|
|
131
|
-
* When children are provided, a
|
|
132
|
-
*
|
|
133
|
-
*
|
|
150
|
+
* When children are provided, a chevron toggle appears in the header end area
|
|
151
|
+
* (to the left of the dismiss button if present) and the content starts
|
|
152
|
+
* collapsed. Pass `collapsible={false}` for content that is always visible,
|
|
153
|
+
* or a config object to change the initial state or control it.
|
|
134
154
|
*
|
|
135
155
|
* Manages its own dismissed state internally — the banner hides on dismiss
|
|
136
156
|
* even if `onDismiss` is not provided, so product teams don't need to wire
|
|
@@ -161,12 +181,17 @@ export interface BannerProps extends BaseProps<HTMLDivElement> {
|
|
|
161
181
|
* <Banner
|
|
162
182
|
* status="warning"
|
|
163
183
|
* title="Configuration changes"
|
|
164
|
-
*
|
|
184
|
+
* collapsible={{defaultIsOpen: true}}>
|
|
165
185
|
* <p>Details here...</p>
|
|
166
186
|
* </Banner>
|
|
187
|
+
* <Banner status="error" title="3 fields need attention" collapsible={false}>
|
|
188
|
+
* <ul>
|
|
189
|
+
* <li>Email address is invalid</li>
|
|
190
|
+
* </ul>
|
|
191
|
+
* </Banner>
|
|
167
192
|
* ```
|
|
168
193
|
*/
|
|
169
|
-
export declare function Banner({ status, title, description, icon, isDismissable, onDismiss, endContent, container, elevation,
|
|
194
|
+
export declare function Banner({ status, title, description, icon, isDismissable, onDismiss, endContent, container, elevation, collapsible, children, xstyle, className, style, ref, onFocusCapture, onPointerDownCapture, ...rest }: BannerProps): import("react").JSX.Element | null;
|
|
170
195
|
export declare namespace Banner {
|
|
171
196
|
var displayName: string;
|
|
172
197
|
}
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH,OAAO,EAA0B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgB5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAC;AAErE,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;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;;;;OAkBG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC;IAC1C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAmND;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,KAAK,EACL,WAAW,EACX,IAAI,EACJ,aAAqB,EACrB,SAAS,EACT,UAAU,EACV,SAAkB,EAClB,SAAkB,EAClB,WAAkB,EAClB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,cAAc,EACd,oBAAoB,EACpB,GAAG,IAAI,EACR,EAAE,WAAW,sCAoOb;yBAvPe,MAAM"}
|
package/dist/Banner/Banner.js
CHANGED
|
@@ -4,20 +4,24 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file Banner.tsx
|
|
7
|
-
* @input Uses React useState/useRef/useId, Button, Icon (with registry string names), StyleX
|
|
7
|
+
* @input Uses React useState/useRef/useId, useCollapsible, 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
|
*
|
|
11
11
|
* Visual structure:
|
|
12
12
|
* - Root container: layout-only wrapper (flex column), no visual styling, no theme target
|
|
13
13
|
* - Header area (themeProps 'banner'): colored status background with icon, title, description, actions, dismiss
|
|
14
|
-
* - Content area (themeProps 'banner-content'):
|
|
14
|
+
* - Content area (themeProps 'banner-content'): card background for additional content (children)
|
|
15
15
|
* - Status icon (themeProps 'banner-icon'): the target rides on the default
|
|
16
16
|
* <Icon> itself — the element that paints — so 'status:X' overrides reach
|
|
17
17
|
* the glyph (#4166); for a custom `icon` node it stays on the layout wrapper
|
|
18
18
|
* - No left border accent — color is expressed through the full header background
|
|
19
19
|
* - Each visual area owns its own border-radius (no overflow:clip on the container)
|
|
20
|
-
* -
|
|
20
|
+
* - Children are collapsible by default: a toggle appears in the header end
|
|
21
|
+
* area and the content starts closed. `collapsible={false}` opts out and
|
|
22
|
+
* pins the content open with no toggle. The whole collapse axis (enabled /
|
|
23
|
+
* default / controlled) lives on that one prop and is driven by the shared
|
|
24
|
+
* `useCollapsible` hook rather than local state.
|
|
21
25
|
*
|
|
22
26
|
* A status added through `BannerStatusMap` augmentation has no entry in the
|
|
23
27
|
* status lookups, so it renders with no status fill, no default glyph and the
|
|
@@ -43,6 +47,7 @@ import { Button } from "../Button/index.js";
|
|
|
43
47
|
import { Icon } from "../Icon/index.js";
|
|
44
48
|
import "../theme/tokens.stylex.js";
|
|
45
49
|
import { colorVars, spacingVars, radiusVars, fontWeightVars, typeScaleVars, borderVars, durationVars, easeVars, shadowVars } from "../theme/tokens.stylex.js";
|
|
50
|
+
import { useCollapsible } from "../Collapsible/useCollapsible.js";
|
|
46
51
|
import { composeEventHandlers, isRenderable, mergeProps } from "../utils/index.js";
|
|
47
52
|
import { edgeCompSlot } from "../Layout/edgeCompensation.stylex.js";
|
|
48
53
|
import { themeProps } from "../utils/themeProps.js";
|
|
@@ -221,11 +226,12 @@ const elevationStyles = {
|
|
|
221
226
|
*
|
|
222
227
|
* Two-part visual structure:
|
|
223
228
|
* - Header: colored status background with icon, title, description, and actions
|
|
224
|
-
* - Content (optional):
|
|
229
|
+
* - Content (optional): card background area for additional rich content
|
|
225
230
|
*
|
|
226
|
-
* When children are provided, a
|
|
227
|
-
*
|
|
228
|
-
*
|
|
231
|
+
* When children are provided, a chevron toggle appears in the header end area
|
|
232
|
+
* (to the left of the dismiss button if present) and the content starts
|
|
233
|
+
* collapsed. Pass `collapsible={false}` for content that is always visible,
|
|
234
|
+
* or a config object to change the initial state or control it.
|
|
229
235
|
*
|
|
230
236
|
* Manages its own dismissed state internally — the banner hides on dismiss
|
|
231
237
|
* even if `onDismiss` is not provided, so product teams don't need to wire
|
|
@@ -256,9 +262,14 @@ const elevationStyles = {
|
|
|
256
262
|
* <Banner
|
|
257
263
|
* status="warning"
|
|
258
264
|
* title="Configuration changes"
|
|
259
|
-
*
|
|
265
|
+
* collapsible={{defaultIsOpen: true}}>
|
|
260
266
|
* <p>Details here...</p>
|
|
261
267
|
* </Banner>
|
|
268
|
+
* <Banner status="error" title="3 fields need attention" collapsible={false}>
|
|
269
|
+
* <ul>
|
|
270
|
+
* <li>Email address is invalid</li>
|
|
271
|
+
* </ul>
|
|
272
|
+
* </Banner>
|
|
262
273
|
* ```
|
|
263
274
|
*/
|
|
264
275
|
export function Banner({
|
|
@@ -271,7 +282,7 @@ export function Banner({
|
|
|
271
282
|
endContent,
|
|
272
283
|
container = 'card',
|
|
273
284
|
elevation = 'none',
|
|
274
|
-
|
|
285
|
+
collapsible = true,
|
|
275
286
|
children,
|
|
276
287
|
xstyle,
|
|
277
288
|
className,
|
|
@@ -283,7 +294,25 @@ export function Banner({
|
|
|
283
294
|
}) {
|
|
284
295
|
const t = useTranslator();
|
|
285
296
|
const [isDismissed, setIsDismissed] = useState(false);
|
|
286
|
-
|
|
297
|
+
// The disclosure state machine is the shared one — Banner owns no collapse
|
|
298
|
+
// state of its own. `collapsible={false}` disables it, and that is what
|
|
299
|
+
// makes the content permanently visible.
|
|
300
|
+
//
|
|
301
|
+
// The one place Banner departs from the hook's defaults: `useCollapsible`
|
|
302
|
+
// opens by default, a banner starts closed. Its header already carries the
|
|
303
|
+
// message, so the content is supplementary — and this is the behaviour
|
|
304
|
+
// Banner has always had.
|
|
305
|
+
const collapsibleConfig = collapsible != null && typeof collapsible === 'object' ? collapsible : {};
|
|
306
|
+
const {
|
|
307
|
+
isEnabled: isCollapsible,
|
|
308
|
+
isOpen: isExpanded,
|
|
309
|
+
toggle: handleToggleExpand
|
|
310
|
+
} = useCollapsible({
|
|
311
|
+
isCollapsible: collapsible !== false && {
|
|
312
|
+
...collapsibleConfig,
|
|
313
|
+
defaultIsOpen: collapsibleConfig.defaultIsOpen ?? false
|
|
314
|
+
}
|
|
315
|
+
});
|
|
287
316
|
// The element focus came from before it entered the banner. Dismissing
|
|
288
317
|
// unmounts the whole banner, dismiss button included, so without a handoff
|
|
289
318
|
// the browser drops focus to <body> and a keyboard user loses their place.
|
|
@@ -292,7 +321,8 @@ export function Banner({
|
|
|
292
321
|
// Links the expand/collapse toggle to the content region it shows/hides so
|
|
293
322
|
// assistive tech can move from the button to its controlled content
|
|
294
323
|
// (disclosure pattern). The region is conditionally rendered, so aria-controls
|
|
295
|
-
// below is set only while it's mounted to avoid a dangling reference.
|
|
324
|
+
// below is set only while it's mounted to avoid a dangling reference. A
|
|
325
|
+
// non-collapsible banner has no toggle, so neither end of the link is used.
|
|
296
326
|
const contentId = useId();
|
|
297
327
|
const defaultIconName = defaultIconNames[status];
|
|
298
328
|
const role = statusRole[status] ?? FALLBACK_ROLE;
|
|
@@ -325,17 +355,20 @@ export function Banner({
|
|
|
325
355
|
origin.focus();
|
|
326
356
|
}
|
|
327
357
|
};
|
|
328
|
-
const handleToggleExpand = () => {
|
|
329
|
-
setIsExpanded(prev => !prev);
|
|
330
|
-
};
|
|
331
358
|
|
|
359
|
+
// The toggle exists only for a collapsible banner that actually has content
|
|
360
|
+
// to disclose.
|
|
361
|
+
const hasToggle = isCollapsible && hasChildren;
|
|
332
362
|
// Show the end area if there are actions, dismiss, or a collapsible toggle
|
|
333
|
-
const showEndArea = isRenderable(endContent) || isDismissable ||
|
|
363
|
+
const showEndArea = isRenderable(endContent) || isDismissable || hasToggle;
|
|
334
364
|
// Center items vertically when there's only a title (no description)
|
|
335
365
|
// and the banner has action buttons
|
|
336
366
|
const hasActions = isRenderable(endContent) || isDismissable;
|
|
337
367
|
const isSingleLine = !isRenderable(description) && hasActions;
|
|
338
|
-
|
|
368
|
+
|
|
369
|
+
// Non-collapsible children are always shown; collapsible ones follow the
|
|
370
|
+
// hook's open state.
|
|
371
|
+
const showContent = hasChildren && (!isCollapsible || isExpanded);
|
|
339
372
|
const isCard = container === 'card';
|
|
340
373
|
return /*#__PURE__*/_jsxs("div", {
|
|
341
374
|
ref: ref,
|
|
@@ -394,7 +427,7 @@ export function Banner({
|
|
|
394
427
|
})]
|
|
395
428
|
}), showEndArea && /*#__PURE__*/_jsxs("div", {
|
|
396
429
|
...stylex.props(styles.endArea, edgeCompSlot.inset(spacingVars['--spacing-2'])),
|
|
397
|
-
children: [endContent,
|
|
430
|
+
children: [endContent, hasToggle && /*#__PURE__*/_jsx(Button, {
|
|
398
431
|
variant: "ghost",
|
|
399
432
|
size: "sm",
|
|
400
433
|
label: isExpanded ? t('@astryx.banner.collapse') : t('@astryx.banner.expand'),
|
|
@@ -424,7 +457,7 @@ export function Banner({
|
|
|
424
457
|
})]
|
|
425
458
|
})]
|
|
426
459
|
}), showContent && /*#__PURE__*/_jsx("div", {
|
|
427
|
-
id: contentId,
|
|
460
|
+
id: hasToggle ? contentId : undefined,
|
|
428
461
|
...mergeProps(themeProps('banner-content', {
|
|
429
462
|
container,
|
|
430
463
|
status
|
|
@@ -67,6 +67,10 @@ export interface ButtonGroupProps extends BaseProps<HTMLDivElement> {
|
|
|
67
67
|
* Children automatically detect the group via context and apply position-aware
|
|
68
68
|
* styles in pure CSS.
|
|
69
69
|
*
|
|
70
|
+
* The group is a single tab stop: arrow keys move between members along the
|
|
71
|
+
* orientation, Home/End jump to the ends, focus wraps, and disabled members are
|
|
72
|
+
* skipped (the APG roving tabindex technique, via `useListFocus`).
|
|
73
|
+
*
|
|
70
74
|
* Members that render their own layer — a Button with a `tooltip`, or a
|
|
71
75
|
* DropdownMenu — compose correctly, including as the trailing member.
|
|
72
76
|
*
|
|
@@ -90,7 +94,7 @@ export interface ButtonGroupProps extends BaseProps<HTMLDivElement> {
|
|
|
90
94
|
* </ButtonGroup>
|
|
91
95
|
* ```
|
|
92
96
|
*/
|
|
93
|
-
export declare function ButtonGroup({ children, label, orientation, size: sizeProp, isDisabled, elevation, xstyle, className, style, ref, 'data-testid': testId, onKeyDown, ...props }: ButtonGroupProps): ReactNode;
|
|
97
|
+
export declare function ButtonGroup({ children, label, orientation, size: sizeProp, isDisabled, elevation, xstyle, className, style, ref, 'data-testid': testId, onKeyDown, onFocus, ...props }: ButtonGroupProps): ReactNode;
|
|
94
98
|
export declare namespace ButtonGroup {
|
|
95
99
|
var displayName: string;
|
|
96
100
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,WAAW,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,sBAAsB,EAAC,MAAM,sBAAsB,CAAC;AAQjE,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,WAAW,CAAC,EAAE,sBAAsB,CAAC;IAErC;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAwCD
|
|
1
|
+
{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../src/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,WAAW,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,sBAAsB,EAAC,MAAM,sBAAsB,CAAC;AAQjE,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,WAAW,CAAC,EAAE,sBAAsB,CAAC;IAErC;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAwCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,WAA0B,EAC1B,IAAI,EAAE,QAAQ,EACd,UAAkB,EAClB,SAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,SAAS,CAoD9B;yBAnEe,WAAW"}
|
|
@@ -87,6 +87,10 @@ const elevationStyles = {
|
|
|
87
87
|
* Children automatically detect the group via context and apply position-aware
|
|
88
88
|
* styles in pure CSS.
|
|
89
89
|
*
|
|
90
|
+
* The group is a single tab stop: arrow keys move between members along the
|
|
91
|
+
* orientation, Home/End jump to the ends, focus wraps, and disabled members are
|
|
92
|
+
* skipped (the APG roving tabindex technique, via `useListFocus`).
|
|
93
|
+
*
|
|
90
94
|
* Members that render their own layer — a Button with a `tooltip`, or a
|
|
91
95
|
* DropdownMenu — compose correctly, including as the trailing member.
|
|
92
96
|
*
|
|
@@ -123,14 +127,19 @@ export function ButtonGroup({
|
|
|
123
127
|
ref,
|
|
124
128
|
'data-testid': testId,
|
|
125
129
|
onKeyDown,
|
|
130
|
+
onFocus,
|
|
126
131
|
...props
|
|
127
132
|
}) {
|
|
128
133
|
const size = useSize(sizeProp, 'md');
|
|
129
134
|
const {
|
|
130
135
|
listRef,
|
|
131
|
-
handleKeyDown
|
|
136
|
+
handleKeyDown,
|
|
137
|
+
handleFocus
|
|
132
138
|
} = useListFocus({
|
|
133
|
-
|
|
139
|
+
// Roving rewrites `tabindex` on every item, so the selector cannot key off
|
|
140
|
+
// a value: `[tabindex="0"]` would drop each member the moment it is
|
|
141
|
+
// stamped -1. `a[href]` catches a Button rendered with `href`.
|
|
142
|
+
itemSelector: 'button, a[href], [tabindex]',
|
|
134
143
|
// A member's layer renders inline inside the group (useLayer does not
|
|
135
144
|
// portal it), so a key pressed in an open DropdownMenu bubbles here. The
|
|
136
145
|
// boundary is the group's own root or any layer, whichever is nearer to
|
|
@@ -138,7 +147,8 @@ export function ButtonGroup({
|
|
|
138
147
|
// inside a Popover or Toast working: bailing on any [popover] ancestor
|
|
139
148
|
// instead would swallow every arrow key it owns.
|
|
140
149
|
boundarySelector: '[role="group"], [popover]',
|
|
141
|
-
orientation
|
|
150
|
+
orientation,
|
|
151
|
+
hasRovingTabIndex: true
|
|
142
152
|
});
|
|
143
153
|
const contextValue = useMemo(() => ({
|
|
144
154
|
orientation,
|
|
@@ -159,6 +169,7 @@ export function ButtonGroup({
|
|
|
159
169
|
role: "group",
|
|
160
170
|
"aria-label": label,
|
|
161
171
|
onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
|
|
172
|
+
onFocus: composeEventHandlers(onFocus, handleFocus),
|
|
162
173
|
"aria-disabled": isDisabled || undefined,
|
|
163
174
|
"data-testid": testId,
|
|
164
175
|
children: children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatComposerInput.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposerInput.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"ChatComposerInput.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatComposerInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -509,9 +509,8 @@ export function ChatComposerTokenElement({
|
|
|
509
509
|
"data-astryx-token": "",
|
|
510
510
|
"data-astryx-token-value": token.value,
|
|
511
511
|
contentEditable: false,
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
verticalAlign: 'baseline'
|
|
512
|
+
...{
|
|
513
|
+
className: "x3nfvp2 xxymvpz"
|
|
515
514
|
},
|
|
516
515
|
children: isCustomToken(token) ? token.render() : /*#__PURE__*/_jsx(Badge, {
|
|
517
516
|
label: token.label,
|
|
@@ -10,6 +10,8 @@
|
|
|
10
10
|
*
|
|
11
11
|
* SYNC: When modified, update:
|
|
12
12
|
* - /packages/core/src/Chat/index.ts
|
|
13
|
+
* - /packages/core/src/Chat/ChatComposerInput.tsx (token alignment must match,
|
|
14
|
+
* or a token moves when the message is sent)
|
|
13
15
|
* - /packages/cli/assets/templates/blocks/components/ChatTokenizedText/ (block examples)
|
|
14
16
|
*/
|
|
15
17
|
import React from 'react';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatTokenizedText.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatTokenizedText.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"ChatTokenizedText.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatTokenizedText.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAuB,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AAE3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqB5C,MAAM,WAAW,sBAAuB,SAAQ,SAAS,CAAC,eAAe,CAAC;IACxE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;;;;OAgBG;IACH,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC9B;AAoBD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,GAAG,EACH,QAAQ,EACR,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,sBAAsB,qBA+BxB;yBAvCe,iBAAiB"}
|
|
@@ -14,6 +14,8 @@
|
|
|
14
14
|
*
|
|
15
15
|
* SYNC: When modified, update:
|
|
16
16
|
* - /packages/core/src/Chat/index.ts
|
|
17
|
+
* - /packages/core/src/Chat/ChatComposerInput.tsx (token alignment must match,
|
|
18
|
+
* or a token moves when the message is sent)
|
|
17
19
|
* - /packages/cli/assets/templates/blocks/components/ChatTokenizedText/ (block examples)
|
|
18
20
|
*/
|
|
19
21
|
import React from 'react';
|
|
@@ -106,12 +108,15 @@ function renderTokens(text, tokens) {
|
|
|
106
108
|
const matched = match[0];
|
|
107
109
|
const token = tokenMap.get(matched);
|
|
108
110
|
if (token) {
|
|
109
|
-
parts.push(
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
111
|
+
parts.push(/*#__PURE__*/_jsx("span", {
|
|
112
|
+
...{
|
|
113
|
+
className: "x3nfvp2 xxymvpz"
|
|
114
|
+
},
|
|
115
|
+
children: isCustomToken(token) ? token.render() : /*#__PURE__*/_jsx(Badge, {
|
|
116
|
+
label: token.label,
|
|
117
|
+
variant: token.variant,
|
|
118
|
+
icon: token.icon
|
|
119
|
+
})
|
|
115
120
|
}, `${matched}-${match.index}`));
|
|
116
121
|
}
|
|
117
122
|
lastIndex = match.index + matched.length;
|
|
@@ -80,7 +80,7 @@ export function useChatComposerTokens({
|
|
|
80
80
|
span.setAttribute('data-astryx-token-id', id);
|
|
81
81
|
span.contentEditable = 'false';
|
|
82
82
|
span.style.display = 'inline-flex';
|
|
83
|
-
span.style.verticalAlign = '
|
|
83
|
+
span.style.verticalAlign = 'middle';
|
|
84
84
|
range.deleteContents();
|
|
85
85
|
range.insertNode(span);
|
|
86
86
|
|
|
@@ -9,6 +9,11 @@ export type DateTimeInputHourFormat = '12h' | '24h';
|
|
|
9
9
|
export type DateTimeInputSize = 'sm' | 'md' | 'lg';
|
|
10
10
|
/** Supported minute increments for arrow-key stepping of the time field. */
|
|
11
11
|
export type DateTimeInputTimeIncrement = 1 | 5 | 10 | 15 | 30;
|
|
12
|
+
/**
|
|
13
|
+
* Supported minute cadences for the preset-time dropdown. Every value divides
|
|
14
|
+
* an hour evenly, so each option lands on a round clock time.
|
|
15
|
+
*/
|
|
16
|
+
export type DateTimeInputTimeOptionInterval = 5 | 10 | 15 | 30 | 60;
|
|
12
17
|
export type { InputStatus as DateTimeInputStatus, InputStatusType as DateTimeInputStatusType, } from '../Field';
|
|
13
18
|
export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaultValue'> {
|
|
14
19
|
/** Ref forwarded to the date input element */
|
|
@@ -112,6 +117,21 @@ export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaul
|
|
|
112
117
|
* @default 1
|
|
113
118
|
*/
|
|
114
119
|
timeIncrement?: DateTimeInputTimeIncrement;
|
|
120
|
+
/**
|
|
121
|
+
* Minute cadence for a dropdown of preset times on the time field. Set it to
|
|
122
|
+
* turn the time field into a combobox listing every valid time at that
|
|
123
|
+
* cadence (`60` gives the 12 AM - 11 PM list, `15` a quarter-hour list).
|
|
124
|
+
*
|
|
125
|
+
* Omitted, the time field stays a plain text input: typed entry and
|
|
126
|
+
* arrow-key stepping only, with no combobox semantics added to the
|
|
127
|
+
* accessibility tree. Typed entry keeps working when the dropdown is on —
|
|
128
|
+
* the list is a shortcut, not a restriction, so a time between two options
|
|
129
|
+
* can still be typed.
|
|
130
|
+
*
|
|
131
|
+
* Independent of `timeIncrement`, which governs arrow-key stepping. Setting
|
|
132
|
+
* both to the same value is the usual choice for scheduling flows.
|
|
133
|
+
*/
|
|
134
|
+
timeOptionInterval?: DateTimeInputTimeOptionInterval;
|
|
115
135
|
/**
|
|
116
136
|
* Whether to show a clear button when a value is set.
|
|
117
137
|
* @default false
|
|
@@ -179,7 +199,7 @@ export interface DateTimeInputProps extends Omit<BaseProps, 'onChange' | 'defaul
|
|
|
179
199
|
* />
|
|
180
200
|
* ```
|
|
181
201
|
*/
|
|
182
|
-
export declare function DateTimeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, hasSeconds, hourFormat, timeIncrement, hasClear, placeholder: placeholderFromProps, timePlaceholder: timePlaceholderFromProps, timeLabel, size: sizeProp, status, labelTooltip, numberOfMonths, weekStartsOn, width, xstyle, className, style, ref, ...rest }: DateTimeInputProps): import("react").JSX.Element;
|
|
202
|
+
export declare function DateTimeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, dateConstraints, hasSeconds, hourFormat, timeIncrement, timeOptionInterval, hasClear, placeholder: placeholderFromProps, timePlaceholder: timePlaceholderFromProps, timeLabel, size: sizeProp, status, labelTooltip, numberOfMonths, weekStartsOn, width, xstyle, className, style, ref, ...rest }: DateTimeInputProps): import("react").JSX.Element;
|
|
183
203
|
export declare namespace DateTimeInput {
|
|
184
204
|
var displayName: string;
|
|
185
205
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}
|