@k2b/ui 0.41.0 → 0.42.0

package/dist/browser/actions/menu-sheet.js

@@ -8,12 +8,15 @@ import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-gesture-menu__sheet-menu role=menu>`);
-import { onCleanup, onMount } from "solid-js";
+var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-gesture-menu__sheet-menu role=menu>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-gesture-menu__sheet-menu role=dialog data-search>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<p class=k2b-dropdown__note>`);
+import { createSignal, onCleanup, onMount, Show } from "solid-js";
 import { dialogCore } from "../feedback/dialog-core";
 import { LocaleProvider } from "../intl/locale";
 import BottomSheet, { bottomSheetOptions } from "../layout/BottomSheet";
 import { focusMenuRow, focusRowSegment } from "./menu-rows";
+import { filterDropdownItems, MenuSearch } from "./menu-search";
 
 /** Phones, where a menu opens as a bottom sheet instead of beside its trigger. */
 export const PHONE_SHEET_QUERY = "(max-width: 47.999rem)";
@@ -95,11 +98,61 @@ function SheetMenu(props) {
       },
       close: () => props.close()
     }));
-    _$effect(() => _$setAttribute(_el$, "aria-label", props.label));
+    _$effect(_p$ => {
+      var _v$ = props.label,
+        _v$2 = props.icons === "tile" ? "tile" : undefined;
+      _v$ !== _p$.e && _$setAttribute(_el$, "aria-label", _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$, "data-icons", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     _$runHydrationEvents();
     return _el$;
   })();
 }
