@jsenv/navi 0.29.298 → 0.29.299
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 +260 -241
- package/dist/dev/jsenv_navi.js.map +8 -8
- package/dist/jsenv_navi.js +260 -241
- package/dist/jsenv_navi.js.map +8 -8
- package/package.json +2 -1
package/dist/dev/jsenv_navi.js
CHANGED
|
@@ -48917,7 +48917,7 @@ const COMMAND_DEFAULT_PROPS_FACTORIES = {
|
|
|
48917
48917
|
* (it wears it itself) and loses the shrink under the finger, which has
|
|
48918
48918
|
* nothing left to scale but the interactive area itself.
|
|
48919
48919
|
*/
|
|
48920
|
-
const Button = createComponentResolver([ButtonFirstResolver, ButtonRouteResolver, ButtonCommandPropResolver, ButtonConfirmResolver, ButtonUI]);
|
|
48920
|
+
const Button = /*#__PURE__*/createComponentResolver([ButtonFirstResolver, ButtonRouteResolver, ButtonCommandPropResolver, ButtonConfirmResolver, ButtonUI]);
|
|
48921
48921
|
|
|
48922
48922
|
installImportMetaCssBuild(import.meta);
|
|
48923
48923
|
const css$O = /* css */`.navi_control_swap {
|
|
@@ -52288,7 +52288,7 @@ const InputTextualFirstResolver = props => {
|
|
|
52288
52288
|
...props
|
|
52289
52289
|
});
|
|
52290
52290
|
};
|
|
52291
|
-
const InputTextual = createComponentResolver([InputTextualAsTextResolver, InputTextualFirstResolver, InputWithListResolver, InputWithSuggestionsResolver, InputTypeResolver, InputModeResolver, InputHeadlessResolver, InputTextualUI]);
|
|
52291
|
+
const InputTextual = /*#__PURE__*/createComponentResolver([InputTextualAsTextResolver, InputTextualFirstResolver, InputWithListResolver, InputWithSuggestionsResolver, InputTypeResolver, InputModeResolver, InputHeadlessResolver, InputTextualUI]);
|
|
52292
52292
|
const RealInput = ({
|
|
52293
52293
|
maxLength,
|
|
52294
52294
|
...domProps
|
|
@@ -65890,209 +65890,6 @@ const ListFirstResolver = props => {
|
|
|
65890
65890
|
})
|
|
65891
65891
|
});
|
|
65892
65892
|
};
|
|
65893
|
-
|
|
65894
|
-
/**
|
|
65895
|
-
* List — generic virtualized scroll container.
|
|
65896
|
-
* Items must use <List.Item> to participate in tracking.
|
|
65897
|
-
*
|
|
65898
|
-
* @type {import("ignore:preact").FunctionComponent<{
|
|
65899
|
-
* selectable?: boolean,
|
|
65900
|
-
* multiple?: boolean,
|
|
65901
|
-
* deselectable?: boolean,
|
|
65902
|
-
* maxLength?: number,
|
|
65903
|
-
* maxLengthGuard?: number,
|
|
65904
|
-
* parallelGuard?: number,
|
|
65905
|
-
* standalone?: boolean,
|
|
65906
|
-
* action?: (value: any) => void,
|
|
65907
|
-
* uiAction?: (value: any) => void,
|
|
65908
|
-
* popover?: boolean,
|
|
65909
|
-
* role?: string,
|
|
65910
|
-
* renderBudget?: number | string,
|
|
65911
|
-
* renderBudgetSkipCheck?: boolean,
|
|
65912
|
-
* virtualItemSize?: number,
|
|
65913
|
-
* onListVisibleItemsChange?: (visibleItems: any[]) => void,
|
|
65914
|
-
* scrolled?: "start" | "end" | number | {id: string, offset?: number},
|
|
65915
|
-
* defaultScrolled?: "start" | "end" | number | {id: string, offset?: number},
|
|
65916
|
-
* onScrolledChange?: (scrolled: {id: string, index: number, offset: number}) => void,
|
|
65917
|
-
* scroller?: "self" | "parent" | "document" | Element | {current: Element},
|
|
65918
|
-
* hoverWhileScrolling?: boolean,
|
|
65919
|
-
* fallback?: import("ignore:preact").ComponentChildren,
|
|
65920
|
-
* searchFallback?: import("ignore:preact").ComponentChildren,
|
|
65921
|
-
* searchText?: string,
|
|
65922
|
-
* searchNoMatchMode?: "remove" | "invisible_and_inert" | "muted",
|
|
65923
|
-
* loading?: boolean,
|
|
65924
|
-
* loadingFallback?: "skeleton" | "loader" | import("ignore:preact").ComponentChildren,
|
|
65925
|
-
* loadingSkeletonCount?: number,
|
|
65926
|
-
* renderSkeleton?: false | ((index: number) => import("ignore:preact").ComponentChildren),
|
|
65927
|
-
* error?: boolean | import("ignore:preact").ComponentChildren,
|
|
65928
|
-
* separator?: boolean | import("ignore:preact").ComponentChildren,
|
|
65929
|
-
* itemTransition?: boolean,
|
|
65930
|
-
* lockSize?: boolean,
|
|
65931
|
-
* horizontal?: boolean,
|
|
65932
|
-
* spacing?: string,
|
|
65933
|
-
* columns?: string,
|
|
65934
|
-
* itemColumns?: string,
|
|
65935
|
-
* alignX?: string,
|
|
65936
|
-
* alignY?: string,
|
|
65937
|
-
* flexWrap?: boolean,
|
|
65938
|
-
* expandX?: boolean,
|
|
65939
|
-
* expandY?: boolean,
|
|
65940
|
-
* expand?: boolean,
|
|
65941
|
-
* children?: import("ignore:preact").ComponentChildren,
|
|
65942
|
-
* [key: string]: any,
|
|
65943
|
-
* }>}
|
|
65944
|
-
* @param {string} [props.columns]
|
|
65945
|
-
* The list's own columns: a `grid-template-columns` value the ITEMS are laid
|
|
65946
|
-
* into — a sheet of icons (`repeat(auto-fill, minmax(2.5rem, 1fr))`), a row of
|
|
65947
|
-
* choices (`repeat(3, minmax(0, 1fr))`). Each item takes one cell, and an item
|
|
65948
|
-
* meant to take a whole line says so for itself
|
|
65949
|
-
* (`style={{ gridColumn: "1 / -1" }}`). Several items to a line is a shape the
|
|
65950
|
-
* list cannot virtualize — its render window and the room it holds for the
|
|
65951
|
-
* rows it does not draw both count one item per line — so it is for a set of
|
|
65952
|
-
* items the caller renders whole, not for a `<List.Items>` collection.
|
|
65953
|
-
* @param {string} [props.itemColumns]
|
|
65954
|
-
* The columns inside an ITEM: a `grid-template-columns` value each item fills
|
|
65955
|
-
* with its own children, a table whose cells line up down the list. Every item
|
|
65956
|
-
* becomes a subgrid row spanning all the columns, so a column is as wide as
|
|
65957
|
-
* the widest cell in it among the rows actually in the DOM — real column
|
|
65958
|
-
* sizing that stays right as the window moves. Rows of a table, then, where
|
|
65959
|
-
* `columns` above is a grid of items; the two cannot both be set.
|
|
65960
|
-
* @param {string} [props.alignX]
|
|
65961
|
-
* Where the items sit across the track — `alignX="center"` centres a
|
|
65962
|
-
* horizontal list's row of items inside a list wider than they are. Together
|
|
65963
|
-
* with `alignY`, `align` and `flexWrap`, this reaches the `<ul>` holding the
|
|
65964
|
-
* items rather than the frame drawn around it: the frame's only child is the
|
|
65965
|
-
* scroll box, which fills it and has nothing to arrange.
|
|
65966
|
-
* @param {boolean} [props.flexWrap]
|
|
65967
|
-
* Lets a horizontal list's items fall to the next line instead of running
|
|
65968
|
-
* past the edge — a row of choices under a `maxWidth`, say. Same caveat as
|
|
65969
|
-
* `columns` above: a line holding several items is not virtualizable.
|
|
65970
|
-
* @param {string} [props.overflow]
|
|
65971
|
-
* `"visible"` lets the items paint outside the list — a check in a row's
|
|
65972
|
-
* corner, a badge crossing the edge. A list clips by default, which is what
|
|
65973
|
-
* its rounded corners and its scroll box need, and the two cannot both be
|
|
65974
|
-
* true: asking for visible gives up the clipping, corners included.
|
|
65975
|
-
* @param {boolean} [props.itemTransition]
|
|
65976
|
-
* Names each row, so a change the application wraps in
|
|
65977
|
-
* `document.startViewTransition` is seen row by row — rows moving to their new
|
|
65978
|
-
* place, an arriving row appearing where it lands — instead of the list
|
|
65979
|
-
* cross-fading as a block. The rows are drawn inside the list's own picture,
|
|
65980
|
-
* so one coming from outside the visible part of the list is cut at the list's
|
|
65981
|
-
* edge like any other overflow. Requires nested view transition groups
|
|
65982
|
-
* (Chrome/Edge 140+): elsewhere the rows are left unnamed and the change
|
|
65983
|
-
* simply happens — but the browser still names the document root, so the page
|
|
65984
|
-
* cross-fades as a whole unless the application says otherwise, which is its
|
|
65985
|
-
* call and not the list's:
|
|
65986
|
-
* ```css
|
|
65987
|
-
* @supports not (view-transition-group: contain) {
|
|
65988
|
-
* :root { view-transition-name: none; }
|
|
65989
|
-
* }
|
|
65990
|
-
* ```
|
|
65991
|
-
* @param {false|((index: number) => any)} [props.renderSkeleton]
|
|
65992
|
-
* What a row on its way looks like — a row of the shape the real ones will
|
|
65993
|
-
* have, so nothing moves when they arrive. Used for the rows a `<List.Items>`
|
|
65994
|
-
* stands for and does not hold yet, and for the placeholder rows drawn while
|
|
65995
|
-
* the whole list is `loading`. Defaults to a bare `<List.Item skeleton>`.
|
|
65996
|
-
* @param {"skeleton"|"loader"|import("ignore:preact").ComponentChildren} [props.loadingFallback="skeleton"]
|
|
65997
|
-
* What to display in place of the items while `loading` — that is, while
|
|
65998
|
-
* there is nothing to show at all: `"skeleton"` renders
|
|
65999
|
-
* `loadingSkeletonCount` placeholder rows (look:
|
|
66000
|
-
* `renderSkeleton`), `"loader"` a single centered spinner, and
|
|
66001
|
-
* anything else is rendered as-is in a row of its own. A falsy value
|
|
66002
|
-
* displays nothing. A list that knows how many rows it will have has no use
|
|
66003
|
-
* for this — see `<List.Items count>`, whose not-yet-loaded rows are drawn
|
|
66004
|
-
* as skeletons in place, one per row, virtualized like the rest.
|
|
66005
|
-
* @param {number} [props.loadingSkeletonCount=3]
|
|
66006
|
-
* How many placeholder rows `loadingFallback="skeleton"` draws. `0` says the
|
|
66007
|
-
* list is already known to be empty: the empty `fallback` shows right away
|
|
66008
|
-
* rather than an empty frame, so nothing moves when the response arrives.
|
|
66009
|
-
* @param {"start"|"end"|number|{id: string, offset?: number}} [props.defaultScrolled="start"]
|
|
66010
|
-
* Where the list opens, after which the user owns the scroll. `"end"` is a
|
|
66011
|
-
* thread read backwards — the last rows are the ones to show, and the ones
|
|
66012
|
-
* asked for first. A number opens on that row of the collection. `{id,
|
|
66013
|
-
* offset}` — what `onScrolledChange` hands out — opens on a NAMED row,
|
|
66014
|
-
* `offset` pixels below where the row would land on its own: the row is asked
|
|
66015
|
-
* for by name (see the range's own `around`), then put back by MEASURING it,
|
|
66016
|
-
* so it lands where it was even if rows were inserted before it, and whatever
|
|
66017
|
-
* the screen it was saved on. `offset: 0` is where a `scrollIntoView()` puts
|
|
66018
|
-
* it — in front of the fixed bar the scroller gives room for, below the
|
|
66019
|
-
* sticky header and the group label the row lives under — so nothing of that
|
|
66020
|
-
* room has to be restated as a number by whoever asks.
|
|
66021
|
-
* @param {"start"|"end"|number|{id: string, offset?: number}} [props.scrolled]
|
|
66022
|
-
* The same, but held: the list goes back there every time this changes, even
|
|
66023
|
-
* after the user has scrolled — the caller owns where the list is (see
|
|
66024
|
-
* `defaultScrolled` for the uncontrolled form, and `open`/`defaultOpen`
|
|
66025
|
-
* elsewhere in navi for the same pair). When the named row turns out not to
|
|
66026
|
-
* exist — a message deleted since — the list opens at `defaultScrolled`
|
|
66027
|
-
* instead.
|
|
66028
|
-
*
|
|
66029
|
-
* In every form the list holds itself there while it is still finding out
|
|
66030
|
-
* how many rows there are and how tall one is, and lets go the moment the
|
|
66031
|
-
* user reaches for the list.
|
|
66032
|
-
* @param {(scrolled: {id: string, index: number, offset: number}) => void} [props.onScrolledChange]
|
|
66033
|
-
* Where the list is, as the user scrolls: the row at the top of the view and
|
|
66034
|
-
* how far below the place a row lands on its own (see `defaultScrolled`) it
|
|
66035
|
-
* starts. Keep it to come back to it
|
|
66036
|
-
* later through `scrolled`/`defaultScrolled` — an index would not do, since
|
|
66037
|
-
* rows get inserted while a list is being read.
|
|
66038
|
-
* @param {"self"|"parent"|"document"|Element|{current: Element}} [props.scroller="self"]
|
|
66039
|
-
* Which box scrolls. `"self"` gives the list a scroll box of its own;
|
|
66040
|
-
* `"parent"` makes it virtualize against the scrollable ancestor it lives in
|
|
66041
|
-
* (the page, a panel) — no scroll box nested inside another one, no height
|
|
66042
|
-
* to compute.
|
|
66043
|
-
*
|
|
66044
|
-
* `"parent"` finds that ancestor by measuring: the nearest one whose content
|
|
66045
|
-
* actually overflows it, the page if none does. Declaring `overflow` is not
|
|
66046
|
-
* enough to be picked (a box with `overflow-x: auto` that grows with its
|
|
66047
|
-
* content computes `overflow-y: auto` without ever scrolling), and the
|
|
66048
|
-
* answer is taken again as the geometry moves, so an ancestor that starts to
|
|
66049
|
-
* scroll once it fills up is picked up then. When that is still not the box
|
|
66050
|
-
* you mean, say so: `"document"`, or the element itself (a ref works) —
|
|
66051
|
-
* nothing is guessed then.
|
|
66052
|
-
* @param {boolean} [props.hoverWhileScrolling=false]
|
|
66053
|
-
* Whether the rows still answer the pointer while the scroller they live in
|
|
66054
|
-
* is moving. They do not by default: a scroll slides the rows under a
|
|
66055
|
-
* motionless pointer, so the browser reports a hover on each of them, and
|
|
66056
|
-
* the user asked to scroll, not to hover. The cost of taking them at face
|
|
66057
|
-
* value is paid by whatever hover triggers — a highlight elsewhere in the
|
|
66058
|
-
* tree, a prefetch, a map — at the worst moment, mid-scroll.
|
|
66059
|
-
*
|
|
66060
|
-
* Pass `true` for a list whose rows must stay live under the pointer while
|
|
66061
|
-
* it scrolls. The trade of the default is the mirror one: right after a
|
|
66062
|
-
* scroll, the row under the pointer lights up only once the pointer moves.
|
|
66063
|
-
* @param {boolean} [props.deselectable]
|
|
66064
|
-
* A single-select list allowed to hold nothing: the selected row, pressed
|
|
66065
|
-
* again, lets go. Without it the list is a radio group — a choice, once
|
|
66066
|
-
* made, moves to another row but never goes away. A `multiple` list toggles
|
|
66067
|
-
* its rows already.
|
|
66068
|
-
* @param {number} [props.maxLength]
|
|
66069
|
-
* How many items a `selectable multiple` list accepts — the same word, and
|
|
66070
|
-
* the same behaviour, as `maxLength` on a text field: a rule the list is
|
|
66071
|
-
* judged against, not a wall. A longer selection is allowed to exist and is
|
|
66072
|
-
* reported as invalid, which is what lets a value coming from elsewhere (an
|
|
66073
|
-
* API, a URL) be shown and then corrected.
|
|
66074
|
-
* @param {number} [props.maxLengthGuard]
|
|
66075
|
-
* The same limit, enforced as the selection is made: while the list holds as
|
|
66076
|
-
* many items as it accepts, the ones not selected go read-only — still
|
|
66077
|
-
* pointable, focusable and pressable, answering `"[max] max."` instead of
|
|
66078
|
-
* taking — and `uiAction` is not called. The selected ones stay takeable
|
|
66079
|
-
* back, so a selection that arrived too long can always be brought back
|
|
66080
|
-
* under the limit. Implies `maxLength` for validity.
|
|
66081
|
-
* @param {number} [props.parallelGuard=4]
|
|
66082
|
-
* How many runs the rows may have in flight at once, for a list whose rows
|
|
66083
|
-
* carry their own `action` (a button per row). While that many are out, every
|
|
66084
|
-
* row that is not running goes read-only and says how many it is waiting on;
|
|
66085
|
-
* the next press is possible again as soon as one comes back. `Infinity`
|
|
66086
|
-
* lifts it. Counts runs, not values — `maxLengthGuard` above is the one that
|
|
66087
|
-
* says how many things the selection may hold.
|
|
66088
|
-
* @param {boolean} [props.standalone]
|
|
66089
|
-
* This list answers for itself: it does not register with the control group
|
|
66090
|
-
* or picker around it, so its selection stays out of that value and nothing
|
|
66091
|
-
* coming down — a distributed value, a reset — reaches it. What a popup whose
|
|
66092
|
-
* one answer is spread over several lists says, so that none of them is taken
|
|
66093
|
-
* for the answer itself.
|
|
66094
|
-
*/
|
|
66095
|
-
const List = createComponentResolver([ListFirstResolver, ListSelectableResolver, ListUI]);
|
|
66096
65893
|
const ListContent = ({
|
|
66097
65894
|
role,
|
|
66098
65895
|
fallback,
|
|
@@ -68358,14 +68155,13 @@ const LIST_ITEM_STYLE_CSS_VARS = {
|
|
|
68358
68155
|
* search-driven scroll-to-top-match behavior. `matchRanges` are [start, end]
|
|
68359
68156
|
* ranges highlighted via the CSS Highlight API.
|
|
68360
68157
|
*/
|
|
68361
|
-
const ListItem = createComponentResolver([ListItemFirstResolver, ListItemRowResolver, ListItemSkeletonResolver, ListItemSelectableResolver, ListItemHeaderOrFooterResolver, ListItemPresentationResolver, ListItemUI],
|
|
68158
|
+
const ListItem = /*#__PURE__*/createComponentResolver([ListItemFirstResolver, ListItemRowResolver, ListItemSkeletonResolver, ListItemSelectableResolver, ListItemHeaderOrFooterResolver, ListItemPresentationResolver, ListItemUI],
|
|
68362
68159
|
// Rendered by the hundred, and almost always with the same primitive props:
|
|
68363
68160
|
// a selection change re-renders the list, and every row but two has nothing
|
|
68364
68161
|
// to change.
|
|
68365
68162
|
{
|
|
68366
68163
|
pure: true
|
|
68367
68164
|
});
|
|
68368
|
-
List.Item = ListItem;
|
|
68369
68165
|
|
|
68370
68166
|
// Everything the list knows about the collection while its children are being
|
|
68371
68167
|
// rendered: how many rows it has in total, which of them are actually held, and
|
|
@@ -69125,7 +68921,6 @@ const ListItems = ({
|
|
|
69125
68921
|
}
|
|
69126
68922
|
return rows;
|
|
69127
68923
|
};
|
|
69128
|
-
List.Items = ListItems;
|
|
69129
68924
|
|
|
69130
68925
|
// What is drawn where rows were asked for and never came: the sentence and the
|
|
69131
68926
|
// way out, in the row itself — the rest of the list is fine, so replacing all
|
|
@@ -69735,6 +69530,219 @@ const resolveSeparatorVnode = (separator, gapIndex) => {
|
|
|
69735
69530
|
}
|
|
69736
69531
|
return separator;
|
|
69737
69532
|
};
|
|
69533
|
+
const ListResolved = /*#__PURE__*/createComponentResolver([ListFirstResolver, ListSelectableResolver, ListUI]);
|
|
69534
|
+
|
|
69535
|
+
// Declared last because Item and Items are consts defined above, and they are
|
|
69536
|
+
// folded into the declaration rather than written onto List afterwards
|
|
69537
|
+
// (`List.Item = ListItem`): List is what createComponentResolver returns, an
|
|
69538
|
+
// object a bundler cannot see through, so a property assigned to it later is a
|
|
69539
|
+
// side effect it has to keep — and with it List, its rows and everything they
|
|
69540
|
+
// import, in a bundle that never renders a list. See Picker for the same shape.
|
|
69541
|
+
/**
|
|
69542
|
+
* List — generic virtualized scroll container.
|
|
69543
|
+
* Items must use <List.Item> to participate in tracking.
|
|
69544
|
+
*
|
|
69545
|
+
* @type {import("ignore:preact").FunctionComponent<{
|
|
69546
|
+
* selectable?: boolean,
|
|
69547
|
+
* multiple?: boolean,
|
|
69548
|
+
* deselectable?: boolean,
|
|
69549
|
+
* maxLength?: number,
|
|
69550
|
+
* maxLengthGuard?: number,
|
|
69551
|
+
* parallelGuard?: number,
|
|
69552
|
+
* standalone?: boolean,
|
|
69553
|
+
* action?: (value: any) => void,
|
|
69554
|
+
* uiAction?: (value: any) => void,
|
|
69555
|
+
* popover?: boolean,
|
|
69556
|
+
* role?: string,
|
|
69557
|
+
* renderBudget?: number | string,
|
|
69558
|
+
* renderBudgetSkipCheck?: boolean,
|
|
69559
|
+
* virtualItemSize?: number,
|
|
69560
|
+
* onListVisibleItemsChange?: (visibleItems: any[]) => void,
|
|
69561
|
+
* scrolled?: "start" | "end" | number | {id: string, offset?: number},
|
|
69562
|
+
* defaultScrolled?: "start" | "end" | number | {id: string, offset?: number},
|
|
69563
|
+
* onScrolledChange?: (scrolled: {id: string, index: number, offset: number}) => void,
|
|
69564
|
+
* scroller?: "self" | "parent" | "document" | Element | {current: Element},
|
|
69565
|
+
* hoverWhileScrolling?: boolean,
|
|
69566
|
+
* fallback?: import("ignore:preact").ComponentChildren,
|
|
69567
|
+
* searchFallback?: import("ignore:preact").ComponentChildren,
|
|
69568
|
+
* searchText?: string,
|
|
69569
|
+
* searchNoMatchMode?: "remove" | "invisible_and_inert" | "muted",
|
|
69570
|
+
* loading?: boolean,
|
|
69571
|
+
* loadingFallback?: "skeleton" | "loader" | import("ignore:preact").ComponentChildren,
|
|
69572
|
+
* loadingSkeletonCount?: number,
|
|
69573
|
+
* renderSkeleton?: false | ((index: number) => import("ignore:preact").ComponentChildren),
|
|
69574
|
+
* error?: boolean | import("ignore:preact").ComponentChildren,
|
|
69575
|
+
* separator?: boolean | import("ignore:preact").ComponentChildren,
|
|
69576
|
+
* itemTransition?: boolean,
|
|
69577
|
+
* lockSize?: boolean,
|
|
69578
|
+
* horizontal?: boolean,
|
|
69579
|
+
* spacing?: string,
|
|
69580
|
+
* columns?: string,
|
|
69581
|
+
* itemColumns?: string,
|
|
69582
|
+
* alignX?: string,
|
|
69583
|
+
* alignY?: string,
|
|
69584
|
+
* flexWrap?: boolean,
|
|
69585
|
+
* expandX?: boolean,
|
|
69586
|
+
* expandY?: boolean,
|
|
69587
|
+
* expand?: boolean,
|
|
69588
|
+
* children?: import("ignore:preact").ComponentChildren,
|
|
69589
|
+
* [key: string]: any,
|
|
69590
|
+
* }>}
|
|
69591
|
+
* @param {string} [props.columns]
|
|
69592
|
+
* The list's own columns: a `grid-template-columns` value the ITEMS are laid
|
|
69593
|
+
* into — a sheet of icons (`repeat(auto-fill, minmax(2.5rem, 1fr))`), a row of
|
|
69594
|
+
* choices (`repeat(3, minmax(0, 1fr))`). Each item takes one cell, and an item
|
|
69595
|
+
* meant to take a whole line says so for itself
|
|
69596
|
+
* (`style={{ gridColumn: "1 / -1" }}`). Several items to a line is a shape the
|
|
69597
|
+
* list cannot virtualize — its render window and the room it holds for the
|
|
69598
|
+
* rows it does not draw both count one item per line — so it is for a set of
|
|
69599
|
+
* items the caller renders whole, not for a `<List.Items>` collection.
|
|
69600
|
+
* @param {string} [props.itemColumns]
|
|
69601
|
+
* The columns inside an ITEM: a `grid-template-columns` value each item fills
|
|
69602
|
+
* with its own children, a table whose cells line up down the list. Every item
|
|
69603
|
+
* becomes a subgrid row spanning all the columns, so a column is as wide as
|
|
69604
|
+
* the widest cell in it among the rows actually in the DOM — real column
|
|
69605
|
+
* sizing that stays right as the window moves. Rows of a table, then, where
|
|
69606
|
+
* `columns` above is a grid of items; the two cannot both be set.
|
|
69607
|
+
* @param {string} [props.alignX]
|
|
69608
|
+
* Where the items sit across the track — `alignX="center"` centres a
|
|
69609
|
+
* horizontal list's row of items inside a list wider than they are. Together
|
|
69610
|
+
* with `alignY`, `align` and `flexWrap`, this reaches the `<ul>` holding the
|
|
69611
|
+
* items rather than the frame drawn around it: the frame's only child is the
|
|
69612
|
+
* scroll box, which fills it and has nothing to arrange.
|
|
69613
|
+
* @param {boolean} [props.flexWrap]
|
|
69614
|
+
* Lets a horizontal list's items fall to the next line instead of running
|
|
69615
|
+
* past the edge — a row of choices under a `maxWidth`, say. Same caveat as
|
|
69616
|
+
* `columns` above: a line holding several items is not virtualizable.
|
|
69617
|
+
* @param {string} [props.overflow]
|
|
69618
|
+
* `"visible"` lets the items paint outside the list — a check in a row's
|
|
69619
|
+
* corner, a badge crossing the edge. A list clips by default, which is what
|
|
69620
|
+
* its rounded corners and its scroll box need, and the two cannot both be
|
|
69621
|
+
* true: asking for visible gives up the clipping, corners included.
|
|
69622
|
+
* @param {boolean} [props.itemTransition]
|
|
69623
|
+
* Names each row, so a change the application wraps in
|
|
69624
|
+
* `document.startViewTransition` is seen row by row — rows moving to their new
|
|
69625
|
+
* place, an arriving row appearing where it lands — instead of the list
|
|
69626
|
+
* cross-fading as a block. The rows are drawn inside the list's own picture,
|
|
69627
|
+
* so one coming from outside the visible part of the list is cut at the list's
|
|
69628
|
+
* edge like any other overflow. Requires nested view transition groups
|
|
69629
|
+
* (Chrome/Edge 140+): elsewhere the rows are left unnamed and the change
|
|
69630
|
+
* simply happens — but the browser still names the document root, so the page
|
|
69631
|
+
* cross-fades as a whole unless the application says otherwise, which is its
|
|
69632
|
+
* call and not the list's:
|
|
69633
|
+
* ```css
|
|
69634
|
+
* @supports not (view-transition-group: contain) {
|
|
69635
|
+
* :root { view-transition-name: none; }
|
|
69636
|
+
* }
|
|
69637
|
+
* ```
|
|
69638
|
+
* @param {false|((index: number) => any)} [props.renderSkeleton]
|
|
69639
|
+
* What a row on its way looks like — a row of the shape the real ones will
|
|
69640
|
+
* have, so nothing moves when they arrive. Used for the rows a `<List.Items>`
|
|
69641
|
+
* stands for and does not hold yet, and for the placeholder rows drawn while
|
|
69642
|
+
* the whole list is `loading`. Defaults to a bare `<List.Item skeleton>`.
|
|
69643
|
+
* @param {"skeleton"|"loader"|import("ignore:preact").ComponentChildren} [props.loadingFallback="skeleton"]
|
|
69644
|
+
* What to display in place of the items while `loading` — that is, while
|
|
69645
|
+
* there is nothing to show at all: `"skeleton"` renders
|
|
69646
|
+
* `loadingSkeletonCount` placeholder rows (look:
|
|
69647
|
+
* `renderSkeleton`), `"loader"` a single centered spinner, and
|
|
69648
|
+
* anything else is rendered as-is in a row of its own. A falsy value
|
|
69649
|
+
* displays nothing. A list that knows how many rows it will have has no use
|
|
69650
|
+
* for this — see `<List.Items count>`, whose not-yet-loaded rows are drawn
|
|
69651
|
+
* as skeletons in place, one per row, virtualized like the rest.
|
|
69652
|
+
* @param {number} [props.loadingSkeletonCount=3]
|
|
69653
|
+
* How many placeholder rows `loadingFallback="skeleton"` draws. `0` says the
|
|
69654
|
+
* list is already known to be empty: the empty `fallback` shows right away
|
|
69655
|
+
* rather than an empty frame, so nothing moves when the response arrives.
|
|
69656
|
+
* @param {"start"|"end"|number|{id: string, offset?: number}} [props.defaultScrolled="start"]
|
|
69657
|
+
* Where the list opens, after which the user owns the scroll. `"end"` is a
|
|
69658
|
+
* thread read backwards — the last rows are the ones to show, and the ones
|
|
69659
|
+
* asked for first. A number opens on that row of the collection. `{id,
|
|
69660
|
+
* offset}` — what `onScrolledChange` hands out — opens on a NAMED row,
|
|
69661
|
+
* `offset` pixels below where the row would land on its own: the row is asked
|
|
69662
|
+
* for by name (see the range's own `around`), then put back by MEASURING it,
|
|
69663
|
+
* so it lands where it was even if rows were inserted before it, and whatever
|
|
69664
|
+
* the screen it was saved on. `offset: 0` is where a `scrollIntoView()` puts
|
|
69665
|
+
* it — in front of the fixed bar the scroller gives room for, below the
|
|
69666
|
+
* sticky header and the group label the row lives under — so nothing of that
|
|
69667
|
+
* room has to be restated as a number by whoever asks.
|
|
69668
|
+
* @param {"start"|"end"|number|{id: string, offset?: number}} [props.scrolled]
|
|
69669
|
+
* The same, but held: the list goes back there every time this changes, even
|
|
69670
|
+
* after the user has scrolled — the caller owns where the list is (see
|
|
69671
|
+
* `defaultScrolled` for the uncontrolled form, and `open`/`defaultOpen`
|
|
69672
|
+
* elsewhere in navi for the same pair). When the named row turns out not to
|
|
69673
|
+
* exist — a message deleted since — the list opens at `defaultScrolled`
|
|
69674
|
+
* instead.
|
|
69675
|
+
*
|
|
69676
|
+
* In every form the list holds itself there while it is still finding out
|
|
69677
|
+
* how many rows there are and how tall one is, and lets go the moment the
|
|
69678
|
+
* user reaches for the list.
|
|
69679
|
+
* @param {(scrolled: {id: string, index: number, offset: number}) => void} [props.onScrolledChange]
|
|
69680
|
+
* Where the list is, as the user scrolls: the row at the top of the view and
|
|
69681
|
+
* how far below the place a row lands on its own (see `defaultScrolled`) it
|
|
69682
|
+
* starts. Keep it to come back to it
|
|
69683
|
+
* later through `scrolled`/`defaultScrolled` — an index would not do, since
|
|
69684
|
+
* rows get inserted while a list is being read.
|
|
69685
|
+
* @param {"self"|"parent"|"document"|Element|{current: Element}} [props.scroller="self"]
|
|
69686
|
+
* Which box scrolls. `"self"` gives the list a scroll box of its own;
|
|
69687
|
+
* `"parent"` makes it virtualize against the scrollable ancestor it lives in
|
|
69688
|
+
* (the page, a panel) — no scroll box nested inside another one, no height
|
|
69689
|
+
* to compute.
|
|
69690
|
+
*
|
|
69691
|
+
* `"parent"` finds that ancestor by measuring: the nearest one whose content
|
|
69692
|
+
* actually overflows it, the page if none does. Declaring `overflow` is not
|
|
69693
|
+
* enough to be picked (a box with `overflow-x: auto` that grows with its
|
|
69694
|
+
* content computes `overflow-y: auto` without ever scrolling), and the
|
|
69695
|
+
* answer is taken again as the geometry moves, so an ancestor that starts to
|
|
69696
|
+
* scroll once it fills up is picked up then. When that is still not the box
|
|
69697
|
+
* you mean, say so: `"document"`, or the element itself (a ref works) —
|
|
69698
|
+
* nothing is guessed then.
|
|
69699
|
+
* @param {boolean} [props.hoverWhileScrolling=false]
|
|
69700
|
+
* Whether the rows still answer the pointer while the scroller they live in
|
|
69701
|
+
* is moving. They do not by default: a scroll slides the rows under a
|
|
69702
|
+
* motionless pointer, so the browser reports a hover on each of them, and
|
|
69703
|
+
* the user asked to scroll, not to hover. The cost of taking them at face
|
|
69704
|
+
* value is paid by whatever hover triggers — a highlight elsewhere in the
|
|
69705
|
+
* tree, a prefetch, a map — at the worst moment, mid-scroll.
|
|
69706
|
+
*
|
|
69707
|
+
* Pass `true` for a list whose rows must stay live under the pointer while
|
|
69708
|
+
* it scrolls. The trade of the default is the mirror one: right after a
|
|
69709
|
+
* scroll, the row under the pointer lights up only once the pointer moves.
|
|
69710
|
+
* @param {boolean} [props.deselectable]
|
|
69711
|
+
* A single-select list allowed to hold nothing: the selected row, pressed
|
|
69712
|
+
* again, lets go. Without it the list is a radio group — a choice, once
|
|
69713
|
+
* made, moves to another row but never goes away. A `multiple` list toggles
|
|
69714
|
+
* its rows already.
|
|
69715
|
+
* @param {number} [props.maxLength]
|
|
69716
|
+
* How many items a `selectable multiple` list accepts — the same word, and
|
|
69717
|
+
* the same behaviour, as `maxLength` on a text field: a rule the list is
|
|
69718
|
+
* judged against, not a wall. A longer selection is allowed to exist and is
|
|
69719
|
+
* reported as invalid, which is what lets a value coming from elsewhere (an
|
|
69720
|
+
* API, a URL) be shown and then corrected.
|
|
69721
|
+
* @param {number} [props.maxLengthGuard]
|
|
69722
|
+
* The same limit, enforced as the selection is made: while the list holds as
|
|
69723
|
+
* many items as it accepts, the ones not selected go read-only — still
|
|
69724
|
+
* pointable, focusable and pressable, answering `"[max] max."` instead of
|
|
69725
|
+
* taking — and `uiAction` is not called. The selected ones stay takeable
|
|
69726
|
+
* back, so a selection that arrived too long can always be brought back
|
|
69727
|
+
* under the limit. Implies `maxLength` for validity.
|
|
69728
|
+
* @param {number} [props.parallelGuard=4]
|
|
69729
|
+
* How many runs the rows may have in flight at once, for a list whose rows
|
|
69730
|
+
* carry their own `action` (a button per row). While that many are out, every
|
|
69731
|
+
* row that is not running goes read-only and says how many it is waiting on;
|
|
69732
|
+
* the next press is possible again as soon as one comes back. `Infinity`
|
|
69733
|
+
* lifts it. Counts runs, not values — `maxLengthGuard` above is the one that
|
|
69734
|
+
* says how many things the selection may hold.
|
|
69735
|
+
* @param {boolean} [props.standalone]
|
|
69736
|
+
* This list answers for itself: it does not register with the control group
|
|
69737
|
+
* or picker around it, so its selection stays out of that value and nothing
|
|
69738
|
+
* coming down — a distributed value, a reset — reaches it. What a popup whose
|
|
69739
|
+
* one answer is spread over several lists says, so that none of them is taken
|
|
69740
|
+
* for the answer itself.
|
|
69741
|
+
*/
|
|
69742
|
+
const List = /*#__PURE__*/Object.assign(ListResolved, {
|
|
69743
|
+
Item: ListItem,
|
|
69744
|
+
Items: ListItems
|
|
69745
|
+
});
|
|
69738
69746
|
|
|
69739
69747
|
const PickerNaviTime = props => {
|
|
69740
69748
|
const Next = useNextResolver();
|
|
@@ -70667,7 +70675,7 @@ const PickerObject = props => {
|
|
|
70667
70675
|
"navi-state-shape": "object"
|
|
70668
70676
|
});
|
|
70669
70677
|
};
|
|
70670
|
-
const PickerObjectUI = asPickerOwnUI(() => {
|
|
70678
|
+
const PickerObjectUI = /*#__PURE__*/asPickerOwnUI(() => {
|
|
70671
70679
|
const {
|
|
70672
70680
|
value,
|
|
70673
70681
|
placeholder
|
|
@@ -70702,7 +70710,7 @@ const PickerArray = props => {
|
|
|
70702
70710
|
"navi-state-shape": "array"
|
|
70703
70711
|
});
|
|
70704
70712
|
};
|
|
70705
|
-
const PickerArrayUI = asPickerOwnUI(() => {
|
|
70713
|
+
const PickerArrayUI = /*#__PURE__*/asPickerOwnUI(() => {
|
|
70706
70714
|
const {
|
|
70707
70715
|
value,
|
|
70708
70716
|
placeholder,
|
|
@@ -70785,7 +70793,7 @@ const PickerColor = props => {
|
|
|
70785
70793
|
...props
|
|
70786
70794
|
});
|
|
70787
70795
|
};
|
|
70788
|
-
const PickerColorUI = asPickerOwnUI(() => {
|
|
70796
|
+
const PickerColorUI = /*#__PURE__*/asPickerOwnUI(() => {
|
|
70789
70797
|
const {
|
|
70790
70798
|
value,
|
|
70791
70799
|
placeholder
|
|
@@ -70809,7 +70817,7 @@ const PickerDate = props => {
|
|
|
70809
70817
|
type: "date"
|
|
70810
70818
|
});
|
|
70811
70819
|
};
|
|
70812
|
-
const PickerDateUI = asPickerOwnUI(props => {
|
|
70820
|
+
const PickerDateUI = /*#__PURE__*/asPickerOwnUI(props => {
|
|
70813
70821
|
const {
|
|
70814
70822
|
value,
|
|
70815
70823
|
placeholder
|
|
@@ -70841,7 +70849,7 @@ const PickerMonth = props => {
|
|
|
70841
70849
|
type: "month"
|
|
70842
70850
|
});
|
|
70843
70851
|
};
|
|
70844
|
-
const PickerMonthUI = asPickerOwnUI(props => {
|
|
70852
|
+
const PickerMonthUI = /*#__PURE__*/asPickerOwnUI(props => {
|
|
70845
70853
|
const {
|
|
70846
70854
|
value,
|
|
70847
70855
|
placeholder
|
|
@@ -70872,7 +70880,7 @@ const PickerWeek = props => {
|
|
|
70872
70880
|
type: "week"
|
|
70873
70881
|
});
|
|
70874
70882
|
};
|
|
70875
|
-
const PickerWeekUI = asPickerOwnUI(props => {
|
|
70883
|
+
const PickerWeekUI = /*#__PURE__*/asPickerOwnUI(props => {
|
|
70876
70884
|
const {
|
|
70877
70885
|
value,
|
|
70878
70886
|
placeholder
|
|
@@ -70903,7 +70911,7 @@ const PickerTime = props => {
|
|
|
70903
70911
|
type: "time"
|
|
70904
70912
|
});
|
|
70905
70913
|
};
|
|
70906
|
-
const PickerTimeUI = asPickerOwnUI(props => {
|
|
70914
|
+
const PickerTimeUI = /*#__PURE__*/asPickerOwnUI(props => {
|
|
70907
70915
|
const {
|
|
70908
70916
|
value,
|
|
70909
70917
|
placeholder
|
|
@@ -70934,7 +70942,7 @@ const PickerDuration = props => {
|
|
|
70934
70942
|
"navi-input-type": "duration"
|
|
70935
70943
|
});
|
|
70936
70944
|
};
|
|
70937
|
-
const PickerDurationUI = asPickerOwnUI(props => {
|
|
70945
|
+
const PickerDurationUI = /*#__PURE__*/asPickerOwnUI(props => {
|
|
70938
70946
|
const {
|
|
70939
70947
|
value,
|
|
70940
70948
|
placeholder
|
|
@@ -70964,7 +70972,7 @@ const PickerDatetime = props => {
|
|
|
70964
70972
|
type: "datetime-local"
|
|
70965
70973
|
});
|
|
70966
70974
|
};
|
|
70967
|
-
const PickerDatetimeUI = asPickerOwnUI(props => {
|
|
70975
|
+
const PickerDatetimeUI = /*#__PURE__*/asPickerOwnUI(props => {
|
|
70968
70976
|
const {
|
|
70969
70977
|
value,
|
|
70970
70978
|
placeholder
|
|
@@ -70993,7 +71001,7 @@ const PickerFile = props => {
|
|
|
70993
71001
|
...props
|
|
70994
71002
|
});
|
|
70995
71003
|
};
|
|
70996
|
-
const PickerFileUI = asPickerOwnUI(() => {
|
|
71004
|
+
const PickerFileUI = /*#__PURE__*/asPickerOwnUI(() => {
|
|
70997
71005
|
const {
|
|
70998
71006
|
value,
|
|
70999
71007
|
placeholder
|
|
@@ -72549,26 +72557,37 @@ const warnOnUnknownPickerType = props => {
|
|
|
72549
72557
|
pickerTypeWarnedSet.add(type);
|
|
72550
72558
|
console.warn(`[navi] <Picker type="${type}"> — "${type}" is not a picker type. ` + `The picker holds a single text value instead, so an object given to it is written as "[object Object]". ` + `Types are: date, month, week, time, datetime, duration, color, file, text, array, object, confirm — ` + `"object" being the one for a popup holding several named controls.`);
|
|
72551
72559
|
};
|
|
72552
|
-
const
|
|
72553
|
-
|
|
72554
|
-
|
|
72555
|
-
|
|
72556
|
-
|
|
72557
|
-
|
|
72558
|
-
|
|
72559
|
-
|
|
72560
|
-
|
|
72561
|
-
|
|
72562
|
-
|
|
72563
|
-
|
|
72564
|
-
|
|
72565
|
-
|
|
72566
|
-
|
|
72567
|
-
|
|
72568
|
-
|
|
72569
|
-
|
|
72570
|
-
|
|
72571
|
-
|
|
72560
|
+
const PickerResolved = /*#__PURE__*/createComponentResolver([PickerFirstResolver, PickerPresetResolver, PickerConfirmResolver, PickerCustomResolver, PickerTypeResolver, PickerButton]);
|
|
72561
|
+
const PickerUI = /*#__PURE__*/Object.assign(PickerDefaultUI, {
|
|
72562
|
+
Date: PickerDateUI,
|
|
72563
|
+
Time: PickerTimeUI,
|
|
72564
|
+
Duration: PickerDurationUI,
|
|
72565
|
+
Week: PickerWeekUI,
|
|
72566
|
+
Datetime: PickerDatetimeUI,
|
|
72567
|
+
File: PickerFileUI,
|
|
72568
|
+
Color: PickerColorUI,
|
|
72569
|
+
Object: PickerObjectUI,
|
|
72570
|
+
Multiple: PickerArrayUI,
|
|
72571
|
+
PencilSvg,
|
|
72572
|
+
ChevronDownSvg: ChevronDownSvg$1,
|
|
72573
|
+
ClockSvg,
|
|
72574
|
+
DurationSvg,
|
|
72575
|
+
CalendarSvg,
|
|
72576
|
+
FileSvg,
|
|
72577
|
+
ColorSvg
|
|
72578
|
+
});
|
|
72579
|
+
|
|
72580
|
+
// Assembled in pure expressions rather than written onto Picker afterwards
|
|
72581
|
+
// (`Picker.Chip = PickerChip`): what createComponentResolver returns is an object
|
|
72582
|
+
// a bundler cannot see through, so a property assigned to it later is a side
|
|
72583
|
+
// effect it has to keep — and with it Picker, every UI and everything they
|
|
72584
|
+
// import, in a bundle that never renders a picker. The annotations say these
|
|
72585
|
+
// calls only create and return; an unused Picker then disappears whole.
|
|
72586
|
+
const Picker = /*#__PURE__*/Object.assign(PickerResolved, {
|
|
72587
|
+
Chip: PickerChip,
|
|
72588
|
+
Clear: PickerClear,
|
|
72589
|
+
UI: PickerUI
|
|
72590
|
+
});
|
|
72572
72591
|
|
|
72573
72592
|
installImportMetaCssBuild(import.meta);
|
|
72574
72593
|
const css$s = /* css */`@layer navi {
|
|
@@ -78548,7 +78567,7 @@ const useTableDragContextValue = ({
|
|
|
78548
78567
|
};
|
|
78549
78568
|
}, [grabTarget, canChangeColumnOrder]);
|
|
78550
78569
|
};
|
|
78551
|
-
const TableDragCloneContainer = forwardRef((props, ref) => {
|
|
78570
|
+
const TableDragCloneContainer = /*#__PURE__*/forwardRef((props, ref) => {
|
|
78552
78571
|
import.meta.css = [css$k, "@jsenv/navi/src/control/table/drag/table_drag.jsx"];
|
|
78553
78572
|
const {
|
|
78554
78573
|
tableId
|
|
@@ -78559,7 +78578,7 @@ const TableDragCloneContainer = forwardRef((props, ref) => {
|
|
|
78559
78578
|
"data-overlay-for": tableId
|
|
78560
78579
|
});
|
|
78561
78580
|
});
|
|
78562
|
-
const TableColumnDropPreview = forwardRef((props, ref) => {
|
|
78581
|
+
const TableColumnDropPreview = /*#__PURE__*/forwardRef((props, ref) => {
|
|
78563
78582
|
return jsxs("div", {
|
|
78564
78583
|
ref: ref,
|
|
78565
78584
|
className: "navi_table_column_drop_preview",
|
|
@@ -80655,7 +80674,7 @@ const css$f = /* css */`.navi_table_ui {
|
|
|
80655
80674
|
overflow: hidden;
|
|
80656
80675
|
}
|
|
80657
80676
|
`;
|
|
80658
|
-
const TableUI = forwardRef((props, ref) => {
|
|
80677
|
+
const TableUI = /*#__PURE__*/forwardRef((props, ref) => {
|
|
80659
80678
|
import.meta.css = [css$f, "@jsenv/navi/src/control/table/table_ui.jsx"];
|
|
80660
80679
|
const {
|
|
80661
80680
|
tableRef,
|