@astryxdesign/core 0.4.0 → 0.4.1-canary.0ad35c3
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/CHANGELOG.md +39 -0
- package/dist/AspectRatio/AspectRatio.d.ts.map +1 -1
- package/dist/AspectRatio/AspectRatio.js +1 -2
- package/dist/AspectRatio/index.d.ts.map +1 -1
- package/dist/AspectRatio/index.js +1 -2
- package/dist/Badge/Badge.d.ts.map +1 -1
- package/dist/Badge/Badge.js +1 -2
- package/dist/Badge/index.d.ts.map +1 -1
- package/dist/Badge/index.js +1 -2
- package/dist/Banner/Banner.d.ts +3 -0
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +17 -3
- package/dist/Blockquote/Blockquote.d.ts.map +1 -1
- package/dist/Blockquote/Blockquote.js +1 -2
- package/dist/Blockquote/index.d.ts.map +1 -1
- package/dist/Blockquote/index.js +1 -2
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +11 -9
- package/dist/Card/Card.d.ts.map +1 -1
- package/dist/Card/Card.js +1 -2
- package/dist/Card/index.d.ts.map +1 -1
- package/dist/Card/index.js +1 -2
- package/dist/Center/Center.d.ts.map +1 -1
- package/dist/Center/Center.js +1 -2
- package/dist/Center/index.d.ts.map +1 -1
- package/dist/Center/index.js +1 -2
- package/dist/Chat/ChatMessage.d.ts +7 -0
- package/dist/Chat/ChatMessage.d.ts.map +1 -1
- package/dist/Chat/ChatMessageBubble.d.ts +13 -1
- package/dist/Chat/ChatMessageBubble.d.ts.map +1 -1
- package/dist/Chat/ChatMessageBubble.js +19 -1
- package/dist/Code/Code.d.ts.map +1 -1
- package/dist/Code/Code.js +1 -2
- package/dist/CommandPalette/CommandPalette.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPalette.js +5 -0
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +7 -8
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +23 -10
- package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/DateRangeInput/DateRangeInput.js +44 -16
- package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
- package/dist/DateTimeInput/DateTimeInput.js +32 -13
- package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts +1 -1
- package/dist/DropdownMenu/DropdownMenuRadioGroup.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuRadioGroup.js +10 -3
- package/dist/Field/PanelSearchInput.d.ts +81 -0
- package/dist/Field/PanelSearchInput.d.ts.map +1 -0
- package/dist/Field/PanelSearchInput.js +151 -0
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +21 -10
- package/dist/Grid/Grid.d.ts.map +1 -1
- package/dist/Grid/Grid.js +1 -2
- package/dist/Grid/index.d.ts.map +1 -1
- package/dist/Grid/index.js +1 -2
- package/dist/HoverCard/HoverCard.d.ts +1 -1
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +5 -13
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +6 -5
- package/dist/Icon/globalIconRegistry.d.ts +5 -4
- package/dist/Icon/globalIconRegistry.d.ts.map +1 -1
- package/dist/Icon/globalIconRegistry.js +5 -4
- package/dist/Indicator/index.d.ts +1 -1
- package/dist/Indicator/index.d.ts.map +1 -1
- package/dist/Indicator/types.d.ts +10 -0
- package/dist/Indicator/types.d.ts.map +1 -1
- package/dist/InputGroup/groupStyles.d.ts.map +1 -1
- package/dist/InputGroup/groupStyles.js +7 -2
- package/dist/Layer/layerHost.d.ts +24 -0
- package/dist/Layer/layerHost.d.ts.map +1 -0
- package/dist/Layer/layerHost.js +79 -0
- package/dist/Layer/useLayer.d.ts +14 -6
- package/dist/Layer/useLayer.d.ts.map +1 -1
- package/dist/Layer/useLayer.js +155 -29
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +24 -50
- package/dist/MultiSelector/MultiSelector.d.ts +8 -1
- package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
- package/dist/MultiSelector/MultiSelector.js +134 -102
- package/dist/NavItem/navItemStyles.stylex.d.ts +17 -5
- package/dist/NavItem/navItemStyles.stylex.d.ts.map +1 -1
- package/dist/NavItem/navItemStyles.stylex.js +11 -5
- package/dist/Popover/usePopover.d.ts +15 -0
- package/dist/Popover/usePopover.d.ts.map +1 -1
- package/dist/Popover/usePopover.js +14 -2
- package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/ProgressBar/ProgressBar.js +2 -3
- package/dist/Section/Section.d.ts.map +1 -1
- package/dist/Section/Section.js +1 -2
- package/dist/Section/index.d.ts.map +1 -1
- package/dist/Section/index.js +1 -2
- package/dist/Selector/Selector.d.ts +10 -0
- package/dist/Selector/Selector.d.ts.map +1 -1
- package/dist/Selector/Selector.js +135 -95
- package/dist/SideNav/SideNav.d.ts +7 -9
- package/dist/SideNav/SideNav.d.ts.map +1 -1
- package/dist/SideNav/SideNav.js +32 -5
- package/dist/SideNav/SideNavCollapseButton.d.ts +25 -9
- package/dist/SideNav/SideNavCollapseButton.d.ts.map +1 -1
- package/dist/SideNav/SideNavCollapseButton.js +39 -15
- package/dist/SideNav/SideNavCollapseContext.d.ts +21 -0
- package/dist/SideNav/SideNavCollapseContext.d.ts.map +1 -1
- package/dist/SideNav/SideNavCollapseContext.js +16 -2
- package/dist/SideNav/SideNavHeading.d.ts.map +1 -1
- package/dist/SideNav/SideNavHeading.js +70 -24
- package/dist/SideNav/SideNavItem.d.ts +7 -2
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/SideNav/SideNavItem.js +114 -75
- package/dist/SideNav/SideNavSection.d.ts.map +1 -1
- package/dist/SideNav/SideNavSection.js +7 -16
- package/dist/SideNav/index.d.ts +1 -1
- package/dist/SideNav/index.d.ts.map +1 -1
- package/dist/Skeleton/Skeleton.d.ts.map +1 -1
- package/dist/Skeleton/Skeleton.js +1 -2
- package/dist/Skeleton/index.d.ts.map +1 -1
- package/dist/Skeleton/index.js +1 -2
- package/dist/Slider/Slider.d.ts.map +1 -1
- package/dist/Slider/Slider.js +2 -6
- package/dist/Switch/Switch.d.ts.map +1 -1
- package/dist/Switch/Switch.js +3 -3
- package/dist/Table/TableRow.d.ts +1 -1
- package/dist/Table/TableRow.d.ts.map +1 -1
- package/dist/Table/TableRow.js +4 -2
- package/dist/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/TimeInput/TimeInput.js +7 -2
- package/dist/Timestamp/Timestamp.d.ts.map +1 -1
- package/dist/Timestamp/Timestamp.js +14 -3
- package/dist/Timestamp/formatInstant.d.ts +11 -1
- package/dist/Timestamp/formatInstant.d.ts.map +1 -1
- package/dist/Timestamp/formatInstant.js +3 -1
- package/dist/TopNav/TopNavMegaMenu.js +1 -1
- package/dist/TopNav/TopNavMegaMenuItem.js +1 -1
- package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMenu.js +2 -2
- package/dist/VisuallyHidden/VisuallyHidden.d.ts.map +1 -1
- package/dist/VisuallyHidden/VisuallyHidden.js +1 -2
- package/dist/VisuallyHidden/index.d.ts.map +1 -1
- package/dist/VisuallyHidden/index.js +1 -2
- package/dist/astryx.css +23 -24
- package/dist/astryx.umd.js +47 -47
- package/dist/astryx.umd.js.map +4 -4
- package/dist/hooks/index.d.ts +1 -1
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -1
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js +16 -2
- package/dist/hooks/useInputStatusIcon.d.ts.map +1 -1
- package/dist/hooks/useInputStatusIcon.js +17 -4
- package/dist/theme/defineTheme.d.ts +2 -2
- package/dist/theme/defineTheme.d.ts.map +1 -1
- package/dist/theme/defineTheme.js +2 -1
- package/dist/theme/index.d.ts +1 -1
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/index.js +1 -1
- package/dist/theme/tokens.stylex.d.ts +12 -0
- package/dist/theme/tokens.stylex.d.ts.map +1 -1
- package/dist/theme/tokens.stylex.js +23 -0
- package/dist/utils/focusOutline.stylex.d.ts +34 -19
- package/dist/utils/focusOutline.stylex.d.ts.map +1 -1
- package/dist/utils/focusOutline.stylex.js +46 -33
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +5 -1
- package/dist/utils/interactionModality.d.ts +34 -0
- package/dist/utils/interactionModality.d.ts.map +1 -0
- package/dist/utils/interactionModality.js +70 -0
- package/locales/en.json +44 -0
- package/locales/pseudo.json +33 -0
- package/package.json +3 -3
- package/src/AppShell/AppShell.doc.mjs +3 -0
- package/src/AspectRatio/AspectRatio.tsx +0 -2
- package/src/AspectRatio/index.ts +0 -2
- package/src/Badge/Badge.tsx +0 -2
- package/src/Badge/index.ts +0 -2
- package/src/Banner/Banner.test.tsx +58 -1
- package/src/Banner/Banner.tsx +24 -5
- package/src/Blockquote/Blockquote.tsx +0 -2
- package/src/Blockquote/index.ts +0 -2
- package/src/Button/Button.doc.mjs +2 -2
- package/src/Button/Button.tsx +10 -7
- package/src/ButtonGroup/ButtonGroup.test.tsx +7 -4
- package/src/Card/Card.tsx +0 -2
- package/src/Card/index.ts +0 -2
- package/src/Center/Center.tsx +0 -2
- package/src/Center/index.ts +0 -2
- package/src/Chat/Chat.doc.mjs +4 -1
- package/src/Chat/ChatMessage.doc.mjs +3 -3
- package/src/Chat/ChatMessage.tsx +7 -0
- package/src/Chat/ChatMessageBubble.doc.mjs +7 -0
- package/src/Chat/ChatMessageBubble.test.tsx +95 -6
- package/src/Chat/ChatMessageBubble.tsx +25 -0
- package/src/CheckboxInput/CheckboxInput.test.tsx +8 -3
- package/src/Code/Code.tsx +0 -2
- package/src/CommandPalette/CommandPalette.test.tsx +54 -0
- package/src/CommandPalette/CommandPalette.tsx +5 -0
- package/src/ComplexSelector/ComplexSelector.test.tsx +15 -6
- package/src/ComplexSelector/ComplexSelector.tsx +6 -10
- package/src/DateInput/DateInput.test.tsx +19 -0
- package/src/DateInput/DateInput.tsx +3 -6
- package/src/DateRangeInput/DateRangeInput.tsx +3 -9
- package/src/DateTimeInput/DateTimeInput.test.tsx +79 -1
- package/src/DateTimeInput/DateTimeInput.tsx +23 -9
- package/src/DropdownMenu/DropdownMenuRadioGroup.tsx +2 -1
- package/src/Field/PanelSearchInput.tsx +271 -0
- package/src/FileInput/FileInput.tsx +21 -8
- package/src/Grid/Grid.tsx +0 -2
- package/src/Grid/index.ts +0 -2
- package/src/HoverCard/HoverCard.doc.mjs +3 -3
- package/src/HoverCard/HoverCard.test.tsx +283 -55
- package/src/HoverCard/HoverCard.tsx +5 -13
- package/src/HoverCard/useHoverCard.tsx +8 -11
- package/src/Icon/globalIconRegistry.tsx +5 -4
- package/src/Indicator/Indicator.doc.mjs +1 -1
- package/src/Indicator/index.ts +1 -0
- package/src/Indicator/types.ts +11 -0
- package/src/InputGroup/groupStyles.ts +7 -8
- package/src/Layer/layerHost.test.ts +99 -0
- package/src/Layer/layerHost.ts +141 -0
- package/src/Layer/useLayer.doc.mjs +14 -4
- package/src/Layer/useLayer.test.tsx +318 -7
- package/src/Layer/useLayer.tsx +229 -35
- package/src/Lightbox/Lightbox.tsx +2 -11
- package/src/MultiSelector/MultiSelector.doc.mjs +9 -0
- package/src/MultiSelector/MultiSelector.test.tsx +135 -5
- package/src/MultiSelector/MultiSelector.tsx +170 -127
- package/src/NavItem/navItemStyles.stylex.ts +31 -5
- package/src/Popover/Popover.doc.mjs +2 -0
- package/src/Popover/usePopover.tsx +37 -4
- package/src/ProgressBar/ProgressBar.tsx +2 -8
- package/src/Section/Section.tsx +0 -2
- package/src/Section/index.ts +0 -2
- package/src/Selector/Selector.doc.mjs +10 -0
- package/src/Selector/Selector.test.tsx +386 -2
- package/src/Selector/Selector.tsx +182 -122
- package/src/SideNav/SideNav.doc.mjs +13 -4
- package/src/SideNav/SideNav.test.tsx +771 -2
- package/src/SideNav/SideNav.tsx +37 -16
- package/src/SideNav/SideNavCollapseButton.doc.mjs +28 -6
- package/src/SideNav/SideNavCollapseButton.tsx +67 -15
- package/src/SideNav/SideNavCollapseContext.ts +29 -9
- package/src/SideNav/SideNavHeading.tsx +28 -10
- package/src/SideNav/SideNavItem.doc.mjs +13 -0
- package/src/SideNav/SideNavItem.tsx +92 -84
- package/src/SideNav/SideNavSection.tsx +6 -20
- package/src/SideNav/index.ts +2 -0
- package/src/Skeleton/Skeleton.tsx +0 -2
- package/src/Skeleton/index.ts +0 -2
- package/src/Slider/Slider.tsx +2 -11
- package/src/Switch/Switch.tsx +10 -2
- package/src/Table/Table.test.tsx +31 -0
- package/src/Table/TableRow.tsx +6 -0
- package/src/Text/Text.doc.mjs +1 -1
- package/src/TimeInput/TimeInput.test.tsx +54 -0
- package/src/TimeInput/TimeInput.tsx +17 -2
- package/src/Timestamp/Timestamp.test.tsx +125 -30
- package/src/Timestamp/Timestamp.tsx +14 -2
- package/src/Timestamp/formatInstant.ts +16 -1
- package/src/Toolbar/Toolbar.test.tsx +14 -14
- package/src/TopNav/TopNavMegaMenu.doc.mjs +5 -0
- package/src/TopNav/TopNavMegaMenu.test.tsx +43 -0
- package/src/TopNav/TopNavMegaMenu.tsx +4 -1
- package/src/TopNav/TopNavMegaMenuItem.tsx +1 -1
- package/src/TopNav/TopNavMenu.test.tsx +41 -0
- package/src/TopNav/TopNavMenu.tsx +8 -2
- package/src/TreeList/TreeList.test.tsx +3 -2
- package/src/VisuallyHidden/VisuallyHidden.tsx +0 -2
- package/src/VisuallyHidden/index.ts +0 -2
- package/src/hooks/index.ts +5 -1
- package/src/hooks/useFocusTrap.test.tsx +16 -0
- package/src/hooks/useFocusTrap.ts +20 -2
- package/src/hooks/useInputStatusIcon.tsx +8 -8
- package/src/serverSafeComponents.test.ts +665 -0
- package/src/theme/defineTheme.ts +3 -0
- package/src/theme/generateThemeRules.test.ts +17 -0
- package/src/theme/index.ts +2 -0
- package/src/theme/themingTargets.test.ts +152 -26
- package/src/theme/tokens.stylex.ts +18 -0
- package/src/theme/tokens.test.ts +37 -0
- package/src/utils/focusOutline.stylex.ts +37 -23
- package/src/utils/index.ts +4 -0
- package/src/utils/interactionModality.ts +74 -0
|
@@ -195,6 +195,11 @@ export function ComplexSelector({
|
|
|
195
195
|
dialogLabel: label,
|
|
196
196
|
hasCloseButton: false,
|
|
197
197
|
hasAutoFocus: true,
|
|
198
|
+
// The popup's theme target belongs on the SURFACE — the element painting
|
|
199
|
+
// background, radius and elevation — which `usePopover` owns. Rendered on
|
|
200
|
+
// the content box below it, a theme's background or radius rule paints the
|
|
201
|
+
// wrong box.
|
|
202
|
+
surfaceTarget: 'complex-selector-popup',
|
|
198
203
|
onHide: () => {
|
|
199
204
|
document.getElementById(triggerId)?.focus();
|
|
200
205
|
}
|
|
@@ -209,15 +214,9 @@ export function ComplexSelector({
|
|
|
209
214
|
}
|
|
210
215
|
}, [changeAction, onChange, setOptimisticValue, startTransition]);
|
|
211
216
|
const triggerContent = triggerLabel ?? placeholder;
|
|
212
|
-
const content =
|
|
213
|
-
/*#__PURE__*/
|
|
214
|
-
// The theme target sits here, not on the layer: the layer element is a
|
|
215
|
-
// bare positioning box (useLayer zeroes its borders, padding and
|
|
216
|
-
// background), so this content box is the surface a theme has to reach to
|
|
217
|
-
// paint the popup.
|
|
218
|
-
_jsx("div", {
|
|
217
|
+
const content = /*#__PURE__*/_jsx("div", {
|
|
219
218
|
id: contentId,
|
|
220
|
-
...
|
|
219
|
+
...stylex.props(styles.content, contentXstyle),
|
|
221
220
|
children: children(optimisticValue, commitValue, popover.hide, {
|
|
222
221
|
isOpen: popover.isOpen,
|
|
223
222
|
isBusy,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/DateInput/DateInput.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,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;AAWrB,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/DateInput/DateInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
import { useId, useState, useCallback, useRef, useOptimistic, useTransition } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import "../theme/tokens.stylex.js";
|
|
21
|
-
import { colorVars, sizeVars, radiusVars, typographyVars, typeScaleVars
|
|
21
|
+
import { colorVars, sizeVars, radiusVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
22
22
|
import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
|
|
23
23
|
import { Icon } from "../Icon/index.js";
|
|
24
24
|
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
@@ -33,6 +33,25 @@ import { usePopover } from "../Popover/index.js";
|
|
|
33
33
|
import { useTooltip } from "../Tooltip/index.js";
|
|
34
34
|
import { getInputARIA, parseDateInput } from "../utils/index.js";
|
|
35
35
|
import { plainDateFromISO, plainDateToISO, formatSharedDate } from "../utils/plainDate.js";
|
|
36
|
+
const styles = {
|
|
37
|
+
iconButton: {
|
|
38
|
+
k1xSpc: "x78zum5",
|
|
39
|
+
kGNEyG: "x6s0dn4",
|
|
40
|
+
kjj79g: "xl56j7k",
|
|
41
|
+
kmVPX3: "x1717udv",
|
|
42
|
+
kogj98: "x1ghz6dp",
|
|
43
|
+
kMzoRj: "xc342km",
|
|
44
|
+
ksu8eU: "xng3xce",
|
|
45
|
+
kWkggS: "xjbqb8w",
|
|
46
|
+
kkrTdU: "x1ypdohk",
|
|
47
|
+
kaIpWk: "xh6dtrn",
|
|
48
|
+
$$css: true
|
|
49
|
+
},
|
|
50
|
+
iconButtonDisabled: {
|
|
51
|
+
kkrTdU: "x1h6gzvc",
|
|
52
|
+
$$css: true
|
|
53
|
+
}
|
|
54
|
+
};
|
|
36
55
|
const sizeStyles = {
|
|
37
56
|
sm: {
|
|
38
57
|
kZKoxP: "x6k0iem",
|
|
@@ -70,6 +89,7 @@ const sizeStyles = {
|
|
|
70
89
|
|
|
71
90
|
import { mergeProps, mergeRefs, isFocusDetached } from "../utils/index.js";
|
|
72
91
|
import { themeProps } from "../utils/themeProps.js";
|
|
92
|
+
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
73
93
|
import { stableClassName } from "../naming.js";
|
|
74
94
|
import { useTranslator } from "../i18n/index.js";
|
|
75
95
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -354,14 +374,7 @@ export function DateInput({
|
|
|
354
374
|
onClick: handleToggle,
|
|
355
375
|
disabled: isEffectivelyDisabled,
|
|
356
376
|
"aria-label": popover.isOpen ? t('@astryx.dateInput.toggleCalendarClose') : t('@astryx.dateInput.openCalendar'),
|
|
357
|
-
...
|
|
358
|
-
0: {
|
|
359
|
-
className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
|
|
360
|
-
},
|
|
361
|
-
1: {
|
|
362
|
-
className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xh6dtrn x1a2a7pz x1p25gnr x1y3gkto x1h6gzvc"
|
|
363
|
-
}
|
|
364
|
-
}[!!isEffectivelyDisabled << 0],
|
|
377
|
+
...stylex.props(focusOutlineStyles.focusVisible, styles.iconButton, isEffectivelyDisabled && styles.iconButtonDisabled),
|
|
365
378
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
366
379
|
icon: "calendar",
|
|
367
380
|
size: "sm",
|
|
@@ -424,7 +437,7 @@ export function DateInput({
|
|
|
424
437
|
as: "div",
|
|
425
438
|
role: "alert",
|
|
426
439
|
"aria-live": "assertive",
|
|
427
|
-
children: !isInputValid ? '
|
|
440
|
+
children: !isInputValid ? t('@astryx.dateInput.invalidDate') : ''
|
|
428
441
|
}), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsx(InputClearButton, {
|
|
429
442
|
label: t('@astryx.dateInput.clear', {
|
|
430
443
|
label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"AAoCA,OAAO,EAGL,KAAK,WAAW,EAKhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAGlB,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAIrB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -30,9 +30,51 @@ import { mergeProps } from "../utils/index.js";
|
|
|
30
30
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
31
31
|
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
32
32
|
import { themeProps } from "../utils/themeProps.js";
|
|
33
|
+
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
33
34
|
import { stableClassName } from "../naming.js";
|
|
34
35
|
import { useTranslator } from "../i18n/index.js";
|
|
35
36
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
37
|
+
const styles = {
|
|
38
|
+
iconButton: {
|
|
39
|
+
k1xSpc: "x78zum5",
|
|
40
|
+
kGNEyG: "x6s0dn4",
|
|
41
|
+
kjj79g: "xl56j7k",
|
|
42
|
+
kmVPX3: "x1717udv",
|
|
43
|
+
kogj98: "x1ghz6dp",
|
|
44
|
+
kMzoRj: "xc342km",
|
|
45
|
+
ksu8eU: "xng3xce",
|
|
46
|
+
kWkggS: "xjbqb8w",
|
|
47
|
+
kkrTdU: "x1ypdohk",
|
|
48
|
+
kaIpWk: "xh6dtrn",
|
|
49
|
+
$$css: true
|
|
50
|
+
},
|
|
51
|
+
iconButtonDisabled: {
|
|
52
|
+
kkrTdU: "x1h6gzvc",
|
|
53
|
+
$$css: true
|
|
54
|
+
},
|
|
55
|
+
presetButton: {
|
|
56
|
+
k1xSpc: "x1lliihq",
|
|
57
|
+
kzqmXN: "xh8yej3",
|
|
58
|
+
kmVPX3: "xtozwh",
|
|
59
|
+
kogj98: "x1ghz6dp",
|
|
60
|
+
kMzoRj: "xc342km",
|
|
61
|
+
ksu8eU: "xng3xce",
|
|
62
|
+
kaIpWk: "xh6dtrn",
|
|
63
|
+
kWkggS: "xjbqb8w xe9uy6x",
|
|
64
|
+
kMv6JI: "x9ynric",
|
|
65
|
+
kGuDYH: "xcr08ib",
|
|
66
|
+
kLWn49: "x1kq96og",
|
|
67
|
+
kMwMTN: "x1tgivj0",
|
|
68
|
+
kkrTdU: "x1ypdohk",
|
|
69
|
+
k9WMMc: "x1yc453h",
|
|
70
|
+
$$css: true
|
|
71
|
+
},
|
|
72
|
+
presetButtonActive: {
|
|
73
|
+
kWkggS: "xgcxg3y",
|
|
74
|
+
kMwMTN: "xqwr325",
|
|
75
|
+
$$css: true
|
|
76
|
+
}
|
|
77
|
+
};
|
|
36
78
|
const sizeStyles = {
|
|
37
79
|
sm: {
|
|
38
80
|
kZKoxP: "x6k0iem",
|
|
@@ -229,14 +271,7 @@ export function DateRangeInput({
|
|
|
229
271
|
disabled: isEffectivelyDisabled,
|
|
230
272
|
"aria-label": popover.isOpen ? t('@astryx.dateInput.toggleCalendarClose') : t('@astryx.dateInput.openCalendar'),
|
|
231
273
|
tabIndex: -1,
|
|
232
|
-
...
|
|
233
|
-
0: {
|
|
234
|
-
className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
|
|
235
|
-
},
|
|
236
|
-
1: {
|
|
237
|
-
className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xh6dtrn x1a2a7pz x1p25gnr x1y3gkto x1h6gzvc"
|
|
238
|
-
}
|
|
239
|
-
}[!!isEffectivelyDisabled << 0],
|
|
274
|
+
...stylex.props(focusOutlineStyles.focusVisible, styles.iconButton, isEffectivelyDisabled && styles.iconButtonDisabled),
|
|
240
275
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
241
276
|
icon: "calendar",
|
|
242
277
|
size: "sm",
|
|
@@ -311,14 +346,7 @@ export function DateRangeInput({
|
|
|
311
346
|
,
|
|
312
347
|
"aria-current": isActive ? 'true' : undefined,
|
|
313
348
|
onClick: () => handlePresetClick(preset),
|
|
314
|
-
...
|
|
315
|
-
0: {
|
|
316
|
-
className: "x1lliihq xh8yej3 xtozwh x1ghz6dp xc342km xng3xce xh6dtrn xjbqb8w xe9uy6x x9ynric xcr08ib x1kq96og x1tgivj0 x1ypdohk x1yc453h x1a2a7pz x1p25gnr"
|
|
317
|
-
},
|
|
318
|
-
1: {
|
|
319
|
-
className: "x1lliihq xh8yej3 xtozwh x1ghz6dp xc342km xng3xce xh6dtrn x9ynric xcr08ib x1kq96og x1ypdohk x1yc453h x1a2a7pz x1p25gnr xgcxg3y xqwr325"
|
|
320
|
-
}
|
|
321
|
-
}[!!isActive << 0],
|
|
349
|
+
...stylex.props(focusOutlineStyles.focusVisible, styles.presetButton, isActive && styles.presetButtonActive),
|
|
322
350
|
children: preset.label
|
|
323
351
|
}, preset.label);
|
|
324
352
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAKjB,MAAM,UAAU,CAAC;AAIlB,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AA0BrB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/DateTimeInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file DateTimeInput.tsx
|
|
7
|
-
* @input Uses React, Field, Calendar, usePopover, time parsing utilities
|
|
7
|
+
* @input Uses React, Field, Calendar, usePopover, useAnnounce, time parsing utilities
|
|
8
8
|
* @output Exports DateTimeInput component, DateTimeInputProps
|
|
9
9
|
* @position Core implementation; consumed by index.ts, tested by DateTimeInput.test.tsx
|
|
10
10
|
*
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
import { useId, useState, useCallback, useRef, useMemo, useOptimistic, useTransition } from 'react';
|
|
19
19
|
import * as stylex from '@stylexjs/stylex';
|
|
20
20
|
import "../theme/tokens.stylex.js";
|
|
21
|
-
import { colorVars, sizeVars, radiusVars, spacingVars, typographyVars, typeScaleVars
|
|
21
|
+
import { colorVars, sizeVars, radiusVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
|
|
22
22
|
import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
|
|
23
23
|
import { Icon } from "../Icon/index.js";
|
|
24
24
|
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
@@ -31,8 +31,10 @@ import { useInputContainer } from "../hooks/useInputContainer.js";
|
|
|
31
31
|
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
32
32
|
import { parseDateInput, parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, isTimeInRange, adjustTime, mergeProps, mergeRefs, isFocusDetached } from "../utils/index.js";
|
|
33
33
|
import { plainDateFromISO, plainDateToISO, plainDateFormat, DATE_FORMAT_LONG } from "../utils/plainDate.js";
|
|
34
|
+
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
34
35
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
35
36
|
import { themeProps } from "../utils/themeProps.js";
|
|
37
|
+
import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
|
|
36
38
|
import { useTranslator } from "../i18n/index.js";
|
|
37
39
|
|
|
38
40
|
/** Supported minute increments for arrow-key stepping of the time field. */
|
|
@@ -43,6 +45,23 @@ const styles = {
|
|
|
43
45
|
kOIVth: "x1txdalj",
|
|
44
46
|
$$css: true
|
|
45
47
|
},
|
|
48
|
+
iconButton: {
|
|
49
|
+
k1xSpc: "x78zum5",
|
|
50
|
+
kGNEyG: "x6s0dn4",
|
|
51
|
+
kjj79g: "xl56j7k",
|
|
52
|
+
kmVPX3: "x1717udv",
|
|
53
|
+
kogj98: "x1ghz6dp",
|
|
54
|
+
kMzoRj: "xc342km",
|
|
55
|
+
ksu8eU: "xng3xce",
|
|
56
|
+
kWkggS: "xjbqb8w",
|
|
57
|
+
kkrTdU: "x1ypdohk",
|
|
58
|
+
kaIpWk: "xh6dtrn",
|
|
59
|
+
$$css: true
|
|
60
|
+
},
|
|
61
|
+
iconButtonDisabled: {
|
|
62
|
+
kkrTdU: "x1h6gzvc",
|
|
63
|
+
$$css: true
|
|
64
|
+
},
|
|
46
65
|
dateWrapper: {
|
|
47
66
|
kUk6DE: "x98rzlu",
|
|
48
67
|
kCS8Yb: "x1r8uery",
|
|
@@ -151,6 +170,10 @@ export function DateTimeInput({
|
|
|
151
170
|
...rest
|
|
152
171
|
}) {
|
|
153
172
|
const t = useTranslator();
|
|
173
|
+
// Speaks arrow-key stepping results through the persistent live regions:
|
|
174
|
+
// stepping programmatically rewrites a plain textbox's value, which screen
|
|
175
|
+
// readers do not announce on their own (WCAG 4.1.2).
|
|
176
|
+
const announce = useAnnounce();
|
|
154
177
|
const placeholder = placeholderFromProps ?? t('@astryx.dateTimeInput.placeholder');
|
|
155
178
|
const timePlaceholder = timePlaceholderFromProps ?? t('@astryx.dateTimeInput.timePlaceholder');
|
|
156
179
|
const size = useSize(sizeProp, 'md');
|
|
@@ -465,10 +488,13 @@ export function DateTimeInput({
|
|
|
465
488
|
const combined = combineDateTime(valueParts.date, newTime);
|
|
466
489
|
if (combined) {
|
|
467
490
|
fireChange(combined);
|
|
491
|
+
// Screen readers do not announce the programmatic value rewrite,
|
|
492
|
+
// so speak the new time explicitly (WCAG 4.1.2).
|
|
493
|
+
announce(formatDisplayTime(newTime, hasSeconds));
|
|
468
494
|
}
|
|
469
495
|
}
|
|
470
496
|
}
|
|
471
|
-
}, [valueParts, hasSeconds, timeIncrement, timeMin, timeMax, fireChange]);
|
|
497
|
+
}, [valueParts, hasSeconds, timeIncrement, timeMin, timeMax, fireChange, announce, formatDisplayTime]);
|
|
472
498
|
|
|
473
499
|
// --- Clear ---
|
|
474
500
|
const handleClear = useCallback(() => {
|
|
@@ -521,14 +547,7 @@ export function DateTimeInput({
|
|
|
521
547
|
onClick: handleCalendarToggle,
|
|
522
548
|
disabled: isEffectivelyDisabled,
|
|
523
549
|
"aria-label": popover.isOpen ? t('@astryx.dateInput.toggleCalendarClose') : t('@astryx.dateInput.openCalendar'),
|
|
524
|
-
...
|
|
525
|
-
0: {
|
|
526
|
-
className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
|
|
527
|
-
},
|
|
528
|
-
1: {
|
|
529
|
-
className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xh6dtrn x1a2a7pz x1p25gnr x1y3gkto x1h6gzvc"
|
|
530
|
-
}
|
|
531
|
-
}[!!isEffectivelyDisabled << 0],
|
|
550
|
+
...stylex.props(focusOutlineStyles.focusVisible, styles.iconButton, isEffectivelyDisabled && styles.iconButtonDisabled),
|
|
532
551
|
children: /*#__PURE__*/_jsx(Icon, {
|
|
533
552
|
icon: "calendar",
|
|
534
553
|
size: "sm",
|
|
@@ -580,7 +599,7 @@ export function DateTimeInput({
|
|
|
580
599
|
as: "div",
|
|
581
600
|
role: "alert",
|
|
582
601
|
"aria-live": "assertive",
|
|
583
|
-
children: !isDateInputValid ? '
|
|
602
|
+
children: !isDateInputValid ? t('@astryx.dateInput.invalidDate') : ''
|
|
584
603
|
}), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsx(InputClearButton, {
|
|
585
604
|
label: t('@astryx.dateInput.clear', {
|
|
586
605
|
label
|
|
@@ -648,7 +667,7 @@ export function DateTimeInput({
|
|
|
648
667
|
as: "div",
|
|
649
668
|
role: "alert",
|
|
650
669
|
"aria-live": "assertive",
|
|
651
|
-
children: !isTimeInputValid ? '
|
|
670
|
+
children: !isTimeInputValid ? t('@astryx.timeInput.invalidTime') : ''
|
|
652
671
|
})]
|
|
653
672
|
})]
|
|
654
673
|
}), popover.render(/*#__PURE__*/_jsx(Calendar, {
|
|
@@ -58,7 +58,7 @@ export interface DropdownMenuRadioGroupProps extends Omit<BaseProps, 'onChange'>
|
|
|
58
58
|
* </DropdownMenu>
|
|
59
59
|
* ```
|
|
60
60
|
*/
|
|
61
|
-
export declare function DropdownMenuRadioGroup({ value, onChange, label, hasCloseOnSelect, children, className, style, ...rest }: DropdownMenuRadioGroupProps): import("react").JSX.Element;
|
|
61
|
+
export declare function DropdownMenuRadioGroup({ value, onChange, label, hasCloseOnSelect, children, xstyle, className, style, ...rest }: DropdownMenuRadioGroupProps): import("react").JSX.Element;
|
|
62
62
|
export declare namespace DropdownMenuRadioGroup {
|
|
63
63
|
var displayName: string;
|
|
64
64
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuRadioGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,EACT,UAAU,CACX;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAuB,EACvB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,+BAiB7B;
|
|
1
|
+
{"version":3,"file":"DropdownMenuRadioGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,EACT,UAAU,CACX;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAuB,EACvB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,+BAiB7B;yBA3Be,sBAAsB"}
|
|
@@ -20,6 +20,14 @@ import { spacingVars } from "../theme/tokens.stylex.js";
|
|
|
20
20
|
import { mergeProps } from "../utils/index.js";
|
|
21
21
|
import { DropdownMenuRadioGroupContext } from "./DropdownMenuContext.js";
|
|
22
22
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
|
+
const styles = {
|
|
24
|
+
group: {
|
|
25
|
+
k1xSpc: "x78zum5",
|
|
26
|
+
kXwgrk: "xdt5ytf",
|
|
27
|
+
kOIVth: "x1lsbc85",
|
|
28
|
+
$$css: true
|
|
29
|
+
}
|
|
30
|
+
};
|
|
23
31
|
/**
|
|
24
32
|
* A single-select group of radio menu items (role="group" of menuitemradio).
|
|
25
33
|
*
|
|
@@ -43,6 +51,7 @@ export function DropdownMenuRadioGroup({
|
|
|
43
51
|
label,
|
|
44
52
|
hasCloseOnSelect = true,
|
|
45
53
|
children,
|
|
54
|
+
xstyle,
|
|
46
55
|
className,
|
|
47
56
|
style,
|
|
48
57
|
...rest
|
|
@@ -56,9 +65,7 @@ export function DropdownMenuRadioGroup({
|
|
|
56
65
|
...rest,
|
|
57
66
|
role: "group",
|
|
58
67
|
"aria-label": label,
|
|
59
|
-
...mergeProps({
|
|
60
|
-
className: "x78zum5 xdt5ytf x1lsbc85"
|
|
61
|
-
}, {
|
|
68
|
+
...mergeProps(stylex.props(styles.group, xstyle), {
|
|
62
69
|
className,
|
|
63
70
|
style
|
|
64
71
|
}),
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file PanelSearchInput.tsx
|
|
3
|
+
* @input Uses React, StyleX, Icon, InputClearButton, theme tokens
|
|
4
|
+
* @output Exports PanelSearchInput — the search row that sits at the top of a
|
|
5
|
+
* dropdown panel
|
|
6
|
+
* @position Shared internal primitive; used by Selector and MultiSelector
|
|
7
|
+
*
|
|
8
|
+
* A dropdown panel is already a bordered, elevated surface. Nesting a bordered
|
|
9
|
+
* TextInput inside it draws a second box within that box, so the field reads as
|
|
10
|
+
* a control dropped into the menu rather than part of it. This row is the
|
|
11
|
+
* seamless alternative — magnifier, borderless input, clear button — separated
|
|
12
|
+
* from the options by a divider the panel owns.
|
|
13
|
+
*
|
|
14
|
+
* The field is shaped like the option rows under it rather than like a form
|
|
15
|
+
* input: same inset from the panel edge, same `--radius-element` corners, same
|
|
16
|
+
* height. The focus ring is drawn on that rounded box, so focus reads as "this
|
|
17
|
+
* row of the panel" — the same visual language as an item's highlight — instead
|
|
18
|
+
* of ringing the whole panel header. It appears for keyboard focus only; see
|
|
19
|
+
* `fieldKeyboardFocus` for why `:focus-visible` alone does not mean that.
|
|
20
|
+
*
|
|
21
|
+
* ┌─ panel ──────────────────┐
|
|
22
|
+
* │ ┌──────────────────────┐ │ ← field: rounded, inset, item-sized
|
|
23
|
+
* │ │ ⌕ Search… ✕ │ │
|
|
24
|
+
* │ └──────────────────────┘ │
|
|
25
|
+
* ├──────────────────────────┤ ← divider (full-bleed)
|
|
26
|
+
* │ ┌──────────────────────┐ │
|
|
27
|
+
* │ │ Apple │ │ ← option row: same box
|
|
28
|
+
*
|
|
29
|
+
* The clear button is the shared `InputClearButton`, so the affordance and its
|
|
30
|
+
* ghost-button behavior match every other input's clear. It renders AFTER the
|
|
31
|
+
* input in DOM order: the selector components' Tab handling depends on that
|
|
32
|
+
* order to keep the popup open while focus moves onto it.
|
|
33
|
+
*
|
|
34
|
+
* Not exported from the package: it is an implementation detail of the panels
|
|
35
|
+
* that use it, not public API.
|
|
36
|
+
*/
|
|
37
|
+
import { type Ref } from 'react';
|
|
38
|
+
import type { BaseProps } from '../BaseProps';
|
|
39
|
+
export interface PanelSearchInputProps extends Omit<BaseProps<HTMLInputElement>, 'onChange'> {
|
|
40
|
+
/** Ref forwarded to the input element (for focus management). */
|
|
41
|
+
ref?: Ref<HTMLInputElement>;
|
|
42
|
+
/**
|
|
43
|
+
* Accessible name for the input. Rendered as `aria-label`: the panel has no
|
|
44
|
+
* visible label for the field, and a placeholder is not a reliable name.
|
|
45
|
+
*/
|
|
46
|
+
label: string;
|
|
47
|
+
/** Accessible name for the clear (✕) button, e.g. `Clear Search options`. */
|
|
48
|
+
clearLabel: string;
|
|
49
|
+
/** Placeholder text shown while the query is empty. */
|
|
50
|
+
placeholder?: string;
|
|
51
|
+
/** The current query. */
|
|
52
|
+
value: string;
|
|
53
|
+
/** Called with the next query on every keystroke and on clear. */
|
|
54
|
+
onValueChange: (value: string) => void;
|
|
55
|
+
/** Key handler for the input itself. */
|
|
56
|
+
onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
|
|
57
|
+
/** Focus handler for the input; runs after the ring's own bookkeeping. */
|
|
58
|
+
onFocus?: React.FocusEventHandler<HTMLInputElement>;
|
|
59
|
+
/** Blur handler for the input; runs after the ring's own bookkeeping. */
|
|
60
|
+
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
61
|
+
/**
|
|
62
|
+
* Key handler for the row. Events from the input are handled by `onKeyDown`;
|
|
63
|
+
* this one exists for keys pressed on the clear button, which has no other
|
|
64
|
+
* handler of its own.
|
|
65
|
+
*/
|
|
66
|
+
onContainerKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Search row for the top of a dropdown panel: magnifier, borderless input, and
|
|
70
|
+
* a clear button once a query is typed, in a rounded box shaped like the
|
|
71
|
+
* option rows beneath it.
|
|
72
|
+
*
|
|
73
|
+
* `className`/`style`/`xstyle` apply to the outer row (use them to match the
|
|
74
|
+
* option list's inline padding); every other prop (`role`, `aria-*`, `id`, …)
|
|
75
|
+
* passes through to the `<input>`, so the caller owns the combobox wiring.
|
|
76
|
+
*/
|
|
77
|
+
export declare function PanelSearchInput({ ref, label, clearLabel, placeholder, value, onValueChange, onKeyDown, onFocus, onBlur, onContainerKeyDown, xstyle, className, style, ...props }: PanelSearchInputProps): import("react").JSX.Element;
|
|
78
|
+
export declare namespace PanelSearchInput {
|
|
79
|
+
var displayName: string;
|
|
80
|
+
}
|
|
81
|
+
//# sourceMappingURL=PanelSearchInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PanelSearchInput.d.ts","sourceRoot":"","sources":["../../src/Field/PanelSearchInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAAmC,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAkBjE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6E5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,UAAU,CACX;IACC,iEAAiE;IACjE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,6EAA6E;IAC7E,UAAU,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IAEd,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,wCAAwC;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IAEzD,0EAA0E;IAC1E,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEpD,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEnD;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC;CACjE;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,UAAU,EACV,WAAW,EACX,KAAK,EACL,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAkEvB;yBAjFe,gBAAgB"}
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file PanelSearchInput.tsx
|
|
7
|
+
* @input Uses React, StyleX, Icon, InputClearButton, theme tokens
|
|
8
|
+
* @output Exports PanelSearchInput — the search row that sits at the top of a
|
|
9
|
+
* dropdown panel
|
|
10
|
+
* @position Shared internal primitive; used by Selector and MultiSelector
|
|
11
|
+
*
|
|
12
|
+
* A dropdown panel is already a bordered, elevated surface. Nesting a bordered
|
|
13
|
+
* TextInput inside it draws a second box within that box, so the field reads as
|
|
14
|
+
* a control dropped into the menu rather than part of it. This row is the
|
|
15
|
+
* seamless alternative — magnifier, borderless input, clear button — separated
|
|
16
|
+
* from the options by a divider the panel owns.
|
|
17
|
+
*
|
|
18
|
+
* The field is shaped like the option rows under it rather than like a form
|
|
19
|
+
* input: same inset from the panel edge, same `--radius-element` corners, same
|
|
20
|
+
* height. The focus ring is drawn on that rounded box, so focus reads as "this
|
|
21
|
+
* row of the panel" — the same visual language as an item's highlight — instead
|
|
22
|
+
* of ringing the whole panel header. It appears for keyboard focus only; see
|
|
23
|
+
* `fieldKeyboardFocus` for why `:focus-visible` alone does not mean that.
|
|
24
|
+
*
|
|
25
|
+
* ┌─ panel ──────────────────┐
|
|
26
|
+
* │ ┌──────────────────────┐ │ ← field: rounded, inset, item-sized
|
|
27
|
+
* │ │ ⌕ Search… ✕ │ │
|
|
28
|
+
* │ └──────────────────────┘ │
|
|
29
|
+
* ├──────────────────────────┤ ← divider (full-bleed)
|
|
30
|
+
* │ ┌──────────────────────┐ │
|
|
31
|
+
* │ │ Apple │ │ ← option row: same box
|
|
32
|
+
*
|
|
33
|
+
* The clear button is the shared `InputClearButton`, so the affordance and its
|
|
34
|
+
* ghost-button behavior match every other input's clear. It renders AFTER the
|
|
35
|
+
* input in DOM order: the selector components' Tab handling depends on that
|
|
36
|
+
* order to keep the popup open while focus moves onto it.
|
|
37
|
+
*
|
|
38
|
+
* Not exported from the package: it is an implementation detail of the panels
|
|
39
|
+
* that use it, not public API.
|
|
40
|
+
*/
|
|
41
|
+
import { useCallback, useEffect, useState } from 'react';
|
|
42
|
+
import * as stylex from '@stylexjs/stylex';
|
|
43
|
+
import { Icon } from "../Icon/index.js";
|
|
44
|
+
import { InputClearButton } from "./InputClearButton.js";
|
|
45
|
+
import { mergeProps } from "../utils/index.js";
|
|
46
|
+
import { getInteractionModality, trackInteractionModality } from "../utils/interactionModality.js";
|
|
47
|
+
import "../theme/tokens.stylex.js";
|
|
48
|
+
import { colorVars, durationVars, easeVars, radiusVars, spacingVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
|
|
49
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
50
|
+
const styles = {
|
|
51
|
+
wrapper: {
|
|
52
|
+
k8WAf4: "xu0wf1k",
|
|
53
|
+
kg3NbH: "x7a5moj",
|
|
54
|
+
$$css: true
|
|
55
|
+
},
|
|
56
|
+
icon: {
|
|
57
|
+
k1xSpc: "x78zum5",
|
|
58
|
+
kGNEyG: "x6s0dn4",
|
|
59
|
+
kmuXW: "x2lah0s",
|
|
60
|
+
$$css: true
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
/**
|
|
64
|
+
* Search row for the top of a dropdown panel: magnifier, borderless input, and
|
|
65
|
+
* a clear button once a query is typed, in a rounded box shaped like the
|
|
66
|
+
* option rows beneath it.
|
|
67
|
+
*
|
|
68
|
+
* `className`/`style`/`xstyle` apply to the outer row (use them to match the
|
|
69
|
+
* option list's inline padding); every other prop (`role`, `aria-*`, `id`, …)
|
|
70
|
+
* passes through to the `<input>`, so the caller owns the combobox wiring.
|
|
71
|
+
*/
|
|
72
|
+
export function PanelSearchInput({
|
|
73
|
+
ref,
|
|
74
|
+
label,
|
|
75
|
+
clearLabel,
|
|
76
|
+
placeholder,
|
|
77
|
+
value,
|
|
78
|
+
onValueChange,
|
|
79
|
+
onKeyDown,
|
|
80
|
+
onFocus,
|
|
81
|
+
onBlur,
|
|
82
|
+
onContainerKeyDown,
|
|
83
|
+
xstyle,
|
|
84
|
+
className,
|
|
85
|
+
style,
|
|
86
|
+
...props
|
|
87
|
+
}) {
|
|
88
|
+
// `:focus-visible` matches a text input focused by POINTER as well (CSS
|
|
89
|
+
// Selectors 4, verified in Chromium), so it cannot express "keyboard focus"
|
|
90
|
+
// by itself. Gate it on how the user last interacted; the CSS condition
|
|
91
|
+
// stays `:focus-visible`, this only narrows it.
|
|
92
|
+
const [isKeyboardFocus, setIsKeyboardFocus] = useState(false);
|
|
93
|
+
useEffect(() => {
|
|
94
|
+
trackInteractionModality();
|
|
95
|
+
}, []);
|
|
96
|
+
const handleFocus = useCallback(e => {
|
|
97
|
+
setIsKeyboardFocus(getInteractionModality() === 'keyboard');
|
|
98
|
+
onFocus?.(e);
|
|
99
|
+
}, [onFocus]);
|
|
100
|
+
const handleBlur = useCallback(e => {
|
|
101
|
+
setIsKeyboardFocus(false);
|
|
102
|
+
onBlur?.(e);
|
|
103
|
+
}, [onBlur]);
|
|
104
|
+
const handleClear = useCallback(() => {
|
|
105
|
+
onValueChange('');
|
|
106
|
+
// Clearing puts the caret back where the user was typing, matching
|
|
107
|
+
// TextInput's built-in clear.
|
|
108
|
+
if (typeof ref === 'object' && ref?.current) {
|
|
109
|
+
ref.current.focus();
|
|
110
|
+
}
|
|
111
|
+
}, [onValueChange, ref]);
|
|
112
|
+
return /*#__PURE__*/_jsx("div", {
|
|
113
|
+
onKeyDown: onContainerKeyDown,
|
|
114
|
+
...mergeProps(stylex.props(styles.wrapper, xstyle), className, style),
|
|
115
|
+
children: /*#__PURE__*/_jsxs("div", {
|
|
116
|
+
"data-keyboard-focus": isKeyboardFocus ? 'true' : undefined,
|
|
117
|
+
...{
|
|
118
|
+
0: {
|
|
119
|
+
className: "x9f619 x78zum5 x6s0dn4 x1txdalj xh8yej3 x1vofgu7 xf314gf xh6dtrn xkdsq27 xuedmi6 x12w9bfk xlr8y92"
|
|
120
|
+
},
|
|
121
|
+
1: {
|
|
122
|
+
className: "x9f619 x78zum5 x6s0dn4 x1txdalj xh8yej3 x1vofgu7 xf314gf xh6dtrn xkdsq27 xuedmi6 x12w9bfk xlr8y92 x1gnnqk1 x1btxeh5"
|
|
123
|
+
}
|
|
124
|
+
}[!!isKeyboardFocus << 0],
|
|
125
|
+
children: [/*#__PURE__*/_jsx(Icon, {
|
|
126
|
+
icon: "search",
|
|
127
|
+
size: "sm",
|
|
128
|
+
color: "secondary",
|
|
129
|
+
xstyle: styles.icon
|
|
130
|
+
}), /*#__PURE__*/_jsx("input", {
|
|
131
|
+
ref: ref,
|
|
132
|
+
type: "text",
|
|
133
|
+
"aria-label": label,
|
|
134
|
+
placeholder: placeholder,
|
|
135
|
+
value: value,
|
|
136
|
+
onChange: e => onValueChange(e.target.value),
|
|
137
|
+
onKeyDown: onKeyDown,
|
|
138
|
+
onFocus: handleFocus,
|
|
139
|
+
onBlur: handleBlur,
|
|
140
|
+
...{
|
|
141
|
+
className: "x1iyjqo2 xs83m0k xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1tgivj0 x9ynric xcr08ib xdk3u5w x1kq96og x1a2a7pz xeyghm5"
|
|
142
|
+
},
|
|
143
|
+
...props
|
|
144
|
+
}), value !== '' && /*#__PURE__*/_jsx(InputClearButton, {
|
|
145
|
+
label: clearLabel,
|
|
146
|
+
onClick: handleClear
|
|
147
|
+
})]
|
|
148
|
+
})
|
|
149
|
+
});
|
|
150
|
+
}
|
|
151
|
+
PanelSearchInput.displayName = 'PanelSearchInput';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AASlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AASlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAwN9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,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,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BA+ZhB;yBA1be,SAAS"}
|