@k2b/ui 0.45.0 → 0.46.0

package/dist/browser/content/FileGrid.js

@@ -1,7 +1,7 @@
 import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
-import { getNextMarker as _$getNextMarker } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
 import { spread as _$spread } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
@@ -13,15 +13,17 @@ import { use as _$use } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<div role=grid>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<div role=row class=k2b-file-grid__row><div><div class=k2b-file-grid__preview></div><div class=k2b-file-grid__name></div><div class=k2b-file-grid__meta></div><div class=k2b-file-grid__actions>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<div data-open-items=true role=list>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<div role=listitem class=k2b-file-grid__row><div><button type=button class=k2b-file-grid__open></button><div class=k2b-file-grid__preview></div><div class=k2b-file-grid__name></div><div class=k2b-file-grid__meta></div><div class=k2b-file-grid__actions>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-file-grid-stack__toolbar>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<button type=button class=k2b-file-grid-stack__more aria-expanded=true><span></span><i class="ti ti-chevron-up"aria-hidden=true>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-file-grid-stack><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-file-grid-stack__group><div class=k2b-file-grid-stack__label><!$><!/><span class=k2b-file-grid-stack__count></span></div><!$><!/>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<span class=k2b-file-grid-stack__more-meta>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<button type=button class=k2b-file-grid-stack__more aria-expanded=false><span></span><i class="ti ti-chevron-down"aria-hidden=true></i><!$><!/>`);
+  _tmpl$2 = /*#__PURE__*/_$template(`<div role=row class=k2b-file-grid__row><div><!$><!/><div class=k2b-file-grid__preview></div><div class=k2b-file-grid__name></div><div class=k2b-file-grid__meta></div><div class=k2b-file-grid__actions>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-file-grid__check-box><i class="ti ti-check">`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<span class=k2b-file-grid__check aria-hidden=true>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div data-open-items=true role=list>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<div role=listitem class=k2b-file-grid__row><div><button type=button class=k2b-file-grid__open></button><div class=k2b-file-grid__preview></div><div class=k2b-file-grid__name></div><div class=k2b-file-grid__meta></div><div class=k2b-file-grid__actions>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-file-grid-stack__toolbar>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<button type=button class=k2b-file-grid-stack__more aria-expanded=true><span></span><i class="ti ti-chevron-up"aria-hidden=true>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-file-grid-stack><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-file-grid-stack__group><div class=k2b-file-grid-stack__label><!$><!/><span class=k2b-file-grid-stack__count></span></div><!$><!/>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<span class=k2b-file-grid-stack__more-meta>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<button type=button class=k2b-file-grid-stack__more aria-expanded=false><span></span><i class="ti ti-chevron-down"aria-hidden=true></i><!$><!/>`);
 import { createEffect, createMemo, createSignal, createUniqueId, For, Index, on, Show } from "solid-js";
 import { useFileListMessages } from "./file-list-messages";
 
@@ -75,7 +77,9 @@ function SelectableFileGrid(props) {
         return (() => {
           var _el$2 = _$getNextElement(_tmpl$2),
             _el$3 = _el$2.firstChild,
-            _el$4 = _el$3.firstChild,
+            _el$8 = _el$3.firstChild,
+            [_el$9, _co$] = _$getNextMarker(_el$8.nextSibling),
+            _el$4 = _el$9.nextSibling,
             _el$5 = _el$4.nextSibling,
             _el$6 = _el$5.nextSibling,
             _el$7 = _el$6.nextSibling;
@@ -112,6 +116,25 @@ function SelectableFileGrid(props) {
               }
             }
           }), false, true);
+          _$insert(_el$3, _$createComponent(Show, {
+            get when() {
+              return props.checks;
+            },
+            children: checks => (() => {
+              var _el$0 = _$getNextElement(_tmpl$4);
+              _$insert(_el$0, _$createComponent(Show, {
+                get when() {
+                  return checks()(row);
+                },
+                get children() {
+                  var _el$1 = _$getNextElement(_tmpl$3);
+                  _$effect(() => _$setAttribute(_el$1, "data-shape", props.selection.multiple ? "box" : "circle"));
+                  return _el$1;
+                }
+              }));
+              return _el$0;
+            })()
+          }), _el$9, _co$);
           _$insert(_el$4, () => props.renderPreview(row));
           _$insert(_el$5, () => props.renderLabel(row));
           _$insert(_el$6, () => props.renderMeta?.(row));
@@ -126,14 +149,16 @@ function SelectableFileGrid(props) {
         _v$2 = props.size ?? "md",
         _v$3 = props.layout ?? "grid",
         _v$4 = props.actionVisibility ?? "always",
-        _v$5 = props.label,
-        _v$6 = props.selection.multiple;
+        _v$5 = props.checks ? "true" : undefined,
+        _v$6 = props.label,
+        _v$7 = props.selection.multiple;
       _v$ !== _p$.e && _$className(_el$, _p$.e = _v$);
       _v$2 !== _p$.t && _$setAttribute(_el$, "data-size", _p$.t = _v$2);
       _v$3 !== _p$.a && _$setAttribute(_el$, "data-layout", _p$.a = _v$3);
       _v$4 !== _p$.o && _$setAttribute(_el$, "data-action-visibility", _p$.o = _v$4);
-      _v$5 !== _p$.i && _$setAttribute(_el$, "aria-label", _p$.i = _v$5);
-      _v$6 !== _p$.n && _$setAttribute(_el$, "aria-multiselectable", _p$.n = _v$6);
+      _v$5 !== _p$.i && _$setAttribute(_el$, "data-checks", _p$.i = _v$5);
+      _v$6 !== _p$.n && _$setAttribute(_el$, "aria-label", _p$.n = _v$6);
+      _v$7 !== _p$.s && _$setAttribute(_el$, "aria-multiselectable", _p$.s = _v$7);
       return _p$;
     }, {
       e: undefined,
@@ -141,7 +166,8 @@ function SelectableFileGrid(props) {
       a: undefined,
       o: undefined,
       i: undefined,
-      n: undefined
+      n: undefined,
+      s: undefined
     });
     return _el$;
   })();