+/** A searchable menu in the sheet: the sheet's first field, so it takes the focus as the sheet opens, as in the menu. */
+function SheetSearch(props) {
+  const [query, setQuery] = createSignal("");
+  const filter = props.search.filter;
+  return (() => {
+    var _el$2 = _$getNextElement(_tmpl$2);
+    _$insert(_el$2, _$createComponent(MenuSearch, {
+      get Items() {
+        return props.Items;
+      },
+      get items() {
+        return props.items;
+      },
+      get search() {
+        return {
+          ...props.search,
+          // The sheet's own items are wrapped already; a host's filter returns its unwrapped entries.
+          filter: value => filter ? props.wrap(filter(value)) : filterDropdownItems(props.items, value, props.locale)
+        };
+      },
+      get label() {
+        return props.label;
+      },
+      query: query,
+      setQuery: setQuery,
+      close: () => props.close()
+    }));
+    _$effect(_p$ => {
+      var _v$3 = props.label,
+        _v$4 = props.icons === "tile" ? "tile" : undefined;
+      _v$3 !== _p$.e && _$setAttribute(_el$2, "aria-label", _p$.e = _v$3);
+      _v$4 !== _p$.t && _$setAttribute(_el$2, "data-icons", _p$.t = _v$4);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$2;
+  })();
+}
+
 /** Opens menu items as a bottom sheet; resolves after the sheet closed and the chosen action ran. */
 export const openMenuSheet = options => {
   let chosen;
@@ -118,19 +171,60 @@ export const openMenuSheet = options => {
         get children() {
           return _$createComponent(BottomSheet.Body, {
             get children() {
-              return [_$memo(() => options.top?.(() => close())), _$createComponent(SheetMenu, {
-                get Items() {
-                  return options.Items;
+              return [_$memo(() => options.top?.(() => close())), _$createComponent(Show, {
+                get when() {
+                  return options.search;
                 },
-                get items() {
-                  return afterClose(options.items, choose);
+                get fallback() {
+                  return _$createComponent(SheetMenu, {
+                    get Items() {
+                      return options.Items;
+                    },
+                    get items() {
+                      return afterClose(options.items, choose);
+                    },
+                    get label() {
+                      return options.label;
+                    },
+                    close: () => close(),
+                    get dialog() {
+                      return context.dialog;
+                    },
+                    get icons() {
+                      return options.icons;
+                    }
+                  });
                 },
-                get label() {
-                  return options.label;
+                children: search => _$createComponent(SheetSearch, {
+                  get Items() {
+                    return options.Items;
+                  },
+                  get items() {
+                    return afterClose(options.items, choose);
+                  },
+                  get search() {
+                    return search();
+                  },
+                  wrap: items => afterClose(items, choose),
+                  get label() {
+                    return options.label;
+                  },
+                  get locale() {
+                    return options.locale;
+                  },
+                  close: () => close(),
+                  get icons() {
+                    return options.icons;
+                  }
+                })
+              }), _$createComponent(Show, {
+                get when() {
+                  return options.note;
                 },
-                close: () => close(),
-                get dialog() {
-                  return context.dialog;
+                get children() {
+                  var _el$3 = _$getNextElement(_tmpl$3);
+                  _$insert(_el$3, () => options.note);
+                  return _el$3;
                 }
               })];
             }

package/dist/browser/actions/menu-sheet.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["actions/menu-sheet.tsx"],"sourcesContent":["import { type JSX, onCleanup, onMount } from \"solid-js\";\nimport { dialogCore } from \"../feedback/dialog-core\";\nimport { LocaleProvider } from \"../intl/locale\";\nimport BottomSheet, { bottomSheetOptions } from \"../layout/BottomSheet\";\nimport type { DropdownAction, DropdownChoice, DropdownItem } from \"./Dropdown\";\nimport { focusMenuRow, focusRowSegment } from \"./menu-rows\";\n\n/** Phones, where a menu opens as a bottom sheet instead of beside its trigger. */\nexport const PHONE_SHEET_QUERY = \"(max-width: 47.999rem)\";\n\nexport const prefersMenuSheet = (): boolean => typeof matchMedia === \"function\" && matchMedia(PHONE_SHEET_QUERY).matches;\n\ntype SheetEntry = DropdownAction | DropdownChoice;\ntype SheetItem = SheetEntry | { items: readonly SheetEntry[] };\n\n/**\n * Follows a link the way a click on it would, so a page's own link handling, such as progressive navigation, still\n * applies; it runs only after the sheet has left the history.\n */\nconst followLink = (href: string) => {\n  const link = document.createElement(\"a\");\n  link.href = href;\n  link.hidden = true;\n  document.body.append(link);\n  link.click();\n  link.remove();\n};\n\n/**\n * The sheet's items hand their action to `run` instead of running it while the sheet closes: `dialogCore` settles the\n * sheet after it left the history, and only then may an action navigate or open the next dialog.\n * A choice or action that keeps the menu open, or an `immediate` action, runs at once.\n */\nconst afterClose = <T extends DropdownItem>(items: readonly T[], run: (action: () => void) => void): T[] => {\n  const entry = (item: SheetEntry): SheetEntry => {\n    // A plain link would navigate while the sheet's history entry is still being removed, and that Back could\n    // undo the navigation; a plain click instead follows it once the sheet is gone. Modified clicks and external\n    // links keep the browser's own behavior.\n    if (!item.action && \"href\" in item && item.href && !(\"external\" in item && item.external)) {\n      const href = item.href;\n      return { ...item, action: () => run(() => followLink(href)) } as SheetEntry;\n    }\n    const action = item.action;\n    if (!action || (\"closeOnSelect\" in item && item.closeOnSelect === false) || (\"immediate\" in item && item.immediate)) return item;\n    return { ...item, action: () => run(action) } as SheetEntry;\n  };\n  return items.map((item) => {\n    const sheetItem = item as SheetItem;\n    return (\"items\" in sheetItem ? { ...sheetItem, items: sheetItem.items.map(entry) } : entry(sheetItem)) as T;\n  });\n};\n\nconst menuItems = (menu: HTMLElement): HTMLElement[] =>\n  Array.from(menu.querySelectorAll<HTMLElement>(\"[role^='menuitem']:not([aria-disabled='true'])\"));\n\n/**\n * The menu inside the sheet: the same items, at touch size, with arrow keys for a connected keyboard. Focus starts on\n * the sheet itself, which shows no ring on a phone; the first arrow key moves it into the menu.\n */\nfunction SheetMenu(props: {\n  Items: MenuSheetOptions[\"Items\"];\n  items: readonly DropdownItem[];\n  label: string;\n  close: () => void;\n  dialog: HTMLDialogElement;\n}): JSX.Element {\n  let menu!: HTMLDivElement;\n  const onKeyDown = (event: KeyboardEvent) => {\n    const items = menuItems(menu);\n    if (!focusMenuRow(items, event.key) && !focusRowSegment(items, event.key)) return;\n    event.preventDefault();\n  };\n  // Keys pressed on the sheet itself, while it is the top level of the shared dialog.\n  const onSheetKeyDown = (event: KeyboardEvent) => {\n    if (event.target === props.dialog && props.dialog.lastElementChild?.contains(menu)) onKeyDown(event);\n  };\n  onMount(() => {\n    props.dialog.addEventListener(\"keydown\", onSheetKeyDown);\n    onCleanup(() => props.dialog.removeEventListener(\"keydown\", onSheetKeyDown));\n  });\n  return (\n    <div ref={menu} class=\"k2b-gesture-menu__sheet-menu\" role=\"menu\" aria-label={props.label} onKeyDown={onKeyDown}>\n      <props.Items items={props.items} close={() => props.close()} />\n    </div>\n  );\n}\n\nexport type MenuSheetOptions = {\n  /** Renders the rows: the dropdown's own `DropdownItems`, passed in so this module does not import it back. */\n  Items: (props: { items: readonly DropdownItem[]; close: (restoreFocus?: boolean) => void }) => JSX.Element;\n  items: readonly DropdownItem[];\n  /** Names the sheet and its menu. */\n  label: string;\n  /** The render locale of the opener; the sheet renders outside its tree. */\n  locale: string;\n  /** Shown above the menu, for example a row of quick reactions. `close` closes the sheet. */\n  top?: (close: () => void) => JSX.Element;\n  signal?: AbortSignal;\n};\n\n/** Opens menu items as a bottom sheet; resolves after the sheet closed and the chosen action ran. */\nexport const openMenuSheet = (options: MenuSheetOptions): Promise<void> => {\n  let chosen: (() => void) | undefined;\n  const choose = (action: () => void) => {\n    chosen = action;\n  };\n  return dialogCore\n    .open<void>(\n      (close, context) => (\n        <LocaleProvider locale={options.locale}>\n          <BottomSheet onDismiss={context.requestDismiss}>\n            <BottomSheet.Body>\n              {options.top?.(() => close())}\n              <SheetMenu\n                Items={options.Items}\n                items={afterClose(options.items, choose)}\n                label={options.label}\n                close={() => close()}\n                dialog={context.dialog}\n              />\n            </BottomSheet.Body>\n          </BottomSheet>\n        </LocaleProvider>\n      ),\n      { ...bottomSheetOptions, ariaLabel: options.label, history: true, signal: options.signal },\n    )\n    .then(() => chosen?.());\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["actions/menu-sheet.tsx"],"sourcesContent":["import { createSignal, type JSX, onCleanup, onMount, Show } from \"solid-js\";\nimport { dialogCore } from \"../feedback/dialog-core\";\nimport { LocaleProvider } from \"../intl/locale\";\nimport BottomSheet, { bottomSheetOptions } from \"../layout/BottomSheet\";\nimport type { DropdownAction, DropdownChoice, DropdownItem, DropdownSearch } from \"./Dropdown\";\nimport { focusMenuRow, focusRowSegment } from \"./menu-rows\";\nimport { filterDropdownItems, MenuSearch } from \"./menu-search\";\n\n/** Phones, where a menu opens as a bottom sheet instead of beside its trigger. */\nexport const PHONE_SHEET_QUERY = \"(max-width: 47.999rem)\";\n\nexport const prefersMenuSheet = (): boolean => typeof matchMedia === \"function\" && matchMedia(PHONE_SHEET_QUERY).matches;\n\ntype SheetEntry = DropdownAction | DropdownChoice;\ntype SheetItem = SheetEntry | { items: readonly SheetEntry[] };\n\n/**\n * Follows a link the way a click on it would, so a page's own link handling, such as progressive navigation, still\n * applies; it runs only after the sheet has left the history.\n */\nconst followLink = (href: string) => {\n  const link = document.createElement(\"a\");\n  link.href = href;\n  link.hidden = true;\n  document.body.append(link);\n  link.click();\n  link.remove();\n};\n\n/**\n * The sheet's items hand their action to `run` instead of running it while the sheet closes: `dialogCore` settles the\n * sheet after it left the history, and only then may an action navigate or open the next dialog.\n * A choice or action that keeps the menu open, or an `immediate` action, runs at once.\n */\nconst afterClose = <T extends DropdownItem>(items: readonly T[], run: (action: () => void) => void): T[] => {\n  const entry = (item: SheetEntry): SheetEntry => {\n    // A plain link would navigate while the sheet's history entry is still being removed, and that Back could\n    // undo the navigation; a plain click instead follows it once the sheet is gone. Modified clicks and external\n    // links keep the browser's own behavior.\n    if (!item.action && \"href\" in item && item.href && !(\"external\" in item && item.external)) {\n      const href = item.href;\n      return { ...item, action: () => run(() => followLink(href)) } as SheetEntry;\n    }\n    const action = item.action;\n    if (!action || (\"closeOnSelect\" in item && item.closeOnSelect === false) || (\"immediate\" in item && item.immediate)) return item;\n    return { ...item, action: () => run(action) } as SheetEntry;\n  };\n  return items.map((item) => {\n    const sheetItem = item as SheetItem;\n    return (\"items\" in sheetItem ? { ...sheetItem, items: sheetItem.items.map(entry) } : entry(sheetItem)) as T;\n  });\n};\n\nconst menuItems = (menu: HTMLElement): HTMLElement[] =>\n  Array.from(menu.querySelectorAll<HTMLElement>(\"[role^='menuitem']:not([aria-disabled='true'])\"));\n\n/**\n * The menu inside the sheet: the same items, at touch size, with arrow keys for a connected keyboard. Focus starts on\n * the sheet itself, which shows no ring on a phone; the first arrow key moves it into the menu.\n */\nfunction SheetMenu(props: {\n  Items: MenuSheetOptions[\"Items\"];\n  items: readonly DropdownItem[];\n  label: string;\n  close: () => void;\n  dialog: HTMLDialogElement;\n  icons?: \"plain\" | \"tile\";\n}): JSX.Element {\n  let menu!: HTMLDivElement;\n  const onKeyDown = (event: KeyboardEvent) => {\n    const items = menuItems(menu);\n    if (!focusMenuRow(items, event.key) && !focusRowSegment(items, event.key)) return;\n    event.preventDefault();\n  };\n  // Keys pressed on the sheet itself, while it is the top level of the shared dialog.\n  const onSheetKeyDown = (event: KeyboardEvent) => {\n    if (event.target === props.dialog && props.dialog.lastElementChild?.contains(menu)) onKeyDown(event);\n  };\n  onMount(() => {\n    props.dialog.addEventListener(\"keydown\", onSheetKeyDown);\n    onCleanup(() => props.dialog.removeEventListener(\"keydown\", onSheetKeyDown));\n  });\n  return (\n    <div\n      ref={menu}\n      class=\"k2b-gesture-menu__sheet-menu\"\n      role=\"menu\"\n      aria-label={props.label}\n      data-icons={props.icons === \"tile\" ? \"tile\" : undefined}\n      onKeyDown={onKeyDown}\n    >\n      <props.Items items={props.items} close={() => props.close()} />\n    </div>\n  );\n}\n\nexport type MenuSheetOptions = {\n  /** Renders the rows: the dropdown's own `DropdownItems`, passed in so this module does not import it back. */\n  Items: (props: { items: readonly DropdownItem[]; close: (restoreFocus?: boolean) => void }) => JSX.Element;\n  items: readonly DropdownItem[];\n  /** Names the sheet and its menu. */\n  label: string;\n  /** The render locale of the opener; the sheet renders outside its tree. */\n  locale: string;\n  /** Shown above the menu, for example a row of quick reactions. `close` closes the sheet. */\n  top?: (close: () => void) => JSX.Element;\n  search?: DropdownSearch;\n  icons?: \"plain\" | \"tile\";\n  /** A quiet sentence below the entries. */\n  note?: string;\n  signal?: AbortSignal;\n};\n\n/** A searchable menu in the sheet: the sheet's first field, so it takes the focus as the sheet opens, as in the menu. */\nfunction SheetSearch(props: {\n  Items: MenuSheetOptions[\"Items\"];\n  items: readonly DropdownItem[];\n  search: DropdownSearch;\n  wrap: <T extends DropdownItem>(items: readonly T[]) => T[];\n  label: string;\n  locale: string;\n  close: () => void;\n  icons?: \"plain\" | \"tile\";\n}): JSX.Element {\n  const [query, setQuery] = createSignal(\"\");\n  const filter = props.search.filter;\n  return (\n    <div\n      class=\"k2b-gesture-menu__sheet-menu\"\n      role=\"dialog\"\n      aria-label={props.label}\n      data-search=\"\"\n      data-icons={props.icons === \"tile\" ? \"tile\" : undefined}\n    >\n      <MenuSearch\n        Items={props.Items}\n        items={props.items}\n        search={{\n          ...props.search,\n          // The sheet's own items are wrapped already; a host's filter returns its unwrapped entries.\n          filter: (value) => (filter ? props.wrap(filter(value)) : filterDropdownItems(props.items, value, props.locale)),\n        }}\n        label={props.label}\n        query={query}\n        setQuery={setQuery}\n        close={() => props.close()}\n      />\n    </div>\n  );\n}\n\n/** Opens menu items as a bottom sheet; resolves after the sheet closed and the chosen action ran. */\nexport const openMenuSheet = (options: MenuSheetOptions): Promise<void> => {\n  let chosen: (() => void) | undefined;\n  const choose = (action: () => void) => {\n    chosen = action;\n  };\n  return dialogCore\n    .open<void>(\n      (close, context) => (\n        <LocaleProvider locale={options.locale}>\n          <BottomSheet onDismiss={context.requestDismiss}>\n            <BottomSheet.Body>\n              {options.top?.(() => close())}\n              <Show\n                when={options.search}\n                fallback={\n                  <SheetMenu\n                    Items={options.Items}\n                    items={afterClose(options.items, choose)}\n                    label={options.label}\n                    close={() => close()}\n                    dialog={context.dialog}\n                    icons={options.icons}\n                  />\n                }\n              >\n                {(search) => (\n                  <SheetSearch\n                    Items={options.Items}\n                    items={afterClose(options.items, choose)}\n                    search={search()}\n                    wrap={(items) => afterClose(items, choose)}\n                    label={options.label}\n                    locale={options.locale}\n                    close={() => close()}\n                    icons={options.icons}\n                  />\n                )}\n              </Show>\n              <Show when={options.note}>\n                <p class=\"k2b-dropdown__note\">{options.note}</p>\n              </Show>\n            </BottomSheet.Body>\n          </BottomSheet>\n        </LocaleProvider>\n      ),\n      { ...bottomSheetOptions, ariaLabel: options.label, history: true, signal: options.signal },\n    )\n    .then(() => chosen?.());\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/content/CalendarWeekView.js

@@ -188,6 +188,7 @@ export const CalendarWeekView = props => {
   let lastWheel = 0;
   let fingers = 0;
   let restTimer = 0;
+  let restFrame = 0;
   let ready = false;
   /** Whether a wheel or a finger moved the strip since it last settled, and the way it last moved. */
   let gesture = false;
@@ -211,6 +212,15 @@ export const CalendarWeekView = props => {
       settling = false;
     }, 450);
   };
+  /**
+   * A busy page runs the rest timer before the scroll event of a reveal still on its way, and a settle then would stop
+   * that reveal short of what it brings into view. Two frames tell: a scroll still moving reports before them and starts over.
+   */
+  const settleOnceStill = () => {
+    restFrame = requestAnimationFrame(() => {
+      restFrame = requestAnimationFrame(settle);
+    });
+  };
   const onWheel = event => {
     if (!scroller || event.ctrlKey || view.dragging()) return;
     // A gesture that goes on takes over from a glide onto a day start; the strip settles again once it rests.
@@ -269,7 +279,8 @@ export const CalendarWeekView = props => {
       rememberAnchor();
     });
     window.clearTimeout(restTimer);
-    restTimer = window.setTimeout(settle, fingers > 0 ? 160 : 140);
+    cancelAnimationFrame(restFrame);
+    restTimer = window.setTimeout(settleOnceStill, fingers > 0 ? 160 : 140);
   };
 
   // Days loaded before the strip's first day shift it; the view keeps its days in place.
@@ -346,6 +357,7 @@ export const CalendarWeekView = props => {
     onCleanup(() => {
       observer?.disconnect();
       window.clearTimeout(restTimer);
+      cancelAnimationFrame(restFrame);
       window.clearTimeout(reportTimer);
       window.clearTimeout(glideTimer);
       if (frame) cancelAnimationFrame(frame);