@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.
Files changed (80) hide show
  1. package/dist/Banner/Banner.d.ts +40 -15
  2. package/dist/Banner/Banner.d.ts.map +1 -1
  3. package/dist/Banner/Banner.js +51 -18
  4. package/dist/ButtonGroup/ButtonGroup.d.ts +5 -1
  5. package/dist/ButtonGroup/ButtonGroup.d.ts.map +1 -1
  6. package/dist/ButtonGroup/ButtonGroup.js +14 -3
  7. package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
  8. package/dist/Chat/ChatComposerInput.js +2 -3
  9. package/dist/Chat/ChatTokenizedText.d.ts +2 -0
  10. package/dist/Chat/ChatTokenizedText.d.ts.map +1 -1
  11. package/dist/Chat/ChatTokenizedText.js +11 -6
  12. package/dist/Chat/useChatComposerTokens.js +1 -1
  13. package/dist/DateTimeInput/DateTimeInput.d.ts +21 -1
  14. package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
  15. package/dist/DateTimeInput/DateTimeInput.js +404 -11
  16. package/dist/DateTimeInput/index.d.ts +1 -1
  17. package/dist/DateTimeInput/index.d.ts.map +1 -1
  18. package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
  19. package/dist/PowerSearch/PowerSearch.js +1 -1
  20. package/dist/PowerSearch/PowerSearchEditPopover.d.ts.map +1 -1
  21. package/dist/PowerSearch/PowerSearchEditPopover.js +20 -6
  22. package/dist/Spinner/Spinner.d.ts +3 -3
  23. package/dist/Spinner/Spinner.d.ts.map +1 -1
  24. package/dist/Spinner/Spinner.js +130 -78
  25. package/dist/TabList/Tab.d.ts +15 -2
  26. package/dist/TabList/Tab.d.ts.map +1 -1
  27. package/dist/TabList/Tab.js +32 -7
  28. package/dist/TabList/TabList.d.ts +46 -7
  29. package/dist/TabList/TabList.d.ts.map +1 -1
  30. package/dist/TabList/TabList.js +351 -21
  31. package/dist/TabList/TabListContext.d.ts +11 -1
  32. package/dist/TabList/TabListContext.d.ts.map +1 -1
  33. package/dist/TabList/TabListContext.js +11 -2
  34. package/dist/TabList/index.d.ts +2 -2
  35. package/dist/TabList/index.d.ts.map +1 -1
  36. package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
  37. package/dist/Typeahead/BaseTypeahead.js +8 -0
  38. package/dist/astryx.css +29 -1
  39. package/dist/hooks/useFocusTrap.d.ts.map +1 -1
  40. package/dist/hooks/useFocusTrap.js +8 -4
  41. package/dist/utils/sharedResizeObserver.d.ts.map +1 -1
  42. package/dist/utils/sharedResizeObserver.js +10 -1
  43. package/locales/en.json +4 -0
  44. package/locales/pseudo.json +3 -0
  45. package/package.json +2 -2
  46. package/src/Banner/Banner.doc.mjs +13 -11
  47. package/src/Banner/Banner.test.tsx +102 -15
  48. package/src/Banner/Banner.tsx +72 -25
  49. package/src/ButtonGroup/ButtonGroup.doc.mjs +3 -0
  50. package/src/ButtonGroup/ButtonGroup.test.tsx +206 -0
  51. package/src/ButtonGroup/ButtonGroup.tsx +12 -2
  52. package/src/Chat/ChatComposerInput.tsx +5 -1
  53. package/src/Chat/ChatTokenizedText.tsx +17 -10
  54. package/src/Chat/useChatComposerTokens.ts +1 -1
  55. package/src/DateTimeInput/DateTimeInput.doc.mjs +18 -0
  56. package/src/DateTimeInput/DateTimeInput.test.tsx +1088 -0
  57. package/src/DateTimeInput/DateTimeInput.tsx +554 -22
  58. package/src/DateTimeInput/index.ts +1 -0
  59. package/src/Markdown/Markdown.doc.mjs +5 -0
  60. package/src/Markdown/parser.perf.test.ts +37 -5
  61. package/src/MultiSelector/MultiSelector.test.tsx +1 -0
  62. package/src/PowerSearch/PowerSearch.tsx +6 -1
  63. package/src/PowerSearch/PowerSearchEditPopover.test.tsx +201 -0
  64. package/src/PowerSearch/PowerSearchEditPopover.tsx +17 -2
  65. package/src/Selector/Selector.test.tsx +24 -1
  66. package/src/Spinner/Spinner.test.tsx +147 -1
  67. package/src/Spinner/Spinner.tsx +120 -101
  68. package/src/TabList/Tab.doc.mjs +13 -1
  69. package/src/TabList/Tab.tsx +67 -7
  70. package/src/TabList/TabList.doc.mjs +22 -6
  71. package/src/TabList/TabList.test.tsx +559 -0
  72. package/src/TabList/TabList.tsx +488 -21
  73. package/src/TabList/TabListContext.ts +13 -2
  74. package/src/TabList/index.ts +6 -2
  75. package/src/Typeahead/BaseTypeahead.tsx +8 -0
  76. package/src/Typeahead/Typeahead.test.tsx +49 -0
  77. package/src/hooks/useFocusTrap.test.tsx +14 -0
  78. package/src/hooks/useFocusTrap.ts +8 -4
  79. package/src/utils/sharedResizeObserver.ts +10 -2
  80. package/src/__tests__/complexComponentContract.test.tsx +0 -81