@@ -175,51 +201,51 @@ function OpenFileGrid(props) {
     rows: full() || !limited() ? props.rows : props.rows.slice(0, props.limit)
   }]);
   const list = (group, labelId) => (() => {
-    var _el$8 = _$getNextElement(_tmpl$3);
-    _$setAttribute(_el$8, "aria-labelledby", labelId);
-    _$insert(_el$8, _$createComponent(For, {
+    var _el$10 = _$getNextElement(_tmpl$5);
+    _$setAttribute(_el$10, "aria-labelledby", labelId);
+    _$insert(_el$10, _$createComponent(For, {
       get each() {
         return group().rows;
       },
       children: row => {
         const id = `k2b-file-grid-${createUniqueId()}`;
         return (() => {
-          var _el$9 = _$getNextElement(_tmpl$4),
-            _el$0 = _el$9.firstChild,
-            _el$1 = _el$0.firstChild,
-            _el$10 = _el$1.nextSibling,
-            _el$11 = _el$10.nextSibling,
-            _el$12 = _el$11.nextSibling,
-            _el$13 = _el$12.nextSibling;
-          _$spread(_el$0, _$mergeProps(() => props.itemProps?.(row), {
+          var _el$11 = _$getNextElement(_tmpl$6),
+            _el$12 = _el$11.firstChild,
+            _el$13 = _el$12.firstChild,
+            _el$14 = _el$13.nextSibling,
+            _el$15 = _el$14.nextSibling,
+            _el$16 = _el$15.nextSibling,
+            _el$17 = _el$16.nextSibling;
+          _$spread(_el$12, _$mergeProps(() => props.itemProps?.(row), {
             "class": "k2b-file-grid__item"
           }), false, true);
-          _el$1.$$contextmenu = () => props.onContextMenu?.(row);
-          _el$1.$$click = () => props.onOpen(row);
-          _$setAttribute(_el$1, "aria-labelledby", `${id}-name`);
-          _$insert(_el$10, () => props.renderPreview(row));
-          _$setAttribute(_el$11, "id", `${id}-name`);
-          _$insert(_el$11, () => props.renderLabel(row));
-          _$setAttribute(_el$12, "id", `${id}-meta`);
-          _$insert(_el$12, () => props.renderMeta?.(row));
-          _$insert(_el$13, () => props.renderActions?.(row));
-          _$effect(() => _$setAttribute(_el$1, "aria-describedby", props.renderMeta ? `${id}-meta` : undefined));
+          _el$13.$$contextmenu = () => props.onContextMenu?.(row);
+          _el$13.$$click = () => props.onOpen(row);
+          _$setAttribute(_el$13, "aria-labelledby", `${id}-name`);
+          _$insert(_el$14, () => props.renderPreview(row));
+          _$setAttribute(_el$15, "id", `${id}-name`);
+          _$insert(_el$15, () => props.renderLabel(row));
+          _$setAttribute(_el$16, "id", `${id}-meta`);
+          _$insert(_el$16, () => props.renderMeta?.(row));
+          _$insert(_el$17, () => props.renderActions?.(row));
+          _$effect(() => _$setAttribute(_el$13, "aria-describedby", props.renderMeta ? `${id}-meta` : undefined));
           _$runHydrationEvents();
-          return _el$9;
+          return _el$11;
         })();
       }
     }));
     _$effect(_p$ => {
-      var _v$7 = `k2b-file-grid ${props.class ?? ""}`,
-        _v$8 = props.size ?? "md",
-        _v$9 = group().layout === "tiles" ? "tiles" : props.layout ?? "grid",
-        _v$0 = props.actionVisibility ?? "always",
-        _v$1 = labelId ? undefined : props.label;
-      _v$7 !== _p$.e && _$className(_el$8, _p$.e = _v$7);
-      _v$8 !== _p$.t && _$setAttribute(_el$8, "data-size", _p$.t = _v$8);
-      _v$9 !== _p$.a && _$setAttribute(_el$8, "data-layout", _p$.a = _v$9);
-      _v$0 !== _p$.o && _$setAttribute(_el$8, "data-action-visibility", _p$.o = _v$0);
-      _v$1 !== _p$.i && _$setAttribute(_el$8, "aria-label", _p$.i = _v$1);
+      var _v$8 = `k2b-file-grid ${props.class ?? ""}`,
+        _v$9 = props.size ?? "md",
+        _v$0 = group().layout === "tiles" ? "tiles" : props.layout ?? "grid",
+        _v$1 = props.actionVisibility ?? "always",
+        _v$10 = labelId ? undefined : props.label;
+      _v$8 !== _p$.e && _$className(_el$10, _p$.e = _v$8);
+      _v$9 !== _p$.t && _$setAttribute(_el$10, "data-size", _p$.t = _v$9);
+      _v$0 !== _p$.a && _$setAttribute(_el$10, "data-layout", _p$.a = _v$0);
+      _v$1 !== _p$.o && _$setAttribute(_el$10, "data-action-visibility", _p$.o = _v$1);
+      _v$10 !== _p$.i && _$setAttribute(_el$10, "aria-label", _p$.i = _v$10);
       return _p$;
     }, {
       e: undefined,
@@ -228,27 +254,27 @@ function OpenFileGrid(props) {
       o: undefined,
       i: undefined
     });
-    return _el$8;
+    return _el$10;
   })();
   return (() => {
-    var _el$14 = _$getNextElement(_tmpl$7),
-      _el$18 = _el$14.firstChild,
-      [_el$19, _co$] = _$getNextMarker(_el$18.nextSibling),
-      _el$20 = _el$19.nextSibling,
-      [_el$21, _co$2] = _$getNextMarker(_el$20.nextSibling),
-      _el$22 = _el$21.nextSibling,
-      [_el$23, _co$3] = _$getNextMarker(_el$22.nextSibling);
-    _$insert(_el$14, _$createComponent(Show, {
+    var _el$18 = _$getNextElement(_tmpl$9),
+      _el$22 = _el$18.firstChild,
+      [_el$23, _co$2] = _$getNextMarker(_el$22.nextSibling),
+      _el$24 = _el$23.nextSibling,
+      [_el$25, _co$3] = _$getNextMarker(_el$24.nextSibling),
+      _el$26 = _el$25.nextSibling,
+      [_el$27, _co$4] = _$getNextMarker(_el$26.nextSibling);
+    _$insert(_el$18, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!full())() && props.toolbar;
       },
       get children() {
-        var _el$15 = _$getNextElement(_tmpl$5);
-        _$insert(_el$15, () => props.toolbar);
-        return _el$15;
+        var _el$19 = _$getNextElement(_tmpl$7);
+        _$insert(_el$19, () => props.toolbar);
+        return _el$19;
       }
-    }), _el$19, _co$);
-    _$insert(_el$14, _$createComponent(Index, {
+    }), _el$23, _co$2);
+    _$insert(_el$18, _$createComponent(Index, {
       get each() {
         return groups();
       },
@@ -262,23 +288,23 @@ function OpenFileGrid(props) {
             return list(group);
           },
           get children() {
-            var _el$24 = _$getNextElement(_tmpl$8),
-              _el$25 = _el$24.firstChild,
-              _el$27 = _el$25.firstChild,
-              [_el$28, _co$4] = _$getNextMarker(_el$27.nextSibling),
-              _el$26 = _el$28.nextSibling,
-              _el$29 = _el$25.nextSibling,
-              [_el$30, _co$5] = _$getNextMarker(_el$29.nextSibling);
-            _$setAttribute(_el$25, "id", labelId);
-            _$insert(_el$25, () => group().label, _el$28, _co$4);
-            _$insert(_el$26, () => group().rows.length);
-            _$insert(_el$24, () => list(group, labelId), _el$30, _co$5);
-            return _el$24;
+            var _el$28 = _$getNextElement(_tmpl$0),
+              _el$29 = _el$28.firstChild,
+              _el$31 = _el$29.firstChild,
+              [_el$32, _co$5] = _$getNextMarker(_el$31.nextSibling),
+              _el$30 = _el$32.nextSibling,
+              _el$33 = _el$29.nextSibling,
+              [_el$34, _co$6] = _$getNextMarker(_el$33.nextSibling);
+            _$setAttribute(_el$29, "id", labelId);
+            _$insert(_el$29, () => group().label, _el$32, _co$5);
+            _$insert(_el$30, () => group().rows.length);
+            _$insert(_el$28, () => list(group, labelId), _el$34, _co$6);
+            return _el$28;
           }
         });
       }
-    }), _el$21, _co$2);
-    _$insert(_el$14, _$createComponent(Show, {
+    }), _el$25, _co$3);
+    _$insert(_el$18, _$createComponent(Show, {
       get when() {
         return limited();
       },
@@ -289,46 +315,46 @@ function OpenFileGrid(props) {
           },
           get fallback() {
             return (() => {
-              var _el$31 = _$getNextElement(_tmpl$0),
-                _el$32 = _el$31.firstChild,
-                _el$33 = _el$32.nextSibling,
-                _el$35 = _el$33.nextSibling,
-                [_el$36, _co$6] = _$getNextMarker(_el$35.nextSibling);
-              _el$31.$$click = () => toggle(true);
+              var _el$35 = _$getNextElement(_tmpl$10),
+                _el$36 = _el$35.firstChild,
+                _el$37 = _el$36.nextSibling,
+                _el$39 = _el$37.nextSibling,
+                [_el$40, _co$7] = _$getNextMarker(_el$39.nextSibling);
+              _el$35.$$click = () => toggle(true);
               var _ref$3 = more;
-              typeof _ref$3 === "function" ? _$use(_ref$3, _el$31) : more = _el$31;
-              _$insert(_el$32, () => messages().showAll({
+              typeof _ref$3 === "function" ? _$use(_ref$3, _el$35) : more = _el$35;
+              _$insert(_el$36, () => messages().showAll({
                 count: props.rows.length
               }));
-              _$insert(_el$31, _$createComponent(Show, {
+              _$insert(_el$35, _$createComponent(Show, {
                 get when() {
                   return props.moreMeta;
                 },
                 get children() {
-                  var _el$34 = _$getNextElement(_tmpl$9);
-                  _$insert(_el$34, () => props.moreMeta);
-                  return _el$34;
+                  var _el$38 = _$getNextElement(_tmpl$1);
+                  _$insert(_el$38, () => props.moreMeta);
+                  return _el$38;
                 }
-              }), _el$36, _co$6);
+              }), _el$40, _co$7);
               _$runHydrationEvents();
-              return _el$31;
+              return _el$35;
             })();
           },
           get children() {
-            var _el$16 = _$getNextElement(_tmpl$6),
-              _el$17 = _el$16.firstChild;
-            _el$16.$$click = () => toggle(false);
+            var _el$20 = _$getNextElement(_tmpl$8),
+              _el$21 = _el$20.firstChild;
+            _el$20.$$click = () => toggle(false);
             var _ref$2 = less;
-            typeof _ref$2 === "function" ? _$use(_ref$2, _el$16) : less = _el$16;
-            _$insert(_el$17, () => messages().showLess);
+            typeof _ref$2 === "function" ? _$use(_ref$2, _el$20) : less = _el$20;
+            _$insert(_el$21, () => messages().showLess);
             _$runHydrationEvents();
-            return _el$16;
+            return _el$20;
           }
         });
       }
-    }), _el$23, _co$3);
-    _$effect(() => _$setAttribute(_el$14, "data-expanded", full() ? "true" : undefined));
-    return _el$14;
+    }), _el$27, _co$4);
+    _$effect(() => _$setAttribute(_el$18, "data-expanded", full() ? "true" : undefined));
+    return _el$18;
   })();
 }
 _$delegateEvents(["click", "contextmenu"]);

