@jsenv/navi 0.29.299 → 0.29.301
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dev/jsenv_navi.js +264 -24
- package/dist/dev/jsenv_navi.js.map +9 -9
- package/dist/jsenv_navi.js +188 -19
- package/dist/jsenv_navi.js.map +9 -9
- package/docs/AI_INSTRUCTIONS.md +2 -1
- package/docs/interactions.md +6 -0
- package/docs/popup_open.md +102 -2
- package/package.json +1 -1
package/dist/jsenv_navi.js
CHANGED
|
@@ -10338,6 +10338,8 @@ defineInteractionDetector({
|
|
|
10338
10338
|
}
|
|
10339
10339
|
let swipe = null;
|
|
10340
10340
|
let press = null;
|
|
10341
|
+
// Set below, with the hold; a no-op until then so the swipe can call it.
|
|
10342
|
+
let forgetInnerLongPress = () => {};
|
|
10341
10343
|
|
|
10342
10344
|
if (axes) {
|
|
10343
10345
|
swipe = startSwipe(pointerDownEvent, {
|
|
@@ -10357,14 +10359,35 @@ defineInteractionDetector({
|
|
|
10357
10359
|
onSwipeStart: () => {
|
|
10358
10360
|
press?.cancel();
|
|
10359
10361
|
press = null;
|
|
10362
|
+
forgetInnerLongPress();
|
|
10360
10363
|
},
|
|
10361
10364
|
});
|
|
10362
10365
|
}
|
|
10363
10366
|
if (hasLongPress) {
|
|
10367
|
+
// A hold declared INSIDE this element, on this same press: the nearer
|
|
10368
|
+
// one answers, the way a click is the innermost target's, and this
|
|
10369
|
+
// wait is given up — two sheets opening from one hold is nobody's
|
|
10370
|
+
// intention. Delays being equal, the inner timer was set first (the
|
|
10371
|
+
// press reached it first) and fires first; the inner hold arrives here
|
|
10372
|
+
// as its own event, bubbling, before this timer runs.
|
|
10373
|
+
const onInnerLongPress = (longPressEvent) => {
|
|
10374
|
+
if (longPressEvent.target === element || !press) {
|
|
10375
|
+
return;
|
|
10376
|
+
}
|
|
10377
|
+
press.cancel();
|
|
10378
|
+
press = null;
|
|
10379
|
+
forgetInnerLongPress();
|
|
10380
|
+
};
|
|
10381
|
+
forgetInnerLongPress = () => {
|
|
10382
|
+
element.removeEventListener("longpress", onInnerLongPress);
|
|
10383
|
+
};
|
|
10384
|
+
element.addEventListener("longpress", onInnerLongPress);
|
|
10364
10385
|
press = waitForPressHeld(pointerDownEvent, {
|
|
10365
10386
|
delay: readConfig(LONGPRESS_DELAY_ATTRIBUTE, LONGPRESS_DELAY_DEFAULT),
|
|
10366
10387
|
slop: readConfig(LONGPRESS_SLOP_ATTRIBUTE, LONGPRESS_SLOP_DEFAULT),
|
|
10388
|
+
onPressCancel: forgetInnerLongPress,
|
|
10367
10389
|
onPressHeld: (pressEvent, { endPress }) => {
|
|
10390
|
+
forgetInnerLongPress();
|
|
10368
10391
|
// The hold won the arbitration: the swipe never got the distance it
|
|
10369
10392
|
// needed, and must not get it from whatever the finger does next.
|
|
10370
10393
|
swipe?.stop();
|
|
@@ -34095,6 +34118,12 @@ const useUIStateController = (
|
|
|
34095
34118
|
},
|
|
34096
34119
|
resetUIState: (e) => {
|
|
34097
34120
|
controller.setUIState(controller.state, e);
|
|
34121
|
+
// What the control holds moved back, and a bound signal mirrors what
|
|
34122
|
+
// it holds (see PROPAGATE_DOWN_EVENT_SET). Left on the value the
|
|
34123
|
+
// reset just undid — written there by the control itself at the
|
|
34124
|
+
// pick — the signal would hand it straight back on the next render,
|
|
34125
|
+
// and the refused value would win over the rollback.
|
|
34126
|
+
writeBoundSignal(controller.state);
|
|
34098
34127
|
},
|
|
34099
34128
|
// Read by the callout manager when it has nowhere else to point.
|
|
34100
34129
|
getCalloutAnchorElement: (event) =>
|
|
@@ -34198,9 +34227,27 @@ const useUIStateController = (
|
|
|
34198
34227
|
controller.hasStateProp = true;
|
|
34199
34228
|
const currentState = controller.state;
|
|
34200
34229
|
if (!compareTwoJsValues(state, currentState)) {
|
|
34201
|
-
|
|
34202
|
-
|
|
34203
|
-
|
|
34230
|
+
// A bound signal controls the state the way a `value` prop does —
|
|
34231
|
+
// and, unlike a `value`, it is written by the control itself at
|
|
34232
|
+
// every ui action. Read back here on a control that runs an action,
|
|
34233
|
+
// a signal matching the ui state is that echo (see the signal branch
|
|
34234
|
+
// below for the same rule on an uncontrolled control): `state` is
|
|
34235
|
+
// the rollback target, and taking the echo would make resetOnError
|
|
34236
|
+
// put back the very value the action is about to send, or has just
|
|
34237
|
+
// been refused. The action settles it — success acknowledges,
|
|
34238
|
+
// failure resets to what is kept here.
|
|
34239
|
+
const signalEchoesOwnWrite =
|
|
34240
|
+
Boolean(controlInfo.signal) &&
|
|
34241
|
+
Boolean(props.action) &&
|
|
34242
|
+
compareTwoJsValues(state, controller.uiState);
|
|
34243
|
+
if (!signalEchoesOwnWrite) {
|
|
34244
|
+
controller.state = state;
|
|
34245
|
+
if (!optimisticWorkInFlight) {
|
|
34246
|
+
controller.setUIState(
|
|
34247
|
+
state,
|
|
34248
|
+
new CustomEvent("state_prop_change"),
|
|
34249
|
+
);
|
|
34250
|
+
}
|
|
34204
34251
|
}
|
|
34205
34252
|
}
|
|
34206
34253
|
} else {
|
|
@@ -44883,9 +44930,15 @@ const createOpenController = (
|
|
|
44883
44930
|
change();
|
|
44884
44931
|
};
|
|
44885
44932
|
const runChange = (change, { opened, event }) => {
|
|
44933
|
+
const applyChange = () => {
|
|
44934
|
+
// Recorded with the change itself: what the DOM shows is what a render
|
|
44935
|
+
// landing between the ask and the picture must draw (see `openedInDom`).
|
|
44936
|
+
controller.openedInDom = opened;
|
|
44937
|
+
change();
|
|
44938
|
+
};
|
|
44886
44939
|
const { transitionChange } = controller;
|
|
44887
44940
|
if (!transitionChange) {
|
|
44888
|
-
|
|
44941
|
+
applyChange();
|
|
44889
44942
|
return;
|
|
44890
44943
|
}
|
|
44891
44944
|
// What the controller answers about itself does not wait for the picture:
|
|
@@ -44894,10 +44947,10 @@ const createOpenController = (
|
|
|
44894
44947
|
// caller's own signal), and a request arriving before the change lands
|
|
44895
44948
|
// runs it first rather than reading a DOM that disagrees.
|
|
44896
44949
|
controller.opened = opened;
|
|
44897
|
-
changeAwaitingTransition =
|
|
44950
|
+
changeAwaitingTransition = applyChange;
|
|
44898
44951
|
transitionChange(
|
|
44899
44952
|
() => {
|
|
44900
|
-
if (changeAwaitingTransition ===
|
|
44953
|
+
if (changeAwaitingTransition === applyChange) {
|
|
44901
44954
|
flushChangeAwaitingTransition();
|
|
44902
44955
|
}
|
|
44903
44956
|
},
|
|
@@ -45015,6 +45068,13 @@ const createOpenController = (
|
|
|
45015
45068
|
};
|
|
45016
45069
|
const controller = {
|
|
45017
45070
|
opened: false,
|
|
45071
|
+
// What the DOM currently shows, as opposed to what the controller has
|
|
45072
|
+
// decided: the two differ for the frame a change spends waiting for the
|
|
45073
|
+
// browser to photograph the state being left (see runChange). A render
|
|
45074
|
+
// landing in that frame — a picker re-rendering because its action just
|
|
45075
|
+
// started — must draw THIS, or it paints the closed state before the
|
|
45076
|
+
// picture is taken and the movement has nothing to leave from.
|
|
45077
|
+
openedInDom: false,
|
|
45018
45078
|
// Which press the popup opened during, written at every open (see
|
|
45019
45079
|
// openedDuringThisPress). Never any press before there has been one.
|
|
45020
45080
|
pressCountAtOpen: null,
|
|
@@ -59516,14 +59576,14 @@ const useDialogProps = props => {
|
|
|
59516
59576
|
// and matching what a descendant relying on
|
|
59517
59577
|
// use_displayed_layout_effect.js's own aria-expanded-presence check
|
|
59518
59578
|
// needs — see popover.jsx's own identical prop for the full reasoning.
|
|
59519
|
-
"aria-expanded": openController.
|
|
59579
|
+
"aria-expanded": openController.openedInDom ? "true" : "false",
|
|
59520
59580
|
// Present from this very first render (recomputed fresh on every one
|
|
59521
59581
|
// from openController.opened, not a frozen mount-time constant) so
|
|
59522
59582
|
// there's no gap for the browser to ever paint this plain-div backdrop
|
|
59523
59583
|
// visible before anything has actually opened it — see popover.jsx's
|
|
59524
59584
|
// own identical prop for the full reasoning, and this file's own CSS
|
|
59525
59585
|
// for the rule it drives.
|
|
59526
|
-
"navi-hidden": openController.
|
|
59586
|
+
"navi-hidden": openController.openedInDom ? undefined : "",
|
|
59527
59587
|
"styleCSSVars": DIALOG_STYLE_CSS_VARS,
|
|
59528
59588
|
"animationDuration": rest.animationDuration,
|
|
59529
59589
|
"data-pointer-interaction-outside": pointerInteractionOutsideEffect,
|
|
@@ -59535,7 +59595,7 @@ const useDialogProps = props => {
|
|
|
59535
59595
|
tabIndex,
|
|
59536
59596
|
// See backdropProps' own identical prop above for the full reasoning
|
|
59537
59597
|
// (kept once, not repeated here).
|
|
59538
|
-
"aria-expanded": openController.
|
|
59598
|
+
"aria-expanded": openController.openedInDom ? "true" : "false",
|
|
59539
59599
|
// Present from the very first render (recomputed fresh from
|
|
59540
59600
|
// openController.opened every time, not a frozen mount-time constant —
|
|
59541
59601
|
// see popover.jsx's own identical prop for the full reasoning) so a
|
|
@@ -59543,7 +59603,7 @@ const useDialogProps = props => {
|
|
|
59543
59603
|
// can't silently defeat showModal()/close()'s native open/close — see
|
|
59544
59604
|
// this file's own CSS rule for dialogEl and the open/close steps below
|
|
59545
59605
|
// for how it's toggled.
|
|
59546
|
-
"navi-hidden": openController.
|
|
59606
|
+
"navi-hidden": openController.openedInDom ? undefined : "",
|
|
59547
59607
|
// Unlike Popover (which genuinely can't resolve "auto" until it
|
|
59548
59608
|
// measures against a real anchor), resolvedAnimation is already fully
|
|
59549
59609
|
// known synchronously here — a dialog never needs to flip anything
|
|
@@ -61160,12 +61220,12 @@ const usePopoverProps = props => {
|
|
|
61160
61220
|
// commit (a plain prop is, no effect needed) — see
|
|
61161
61221
|
// use_displayed_layout_effect.js's own comments for why a descendant
|
|
61162
61222
|
// relying on aria-expanded's mere presence needs that.
|
|
61163
|
-
"aria-expanded": openController.
|
|
61223
|
+
"aria-expanded": openController.openedInDom ? "true" : "false",
|
|
61164
61224
|
// Read fresh on every render (not frozen at mount), so it stays
|
|
61165
61225
|
// correct even across a re-render that happens to occur while open —
|
|
61166
61226
|
// see contentProps' own identical prop just below for the full
|
|
61167
61227
|
// reasoning (kept once, not repeated here).
|
|
61168
|
-
"navi-hidden": openController.
|
|
61228
|
+
"navi-hidden": openController.openedInDom ? undefined : "",
|
|
61169
61229
|
"styleCSSVars": POPUP_STYLE_CSS_VARS,
|
|
61170
61230
|
"animationDuration": rest.animationDuration,
|
|
61171
61231
|
"data-pointer-interaction-outside": pointerInteractionOutsideEffect,
|
|
@@ -61214,7 +61274,7 @@ const usePopoverProps = props => {
|
|
|
61214
61274
|
"navi-animation": isAutoAnimation ? undefined : animation,
|
|
61215
61275
|
// See backdropProps' own identical prop above for the full reasoning
|
|
61216
61276
|
// (kept once, not repeated here).
|
|
61217
|
-
"aria-expanded": openController.
|
|
61277
|
+
"aria-expanded": openController.openedInDom ? "true" : "false",
|
|
61218
61278
|
// Only load-bearing for the custom renderer (a plain div has no native
|
|
61219
61279
|
// starting-hidden default) — present from this very first render so
|
|
61220
61280
|
// there's no gap for the browser to ever paint it visible before
|
|
@@ -61224,7 +61284,7 @@ const usePopoverProps = props => {
|
|
|
61224
61284
|
// the last render, so as long as this always reflects the *current*
|
|
61225
61285
|
// truth, it never fights the imperative
|
|
61226
61286
|
// removeAttribute/setAttribute openEffect/close do directly.
|
|
61227
|
-
"navi-hidden": openController.
|
|
61287
|
+
"navi-hidden": openController.openedInDom ? undefined : "",
|
|
61228
61288
|
"styleCSSVars": POPUP_STYLE_CSS_VARS,
|
|
61229
61289
|
...rest,
|
|
61230
61290
|
...autoFocusProps,
|
|
@@ -61569,6 +61629,7 @@ const css$B = /* css */`.navi_picker {
|
|
|
61569
61629
|
--popover-background-color: var(--picker-popup-background-color, var(--navi-popup-background-color));
|
|
61570
61630
|
--popover-outline-width: var(--picker-outline-width);
|
|
61571
61631
|
--popover-outline-color: var(--picker-outline-color);
|
|
61632
|
+
--popover-box-shadow: var(--picker-popup-box-shadow, var(--navi-popup-box-shadow));
|
|
61572
61633
|
--popover-max-height: var(--picker-popover-max-height);
|
|
61573
61634
|
min-width: var(--picker-popover-min-width, var(--anchor-width, 0px));
|
|
61574
61635
|
cursor: default;
|
|
@@ -61605,6 +61666,7 @@ const css$B = /* css */`.navi_picker {
|
|
|
61605
61666
|
--dialog-background-color: var(--picker-popup-background-color, var(--navi-popup-background-color));
|
|
61606
61667
|
--dialog-outline-width: var(--picker-outline-width);
|
|
61607
61668
|
--dialog-outline-color: var(--picker-outline-color);
|
|
61669
|
+
--dialog-box-shadow: var(--picker-popup-box-shadow, var(--navi-popup-box-shadow));
|
|
61608
61670
|
--dialog-min-width: var(--picker-dialog-min-width);
|
|
61609
61671
|
--dialog-min-height: var(--picker-dialog-min-height);
|
|
61610
61672
|
--dialog-max-width: var(--picker-dialog-max-width);
|
|
@@ -61626,6 +61688,10 @@ const css$B = /* css */`.navi_picker {
|
|
|
61626
61688
|
}
|
|
61627
61689
|
}
|
|
61628
61690
|
}
|
|
61691
|
+
|
|
61692
|
+
&[data-dialog-size-from-anchor] .navi_dialog {
|
|
61693
|
+
--dialog-max-width: var(--picker-dialog-max-width, var(--anchor-width));
|
|
61694
|
+
}
|
|
61629
61695
|
}
|
|
61630
61696
|
|
|
61631
61697
|
&[data-popup-width-fit-content] {
|
|
@@ -61789,7 +61855,10 @@ const PickerCustom = props => {
|
|
|
61789
61855
|
// hands the popup that controller, and a controlled Dialog/Popover reads
|
|
61790
61856
|
// no onOpen/onClose of its own.
|
|
61791
61857
|
onOpen,
|
|
61792
|
-
onClose
|
|
61858
|
+
onClose,
|
|
61859
|
+
// What opens the popup — the press, or an interaction navi detects
|
|
61860
|
+
// ("longpress", "contextmenu"…, or a list of them). See the JSDoc.
|
|
61861
|
+
openOn = "press"
|
|
61793
61862
|
} = props;
|
|
61794
61863
|
// Resolve the id the same way useControlProps does (own id > Field's id > generated id)
|
|
61795
61864
|
// before computing popupId below, so two Pickers without an explicit id never collide.
|
|
@@ -61825,6 +61894,7 @@ const PickerCustom = props => {
|
|
|
61825
61894
|
delete pickerProps.onConfirm;
|
|
61826
61895
|
delete pickerProps.onOpen;
|
|
61827
61896
|
delete pickerProps.onClose;
|
|
61897
|
+
delete pickerProps.openOn;
|
|
61828
61898
|
// Read below for the popup alone; on the trigger it would land on the DOM as
|
|
61829
61899
|
// an unknown attribute holding a ref object.
|
|
61830
61900
|
delete pickerProps.anchor;
|
|
@@ -62222,7 +62292,29 @@ const PickerCustom = props => {
|
|
|
62222
62292
|
// could then never form. So the picker steps back and opens on the click,
|
|
62223
62293
|
// which the browser only delivers if the press stayed a press (a gesture
|
|
62224
62294
|
// swallows the click it leaves behind).
|
|
62225
|
-
|
|
62295
|
+
// Opening on something else than the press: the hold, the right click.
|
|
62296
|
+
// Declared on the picker itself, as the caller would declare their own,
|
|
62297
|
+
// so it is read and arbitrated like any other gesture — a swipe on the
|
|
62298
|
+
// same card takes the press a hold would have taken — and gated like one:
|
|
62299
|
+
// a read-only picker refuses it where the finger is. The press is then
|
|
62300
|
+
// nobody's: a tap on the card opens nothing (see the two reactions
|
|
62301
|
+
// below), and the keyboard keeps its own ways in (the shortcuts above).
|
|
62302
|
+
const openOnList = Array.isArray(openOn) ? openOn : [openOn];
|
|
62303
|
+
const opensOnPress = openOnList.includes("press");
|
|
62304
|
+
let interactions = props.interactions;
|
|
62305
|
+
if (!opensOnPress) {
|
|
62306
|
+
interactions = {
|
|
62307
|
+
...interactions
|
|
62308
|
+
};
|
|
62309
|
+
for (const type of openOnList) {
|
|
62310
|
+
interactions[type] = e => {
|
|
62311
|
+
requestOpen(e);
|
|
62312
|
+
};
|
|
62313
|
+
}
|
|
62314
|
+
pickerProps.interactions = interactions;
|
|
62315
|
+
pickerProps["data-open-on"] = openOnList.join(" ");
|
|
62316
|
+
}
|
|
62317
|
+
const interactionsDispute = interactionsDisputeThePress(interactions);
|
|
62226
62318
|
Object.assign(pickerProps, {
|
|
62227
62319
|
eventReactionDefinitions: {
|
|
62228
62320
|
mouseDown: e => {
|
|
@@ -62248,7 +62340,7 @@ const PickerCustom = props => {
|
|
|
62248
62340
|
// because that is where such a box says what it travels by — and
|
|
62249
62341
|
// asked at every press, since what the picker sits in is not the
|
|
62250
62342
|
// picker's to know at mount.
|
|
62251
|
-
if (interactionsDispute || isPressDisputedByDrag(e.target)) {
|
|
62343
|
+
if (!opensOnPress || interactionsDispute || isPressDisputedByDrag(e.target) || isPressDisputedByHold(ref.current)) {
|
|
62252
62344
|
return null;
|
|
62253
62345
|
}
|
|
62254
62346
|
return {
|
|
@@ -62265,6 +62357,11 @@ const PickerCustom = props => {
|
|
|
62265
62357
|
if (isWithinPickerContent(e.target)) {
|
|
62266
62358
|
return null;
|
|
62267
62359
|
}
|
|
62360
|
+
if (!opensOnPress) {
|
|
62361
|
+
// Neither the tap, nor the click a hold leaves behind: the press
|
|
62362
|
+
// is not what opens this picker.
|
|
62363
|
+
return null;
|
|
62364
|
+
}
|
|
62268
62365
|
// When a label is clicked it transfers focus to the select
|
|
62269
62366
|
// in that case we want to open it (otherwise we have already opened on mousedown interaction)
|
|
62270
62367
|
// And when a gesture disputes the press (see the two disputes
|
|
@@ -62293,6 +62390,13 @@ const PickerCustom = props => {
|
|
|
62293
62390
|
mode: mode
|
|
62294
62391
|
});
|
|
62295
62392
|
};
|
|
62393
|
+
|
|
62394
|
+
// A hold declared on something AROUND the picker (a card opened by
|
|
62395
|
+
// `openOn="longpress"`, holding this one in its drawing): the finger going
|
|
62396
|
+
// down may be the start of that hold, so this picker opens on the click — which
|
|
62397
|
+
// the hold, if it completes, swallows — rather than on the press. The picker's
|
|
62398
|
+
// own hold (its `openOn`) is not "around" it, and has already stepped back.
|
|
62399
|
+
const isPressDisputedByHold = pickerEl => Boolean(pickerEl?.parentElement?.closest(`[${LONGPRESS_ATTRIBUTE}]`));
|
|
62296
62400
|
const getPickerInput = pickerEl => {
|
|
62297
62401
|
return pickerEl.querySelector(".navi_picker_input");
|
|
62298
62402
|
};
|
|
@@ -62345,7 +62449,12 @@ const PickerContentInsidePopup = props => {
|
|
|
62345
62449
|
// itself, and this one does not. Popover ignores it, same as Dialog ignores
|
|
62346
62450
|
// marginWithAnchor.
|
|
62347
62451
|
dockedOnSmallTouchScreen,
|
|
62452
|
+
// Same again: the dialog takes the trigger's box as a floor (and, with
|
|
62453
|
+
// dialogMaxWidth="var(--anchor-width)", as a ceiling) — what keeps a card
|
|
62454
|
+
// its own width once lifted. Dialog's own `sizeFromAnchor`.
|
|
62455
|
+
dialogSizeFromAnchor,
|
|
62348
62456
|
animation,
|
|
62457
|
+
animationDuration,
|
|
62349
62458
|
// mode="callout": what the callout says about what it holds, and paints
|
|
62350
62459
|
// in its border and icon — "none" for a plain tooltip (see the callout
|
|
62351
62460
|
// defaults in PickerCustomResolver). And whether it wears a cross: without
|
|
@@ -62361,6 +62470,7 @@ const PickerContentInsidePopup = props => {
|
|
|
62361
62470
|
return jsx(Next, {
|
|
62362
62471
|
"aria-haspopup": isPopover ? "listbox" : "dialog",
|
|
62363
62472
|
"navi-popover-mode": isPopover ? popoverMode : undefined,
|
|
62473
|
+
"data-dialog-size-from-anchor": !isPopover && dialogSizeFromAnchor ? "" : undefined,
|
|
62364
62474
|
...rest,
|
|
62365
62475
|
// On popupProps already (see the picker's popup assembly); they mean
|
|
62366
62476
|
// nothing to the picker element.
|
|
@@ -62406,6 +62516,7 @@ const PickerContentInsidePopup = props => {
|
|
|
62406
62516
|
mode: mode,
|
|
62407
62517
|
layer: popupLayer,
|
|
62408
62518
|
animation: animation,
|
|
62519
|
+
animationDuration: animationDuration,
|
|
62409
62520
|
positionArea: isPopover ? positionArea ?? (popoverMode === "nearby" ? "bottom-start" : "inset(top-left)") : positionArea,
|
|
62410
62521
|
marginWithAnchor: isPopover ? popoverSpacing : undefined,
|
|
62411
62522
|
marginWithContainer: marginWithContainer === undefined && isPopover ? popoverSpacing : marginWithContainer,
|
|
@@ -62420,6 +62531,7 @@ const PickerContentInsidePopup = props => {
|
|
|
62420
62531
|
expandX: isPopover ? undefined : dialogExpandX,
|
|
62421
62532
|
expandY: isPopover ? undefined : dialogExpandY,
|
|
62422
62533
|
dockedOnSmallTouchScreen: isPopover ? undefined : dockedOnSmallTouchScreen,
|
|
62534
|
+
sizeFromAnchor: isPopover ? undefined : dialogSizeFromAnchor,
|
|
62423
62535
|
children: jsx(PopupModeContext.Provider, {
|
|
62424
62536
|
value: mode,
|
|
62425
62537
|
children: children
|
|
@@ -62700,6 +62812,34 @@ const pickerUIIsNaviOwn = ui => {
|
|
|
62700
62812
|
return Boolean(ui) && typeof ui === "object" && Boolean(ui.type?.isPickerOwnUI);
|
|
62701
62813
|
};
|
|
62702
62814
|
|
|
62815
|
+
/**
|
|
62816
|
+
* What the picker holds, read from inside its `ui` — for a drawing given as
|
|
62817
|
+
* an element (`ui={<MyCard game={game} />}`), which the picker cannot hand
|
|
62818
|
+
* props to. `value` is the state the picker holds right now: the answer the
|
|
62819
|
+
* popup just closed on, before the server has said anything, and put back if
|
|
62820
|
+
* the action fails. `loading` is the run in flight; `interactive` is false
|
|
62821
|
+
* while the picker is disabled, read-only or busy.
|
|
62822
|
+
*
|
|
62823
|
+
* @returns {{ value: any, loading: boolean, interactive: boolean } | null}
|
|
62824
|
+
* null outside a picker.
|
|
62825
|
+
*/
|
|
62826
|
+
const usePickerState = () => {
|
|
62827
|
+
const context = useContext(PickerContext);
|
|
62828
|
+
if (!context) {
|
|
62829
|
+
return null;
|
|
62830
|
+
}
|
|
62831
|
+
const {
|
|
62832
|
+
value,
|
|
62833
|
+
loading,
|
|
62834
|
+
interactive
|
|
62835
|
+
} = context;
|
|
62836
|
+
return {
|
|
62837
|
+
value,
|
|
62838
|
+
loading,
|
|
62839
|
+
interactive
|
|
62840
|
+
};
|
|
62841
|
+
};
|
|
62842
|
+
|
|
62703
62843
|
const PickerNaviMinute = props => {
|
|
62704
62844
|
const Next = useNextResolver();
|
|
62705
62845
|
const {
|
|
@@ -70379,6 +70519,21 @@ const css$t = /* css */`@layer navi {
|
|
|
70379
70519
|
}
|
|
70380
70520
|
}
|
|
70381
70521
|
|
|
70522
|
+
&[data-open-on~="longpress"] {
|
|
70523
|
+
-webkit-touch-callout: none;
|
|
70524
|
+
user-select: none;
|
|
70525
|
+
}
|
|
70526
|
+
|
|
70527
|
+
&[data-open-on] {
|
|
70528
|
+
& > .navi_picker_box > .navi_picker_input {
|
|
70529
|
+
pointer-events: none;
|
|
70530
|
+
}
|
|
70531
|
+
|
|
70532
|
+
& > .navi_picker_box > .navi_picker_value {
|
|
70533
|
+
pointer-events: auto;
|
|
70534
|
+
}
|
|
70535
|
+
}
|
|
70536
|
+
|
|
70382
70537
|
&[navi-ui-custom] {
|
|
70383
70538
|
& .navi_picker_input {
|
|
70384
70539
|
top: calc(-1 * (var(--picker-border-width) + var(--x-picker-press-padding-top)));
|
|
@@ -70704,12 +70859,15 @@ const PickerButton = props => {
|
|
|
70704
70859
|
// What the picker knows about itself, for the pieces it does not place: the
|
|
70705
70860
|
// drawings of its value (Picker.UI.*), and the affordances a caller may put
|
|
70706
70861
|
// in their own `ui` (Picker.Clear) as much as the ones it puts in its slot.
|
|
70862
|
+
// `ui={MyCard}`: a component the picker renders itself, told what it holds.
|
|
70863
|
+
const UIComponent = typeof ui === "function" ? ui : null;
|
|
70707
70864
|
const pickerContext = {
|
|
70708
70865
|
value,
|
|
70709
70866
|
placeholder,
|
|
70710
70867
|
maxLines,
|
|
70711
70868
|
id: inputProps.id,
|
|
70712
70869
|
interactive,
|
|
70870
|
+
loading,
|
|
70713
70871
|
clearConfirm
|
|
70714
70872
|
};
|
|
70715
70873
|
return (
|
|
@@ -70900,7 +71058,17 @@ const PickerButton = props => {
|
|
|
70900
71058
|
size: rightSlotIconSize,
|
|
70901
71059
|
lineOverflow: "allow",
|
|
70902
71060
|
children: rightSlotIcon === undefined ? jsx(ChevronDownSvg$1, {}) : rightSlotIcon
|
|
70903
|
-
}) : jsx(PickerDefaultUI, {}) :
|
|
71061
|
+
}) : jsx(PickerDefaultUI, {}) : UIComponent ?
|
|
71062
|
+
// Told what the picker HOLDS — the value it just closed
|
|
71063
|
+
// on, before the server has said anything — so a façade
|
|
71064
|
+
// shows the answer at once, and the wait with it. The
|
|
71065
|
+
// same state usePickerState() hands an element (see the
|
|
71066
|
+
// `ui` doc).
|
|
71067
|
+
jsx(UIComponent, {
|
|
71068
|
+
value: value,
|
|
71069
|
+
loading: loading,
|
|
71070
|
+
interactive: interactive
|
|
71071
|
+
}) : ui
|
|
70904
71072
|
})
|
|
70905
71073
|
})
|
|
70906
71074
|
}), hasRightSlot ? jsx("span", {
|
|
@@ -71192,6 +71360,7 @@ const PickerStyleCSSVars = {
|
|
|
71192
71360
|
"dialogMaxHeight": ["--picker-dialog-max-height", "maxHeight"],
|
|
71193
71361
|
"popupBackgroundColor": "--picker-popup-background-color",
|
|
71194
71362
|
"popupBorderRadius": ["--picker-popup-border-radius", "borderRadius"],
|
|
71363
|
+
"popupBoxShadow": ["--picker-popup-box-shadow", "boxShadow"],
|
|
71195
71364
|
"dialogBorderWidth": ["--picker-dialog-border-width", "borderWidth"],
|
|
71196
71365
|
"slotSpacing": ["--picker-slot-spacing", "margin"],
|
|
71197
71366
|
"pressPadding": ["--picker-press-padding", "padding"],
|
|
@@ -83213,5 +83382,5 @@ const UserSvg = () => jsx("svg", {
|
|
|
83213
83382
|
})
|
|
83214
83383
|
});
|
|
83215
83384
|
|
|
83216
|
-
export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, CalloutStatusIcon, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, ControlSwap, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, InfoSvg, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, OfflineError, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRange, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, constraintFromValidityRule, createAction, createAvailableConstraint, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, dispatchRequestSetUIState, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, getNowHours, getNowHoursRoundedToStep, isCellSelected, isColumnSelected, isOfflineError, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markAsOutsideTextFlow, markErrorAsDisplayedBy, moveArrayItemByIndex, moveFocusTo, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, preloadUrl, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setNetworkPolicy, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutElement, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useNetworkPolicyReason, useOrderedColumns, usePopupMode, useRouteStatus, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideContainer, useSlideValue, useStateArray, useTitleLevel, useTransitionCover, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
|
|
83385
|
+
export { ActionRenderer, ActiveKeyboardShortcuts, Address, Badge, BadgeCount, BadgeList, Binder, Box, Button, ButtonCopyToClipboard, CalloutStatusIcon, Caption, CardLayout, CheckSvg, CheckboxGroup, CloseSvg, Code, Col, Colgroup, Color, ConstructionSvg, ControlGroup, ControlSwap, DaySpin, Details, Dialog, Editable, ErrorBoundary, ErrorBoundaryContext, ExclamationSvg, Expandable, EyeClosedSvg, EyeSvg, Field, FixedBar, Form, Group, Head, HeartSvg, HomeSvg, Icon, Image, InfoSvg, Input, InputDuration, Interpolate, Label, Link, LinkAnchorSvg, LinkBlankTargetSvg, LinkCurrentSvg, List, ListItem, ListItemGroup, ListItems, Loading, LoadingDotsSvg, LoadingIndicator, LoadingIndicatorFluid, LoadingOutline, MessageBox, Meter, Nav, NaviDebug, NumberSpin, OfflineError, Paragraph, Picker, Popover, Popup, Quantity, RadioGroup, Route, RouteTransitionArea, RouteTravel, RowNumberCol, RowNumberTableCell, SVGMaskOverlay, SearchSvg, Select, SelectableInput, SelectionContext, Separator, SettingsSvg, SidePanel, Slide, SlideContainer, Spin, SpinGroup, SplitButton, StarSvg, Step, StepList, SummaryMarker, Svg, Table, TableCell, Tbody, Text, TextBox, Textarea, TextareaCharCount, Thead, Time, TimeRange, TimeRangeSpin, TimeRangeWheel, TimeSpin, TimeWheel, Title, Tr, UITransition, Unit, UserSvg, ViewportLayout, Wheel, WheelGroup, WheelItem, actionRunEffect, anyMatchingRouteSignal, applySearch, arraySignalMembership, canNavBackSignal, canNavForwardSignal, coarsePointerSignal, compareTwoJsValues, constraintFromValidityRule, createAction, createAvailableConstraint, createRequestCanceller, createSearch, createSelectionKeyboardShortcuts, createSlot, defineInteractionDetector, defineRouteDefaultTransition, defineRouteTransition, detectHorizontalOverflow, dispatchRequestSetUIState, enableDebugActions, enableDebugOnDocumentLoading, ensureDocumentStartViewTransition, errorIsDisplayed, filterTableSelection, getNowHours, getNowHoursRoundedToStep, isCellSelected, isColumnSelected, isOfflineError, isRowSelected, isScrolling, isToday, languagesSignal, localStorageSignal, markAsOutsideTextFlow, markErrorAsDisplayedBy, moveArrayItemByIndex, moveFocusTo, navBack, navForward, navIntegratedVia, navTo, naviI18n, openCallout, preloadUrl, rawUrlPart, registerGlobalConstraint, reload, rerunActions, resource, route, routeAction, scrollActivitySignal, setBaseUrl, setNetworkPolicy, setPreferredLanguage, setSupportedLanguages, setUrlTargetOptions, setupRoutes, smallTouchScreenSignal, stateSignal, stopLoad, stringifyTableSelectionValue, swapArrayItemByIndex, syncOwnedResourceToSignals, syncResourceToSignals, triggerNaviCommand, updateActions, useActionStatus, useArraySignalMembership, useAsyncData, useCalloutElement, useCalloutRequestClose, useCanNavBack, useCanNavForward, useCancelPrevious, useCellGridFromRows, useConstraintValidityState, useDependenciesDiff, useDisplayedLayoutEffect, useDocumentResource, useDocumentState, useDocumentUrl, useEditionController, useFocusGroup, useInputGroup, useKeyboardShortcuts, useNavState, useNetworkPolicyReason, useOrderedColumns, usePickerState, usePopupMode, useRouteStatus, useSearchText, useSelectableElement, useSelectionController, useSignalSync, useSlideContainer, useSlideValue, useStateArray, useTitleLevel, useTransitionCover, useUrlSearchParam, useUrlTargetId, valueInLocalStorage, windowWidthSignal };
|
|
83217
83386
|
//# sourceMappingURL=jsenv_navi.js.map
|