@astryxdesign/core 0.7.7-canary.fc68123 → 0.7.7
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 +104 -0
- package/dist/AlertDialog/AlertDialog.d.ts +1 -4
- package/dist/AlertDialog/AlertDialog.d.ts.map +1 -1
- package/dist/AlertDialog/AlertDialog.js +6 -36
- package/dist/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +4 -23
- package/dist/BottomSheet/useSheetGestures.d.ts.map +1 -1
- package/dist/BottomSheet/useSheetGestures.js +1 -3
- package/dist/Button/Button.d.ts.map +1 -1
- package/dist/Button/Button.js +1 -17
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +2 -13
- package/dist/ComplexSelector/ComplexSelector.d.ts +1 -4
- package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
- package/dist/ComplexSelector/ComplexSelector.js +4 -14
- package/dist/ContextMenu/ContextMenu.js +2 -2
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +31 -7
- package/dist/Field/Field.js +2 -2
- package/dist/HoverCard/HoverCard.d.ts +3 -4
- package/dist/HoverCard/HoverCard.d.ts.map +1 -1
- package/dist/HoverCard/HoverCard.js +2 -27
- package/dist/HoverCard/useHoverCard.d.ts +4 -5
- package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
- package/dist/HoverCard/useHoverCard.js +31 -17
- package/dist/Icon/Icon.d.ts +1 -5
- package/dist/Icon/Icon.d.ts.map +1 -1
- package/dist/Icon/Icon.js +2 -5
- package/dist/Layer/usePressPin.d.ts +5 -17
- package/dist/Layer/usePressPin.d.ts.map +1 -1
- package/dist/Layer/usePressPin.js +12 -62
- package/dist/Lightbox/Lightbox.d.ts.map +1 -1
- package/dist/Lightbox/Lightbox.js +0 -18
- package/dist/PowerSearch/PowerSearch.d.ts +3 -36
- package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearch.js +127 -433
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts +1 -32
- package/dist/PowerSearch/PowerSearchEditPopover.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchEditPopover.js +6 -17
- package/dist/PowerSearch/PowerSearchValueEditor.d.ts +3 -38
- package/dist/PowerSearch/PowerSearchValueEditor.d.ts.map +1 -1
- package/dist/PowerSearch/PowerSearchValueEditor.js +61 -170
- package/dist/PowerSearch/formatFilterValue.d.ts +0 -7
- package/dist/PowerSearch/formatFilterValue.d.ts.map +1 -1
- package/dist/PowerSearch/formatFilterValue.js +1 -11
- package/dist/RadioList/RadioList.d.ts.map +1 -1
- package/dist/RadioList/RadioList.js +2 -3
- package/dist/RadioList/RadioListItem.d.ts +1 -1
- package/dist/RadioList/RadioListItem.d.ts.map +1 -1
- package/dist/RadioList/RadioListItem.js +3 -5
- package/dist/Resizable/ResizeHandle.d.ts +1 -2
- package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/Resizable/ResizeHandle.js +77 -99
- package/dist/SegmentedControl/useSegmentedSelectionMotion.d.ts.map +1 -1
- package/dist/SegmentedControl/useSegmentedSelectionMotion.js +3 -3
- package/dist/Slider/sliderTouchController.js +2 -2
- package/dist/Spinner/Spinner.d.ts +1 -1
- package/dist/Spinner/Spinner.d.ts.map +1 -1
- package/dist/Spinner/Spinner.js +58 -60
- package/dist/Switch/useSwitchTouch.js +4 -4
- package/dist/Table/BaseTable.d.ts.map +1 -1
- package/dist/Table/BaseTable.js +8 -29
- package/dist/TextInput/TextInput.d.ts +2 -2
- package/dist/TextInput/TextInput.d.ts.map +1 -1
- package/dist/TextInput/TextInput.js +7 -10
- package/dist/Toast/Toast.d.ts +1 -11
- package/dist/Toast/Toast.d.ts.map +1 -1
- package/dist/Toast/Toast.js +15 -25
- package/dist/Toast/ToastViewport.d.ts.map +1 -1
- package/dist/Toast/ToastViewport.js +34 -94
- package/dist/Toast/types.d.ts +3 -9
- package/dist/Toast/types.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.d.ts +1 -19
- package/dist/Tooltip/useTooltip.d.ts.map +1 -1
- package/dist/Tooltip/useTooltip.js +53 -34
- package/dist/Typeahead/TypeaheadItem.d.ts +1 -2
- package/dist/Typeahead/TypeaheadItem.d.ts.map +1 -1
- package/dist/astryx.css +6 -35
- package/dist/gestures/PressTracker.d.ts.map +1 -1
- package/dist/gestures/PressTracker.js +3 -4
- package/dist/hooks/actionGroupTracker.d.ts +1 -4
- package/dist/hooks/actionGroupTracker.d.ts.map +1 -1
- package/dist/hooks/actionGroupTracker.js +3 -13
- package/dist/hooks/index.d.ts +0 -1
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +0 -1
- package/dist/hooks/useAttachment.d.ts +1 -1
- package/dist/hooks/useAttachment.js +1 -1
- package/dist/hooks/useInputStatusIcon.d.ts +1 -1
- package/dist/hooks/useInputStatusIcon.d.ts.map +1 -1
- package/dist/hooks/useInputStatusIcon.js +2 -2
- package/dist/hooks/useLongPress.d.ts +2 -6
- package/dist/hooks/useLongPress.d.ts.map +1 -1
- package/dist/hooks/useLongPress.js +15 -95
- package/dist/i18n/generated-english/PowerSearch/PowerSearchValueEditor.generated.d.ts.map +1 -1
- package/dist/i18n/generated-english/PowerSearch/PowerSearchValueEditor.generated.js +0 -6
- package/dist/i18n/generated-locales/en.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/en.generated.js +0 -30
- package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
- package/dist/i18n/generated-locales/pseudo.generated.js +0 -30
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -4
- package/dist/motion/animatedLayout.d.ts.map +1 -1
- package/dist/motion/animatedLayout.js +6 -5
- package/dist/motion/animator.d.ts +14 -14
- package/dist/motion/animator.d.ts.map +1 -1
- package/dist/motion/animator.js +18 -41
- package/dist/utils/dateParser.d.ts.map +1 -1
- package/dist/utils/dateParser.js +0 -12
- package/dist/utils/focusReturn.d.ts +0 -15
- package/dist/utils/focusReturn.d.ts.map +1 -1
- package/dist/utils/focusReturn.js +0 -28
- package/dist/utils/interactionOverlay.stylex.d.ts +2 -3
- package/dist/utils/interactionOverlay.stylex.d.ts.map +1 -1
- package/dist/utils/interactionOverlay.stylex.js +2 -3
- package/dist/utils/pressFeedback.d.ts.map +1 -1
- package/dist/utils/pressFeedback.js +6 -19
- package/locales/en.json +0 -120
- package/locales/pseudo.json +0 -90
- package/package.json +5 -10
- package/src/AlertDialog/AlertDialog.doc.mjs +2 -2
- package/src/AlertDialog/AlertDialog.tsx +5 -37
- package/src/BottomSheet/BottomSheetPanel.tsx +3 -37
- package/src/BottomSheet/useSheetGestures.ts +1 -3
- package/src/Button/Button.tsx +4 -26
- package/src/CheckboxInput/CheckboxInput.doc.mjs +0 -18
- package/src/CheckboxInput/CheckboxInput.tsx +9 -36
- package/src/ComplexSelector/ComplexSelector.tsx +5 -20
- package/src/ContextMenu/ContextMenu.tsx +2 -2
- package/src/Dialog/Dialog.tsx +31 -10
- package/src/Field/Field.tsx +2 -2
- package/src/HoverCard/HoverCard.doc.mjs +2 -4
- package/src/HoverCard/HoverCard.tsx +4 -35
- package/src/HoverCard/useHoverCard.doc.mjs +36 -178
- package/src/HoverCard/useHoverCard.tsx +52 -46
- package/src/Icon/Icon.doc.mjs +8 -49
- package/src/Icon/Icon.tsx +7 -15
- package/src/Layer/usePressPin.ts +15 -81
- package/src/Lightbox/Lightbox.tsx +0 -18
- package/src/PowerSearch/PowerSearch.doc.mjs +5 -54
- package/src/PowerSearch/PowerSearch.tsx +155 -609
- package/src/PowerSearch/PowerSearchEditPopover.tsx +6 -28
- package/src/PowerSearch/PowerSearchValueEditor.tsx +38 -203
- package/src/PowerSearch/formatFilterValue.ts +1 -18
- package/src/RadioList/RadioList.tsx +2 -3
- package/src/RadioList/RadioListItem.tsx +3 -5
- package/src/Resizable/Resizable.doc.mjs +4 -5
- package/src/Resizable/ResizeHandle.tsx +109 -167
- package/src/SegmentedControl/useSegmentedSelectionMotion.ts +3 -6
- package/src/Slider/sliderTouchController.ts +2 -2
- package/src/Spinner/Spinner.tsx +63 -77
- package/src/Switch/useSwitchTouch.ts +4 -4
- package/src/Table/BaseTable.tsx +12 -46
- package/src/TextInput/TextInput.tsx +10 -11
- package/src/Toast/Toast.doc.mjs +3 -4
- package/src/Toast/Toast.tsx +32 -52
- package/src/Toast/ToastViewport.tsx +35 -121
- package/src/Toast/types.ts +3 -9
- package/src/Tooltip/useTooltip.doc.mjs +0 -24
- package/src/Tooltip/useTooltip.tsx +56 -61
- package/src/Typeahead/TypeaheadItem.doc.mjs +3 -6
- package/src/Typeahead/TypeaheadItem.tsx +1 -2
- package/src/gestures/PressTracker.ts +3 -4
- package/src/gestures/README.md +1 -7
- package/src/hooks/actionGroupTracker.ts +5 -20
- package/src/hooks/index.ts +0 -2
- package/src/hooks/useAttachment.ts +1 -1
- package/src/hooks/useInputStatusIcon.tsx +2 -3
- package/src/hooks/useLongPress.doc.mjs +2 -2
- package/src/hooks/useLongPress.ts +15 -136
- package/src/i18n/generated-english/PowerSearch/PowerSearchValueEditor.generated.ts +0 -6
- package/src/i18n/generated-locales/en.generated.ts +0 -41
- package/src/i18n/generated-locales/pseudo.generated.ts +0 -42
- package/src/index.ts +0 -13
- package/src/motion/README.md +5 -9
- package/src/motion/animatedLayout.ts +4 -5
- package/src/motion/animator.ts +29 -61
- package/src/utils/dateParser.ts +0 -16
- package/src/utils/focusReturn.ts +0 -30
- package/src/utils/interactionOverlay.stylex.ts +2 -3
- package/src/utils/pressFeedback.ts +6 -19
- package/dist/PowerSearch/PowerSearchBottomSheet.d.ts +0 -100
- package/dist/PowerSearch/PowerSearchBottomSheet.d.ts.map +0 -1
- package/dist/PowerSearch/PowerSearchBottomSheet.js +0 -1913
- package/dist/PowerSearch/formatTokenValue.d.ts +0 -28
- package/dist/PowerSearch/formatTokenValue.d.ts.map +0 -1
- package/dist/PowerSearch/formatTokenValue.js +0 -160
- package/dist/PowerSearch/powerSearchSheetUtils.d.ts +0 -65
- package/dist/PowerSearch/powerSearchSheetUtils.d.ts.map +0 -1
- package/dist/PowerSearch/powerSearchSheetUtils.js +0 -168
- package/dist/animator/createAnimator.d.ts +0 -98
- package/dist/animator/createAnimator.d.ts.map +0 -1
- package/dist/animator/createAnimator.js +0 -259
- package/dist/hooks/pressGroupContext.d.ts +0 -6
- package/dist/hooks/pressGroupContext.d.ts.map +0 -1
- package/dist/hooks/pressGroupContext.js +0 -20
- package/dist/hooks/useActionGroupTracking.d.ts +0 -53
- package/dist/hooks/useActionGroupTracking.d.ts.map +0 -1
- package/dist/hooks/useActionGroupTracking.js +0 -174
- package/dist/hooks/useAnimator.d.ts +0 -41
- package/dist/hooks/useAnimator.d.ts.map +0 -1
- package/dist/hooks/useAnimator.js +0 -70
- package/dist/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.d.ts +0 -8
- package/dist/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.d.ts.map +0 -1
- package/dist/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.js +0 -42
- package/dist/i18n/generated-english/PowerSearch/formatTokenValue.generated.d.ts +0 -8
- package/dist/i18n/generated-english/PowerSearch/formatTokenValue.generated.d.ts.map +0 -1
- package/dist/i18n/generated-english/PowerSearch/formatTokenValue.generated.js +0 -14
- package/dist/internal/indicatorPress.stylex.d.ts +0 -20
- package/dist/internal/indicatorPress.stylex.d.ts.map +0 -1
- package/dist/internal/indicatorPress.stylex.js +0 -26
- package/dist/motion/progress.d.ts +0 -88
- package/dist/motion/progress.d.ts.map +0 -1
- package/dist/motion/progress.js +0 -128
- package/dist/motion/uikit/alert.d.ts +0 -41
- package/dist/motion/uikit/alert.d.ts.map +0 -1
- package/dist/motion/uikit/alert.js +0 -43
- package/dist/privateAttributes/pressGroupItem.stylex.d.ts +0 -15
- package/dist/privateAttributes/pressGroupItem.stylex.d.ts.map +0 -1
- package/dist/privateAttributes/pressGroupItem.stylex.js +0 -23
- package/dist/utils/triggerFocus.d.ts +0 -36
- package/dist/utils/triggerFocus.d.ts.map +0 -1
- package/dist/utils/triggerFocus.js +0 -65
- package/src/PowerSearch/PowerSearchBottomSheet.tsx +0 -2515
- package/src/PowerSearch/formatTokenValue.ts +0 -215
- package/src/PowerSearch/powerSearchSheetUtils.ts +0 -224
- package/src/animator/createAnimator.doc.mjs +0 -153
- package/src/animator/createAnimator.ts +0 -324
- package/src/hooks/pressGroupContext.ts +0 -21
- package/src/hooks/useActionGroupTracking.ts +0 -224
- package/src/hooks/useAnimator.doc.mjs +0 -109
- package/src/hooks/useAnimator.ts +0 -67
- package/src/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.ts +0 -43
- package/src/i18n/generated-english/PowerSearch/formatTokenValue.generated.ts +0 -15
- package/src/internal/indicatorPress.stylex.ts +0 -24
- package/src/motion/progress.ts +0 -155
- package/src/motion/uikit/alert.ts +0 -43
- package/src/privateAttributes/pressGroupItem.stylex.ts +0 -23
- package/src/utils/triggerFocus.ts +0 -80
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,109 @@
|
|
|
1
1
|
# @xds/core
|
|
2
2
|
|
|
3
|
+
# 0.7.7
|
|
4
|
+
|
|
5
|
+
#### Experimental APIs
|
|
6
|
+
|
|
7
|
+
- Tokenizer gains a touch surface behind `experimental={{presentation: 'bottom-sheet' | 'adaptive'}}`. `bottom-sheet` replaces the inline combobox with a trigger that shows the selected tokens and opens one tall modal sheet: a bordered search field on top, full-width checkbox rows that keep their place while the sheet is open and regroup selected-first on the next open, 50-row progressive rendering for long lists, a `Create "…"` row with a trailing Add action under `hasCreate`, and a footer pinned in every state with a confirmed Clear all and Save. The sheet edits a draft: rows, the create row and Clear all change the selection the sheet shows, and `value` changes once, when Save reports the draft through `onChange` with the last edit that still holds as its `change`; a swipe, scrim or Escape close of a changed draft asks before discarding, and a clean one closes directly. On a touch screen a direct drag on the results dismisses the keyboard without clearing the query. `adaptive` uses the sheet on compact coarse-pointer screens and the popover otherwise, resolved the same way Selector resolves it. The sheet surface loads on demand, so a Tokenizer that does not opt in does not carry it. The trigger describes its selected tokens to assistive technology, announcements made while the sheet is open reach assistive technology through a live region inside the sheet, with `experimental` passed the component also accepts a `Ref<HTMLInputElement | HTMLButtonElement>` because `ref` reaches the trigger in the sheet presentation (`TokenizerProps` keeps its released `ref` type and gains only the optional `experimental`), and in development the field warns once about props that have no surface in the sheet presentation (`renderItem`, `renderToken`, `endContent`, `hasClear`, `hasEntriesOnFocus`, `menuWidth`, `tokenOverflowBehavior`, `hasAutoFocus`). The sheet's strings come from the `@astryx.tokenizer.*` catalog; the sheet's parts expose no theming targets while the option is experimental. Anything inside Tokenizer's `experimental` prop may change or be removed in a patch release; omitting it keeps the stable behavior.
|
|
8
|
+
|
|
9
|
+
#### New Components
|
|
10
|
+
|
|
11
|
+
- Promote `InfoTip` from Lab to Core, imported from `@astryxdesign/core/InfoTip` or the package root: an info-icon button whose press pins its help. Hover and keyboard focus preview the help, and a click, tap, Enter, or Space pins it open until Escape, a second press, a press outside, or focus leaving. Its default name is the translated "More information", and under a coarse pointer it takes taps out toward 44 px without taking a neighbour's. The `@astryxdesign/lab` `InfoTip` export is now a deprecated re-export of the Core component and is removed in the next release: import it from `@astryxdesign/core` instead.
|
|
12
|
+
|
|
13
|
+
#### New Features
|
|
14
|
+
|
|
15
|
+
- AppShell keeps its header items and the end of its content inside the device's safe area on a phone page that opts into the full screen (`viewport-fit=cover`). A header region or the phone top bar reaches under the status bar and out to the screen's sides while its items stay clear of the status bar, the Dynamic Island and a landscape notch. In `height="auto"`, a phone top bar below a banner sticks under the top inset instead of at the top edge, so its items stay clear when the page scrolls. The main content ends clear of the home indicator (its block-end padding is `contentPadding` plus the bottom inset, so a child that fills it ends above the indicator), in the page or in the main region's own scroller. A shell with no header region or phone top bar takes no top inset, so its content keeps its own top padding there. In landscape only the header is inset, not an inline SideNav or the content's sides. Without `viewport-fit=cover` the insets are zero and nothing moves. The AppShell docs say how a page and an installed web app opt in.
|
|
16
|
+
- ChatComposerInput's Return key says Send on a touch keyboard. Enter already sends the message; the editor now sets `enterkeyhint="send"`, so iOS shows its Send key instead of a plain Return. A new `enterKeyHint` prop, typed by the exported closed union `EnterKeyHint`, takes another label, such as `enter` for a composer whose `onKeyDown` makes Enter insert a line break on touch keyboards.
|
|
17
|
+
- Dialog (and so AlertDialog and CommandPalette), Drawer and MobileNav no longer blur the page behind the modal, under every pointer: the 2px full-viewport backdrop blur is costly to repaint. The dim keeps the theme's `--color-overlay`, and in forced colors the modal keeps an edge so it still stands apart from the page. BottomSheet never blurred. A theme keeps the blur by setting `backdropFilter: 'blur(2px)'` on the component's modal backdrop: `components.dialog.base['::backdrop']`, `components['mobile-nav'].base['::backdrop']`, and for Drawer `components.drawer.base[':modal::backdrop']`, which leaves a non-modal drawer (`hasScrim={false}`) unblurred.
|
|
18
|
+
- Under reduced motion, an indeterminate ProgressBar no longer slides: on every pointer its fill spans the whole track and gently pulses its opacity in place, from full down to 84% and back, two seconds each way. A theme's tempo does not change the pulse, and in the default light and dark themes every fill tone that stands out from the track at 3:1 still does at the pulse's lowest point.
|
|
19
|
+
- Under a finger (a coarse primary pointer, on every touch device), a determinate ProgressBar moves to a new value the way iOS's progress view does: linearly, taking one second per full track of change at the theme's default tempo (0.8 s from 10% to 90%), and from wherever the fill is drawn when the value changes again mid-way. A theme's tempo scales that time. Above zero the fill never draws shorter than two track heights, and at zero it is not drawn. The motion runs on the compositor, so it keeps going while a script runs; under reduced motion, or with forced colors on, a new value lands at once. A mouse or trackpad keeps the theme's duration and easing.
|
|
20
|
+
- Search fields ask a touch keyboard for its Search key and no autocorrection. The search inputs of Typeahead, Tokenizer (and so PowerSearch), CommandPaletteInput and the Selector and MultiSelector search row now carry `enterkeyhint="search"` and `autocorrect="off"`. A phone keyboard then shows a Search key instead of Return and leaves names and identifiers as typed. The key is only a label: Enter does what it did before in each field.
|
|
21
|
+
- SegmentedControl: under a finger, on a touch device (a coarse primary pointer), the control tracks the touch. Dragging the selected segment carries the selection along with the finger, and the segment under the finger is chosen when it lets go (`onChange` fires once, at the lift); letting go outside the control selects nothing. While the selection is dragged, the selected label's colour follows it, with a margin around each boundary so a finger resting on one never flickers; label weights change only at the lift, so nothing reflows under the finger. A tap selects through the browser's own click, and a pressed segment shows the shared pressed overlay; nothing lifts or dims. A vertical drag that starts on the control still scrolls the page. A commit the item's `onClick` vetoes sends the selection back at once; one a controlled parent adopts later lands without a bounce. With Reduce Motion the selection still follows the finger, with no chase, and only the lift cross-fades. Keyboard and assistive technology keep the click; no element is added.
|
|
22
|
+
- SegmentedControl: a mouse or a pen drags the selection as a finger does. A drag from the selected segment carries it with the pointer, and the release commits the segment under the pointer (`onChange` fires once, at the release). A release outside the control selects nothing, and a drag that starts on another segment commits where it lifts. Under a mouse or a pen, every change slides the selection on the theme's duration and easing, not UIKit's spring, and a click slides it too. With Reduce Motion, a mouse's or a pen's drag still carries the selection, and its release lands at once. Keyboard and assistive technology keep the click.
|
|
23
|
+
- SegmentedControl: under a finger the selection slides to the new segment on UIKit's spring, whether a tap, an arrow key or a new `value` moved it. The selection indicator is the control's own pseudo-element, so no element is added. The motion runs on the compositor and keeps moving while the main thread is busy. With Reduce Motion nothing travels or scales: the old selection fades out where it is as the new one fades in. The spring is UIKit's measured one, an internal motion role no theme retunes, and no theme value lengthens the Reduce Motion fade. With a mouse or a pen it slides on the theme's duration and easing instead.
|
|
24
|
+
- Switch's press and drag work with a mouse and a pen as well as a finger: a drag past the flip point toggles the switch at the release, unless the pointer came back past where it pressed. A mouse or pen press released away from the switch leaves it alone, flipped or not, as a checkbox does. With a mouse the switch keeps its desktop look, and the value moves the thumb. On a touchscreen laptop a finger flips it by the same rule, with the desktop look.
|
|
25
|
+
- Under a finger, on every touch screen, Switch moves like the iOS switch. A press lifts the thumb a little, with a soft shadow, and a horizontal drag moves it with the finger and flips the switch once the finger has travelled most of the track; lifting the finger commits. A tap toggles through the browser's own click, and a hold or a short drag toggles at the lift. The thumb stays inside the track however far the finger drags past either end, in either writing direction. A press slid off the switch and lifted outside still toggles it, as on iOS. A vertical drag scrolls the page and the switch lets go. The motion runs on the compositor, so it stays smooth while scripts run. The thumb keeps its circle and its size on every device, and under a coarse pointer the switch's invisible hit area grows toward 44 × 44 px with nothing visible added, stopping halfway to any neighbouring control so a tap goes to the nearer one. The track keeps its theme's fill, and the colour change crossfades over it. With reduced motion on, a change cross-fades instead of moving on a touch screen and is immediate with a mouse. A press shows the pressed overlay, through a drag too, and a still hold selects no text. Keyboard and assistive technology behave as before. In Chromium, a Switch retargeted right after a tap, such as one tapped again mid-travel, turns around from where it is, with no step back to the start of its travel. Switch joins Slider on the shared press tracking and touch negotiation.
|
|
26
|
+
|
|
27
|
+
#### Fixes
|
|
28
|
+
|
|
29
|
+
- A `Dialog` with `purpose="info"`, a `Drawer`'s scrim, and `CommandPalette` now close on a backdrop press only when the press both starts and ends on the backdrop. Selecting text in a field and releasing past the edge no longer closes it and loses the input. A press on the backdrop alone still closes it, with a mouse, a pen, or a finger.
|
|
30
|
+
- BottomSheet: in WebKit, including iOS Safari, a sheet at a set height whose content sits directly in it keeps its bottom padding at the end of its scroll (0 → 16 px), instead of ending flush with the last line.
|
|
31
|
+
- BottomSheet: the open sheet's dialog places its panel with a flex row instead of a grid. In desktop WebKit, measured in Playwright, an update inside an open sheet lays out faster; the iOS simulator showed no difference. A percentage `height` (for example `'50%'`) now takes that share of the screen at the bottom edge; before, a short sheet was cut short and a long one hung from the top of the screen.
|
|
32
|
+
- BottomSheet: a sheet closed from a control inside it, such as a Done button, a Selector's search field or a menu row, marked itself `inert` and `aria-hidden` while that control still had focus. The browser then dropped focus to the page, or screen readers were left in a hidden subtree, for the length of the exit. Now a standalone sheet that closes with focus inside it stays out of `inert` and `aria-hidden` while that focus stays, and ignores pointer and keyboard activation during its exit; when the exit ends, it closes and returns focus to its opener. The exit still plays. A sheet that closes with focus elsewhere, or that focus leaves during the exit, goes inert at once, as before.
|
|
33
|
+
- BottomSheet: a sheet that a Suspense boundary hid while it was closing, and then showed again, never finished closing. Its dialog stayed open, modal and inert, so the whole page under it ignored taps, clicks and focus until a reload. This happens, for example, when a sheet's action navigates to a route that suspends. Now the sheet finishes closing when it is shown again, and the page is usable.
|
|
34
|
+
- A `BreadcrumbItem` link or button inside the AppShell mobile drawer now closes the drawer after it runs `onClick`, like the `TopNavItem` and `SideNavItem` rows beside it. Before, a crumb navigated and left the drawer open over the new page. A crumb marked `isCurrent`, which goes nowhere, leaves the drawer open. (#9465)
|
|
35
|
+
- Button, IconButton: a tooltip that repeated the button's accessible name was also added as its description, so screen readers read the same words twice ("Close, button, Close"). Astryx's own close, pagination, copy and collapse buttons did this by default. Now a tooltip whose trimmed text equals the accessible name still shows, but adds no description, when Button can read that name: its `aria-label`, or its label when any icon or end content is a decorative Icon. A tooltip that says more, or a Button named another way (`aria-labelledby`, or text in its icon or end content), keeps the description.
|
|
36
|
+
- A `CheckboxList` with an error `status` now makes every checkbox `aria-invalid`, so a screen reader announces the list as invalid as each checkbox takes focus, as `Switch` and the text inputs already do. The message still renders once, from the list.
|
|
37
|
+
- After a gesture takes a touch, the page no longer sees that touch's late `mousedown` and `mouseup`. WebKit sends them a few milliseconds after a held tap's cancelled `touchend`, aimed at whatever is under the finger by then; they now go with the click.
|
|
38
|
+
- Avatar, BreadcrumbItem, Button, Lightbox, SegmentedControlItem, Tab, Tokenizer: a slot whose value is `0` showed a stray "0" beside its slot, or, in SegmentedControlItem's and Tab's icons and Tab's end content, was dropped. That covers `startIcon`, `icon`, `endContent`, a Lightbox `caption` and `selectedIcon`. Now each slot follows the shared presence check. Empty values (`null`, `false`, `''`) render no slot, as an omitted one does, and `0` renders inside its slot as content. A Tab whose `selectedIcon` is `0` shows it while selected instead of falling back to `icon`. An Avatar whose `status` is `0` no longer shows a stray "0"; its status slot still renders only for a truthy value.
|
|
39
|
+
- Pressing Enter in the typable date field of a `DateInput` or `DateTimeInput` (the pointer surface) now submits the surrounding form when nothing is typed, as in any text field. Typed text is still committed first, and that Enter does not submit. A disabled or busy field still does nothing on Enter.
|
|
40
|
+
- DateRangeInput: with `presets`, the popover overflowed a phone-width screen. The calendar was cut off on the right, so the Saturday column and the end of a selected range were hidden, and on screens under about 364 px Next month was out of reach too. Now, when the presets and a one-month calendar do not fit side by side, the presets stack above the calendar, and the calendar and its navigation stay inside the popover. On a short screen the popover's content scrolls. Where the presets fit beside a one-month calendar, the layout does not change.
|
|
41
|
+
- `Dialog` (and `AlertDialog`, `CommandPalette`): a dialog that unmounts while it is open, for example one rendered only while open (`{isEditing && <Dialog isOpen …>}`) or removed with the rest of a view, now returns focus to the control that opened it instead of dropping it to the page.
|
|
42
|
+
- Opening a `Drawer` without its scrim from the keyboard no longer throws an `InvalidStateError` when its first control has a tooltip, such as a `DrawerHeader` close button. The tooltip now opens once the drawer is shown.
|
|
43
|
+
- A toast shown while a modal `Drawer` is open now appears inside the drawer, above it, and can be pressed and reached with Tab, as it already does over a `Dialog` or a `BottomSheet`. Before, the toast stayed outside the drawer's modal dialog: it was inert there (a press on Undo did nothing, and Tab never reached it), and a wide drawer hid it completely. Toasts go back to the page as the drawer starts to close. A drawer without a scrim is unchanged.
|
|
44
|
+
- A toast shown before a `Drawer` without its scrim (`hasScrim={false}`) opens now stays above the drawer, as it already does above a scrimless `BottomSheet`. Before, the drawer painted over it, so where the drawer covered the toast's corner its action could not be seen or pressed.
|
|
45
|
+
- A data-mode `DropdownMenu` that opens as a bottom sheet from a `renderTrigger` now titles the sheet, and names its dialog, after the menu's `aria-label`, else the trigger's own name, as its popover does. It no longer reads "Menu" for every such sheet. (#9525)
|
|
46
|
+
- A window blur during a pen's press, or during a press by a finger read from its pointer events, now ends it with nothing acting at the later lift, on every surface: a `Switch` no longer toggles at that pen's click. Where fingers come from pointer events, a second finger leaves both to the page's pinch even when the first rests on plain page. A disabled recognizer brings no blocking listener.
|
|
47
|
+
- With Reduce Motion on, a layer that opens under a finger fades in over 200 ms on easeInOut, the motion foundation's Reduce Motion values, instead of the theme's fast duration and curve. Under a mouse it still appears at once.
|
|
48
|
+
- A `Link` rendered as a button (with `onClick` and no `href`) lines up its wrapped text like the text around it, as an `href` Link does, instead of centring its second and later lines.
|
|
49
|
+
- A disabled `CheckboxList` or `RadioList` now sets `aria-disabled="true"` on its group, so a screen reader announces the group itself as unavailable, not only each option, and the dimmed group label counts as the label of an inactive control.
|
|
50
|
+
- A finger's tap that a DropdownMenu (or any menu on the press model) tracks now cancels that touch's `touchend`, on every device, so the browser sends no click and no compatibility mouse events for it. Before, a busy main thread could hold that click past the 400 ms click guard window. After a tap that drilled into a sub-menu, the late click picked the sub-menu row that had come under the finger and closed the menu. A mouse or pen release keeps the 400 ms window.
|
|
51
|
+
- With Reduce Motion on (`design:reduced-motion`), the month arrows in the DateInput and DateTimeInput bottom-sheet calendars, Reset, and a keyboard move into another month no longer scroll the months: on a computer with a mouse or trackpad the month changes at once, and on a touch screen it changes through a short opacity dip. A second step during the dip replaces the first, and unmounting the calendar during the dip scrolls nothing.
|
|
52
|
+
- Every `Outline` link is now in the normal Tab order, and Tab moves from link to link, as the Outline record says. Before, the outline was one Tab stop on the current heading, with arrow, Home and End keys moving between links, so a keyboard user who did not know those keys reached only one link. The arrow, Home and End keys no longer move focus between links. (#9001)
|
|
53
|
+
- `Popover` and `usePopover`: in the anchored presentation, initial focus now lands within the tap or click that opens the popover, so on iOS a text or number field in it raises the on-screen keyboard at once. Focus that `onShow` moves inside the popover is no longer pulled back to the first control.
|
|
54
|
+
- `PowerSearch`: Clear all keeps read-only filters. It removes only the filters the user can edit, the clear button shows only while an editable filter exists, Backspace on an empty input no longer removes a read-only filter, and Clear all announces "Editable filters removed" while a read-only filter remains. For callers, Clear all now calls `onChange` with the read-only filters and `remove` at the first removed index (`0` when no filter is read-only) instead of `[]` at the last filter's index.
|
|
55
|
+
- `PowerSearch`: in a read-only field (`isReadOnly`), Backspace on an empty input no longer removes the last filter. A read-only field now removes no filter, as its `isReadOnly` docs promise.
|
|
56
|
+
- PowerSearch: in the popover presentation, a built-in filter token's button was named by its field and operator only ("Status: is") and gave no sign that it opens an editor. Two filters on one field sounded the same, and the visible value was missing from the name. Now the token is named by all its visible text ("Status: is Open"), has `aria-haspopup="dialog"` and `aria-expanded`, and opens an editor that is a dialog of the same name. Its remove button is "Remove Status: is Open". Token: `aria-haspopup` and `aria-expanded` now reach a clickable token's inner button, beside `aria-labelledby` and `aria-describedby`.
|
|
57
|
+
- Under Reduce Motion on a touch screen, a step on a DateInput, TimeInput or DateTimeInput wheel, and a month step in the touch calendar, change under their cross-fade even on a busy page. Before, the change landed on a timer at the fade's middle, and a busy page could fire it after the fade had ended, so the rows or the month moved fully visible. Now the change lands when the fade-out ends, on the fade's own timeline, and the fade-in starts only after it, so it never shows at full opacity. The month's dip now eases each half, as the wheels' does.
|
|
58
|
+
- A `ResizeHandle` whose `resizable` prop goes away in the middle of a drag now ends the drag as it does on unmount: it releases the page's resize cursor and text selection, and the region hears that its gesture is over.
|
|
59
|
+
- A Selector's option list no longer fades in when Reduce Motion is on with a mouse or trackpad; it appears at once. On a touch screen it uses the shared Reduce Motion cross-fade.
|
|
60
|
+
- In an open Selector, MultiSelector, CommandPalette, DateTimeInput time list or Chat trigger menu, a key that scrolls the list (End, Home, PageDown, type-to-select) keeps the highlight where the key put it, even when the mouse is resting over the list. Before, the row that scrolled under the still pointer took the highlight. A mouse that moves or presses still takes it.
|
|
61
|
+
- Slider: every pointer drags a thumb by its travel, as UISlider does. A press on a thumb no longer jumps the value to the pointer: once the pointer has moved 10 px, the value follows its further travel along the track. A finger or a pen claims the drag only along the track, so a swipe across the slider scrolls the page; a mouse claims in any direction. On a touch screen each thumb takes a finger or a pen through a 48 px target, capped at half the gap to a range's other thumb, and the held thumb lifts. After a finger's flick the thumb coasts on UISlider's measured spring for about 0.6 s, `onChange` firing through the coast, and `onChangeEnd` reports the value once it settles; a slow drag, a mouse drag and a pen drag end at the release. A tap on the track sets the value when the finger lifts, and a mouse click where it lands; a right click and a macOS ctrl-click change nothing. Under reduced motion the thumb does not lift and a tap's value applies at once.
|
|
62
|
+
- `Toast`: a toast raised while the window is in the background now starts with its auto-hide timer paused, so it can no longer disappear before the user returns to the tab.
|
|
63
|
+
- A removable `Token` that its width cuts off now keeps its 16 by 16 remove button. The button used to shrink to 12 px wide, so its focus ring drew as an oval and its press target narrowed to 20 by 24 px. Only the label is cut now. (#9599)
|
|
64
|
+
- Tooltip, HoverCard: a tap-opened tooltip or hover card whose trigger renders in another document, such as an iframe, now closes on a scroll that starts outside in that document, and on a tap outside there when the trigger takes no focus.
|
|
65
|
+
- `Typeahead`: with focus entries on, an open list whose focus entries come back empty, or fail to load (for example after the query is cleared), now closes instead of staying open and empty. A typed search with no results still shows its message.
|
|
66
|
+
- `Typeahead`: pressing Escape while editing the selected value now restores the value and moves focus to its token, instead of dropping focus to the page. With the list shown, the first Escape only hides the list.
|
|
67
|
+
- `useMediaQuery` returns its server default where the window has no `matchMedia`, as in a test DOM, instead of throwing. Components that read it, such as Slider, now render in such a DOM; SegmentedControl, which reads it from this release, keeps rendering there.
|
|
68
|
+
- A picker wheel that stops on a value outside the bounds now settles on the nearest value inside them. Before, it bounced back to the value it started from. This applies to the wheels in the TimeInput, DateTimeInput and DateInput bottom sheets. For example, with `min="09:00"`, dragging the hour wheel from 10 to 7 settles on 9, as the iOS time picker does. A stop on a value inside the bounds is unchanged. Opening a sheet on a value outside the bounds commits nothing. When a bound changes a wheel's value while the sheet is open, as when the meridiem wheel turns past the maximum, that wheel turns onto the new value instead of jumping there. Under reduced motion, the wheel's own scrolls no longer glide. On a touch screen this travel, the step from an arrow key and a click on a row cross-fade, the rows landing while they are faded out; with a mouse or a trackpad they land at once, except the travel after a touch drag, which cross-fades on any screen.
|
|
69
|
+
|
|
70
|
+
#### Performance
|
|
71
|
+
|
|
72
|
+
- Opening a Selector's list or moving its highlight re-renders only the options whose highlight or selection changes, not every option, so a long list opens sooner and arrow keys respond faster.
|
|
73
|
+
- Opening a Selector with a long option list is faster: the list no longer restyles every option a second time on its first open to switch to its scrolling touch behavior.
|
|
74
|
+
|
|
75
|
+
#### Documentation
|
|
76
|
+
|
|
77
|
+
- Hook docs for `useOutlineFromMarkdown`, so `astryx hook useOutlineFromMarkdown` and `astryx search` return it, and a `useOutlineFromMarkdown — Docs Article` example block: a Markdown article and an Outline built from the same string through the hook, with a button that adds a section and its linked entry.
|
|
78
|
+
|
|
79
|
+
#### Other Changes
|
|
80
|
+
|
|
81
|
+
- Internal: the touch presentations' animator carries a channel on from the screen when a rebase, a set or a retarget that starts now rebuilds it after its call's first frame came late and left the start unread. The channel leaves that call with a start of its own, dated from that frame, instead of starting its curve again; the call's other channels keep waiting for the browser's start. Not exported from the package entry point.
|
|
82
|
+
- Internal: the touch presentations' animator reads a call whose first frame came late, and left its start unread, as started at that frame. A retarget or a read before the browser reports the start, of now or of a later time, continues near where the screen has it instead of from the call's first value. A rebase or set that rebuilds one channel's animation in that window reads that channel's first value until the frame that commits it, and the call's other channels keep reading from the first frame. The browser's start, once read, still decides. Not exported from the package entry point.
|
|
83
|
+
- Internal: ChatMessage's avatar offset variable now has the private literal name `--_chat-avatar-offset` instead of a hashed name, so the published stylesheet no longer declares an internal variable that looks public. The avatar's offset is unchanged. Not exported from the package entry point. (#9602)
|
|
84
|
+
- Internal: a mouse or pen drag that a gesture claims takes no new text selection and keeps the page's existing one, from the claim of whichever recognizer makes it (a swipe or a recognizer waiting on another's failure included), and a drag that starts on selectable text is left to the browser, which selects that text. Not exported from the package entry point.
|
|
85
|
+
- Internal: a pan follows a trackpad's two-finger scroll where its owner allows it (`allowedScrollTypes: ['continuous']`, UIKit's `allowedScrollTypesMask`; none by default), along its own axis and after the scrollers under the pointer, and never a mouse wheel's notches, which scroll what is under the pointer; the screen-edge pan takes none; and a pinch takes a ctrl-wheel from a trackpad or a mouse (AST-094 FR43, DEC-24). A watcher pan never takes the wheel, and a wheel another handler already prevented stays the page's. Input the deltas cannot place, Shift+wheel included, reads as a mouse wheel; a trackpad scroll a pan follows keeps moving at the fingers' speed until their lift is read, ends there still moving, and the momentum never moves it. Not exported from the package entry point.
|
|
86
|
+
- `ResizeHandle`'s pointer drag, keys and double-click move into one internal module, with no behavior change.
|
|
87
|
+
- Internal: when a main-thread stall delivers a late trackpad wheel and bunched wheels after it, a followed pan reads the fingers' speed over the late wheel's interval, so a flick no longer coasts short. The reading never passes the speed before the stall. Not exported from the package entry point.
|
|
88
|
+
- Internal: a followed trackpad pan takes no speed from a wheel within 1.5 ms of the one before, so bunched wheels after a main-thread stall no longer carry it past the fingers' travel, at 60 to 500 Hz. Not exported from the package entry point.
|
|
89
|
+
- Internal: the trackpad splitter reads a bunched wheel, one within 1.5 ms of the one before as a main-thread stall delivers it, as the steps it merged. During momentum a bunched wheel is not a jump, so momentum no longer restarts a followed pan, and the steps after it no longer read as a lift. Not exported from the package entry point.
|
|
90
|
+
- Internal: a pager for touch presentations that pages like a UIKit paging scroll view. A horizontal pan moves the pages one to one and rubber-bands at the ends. The release picks the page with UIKit's rule and settles on UIKit's paging curve on the compositor, and a finger can catch it mid-flight. It takes every pointer: a mouse drags it as a finger does, and its pan follows a trackpad's horizontal scroll, at most one page per swipe. A mouse wheel's scroll stays the page's. Its motion values are internal constants. Not exported from the package entry point.
|
|
91
|
+
- Internal: UIKit's paging values and math for touch presentations, measured on iOS 26.2: the thresholds that pick the page a release settles on, the settle that carries it there and `setContentOffset(animated:)`. The settle and `setContentOffset(animated:)` replay the recorded frames to under half a pixel. The unused projection rule (`selectPage` and `scroll.paging`) is gone, so the measured thresholds are the one paging rule. Not exported from the package entry point.
|
|
92
|
+
- Internal: UISwitch's values measured on iOS 26.2 (its geometry, the springs of the thumb's lift, settle, travel and drag, the track colour, its minimum lift time and its flip distance) join the UIKit constants table as internal constants, with the rule a switch's drag follows as a pure function: the finger flips the switch once it has travelled the track width minus the thumb width from where it landed, coming back past that point flips it back, and lifting the finger commits the side shown, or toggles when nothing flipped. Not exported from the package entry point, and no theme sets them. Switch's touch presentation plays them.
|
|
93
|
+
|
|
94
|
+
#### Contributors
|
|
95
|
+
|
|
96
|
+
Thanks to everyone who contributed to this release:
|
|
97
|
+
|
|
98
|
+
- @cixzhang
|
|
99
|
+
- @duytbp
|
|
100
|
+
- @HelloOjasMutreja
|
|
101
|
+
- @hskl18
|
|
102
|
+
- @imdreamrunner
|
|
103
|
+
- @vjeux
|
|
104
|
+
|
|
105
|
+
---
|
|
106
|
+
|
|
3
107
|
# 0.7.6
|
|
4
108
|
|
|
5
109
|
#### New Features
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file AlertDialog.tsx
|
|
3
|
-
* @input Uses React, StyleX, Dialog, Layout, Heading, Text, Button
|
|
4
|
-
* action-group tracking (hooks/useActionGroupTracking) and the press-group
|
|
5
|
-
* marker (privateAttributes/pressGroupItem.stylex)
|
|
3
|
+
* @input Uses React, StyleX, Dialog, Layout, Heading, Text, Button
|
|
6
4
|
* @output Exports AlertDialog component, AlertDialogProps type
|
|
7
5
|
* @position Core implementation; consumed by index.ts, tested by AlertDialog.test.tsx
|
|
8
6
|
*
|
|
@@ -10,7 +8,6 @@
|
|
|
10
8
|
* - /packages/core/src/AlertDialog/AlertDialog.doc.mjs (props table, features, examples)
|
|
11
9
|
* - /packages/core/src/AlertDialog/AlertDialog.test.tsx (tests for new/changed behavior)
|
|
12
10
|
* - /packages/core/src/AlertDialog/index.ts (exports if types change)
|
|
13
|
-
* - /packages/core/src/AlertDialog/__tests__/AlertDialog.interaction.browser.spec.ts (touch tracking)
|
|
14
11
|
* - /apps/storybook/stories/AlertDialog.stories.tsx (storybook stories)
|
|
15
12
|
* - /packages/cli/assets/templates/blocks/components/AlertDialog/ (showcase blocks)
|
|
16
13
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA
|
|
1
|
+
{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA2B,MAAM,OAAO,CAAC;AAUhD,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwB5C,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC;IAExB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,WAAW,EACX,WAAW,EAAE,oBAAoB,EACjC,WAAW,EACX,aAA6B,EAC7B,eAAe,EACf,QAAQ,EACR,KAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBA8FlB;yBAhHe,WAAW"}
|
|
@@ -4,9 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* @file AlertDialog.tsx
|
|
7
|
-
* @input Uses React, StyleX, Dialog, Layout, Heading, Text, Button
|
|
8
|
-
* action-group tracking (hooks/useActionGroupTracking) and the press-group
|
|
9
|
-
* marker (privateAttributes/pressGroupItem.stylex)
|
|
7
|
+
* @input Uses React, StyleX, Dialog, Layout, Heading, Text, Button
|
|
10
8
|
* @output Exports AlertDialog component, AlertDialogProps type
|
|
11
9
|
* @position Core implementation; consumed by index.ts, tested by AlertDialog.test.tsx
|
|
12
10
|
*
|
|
@@ -14,11 +12,10 @@
|
|
|
14
12
|
* - /packages/core/src/AlertDialog/AlertDialog.doc.mjs (props table, features, examples)
|
|
15
13
|
* - /packages/core/src/AlertDialog/AlertDialog.test.tsx (tests for new/changed behavior)
|
|
16
14
|
* - /packages/core/src/AlertDialog/index.ts (exports if types change)
|
|
17
|
-
* - /packages/core/src/AlertDialog/__tests__/AlertDialog.interaction.browser.spec.ts (touch tracking)
|
|
18
15
|
* - /apps/storybook/stories/AlertDialog.stories.tsx (storybook stories)
|
|
19
16
|
* - /packages/cli/assets/templates/blocks/components/AlertDialog/ (showcase blocks)
|
|
20
17
|
*/
|
|
21
|
-
import React, { useId, useCallback
|
|
18
|
+
import React, { useId, useCallback } from 'react';
|
|
22
19
|
import * as stylex from '@stylexjs/stylex';
|
|
23
20
|
import { Dialog } from "../Dialog/Dialog.js";
|
|
24
21
|
import { Layout } from "../Layout/Layout.js";
|
|
@@ -33,18 +30,10 @@ import { themeProps } from "../utils/themeProps.js";
|
|
|
33
30
|
import { useMediaQuery } from "../hooks/useMediaQuery.js";
|
|
34
31
|
import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
|
|
35
32
|
import english from "../i18n/generated-english/AlertDialog/AlertDialog.generated.js";
|
|
36
|
-
import { useActionGroupTracking } from "../hooks/useActionGroupTracking.js";
|
|
37
|
-
import { PressGroupContext } from "../hooks/pressGroupContext.js";
|
|
38
|
-
import { alertController } from "../motion/uikit/alert.js";
|
|
39
|
-
import { pressGroupItemProps } from "../privateAttributes/pressGroupItem.stylex.js";
|
|
40
33
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
41
34
|
registerEnglishFallback(english);
|
|
42
35
|
const SMALL_SCREEN_QUERY = '(max-width: 640px)';
|
|
43
36
|
const styles = {
|
|
44
|
-
trackingRow: {
|
|
45
|
-
kFalU9: "x1j4r261",
|
|
46
|
-
$$css: true
|
|
47
|
-
},
|
|
48
37
|
action: {
|
|
49
38
|
ks0D6T: "x193iq5w",
|
|
50
39
|
k7Eaqz: "xeuugli",
|
|
@@ -111,30 +100,17 @@ export function AlertDialog({
|
|
|
111
100
|
const handleCancel = useCallback(() => {
|
|
112
101
|
onOpenChange(false);
|
|
113
102
|
}, [onOpenChange]);
|
|
114
|
-
|
|
115
|
-
// Each action carries the press-group marker from its first render, so the
|
|
116
|
-
// tracker is its only painter.
|
|
117
|
-
const actionsRef = useRef(null);
|
|
118
|
-
const isTracking = isOpen && isInline !== true;
|
|
119
|
-
useActionGroupTracking(actionsRef, {
|
|
120
|
-
// The actions row holds only the two buttons.
|
|
121
|
-
itemSelector: 'button',
|
|
122
|
-
highlightOnsetMs: alertController.actions.highlightOnsetMs,
|
|
123
|
-
highlightExpansion: alertController.actions.highlightExpansion,
|
|
124
|
-
isEnabled: isTracking
|
|
125
|
-
});
|
|
126
|
-
const actionTrackingProps = isTracking ? pressGroupItemProps : undefined;
|
|
127
103
|
const buttonActionStyle = [styles.action, isSmallScreen && styles.stackedAction];
|
|
128
104
|
const cancelButton = /*#__PURE__*/_jsx(Button, {
|
|
129
105
|
variant: "ghost",
|
|
130
106
|
label: cancelLabel,
|
|
131
107
|
onClick: handleCancel,
|
|
132
|
-
xstyle: buttonActionStyle
|
|
133
|
-
...actionTrackingProps,
|
|
108
|
+
xstyle: buttonActionStyle
|
|
134
109
|
// Dialog focuses [data-autofocus] itself after showModal(), because
|
|
135
110
|
// React's autoFocus runs during commit while the dialog is invisible.
|
|
136
111
|
// Cancel is least destructive, so it remains the autofocus target even
|
|
137
112
|
// when small-screen visual order places the destructive action above it.
|
|
113
|
+
,
|
|
138
114
|
"data-autofocus": true
|
|
139
115
|
}, "cancel");
|
|
140
116
|
const actionButton = /*#__PURE__*/_jsx(Button, {
|
|
@@ -142,8 +118,7 @@ export function AlertDialog({
|
|
|
142
118
|
label: actionLabel,
|
|
143
119
|
onClick: onAction,
|
|
144
120
|
isLoading: isActionLoading,
|
|
145
|
-
xstyle: buttonActionStyle
|
|
146
|
-
...actionTrackingProps
|
|
121
|
+
xstyle: buttonActionStyle
|
|
147
122
|
}, "action");
|
|
148
123
|
return /*#__PURE__*/_jsx(Dialog, {
|
|
149
124
|
...rest,
|
|
@@ -183,16 +158,11 @@ export function AlertDialog({
|
|
|
183
158
|
}),
|
|
184
159
|
footer: /*#__PURE__*/_jsx(LayoutFooter, {
|
|
185
160
|
children: /*#__PURE__*/_jsx(Stack, {
|
|
186
|
-
ref: actionsRef,
|
|
187
|
-
xstyle: isTracking && styles.trackingRow,
|
|
188
161
|
direction: isSmallScreen ? 'vertical' : 'horizontal',
|
|
189
162
|
gap: 2,
|
|
190
163
|
hAlign: isSmallScreen ? 'stretch' : 'end',
|
|
191
164
|
wrap: isSmallScreen ? 'nowrap' : 'wrap',
|
|
192
|
-
children:
|
|
193
|
-
value: isTracking,
|
|
194
|
-
children: isSmallScreen ? [actionButton, cancelButton] : [cancelButton, actionButton]
|
|
195
|
-
})
|
|
165
|
+
children: isSmallScreen ? [actionButton, cancelButton] : [cancelButton, actionButton]
|
|
196
166
|
})
|
|
197
167
|
})
|
|
198
168
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAQvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA4CnC,eAAO,MAAM,2BAA2B,2DACkB,CAAC;
|
|
1
|
+
{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAQvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA4CnC,eAAO,MAAM,2BAA2B,2DACkB,CAAC;AA2M3D,MAAM,MAAM,sBAAsB,GAChC,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAC7B;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAChB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GACjC;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,MAAM,CAAC;CACzB,GACD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,UAAU,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,EAAE,qBAAqB,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC7D;AA2HD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,eAAe,EACf,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,cAAsB,EACtB,cAAc,EACd,eAAe,EACf,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAyZvB;yBAjbe,gBAAgB"}
|
|
@@ -204,7 +204,6 @@ function waitForTransition(element, propertyName, complete) {
|
|
|
204
204
|
}
|
|
205
205
|
let done = false;
|
|
206
206
|
let timer = null;
|
|
207
|
-
let backstopMs = 0;
|
|
208
207
|
const finish = () => {
|
|
209
208
|
if (done) {
|
|
210
209
|
return;
|
|
@@ -218,21 +217,9 @@ function waitForTransition(element, propertyName, complete) {
|
|
|
218
217
|
complete();
|
|
219
218
|
};
|
|
220
219
|
const handleTransitionEnd = event => {
|
|
221
|
-
if (event.target
|
|
222
|
-
|
|
223
|
-
}
|
|
224
|
-
// The engine cancels a transition whose end value changes mid-flight. A
|
|
225
|
-
// percentage transform does when the closing frame moves the height by a
|
|
226
|
-
// fraction of a pixel. A replacement runs on from where it was. That one
|
|
227
|
-
// ends the motion, not the cancel.
|
|
228
|
-
if (event.type === 'transitioncancel' && hasRunningTransition(element, propertyName)) {
|
|
229
|
-
if (timer != null) {
|
|
230
|
-
clearTimeout(timer);
|
|
231
|
-
timer = setTimeout(finish, backstopMs);
|
|
232
|
-
}
|
|
233
|
-
return;
|
|
220
|
+
if (event.target === element && event.propertyName === propertyName) {
|
|
221
|
+
finish();
|
|
234
222
|
}
|
|
235
|
-
finish();
|
|
236
223
|
};
|
|
237
224
|
element.addEventListener('transitionend', handleTransitionEnd);
|
|
238
225
|
element.addEventListener('transitioncancel', handleTransitionEnd);
|
|
@@ -270,8 +257,7 @@ function waitForTransition(element, propertyName, complete) {
|
|
|
270
257
|
finish();
|
|
271
258
|
return () => {};
|
|
272
259
|
}
|
|
273
|
-
|
|
274
|
-
timer = setTimeout(finish, backstopMs);
|
|
260
|
+
timer = setTimeout(finish, transitionMs + TRANSITION_BACKSTOP_BUFFER_MS);
|
|
275
261
|
return () => {
|
|
276
262
|
if (timer != null) {
|
|
277
263
|
clearTimeout(timer);
|
|
@@ -280,11 +266,6 @@ function waitForTransition(element, propertyName, complete) {
|
|
|
280
266
|
element.removeEventListener('transitioncancel', handleTransitionEnd);
|
|
281
267
|
};
|
|
282
268
|
}
|
|
283
|
-
|
|
284
|
-
// Whether a CSS transition of `propertyName` still runs on `element`.
|
|
285
|
-
function hasRunningTransition(element, propertyName) {
|
|
286
|
-
return (element.getAnimations?.() ?? []).some(animation => animation.transitionProperty === propertyName && (animation.playState === 'running' || animation.playState === 'paused'));
|
|
287
|
-
}
|
|
288
269
|
function parseTransitionTime(value) {
|
|
289
270
|
const normalizedValue = value.trim();
|
|
290
271
|
if (!/^-?(?:\d+|\d*\.\d+)(?:ms|s)$/.test(normalizedValue)) {
|
|
@@ -613,7 +594,7 @@ export function BottomSheetPanel({
|
|
|
613
594
|
}),
|
|
614
595
|
children: [/*#__PURE__*/_jsx("div", {
|
|
615
596
|
...{
|
|
616
|
-
className: "x10l6tqk x13vifvy x1o0tod xtijo5x x1vjfegm x78zum5 x6s0dn4 xl56j7k xvpftlf xafqdz2
|
|
597
|
+
className: "x10l6tqk x13vifvy x1o0tod xtijo5x x1vjfegm x78zum5 x6s0dn4 xl56j7k xvpftlf xafqdz2 x1j4r261 x1jm3nie x16khyan x1cpjm7i x1oke5ut x34npju xmwhqxd x1hw15nc"
|
|
617
598
|
},
|
|
618
599
|
...handleProps,
|
|
619
600
|
"aria-hidden": "true"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"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"}
|
|
@@ -462,9 +462,7 @@ export function useSheetGestures({
|
|
|
462
462
|
}
|
|
463
463
|
return;
|
|
464
464
|
}
|
|
465
|
-
|
|
466
|
-
// layout in the middle of the open. The observer's first report comes
|
|
467
|
-
// after the browser's own layout, before the first paint.
|
|
465
|
+
recordSheetHeight(node.getBoundingClientRect().height);
|
|
468
466
|
const ro = new ResizeObserver(entries => {
|
|
469
467
|
const entry = entries[0];
|
|
470
468
|
if (entry) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
|
package/dist/Button/Button.js
CHANGED
|
@@ -30,7 +30,6 @@ import { iconBoxSizeStyles } from "../Icon/IconSize.stylex.js";
|
|
|
30
30
|
import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
|
|
31
31
|
import { useSize } from "../SizeContext/SizeContext.js";
|
|
32
32
|
import { useButtonGroup } from "../ButtonGroup/ButtonGroupContext.js";
|
|
33
|
-
import { PressGroupContext } from "../hooks/pressGroupContext.js";
|
|
34
33
|
import { useInputGroup } from "../InputGroup/InputGroupContext.js";
|
|
35
34
|
import { InputGroupInternalContext } from "../InputGroup/InputGroupInternalContext.js";
|
|
36
35
|
import { groupStyles as inputGroupStyles, inputGroupItemProps } from "../InputGroup/groupStyles.js";
|
|
@@ -47,12 +46,6 @@ import { isRenderable } from "../utils/isRenderable.js";
|
|
|
47
46
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
48
47
|
registerEnglishFallback(english);
|
|
49
48
|
|
|
50
|
-
/**
|
|
51
|
-
* Written by the press controller or a group's tracker while a press is
|
|
52
|
-
* believed. Typed `string`, so StyleX reads it as a computed key.
|
|
53
|
-
*/
|
|
54
|
-
const PRESSED_ON = '[data-astryx-press="on"]';
|
|
55
|
-
|
|
56
49
|
/**
|
|
57
50
|
* Base button styles
|
|
58
51
|
* Pseudo-classes are nested within properties per StyleX recommendation:
|
|
@@ -89,14 +82,6 @@ const styles = {
|
|
|
89
82
|
k3aq6I: "x3oybdh x8ppqj xom6oz5 x3y5scg",
|
|
90
83
|
$$css: true
|
|
91
84
|
},
|
|
92
|
-
trackedOverlay: {
|
|
93
|
-
kgSjnq: "x1vl4g35",
|
|
94
|
-
$$css: true
|
|
95
|
-
},
|
|
96
|
-
pressableTracked: {
|
|
97
|
-
k3aq6I: "x3oybdh x3y5scg",
|
|
98
|
-
$$css: true
|
|
99
|
-
},
|
|
100
85
|
inactive: {
|
|
101
86
|
kkrTdU: "xt0e3qv",
|
|
102
87
|
kKwaWg: "x18o3ruo",
|
|
@@ -396,7 +381,6 @@ export function Button({
|
|
|
396
381
|
const t = useComponentTranslator();
|
|
397
382
|
const size = useSize(sizeProp, 'md');
|
|
398
383
|
const buttonGroup = useButtonGroup();
|
|
399
|
-
const isGroupTracked = use(PressGroupContext);
|
|
400
384
|
const inputGroup = useInputGroup();
|
|
401
385
|
const [isPending, startTransition] = useTransition();
|
|
402
386
|
// clickAction is normally fire-once (submit/save/pay), so a same-tick
|
|
@@ -513,7 +497,7 @@ export function Button({
|
|
|
513
497
|
} : null;
|
|
514
498
|
|
|
515
499
|
// Shared StyleX props for both button and link rendering
|
|
516
|
-
const sharedStylexProps = focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isIconOnly && styles.iconOnly, interactionOverlayStyles.backgroundImage,
|
|
500
|
+
const sharedStylexProps = focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isIconOnly && styles.iconOnly, interactionOverlayStyles.backgroundImage, buttonDisabled && styles.inactive, isTrueDisabled && styles.disabled, useAriaDisabled && styles.ariaDisabled, renderAsLink && styles.link, !buttonGroup && styles.pressable, buttonGroup && (buttonGroup.orientation === 'horizontal' ? groupStyles.horizontal : groupStyles.vertical), inputGroup != null && buttonGroup == null && inputGroupStyles.buttonAddon, buttonGroup && (variant === 'primary' || variant === 'destructive') && (buttonGroup.orientation === 'horizontal' ? groupStyles.onSolidHorizontal : groupStyles.onSolidVertical),
|
|
517
501
|
// Standalone floating buttons only — a grouped button's elevation is owned
|
|
518
502
|
// by the ButtonGroup so the shared surface lifts as one unit.
|
|
519
503
|
!buttonGroup && elevationStyles[elevation], width != null && dynamicStyles.width(width),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,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;
|
|
1
|
+
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -27,8 +27,6 @@ import { mergeProps } from "../utils/mergeProps.js";
|
|
|
27
27
|
import { rtlStyles } from "../utils/rtlStyles.js";
|
|
28
28
|
import "../Indicator/indicator.markers.stylex.js";
|
|
29
29
|
import { indicatorScope } from "../Indicator/indicator.markers.stylex.js";
|
|
30
|
-
import "../internal/indicatorPress.stylex.js";
|
|
31
|
-
import { indicatorPressScope } from "../internal/indicatorPress.stylex.js";
|
|
32
30
|
import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
|
|
33
31
|
import { useIndicatorFocusRing } from "../hooks/useIndicatorFocusRing.js";
|
|
34
32
|
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
@@ -42,11 +40,6 @@ import english from "../i18n/generated-english/CheckboxInput/CheckboxInput.gener
|
|
|
42
40
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
43
41
|
registerEnglishFallback(english);
|
|
44
42
|
|
|
45
|
-
/** Written by the touch press controller while the row is pressed. */
|
|
46
|
-
const PRESSED_ON = '[data-astryx-press="on"]';
|
|
47
|
-
/** Written by the touch press controller for the press's release. */
|
|
48
|
-
const PRESSED_FADING = '[data-astryx-press="fading"]';
|
|
49
|
-
|
|
50
43
|
// The touch press's paint, declared by the shared overlay styles on the
|
|
51
44
|
// element the controller writes to (`pressedAlpha`) at the press's strength,
|
|
52
45
|
// 1 while on and 1 → 0 over the release, and inherited resolved by the layer
|
|
@@ -63,10 +56,6 @@ const styles = {
|
|
|
63
56
|
kOIVth: "xxhr3t",
|
|
64
57
|
$$css: true
|
|
65
58
|
},
|
|
66
|
-
indicatorPressImage: {
|
|
67
|
-
"--_indicator-press-image": "x1dueop1 x189o2zt",
|
|
68
|
-
$$css: true
|
|
69
|
-
},
|
|
70
59
|
checkboxWrapper: {
|
|
71
60
|
kVAEAm: "x1n2onr6",
|
|
72
61
|
k1xSpc: "x78zum5",
|
|
@@ -77,7 +66,7 @@ const styles = {
|
|
|
77
66
|
$$css: true
|
|
78
67
|
},
|
|
79
68
|
indicatorPressOverlay: {
|
|
80
|
-
k5JduY: "x1s928wv
|
|
69
|
+
k5JduY: "x1s928wv",
|
|
81
70
|
kwXMNM: "x1j6awrg",
|
|
82
71
|
kv0HGH: "xarstr8",
|
|
83
72
|
kUfP38: "xtb6wbx",
|
|
@@ -270,7 +259,7 @@ export function CheckboxInput({
|
|
|
270
259
|
...stylex.props(styles.container, isLabelHidden && styles.containerLabelHidden,
|
|
271
260
|
// Hover and focus reach the checkbox visual through this ancestor
|
|
272
261
|
// marker rather than props, so the whole row drives it.
|
|
273
|
-
!isDisabled && indicatorScope,
|
|
262
|
+
!isDisabled && indicatorScope,
|
|
274
263
|
// The touch press's strength and release live on the row the
|
|
275
264
|
// controller writes to; the layer over the checkbox box inherits
|
|
276
265
|
// and paints it.
|
|
@@ -82,10 +82,7 @@ export interface ComplexSelectorRenderState {
|
|
|
82
82
|
export interface ComplexSelectorHandle {
|
|
83
83
|
/** Open the selector surface. No-op when disabled or already open. */
|
|
84
84
|
open(): void;
|
|
85
|
-
/**
|
|
86
|
-
* Close the selector surface. Focus returns to the trigger only when it
|
|
87
|
-
* would otherwise be lost; a caller-rendered trigger always gets it back.
|
|
88
|
-
*/
|
|
85
|
+
/** Close the selector surface. Restores focus to the trigger. */
|
|
89
86
|
close(): void;
|
|
90
87
|
/** Toggle the selector surface open or closed. */
|
|
91
88
|
toggle(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAQZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACzB,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"ComplexSelector.d.ts","sourceRoot":"","sources":["../../src/ComplexSelector/ComplexSelector.tsx"],"names":[],"mappings":"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"}
|
|
@@ -20,7 +20,6 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
20
20
|
import { useFieldInputStyling } from "../Field/fieldParts.js";
|
|
21
21
|
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
22
22
|
import { mergeRefs } from "../utils/mergeRefs.js";
|
|
23
|
-
import { isFocusLost } from "../utils/focusReturn.js";
|
|
24
23
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
25
24
|
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
26
25
|
import { Field, inputWrapperStyles } from "../Field/index.js";
|
|
@@ -313,20 +312,12 @@ export function ComplexSelector({
|
|
|
313
312
|
const handlePopoverShow = useCallback(() => {
|
|
314
313
|
onOpenChange?.(true);
|
|
315
314
|
}, [onOpenChange]);
|
|
316
|
-
|
|
317
|
-
// The popup's content element, read when it closes.
|
|
318
|
-
const popupContentRef = useRef(null);
|
|
319
|
-
const hasCallerTrigger = renderTrigger != null;
|
|
320
315
|
const handlePopoverHide = useCallback(() => {
|
|
321
|
-
|
|
322
|
-
//
|
|
323
|
-
|
|
324
|
-
// consumer that moves it from the callback wins.
|
|
325
|
-
if (hasCallerTrigger || isFocusLost(popupContentRef.current, trigger?.ownerDocument)) {
|
|
326
|
-
trigger?.focus();
|
|
327
|
-
}
|
|
316
|
+
// Focus is restored first so a consumer that moves focus elsewhere from
|
|
317
|
+
// the callback wins, instead of being overwritten a line later.
|
|
318
|
+
triggerRef.current?.focus();
|
|
328
319
|
onOpenChange?.(false);
|
|
329
|
-
}, [
|
|
320
|
+
}, [onOpenChange]);
|
|
330
321
|
const popover = usePopover({
|
|
331
322
|
dialogLabel: label,
|
|
332
323
|
hasCloseButton: false,
|
|
@@ -335,7 +326,6 @@ export function ComplexSelector({
|
|
|
335
326
|
onShow: handlePopoverShow,
|
|
336
327
|
onHide: handlePopoverHide
|
|
337
328
|
});
|
|
338
|
-
popupContentRef.current = popover.contentRef.current;
|
|
339
329
|
const isOpen = popover.isOpen;
|
|
340
330
|
const handleTriggerClick = useCallback(() => {
|
|
341
331
|
if (isDisabled) {
|
|
@@ -528,11 +528,11 @@ export function ContextMenu({
|
|
|
528
528
|
onTouchMoveProp?.(event);
|
|
529
529
|
}, [handleLongPressTouchMove, onTouchMoveProp]);
|
|
530
530
|
const handleTriggerTouchEnd = useCallback(event => {
|
|
531
|
-
handleLongPressTouchEnd(
|
|
531
|
+
handleLongPressTouchEnd();
|
|
532
532
|
onTouchEndProp?.(event);
|
|
533
533
|
}, [handleLongPressTouchEnd, onTouchEndProp]);
|
|
534
534
|
const handleTriggerTouchCancel = useCallback(event => {
|
|
535
|
-
handleLongPressTouchCancel(
|
|
535
|
+
handleLongPressTouchCancel();
|
|
536
536
|
onTouchCancelProp?.(event);
|
|
537
537
|
}, [handleLongPressTouchCancel, onTouchCancelProp]);
|
|
538
538
|
const popoverXstyle = menuWidth ? styles.popoverCustomWidth(menuWidth) : styles.popover;
|