package/dist/browser/content/FileGrid.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["content/FileGrid.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, createUniqueId, For, Index, type JSX, on, Show } from \"solid-js\";\nimport type { CollectionSelection } from \"./collection-selection\";\nimport { useFileListMessages } from \"./file-list-messages\";\n\n/** One part of an open file list, such as its files as rows and its images as tiles. */\nexport type FileGridGroup<T> = {\n  id: string;\n  label: JSX.Element;\n  rows: readonly T[];\n  /** `tiles` fills each item with its preview and lays the name over it. Defaults to `list`. */\n  layout?: \"list\" | \"tiles\";\n};\n\ntype FileGridBaseProps<T> = {\n  rows: readonly T[];\n  getRowId: (row: T) => string;\n  label: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** `list` shows one compact row per item: preview, name, and meta beside each other. Defaults to `grid`. */\n  layout?: \"grid\" | \"list\";\n  renderPreview: (row: T) => JSX.Element;\n  renderLabel: (row: T) => JSX.Element;\n  renderMeta?: (row: T) => JSX.Element;\n  renderActions?: (row: T) => JSX.Element;\n  /**\n   * `progressive` shows the actions on hover, keyboard focus, or an open menu with a mouse or trackpad, and always\n   * on touch. Their slot is reserved in both states, so nothing moves. Defaults to `always`.\n   */\n  actionVisibility?: \"always\" | \"progressive\";\n  onOpen: (row: T) => void;\n  onContextMenu?: (row: T) => void;\n  /** Extra attributes for one tile, for example drag-and-drop handlers or data attributes the host styles. */\n  itemProps?: (row: T) => JSX.HTMLAttributes<HTMLDivElement>;\n  class?: string;\n};\n\n/** A browser or picker: items are selected, and Enter or a double click opens them. */\nexport type FileGridSelectableProps<T> = FileGridBaseProps<T> & {\n  selection: CollectionSelection;\n  onRowClick?: (row: T) => void;\n  limit?: never;\n  expanded?: never;\n  onExpandedChange?: never;\n  moreMeta?: never;\n  toolbar?: never;\n  groups?: never;\n};\n\n/** A list without selection, as in a details panel: one click on an item opens it. */\nexport type FileGridOpenProps<T> = FileGridBaseProps<T> & {\n  selection?: never;\n  onRowClick?: never;\n  /** Shows the first `limit` items, then \"Show all N\", which opens the full list in place. Without it, the list is always full. */\n  limit?: number;\n  /** Controls whether the full list is open. Without it, the list keeps its own state. */\n  expanded?: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n  /** A quiet note at the end of \"Show all N\", such as how many duplicates were merged. */\n  moreMeta?: JSX.Element;\n  /** Shown above the full list, such as a count, an arrangement switch, or \"Download all\"; not in the short list. */\n  toolbar?: JSX.Element;\n  /** How the full list arranges its items, such as files as rows, then images as tiles; the short list stays one list. */\n  groups?: (rows: readonly T[]) => readonly FileGridGroup<T>[];\n};\n\nexport type FileGridProps<T> = FileGridSelectableProps<T> | FileGridOpenProps<T>;\n\n/**\n * File presentation only; the host owns data, menus, leases and permissions. Items the selection marks with\n * `isDisabled` stay reachable by keyboard but cannot be selected or opened; say why in `renderMeta`.\n */\nexport function FileGrid<T>(props: FileGridProps<T>) {\n  return (\n    <Show when={props.selection} fallback={<OpenFileGrid {...(props as FileGridOpenProps<T>)} />}>\n      {(selection) => <SelectableFileGrid {...(props as FileGridSelectableProps<T>)} selection={selection()} />}\n    </Show>\n  );\n}\n\nfunction SelectableFileGrid<T>(props: FileGridSelectableProps<T>) {\n  let grid: HTMLDivElement | undefined;\n  // Both clicks of a double-click belong to the item that took the first one. When that click replaced the rows,\n  // for example by opening a folder, the item now under the pointer ignores the rest of the gesture.\n  let pressed: EventTarget | null | undefined;\n  const ownsClick = (event: MouseEvent) => {\n    if (event.detail > 1 && pressed !== event.currentTarget) pressed = null;\n    else pressed = event.currentTarget;\n    return pressed !== null;\n  };\n  const columns = () => (grid ? Math.max(1, getComputedStyle(grid).gridTemplateColumns.split(\" \").length) : 1);\n  const nested = (event: Event) =>\n    event.target instanceof Element &&\n    !!event.target.closest(\"button,a,input,label,select,textarea,summary,[contenteditable],[role=button],[role=menu]\");\n  return (\n    <div\n      ref={grid}\n      class={`k2b-file-grid ${props.class ?? \"\"}`}\n      data-size={props.size ?? \"md\"}\n      data-layout={props.layout ?? \"grid\"}\n      data-action-visibility={props.actionVisibility ?? \"always\"}\n      role=\"grid\"\n      aria-label={props.label}\n      aria-multiselectable={props.selection.multiple}\n    >\n      <For each={props.rows}>\n        {(row) => {\n          const id = () => props.getRowId(row);\n          const disabled = () => props.selection.isDisabled(id());\n          return (\n            <div role=\"row\" class=\"k2b-file-grid__row\">\n              <div\n                {...props.itemProps?.(row)}\n                role=\"gridcell\"\n                class=\"k2b-file-grid__item\"\n                aria-selected={props.selection.selected().has(id())}\n                aria-disabled={disabled() || undefined}\n                ref={(element) => props.selection.register(id(), element)}\n                tabIndex={props.selection.focused() === id() ? 0 : -1}\n                onFocus={() => props.selection.markFocused(id())}\n                onClick={(event) => {\n                  if (!nested(event) && ownsClick(event) && !disabled()) {\n                    props.selection.select(id(), event);\n                    props.onRowClick?.(row);\n                  }\n                }}\n                onDblClick={(event) => {\n                  if (!nested(event) && pressed !== null && !disabled()) props.onOpen(row);\n                }}\n                onContextMenu={() => props.onContextMenu?.(row)}\n                onKeyDown={(event) => {\n                  if (nested(event)) return;\n                  if (props.selection.keyDown(event, id(), columns())) return;\n                  if (event.key === \"Enter\") {\n                    event.preventDefault();\n                    if (!disabled()) props.onOpen(row);\n                  }\n                }}\n              >\n                <div class=\"k2b-file-grid__preview\">{props.renderPreview(row)}</div>\n                <div class=\"k2b-file-grid__name\">{props.renderLabel(row)}</div>\n                <div class=\"k2b-file-grid__meta\">{props.renderMeta?.(row)}</div>\n                <div class=\"k2b-file-grid__actions\">{props.renderActions?.(row)}</div>\n              </div>\n            </div>\n          );\n        }}\n      </For>\n    </div>\n  );\n}\n\nfunction OpenFileGrid<T>(props: FileGridOpenProps<T>) {\n  const messages = useFileListMessages();\n  const [ownExpanded, setOwnExpanded] = createSignal(false);\n  const limited = () => props.limit !== undefined && props.rows.length > props.limit;\n  // Without a limit the list is always complete, so its toolbar and groups always apply.\n  const full = () => props.limit === undefined || (limited() && (props.expanded ?? ownExpanded()));\n  let more: HTMLButtonElement | undefined;\n  let less: HTMLButtonElement | undefined;\n  let moveFocus = false;\n  const toggle = (next: boolean) => {\n    moveFocus = true;\n    if (props.expanded === undefined) setOwnExpanded(next);\n    props.onExpandedChange?.(next);\n  };\n  // The pressed button leaves with the state it showed; once the new state is there, focus moves to its\n  // counterpart, also when a controlling host applies it later.\n  createEffect(\n    on(\n      full,\n      (open) => {\n        if (!moveFocus) return;\n        moveFocus = false;\n        queueMicrotask(() => (open ? less : more)?.focus());\n      },\n      { defer: true },\n    ),\n  );\n  const groups = createMemo((): readonly FileGridGroup<T>[] =>\n    full() && props.groups\n      ? props.groups(props.rows).filter((group) => group.rows.length > 0)\n      : [{ id: \"rows\", label: undefined, rows: full() || !limited() ? props.rows : props.rows.slice(0, props.limit) }],\n  );\n\n  const list = (group: () => FileGridGroup<T>, labelId?: string) => (\n    <div\n      class={`k2b-file-grid ${props.class ?? \"\"}`}\n      data-size={props.size ?? \"md\"}\n      data-layout={group().layout === \"tiles\" ? \"tiles\" : (props.layout ?? \"grid\")}\n      data-action-visibility={props.actionVisibility ?? \"always\"}\n      data-open-items=\"true\"\n      role=\"list\"\n      aria-label={labelId ? undefined : props.label}\n      aria-labelledby={labelId}\n    >\n      {/* Keyed by the row itself: new data keeps every existing item, its focus, and its state. */}\n      <For each={group().rows}>\n        {(row) => {\n          const id = `k2b-file-grid-${createUniqueId()}`;\n          return (\n            <div role=\"listitem\" class=\"k2b-file-grid__row\">\n              <div {...props.itemProps?.(row)} class=\"k2b-file-grid__item\">\n                {/* The whole item opens the file; its actions lie above this layer in their own slot. */}\n                <button\n                  type=\"button\"\n                  class=\"k2b-file-grid__open\"\n                  aria-labelledby={`${id}-name`}\n                  aria-describedby={props.renderMeta ? `${id}-meta` : undefined}\n                  onClick={() => props.onOpen(row)}\n                  onContextMenu={() => props.onContextMenu?.(row)}\n                />\n                <div class=\"k2b-file-grid__preview\">{props.renderPreview(row)}</div>\n                <div class=\"k2b-file-grid__name\" id={`${id}-name`}>\n                  {props.renderLabel(row)}\n                </div>\n                <div class=\"k2b-file-grid__meta\" id={`${id}-meta`}>\n                  {props.renderMeta?.(row)}\n                </div>\n                <div class=\"k2b-file-grid__actions\">{props.renderActions?.(row)}</div>\n              </div>\n            </div>\n          );\n        }}\n      </For>\n    </div>\n  );\n\n  return (\n    <div class=\"k2b-file-grid-stack\" data-expanded={full() ? \"true\" : undefined}>\n      <Show when={full() && props.toolbar}>\n        <div class=\"k2b-file-grid-stack__toolbar\">{props.toolbar}</div>\n      </Show>\n      {/* By position: a group that only changes its rows keeps its list, so new data remounts nothing. */}\n      <Index each={groups()}>\n        {(group) => {\n          const labelId = `k2b-file-grid-group-${createUniqueId()}`;\n          return (\n            <Show when={group().label !== undefined} fallback={list(group)}>\n              <div class=\"k2b-file-grid-stack__group\">\n                <div class=\"k2b-file-grid-stack__label\" id={labelId}>\n                  {group().label}\n                  <span class=\"k2b-file-grid-stack__count\">{group().rows.length}</span>\n                </div>\n                {list(group, labelId)}\n              </div>\n            </Show>\n          );\n        }}\n      </Index>\n      <Show when={limited()}>\n        <Show\n          when={full()}\n          fallback={\n            <button ref={more} type=\"button\" class=\"k2b-file-grid-stack__more\" aria-expanded=\"false\" onClick={() => toggle(true)}>\n              <span>{messages().showAll({ count: props.rows.length })}</span>\n              <i class=\"ti ti-chevron-down\" aria-hidden=\"true\" />\n              <Show when={props.moreMeta}>\n                <span class=\"k2b-file-grid-stack__more-meta\">{props.moreMeta}</span>\n              </Show>\n            </button>\n          }\n        >\n          <button ref={less} type=\"button\" class=\"k2b-file-grid-stack__more\" aria-expanded=\"true\" onClick={() => toggle(false)}>\n            <span>{messages().showLess}</span>\n            <i class=\"ti ti-chevron-up\" aria-hidden=\"true\" />\n          </button>\n        </Show>\n      </Show>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["content/FileGrid.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, createUniqueId, For, Index, type JSX, on, Show } from \"solid-js\";\nimport type { CollectionSelection } from \"./collection-selection\";\nimport { useFileListMessages } from \"./file-list-messages\";\n\n/** One part of an open file list, such as its files as rows and its images as tiles. */\nexport type FileGridGroup<T> = {\n  id: string;\n  label: JSX.Element;\n  rows: readonly T[];\n  /** `tiles` fills each item with its preview and lays the name over it. Defaults to `list`. */\n  layout?: \"list\" | \"tiles\";\n};\n\ntype FileGridBaseProps<T> = {\n  rows: readonly T[];\n  getRowId: (row: T) => string;\n  label: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** `list` shows one compact row per item: preview, name, and meta beside each other. Defaults to `grid`. */\n  layout?: \"grid\" | \"list\";\n  renderPreview: (row: T) => JSX.Element;\n  renderLabel: (row: T) => JSX.Element;\n  renderMeta?: (row: T) => JSX.Element;\n  renderActions?: (row: T) => JSX.Element;\n  /**\n   * `progressive` shows the actions on hover, keyboard focus, or an open menu with a mouse or trackpad, and always\n   * on touch. Their slot is reserved in both states, so nothing moves. Defaults to `always`.\n   */\n  actionVisibility?: \"always\" | \"progressive\";\n  onOpen: (row: T) => void;\n  onContextMenu?: (row: T) => void;\n  /** Extra attributes for one tile, for example drag-and-drop handlers or data attributes the host styles. */\n  itemProps?: (row: T) => JSX.HTMLAttributes<HTMLDivElement>;\n  class?: string;\n};\n\n/** A browser or picker: items are selected, and Enter or a double click opens them. */\nexport type FileGridSelectableProps<T> = FileGridBaseProps<T> & {\n  selection: CollectionSelection;\n  onRowClick?: (row: T) => void;\n  /**\n   * Shows a check box before each item that `checks` returns `true` for, or a circle when only one item may be\n   * selected. The check only mirrors the selection; items without one keep its slot, so names stay in line.\n   */\n  checks?: (row: T) => boolean;\n  limit?: never;\n  expanded?: never;\n  onExpandedChange?: never;\n  moreMeta?: never;\n  toolbar?: never;\n  groups?: never;\n};\n\n/** A list without selection, as in a details panel: one click on an item opens it. */\nexport type FileGridOpenProps<T> = FileGridBaseProps<T> & {\n  selection?: never;\n  onRowClick?: never;\n  checks?: never;\n  /** Shows the first `limit` items, then \"Show all N\", which opens the full list in place. Without it, the list is always full. */\n  limit?: number;\n  /** Controls whether the full list is open. Without it, the list keeps its own state. */\n  expanded?: boolean;\n  onExpandedChange?: (expanded: boolean) => void;\n  /** A quiet note at the end of \"Show all N\", such as how many duplicates were merged. */\n  moreMeta?: JSX.Element;\n  /** Shown above the full list, such as a count, an arrangement switch, or \"Download all\"; not in the short list. */\n  toolbar?: JSX.Element;\n  /** How the full list arranges its items, such as files as rows, then images as tiles; the short list stays one list. */\n  groups?: (rows: readonly T[]) => readonly FileGridGroup<T>[];\n};\n\nexport type FileGridProps<T> = FileGridSelectableProps<T> | FileGridOpenProps<T>;\n\n/**\n * File presentation only; the host owns data, menus, leases and permissions. Items the selection marks with\n * `isDisabled` stay reachable by keyboard but cannot be selected or opened; say why in `renderMeta`.\n */\nexport function FileGrid<T>(props: FileGridProps<T>) {\n  return (\n    <Show when={props.selection} fallback={<OpenFileGrid {...(props as FileGridOpenProps<T>)} />}>\n      {(selection) => <SelectableFileGrid {...(props as FileGridSelectableProps<T>)} selection={selection()} />}\n    </Show>\n  );\n}\n\nfunction SelectableFileGrid<T>(props: FileGridSelectableProps<T>) {\n  let grid: HTMLDivElement | undefined;\n  // Both clicks of a double-click belong to the item that took the first one. When that click replaced the rows,\n  // for example by opening a folder, the item now under the pointer ignores the rest of the gesture.\n  let pressed: EventTarget | null | undefined;\n  const ownsClick = (event: MouseEvent) => {\n    if (event.detail > 1 && pressed !== event.currentTarget) pressed = null;\n    else pressed = event.currentTarget;\n    return pressed !== null;\n  };\n  const columns = () => (grid ? Math.max(1, getComputedStyle(grid).gridTemplateColumns.split(\" \").length) : 1);\n  const nested = (event: Event) =>\n    event.target instanceof Element &&\n    !!event.target.closest(\"button,a,input,label,select,textarea,summary,[contenteditable],[role=button],[role=menu]\");\n  return (\n    <div\n      ref={grid}\n      class={`k2b-file-grid ${props.class ?? \"\"}`}\n      data-size={props.size ?? \"md\"}\n      data-layout={props.layout ?? \"grid\"}\n      data-action-visibility={props.actionVisibility ?? \"always\"}\n      data-checks={props.checks ? \"true\" : undefined}\n      role=\"grid\"\n      aria-label={props.label}\n      aria-multiselectable={props.selection.multiple}\n    >\n      <For each={props.rows}>\n        {(row) => {\n          const id = () => props.getRowId(row);\n          const disabled = () => props.selection.isDisabled(id());\n          return (\n            <div role=\"row\" class=\"k2b-file-grid__row\">\n              <div\n                {...props.itemProps?.(row)}\n                role=\"gridcell\"\n                class=\"k2b-file-grid__item\"\n                aria-selected={props.selection.selected().has(id())}\n                aria-disabled={disabled() || undefined}\n                ref={(element) => props.selection.register(id(), element)}\n                tabIndex={props.selection.focused() === id() ? 0 : -1}\n                onFocus={() => props.selection.markFocused(id())}\n                onClick={(event) => {\n                  if (!nested(event) && ownsClick(event) && !disabled()) {\n                    props.selection.select(id(), event);\n                    props.onRowClick?.(row);\n                  }\n                }}\n                onDblClick={(event) => {\n                  if (!nested(event) && pressed !== null && !disabled()) props.onOpen(row);\n                }}\n                onContextMenu={() => props.onContextMenu?.(row)}\n                onKeyDown={(event) => {\n                  if (nested(event)) return;\n                  if (props.selection.keyDown(event, id(), columns())) return;\n                  if (event.key === \"Enter\") {\n                    event.preventDefault();\n                    if (!disabled()) props.onOpen(row);\n                  }\n                }}\n              >\n                <Show when={props.checks}>\n                  {(checks) => (\n                    <span class=\"k2b-file-grid__check\" aria-hidden=\"true\">\n                      <Show when={checks()(row)}>\n                        <span class=\"k2b-file-grid__check-box\" data-shape={props.selection.multiple ? \"box\" : \"circle\"}>\n                          <i class=\"ti ti-check\" />\n                        </span>\n                      </Show>\n                    </span>\n                  )}\n                </Show>\n                <div class=\"k2b-file-grid__preview\">{props.renderPreview(row)}</div>\n                <div class=\"k2b-file-grid__name\">{props.renderLabel(row)}</div>\n                <div class=\"k2b-file-grid__meta\">{props.renderMeta?.(row)}</div>\n                <div class=\"k2b-file-grid__actions\">{props.renderActions?.(row)}</div>\n              </div>\n            </div>\n          );\n        }}\n      </For>\n    </div>\n  );\n}\n\nfunction OpenFileGrid<T>(props: FileGridOpenProps<T>) {\n  const messages = useFileListMessages();\n  const [ownExpanded, setOwnExpanded] = createSignal(false);\n  const limited = () => props.limit !== undefined && props.rows.length > props.limit;\n  // Without a limit the list is always complete, so its toolbar and groups always apply.\n  const full = () => props.limit === undefined || (limited() && (props.expanded ?? ownExpanded()));\n  let more: HTMLButtonElement | undefined;\n  let less: HTMLButtonElement | undefined;\n  let moveFocus = false;\n  const toggle = (next: boolean) => {\n    moveFocus = true;\n    if (props.expanded === undefined) setOwnExpanded(next);\n    props.onExpandedChange?.(next);\n  };\n  // The pressed button leaves with the state it showed; once the new state is there, focus moves to its\n  // counterpart, also when a controlling host applies it later.\n  createEffect(\n    on(\n      full,\n      (open) => {\n        if (!moveFocus) return;\n        moveFocus = false;\n        queueMicrotask(() => (open ? less : more)?.focus());\n      },\n      { defer: true },\n    ),\n  );\n  const groups = createMemo((): readonly FileGridGroup<T>[] =>\n    full() && props.groups\n      ? props.groups(props.rows).filter((group) => group.rows.length > 0)\n      : [{ id: \"rows\", label: undefined, rows: full() || !limited() ? props.rows : props.rows.slice(0, props.limit) }],\n  );\n\n  const list = (group: () => FileGridGroup<T>, labelId?: string) => (\n    <div\n      class={`k2b-file-grid ${props.class ?? \"\"}`}\n      data-size={props.size ?? \"md\"}\n      data-layout={group().layout === \"tiles\" ? \"tiles\" : (props.layout ?? \"grid\")}\n      data-action-visibility={props.actionVisibility ?? \"always\"}\n      data-open-items=\"true\"\n      role=\"list\"\n      aria-label={labelId ? undefined : props.label}\n      aria-labelledby={labelId}\n    >\n      {/* Keyed by the row itself: new data keeps every existing item, its focus, and its state. */}\n      <For each={group().rows}>\n        {(row) => {\n          const id = `k2b-file-grid-${createUniqueId()}`;\n          return (\n            <div role=\"listitem\" class=\"k2b-file-grid__row\">\n              <div {...props.itemProps?.(row)} class=\"k2b-file-grid__item\">\n                {/* The whole item opens the file; its actions lie above this layer in their own slot. */}\n                <button\n                  type=\"button\"\n                  class=\"k2b-file-grid__open\"\n                  aria-labelledby={`${id}-name`}\n                  aria-describedby={props.renderMeta ? `${id}-meta` : undefined}\n                  onClick={() => props.onOpen(row)}\n                  onContextMenu={() => props.onContextMenu?.(row)}\n                />\n                <div class=\"k2b-file-grid__preview\">{props.renderPreview(row)}</div>\n                <div class=\"k2b-file-grid__name\" id={`${id}-name`}>\n                  {props.renderLabel(row)}\n                </div>\n                <div class=\"k2b-file-grid__meta\" id={`${id}-meta`}>\n                  {props.renderMeta?.(row)}\n                </div>\n                <div class=\"k2b-file-grid__actions\">{props.renderActions?.(row)}</div>\n              </div>\n            </div>\n          );\n        }}\n      </For>\n    </div>\n  );\n\n  return (\n    <div class=\"k2b-file-grid-stack\" data-expanded={full() ? \"true\" : undefined}>\n      <Show when={full() && props.toolbar}>\n        <div class=\"k2b-file-grid-stack__toolbar\">{props.toolbar}</div>\n      </Show>\n      {/* By position: a group that only changes its rows keeps its list, so new data remounts nothing. */}\n      <Index each={groups()}>\n        {(group) => {\n          const labelId = `k2b-file-grid-group-${createUniqueId()}`;\n          return (\n            <Show when={group().label !== undefined} fallback={list(group)}>\n              <div class=\"k2b-file-grid-stack__group\">\n                <div class=\"k2b-file-grid-stack__label\" id={labelId}>\n                  {group().label}\n                  <span class=\"k2b-file-grid-stack__count\">{group().rows.length}</span>\n                </div>\n                {list(group, labelId)}\n              </div>\n            </Show>\n          );\n        }}\n      </Index>\n      <Show when={limited()}>\n        <Show\n          when={full()}\n          fallback={\n            <button ref={more} type=\"button\" class=\"k2b-file-grid-stack__more\" aria-expanded=\"false\" onClick={() => toggle(true)}>\n              <span>{messages().showAll({ count: props.rows.length })}</span>\n              <i class=\"ti ti-chevron-down\" aria-hidden=\"true\" />\n              <Show when={props.moreMeta}>\n                <span class=\"k2b-file-grid-stack__more-meta\">{props.moreMeta}</span>\n              </Show>\n            </button>\n          }\n        >\n          <button ref={less} type=\"button\" class=\"k2b-file-grid-stack__more\" aria-expanded=\"true\" onClick={() => toggle(false)}>\n            <span>{messages().showLess}</span>\n            <i class=\"ti ti-chevron-up\" aria-hidden=\"true\" />\n          </button>\n        </Show>\n      </Show>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/inputs/choice.js

