@astryxdesign/core 0.6.2-canary.f09c260 → 0.6.2-canary.fc74d7e
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/Field/InputClearButton.d.ts +2 -4
- package/dist/Field/InputClearButton.d.ts.map +1 -1
- package/dist/Field/InputClearButton.js +2 -4
- package/dist/TreeList/TreeList.d.ts.map +1 -1
- package/dist/TreeList/TreeList.js +0 -3
- package/dist/TreeList/TreeListItem.d.ts +1 -6
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +2 -12
- package/dist/TreeList/TreeListTypes.d.ts +1 -8
- package/dist/TreeList/TreeListTypes.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/Field/InputClearButton.test.tsx +3 -17
- package/src/Field/InputClearButton.tsx +2 -5
- package/src/TreeList/TreeList.doc.mjs +3 -3
- package/src/TreeList/TreeList.test.tsx +0 -29
- package/src/TreeList/TreeList.tsx +0 -3
- package/src/TreeList/TreeListItem.tsx +1 -15
- package/src/TreeList/TreeListTypes.ts +1 -11
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file InputClearButton.tsx
|
|
3
|
-
* @input Uses React, Button,
|
|
4
|
-
* @output Exports the public InputClearButton and an internal popup-aware variant
|
|
5
|
-
* both with a contextual tooltip matching their required label.
|
|
3
|
+
* @input Uses React, Button, Icon
|
|
4
|
+
* @output Exports the public InputClearButton and an internal popup-aware variant.
|
|
6
5
|
* @position Shared primitive. Every input that renders a clear affordance —
|
|
7
6
|
* TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
|
|
8
7
|
* DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
|
|
@@ -13,7 +12,6 @@
|
|
|
13
12
|
import type { ReactNode } from 'react';
|
|
14
13
|
import * as stylex from '@stylexjs/stylex';
|
|
15
14
|
export interface InputClearButtonProps {
|
|
16
|
-
/** Contextual accessible name for the button, such as "Clear Search". */
|
|
17
15
|
label: string;
|
|
18
16
|
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
19
17
|
xstyle?: stylex.StyleXStyles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAkD3C,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,6BAA8B,SAAQ,qBAAqB;IACnE,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACtD,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CACtD;AAgDD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,CAExE;yBAFe,gBAAgB;;;AAIhC,4EAA4E;AAC5E,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,6BAA6B,GACnC,SAAS,CAEX"}
|
|
@@ -4,9 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file InputClearButton.tsx
|
|
7
|
-
* @input Uses React, Button,
|
|
8
|
-
* @output Exports the public InputClearButton and an internal popup-aware variant
|
|
9
|
-
* both with a contextual tooltip matching their required label.
|
|
7
|
+
* @input Uses React, Button, Icon
|
|
8
|
+
* @output Exports the public InputClearButton and an internal popup-aware variant.
|
|
10
9
|
* @position Shared primitive. Every input that renders a clear affordance —
|
|
11
10
|
* TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
|
|
12
11
|
* DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
|
|
@@ -50,7 +49,6 @@ function renderInputClearButton({
|
|
|
50
49
|
variant: "ghost",
|
|
51
50
|
size: "sm",
|
|
52
51
|
label: label,
|
|
53
|
-
tooltip: label,
|
|
54
52
|
className: buttonTargetClassName,
|
|
55
53
|
icon: /*#__PURE__*/_jsx(Icon, {
|
|
56
54
|
icon: "close",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeList.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAwC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI5E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EACV,gBAAgB,EAChB,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,EAAC,KAAK,eAAe,EAAE,KAAK,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAE3E,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAE1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmFD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAoB,EACpB,OAAsB,EACtB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,EACH,SAAS,EAAE,aAAa,EACxB,GAAG,SAAS,EACb,EAAE,aAAa,+
|
|
1
|
+
{"version":3,"file":"TreeList.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAwC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI5E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EACV,gBAAgB,EAChB,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,EAAC,KAAK,eAAe,EAAE,KAAK,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAE3E,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAE1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmFD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAoB,EACpB,OAAsB,EACtB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,GAAG,EACH,SAAS,EAAE,aAAa,EACxB,GAAG,SAAS,EACb,EAAE,aAAa,+BAuLf;yBArMe,QAAQ"}
|
|
@@ -214,9 +214,6 @@ export function TreeList({
|
|
|
214
214
|
description: item.description,
|
|
215
215
|
startContent: item.startContent,
|
|
216
216
|
endContent: item.endContent,
|
|
217
|
-
xstyle: item.xstyle,
|
|
218
|
-
className: item.className,
|
|
219
|
-
style: item.style,
|
|
220
217
|
hasChildren: hasChildren,
|
|
221
218
|
hasExpandableItems: hasExpandableItems,
|
|
222
219
|
onClick: item.onClick,
|
|
@@ -10,7 +10,6 @@
|
|
|
10
10
|
* - /packages/cli/assets/templates/blocks/components/TreeList/ (showcase blocks)
|
|
11
11
|
*/
|
|
12
12
|
import { type ReactNode } from 'react';
|
|
13
|
-
import * as stylex from '@stylexjs/stylex';
|
|
14
13
|
import type { TreeListDensity, TreeListVariant } from './TreeListTypes';
|
|
15
14
|
export interface TreeListItemInternalProps {
|
|
16
15
|
id: string;
|
|
@@ -23,10 +22,6 @@ export interface TreeListItemInternalProps {
|
|
|
23
22
|
target?: string;
|
|
24
23
|
isDisabled?: boolean;
|
|
25
24
|
isSelected?: boolean;
|
|
26
|
-
/** Consumer styles for the row element. See `TreeListItemData`. */
|
|
27
|
-
xstyle?: stylex.StyleXStyles;
|
|
28
|
-
className?: string;
|
|
29
|
-
style?: React.CSSProperties;
|
|
30
25
|
hasChildren: boolean;
|
|
31
26
|
/**
|
|
32
27
|
* Whether the tree contains at least one expandable item anywhere (i.e. a
|
|
@@ -63,7 +58,7 @@ export interface TreeListItemInternalProps {
|
|
|
63
58
|
*/
|
|
64
59
|
isTabbable: boolean;
|
|
65
60
|
}
|
|
66
|
-
export declare function TreeListItem({ id, label, description, startContent, endContent,
|
|
61
|
+
export declare function TreeListItem({ id, label, description, startContent, endContent, onClick, href, target, isDisabled, isSelected, hasChildren, hasExpandableItems, nestedLevel, isLast, ancestorsIsLast, isExpanded, onToggle, density, variant, renderedChildren, posInSet, setSize, isTabbable, }: TreeListItemInternalProps): import("react").JSX.Element;
|
|
67
62
|
export declare namespace TreeListItem {
|
|
68
63
|
var displayName: string;
|
|
69
64
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAgBrD,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AA2PtE,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB;;;;OAIG;IACH,OAAO,EAAE,eAAe,CAAC;IACzB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AAMD,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,eAAe,EACf,UAAU,EACV,QAAQ,EACR,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,+BA4P3B;yBApRe,YAAY"}
|
|
@@ -149,9 +149,6 @@ export function TreeListItem({
|
|
|
149
149
|
description,
|
|
150
150
|
startContent,
|
|
151
151
|
endContent,
|
|
152
|
-
xstyle,
|
|
153
|
-
className,
|
|
154
|
-
style,
|
|
155
152
|
onClick,
|
|
156
153
|
href,
|
|
157
154
|
target,
|
|
@@ -380,15 +377,8 @@ export function TreeListItem({
|
|
|
380
377
|
density,
|
|
381
378
|
selected: isSelected ? 'selected' : null,
|
|
382
379
|
disabled: isDisabled ? 'disabled' : null
|
|
383
|
-
}), isInteractive || hasChildren && onClick == null ? focusOutlineProps.focusWithinOrPublished(styles.contentWrapper, densityStyles[density], styles.interactive, interactionOverlayStyles.backgroundImage, isDisabled && styles.disabled, isSelected && styles.selected
|
|
384
|
-
|
|
385
|
-
// publish both its classes and inline custom properties. Seed the
|
|
386
|
-
// private indent first, then preserve the standard inline-style
|
|
387
|
-
// precedence promised by the TreeList contract.
|
|
388
|
-
className, {
|
|
389
|
-
...indentStyle,
|
|
390
|
-
...style
|
|
391
|
-
}),
|
|
380
|
+
}), isInteractive || hasChildren && onClick == null ? focusOutlineProps.focusWithinOrPublished(styles.contentWrapper, densityStyles[density], styles.interactive, interactionOverlayStyles.backgroundImage, isDisabled && styles.disabled, isSelected && styles.selected) : stylex.props(styles.contentWrapper, densityStyles[density], isDisabled && styles.disabled, isSelected && styles.selected)),
|
|
381
|
+
style: indentStyle,
|
|
392
382
|
onClick: handleClick,
|
|
393
383
|
children: innerContent
|
|
394
384
|
})
|
|
@@ -8,8 +8,7 @@
|
|
|
8
8
|
* - /packages/core/src/TreeList/TreeList.doc.mjs
|
|
9
9
|
* - /packages/core/src/TreeList/index.ts
|
|
10
10
|
*/
|
|
11
|
-
import type {
|
|
12
|
-
import type { StyleXStyles } from '@stylexjs/stylex';
|
|
11
|
+
import type { ReactNode } from 'react';
|
|
13
12
|
import type { TreeListVariantMap } from './index';
|
|
14
13
|
/** Spacing density for tree list items. */
|
|
15
14
|
export type TreeListDensity = 'compact' | 'balanced' | 'spacious';
|
|
@@ -46,11 +45,5 @@ export interface TreeListItemData {
|
|
|
46
45
|
isSelected?: boolean;
|
|
47
46
|
/** Whether the item is initially expanded. Only meaningful for items with children. */
|
|
48
47
|
isExpanded?: boolean;
|
|
49
|
-
/** StyleX styles applied to the item's row element. */
|
|
50
|
-
xstyle?: StyleXStyles;
|
|
51
|
-
/** Class applied to the item's row element. */
|
|
52
|
-
className?: string;
|
|
53
|
-
/** Inline styles applied to the item's row element. */
|
|
54
|
-
style?: CSSProperties;
|
|
55
48
|
}
|
|
56
49
|
//# sourceMappingURL=TreeListTypes.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeListTypes.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListTypes.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAC,
|
|
1
|
+
{"version":3,"file":"TreeListTypes.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListTypes.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAEhD,2CAA2C;AAC3C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAElE;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,iDAAiD;AACjD,MAAM,WAAW,gBAAgB;IAC/B,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IAEX,uCAAuC;IACvC,KAAK,EAAE,SAAS,CAAC;IAEjB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,kEAAkE;IAClE,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE9B,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAExC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,uFAAuF;IACvF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/core",
|
|
3
|
-
"version": "0.6.2-canary.
|
|
3
|
+
"version": "0.6.2-canary.fc74d7e",
|
|
4
4
|
"displayName": "Astryx Core",
|
|
5
5
|
"description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
|
|
6
6
|
"author": "Meta Open Source",
|
|
@@ -687,8 +687,8 @@
|
|
|
687
687
|
"react-dom": ">=19.0.0"
|
|
688
688
|
},
|
|
689
689
|
"devDependencies": {
|
|
690
|
-
"@astryxdesign/a11y-spec": "0.6.2-canary.
|
|
691
|
-
"@astryxdesign/cli": "0.6.2-canary.
|
|
690
|
+
"@astryxdesign/a11y-spec": "0.6.2-canary.fc74d7e",
|
|
691
|
+
"@astryxdesign/cli": "0.6.2-canary.fc74d7e",
|
|
692
692
|
"@babel/cli": "^7.29.7",
|
|
693
693
|
"@babel/core": "^7.29.7",
|
|
694
694
|
"@babel/preset-react": "^7.29.7",
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
* @output Unit tests for the shared clear-button primitive
|
|
9
9
|
* @position Testing; validates InputClearButton.tsx — the single home for the
|
|
10
10
|
* clearable input family's clear (✕) affordance and its theme target. Covers
|
|
11
|
-
* the accessible name,
|
|
12
|
-
*
|
|
11
|
+
* the accessible name, the click callback, the decorative registry glyph,
|
|
12
|
+
* both theme targets, the touch hit area, and xstyle forwarding.
|
|
13
13
|
*
|
|
14
14
|
* SYNC: When InputClearButton.tsx changes, update tests to match new behavior.
|
|
15
15
|
*/
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
import {readFileSync} from 'node:fs';
|
|
18
18
|
import path from 'node:path';
|
|
19
19
|
import {describe, it, expect, vi, afterEach} from 'vitest';
|
|
20
|
-
import {render, screen, fireEvent
|
|
20
|
+
import {render, screen, fireEvent} from '@testing-library/react';
|
|
21
21
|
import * as stylex from '@stylexjs/stylex';
|
|
22
22
|
import {
|
|
23
23
|
InputClearButton,
|
|
@@ -95,20 +95,6 @@ describe('InputClearButton public props', () => {
|
|
|
95
95
|
});
|
|
96
96
|
|
|
97
97
|
describe('InputClearButton', () => {
|
|
98
|
-
it('uses the contextual label for the tooltip and accessible name', async () => {
|
|
99
|
-
const showPopover = vi.spyOn(HTMLElement.prototype, 'showPopover');
|
|
100
|
-
render(<InputClearButton label="Clear Search" onClick={() => {}} />);
|
|
101
|
-
|
|
102
|
-
const button = screen.getByRole('button', {name: 'Clear Search'});
|
|
103
|
-
const tooltip = screen.getByRole('tooltip', {hidden: true});
|
|
104
|
-
expect(tooltip).toHaveTextContent(/^Clear Search$/);
|
|
105
|
-
expect(button.getAttribute('aria-describedby')).toBe(tooltip.id);
|
|
106
|
-
|
|
107
|
-
fireEvent.mouseEnter(button);
|
|
108
|
-
await waitFor(() => expect(showPopover).toHaveBeenCalled());
|
|
109
|
-
showPopover.mockRestore();
|
|
110
|
-
});
|
|
111
|
-
|
|
112
98
|
it('renders a real button with the given accessible label', () => {
|
|
113
99
|
render(<InputClearButton label="Clear" onClick={() => {}} />);
|
|
114
100
|
const button = screen.getByRole('button', {name: 'Clear'});
|
|
@@ -4,9 +4,8 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file InputClearButton.tsx
|
|
7
|
-
* @input Uses React, Button,
|
|
8
|
-
* @output Exports the public InputClearButton and an internal popup-aware variant
|
|
9
|
-
* both with a contextual tooltip matching their required label.
|
|
7
|
+
* @input Uses React, Button, Icon
|
|
8
|
+
* @output Exports the public InputClearButton and an internal popup-aware variant.
|
|
10
9
|
* @position Shared primitive. Every input that renders a clear affordance —
|
|
11
10
|
* TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
|
|
12
11
|
* DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
|
|
@@ -67,7 +66,6 @@ const styles = stylex.create({
|
|
|
67
66
|
});
|
|
68
67
|
|
|
69
68
|
export interface InputClearButtonProps {
|
|
70
|
-
/** Contextual accessible name for the button, such as "Clear Search". */
|
|
71
69
|
label: string;
|
|
72
70
|
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
73
71
|
xstyle?: stylex.StyleXStyles;
|
|
@@ -106,7 +104,6 @@ function renderInputClearButton({
|
|
|
106
104
|
variant="ghost"
|
|
107
105
|
size="sm"
|
|
108
106
|
label={label}
|
|
109
|
-
tooltip={label}
|
|
110
107
|
className={buttonTargetClassName}
|
|
111
108
|
icon={
|
|
112
109
|
<Icon
|
|
@@ -101,7 +101,7 @@ export const docs = {
|
|
|
101
101
|
name: 'items',
|
|
102
102
|
type: 'TreeListItemData[]',
|
|
103
103
|
description:
|
|
104
|
-
'Recursive tree item data
|
|
104
|
+
'Recursive tree item data. Each item has id, label, optional children array, and optional isExpanded boolean for initial state.',
|
|
105
105
|
required: true,
|
|
106
106
|
},
|
|
107
107
|
{
|
|
@@ -244,7 +244,7 @@ export const docsDense = {
|
|
|
244
244
|
],
|
|
245
245
|
},
|
|
246
246
|
propDescriptions: {
|
|
247
|
-
items: 'Recursive tree item data w/ id, label, optional children + isExpanded
|
|
247
|
+
items: 'Recursive tree item data w/ id, label, optional children + isExpanded.',
|
|
248
248
|
density: 'Spacing density for items.',
|
|
249
249
|
variant: 'Guide-line treatment: lineGuides shows connectors, noGuides hides them (indent kept). Orthogonal to density.',
|
|
250
250
|
header: 'Header content, linked to tree via aria-labelledby.',
|
|
@@ -256,7 +256,7 @@ export const docsDense = {
|
|
|
256
256
|
displayName: 'Tree List',
|
|
257
257
|
description: 'Tree list container. Accepts items data + rendering config. Expansion managed internally.',
|
|
258
258
|
propDescriptions: {
|
|
259
|
-
items: 'Recursive tree item data w/ id, label, optional children + isExpanded
|
|
259
|
+
items: 'Recursive tree item data w/ id, label, optional children + isExpanded.',
|
|
260
260
|
density: 'Spacing density for items.',
|
|
261
261
|
variant: 'Guide-line treatment: lineGuides shows connectors, noGuides hides them (indent kept). Orthogonal to density.',
|
|
262
262
|
header: 'Header content, linked to tree via aria-labelledby.',
|
|
@@ -12,7 +12,6 @@
|
|
|
12
12
|
import {describe, it, expect, vi} from 'vitest';
|
|
13
13
|
import {render, screen, fireEvent} from '@testing-library/react';
|
|
14
14
|
import userEvent from '@testing-library/user-event';
|
|
15
|
-
import * as stylex from '@stylexjs/stylex';
|
|
16
15
|
import {TreeList} from './TreeList';
|
|
17
16
|
import type {TreeListItemData} from './TreeListTypes';
|
|
18
17
|
import {defineTheme} from '../theme/defineTheme';
|
|
@@ -46,10 +45,6 @@ function collectCssText(): string {
|
|
|
46
45
|
.join('\n');
|
|
47
46
|
return out;
|
|
48
47
|
}
|
|
49
|
-
const rowStyles = stylex.create({
|
|
50
|
-
custom: {opacity: 0.75},
|
|
51
|
-
});
|
|
52
|
-
|
|
53
48
|
const simpleItems: TreeListItemData[] = [
|
|
54
49
|
{id: 'a', label: 'Item A'},
|
|
55
50
|
{id: 'b', label: 'Item B'},
|
|
@@ -463,30 +458,6 @@ describe('TreeList', () => {
|
|
|
463
458
|
expect(screen.getByTestId('badge')).toBeInTheDocument();
|
|
464
459
|
});
|
|
465
460
|
|
|
466
|
-
it('forwards xstyle, className, and style to an item row', () => {
|
|
467
|
-
const items: TreeListItemData[] = [
|
|
468
|
-
{
|
|
469
|
-
id: 'a',
|
|
470
|
-
label: 'Styled row',
|
|
471
|
-
xstyle: rowStyles.custom,
|
|
472
|
-
className: 'consumer-row',
|
|
473
|
-
style: {visibility: 'visible'},
|
|
474
|
-
},
|
|
475
|
-
];
|
|
476
|
-
render(<TreeList items={items} />);
|
|
477
|
-
|
|
478
|
-
const row = screen
|
|
479
|
-
.getByText('Styled row')
|
|
480
|
-
.closest('li')!
|
|
481
|
-
.querySelector('.astryx-tree-list-item')!;
|
|
482
|
-
expect(row).toHaveClass('consumer-row');
|
|
483
|
-
expect(row.className).toContain(
|
|
484
|
-
stylex.props(rowStyles.custom).className!.split(' ')[0],
|
|
485
|
-
);
|
|
486
|
-
expect(row).toHaveStyle({visibility: 'visible'});
|
|
487
|
-
expect(row.getAttribute('style')).toContain('--_tree-indent');
|
|
488
|
-
});
|
|
489
|
-
|
|
490
461
|
// ===========================================================================
|
|
491
462
|
// Density
|
|
492
463
|
// ===========================================================================
|
|
@@ -325,9 +325,6 @@ export function TreeList({
|
|
|
325
325
|
description={item.description}
|
|
326
326
|
startContent={item.startContent}
|
|
327
327
|
endContent={item.endContent}
|
|
328
|
-
xstyle={item.xstyle}
|
|
329
|
-
className={item.className}
|
|
330
|
-
style={item.style}
|
|
331
328
|
hasChildren={hasChildren}
|
|
332
329
|
hasExpandableItems={hasExpandableItems}
|
|
333
330
|
onClick={item.onClick}
|
|
@@ -292,10 +292,6 @@ export interface TreeListItemInternalProps {
|
|
|
292
292
|
target?: string;
|
|
293
293
|
isDisabled?: boolean;
|
|
294
294
|
isSelected?: boolean;
|
|
295
|
-
/** Consumer styles for the row element. See `TreeListItemData`. */
|
|
296
|
-
xstyle?: stylex.StyleXStyles;
|
|
297
|
-
className?: string;
|
|
298
|
-
style?: React.CSSProperties;
|
|
299
295
|
hasChildren: boolean;
|
|
300
296
|
/**
|
|
301
297
|
* Whether the tree contains at least one expandable item anywhere (i.e. a
|
|
@@ -343,9 +339,6 @@ export function TreeListItem({
|
|
|
343
339
|
description,
|
|
344
340
|
startContent,
|
|
345
341
|
endContent,
|
|
346
|
-
xstyle,
|
|
347
|
-
className,
|
|
348
|
-
style,
|
|
349
342
|
onClick,
|
|
350
343
|
href,
|
|
351
344
|
target,
|
|
@@ -596,22 +589,15 @@ export function TreeListItem({
|
|
|
596
589
|
interactionOverlayStyles.backgroundImage,
|
|
597
590
|
isDisabled && styles.disabled,
|
|
598
591
|
isSelected && styles.selected,
|
|
599
|
-
xstyle,
|
|
600
592
|
)
|
|
601
593
|
: stylex.props(
|
|
602
594
|
styles.contentWrapper,
|
|
603
595
|
densityStyles[density],
|
|
604
596
|
isDisabled && styles.disabled,
|
|
605
597
|
isSelected && styles.selected,
|
|
606
|
-
xstyle,
|
|
607
598
|
),
|
|
608
|
-
// Consumer row props are merged last so useContainerReveal can
|
|
609
|
-
// publish both its classes and inline custom properties. Seed the
|
|
610
|
-
// private indent first, then preserve the standard inline-style
|
|
611
|
-
// precedence promised by the TreeList contract.
|
|
612
|
-
className,
|
|
613
|
-
{...indentStyle, ...style},
|
|
614
599
|
)}
|
|
600
|
+
style={indentStyle}
|
|
615
601
|
onClick={handleClick}>
|
|
616
602
|
{innerContent}
|
|
617
603
|
</div>
|
|
@@ -11,8 +11,7 @@
|
|
|
11
11
|
* - /packages/core/src/TreeList/index.ts
|
|
12
12
|
*/
|
|
13
13
|
|
|
14
|
-
import type {
|
|
15
|
-
import type {StyleXStyles} from '@stylexjs/stylex';
|
|
14
|
+
import type {ReactNode} from 'react';
|
|
16
15
|
import type {TreeListVariantMap} from './index';
|
|
17
16
|
|
|
18
17
|
/** Spacing density for tree list items. */
|
|
@@ -63,13 +62,4 @@ export interface TreeListItemData {
|
|
|
63
62
|
|
|
64
63
|
/** Whether the item is initially expanded. Only meaningful for items with children. */
|
|
65
64
|
isExpanded?: boolean;
|
|
66
|
-
|
|
67
|
-
/** StyleX styles applied to the item's row element. */
|
|
68
|
-
xstyle?: StyleXStyles;
|
|
69
|
-
|
|
70
|
-
/** Class applied to the item's row element. */
|
|
71
|
-
className?: string;
|
|
72
|
-
|
|
73
|
-
/** Inline styles applied to the item's row element. */
|
|
74
|
-
style?: CSSProperties;
|
|
75
65
|
}
|