@astryxdesign/core 0.4.7-canary.789ef57 → 0.4.7-canary.78e8e1c
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/AspectRatio/AspectRatio.d.ts +24 -0
- package/dist/AspectRatio/AspectRatio.d.ts.map +1 -1
- package/dist/AspectRatio/AspectRatio.js +23 -4
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +5 -5
- package/dist/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/dist/ButtonGroup/ButtonGroup.js +9 -1
- package/dist/Calendar/Calendar.d.ts +3 -1
- package/dist/Calendar/Calendar.d.ts.map +1 -1
- package/dist/Calendar/Calendar.js +13 -14
- package/dist/Calendar/getInitialFocusDate.d.ts +46 -0
- package/dist/Calendar/getInitialFocusDate.d.ts.map +1 -0
- package/dist/Calendar/getInitialFocusDate.js +62 -0
- package/dist/Chat/ChatMessageList.d.ts +22 -3
- package/dist/Chat/ChatMessageList.d.ts.map +1 -1
- package/dist/Chat/ChatMessageList.js +6 -3
- package/dist/Heading/Heading.d.ts.map +1 -1
- package/dist/Heading/Heading.js +6 -2
- package/dist/MultiSelector/MultiSelector.d.ts +15 -1
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +11 -6
- package/dist/MultiSelector/index.d.ts +1 -1
- package/dist/MultiSelector/index.d.ts.map +1 -1
- package/dist/Table/plugins/pagination/useTablePagination.d.ts +3 -0
- package/dist/Table/plugins/pagination/useTablePagination.d.ts.map +1 -1
- package/dist/Table/plugins/pagination/useTablePagination.js +21 -4
- package/dist/Table/plugins/rowStatus/useTableRowStatus.d.ts.map +1 -1
- package/dist/Table/plugins/rowStatus/useTableRowStatus.js +10 -3
- package/dist/Text/Text.d.ts.map +1 -1
- package/dist/Text/Text.js +6 -2
- package/dist/astryx.css +2 -0
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/useMergedRefs.d.ts +18 -0
- package/dist/hooks/useMergedRefs.d.ts.map +1 -0
- package/dist/hooks/useMergedRefs.js +25 -0
- package/dist/utils/timeParser.d.ts +1 -1
- package/dist/utils/timeParser.d.ts.map +1 -1
- package/dist/utils/timeParser.js +26 -12
- package/locales/en.json +13 -1
- package/locales/pseudo.json +9 -0
- package/package.json +2 -2
- package/src/AspectRatio/AspectRatio.doc.mjs +6 -3
- package/src/AspectRatio/AspectRatio.test.tsx +57 -10
- package/src/AspectRatio/AspectRatio.tsx +40 -1
- package/src/Breadcrumbs/BreadcrumbItem.tsx +2 -1
- package/src/Button/Button.doc.mjs +22 -0
- package/src/ButtonGroup/ButtonGroup.doc.mjs +7 -1
- package/src/ButtonGroup/ButtonGroup.test.tsx +185 -1
- package/src/ButtonGroup/ButtonGroup.tsx +8 -1
- package/src/Calendar/Calendar.doc.mjs +4 -3
- package/src/Calendar/Calendar.test.tsx +52 -0
- package/src/Calendar/Calendar.tsx +18 -15
- package/src/Calendar/getInitialFocusDate.test.ts +94 -0
- package/src/Calendar/getInitialFocusDate.ts +93 -0
- package/src/Chat/ChatMessageList.doc.mjs +9 -1
- package/src/Chat/ChatMessageList.test.tsx +46 -0
- package/src/Chat/ChatMessageList.tsx +28 -4
- package/src/CodeBlock/CodeBlock.doc.mjs +6 -0
- package/src/ContextMenu/ContextMenu.doc.mjs +5 -0
- package/src/Dialog/Dialog.doc.mjs +5 -0
- package/src/Field/Field.doc.mjs +11 -0
- package/src/Heading/Heading.test.tsx +23 -1
- package/src/Heading/Heading.tsx +6 -2
- package/src/Link/Link.doc.mjs +11 -0
- package/src/MoreMenu/MoreMenu.doc.mjs +7 -1
- package/src/MultiSelector/MultiSelector.doc.mjs +10 -0
- package/src/MultiSelector/MultiSelector.test.tsx +84 -0
- package/src/MultiSelector/MultiSelector.tsx +40 -5
- package/src/MultiSelector/index.ts +1 -0
- package/src/NumberInput/NumberInput.doc.mjs +5 -0
- package/src/PowerSearch/PowerSearch.doc.mjs +10 -0
- package/src/Selector/Selector.doc.mjs +11 -0
- package/src/Table/plugins/pagination/useTablePagination.test.tsx +34 -4
- package/src/Table/plugins/pagination/useTablePagination.tsx +35 -3
- package/src/Table/plugins/rowStatus/useTableRowStatus.test.tsx +13 -7
- package/src/Table/plugins/rowStatus/useTableRowStatus.tsx +12 -3
- package/src/Table/useTablePagination.doc.mjs +7 -0
- package/src/Table/useTableRowStatus.doc.mjs +1 -1
- package/src/Text/Text.test.tsx +23 -1
- package/src/Text/Text.tsx +6 -2
- package/src/TextInput/TextInput.doc.mjs +10 -0
- package/src/Toast/Toast.doc.mjs +6 -0
- package/src/Tokenizer/Tokenizer.doc.mjs +10 -0
- package/src/Toolbar/Toolbar.doc.mjs +5 -0
- package/src/hooks/index.ts +2 -0
- package/src/hooks/useMergedRefs.doc.mjs +79 -0
- package/src/hooks/useMergedRefs.test.tsx +62 -0
- package/src/hooks/useMergedRefs.ts +36 -0
- package/src/utils/timeParser.test.ts +6 -1
- package/src/utils/timeParser.ts +35 -13
- package/src/__tests__/inputWidthContract.test.tsx +0 -69
|
@@ -34,6 +34,25 @@ export interface AspectRatioProps extends BaseProps<HTMLDivElement> {
|
|
|
34
34
|
ref?: React.Ref<HTMLDivElement>;
|
|
35
35
|
/**
|
|
36
36
|
* The aspect ratio as width/height (e.g., 16/9 = 1.777..., 4/3 = 1.333..., 1 for square).
|
|
37
|
+
*
|
|
38
|
+
* The ratio is emitted as a class-level declaration — never an inline
|
|
39
|
+
* style — so it can be made responsive:
|
|
40
|
+
* - StyleX consumers pass an `aspect-ratio` rule via `xstyle`, including
|
|
41
|
+
* under `@media`/`@container` conditions.
|
|
42
|
+
* - Plain-CSS/Tailwind consumers override `aspect-ratio` from their own
|
|
43
|
+
* (unlayered) rules: the compiled component styles live in the
|
|
44
|
+
* `astryx-base` cascade layer, and unlayered CSS wins over layered
|
|
45
|
+
* rules regardless of specificity.
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* ```
|
|
49
|
+
* // 3:1 hero that becomes 3:2 when its container stacks
|
|
50
|
+
* <AspectRatio ratio={3 / 1} className="gallery-hero">…</AspectRatio>
|
|
51
|
+
*
|
|
52
|
+
* // CSS: @container gallery (max-width: 720px) {
|
|
53
|
+
* // .gallery-hero { aspect-ratio: 3 / 2; }
|
|
54
|
+
* // }
|
|
55
|
+
* ```
|
|
37
56
|
*/
|
|
38
57
|
ratio: number;
|
|
39
58
|
/**
|
|
@@ -102,6 +121,11 @@ export interface AspectRatioProps extends BaseProps<HTMLDivElement> {
|
|
|
102
121
|
* `ratio={1}` or an oval at other ratios. Both shapes respect the provided
|
|
103
122
|
* `ratio`.
|
|
104
123
|
*
|
|
124
|
+
* The ratio is a class-level declaration (not an inline style), so it can be
|
|
125
|
+
* overridden responsively — via `xstyle` for StyleX consumers, or with a
|
|
126
|
+
* plain unlayered `aspect-ratio` rule for plain-CSS consumers (component
|
|
127
|
+
* styles live in the `astryx-base` cascade layer, which unlayered CSS beats).
|
|
128
|
+
*
|
|
105
129
|
* Sizing: the box takes its width from its container and derives its height
|
|
106
130
|
* from the ratio, so it needs an ancestor with a definite width. Two
|
|
107
131
|
* consequences are worth knowing. Constraining only the height (`height` or
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,SAAS,CAAC;AAEvD;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC
|
|
1
|
+
{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,SAAS,CAAC;AAEvD;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,GAAG,CAAC,EAAE,cAAc,CAAC;IAErB;;;;;;;OAOG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAgDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAmB,EACnB,GAAG,EACH,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,+BA4BlB;yBAtCe,WAAW"}
|
|
@@ -49,6 +49,23 @@ const styles = {
|
|
|
49
49
|
}
|
|
50
50
|
};
|
|
51
51
|
|
|
52
|
+
// The ratio compiles to a CSS variable + a class-level declaration
|
|
53
|
+
// (aspect-ratio: var(--x)) instead of a raw inline style, so consumer
|
|
54
|
+
// overrides — `xstyle` rules, including ones inside @media/@container
|
|
55
|
+
// queries — can still win. A raw inline `aspect-ratio` would beat any class
|
|
56
|
+
// (same rationale as Grid's dynamic track values). Non-StyleX consumers
|
|
57
|
+
// don't need a dedicated hook: the compiled declaration sits in the
|
|
58
|
+
// `astryx-base` cascade layer, so any unlayered consumer rule wins
|
|
59
|
+
// regardless of specificity.
|
|
60
|
+
const dynamicStyles = {
|
|
61
|
+
ratio: ratio => [{
|
|
62
|
+
kOBAk4: ratio != null ? "x10y9f9r" : ratio,
|
|
63
|
+
$$css: true
|
|
64
|
+
}, {
|
|
65
|
+
"--x-aspectRatio": ratio != null ? ratio : undefined
|
|
66
|
+
}]
|
|
67
|
+
};
|
|
68
|
+
|
|
52
69
|
/**
|
|
53
70
|
* AspectRatio component for maintaining a specific aspect ratio for its children.
|
|
54
71
|
*
|
|
@@ -64,6 +81,11 @@ const styles = {
|
|
|
64
81
|
* `ratio={1}` or an oval at other ratios. Both shapes respect the provided
|
|
65
82
|
* `ratio`.
|
|
66
83
|
*
|
|
84
|
+
* The ratio is a class-level declaration (not an inline style), so it can be
|
|
85
|
+
* overridden responsively — via `xstyle` for StyleX consumers, or with a
|
|
86
|
+
* plain unlayered `aspect-ratio` rule for plain-CSS consumers (component
|
|
87
|
+
* styles live in the `astryx-base` cascade layer, which unlayered CSS beats).
|
|
88
|
+
*
|
|
67
89
|
* Sizing: the box takes its width from its container and derives its height
|
|
68
90
|
* from the ratio, so it needs an ancestor with a definite width. Two
|
|
69
91
|
* consequences are worth knowing. Constraining only the height (`height` or
|
|
@@ -102,10 +124,7 @@ export function AspectRatio({
|
|
|
102
124
|
ref: ref,
|
|
103
125
|
...mergeProps(themeProps('aspect-ratio', {
|
|
104
126
|
shape
|
|
105
|
-
}), stylex.props(styles.container, shape === 'ellipse' && styles.ellipse, xstyle), className,
|
|
106
|
-
...style,
|
|
107
|
-
aspectRatio: ratio
|
|
108
|
-
}),
|
|
127
|
+
}), stylex.props(styles.container, dynamicStyles.ratio(ratio), shape === 'ellipse' && styles.ellipse, xstyle), className, style),
|
|
109
128
|
...props,
|
|
110
129
|
children: /*#__PURE__*/_jsx("div", {
|
|
111
130
|
"data-astryx-aspect-ratio-override": fit,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,qCAAqC,CAAC;AAM7C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,8BAA8B,CAAC;AAMrE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC7B;AAyHD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAoMrB;yBAnNe,cAAc"}
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
import React, { use, useCallback, useId, useMemo, useRef, useEffect } from 'react';
|
|
25
25
|
import * as stylex from '@stylexjs/stylex';
|
|
26
26
|
import "../theme/tokens.stylex.js";
|
|
27
|
-
import { colorVars, spacingVars, typeScaleVars, radiusVars } from "../theme/tokens.stylex.js";
|
|
27
|
+
import { colorVars, spacingVars, typeScaleVars, radiusVars, fontWeightVars } from "../theme/tokens.stylex.js";
|
|
28
28
|
import { BreadcrumbContext } from "./Breadcrumbs.js";
|
|
29
29
|
import { useLinkComponent } from "../Link/useLinkComponent.js";
|
|
30
30
|
import { mergeProps, mergeRefs } from "../utils/index.js";
|
|
@@ -240,10 +240,10 @@ export function BreadcrumbItem({
|
|
|
240
240
|
}) : /*#__PURE__*/_jsx("span", {
|
|
241
241
|
...{
|
|
242
242
|
0: {
|
|
243
|
-
className: "x78zum5 x6s0dn4 xzye2dw
|
|
243
|
+
className: "x78zum5 x6s0dn4 xzye2dw x2mo6ok x1tgivj0"
|
|
244
244
|
},
|
|
245
245
|
1: {
|
|
246
|
-
className: "x78zum5 x6s0dn4 xzye2dw
|
|
246
|
+
className: "x78zum5 x6s0dn4 xzye2dw x2mo6ok xv1l7n4"
|
|
247
247
|
}
|
|
248
248
|
}[!!isSupporting << 0],
|
|
249
249
|
"aria-current": "page",
|
|
@@ -290,10 +290,10 @@ export function BreadcrumbItem({
|
|
|
290
290
|
ref: contentRef,
|
|
291
291
|
...{
|
|
292
292
|
0: {
|
|
293
|
-
className: "x78zum5 x6s0dn4 xzye2dw
|
|
293
|
+
className: "x78zum5 x6s0dn4 xzye2dw x2mo6ok x1tgivj0"
|
|
294
294
|
},
|
|
295
295
|
1: {
|
|
296
|
-
className: "x78zum5 x6s0dn4 xzye2dw
|
|
296
|
+
className: "x78zum5 x6s0dn4 xzye2dw x2mo6ok xv1l7n4"
|
|
297
297
|
}
|
|
298
298
|
}[!!isSupporting << 0],
|
|
299
299
|
children: content
|
|
@@ -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;AAOjE,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,
|
|
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;AAOjE,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"}
|
|
@@ -131,6 +131,13 @@ export function ButtonGroup({
|
|
|
131
131
|
handleKeyDown
|
|
132
132
|
} = useListFocus({
|
|
133
133
|
itemSelector: 'button, [tabindex="0"]',
|
|
134
|
+
// A member's layer renders inline inside the group (useLayer does not
|
|
135
|
+
// portal it), so a key pressed in an open DropdownMenu bubbles here. The
|
|
136
|
+
// boundary is the group's own root or any layer, whichever is nearer to
|
|
137
|
+
// the target. Naming the group's own root is what keeps a group rendered
|
|
138
|
+
// inside a Popover or Toast working: bailing on any [popover] ancestor
|
|
139
|
+
// instead would swallow every arrow key it owns.
|
|
140
|
+
boundarySelector: '[role="group"], [popover]',
|
|
134
141
|
orientation
|
|
135
142
|
});
|
|
136
143
|
const contextValue = useMemo(() => ({
|
|
@@ -146,7 +153,8 @@ export function ButtonGroup({
|
|
|
146
153
|
...props,
|
|
147
154
|
...mergeProps(themeProps('button-group', {
|
|
148
155
|
size,
|
|
149
|
-
orientation
|
|
156
|
+
orientation,
|
|
157
|
+
elevation
|
|
150
158
|
}), stylex.props(styles.group, orientation === 'vertical' && styles.vertical, elevationStyles[elevation], xstyle), className, style),
|
|
151
159
|
role: "group",
|
|
152
160
|
"aria-label": label,
|
|
@@ -41,7 +41,9 @@ interface CalendarBaseProps extends Omit<BaseProps<HTMLDivElement>, 'onChange' |
|
|
|
41
41
|
minRangeSpan?: number;
|
|
42
42
|
/**
|
|
43
43
|
* Controlled focus date (which month is visible).
|
|
44
|
-
* If not provided, defaults to selected date
|
|
44
|
+
* If not provided, defaults to the selected date, else today clamped into
|
|
45
|
+
* the `min`/`max` window (so a window that excludes today opens on the
|
|
46
|
+
* bound nearest to it, not on an all-disabled month).
|
|
45
47
|
*/
|
|
46
48
|
focusDate?: ISODateString;
|
|
47
49
|
/** Callback when visible month changes via navigation */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgD5C,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,SAAS,EACV,MAAM,oBAAoB,CAAC;AAK5B,+CAA+C;AAE/C,MAAM,WAAW,cAAc;IAC7B,wEAAwE;IACxE,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAID,UAAU,iBAAkB,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,cAAc,CAC5B;IACC,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACtC,+CAA+C;IAC/C,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAEvD;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;OAIG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CAC1C;AAID,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,aAAa,CAAC;IAE7B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,KAAK,IAAI,CAAC;CAC9D;AAED,UAAU,kBAAmB,SAAQ,iBAAiB;IACpD,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IAEd,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAMrE;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAC,GAAG,EAAE,GAAG,KAAK,EAAC,EAAE,aAAa,+BAsXtD;yBAtXe,QAAQ"}
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
*
|
|
12
12
|
* SYNC: When modified, update these files to stay in sync:
|
|
13
13
|
* - /packages/core/src/Calendar/Calendar.doc.mjs (props table, features, implementation notes)
|
|
14
|
+
* - /packages/core/src/Calendar/getInitialFocusDate.ts (which month the calendar opens on)
|
|
14
15
|
* - /packages/core/src/Calendar/Calendar.test.tsx (tests for new/changed behavior)
|
|
15
16
|
* - /packages/core/src/Calendar/index.ts (exports if types change)
|
|
16
17
|
* - /apps/storybook/stories/Calendar.stories.tsx (storybook stories)
|
|
@@ -26,6 +27,7 @@ import { calendarStyles, monthGridStyles, dayCellStyles, dayCellTheme } from "./
|
|
|
26
27
|
import { plainDateFromISO, plainDateToISO, plainDateToDate, plainDateToday, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateAddDays, plainDateIsBefore, plainDateIsEqual, plainDateGetWeekNumber, plainDateFormat, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_MONTH_YEAR } from "../utils/plainDate.js";
|
|
27
28
|
import { mergeProps, composeEventHandlers, rtlStyles } from "../utils/index.js";
|
|
28
29
|
import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
30
|
+
import { getInitialFocusDate } from "./getInitialFocusDate.js";
|
|
29
31
|
import { computeDayCellState, computeRangeRounding, computePreviewRounding, computeDayNeighborContinuity, isEndpoint } from "./dayCellUtils.js";
|
|
30
32
|
|
|
31
33
|
// =============================================================================
|
|
@@ -114,20 +116,17 @@ export function Calendar({
|
|
|
114
116
|
// Determine effective value
|
|
115
117
|
const effectiveValue = value !== undefined ? value : internalValue;
|
|
116
118
|
|
|
117
|
-
// Focus date state (which month is visible)
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
}
|
|
129
|
-
return plainDateToday();
|
|
130
|
-
});
|
|
119
|
+
// Focus date state (which month is visible). Falls back to today, clamped
|
|
120
|
+
// into the min/max window so a window that doesn't contain today doesn't
|
|
121
|
+
// open on an all-disabled month.
|
|
122
|
+
const [internalFocusDate, setInternalFocusDate] = useState(() => getInitialFocusDate({
|
|
123
|
+
focusDate: focusDateProp,
|
|
124
|
+
value: effectiveValue,
|
|
125
|
+
min,
|
|
126
|
+
max,
|
|
127
|
+
numberOfMonths,
|
|
128
|
+
today
|
|
129
|
+
}));
|
|
131
130
|
|
|
132
131
|
// Use controlled focusDate if callback is provided, otherwise use internal state
|
|
133
132
|
const isControlledFocus = focusDateProp !== undefined && onFocusDateChange !== undefined;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file getInitialFocusDate.ts
|
|
3
|
+
* @input PlainDate utilities, min/max bounds, today
|
|
4
|
+
* @output Exports getInitialFocusDate — the month Calendar opens on
|
|
5
|
+
* @position Calendar-specific helper; used by Calendar.tsx
|
|
6
|
+
*
|
|
7
|
+
* SYNC: When modified, update:
|
|
8
|
+
* - /packages/core/src/Calendar/getInitialFocusDate.test.ts
|
|
9
|
+
* - /packages/core/src/Calendar/Calendar.tsx (the only caller)
|
|
10
|
+
*/
|
|
11
|
+
import type { ISODateString, DateRange } from '../utils/dateTypes';
|
|
12
|
+
import { type PlainDate } from '../utils/plainDate';
|
|
13
|
+
export interface InitialFocusDateOptions {
|
|
14
|
+
/** Controlled visible month, if the consumer supplied one. */
|
|
15
|
+
focusDate?: ISODateString;
|
|
16
|
+
/** Selected value (single date or range), controlled or uncontrolled. */
|
|
17
|
+
value?: ISODateString | DateRange;
|
|
18
|
+
/** Earliest selectable date. */
|
|
19
|
+
min?: ISODateString;
|
|
20
|
+
/** Latest selectable date. */
|
|
21
|
+
max?: ISODateString;
|
|
22
|
+
/** How many month panes the calendar renders (1 or 2). */
|
|
23
|
+
numberOfMonths: number;
|
|
24
|
+
/** Today, injected so the caller keeps a single memoized source of "now". */
|
|
25
|
+
today: PlainDate;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Picks the date whose month the calendar opens on.
|
|
29
|
+
*
|
|
30
|
+
* An explicit `focusDate` wins, then the selected value — both are the
|
|
31
|
+
* consumer's own instruction about where to look, so neither is second-guessed
|
|
32
|
+
* against `min`/`max`.
|
|
33
|
+
*
|
|
34
|
+
* Otherwise the calendar opens on today, clamped into the `min`/`max` window.
|
|
35
|
+
* Without the clamp a window that doesn't contain today (a 2019 audit range, a
|
|
36
|
+
* booking window opening next spring) opened on today's month with every day
|
|
37
|
+
* disabled, leaving prev/next clicking as the only way in.
|
|
38
|
+
*
|
|
39
|
+
* When clamping forward to `min`, that month leads: the whole selectable window
|
|
40
|
+
* runs ahead of it. When clamping back to `max`, the last pane lands on `max`'s
|
|
41
|
+
* month instead — with `numberOfMonths={2}` opening on `[max, max + 1]` would
|
|
42
|
+
* spend half the calendar on a month that is entirely out of bounds. That
|
|
43
|
+
* shift never crosses `min`'s month.
|
|
44
|
+
*/
|
|
45
|
+
export declare function getInitialFocusDate(options: InitialFocusDateOptions): PlainDate;
|
|
46
|
+
//# sourceMappingURL=getInitialFocusDate.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getInitialFocusDate.d.ts","sourceRoot":"","sources":["../../src/Calendar/getInitialFocusDate.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAE,SAAS,EAAC,MAAM,oBAAoB,CAAC;AACjE,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,uBAAuB;IACtC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,yEAAyE;IACzE,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAClC,gCAAgC;IAChC,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,8BAA8B;IAC9B,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,0DAA0D;IAC1D,cAAc,EAAE,MAAM,CAAC;IACvB,6EAA6E;IAC7E,KAAK,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,uBAAuB,GAC/B,SAAS,CAkCX"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file getInitialFocusDate.ts
|
|
5
|
+
* @input PlainDate utilities, min/max bounds, today
|
|
6
|
+
* @output Exports getInitialFocusDate — the month Calendar opens on
|
|
7
|
+
* @position Calendar-specific helper; used by Calendar.tsx
|
|
8
|
+
*
|
|
9
|
+
* SYNC: When modified, update:
|
|
10
|
+
* - /packages/core/src/Calendar/getInitialFocusDate.test.ts
|
|
11
|
+
* - /packages/core/src/Calendar/Calendar.tsx (the only caller)
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
import { plainDateFromISO, plainDateSetFirstOfMonth, plainDateAddMonths, plainDateIsBefore, plainDateIsAfter } from "../utils/plainDate.js";
|
|
15
|
+
/**
|
|
16
|
+
* Picks the date whose month the calendar opens on.
|
|
17
|
+
*
|
|
18
|
+
* An explicit `focusDate` wins, then the selected value — both are the
|
|
19
|
+
* consumer's own instruction about where to look, so neither is second-guessed
|
|
20
|
+
* against `min`/`max`.
|
|
21
|
+
*
|
|
22
|
+
* Otherwise the calendar opens on today, clamped into the `min`/`max` window.
|
|
23
|
+
* Without the clamp a window that doesn't contain today (a 2019 audit range, a
|
|
24
|
+
* booking window opening next spring) opened on today's month with every day
|
|
25
|
+
* disabled, leaving prev/next clicking as the only way in.
|
|
26
|
+
*
|
|
27
|
+
* When clamping forward to `min`, that month leads: the whole selectable window
|
|
28
|
+
* runs ahead of it. When clamping back to `max`, the last pane lands on `max`'s
|
|
29
|
+
* month instead — with `numberOfMonths={2}` opening on `[max, max + 1]` would
|
|
30
|
+
* spend half the calendar on a month that is entirely out of bounds. That
|
|
31
|
+
* shift never crosses `min`'s month.
|
|
32
|
+
*/
|
|
33
|
+
export function getInitialFocusDate(options) {
|
|
34
|
+
const {
|
|
35
|
+
focusDate,
|
|
36
|
+
value,
|
|
37
|
+
min,
|
|
38
|
+
max,
|
|
39
|
+
numberOfMonths,
|
|
40
|
+
today
|
|
41
|
+
} = options;
|
|
42
|
+
if (focusDate) {
|
|
43
|
+
return plainDateFromISO(focusDate);
|
|
44
|
+
}
|
|
45
|
+
if (value) {
|
|
46
|
+
return plainDateFromISO(typeof value === 'string' ? value : value.start);
|
|
47
|
+
}
|
|
48
|
+
const minDate = min ? plainDateFromISO(min) : null;
|
|
49
|
+
const maxDate = max ? plainDateFromISO(max) : null;
|
|
50
|
+
if (minDate && plainDateIsBefore(today, minDate)) {
|
|
51
|
+
return minDate;
|
|
52
|
+
}
|
|
53
|
+
if (maxDate && plainDateIsAfter(today, maxDate)) {
|
|
54
|
+
const lastPaneOffset = Math.max(0, numberOfMonths - 1);
|
|
55
|
+
const shifted = plainDateAddMonths(plainDateSetFirstOfMonth(maxDate), -lastPaneOffset);
|
|
56
|
+
if (minDate && plainDateIsBefore(shifted, plainDateSetFirstOfMonth(minDate))) {
|
|
57
|
+
return minDate;
|
|
58
|
+
}
|
|
59
|
+
return shifted;
|
|
60
|
+
}
|
|
61
|
+
return today;
|
|
62
|
+
}
|
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
*
|
|
7
7
|
* Renders a container with role="log" for chat message histories.
|
|
8
8
|
* Handles density context, configurable gap, empty state,
|
|
9
|
-
* a spacer that pushes messages to the bottom,
|
|
9
|
+
* a configurable spacer (align) that pushes messages to the bottom,
|
|
10
|
+
* and an infinite scroll sentinel.
|
|
10
11
|
*
|
|
11
12
|
* Auto-scroll and the scroll-to-bottom button are owned by
|
|
12
13
|
* ChatLayout. When used standalone (without a layout), the list
|
|
@@ -52,6 +53,23 @@ export interface ChatMessageListProps extends BaseProps<HTMLDivElement> {
|
|
|
52
53
|
* be grouped) and row spacing should be tuned separately from density.
|
|
53
54
|
*/
|
|
54
55
|
gap?: SpacingStep;
|
|
56
|
+
/**
|
|
57
|
+
* Vertical alignment of messages when the list is shorter than its
|
|
58
|
+
* container.
|
|
59
|
+
*
|
|
60
|
+
* - `'bottom'` (default): a spacer fills the free space and pushes
|
|
61
|
+
* messages to the bottom, so a short conversation sits just above the
|
|
62
|
+
* composer — the familiar messaging-app layout.
|
|
63
|
+
* - `'top'`: the spacer is omitted, so messages start at the top and grow
|
|
64
|
+
* downward — better for document-style or log-style lists.
|
|
65
|
+
*
|
|
66
|
+
* This only changes the resting position of a non-full list. Once messages
|
|
67
|
+
* overflow the container the spacer collapses to zero in both modes, so
|
|
68
|
+
* ChatLayout auto-scroll-to-bottom behavior is identical either way.
|
|
69
|
+
*
|
|
70
|
+
* @default 'bottom'
|
|
71
|
+
*/
|
|
72
|
+
align?: 'top' | 'bottom';
|
|
55
73
|
/**
|
|
56
74
|
* Whether an assistant message is actively streaming into the list.
|
|
57
75
|
*
|
|
@@ -71,7 +89,8 @@ export interface ChatMessageListProps extends BaseProps<HTMLDivElement> {
|
|
|
71
89
|
*
|
|
72
90
|
* Renders messages in a flex column with density-based spacing.
|
|
73
91
|
* Override gap to tune row spacing separately from density.
|
|
74
|
-
*
|
|
92
|
+
* By default a spacer pushes content to the bottom when the list isn't full;
|
|
93
|
+
* set `align='top'` to start messages at the top instead.
|
|
75
94
|
* Supports loading older messages via `scrollToTopAction`.
|
|
76
95
|
*
|
|
77
96
|
* Auto-scroll and the scroll-to-bottom button are owned by
|
|
@@ -86,7 +105,7 @@ export interface ChatMessageListProps extends BaseProps<HTMLDivElement> {
|
|
|
86
105
|
* </ChatMessageList>
|
|
87
106
|
* ```
|
|
88
107
|
*/
|
|
89
|
-
export declare function ChatMessageList({ children, emptyState, scrollToTopAction, density, gap, isStreaming, xstyle, className, style, 'data-testid': testId, ref, ...rest }: ChatMessageListProps): import("react").JSX.Element;
|
|
108
|
+
export declare function ChatMessageList({ children, emptyState, scrollToTopAction, density, gap, align, isStreaming, xstyle, className, style, 'data-testid': testId, ref, ...rest }: ChatMessageListProps): import("react").JSX.Element;
|
|
90
109
|
export declare namespace ChatMessageList {
|
|
91
110
|
var displayName: string;
|
|
92
111
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatMessageList.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessageList.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"ChatMessageList.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessageList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAGhF,OAAO,EAEL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGhD,MAAM,WAAW,oBAAqB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACrE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAExC;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAEzB;;;;;;;;;;;OAWG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA4FD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,UAAU,EACV,iBAAiB,EACjB,OAAoB,EACpB,GAAG,EACH,KAAgB,EAChB,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,oBAAoB,+BAgGtB;yBA9Ge,eAAe"}
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
*
|
|
11
11
|
* Renders a container with role="log" for chat message histories.
|
|
12
12
|
* Handles density context, configurable gap, empty state,
|
|
13
|
-
* a spacer that pushes messages to the bottom,
|
|
13
|
+
* a configurable spacer (align) that pushes messages to the bottom,
|
|
14
|
+
* and an infinite scroll sentinel.
|
|
14
15
|
*
|
|
15
16
|
* Auto-scroll and the scroll-to-bottom button are owned by
|
|
16
17
|
* ChatLayout. When used standalone (without a layout), the list
|
|
@@ -124,7 +125,8 @@ const gapStyles = {
|
|
|
124
125
|
*
|
|
125
126
|
* Renders messages in a flex column with density-based spacing.
|
|
126
127
|
* Override gap to tune row spacing separately from density.
|
|
127
|
-
*
|
|
128
|
+
* By default a spacer pushes content to the bottom when the list isn't full;
|
|
129
|
+
* set `align='top'` to start messages at the top instead.
|
|
128
130
|
* Supports loading older messages via `scrollToTopAction`.
|
|
129
131
|
*
|
|
130
132
|
* Auto-scroll and the scroll-to-bottom button are owned by
|
|
@@ -145,6 +147,7 @@ export function ChatMessageList({
|
|
|
145
147
|
scrollToTopAction,
|
|
146
148
|
density = 'balanced',
|
|
147
149
|
gap,
|
|
150
|
+
align = 'bottom',
|
|
148
151
|
isStreaming = false,
|
|
149
152
|
xstyle,
|
|
150
153
|
className,
|
|
@@ -217,7 +220,7 @@ export function ChatMessageList({
|
|
|
217
220
|
children: /*#__PURE__*/_jsx(Spinner, {
|
|
218
221
|
size: "md"
|
|
219
222
|
})
|
|
220
|
-
}), /*#__PURE__*/_jsx("div", {
|
|
223
|
+
}), align === 'bottom' && /*#__PURE__*/_jsx("div", {
|
|
221
224
|
...{
|
|
222
225
|
className: "x98rzlu x2lwn1j"
|
|
223
226
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACT,MAAM,gBAAgB,CAAC;AAiBxB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACT,MAAM,gBAAgB,CAAC;AAiBxB,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,UAAU,CAAC;AAG7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAElE,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,CAAC,kBAAkB,CAAC,EAC7B,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IACpC;;;OAGG;IACH,KAAK,EAAE,YAAY,CAAC;IAEpB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;;;;;;;;;OAWG;IACH,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAE9C;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,IAAI,EACJ,kBAAkB,EAClB,KAAiB,EACjB,OAAiB,EACjB,QAAY,EACZ,kBAAyB,EACzB,SAAS,EACT,QAAQ,EACR,OAAiB,EACjB,UAAkB,EAClB,gBAAwB,EACxB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,+BAsFd;yBAzGe,OAAO"}
|
package/dist/Heading/Heading.js
CHANGED
|
@@ -21,7 +21,8 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
21
21
|
import { colorStyles, sizeByLevelStyles, sizeByTypeStyles, defaultWeightByTypeStyles, displayStyles, justifyStyles, truncationStyles, wordBreakStyles, textWrapStyles, capsizeStyles, decorationStyles, truncationTooltipStyles } from "../Text/text.stylex.js";
|
|
22
22
|
import { useTruncation } from "../Text/useTruncation.js";
|
|
23
23
|
import { resolveStyleColor } from "../Text/Text.js";
|
|
24
|
-
import { mergeProps
|
|
24
|
+
import { mergeProps } from "../utils/index.js";
|
|
25
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
25
26
|
import { themeProps } from "../utils/themeProps.js";
|
|
26
27
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
27
28
|
const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import("../Tooltip/Tooltip.js").then(mod => ({
|
|
@@ -107,13 +108,16 @@ export function Heading({
|
|
|
107
108
|
// Ref for the heading element (used as tooltip anchor)
|
|
108
109
|
const headingRef = useRef(null);
|
|
109
110
|
|
|
111
|
+
// Keep the merged ref stable across rerenders.
|
|
112
|
+
const mergedRef = useMergedRefs(ref, truncation.ref, headingRef);
|
|
113
|
+
|
|
110
114
|
// Build inline style for -webkit-line-clamp (dynamic value)
|
|
111
115
|
const inlineStyle = maxLines > 1 ? {
|
|
112
116
|
WebkitLineClamp: maxLines
|
|
113
117
|
} : undefined;
|
|
114
118
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
115
119
|
children: [/*#__PURE__*/_jsx(Component, {
|
|
116
|
-
ref:
|
|
120
|
+
ref: mergedRef,
|
|
117
121
|
...mergeProps(themeProps('heading', {
|
|
118
122
|
level,
|
|
119
123
|
color,
|
|
@@ -22,6 +22,10 @@ export type MultiSelectorSize = 'sm' | 'md' | 'lg';
|
|
|
22
22
|
export type MultiSelectorVariant = 'input' | 'ghost';
|
|
23
23
|
export type MultiSelectorStatusType = 'warning' | 'error' | 'success';
|
|
24
24
|
export type { MultiSelectorStatus };
|
|
25
|
+
export interface MultiSelectorSelectedItem {
|
|
26
|
+
value: string;
|
|
27
|
+
label: string;
|
|
28
|
+
}
|
|
25
29
|
export interface MultiSelectorProps<T extends MultiSelectorOptionType = MultiSelectorOptionType> extends Omit<BaseProps, 'onChange' | 'defaultValue'> {
|
|
26
30
|
/**
|
|
27
31
|
* Label text for the multi-selector (always rendered for accessibility).
|
|
@@ -179,6 +183,16 @@ export interface MultiSelectorProps<T extends MultiSelectorOptionType = MultiSel
|
|
|
179
183
|
* @default 'count'
|
|
180
184
|
*/
|
|
181
185
|
triggerDisplay?: 'count' | 'labels' | 'badges';
|
|
186
|
+
/**
|
|
187
|
+
* Formats the trigger text when triggerDisplay is 'count' or 'labels'.
|
|
188
|
+
* Receives the selected items (value plus resolved label, in selection
|
|
189
|
+
* order) and returns the full trigger text; the count is `items.length`.
|
|
190
|
+
* Not called when nothing is selected — the placeholder shows instead — and
|
|
191
|
+
* not called for triggerDisplay 'badges', which renders Badge elements
|
|
192
|
+
* rather than text.
|
|
193
|
+
* @default items => `${items.length} selected` for 'count', "A, B, C, +N" for 'labels'
|
|
194
|
+
*/
|
|
195
|
+
formatValue?: (items: MultiSelectorSelectedItem[]) => string;
|
|
182
196
|
/**
|
|
183
197
|
* Maximum number of badges to show before showing "+N".
|
|
184
198
|
* Only used when triggerDisplay is 'badges'.
|
|
@@ -222,7 +236,7 @@ export interface MultiSelectorProps<T extends MultiSelectorOptionType = MultiSel
|
|
|
222
236
|
* />
|
|
223
237
|
* ```
|
|
224
238
|
*/
|
|
225
|
-
export declare function MultiSelector<T extends MultiSelectorOptionType>({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, options, value, onChange, changeAction, isLoading, placeholder: placeholderFromProps, size: sizeProp, variant, status, statusVariant, labelTooltip, startIcon, hasClear, hasSelectAll, selectAllLabel: selectAllLabelFromProps, hasSearch, searchPlaceholder: searchPlaceholderFromProps, triggerDisplay, maxBadges, renderOption, indicatorPosition, isDefaultOpen, 'data-testid': testId, htmlName, width, xstyle, className, style, }: MultiSelectorProps<T>): React.JSX.Element;
|
|
239
|
+
export declare function MultiSelector<T extends MultiSelectorOptionType>({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, options, value, onChange, changeAction, isLoading, placeholder: placeholderFromProps, size: sizeProp, variant, status, statusVariant, labelTooltip, startIcon, hasClear, hasSelectAll, selectAllLabel: selectAllLabelFromProps, hasSearch, searchPlaceholder: searchPlaceholderFromProps, triggerDisplay, formatValue, maxBadges, renderOption, indicatorPosition, isDefaultOpen, 'data-testid': testId, htmlName, width, xstyle, className, style, }: MultiSelectorProps<T>): React.JSX.Element;
|
|
226
240
|
export declare namespace MultiSelector {
|
|
227
241
|
var displayName: string;
|
|
228
242
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -276,6 +276,7 @@ export function MultiSelector({
|
|
|
276
276
|
hasSearch = false,
|
|
277
277
|
searchPlaceholder: searchPlaceholderFromProps,
|
|
278
278
|
triggerDisplay = 'count',
|
|
279
|
+
formatValue,
|
|
279
280
|
maxBadges = 3,
|
|
280
281
|
renderOption,
|
|
281
282
|
indicatorPosition = 'start',
|
|
@@ -576,12 +577,16 @@ export function MultiSelector({
|
|
|
576
577
|
}, [popover.isOpen, highlightedIndex, getItemId]);
|
|
577
578
|
|
|
578
579
|
// Build trigger display content
|
|
579
|
-
const
|
|
580
|
+
const selectedItems = useMemo(() => {
|
|
580
581
|
return optimisticValue.map(v => {
|
|
581
582
|
const item = selectableItems.find(i => i.value === v);
|
|
582
|
-
return
|
|
583
|
+
return {
|
|
584
|
+
value: v,
|
|
585
|
+
label: item?.label ?? v
|
|
586
|
+
};
|
|
583
587
|
});
|
|
584
588
|
}, [optimisticValue, selectableItems]);
|
|
589
|
+
const selectedLabels = useMemo(() => selectedItems.map(item => item.label), [selectedItems]);
|
|
585
590
|
const renderTriggerContent = useCallback(() => {
|
|
586
591
|
if (optimisticValue.length === 0) {
|
|
587
592
|
return /*#__PURE__*/_jsx("span", {
|
|
@@ -593,11 +598,11 @@ export function MultiSelector({
|
|
|
593
598
|
}
|
|
594
599
|
switch (triggerDisplay) {
|
|
595
600
|
case 'count':
|
|
596
|
-
return /*#__PURE__*/
|
|
601
|
+
return /*#__PURE__*/_jsx("span", {
|
|
597
602
|
...{
|
|
598
603
|
className: "xb3r6kr xlyipyv xuxw1ft"
|
|
599
604
|
},
|
|
600
|
-
children:
|
|
605
|
+
children: formatValue?.(selectedItems) ?? `${optimisticValue.length} selected`
|
|
601
606
|
});
|
|
602
607
|
case 'labels':
|
|
603
608
|
{
|
|
@@ -608,7 +613,7 @@ export function MultiSelector({
|
|
|
608
613
|
...{
|
|
609
614
|
className: "xb3r6kr xlyipyv xuxw1ft"
|
|
610
615
|
},
|
|
611
|
-
children: text
|
|
616
|
+
children: formatValue?.(selectedItems) ?? text
|
|
612
617
|
});
|
|
613
618
|
}
|
|
614
619
|
case 'badges':
|
|
@@ -631,7 +636,7 @@ export function MultiSelector({
|
|
|
631
636
|
});
|
|
632
637
|
}
|
|
633
638
|
}
|
|
634
|
-
}, [optimisticValue, triggerDisplay, selectedLabels, placeholder, maxBadges]);
|
|
639
|
+
}, [optimisticValue, triggerDisplay, selectedItems, selectedLabels, placeholder, formatValue, maxBadges]);
|
|
635
640
|
|
|
636
641
|
// Render search input
|
|
637
642
|
const renderSearch = useCallback(() => {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* @output Exports MultiSelector and types
|
|
4
4
|
* @position Public API entry point
|
|
5
5
|
*/
|
|
6
|
-
export { MultiSelector, type MultiSelectorProps, type MultiSelectorSize, type MultiSelectorStatusType, } from './MultiSelector';
|
|
6
|
+
export { MultiSelector, type MultiSelectorProps, type MultiSelectorSize, type MultiSelectorStatusType, type MultiSelectorSelectedItem, } from './MultiSelector';
|
|
7
7
|
export type { MultiSelectorOptionType, MultiSelectorOptionData, MultiSelectorDivider, MultiSelectorSection, MultiSelectorStatus, } from './types';
|
|
8
8
|
export { useMultiCombobox } from './hooks';
|
|
9
9
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/index.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AAEH,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/index.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AAEH,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,GAC/B,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC"}
|
|
@@ -88,6 +88,9 @@ export interface UseTablePaginationConfig {
|
|
|
88
88
|
align?: 'start' | 'center' | 'end';
|
|
89
89
|
/**
|
|
90
90
|
* Accessible label for the pagination nav landmark.
|
|
91
|
+
* When `position` is 'both', the two navs get distinct names by suffixing
|
|
92
|
+
* this label — "{label} (top)" above and "{label} (bottom)" below — so
|
|
93
|
+
* same-type landmarks stay distinguishable to assistive technology.
|
|
91
94
|
* @default 'Table pagination'
|
|
92
95
|
*/
|
|
93
96
|
label?: string;
|