@astryxdesign/core 0.7.2-canary.ccf1a1c → 0.7.2-canary.d3ec0b2
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 +6 -8
- package/dist/AspectRatio/AspectRatio.d.ts.map +1 -1
- package/dist/AspectRatio/AspectRatio.js +44 -3
- package/dist/CheckboxInput/CheckboxInput.d.ts +1 -1
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +3 -1
- package/dist/CheckboxList/CheckboxListItem.d.ts +9 -1
- package/dist/CheckboxList/CheckboxListItem.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxListItem.js +4 -2
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +20 -8
- package/dist/DropdownMenu/DropdownMenuDivider.d.ts +5 -3
- package/dist/DropdownMenu/DropdownMenuDivider.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuDivider.js +7 -3
- package/dist/Item/Item.d.ts +6 -2
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +19 -4
- package/dist/List/List.d.ts +46 -19
- package/dist/List/List.d.ts.map +1 -1
- package/dist/List/List.js +28 -10
- package/dist/List/ListContext.d.ts +8 -3
- package/dist/List/ListContext.d.ts.map +1 -1
- package/dist/List/ListContext.js +7 -2
- package/dist/List/ListItem.d.ts +13 -5
- package/dist/List/ListItem.d.ts.map +1 -1
- package/dist/List/ListItem.js +21 -8
- package/dist/List/index.d.ts +1 -1
- package/dist/List/index.d.ts.map +1 -1
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +8 -1
- package/dist/RadioList/RadioListItem.d.ts +9 -1
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +2 -0
- package/dist/astryx.css +14 -2
- package/dist/utils/plainDate.d.ts.map +1 -1
- package/dist/utils/plainDate.js +15 -9
- package/package.json +3 -3
- package/src/AspectRatio/AspectRatio.test.tsx +44 -43
- package/src/AspectRatio/AspectRatio.tsx +38 -18
- package/src/AspectRatio/__tests__/AspectRatioFitLayers.a11y.browser.spec.ts +157 -0
- package/src/CheckboxInput/CheckboxInput.test.tsx +34 -0
- package/src/CheckboxInput/CheckboxInput.tsx +3 -1
- package/src/CheckboxList/CheckboxList.test.tsx +22 -0
- package/src/CheckboxList/CheckboxListItem.doc.mjs +16 -0
- package/src/CheckboxList/CheckboxListItem.tsx +10 -0
- package/src/Dialog/Dialog.test.tsx +46 -0
- package/src/Dialog/Dialog.tsx +20 -7
- package/src/Dialog/__tests__/Dialog.a11y.known-failures.ts +0 -14
- package/src/DropdownMenu/DropdownMenu.test.tsx +21 -12
- package/src/DropdownMenu/DropdownMenuDivider.doc.mjs +2 -2
- package/src/DropdownMenu/DropdownMenuDivider.tsx +9 -5
- package/src/DropdownMenu/__tests__/Menu.a11y.chromium.spec.ts +145 -0
- package/src/DropdownMenu/__tests__/Menu.a11y.known-failures.ts +26 -0
- package/src/DropdownMenu/__tests__/Menu.a11y.renders.tsx +65 -0
- package/src/DropdownMenu/__tests__/Menu.a11y.states.ts +138 -0
- package/src/DropdownMenu/__tests__/Menu.a11y.test.tsx +136 -0
- package/src/Item/Item.doc.mjs +12 -8
- package/src/Item/Item.spec.md +226 -0
- package/src/Item/Item.test.tsx +61 -0
- package/src/Item/Item.tsx +40 -4
- package/src/List/List.doc.mjs +14 -1
- package/src/List/List.spec.md +129 -77
- package/src/List/List.test.tsx +163 -94
- package/src/List/List.tsx +74 -18
- package/src/List/ListContext.tsx +9 -3
- package/src/List/ListItem.doc.mjs +16 -0
- package/src/List/ListItem.tsx +56 -27
- package/src/List/index.ts +1 -1
- package/src/Markdown/Markdown.tsx +14 -1
- package/src/RadioList/RadioList.test.tsx +22 -0
- package/src/RadioList/RadioListItem.doc.mjs +16 -0
- package/src/RadioList/RadioListItem.tsx +10 -1
- package/src/TabList/TabList.spec.md +57 -44
- package/src/TreeList/TreeList.spec.md +29 -17
- package/src/reset.css +0 -29
- package/src/theme/derivedVarRegistry.test.ts +3 -0
- package/src/utils/plainDate.test.ts +37 -1
- package/src/utils/plainDate.ts +15 -5
|
@@ -7,7 +7,6 @@
|
|
|
7
7
|
* SYNC: When modified, update these files to stay in sync:
|
|
8
8
|
* - /packages/core/src/AspectRatio/AspectRatio.doc.mjs
|
|
9
9
|
* - /packages/core/src/AspectRatio/AspectRatio.test.tsx
|
|
10
|
-
* - /packages/core/src/reset.css (AspectRatio fit baseline rules)
|
|
11
10
|
* - /apps/storybook/stories/AspectRatio.stories.tsx
|
|
12
11
|
* - /packages/cli/assets/templates/blocks/components/AspectRatio/ (showcase blocks)
|
|
13
12
|
*/
|
|
@@ -80,13 +79,12 @@ export interface AspectRatioProps extends BaseProps<HTMLDivElement> {
|
|
|
80
79
|
* (`object-fit: contain`).
|
|
81
80
|
* - `center`: child keeps its natural size, centered in the box.
|
|
82
81
|
*
|
|
83
|
-
* `cover`/`contain` child
|
|
84
|
-
*
|
|
85
|
-
*
|
|
86
|
-
*
|
|
87
|
-
*
|
|
88
|
-
*
|
|
89
|
-
* so it is not exposed on the theming surface.
|
|
82
|
+
* `cover`/`contain` size the child from the component's own styles, in
|
|
83
|
+
* the `astryx-base` cascade layer. Styles in a later layer (Tailwind
|
|
84
|
+
* utilities, `astryx-theme`), unlayered CSS, and inline styles on the
|
|
85
|
+
* child still win. When omitted, the child is left unstyled (the
|
|
86
|
+
* pre-existing contract). `fit` is structural, not visual, so it is not
|
|
87
|
+
* exposed on the theming surface.
|
|
90
88
|
*
|
|
91
89
|
* @example
|
|
92
90
|
* ```
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"AAEA
|
|
1
|
+
{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;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;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,GAAG,CAAC,EAAE,cAAc,CAAC;IAErB;;;;;;;OAOG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAkED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,+BAgClB;yBA1Ce,WAAW"}
|
|
@@ -9,7 +9,6 @@
|
|
|
9
9
|
* SYNC: When modified, update these files to stay in sync:
|
|
10
10
|
* - /packages/core/src/AspectRatio/AspectRatio.doc.mjs
|
|
11
11
|
* - /packages/core/src/AspectRatio/AspectRatio.test.tsx
|
|
12
|
-
* - /packages/core/src/reset.css (AspectRatio fit baseline rules)
|
|
13
12
|
* - /apps/storybook/stories/AspectRatio.stories.tsx
|
|
14
13
|
* - /packages/cli/assets/templates/blocks/components/AspectRatio/ (showcase blocks)
|
|
15
14
|
*/
|
|
@@ -132,10 +131,52 @@ export function AspectRatio({
|
|
|
132
131
|
0: {
|
|
133
132
|
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d"
|
|
134
133
|
},
|
|
135
|
-
|
|
134
|
+
8: {
|
|
136
135
|
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x78zum5 x6s0dn4 xl56j7k"
|
|
136
|
+
},
|
|
137
|
+
4: {
|
|
138
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d xyz6fim x1m6kvgq"
|
|
139
|
+
},
|
|
140
|
+
12: {
|
|
141
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x78zum5 x6s0dn4 xl56j7k xyz6fim x1m6kvgq"
|
|
142
|
+
},
|
|
143
|
+
2: {
|
|
144
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x492jj3"
|
|
145
|
+
},
|
|
146
|
+
10: {
|
|
147
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x78zum5 x6s0dn4 xl56j7k x492jj3"
|
|
148
|
+
},
|
|
149
|
+
6: {
|
|
150
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d xyz6fim x1m6kvgq x492jj3"
|
|
151
|
+
},
|
|
152
|
+
14: {
|
|
153
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x78zum5 x6s0dn4 xl56j7k xyz6fim x1m6kvgq x492jj3"
|
|
154
|
+
},
|
|
155
|
+
1: {
|
|
156
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x16lv2iq"
|
|
157
|
+
},
|
|
158
|
+
9: {
|
|
159
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x78zum5 x6s0dn4 xl56j7k x16lv2iq"
|
|
160
|
+
},
|
|
161
|
+
5: {
|
|
162
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d xyz6fim x1m6kvgq x16lv2iq"
|
|
163
|
+
},
|
|
164
|
+
13: {
|
|
165
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x78zum5 x6s0dn4 xl56j7k xyz6fim x1m6kvgq x16lv2iq"
|
|
166
|
+
},
|
|
167
|
+
3: {
|
|
168
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x16lv2iq"
|
|
169
|
+
},
|
|
170
|
+
11: {
|
|
171
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x78zum5 x6s0dn4 xl56j7k x16lv2iq"
|
|
172
|
+
},
|
|
173
|
+
7: {
|
|
174
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d xyz6fim x1m6kvgq x16lv2iq"
|
|
175
|
+
},
|
|
176
|
+
15: {
|
|
177
|
+
className: "x10l6tqk x13vifvy x1o0tod xh8yej3 x5yr21d x78zum5 x6s0dn4 xl56j7k xyz6fim x1m6kvgq x16lv2iq"
|
|
137
178
|
}
|
|
138
|
-
}[!!(fit === 'center') << 0],
|
|
179
|
+
}[!!(fit === 'center') << 3 | !!(fit === 'cover' || fit === 'contain') << 2 | !!(fit === 'cover') << 1 | !!(fit === 'contain') << 0],
|
|
139
180
|
children: children
|
|
140
181
|
})
|
|
141
182
|
});
|
|
@@ -158,7 +158,7 @@ export interface CheckboxInputProps extends Omit<BaseProps, 'onChange'> {
|
|
|
158
158
|
* />
|
|
159
159
|
* ```
|
|
160
160
|
*/
|
|
161
|
-
export declare function CheckboxInput({ label, isLabelHidden, description, onChange, changeAction, isLoading, value, isDisabled, htmlName, disabledMessage, isReadOnly, isOptional, isRequired, size, onFocus, onBlur, labelIcon, status, width, xstyle, className, style, ref, 'aria-describedby': ariaDescribedByProp, ...rest }: CheckboxInputProps): import("react").JSX.Element;
|
|
161
|
+
export declare function CheckboxInput({ id: idProp, label, isLabelHidden, description, onChange, changeAction, isLoading, value, isDisabled, htmlName, disabledMessage, isReadOnly, isOptional, isRequired, size, onFocus, onBlur, labelIcon, status, width, xstyle, className, style, ref, 'aria-describedby': ariaDescribedByProp, ...rest }: CheckboxInputProps): import("react").JSX.Element;
|
|
162
162
|
export declare namespace CheckboxInput {
|
|
163
163
|
var displayName: string;
|
|
164
164
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAoHhD,QAAA,MAAM,iBAAiB;;;;;;;;;EASrB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAE/D,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACrE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,YAAY,CAAC,EAAE,CACb,OAAO,EAAE,OAAO,EAChB,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,OAAO,GAAG,eAAe,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAOD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,KAAK,EACL,UAAkB,EAClB,QAAQ,EACR,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,OAAO,EACP,MAAM,EACN,SAAS,EACT,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,IAAI,EACR,EAAE,kBAAkB,+
|
|
1
|
+
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -132,6 +132,7 @@ const dynamicWidthStyles = {
|
|
|
132
132
|
* ```
|
|
133
133
|
*/
|
|
134
134
|
export function CheckboxInput({
|
|
135
|
+
id: idProp,
|
|
135
136
|
label,
|
|
136
137
|
isLabelHidden = false,
|
|
137
138
|
description,
|
|
@@ -161,7 +162,8 @@ export function CheckboxInput({
|
|
|
161
162
|
// The row is the pressable: the overlay's pressed arm reads the row's
|
|
162
163
|
// scope marker, the way the indicator's hover tint does.
|
|
163
164
|
const pressable = usePressFeedback();
|
|
164
|
-
const
|
|
165
|
+
const generatedId = useId();
|
|
166
|
+
const id = idProp || generatedId;
|
|
165
167
|
const descriptionID = useId();
|
|
166
168
|
const statusMessageID = useId();
|
|
167
169
|
// Announce the effective required state (form default included) while the
|
|
@@ -14,7 +14,15 @@
|
|
|
14
14
|
*/
|
|
15
15
|
import { type ReactNode } from 'react';
|
|
16
16
|
import type { BaseProps } from '../BaseProps';
|
|
17
|
+
import type { ItemAlign } from '../Item';
|
|
17
18
|
export interface CheckboxListItemProps extends BaseProps<HTMLLIElement> {
|
|
19
|
+
/**
|
|
20
|
+
* Vertical alignment of the start and end content against the label,
|
|
21
|
+
* forwarded to Item. Use `first-line` to keep the checkbox level with the
|
|
22
|
+
* first line of a wrapped label.
|
|
23
|
+
* @default 'center'
|
|
24
|
+
*/
|
|
25
|
+
align?: ItemAlign;
|
|
18
26
|
/**
|
|
19
27
|
* Primary text label for the item.
|
|
20
28
|
*
|
|
@@ -120,7 +128,7 @@ export interface CheckboxListItemProps extends BaseProps<HTMLLIElement> {
|
|
|
120
128
|
* />
|
|
121
129
|
* ```
|
|
122
130
|
*/
|
|
123
|
-
export declare function CheckboxListItem({ label, 'aria-label': ariaLabel, value, description, endContent, isDisabled: isItemDisabled, isLoading: isItemLoading, isChecked, onCheck, ref, xstyle, className, style, onClick: onClickProp, ...restProps }: CheckboxListItemProps): import("react").JSX.Element;
|
|
131
|
+
export declare function CheckboxListItem({ label, 'aria-label': ariaLabel, value, description, endContent, isDisabled: isItemDisabled, isLoading: isItemLoading, isChecked, onCheck, ref, xstyle, className, style, onClick: onClickProp, align, ...restProps }: CheckboxListItemProps): import("react").JSX.Element;
|
|
124
132
|
export declare namespace CheckboxListItem {
|
|
125
133
|
var displayName: string;
|
|
126
134
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxListItem.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAgBvC,MAAM,WAAW,qBAAsB,SAAQ,SAAS,CAAC,aAAa,CAAC;IACrE;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;;;;OAaG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC;AA4BD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EACV,UAAU,EAAE,cAAsB,EAClC,SAAS,EAAE,aAAqB,EAChC,SAAS,EACT,OAAO,EACP,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,KAAK,EACL,GAAG,SAAS,EACb,EAAE,qBAAqB,+BA6IvB;yBA9Je,gBAAgB"}
|
|
@@ -26,11 +26,11 @@ import { ListContext } from "../List/ListContext.js";
|
|
|
26
26
|
import { CheckboxListContext } from "./CheckboxListContext.js";
|
|
27
27
|
import { useTranslator } from "../i18n/index.js";
|
|
28
28
|
import { ItemDescriptionContext } from "../Item/ItemDescriptionContext.js";
|
|
29
|
-
|
|
29
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
30
30
|
// =============================================================================
|
|
31
31
|
// Styles
|
|
32
32
|
// =============================================================================
|
|
33
|
-
|
|
33
|
+
|
|
34
34
|
const styles = {
|
|
35
35
|
selected: {
|
|
36
36
|
kWkggS: "xgcxg3y",
|
|
@@ -103,6 +103,7 @@ export function CheckboxListItem({
|
|
|
103
103
|
className,
|
|
104
104
|
style,
|
|
105
105
|
onClick: onClickProp,
|
|
106
|
+
align,
|
|
106
107
|
...restProps
|
|
107
108
|
}) {
|
|
108
109
|
const t = useTranslator();
|
|
@@ -193,6 +194,7 @@ export function CheckboxListItem({
|
|
|
193
194
|
}) : label,
|
|
194
195
|
description: description,
|
|
195
196
|
endContent: endContent,
|
|
197
|
+
align: align,
|
|
196
198
|
isDisabled: effectiveDisabled
|
|
197
199
|
// Delegate row clicks to the checkbox instead of wiring onClick (which
|
|
198
200
|
// would add an invisible row button = a second tab stop). The checkbox
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAMhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AAyB9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuBD,2FAA2F;AAC3F,eAAO,MAAM,uCAAuC;;;;;;;;;;;CAW1C,CAAC;AAoJX;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAmB,EACnB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCAuVb;yBAvWe,MAAM"}
|
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
* - /apps/storybook/stories/Dialog.stories.tsx (storybook stories)
|
|
28
28
|
* - /packages/cli/assets/templates/blocks/components/Dialog/ (showcase blocks)
|
|
29
29
|
*/
|
|
30
|
-
import { useCallback, useEffect, useId, useMemo, useRef } from 'react';
|
|
30
|
+
import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef } from 'react';
|
|
31
31
|
import * as stylex from '@stylexjs/stylex';
|
|
32
32
|
import { useScrollLock } from "../hooks/useScrollLock.js";
|
|
33
33
|
import { layerTextReset } from "../Layer/layerTextReset.stylex.js";
|
|
@@ -348,11 +348,25 @@ export function Dialog({
|
|
|
348
348
|
}, [titleId, hasConsumerName]);
|
|
349
349
|
const mergedDialogRef = useMergedRefs(ref, attachDialog);
|
|
350
350
|
|
|
351
|
-
// Capture the element that was focused when the dialog opened,
|
|
352
|
-
//
|
|
351
|
+
// Capture the element that was focused when the dialog opened, for
|
|
352
|
+
// directional animation origin and focus restoration on close.
|
|
353
353
|
const triggerElementRef = useRef(null);
|
|
354
354
|
useInteractionModalityTracking();
|
|
355
355
|
|
|
356
|
+
// This runs in a layout effect so the capture lands before any descendant's
|
|
357
|
+
// passive mount effect: all layout effects run before any passive effect,
|
|
358
|
+
// while a child's passive effect runs before this parent's passive effect.
|
|
359
|
+
// Content that mounts in the open commit — e.g. a DialogHeader focusing its
|
|
360
|
+
// own title on mount — would otherwise move document.activeElement inside
|
|
361
|
+
// the dialog before the capture ran, and closing would then restore focus
|
|
362
|
+
// to a detached node, stranding the user's focus on <body>.
|
|
363
|
+
useLayoutEffect(() => {
|
|
364
|
+
if (isInline || !isOpen) {
|
|
365
|
+
return;
|
|
366
|
+
}
|
|
367
|
+
triggerElementRef.current = document.activeElement;
|
|
368
|
+
}, [isOpen, isInline]);
|
|
369
|
+
|
|
356
370
|
// Derive dismissal behavior from purpose
|
|
357
371
|
const allowEscape = purpose !== 'required';
|
|
358
372
|
const allowBackdropClick = purpose === 'info';
|
|
@@ -367,11 +381,9 @@ export function Dialog({
|
|
|
367
381
|
return;
|
|
368
382
|
}
|
|
369
383
|
if (isOpen) {
|
|
370
|
-
//
|
|
371
|
-
//
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
// Set directional CSS custom properties before opening
|
|
384
|
+
// Set directional CSS custom properties before opening. The trigger was
|
|
385
|
+
// captured by the layout effect above, before any descendant effect
|
|
386
|
+
// could move focus.
|
|
375
387
|
const trigger = triggerElementRef.current;
|
|
376
388
|
if (trigger && trigger !== document.body) {
|
|
377
389
|
const dir = getDialogDirection(trigger);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { BaseProps } from '../BaseProps';
|
|
2
|
-
export interface DropdownMenuDividerProps extends
|
|
2
|
+
export interface DropdownMenuDividerProps extends Omit<BaseProps<HTMLDivElement>, 'role' | 'aria-orientation'> {
|
|
3
3
|
/** Ref forwarded to the separator element. */
|
|
4
4
|
ref?: React.Ref<HTMLDivElement>;
|
|
5
5
|
}
|
|
@@ -7,7 +7,9 @@ export interface DropdownMenuDividerProps extends Pick<BaseProps, 'xstyle' | 'cl
|
|
|
7
7
|
* A horizontal rule separating groups of menu rows.
|
|
8
8
|
*
|
|
9
9
|
* Renders `role="separator"`, so it is never a stop in the menu's arrow-key
|
|
10
|
-
* order. Equivalent to `{type: 'divider'}` in the `items` data API.
|
|
10
|
+
* order. Equivalent to `{type: 'divider'}` in the `items` data API. Host
|
|
11
|
+
* attributes (`id`, `data-*`, `aria-*`) and DOM handlers reach the separator;
|
|
12
|
+
* its role and orientation stay component-owned.
|
|
11
13
|
*
|
|
12
14
|
* @example
|
|
13
15
|
* ```
|
|
@@ -18,7 +20,7 @@ export interface DropdownMenuDividerProps extends Pick<BaseProps, 'xstyle' | 'cl
|
|
|
18
20
|
* </DropdownMenu>
|
|
19
21
|
* ```
|
|
20
22
|
*/
|
|
21
|
-
export declare function DropdownMenuDivider({ xstyle, className, style, ref, }: DropdownMenuDividerProps): import("react").JSX.Element;
|
|
23
|
+
export declare function DropdownMenuDivider({ xstyle, className, style, ref, ...rest }: DropdownMenuDividerProps): import("react").JSX.Element;
|
|
22
24
|
export declare namespace DropdownMenuDivider {
|
|
23
25
|
var displayName: string;
|
|
24
26
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuDivider.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuDivider.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,
|
|
1
|
+
{"version":3,"file":"DropdownMenuDivider.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuDivider.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,cAAc,CAAC,EACzB,MAAM,GAAG,kBAAkB,CAC5B;IACC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,wBAAwB,+BAY1B;yBAlBe,mBAAmB"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file DropdownMenuDivider.tsx
|
|
7
|
-
* @input Uses Divider, spacing tokens, themeProps
|
|
7
|
+
* @input Uses Divider, spacing tokens, themeProps; forwards host props to Divider
|
|
8
8
|
* @output Exports DropdownMenuDivider component and DropdownMenuDividerProps
|
|
9
9
|
* @position Sub-component; used inside DropdownMenu
|
|
10
10
|
*
|
|
@@ -39,7 +39,9 @@ const THEME_CLASS_NAME = themeProps('dropdown-menu-divider').className;
|
|
|
39
39
|
* A horizontal rule separating groups of menu rows.
|
|
40
40
|
*
|
|
41
41
|
* Renders `role="separator"`, so it is never a stop in the menu's arrow-key
|
|
42
|
-
* order. Equivalent to `{type: 'divider'}` in the `items` data API.
|
|
42
|
+
* order. Equivalent to `{type: 'divider'}` in the `items` data API. Host
|
|
43
|
+
* attributes (`id`, `data-*`, `aria-*`) and DOM handlers reach the separator;
|
|
44
|
+
* its role and orientation stay component-owned.
|
|
43
45
|
*
|
|
44
46
|
* @example
|
|
45
47
|
* ```
|
|
@@ -54,9 +56,11 @@ export function DropdownMenuDivider({
|
|
|
54
56
|
xstyle,
|
|
55
57
|
className,
|
|
56
58
|
style,
|
|
57
|
-
ref
|
|
59
|
+
ref,
|
|
60
|
+
...rest
|
|
58
61
|
}) {
|
|
59
62
|
return /*#__PURE__*/_jsx(Divider, {
|
|
63
|
+
...rest,
|
|
60
64
|
ref: ref,
|
|
61
65
|
xstyle: [styles.divider, xstyle],
|
|
62
66
|
className: className ? `${THEME_CLASS_NAME} ${className}` : THEME_CLASS_NAME,
|
package/dist/Item/Item.d.ts
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
*/
|
|
23
23
|
import { type ReactNode } from 'react';
|
|
24
24
|
import type { BaseProps } from '../BaseProps';
|
|
25
|
-
export type ItemAlign = 'center' | 'start';
|
|
25
|
+
export type ItemAlign = 'center' | 'start' | 'first-line';
|
|
26
26
|
export type ItemDensity = 'compact' | 'balanced' | 'spacious';
|
|
27
27
|
/**
|
|
28
28
|
* How a swipe action looks: ordinary, the one you mean, the dangerous one.
|
|
@@ -111,7 +111,11 @@ export interface ItemProps extends BaseProps<HTMLElement> {
|
|
|
111
111
|
*/
|
|
112
112
|
endContent?: ReactNode;
|
|
113
113
|
/**
|
|
114
|
-
* Vertical alignment of the start/end content slots.
|
|
114
|
+
* Vertical alignment of the start/end content slots. `center` centers each
|
|
115
|
+
* slot on the whole text block; `start` lines up slot tops with the text's
|
|
116
|
+
* top; `first-line` centers each slot on the label's first line, so a small
|
|
117
|
+
* mark (a status dot, a radio, a timestamp) stays level with the first line
|
|
118
|
+
* of a wrapped label. A slot taller than that line moves the text down.
|
|
115
119
|
* @default 'center'
|
|
116
120
|
*/
|
|
117
121
|
align?: ItemAlign;
|
package/dist/Item/Item.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAyB5C,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/Item/Item.tsx"],"names":[],"mappings":"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"}
|
package/dist/Item/Item.js
CHANGED
|
@@ -108,6 +108,10 @@ const styles = {
|
|
|
108
108
|
kGNEyG: "x1cy8zhl",
|
|
109
109
|
$$css: true
|
|
110
110
|
},
|
|
111
|
+
alignFirstLine: {
|
|
112
|
+
kGNEyG: "x1pha0wt",
|
|
113
|
+
$$css: true
|
|
114
|
+
},
|
|
111
115
|
interactive: {
|
|
112
116
|
kkrTdU: "x1ypdohk x16khyan",
|
|
113
117
|
k1ekBW: "x15406qy",
|
|
@@ -359,8 +363,13 @@ export function Item({
|
|
|
359
363
|
const innerContent = /*#__PURE__*/_jsxs(_Fragment, {
|
|
360
364
|
children: [marker, startContent != null && /*#__PURE__*/_jsx("span", {
|
|
361
365
|
...{
|
|
362
|
-
|
|
363
|
-
|
|
366
|
+
0: {
|
|
367
|
+
className: "x3psx0u x78zum5"
|
|
368
|
+
},
|
|
369
|
+
1: {
|
|
370
|
+
className: "x3psx0u x78zum5 x6s0dn4 x4jt1l0 xk9ib7f x1xb3ux x1899uy6 x1xcinxp"
|
|
371
|
+
}
|
|
372
|
+
}[!!(align === 'first-line') << 0],
|
|
364
373
|
children: startContent
|
|
365
374
|
}), hasParentRole || isDelegate ?
|
|
366
375
|
/*#__PURE__*/
|
|
@@ -444,10 +453,16 @@ export function Item({
|
|
|
444
453
|
0: {
|
|
445
454
|
className: "x3psx0u x78zum5 xvc5jky"
|
|
446
455
|
},
|
|
456
|
+
2: {
|
|
457
|
+
className: "x3psx0u x78zum5 xvc5jky x6s0dn4 x4jt1l0 xk9ib7f x1xb3ux x1899uy6 x1xcinxp"
|
|
458
|
+
},
|
|
447
459
|
1: {
|
|
448
460
|
className: "x3psx0u x78zum5 xvc5jky xbyyjgo"
|
|
461
|
+
},
|
|
462
|
+
3: {
|
|
463
|
+
className: "x3psx0u x78zum5 xvc5jky x6s0dn4 x4jt1l0 xk9ib7f x1xb3ux x1899uy6 x1xcinxp xbyyjgo"
|
|
449
464
|
}
|
|
450
|
-
}[!!isDisabled << 0],
|
|
465
|
+
}[!!(align === 'first-line') << 1 | !!isDisabled << 0],
|
|
451
466
|
children: endContent
|
|
452
467
|
})]
|
|
453
468
|
});
|
|
@@ -494,7 +509,7 @@ export function Item({
|
|
|
494
509
|
...mergeProps(themeProps('item', {
|
|
495
510
|
density,
|
|
496
511
|
align
|
|
497
|
-
}), focusOutlineProps.focusWithin(styles.root, densityStyles[density], align === 'start' && styles.alignStart, isInteractive && styles.interactive, isInteractive && interactionOverlayStyles.backgroundColor, isLinkRoot && styles.linkRoot, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, hasSwipe && styles.swipeRoot, xstyle), className, style),
|
|
512
|
+
}), focusOutlineProps.focusWithin(styles.root, densityStyles[density], align === 'start' && styles.alignStart, align === 'first-line' && styles.alignFirstLine, isInteractive && styles.interactive, isInteractive && interactionOverlayStyles.backgroundColor, isLinkRoot && styles.linkRoot, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, hasSwipe && styles.swipeRoot, xstyle), className, style),
|
|
498
513
|
role: role,
|
|
499
514
|
onClick: rootOnClick,
|
|
500
515
|
children: [/*#__PURE__*/_jsx(ItemDescriptionContext, {
|
package/dist/List/List.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file List.tsx
|
|
3
|
-
* @input Uses React, ReactNode, StyleXStyles, theme tokens,
|
|
4
|
-
* with
|
|
5
|
-
* @output Exports List component, ListProps, ListDensity, ListStyle
|
|
3
|
+
* @input Uses React, ReactNode, StyleXStyles, theme tokens, useDevWarning,
|
|
4
|
+
* and ListContext with the row edge treatment
|
|
5
|
+
* @output Exports List component, ListProps, ListDensity, ListEdge, ListStyle
|
|
6
|
+
* types
|
|
6
7
|
* @position Core implementation; consumed by index.ts, tested by List.test.tsx
|
|
7
8
|
*
|
|
8
9
|
* SYNC: When modified, update these files to stay in sync:
|
|
@@ -14,8 +15,8 @@
|
|
|
14
15
|
*/
|
|
15
16
|
import { type ReactNode } from 'react';
|
|
16
17
|
import type { BaseProps } from '../BaseProps';
|
|
17
|
-
import { type ListDensity, type ListMarkerStyle } from './ListContext';
|
|
18
|
-
export { type ListDensity, type ListMarkerStyle as ListStyle, } from './ListContext';
|
|
18
|
+
import { type ListDensity, type ListEdge, type ListMarkerStyle } from './ListContext';
|
|
19
|
+
export { type ListDensity, type ListEdge, type ListMarkerStyle as ListStyle, } from './ListContext';
|
|
19
20
|
export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement> {
|
|
20
21
|
/** Ref forwarded to the root element */
|
|
21
22
|
ref?: React.Ref<HTMLUListElement | HTMLOListElement>;
|
|
@@ -37,16 +38,38 @@ export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement
|
|
|
37
38
|
*/
|
|
38
39
|
hasDividers?: boolean;
|
|
39
40
|
/**
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
*
|
|
49
|
-
*
|
|
41
|
+
* Where each row's text, dividers, and hover and selection backgrounds sit,
|
|
42
|
+
* relative to the list's edges and the container around it.
|
|
43
|
+
* - 'padded': text sits inside each row's padding, so it starts a little in
|
|
44
|
+
* from a heading above the list and backgrounds have room around it
|
|
45
|
+
* - 'flush': rows drop their side padding, so text starts on the heading's
|
|
46
|
+
* line and dividers and backgrounds stop at the row's content, with no
|
|
47
|
+
* room beyond it on either side. Works anywhere. Suits static rows
|
|
48
|
+
* - 'outset': text sits on the heading's line, and dividers and backgrounds
|
|
49
|
+
* reach a little past it into the container's padding. Suits interactive
|
|
50
|
+
* rows in a container
|
|
51
|
+
* - 'bleed': text sits on the heading's line, and dividers and backgrounds
|
|
52
|
+
* reach the container's edges with square corners, like Table rows in a
|
|
53
|
+
* Card
|
|
54
|
+
*
|
|
55
|
+
* A row's first content is what lines up with the heading: its marker,
|
|
56
|
+
* icon, or avatar when it has one, otherwise its label. 'outset' and
|
|
57
|
+
* 'bleed' reach into the padding of the nearest container that shares its
|
|
58
|
+
* padding: a Card, Section, Dialog, or BottomSheet, or a transparent
|
|
59
|
+
* container such as a Layout region with explicit padding or a padded
|
|
60
|
+
* ScrollableArea. Place the List directly in that container's padding:
|
|
61
|
+
* padding that Stack, Center, or your own styles add in between is not
|
|
62
|
+
* counted. Drawers and the automatic padding of LayoutContent and
|
|
63
|
+
* LayoutPanel aren't supported yet. With no such container, including in a Popover, they look
|
|
64
|
+
* like 'padded'. In a container with less padding than the rows' own, text
|
|
65
|
+
* starts a little after the heading's line. A theme's inline padding on `item` replaces the row
|
|
66
|
+
* padding of every value, including the zero padding of 'flush'.
|
|
67
|
+
* @default 'padded'
|
|
68
|
+
*/
|
|
69
|
+
edge?: ListEdge;
|
|
70
|
+
/**
|
|
71
|
+
* @deprecated Use `edge="outset"`, which this sets. Still works; `edge`
|
|
72
|
+
* wins when both are set. `astryx upgrade` rewrites existing usage.
|
|
50
73
|
*/
|
|
51
74
|
edgeCompensation?: 'inline';
|
|
52
75
|
/**
|
|
@@ -77,9 +100,10 @@ export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement
|
|
|
77
100
|
* Renders semantic `<ul>` or `<ol>` elements with configurable density,
|
|
78
101
|
* dividers, marker styles, and an optional header.
|
|
79
102
|
*
|
|
80
|
-
* Set `
|
|
81
|
-
*
|
|
82
|
-
*
|
|
103
|
+
* Set `edge` to choose where row text, dividers, and backgrounds sit: inside
|
|
104
|
+
* each row's padding (`padded`, the default), at the list's edges (`flush`),
|
|
105
|
+
* on a heading's line with backgrounds reaching into the container's padding
|
|
106
|
+
* (`outset`), or reaching the container's edges like Table rows (`bleed`).
|
|
83
107
|
*
|
|
84
108
|
* @example
|
|
85
109
|
* ```
|
|
@@ -91,9 +115,12 @@ export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement
|
|
|
91
115
|
* <ListItem label="First step" />
|
|
92
116
|
* <ListItem label="Second step" />
|
|
93
117
|
* </List>
|
|
118
|
+
* <List edge="flush" hasDividers>
|
|
119
|
+
* <ListItem label="Solstice Mug" description="Ceramic, 12 oz" />
|
|
120
|
+
* </List>
|
|
94
121
|
* ```
|
|
95
122
|
*/
|
|
96
|
-
export declare function List({ children, density, hasDividers, edgeCompensation, header, listStyle, start, xstyle, className, style, 'data-testid': testId, ref, ...props }: ListProps): import("react").JSX.Element;
|
|
123
|
+
export declare function List({ children, density, hasDividers, edge: edgeProp, edgeCompensation, header, listStyle, start, xstyle, className, style, 'data-testid': testId, ref, ...props }: ListProps): import("react").JSX.Element;
|
|
97
124
|
export declare namespace List {
|
|
98
125
|
var displayName: string;
|
|
99
126
|
}
|
package/dist/List/List.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../src/List/List.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../src/List/List.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,QAAQ,EACb,KAAK,eAAe,EACrB,MAAM,eAAe,CAAC;AAKvB,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,QAAQ,EACb,KAAK,eAAe,IAAI,SAAS,GAClC,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,SAAU,SAAQ,SAAS,CAC1C,gBAAgB,GAAG,gBAAgB,CACpC;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,GAAG,gBAAgB,CAAC,CAAC;IACrD;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,QAAQ,CAAC;IAE5B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyDD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,OAAoB,EACpB,WAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,gBAAgB,EAChB,MAAM,EACN,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BAwEX;yBAvFe,IAAI"}
|