@@ -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'): collapsible card background for additional content (children)
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
- * - When children are provided, a collapse/expand toggle button appears in the end area
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) starts expanded.
113
- * Only relevant when children are provided.
114
- * @default false
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
- defaultIsExpanded?: boolean;
135
+ collapsible?: boolean | CollapsibleConfig;
117
136
  /**
118
- * Extra content rendered below the header in a collapsible card-background area.
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
- * When provided, a collapse/expand toggle button appears in the header.
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): collapsible card background area for additional rich content
148
+ * - Content (optional): card background area for additional rich content
130
149
  *
131
- * When children are provided, a collapse/expand chevron button appears in the
132
- * header end area (to the left of the dismiss button if present). Clicking it
133
- * toggles the visibility of the content area.
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
- * defaultIsExpanded>
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, defaultIsExpanded, children, xstyle, className, style, ref, onFocusCapture, onPointerDownCapture, ...rest }: BannerProps): import("react").JSX.Element | null;
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;;;;;;;;;;;OAWG;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;AAmND;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,sCA+Mb;yBAlOe,MAAM"}
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"}
@@ -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'): collapsible card background for additional content (children)
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
- * - When children are provided, a collapse/expand toggle button appears in the end area
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): collapsible card background area for additional rich content
229
+ * - Content (optional): card background area for additional rich content
225
230
  *
226
- * When children are provided, a collapse/expand chevron button appears in the
227
- * header end area (to the left of the dismiss button if present). Clicking it
228
- * toggles the visibility of the content area.
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
- * defaultIsExpanded>
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
- defaultIsExpanded = false,
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
- const [isExpanded, setIsExpanded] = useState(defaultIsExpanded);
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 || hasChildren;
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
- const showContent = hasChildren && isExpanded;
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, hasChildren && /*#__PURE__*/_jsx(Button, {
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;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,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,SAAS,CA+C9B;yBA7De,WAAW"}
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
- itemSelector: 'button, [tabindex="0"]',
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
- style: {
513
- display: 'inline-flex',
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;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAuB,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AAE3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,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"}
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(isCustomToken(token) ? /*#__PURE__*/_jsx("span", {
110
- children: token.render()
111
- }, `${matched}-${match.index}`) : /*#__PURE__*/_jsx(Badge, {
112
- label: token.label,
113
- variant: token.variant,
114
- icon: token.icon
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 = 'baseline';
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":"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"}
1
+ {"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}