@astryxdesign/core 0.7.0-canary.e92e36f → 0.7.0-canary.fe57f54
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/CheckboxList/CheckboxList.d.ts +4 -4
- package/dist/CheckboxList/CheckboxList.d.ts.map +1 -1
- package/dist/CheckboxList/CheckboxList.js +28 -18
- package/dist/ComplexSelector/ComplexSelector.d.ts +29 -6
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +76 -28
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +3 -12
- package/dist/DateInput/DateInput.d.ts +9 -4
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +44 -12
- package/dist/DateInput/NativeDateField.d.ts +1 -1
- package/dist/DateInput/NativeDateField.d.ts.map +1 -1
- package/dist/DateInput/NativeDateField.js +37 -11
- package/dist/DateInput/TouchDateField.d.ts +1 -1
- package/dist/DateInput/TouchDateField.d.ts.map +1 -1
- package/dist/DateInput/TouchDateField.js +37 -11
- package/dist/DateRangeInput/DateRangeInput.d.ts +9 -4
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +48 -11
- package/dist/DateTimeInput/DateTimeInput.d.ts +8 -3
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +55 -12
- package/dist/DateTimeInput/NativeDateSegment.d.ts +8 -1
- package/dist/DateTimeInput/NativeDateSegment.d.ts.map +1 -1
- package/dist/DateTimeInput/NativeDateSegment.js +11 -3
- package/dist/DateTimeInput/NativeTimeSegment.d.ts +8 -1
- package/dist/DateTimeInput/NativeTimeSegment.d.ts.map +1 -1
- package/dist/DateTimeInput/NativeTimeSegment.js +16 -5
- package/dist/DateTimeInput/TouchDateTimeField.d.ts +1 -1
- package/dist/DateTimeInput/TouchDateTimeField.d.ts.map +1 -1
- package/dist/DateTimeInput/TouchDateTimeField.js +40 -10
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +4 -15
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +3 -13
- package/dist/DropdownMenu/menuItemRoles.d.ts +1 -11
- package/dist/DropdownMenu/menuItemRoles.d.ts.map +1 -1
- package/dist/DropdownMenu/menuItemRoles.js +1 -35
- package/dist/Field/fieldInputFamily.render-testing.d.ts +27 -0
- package/dist/Field/fieldInputFamily.render-testing.d.ts.map +1 -0
- package/dist/Field/fieldInputFamily.render-testing.js +148 -0
- package/dist/Field/fieldInputFamily.testing.d.ts +31 -0
- package/dist/Field/fieldInputFamily.testing.d.ts.map +1 -0
- package/dist/Field/fieldInputFamily.testing.js +24 -0
- package/dist/Field/fieldParts.d.ts +90 -0
- package/dist/Field/fieldParts.d.ts.map +1 -0
- package/dist/Field/fieldParts.js +96 -0
- package/dist/Field/index.d.ts +2 -1
- package/dist/Field/index.d.ts.map +1 -1
- package/dist/FileInput/FileInput.d.ts +4 -4
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +21 -6
- package/dist/Markdown/Markdown.js +1 -1
- package/dist/MultiSelector/MultiSelector.d.ts +32 -7
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +68 -16
- package/dist/NumberInput/NumberInput.d.ts +4 -4
- package/dist/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/NumberInput/NumberInput.js +23 -7
- package/dist/PowerSearch/PowerSearch.js +3 -3
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchEditPopover.js +17 -14
- package/dist/RadioList/RadioList.d.ts +4 -3
- package/dist/RadioList/RadioList.d.ts.map +1 -1
- package/dist/RadioList/RadioList.js +46 -21
- package/dist/Selector/Selector.d.ts +24 -3
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +32 -10
- package/dist/Slider/Slider.d.ts +3 -3
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +91 -33
- package/dist/TextArea/TextArea.d.ts +4 -4
- package/dist/TextArea/TextArea.d.ts.map +1 -1
- package/dist/TextArea/TextArea.js +23 -7
- package/dist/TextInput/TextInput.d.ts +4 -4
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +23 -7
- package/dist/TimeInput/TimeInput.d.ts +9 -4
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +56 -13
- package/dist/TimeInput/TouchTimeField.d.ts +1 -1
- package/dist/TimeInput/TouchTimeField.d.ts.map +1 -1
- package/dist/TimeInput/TouchTimeField.js +40 -9
- package/dist/Tokenizer/Tokenizer.d.ts +12 -5
- package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
- package/dist/Tokenizer/Tokenizer.js +71 -46
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +6 -1
- package/dist/Typeahead/Typeahead.d.ts +12 -4
- package/dist/Typeahead/Typeahead.d.ts.map +1 -1
- package/dist/Typeahead/Typeahead.js +72 -53
- package/dist/Typeahead/trailingKeyDown.d.ts +16 -0
- package/dist/Typeahead/trailingKeyDown.d.ts.map +1 -0
- package/dist/Typeahead/trailingKeyDown.js +22 -0
- package/dist/theme/Theme.d.ts.map +1 -1
- package/dist/theme/Theme.js +3 -32
- package/dist/theme/generateThemeRules.d.ts +2 -20
- package/dist/theme/generateThemeRules.d.ts.map +1 -1
- package/dist/theme/generateThemeRules.js +2 -25
- package/dist/utils/chainEventHandlers.d.ts +25 -0
- package/dist/utils/chainEventHandlers.d.ts.map +1 -0
- package/dist/utils/chainEventHandlers.js +32 -0
- package/dist/utils/dateTypes.d.ts.map +1 -1
- package/dist/utils/inputAria.d.ts +2 -1
- package/dist/utils/inputAria.d.ts.map +1 -1
- package/dist/utils/inputAria.js +2 -2
- package/package.json +3 -3
- package/src/CheckboxList/CheckboxList.doc.mjs +28 -2
- package/src/CheckboxList/CheckboxList.fr10.test.tsx +24 -0
- package/src/CheckboxList/CheckboxList.test.tsx +9 -10
- package/src/CheckboxList/CheckboxList.tsx +36 -19
- package/src/ComplexSelector/ComplexSelector.doc.mjs +58 -0
- package/src/ComplexSelector/ComplexSelector.fr10.test.tsx +262 -0
- package/src/ComplexSelector/ComplexSelector.test.tsx +4 -1
- package/src/ComplexSelector/ComplexSelector.tsx +143 -35
- package/src/ContextMenu/ContextMenu.spec.md +1 -2
- package/src/ContextMenu/ContextMenu.test.tsx +0 -30
- package/src/ContextMenu/ContextMenu.tsx +2 -13
- package/src/DateInput/DateInput.doc.mjs +35 -5
- package/src/DateInput/DateInput.fr10.test.tsx +283 -0
- package/src/DateInput/DateInput.tsx +53 -17
- package/src/DateInput/NativeDateField.tsx +40 -12
- package/src/DateInput/TouchDateField.tsx +40 -12
- package/src/DateRangeInput/DateRangeInput.doc.mjs +23 -3
- package/src/DateRangeInput/DateRangeInput.fr10.test.tsx +165 -0
- package/src/DateRangeInput/DateRangeInput.tsx +56 -14
- package/src/DateTimeInput/DateTimeInput.doc.mjs +35 -5
- package/src/DateTimeInput/DateTimeInput.fr10.test.tsx +319 -0
- package/src/DateTimeInput/DateTimeInput.tsx +61 -15
- package/src/DateTimeInput/NativeDateSegment.tsx +23 -2
- package/src/DateTimeInput/NativeTimeSegment.tsx +30 -3
- package/src/DateTimeInput/TouchDateTimeField.tsx +46 -11
- package/src/DropdownMenu/DropdownMenu.spec.md +1 -2
- package/src/DropdownMenu/DropdownMenu.test.tsx +0 -87
- package/src/DropdownMenu/DropdownMenu.tsx +3 -16
- package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +0 -38
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +2 -14
- package/src/DropdownMenu/menuItemRoles.ts +1 -56
- package/src/Field/fieldInputFamily.render-testing.tsx +182 -0
- package/src/Field/fieldInputFamily.test.tsx +160 -0
- package/src/Field/fieldInputFamily.testing.ts +46 -0
- package/src/Field/fieldParts.ts +174 -0
- package/src/Field/index.ts +7 -5
- package/src/FileInput/FileInput.doc.mjs +70 -0
- package/src/FileInput/FileInput.fr10.test.tsx +21 -0
- package/src/FileInput/FileInput.tsx +25 -10
- package/src/Markdown/Markdown.tsx +1 -1
- package/src/MultiSelector/MultiSelector.doc.mjs +72 -4
- package/src/MultiSelector/MultiSelector.fr10.test.tsx +221 -0
- package/src/MultiSelector/MultiSelector.test.tsx +5 -1
- package/src/MultiSelector/MultiSelector.tsx +139 -24
- package/src/NumberInput/NumberInput.doc.mjs +70 -0
- package/src/NumberInput/NumberInput.fr10.test.tsx +21 -0
- package/src/NumberInput/NumberInput.tsx +30 -11
- package/src/PowerSearch/PowerSearch.tsx +3 -3
- package/src/PowerSearch/PowerSearchEditPopover.test.tsx +60 -0
- package/src/PowerSearch/PowerSearchEditPopover.tsx +8 -12
- package/src/RadioList/RadioList.doc.mjs +28 -2
- package/src/RadioList/RadioList.fr10.test.tsx +24 -0
- package/src/RadioList/RadioList.tsx +34 -14
- package/src/Selector/Selector.doc.mjs +48 -2
- package/src/Selector/Selector.fr10.test.tsx +149 -0
- package/src/Selector/Selector.test.tsx +5 -1
- package/src/Selector/Selector.tsx +67 -16
- package/src/Slider/Slider.doc.mjs +62 -5
- package/src/Slider/Slider.fr10.test.tsx +59 -0
- package/src/Slider/Slider.tsx +81 -22
- package/src/TextArea/TextArea.doc.mjs +62 -6
- package/src/TextArea/TextArea.fr10.test.tsx +21 -0
- package/src/TextArea/TextArea.tsx +30 -11
- package/src/TextInput/TextInput.doc.mjs +70 -0
- package/src/TextInput/TextInput.fr10.test.tsx +21 -0
- package/src/TextInput/TextInput.tsx +30 -11
- package/src/TimeInput/TimeInput.doc.mjs +35 -6
- package/src/TimeInput/TimeInput.fr10.test.tsx +297 -0
- package/src/TimeInput/TimeInput.tsx +62 -16
- package/src/TimeInput/TouchTimeField.tsx +42 -9
- package/src/Tokenizer/Tokenizer.doc.mjs +62 -6
- package/src/Tokenizer/Tokenizer.fr10.test.tsx +28 -0
- package/src/Tokenizer/Tokenizer.test.tsx +43 -14
- package/src/Tokenizer/Tokenizer.tsx +94 -55
- package/src/Typeahead/BaseTypeahead.tsx +10 -1
- package/src/Typeahead/Typeahead.doc.mjs +28 -2
- package/src/Typeahead/Typeahead.fr10.test.tsx +28 -0
- package/src/Typeahead/Typeahead.test.tsx +92 -23
- package/src/Typeahead/Typeahead.tsx +87 -69
- package/src/Typeahead/trailingKeyDown.tsx +27 -0
- package/src/theme/Theme.test.tsx +50 -44
- package/src/theme/Theme.tsx +3 -32
- package/src/theme/defineTheme.test.ts +4 -5
- package/src/theme/generateThemeRules.test.ts +6 -18
- package/src/theme/generateThemeRules.ts +2 -27
- package/src/utils/chainEventHandlers.test.ts +39 -0
- package/src/utils/chainEventHandlers.ts +36 -0
- package/src/utils/dateTypes.ts +1 -7
- package/src/utils/inputAria.ts +2 -2
- package/src/DropdownMenu/__tests__/MenuHostedField.a11y.chromium.spec.ts +0 -73
|
@@ -12,12 +12,12 @@
|
|
|
12
12
|
* - /packages/cli/assets/templates/blocks/components/CheckboxList/ (showcase blocks)
|
|
13
13
|
*/
|
|
14
14
|
import { type ReactNode } from 'react';
|
|
15
|
-
import type
|
|
15
|
+
import { type FieldInputBaseProps } from '../Field/fieldParts';
|
|
16
16
|
import type { SizeValue } from '../utils/types';
|
|
17
17
|
import type { InputStatus } from '../Field/types';
|
|
18
18
|
import type { ListDensity } from '../List/ListContext';
|
|
19
|
-
export interface CheckboxListProps extends Omit<
|
|
20
|
-
/** Ref forwarded to the
|
|
19
|
+
export interface CheckboxListProps extends Omit<FieldInputBaseProps<HTMLDivElement>, 'onChange'> {
|
|
20
|
+
/** Ref forwarded to the `role="group"` element. */
|
|
21
21
|
ref?: React.Ref<HTMLDivElement>;
|
|
22
22
|
/**
|
|
23
23
|
* Label text for the checkbox group (always rendered for accessibility).
|
|
@@ -115,7 +115,7 @@ export interface CheckboxListProps extends Omit<BaseProps<HTMLDivElement>, 'onCh
|
|
|
115
115
|
* </CheckboxList>
|
|
116
116
|
* ```
|
|
117
117
|
*/
|
|
118
|
-
export declare function CheckboxList({ label, isLabelHidden, description, status, value, onChange, changeAction, density, hasDividers, isDisabled, disabledMessage, isReadOnly, children, ref, width,
|
|
118
|
+
export declare function CheckboxList({ label, isLabelHidden, description, status, value, onChange, changeAction, density, hasDividers, isDisabled, disabledMessage, isReadOnly, children, ref, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, 'aria-describedby': ariaDescribedByProp, ...restProps }: CheckboxListProps): import("react").JSX.Element;
|
|
119
119
|
export declare namespace CheckboxList {
|
|
120
120
|
var displayName: string;
|
|
121
121
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxList.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"CheckboxList.d.ts","sourceRoot":"","sources":["../../src/CheckboxList/CheckboxList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAEhD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,qBAAqB,CAAC;AAYrD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,mBAAmB,CAAC,cAAc,CAAC,EACnC,UAAU,CACX;IACC,mDAAmD;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,OAAoB,EACpB,WAAmB,EACnB,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,SAAS,EACb,EAAE,iBAAiB,+BA0InB;yBAlKe,YAAY"}
|
|
@@ -16,9 +16,12 @@
|
|
|
16
16
|
* - /packages/cli/assets/templates/blocks/components/CheckboxList/ (showcase blocks)
|
|
17
17
|
*/
|
|
18
18
|
import { useCallback, useId, useMemo, useOptimistic, useTransition } from 'react';
|
|
19
|
+
import { useFieldInputStyling } from "../Field/fieldParts.js";
|
|
20
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
19
21
|
import { Field } from "../Field/Field.js";
|
|
20
22
|
import { List } from "../List/List.js";
|
|
21
23
|
import { useTooltip } from "../Tooltip/index.js";
|
|
24
|
+
import * as stylex from '@stylexjs/stylex';
|
|
22
25
|
import { mergeProps } from "../utils/index.js";
|
|
23
26
|
import { themeProps } from "../utils/themeProps.js";
|
|
24
27
|
import { CheckboxListContext } from "./CheckboxListContext.js";
|
|
@@ -58,12 +61,23 @@ export function CheckboxList({
|
|
|
58
61
|
children,
|
|
59
62
|
ref,
|
|
60
63
|
width,
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
64
|
+
containerXstyle,
|
|
65
|
+
containerClassName,
|
|
66
|
+
containerStyle,
|
|
67
|
+
controlXstyle,
|
|
68
|
+
controlClassName,
|
|
69
|
+
controlStyle,
|
|
70
|
+
'aria-describedby': ariaDescribedByProp,
|
|
71
|
+
...restProps
|
|
66
72
|
}) {
|
|
73
|
+
const {
|
|
74
|
+
rest,
|
|
75
|
+
container
|
|
76
|
+
} = useFieldInputStyling('CheckboxList', restProps, {
|
|
77
|
+
containerXstyle,
|
|
78
|
+
containerClassName,
|
|
79
|
+
containerStyle
|
|
80
|
+
});
|
|
67
81
|
const inputID = useId();
|
|
68
82
|
const labelID = useId();
|
|
69
83
|
const descriptionID = useId();
|
|
@@ -110,9 +124,6 @@ export function CheckboxList({
|
|
|
110
124
|
loadingValues
|
|
111
125
|
}), [isCollectionMode, optimisticValue, handleChange, isDisabled, showsDisabledMessage, isReadOnly, loadingValues]);
|
|
112
126
|
return /*#__PURE__*/_jsxs(Field, {
|
|
113
|
-
...rest,
|
|
114
|
-
ref: ref,
|
|
115
|
-
"data-testid": dataTestId,
|
|
116
127
|
label: label,
|
|
117
128
|
isLabelHidden: isLabelHidden,
|
|
118
129
|
description: description,
|
|
@@ -128,23 +139,22 @@ export function CheckboxList({
|
|
|
128
139
|
} : undefined,
|
|
129
140
|
statusVariant: "detached",
|
|
130
141
|
width: width,
|
|
131
|
-
xstyle: xstyle,
|
|
142
|
+
xstyle: container.xstyle,
|
|
132
143
|
...mergeProps(themeProps('checkbox-list'), {
|
|
133
|
-
className,
|
|
134
|
-
style
|
|
144
|
+
className: container.className,
|
|
145
|
+
style: container.style
|
|
135
146
|
}),
|
|
136
147
|
children: [/*#__PURE__*/_jsx(CheckboxListContext, {
|
|
137
148
|
value: contextValue,
|
|
138
149
|
children: /*#__PURE__*/_jsx("div", {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
},
|
|
150
|
+
...rest,
|
|
151
|
+
// The disabled-message tooltip anchors here; its handlers are gated
|
|
152
|
+
// internally by isEnabled, so attaching unconditionally is safe.
|
|
153
|
+
ref: useMergedRefs(ref, disabledMessageTooltip.ref),
|
|
154
|
+
...mergeProps(stylex.props(controlXstyle), controlClassName, controlStyle),
|
|
145
155
|
role: "group",
|
|
146
156
|
"aria-labelledby": labelID,
|
|
147
|
-
"aria-describedby": [description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined,
|
|
157
|
+
"aria-describedby": [ariaDescribedByProp, description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined,
|
|
148
158
|
children: /*#__PURE__*/_jsx(List, {
|
|
149
159
|
density: density,
|
|
150
160
|
hasDividers: hasDividers,
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
*/
|
|
14
14
|
import React, { type ReactNode } from 'react';
|
|
15
15
|
import type { StyleXStyles } from '@stylexjs/stylex';
|
|
16
|
-
import type
|
|
16
|
+
import { type FieldInputBaseProps, type FieldPartStyleProps } from '../Field/fieldParts';
|
|
17
17
|
import { type FieldStatusVariant } from '../Field';
|
|
18
18
|
import { type IconType } from '../Icon';
|
|
19
19
|
import type { LayerAlignment, LayerPlacement } from '../Layer/useLayer';
|
|
@@ -26,8 +26,11 @@ export type ComplexSelectorSize = 'sm' | 'md' | 'lg';
|
|
|
26
26
|
* Spread them onto that control: it becomes the popup's anchor, the element
|
|
27
27
|
* focus returns to, and the control that announces the popup's state.
|
|
28
28
|
*/
|
|
29
|
-
export interface ComplexSelectorRenderTriggerProps {
|
|
30
|
-
/**
|
|
29
|
+
export interface ComplexSelectorRenderTriggerProps extends Omit<FieldInputBaseProps, keyof FieldPartStyleProps | 'id' | 'onClick' | 'onKeyDown' | 'aria-haspopup' | 'aria-expanded' | 'aria-controls' | 'aria-busy'> {
|
|
30
|
+
/**
|
|
31
|
+
* Attaches the control as the popup's anchor and focus-return target, and
|
|
32
|
+
* forwards it to the selector's own `ref`.
|
|
33
|
+
*/
|
|
31
34
|
ref: (element: HTMLElement | null) => void;
|
|
32
35
|
/** The id the field would have given its own button. */
|
|
33
36
|
id: string;
|
|
@@ -72,9 +75,29 @@ export interface ComplexSelectorStatus {
|
|
|
72
75
|
type: 'warning' | 'error' | 'success';
|
|
73
76
|
message?: string;
|
|
74
77
|
}
|
|
75
|
-
export interface ComplexSelectorProps<Value> extends Omit<
|
|
78
|
+
export interface ComplexSelectorProps<Value> extends Omit<FieldInputBaseProps, 'children' | 'onChange'> {
|
|
76
79
|
/** Label text for accessibility and the field label. */
|
|
77
80
|
label: string;
|
|
81
|
+
/**
|
|
82
|
+
* Ref to the trigger: the button that opens the popup and carries the
|
|
83
|
+
* accessible name — or, with `renderTrigger`, the caller's control.
|
|
84
|
+
*/
|
|
85
|
+
ref?: React.Ref<HTMLElement>;
|
|
86
|
+
/**
|
|
87
|
+
* Click handler on the trigger. It runs before the popup opens; call
|
|
88
|
+
* `preventDefault()` to keep the popup closed. A press elsewhere in the
|
|
89
|
+
* control box goes through the trigger, so it reaches this handler too.
|
|
90
|
+
* With `renderTrigger` it lands on the caller's control and runs after the
|
|
91
|
+
* built-in toggle, which it cannot cancel.
|
|
92
|
+
*/
|
|
93
|
+
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
94
|
+
/**
|
|
95
|
+
* Key handler on the trigger. It runs after the built-in handling and
|
|
96
|
+
* receives every key, including the ArrowDown that opens the popup. With
|
|
97
|
+
* `renderTrigger` it lands on the caller's control, runs after the built-in
|
|
98
|
+
* handling, and is skipped for keys that handling cancels.
|
|
99
|
+
*/
|
|
100
|
+
onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
|
|
78
101
|
/** Current controlled value. */
|
|
79
102
|
value: Value;
|
|
80
103
|
/** Called when custom content commits a new value. */
|
|
@@ -167,7 +190,7 @@ export interface ComplexSelectorProps<Value> extends Omit<BaseProps<HTMLDivEleme
|
|
|
167
190
|
onOpenChange?: (isOpen: boolean) => void;
|
|
168
191
|
/** StyleX styles for the popup content container. */
|
|
169
192
|
contentXstyle?: StyleXStyles;
|
|
170
|
-
/** Test ID for the trigger
|
|
193
|
+
/** Test ID for the trigger button. */
|
|
171
194
|
'data-testid'?: string;
|
|
172
195
|
}
|
|
173
196
|
/**
|
|
@@ -197,7 +220,7 @@ export interface ComplexSelectorProps<Value> extends Omit<BaseProps<HTMLDivEleme
|
|
|
197
220
|
* </ComplexSelector>
|
|
198
221
|
* ```
|
|
199
222
|
*/
|
|
200
|
-
export declare function ComplexSelector<Value>({ label, value, onChange, changeAction, children, triggerLabel, placeholder: placeholderFromProps, isLabelHidden, description, isOptional, isRequired, isDisabled, isLoading, status, statusVariant, labelTooltip, size, variant, startIcon, width, placement, alignment, handleRef, renderTrigger, onOpenChange, contentXstyle,
|
|
223
|
+
export declare function ComplexSelector<Value>({ label, value, onChange, changeAction, children, triggerLabel, placeholder: placeholderFromProps, isLabelHidden, description, isOptional, isRequired, isDisabled, isLoading, status, statusVariant, labelTooltip, size, variant, startIcon, width, placement, alignment, handleRef, renderTrigger, onOpenChange, contentXstyle, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, ref, id, onClick: onClickProp, onKeyDown: onKeyDownProp, 'aria-describedby': ariaDescribedByProp, ...restProps }: ComplexSelectorProps<Value>): React.JSX.Element;
|
|
201
224
|
export declare namespace ComplexSelector {
|
|
202
225
|
var displayName: string;
|
|
203
226
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -17,6 +17,10 @@
|
|
|
17
17
|
*/
|
|
18
18
|
import React, { useCallback, useId, useImperativeHandle, useOptimistic, useRef, useTransition } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
|
+
import { useFieldInputStyling } from "../Field/fieldParts.js";
|
|
21
|
+
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
22
|
+
import { mergeRefs } from "../utils/mergeRefs.js";
|
|
23
|
+
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
20
24
|
import { Field, inputWrapperStyles } from "../Field/index.js";
|
|
21
25
|
import { Icon, renderIconSlot } from "../Icon/index.js";
|
|
22
26
|
import { Spinner } from "../Spinner/index.js";
|
|
@@ -144,6 +148,7 @@ const styles = {
|
|
|
144
148
|
$$css: true
|
|
145
149
|
}
|
|
146
150
|
};
|
|
151
|
+
const RENDER_TRIGGER_PARTS_MESSAGE = '`container*` and `control*` styling props have no effect with `renderTrigger`: ' + 'no Field box or control box renders. Style the control you render instead.';
|
|
147
152
|
|
|
148
153
|
/**
|
|
149
154
|
* Props the `renderTrigger` render prop hands to the control the caller
|
|
@@ -216,13 +221,28 @@ export function ComplexSelector({
|
|
|
216
221
|
renderTrigger,
|
|
217
222
|
onOpenChange,
|
|
218
223
|
contentXstyle,
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
224
|
+
containerXstyle,
|
|
225
|
+
containerClassName,
|
|
226
|
+
containerStyle,
|
|
227
|
+
controlXstyle,
|
|
228
|
+
controlClassName,
|
|
229
|
+
controlStyle,
|
|
230
|
+
ref,
|
|
231
|
+
id,
|
|
223
232
|
onClick: onClickProp,
|
|
224
|
-
|
|
233
|
+
onKeyDown: onKeyDownProp,
|
|
234
|
+
'aria-describedby': ariaDescribedByProp,
|
|
235
|
+
...restProps
|
|
225
236
|
}) {
|
|
237
|
+
const {
|
|
238
|
+
rest,
|
|
239
|
+
container
|
|
240
|
+
} = useFieldInputStyling('ComplexSelector', restProps, {
|
|
241
|
+
containerXstyle,
|
|
242
|
+
containerClassName,
|
|
243
|
+
containerStyle
|
|
244
|
+
});
|
|
245
|
+
useDevWarning('ComplexSelector', RENDER_TRIGGER_PARTS_MESSAGE, renderTrigger != null && (containerXstyle != null || containerClassName != null || containerStyle != null || controlXstyle != null || controlClassName != null || controlStyle != null));
|
|
226
246
|
const t = useTranslator();
|
|
227
247
|
const pressable = usePressFeedback();
|
|
228
248
|
const isEffectivelyRequired = useResolvedRequired({
|
|
@@ -231,13 +251,16 @@ export function ComplexSelector({
|
|
|
231
251
|
});
|
|
232
252
|
const placeholder = placeholderFromProps ?? t('@astryx.selector.placeholder');
|
|
233
253
|
const effectiveStatusVariant = variant === 'ghost' && statusVariant === 'attached' ? 'detached' : statusVariant;
|
|
234
|
-
const
|
|
254
|
+
const generatedTriggerId = useId();
|
|
255
|
+
// A caller's `id` lands on the trigger, so the label wiring must use it.
|
|
256
|
+
const triggerId = id ?? generatedTriggerId;
|
|
235
257
|
const labelId = useId();
|
|
236
258
|
const contentId = useId();
|
|
237
259
|
const descriptionId = useId();
|
|
238
260
|
const statusMessageId = useId();
|
|
239
261
|
const ariaDescribedBy = [description ? descriptionId : null, status?.message ? statusMessageId : null].filter(id => id != null).join(' ') || undefined;
|
|
240
262
|
const triggerRef = useRef(null);
|
|
263
|
+
const triggerButtonRef = useMergedRefs(triggerRef, ref);
|
|
241
264
|
const [isPending, startTransition] = useTransition();
|
|
242
265
|
const [optimisticValue, setOptimisticValue] = useOptimistic(value);
|
|
243
266
|
const isBusy = isLoading || isPending;
|
|
@@ -272,6 +295,32 @@ export function ComplexSelector({
|
|
|
272
295
|
const close = useCallback(() => {
|
|
273
296
|
popover.hide();
|
|
274
297
|
}, [popover]);
|
|
298
|
+
const handleTriggerKeyDown = useCallback(event => {
|
|
299
|
+
if (event.key === 'ArrowDown' && !isOpen && !isDisabled) {
|
|
300
|
+
event.preventDefault();
|
|
301
|
+
popover.show();
|
|
302
|
+
}
|
|
303
|
+
}, [isDisabled, isOpen, popover]);
|
|
304
|
+
|
|
305
|
+
// A caller `onClick` runs first and can cancel opening with
|
|
306
|
+
// `preventDefault()`, as it always could. It now lands on the trigger, so
|
|
307
|
+
// the trigger composes it; a press elsewhere in the control box (padding,
|
|
308
|
+
// start icon, chevron) opens the popup directly.
|
|
309
|
+
const handleTriggerButtonClick = composeEventHandlers(onClickProp, handleTriggerClick);
|
|
310
|
+
// A caller `onKeyDown` sees every key, including the ArrowDown the trigger
|
|
311
|
+
// has already used to open the popup.
|
|
312
|
+
const handleTriggerButtonKeyDown = event => {
|
|
313
|
+
handleTriggerKeyDown(event);
|
|
314
|
+
onKeyDownProp?.(event);
|
|
315
|
+
};
|
|
316
|
+
const handleControlBoxClick = useCallback(event => {
|
|
317
|
+
if (triggerRef.current?.contains(event.target)) {
|
|
318
|
+
return;
|
|
319
|
+
}
|
|
320
|
+
// Route the press through the trigger so it behaves exactly like a
|
|
321
|
+
// press on the trigger itself, caller `onClick` included.
|
|
322
|
+
triggerRef.current?.click();
|
|
323
|
+
}, []);
|
|
275
324
|
useImperativeHandle(handleRef, () => ({
|
|
276
325
|
open: () => {
|
|
277
326
|
if (!isDisabled) {
|
|
@@ -326,18 +375,19 @@ export function ComplexSelector({
|
|
|
326
375
|
// on it. No Field, no status, no chevron — the caller owns the control;
|
|
327
376
|
// the selector owns the popup, its anchor, and focus return.
|
|
328
377
|
const triggerProps = {
|
|
329
|
-
|
|
378
|
+
// Base props reach the caller's control, the primary semantic control
|
|
379
|
+
// in this mode; the selector's own wiring below wins over them.
|
|
380
|
+
...rest,
|
|
381
|
+
'aria-describedby': ariaDescribedByProp,
|
|
382
|
+
ref: mergeRefs(el => {
|
|
330
383
|
popover.triggerRef(el);
|
|
331
384
|
triggerRef.current = el;
|
|
332
|
-
},
|
|
385
|
+
}, ref),
|
|
333
386
|
id: triggerId,
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
popover.show();
|
|
339
|
-
}
|
|
340
|
-
},
|
|
387
|
+
// This path never forwarded caller handlers before, so the newly
|
|
388
|
+
// forwarded ones compose component first and cannot cancel opening.
|
|
389
|
+
onClick: composeEventHandlers(handleTriggerClick, onClickProp),
|
|
390
|
+
onKeyDown: composeEventHandlers(handleTriggerKeyDown, onKeyDownProp),
|
|
341
391
|
'aria-haspopup': 'dialog',
|
|
342
392
|
'aria-expanded': isOpen,
|
|
343
393
|
'aria-controls': contentId,
|
|
@@ -350,10 +400,8 @@ export function ComplexSelector({
|
|
|
350
400
|
const selectorContent = /*#__PURE__*/_jsxs(_Fragment, {
|
|
351
401
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
352
402
|
ref: popover.triggerRef,
|
|
353
|
-
"data-testid": testId,
|
|
354
403
|
...pressable,
|
|
355
|
-
|
|
356
|
-
onClick: composeEventHandlers(onClickProp, handleTriggerClick),
|
|
404
|
+
onClick: handleControlBoxClick,
|
|
357
405
|
...mergeProps(themeProps('complex-selector', {
|
|
358
406
|
variant,
|
|
359
407
|
size,
|
|
@@ -363,26 +411,25 @@ export function ComplexSelector({
|
|
|
363
411
|
// inside it), but it must still be a KEYBOARD ring: `:focus-within`
|
|
364
412
|
// matched a mouse click on the trigger and drew the outline for
|
|
365
413
|
// pointer users too. `focusWithin` here is `:has(:focus-visible)`.
|
|
366
|
-
focusOutlineStyles.focusWithin, variant === 'ghost' && styles.triggerGhost, variant === 'ghost' && interactionOverlayStyles.backgroundImage, isDisabled && inputWrapperStyles.disabled, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, isDisabled && styles.disabled, triggerLabel == null && styles.placeholder,
|
|
414
|
+
focusOutlineStyles.focusWithin, variant === 'ghost' && styles.triggerGhost, variant === 'ghost' && interactionOverlayStyles.backgroundImage, isDisabled && inputWrapperStyles.disabled, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, isDisabled && styles.disabled, triggerLabel == null && styles.placeholder, controlXstyle), controlClassName, controlStyle),
|
|
367
415
|
children: [isRenderable(startIconSlot) && startIconSlot, /*#__PURE__*/_jsx("button", {
|
|
368
|
-
|
|
416
|
+
...rest,
|
|
417
|
+
ref: triggerButtonRef,
|
|
369
418
|
id: triggerId,
|
|
370
419
|
type: "button",
|
|
371
420
|
"aria-haspopup": "dialog",
|
|
372
421
|
"aria-expanded": isOpen,
|
|
373
|
-
"aria-controls": contentId
|
|
374
|
-
|
|
422
|
+
"aria-controls": contentId
|
|
423
|
+
// A caller's description is kept alongside the field's own.
|
|
424
|
+
,
|
|
425
|
+
"aria-describedby": [ariaDescribedByProp, ariaDescribedBy].filter(Boolean).join(' ') || undefined,
|
|
375
426
|
"aria-labelledby": labelId,
|
|
376
427
|
"aria-required": isEffectivelyRequired ? 'true' : undefined,
|
|
377
428
|
"aria-invalid": status?.type === 'error' ? 'true' : undefined,
|
|
378
429
|
"aria-busy": isBusy || undefined,
|
|
379
430
|
disabled: isDisabled,
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
event.preventDefault();
|
|
383
|
-
popover.show();
|
|
384
|
-
}
|
|
385
|
-
},
|
|
431
|
+
onClick: handleTriggerButtonClick,
|
|
432
|
+
onKeyDown: handleTriggerButtonKeyDown,
|
|
386
433
|
...{
|
|
387
434
|
className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x16khyan x1a2a7pz xh6dtrn"
|
|
388
435
|
},
|
|
@@ -428,6 +475,7 @@ export function ComplexSelector({
|
|
|
428
475
|
statusVariant: effectiveStatusVariant,
|
|
429
476
|
labelTooltip: labelTooltip,
|
|
430
477
|
width: width,
|
|
478
|
+
...container,
|
|
431
479
|
children: selectorContent
|
|
432
480
|
});
|
|
433
481
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAkCrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,kCAAkC,CAAC;AAgG1C,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,sBAAsB,GAAG,uBAAuB,CAAC;AAE7D,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAK,EAAE,cAAc,EACrB,UAAkB,EAClB,YAAY,EACZ,YAAwB,EACxB,SAAiB,EACjB,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBA0clB;yBA1de,WAAW"}
|
|
@@ -42,7 +42,7 @@ import { useLayer } from "../Layer/useLayer.js";
|
|
|
42
42
|
import { MenuBottomSheetActionList } from "../DropdownMenu/MenuBottomSheetActionList.js";
|
|
43
43
|
import { renderDropdownItems } from "../DropdownMenu/renderDropdownItems.js";
|
|
44
44
|
import { DropdownMenuContext } from "../DropdownMenu/DropdownMenuContext.js";
|
|
45
|
-
import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR, activateMenuItem
|
|
45
|
+
import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR, activateMenuItem } from "../DropdownMenu/menuItemRoles.js";
|
|
46
46
|
import { useMenuOverflow } from "../DropdownMenu/useMenuOverflow.js";
|
|
47
47
|
import { useMenuDrillIn } from "../DropdownMenu/useMenuDrillIn.js";
|
|
48
48
|
import { useListFocus } from "../hooks/useListFocus.js";
|
|
@@ -287,9 +287,6 @@ export function ContextMenu({
|
|
|
287
287
|
// Menus wrap from the last row to the first and back.
|
|
288
288
|
wrap: true,
|
|
289
289
|
hasPaging: true,
|
|
290
|
-
// Arrows, Home and End leave a text field the menu hosts only at its
|
|
291
|
-
// caret's edge.
|
|
292
|
-
hasCaretGuard: true,
|
|
293
290
|
onEscape: closeMenu
|
|
294
291
|
});
|
|
295
292
|
|
|
@@ -353,13 +350,7 @@ export function ContextMenu({
|
|
|
353
350
|
if (!ownsEvent(e)) {
|
|
354
351
|
return;
|
|
355
352
|
}
|
|
356
|
-
// A key pressed in a control the menu hosts beside its rows is that
|
|
357
|
-
// control's; see DropdownMenu.
|
|
358
|
-
const hosted = hostedControlOf(e.target, listRef.current);
|
|
359
353
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
360
|
-
if (hosted != null) {
|
|
361
|
-
return;
|
|
362
|
-
}
|
|
363
354
|
e.preventDefault();
|
|
364
355
|
// A held key's auto-repeat never activates.
|
|
365
356
|
if (e.repeat) {
|
|
@@ -382,12 +373,12 @@ export function ContextMenu({
|
|
|
382
373
|
closeMenu();
|
|
383
374
|
return;
|
|
384
375
|
}
|
|
385
|
-
if (
|
|
376
|
+
if (typeahead.onKeyDown(e)) {
|
|
386
377
|
e.preventDefault();
|
|
387
378
|
return;
|
|
388
379
|
}
|
|
389
380
|
listNavKeyDown(e);
|
|
390
|
-
}, [listNavKeyDown, closeMenu, typeahead, ownsEvent
|
|
381
|
+
}, [listNavKeyDown, closeMenu, typeahead, ownsEvent]);
|
|
391
382
|
|
|
392
383
|
// Place the zero-size cursor anchor at a point in the trigger's local
|
|
393
384
|
// coordinate space and open the menu. Positioning the anchor inside the
|
|
@@ -47,10 +47,10 @@ export type DateInputNativePicker = 'touch' | 'always' | 'never';
|
|
|
47
47
|
export type DateInputPresentation = PickerPresentation;
|
|
48
48
|
export type DateInputFormat = Extract<TimestampFormat, 'date' | 'date_long' | 'date_weekday' | 'system_date'>;
|
|
49
49
|
export type { InputStatus as DateInputStatus, InputStatusType as DateInputStatusType, } from '../Field';
|
|
50
|
-
import type
|
|
50
|
+
import { type FieldInputBaseProps } from '../Field/fieldParts';
|
|
51
51
|
import type { SizeValue } from '../utils/types';
|
|
52
|
-
export interface DateInputProps extends Omit<
|
|
53
|
-
/** Ref forwarded to the
|
|
52
|
+
export interface DateInputProps extends Omit<FieldInputBaseProps<HTMLInputElement>, 'onChange' | 'defaultValue'> {
|
|
53
|
+
/** Ref forwarded to the date input (the field's semantic control) */
|
|
54
54
|
ref?: React.Ref<HTMLInputElement>;
|
|
55
55
|
/**
|
|
56
56
|
* Label text for the input (required for accessibility).
|
|
@@ -161,7 +161,7 @@ export interface DateInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
|
|
|
161
161
|
/**
|
|
162
162
|
* Width of the field. Numbers are treated as pixels, strings are used as-is
|
|
163
163
|
* (e.g. `'100%'`). Sizes the whole field (label, control, and status) so they
|
|
164
|
-
* stay aligned, unlike setting width via `
|
|
164
|
+
* stay aligned, unlike setting width via `containerXstyle` or `controlXstyle`.
|
|
165
165
|
*/
|
|
166
166
|
width?: SizeValue;
|
|
167
167
|
/**
|
|
@@ -298,6 +298,11 @@ export interface DateInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
|
|
|
298
298
|
* with a calendar icon and the formatted date — and differ only in what
|
|
299
299
|
* opens. Nothing moves; the field just starts opening a sheet.
|
|
300
300
|
*
|
|
301
|
+
* Base props (`ref`, `id`, `data-*`, `aria-*`, DOM event handlers) go to the date input.
|
|
302
|
+
* A DOM handler runs after the component's own handler for the same event
|
|
303
|
+
* and still receives events the component handled, even ones it called
|
|
304
|
+
* `preventDefault` on, so it cannot cancel built-in behavior.
|
|
305
|
+
*
|
|
301
306
|
* @example
|
|
302
307
|
* ```
|
|
303
308
|
* <DateInput
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/DateInput/DateInput.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAQ3C,OAAO,EAGL,KAAK,WAAW,EAKhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAOlB,OAAO,EAEL,KAAK,aAAa,EAElB,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/DateInput/DateInput.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAQ3C,OAAO,EAGL,KAAK,WAAW,EAKhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAOlB,OAAO,EAEL,KAAK,aAAa,EAElB,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAgBrB,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAClD,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,4BAA4B,CAAC;AAuDpC,QAAA,MAAM,UAAU;;;;;;;;;;;;;EAad,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,UAAU,CAAC;AAEpD;;;;;;;;;;;;;GAaG;AACH;;;;;;;;GAQG;AACH,iFAAiF;AACjF,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEjE,8FAA8F;AAC9F,MAAM,MAAM,qBAAqB,GAAG,kBAAkB,CAAC;AAEvD,MAAM,MAAM,eAAe,GAAG,OAAO,CACnC,eAAe,EACf,MAAM,GAAG,WAAW,GAAG,cAAc,GAAG,aAAa,CACtD,CAAC;AAIF,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAGlB,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAM9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,UAAU,GAAG,cAAc,CAC5B;IACC,qEAAqE;IACrE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE1E;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IAEnC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEvB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,MAAM,CAAC,EAAE,eAAe,GAAG,CAAC,CAAC,KAAK,EAAE,aAAa,KAAK,MAAM,CAAC,CAAC;IAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8BG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;CACtC;AAugBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BAwB9C;yBAxBe,SAAS"}
|