@@ -62,10 +62,16 @@ export function createChoiceLoader(loader, debounceMs) {
     timer = undefined;
     controller?.abort();
     controller = undefined;
+    request++;
+    setLoading(false);
   };
   const run = async query => {
     const loadOptions = loader();
-    if (!loadOptions) return;
+    if (!loadOptions) {
+      // The source went away while its search waited out the debounce.
+      setLoading(false);
+      return;
+    }
     controller?.abort();
     controller = new AbortController();
     const currentController = controller;
@@ -81,13 +87,16 @@ export function createChoiceLoader(loader, debounceMs) {
         setError(errorMessage(reason));
       }
     } finally {
-      if (currentRequest === request) setLoading(false);
+      if (currentRequest === request && !timer) setLoading(false);
     }
   };
   const load = (query, immediate = false) => {
     lastQuery = query;
     if (timer) clearTimeout(timer);
     timer = undefined;
+    // A search waiting out its debounce is already loading: the list shows its
+    // loading rows, not "no results" for a request that has not run yet.
+    if (loader()) setLoading(true);
     if (immediate || debounceMs() <= 0) {
       void run(query);
       return;
@@ -115,15 +124,23 @@ const popoverIsOpen = popover => {
     return false;
   }
 };
-export const placeChoicePopover = (trigger, popover, placement = {}) => {
+/**
+ * Places the popover under (or above) its trigger. `floor` is the narrowest
+ * width it may take, such as the width it already had while open, so filtering
+ * the options never makes it narrower.
+ */
+export const placeChoicePopover = (trigger, popover, placement = {}, floor = 0) => {
   const margin = 8;
   const gap = 4;
   const triggerRect = trigger.getBoundingClientRect();
-  // Cloud sizes its dropdowns to the trigger exactly (`dialog.style.width =
-  // rect.width`). Keep that so a narrow toolbar select does not open a wide
-  // panel that no longer lines up with the control it belongs to.
-  const triggerWidth = Math.min(triggerRect.width, window.innerWidth - margin * 2);
-  if (placement.width !== "own") popover.style.width = `${triggerWidth}px`;
+  // The popover starts at the trigger's left edge and is never narrower than
+  // the trigger. Its stylesheet lets it grow to its longest name, as a menu
+  // does, so a name stays on one line beside a narrow trigger.
+  if (placement.width !== "own") {
+    popover.dataset.width = "fit";
+    const minWidth = Math.min(Math.max(triggerRect.width, floor), window.innerWidth - margin * 2);
+    popover.style.setProperty("--k2b-choice-min-width", `${minWidth}px`);
+  }
 
   // A stylesheet minimum, such as a popover with filter chips, can make it
   // wider than the trigger, so the clamp below uses the rendered width.
@@ -142,14 +159,24 @@ export function createChoicePopover(disabled, placement = () => ({})) {
   const [trigger, setTrigger] = createSignal();
   const [popover, setPopover] = createSignal();
   let triggerRing = true;
+  // The widest the open popover has been: typing a filter never narrows it.
+  let widest = 0;
   const place = () => {
     const triggerElement = trigger();
     const popoverElement = popover();
-    if (triggerElement && popoverElement && open()) placeChoicePopover(triggerElement, popoverElement, placement());
+    if (!triggerElement || !popoverElement || !open()) return;
+    placeChoicePopover(triggerElement, popoverElement, placement(), widest);
+    widest = popoverElement.getBoundingClientRect().width;
+    // Hold the width now, while it is the one on screen. Shorter results then
+    // keep it without a resize, so the observer below never has to widen the
+    // popover again during its own delivery, which WebKit reports as a
+    // "ResizeObserver loop" error.
+    if (placement().width !== "own") popoverElement.style.setProperty("--k2b-choice-min-width", `${widest}px`);
   };
   const show = () => {
     const popoverElement = popover();
     if (disabled() || !popoverElement || popoverIsOpen(popoverElement)) return;
+    widest = 0;
     triggerRing = ringOnReturn(trigger());
     popoverElement.showPopover();
     setOpen(true);