@adecore/ui 0.38.0 → 0.40.0

package/src/locales.ts

@@ -3,16 +3,12 @@ import type { i18n as I18n } from 'i18next';
 import en from './locales/en.ts';
 import nl from './locales/nl.ts';
 
-/* The words of this library live in a namespace of their own, which the app adds to its i18next beside its own namespaces. */
 export const UI_NAMESPACE = 'ui';
 
-/*
- * Every language the library speaks, by language code. Small enough to ship whole, which is what lets
- * `addUiResources` run synchronously before the first render, so no word ever shows as its key.
- */
+/* Small enough to ship whole, so `addUiResources` runs before the first render and no word shows as its key. */
 export const UI_RESOURCES: Readonly<Record<string, Record<string, unknown>>> = { en, nl };
 
-/* Adds the `ui` namespace in every language to an i18next instance. A language the app already filled keeps its words. */
+/* A language the app already filled keeps its words. */
 export const addUiResources = (i18n: I18n): void => {
     for (const [language, words] of Object.entries(UI_RESOURCES)) {
         if (!i18n.hasResourceBundle(language, UI_NAMESPACE)) {

package/src/match.ts

@@ -3,24 +3,31 @@ const WORD_START = /[\s\-_./:]/;
 /* Whether `query` starts the text or one of its words. */
 const startsWord = (text: string, query: string): boolean => {
     let at = text.indexOf(query);
+
     while (at !== -1) {
         if (at === 0 || WORD_START.test(text[at - 1]!)) {
             return true;
         }
+
         at = text.indexOf(query, at + 1);
     }
+
     return false;
 };
 
 const lettersInOrder = (text: string, query: string): boolean => {
     let at = 0;
+
     for (const letter of query.replace(/\s+/g, '')) {
         at = text.indexOf(letter, at);
+
         if (at === -1) {
             return false;
         }
+
         at += 1;
     }
+
     return true;
 };
 
@@ -32,19 +39,26 @@ const lettersInOrder = (text: string, query: string): boolean => {
  */
 export function matchScore(text: string, query: string): number | null {
     const wanted = query.trim().toLowerCase();
+
     if (wanted === '') {
         return 0;
     }
+
     const haystack = text.toLowerCase();
+
     if (haystack.startsWith(wanted)) {
         return 5;
     }
+
     if (startsWord(haystack, wanted)) {
         return 4;
     }
+
     const words = wanted.split(/\s+/);
+
     if (words.every((word) => haystack.includes(word))) {
         return haystack.startsWith(words[0]!) ? 3 : 2;
     }
+
     return lettersInOrder(haystack, wanted) ? 1 : null;
 }

package/src/menu/parts.tsx

@@ -20,25 +20,20 @@ type PositionerProps = ComponentProps<typeof BaseMenu.Positioner>;
 
 type Placement = Pick<PositionerProps, PlacementKey>;
 
-/*
- * A menu hangs under its trigger, lined up with its start, unless there is no room. A context menu
- * opens at the pointer, which its positioner already knows. A submenu sits beside its row, pulled
- * up by the popup's own padding so its first row lines up with the row that opened it.
- */
+/* A context menu opens at the pointer, which its positioner already knows. A submenu is pulled up by the popup's padding so its first row lines up with the row that opened it. */
 const PLACEMENT: Record<MenuKind, Placement> = {
     menu: { side: 'bottom', align: 'start', sideOffset: 6 },
     context: {},
     submenu: { sideOffset: 4, alignOffset: -4 }
 };
 
-/* The label above a group of rows. It takes the line height of the row it sits in. */
+/* It takes the line height of the row it sits in. */
 export const MENU_LABEL = 'px-2.5 pt-1.5 pb-0.5 text-xs/[inherit] text-text-faint';
 
 /* A trailing hint in a row: what the item does to something else, never a shortcut. A shortcut stays a `Kbd`, which `.menu-item` already pushes to the right. */
 const MENU_HINT = 'ml-auto pl-3 text-xs/[inherit] text-text-faint';
 
-/* The hairline between two groups of rows. It runs the whole width of the popup, which is what the
-   negative margin buys back from its 4px of padding, and it is softer than a border a surface ends with. */
+/* The negative margin buys back the popup's 4px of padding, so the line runs its whole width. */
 const MENU_SEPARATOR = '-mx-1 my-1 h-px bg-border-soft';
 
 export function MenuRoot(props: ComponentProps<typeof BaseMenu.Root>) {
@@ -71,14 +66,10 @@ export const ContextMenuTrigger = BaseContextMenu.Trigger;
 
 export type MenuPopupProps = ComponentProps<typeof BaseMenu.Popup> & Placement;
 
-/*
- * The shell every menu is drawn in: the portal, the layer it sits on and the gap to its trigger are
- * decided once. The popup scrolls inside the room the window leaves it; `className` adds a minimum
- * width or a layout of its own, such as a grid of swatches.
- */
 export function MenuPopup({ className, ...props }: MenuPopupProps) {
     const defaults = PLACEMENT[useContext(MenuKindContext)];
     const [placement, popupProps] = splitPlacement(props);
+
     return (
         <BaseMenu.Portal>
             <BaseMenu.Positioner
@@ -97,11 +88,7 @@ export function MenuPopup({ className, ...props }: MenuPopupProps) {
 }
 
 type ItemLook = {
-    /*
-     * Leaves the row out: no padding, highlight or indicator, only what makes it an item (the arrow
-     * keys, typeahead, closing the menu). For an icon button, a swatch, a link or a segment inside a
-     * menu, which draws itself and its own highlight.
-     */
+    /* Keeps only the item's behavior, for a swatch, a link or a segment that draws itself and its own highlight. */
     unstyled?: boolean;
 };
 
@@ -114,19 +101,18 @@ export function MenuItem({ unstyled = false, className, ...props }: MenuItemProp
 export interface MenuCheckProps {
     /* One of several is a bare tick; on or off is a tick in an outlined box, which says the row can be off. */
     kind: 'radio' | 'checkbox';
+
     /* Only for a row that is not a radio or checkbox item, and so has no indicator of its own. */
     checked?: boolean;
+
     className?: string;
     ref?: Ref<HTMLSpanElement>;
 }
 
-/*
- * The slot before the label of a row that can be checked, in a menu or a list that reads as one. It
- * is one line of the row tall, so a row with a second line keeps the tick beside its first. Radio and
- * checkbox items draw it themselves; a plain row that shows a state hands it `checked`.
- */
+/* One line of the row tall, so a row with a second line keeps the tick beside its first. */
 export function MenuCheck({ kind, checked, className, ref }: MenuCheckProps) {
     const tick = <Icon icon={Check} size={kind === 'radio' ? 14 : 12} />;
+
     const indicator =
         checked !== undefined ? (
             checked && tick
@@ -135,6 +121,7 @@ export function MenuCheck({ kind, checked, className, ref }: MenuCheckProps) {
         ) : (
             <BaseMenu.CheckboxItemIndicator className="flex">{tick}</BaseMenu.CheckboxItemIndicator>
         );
+
     return (
         <span ref={ref} className={clsx('grid h-lh w-4 shrink-0 place-items-center', className)}>
             {kind === 'checkbox' ? <span className="grid h-4 w-4 place-items-center rounded border border-border-strong">{indicator}</span> : indicator}
@@ -149,20 +136,21 @@ type Indicator = {
 
 type MenuCheckboxItemProps = ComponentProps<typeof BaseMenu.CheckboxItem> & ItemLook & Indicator & { children?: ReactNode };
 
-/* A row that is on or off. The box before its label is part of it. */
+const checkRow = (kind: MenuCheckProps['kind'], unstyled: boolean, indicator: Indicator['indicator'], children: ReactNode) =>
+    unstyled ? (
+        children
+    ) : (
+        <>
+            {indicator === 'start' && <MenuCheck kind={kind} />}
+            {children}
+            {indicator === 'end' && <MenuCheck kind={kind} className="ml-auto" />}
+        </>
+    );
+
 export function MenuCheckboxItem({ unstyled = false, indicator = 'start', className, children, ...props }: MenuCheckboxItemProps) {
-    if (unstyled) {
-        return (
-            <BaseMenu.CheckboxItem className={className} {...props}>
-                {children}
-            </BaseMenu.CheckboxItem>
-        );
-    }
     return (
-        <BaseMenu.CheckboxItem className={withClass('menu-item', className)} {...props}>
-            {indicator === 'start' && <MenuCheck kind="checkbox" />}
-            {children}
-            {indicator === 'end' && <MenuCheck kind="checkbox" className="ml-auto" />}
+        <BaseMenu.CheckboxItem className={unstyled ? className : withClass('menu-item', className)} {...props}>
+            {checkRow('checkbox', unstyled, indicator, children)}
         </BaseMenu.CheckboxItem>
     );
 }
@@ -171,26 +159,17 @@ export const MenuRadioGroup = BaseMenu.RadioGroup;
 
 type MenuRadioItemProps = ComponentProps<typeof BaseMenu.RadioItem> & ItemLook & Indicator & { children?: ReactNode };
 
-/* One of several. The tick before its label is part of it. */
 export function MenuRadioItem({ unstyled = false, indicator = 'start', className, children, ...props }: MenuRadioItemProps) {
-    if (unstyled) {
-        return (
-            <BaseMenu.RadioItem className={className} {...props}>
-                {children}
-            </BaseMenu.RadioItem>
-        );
-    }
     return (
-        <BaseMenu.RadioItem className={withClass('menu-item', className)} {...props}>
-            {indicator === 'start' && <MenuCheck kind="radio" />}
-            {children}
-            {indicator === 'end' && <MenuCheck kind="radio" className="ml-auto" />}
+        <BaseMenu.RadioItem className={unstyled ? className : withClass('menu-item', className)} {...props}>
+            {checkRow('radio', unstyled, indicator, children)}
         </BaseMenu.RadioItem>
     );
 }
 
 type SubmenuTriggerProps = ComponentProps<typeof BaseMenu.SubmenuTrigger> & {
     children?: ReactNode;
+
     /* The chevron at the end of the row that says it opens more. Off for a row that carries a hint there instead. */
     chevron?: boolean;
 };
@@ -206,18 +185,17 @@ export function MenuSubmenuTrigger({ className, children, chevron = true, ...pro
 
 export type MenuRowProps = useRender.ComponentProps<'div'>;
 
-/*
- * A row with buttons at its end that reads as one row. Its first item is the row, every `RowAction`
- * and `RowSubmenuTrigger` after it an item of its own, so the arrow keys reach each.
- */
+/* Its first item is the row, every `RowAction` and `RowSubmenuTrigger` after it an item of its own, so the arrow keys reach each. */
 export function MenuRow({ render, className, ref, ...props }: MenuRowProps) {
     return useRender({ render, ref, defaultTagName: 'div', props: { role: 'group', ...props, className: clsx('menu-row', className) } });
 }
 
 type RowButton = {
     icon: LucideIcon;
+
     /* The button's accessible name. Unlike the `label` of an item, typing never lands on the button. */
     label: string;
+
     /* Classes for the icon rather than the button, such as a fill. The size stays the row's. */
     iconClassName?: string;
 };
@@ -237,10 +215,7 @@ export function MenuRowAction({ icon, label, iconClassName, className, ...props
 
 export type MenuRowSubmenuTriggerProps = Omit<ComponentProps<typeof BaseMenu.SubmenuTrigger>, 'children' | 'label'> & RowButton;
 
-/*
- * A button in a `Menu.Row` that opens a submenu, inside a `Menu.SubmenuRoot`. It has no tooltip: the
- * submenu opens on the same hover and says what the button holds.
- */
+/* No tooltip: the submenu opens on the same hover and says what the button holds. */
 export function MenuRowSubmenuTrigger({ icon, label, iconClassName, className, ...props }: MenuRowSubmenuTriggerProps) {
     return (
         <BaseMenu.SubmenuTrigger className={withClass('menu-item menu-row-action', className)} aria-label={label} {...props}>

package/src/middle-truncate.ts

@@ -1,41 +1,50 @@
 export interface MiddleCut {
     head: string;
+
     /* What the ellipsis stands for; still in the text, so a copy or a find reads it. */
     middle: string;
+
     tail: string;
 }
 
 export const MIDDLE_ELLIPSIS = '…';
 
 /*
- * The head and tail of `text` that keep the most of it around an ellipsis within `width`, or null
- * when the whole text fits. The tail gets the odd character, since the end of a path or a branch is
- * what tells two of them apart. Code points, never UTF-16 units, so a cut never halves a character.
+ * Null when the whole text fits. The tail gets the odd character, since the end of a path is what tells
+ * two of them apart. Code points, never UTF-16 units, so a cut never halves a character.
  */
 export function fitMiddle(text: string, width: number, measure: (text: string) => number): MiddleCut | null {
     if (measure(text) <= width) {
         return null;
     }
+
     const characters = Array.from(text);
+
     const cutAt = (kept: number): MiddleCut => {
         const headLength = Math.floor(kept / 2);
         const tailStart = characters.length - (kept - headLength);
+
         return {
             head: characters.slice(0, headLength).join(''),
             middle: characters.slice(headLength, tailStart).join(''),
             tail: characters.slice(tailStart).join('')
         };
     };
+
     const fits = (cut: MiddleCut): boolean => measure(cut.head + MIDDLE_ELLIPSIS + cut.tail) <= width;
+
     let low = 0;
     let high = characters.length - 1;
+
     while (low < high) {
         const kept = Math.ceil((low + high) / 2);
+
         if (fits(cutAt(kept))) {
             low = kept;
         } else {
             high = kept - 1;
         }
     }
+
     return cutAt(low);
 }

package/src/modality.ts

@@ -7,6 +7,7 @@ const set = (modality: Modality): void => {
     if (current === modality) {
         return;
     }
+
     current = modality;
     document.documentElement.dataset.modality = modality;
 };
@@ -19,8 +20,10 @@ export function startInputModality(): void {
     if (started) {
         return;
     }
+
     started = true;
     set('pointer');
+
     window.addEventListener(
         'keydown',
         (event) => {
@@ -31,6 +34,7 @@ export function startInputModality(): void {
         },
         { capture: true }
     );
+
     window.addEventListener('pointerdown', () => set('pointer'), { capture: true, passive: true });
     window.addEventListener('pointermove', () => set('pointer'), { capture: true, passive: true });
 }

package/src/placement.ts

@@ -14,13 +14,14 @@ const PLACEMENT_KEYS = [
 
 export type PlacementKey = (typeof PLACEMENT_KEYS)[number];
 
-/* Splits a popup part's props into what goes to the positioner and what goes to the popup. */
 export function splitPlacement<Props extends Partial<Record<PlacementKey, unknown>>>(props: Props): [Pick<Props, PlacementKey>, Omit<Props, PlacementKey>] {
     const placement: Record<string, unknown> = {};
     const rest: Record<string, unknown> = { ...props };
+
     for (const key of PLACEMENT_KEYS) {
         placement[key] = props[key];
         delete rest[key];
     }
+
     return [placement as Pick<Props, PlacementKey>, rest as Omit<Props, PlacementKey>];
 }

package/src/platform.ts

@@ -3,7 +3,9 @@ export const isApplePlatform = (): boolean => {
     if (typeof navigator === 'undefined') {
         return false;
     }
+
     const hints = (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData;
+
     return applePlatformFrom(hints?.platform || navigator.platform);
 };
 

package/src/popover/parts.tsx

@@ -5,10 +5,7 @@ import { withClass } from '../class-name.ts';
 import { splitPlacement, type PlacementKey } from '../placement.ts';
 import { renderPositioner } from '../popup-layer.ts';
 
-/*
- * The surface a popup is drawn on. `menu` is the padded card menus use, `picker` a card whose
- * content runs to its edges (a search field on top of a list), and `plain` leaves the surface to the caller.
- */
+/* `picker` is a card whose content runs to its edges, `plain` leaves the surface to the caller. */
 const POPUP_VARIANT = {
     menu: 'menu-popup',
     picker: 'picker-popup',
@@ -34,9 +31,9 @@ export type PopoverPopupProps = ComponentProps<typeof BasePopover.Popup> &
         variant?: PopupVariant;
     };
 
-/* The portal, the positioner and the popup of a popover: under its trigger and lined up with its start unless it says otherwise. */
 export function PopoverPopup({ variant = 'menu', side = 'bottom', align = 'start', sideOffset = 8, className, ...props }: PopoverPopupProps) {
     const [placement, popupProps] = splitPlacement(props);
+
     return (
         <BasePopover.Portal>
             <BasePopover.Positioner className="popup-positioner" render={renderPositioner} {...placement} side={side} align={align} sideOffset={sideOffset}>
@@ -58,6 +55,7 @@ export type PreviewCardPopupProps = ComponentProps<typeof BasePreviewCard.Popup>
 /* A card that opens while the pointer rests on its trigger, drawn like a popover. */
 export function PreviewCardPopup({ variant = 'menu', side = 'bottom', align = 'start', sideOffset = 8, className, ...props }: PreviewCardPopupProps) {
     const [placement, popupProps] = splitPlacement(props);
+
     return (
         <BasePreviewCard.Portal>
             <BasePreviewCard.Positioner className="z-(--z-popup)" {...placement} side={side} align={align} sideOffset={sideOffset}>

package/src/popup-layer.ts

@@ -4,20 +4,22 @@ import { createElement, useLayoutEffect, type ComponentProps } from 'react';
 const open = new Set<symbol>();
 
 /*
- * Marks the root with `data-popup-open` while a popup is open, which the theme reads to turn the
- * window's drag regions off. An attribute on the root instead of `:root:has(...)`, which made the
- * browser restyle the whole page on every DOM insertion.
+ * The theme reads `data-popup-open` to turn the window's drag regions off. An attribute instead of
+ * `:root:has(...)`, which made the browser restyle the whole page on every DOM insertion.
  */
 function usePopupLayer(isOpen: boolean): void {
     useLayoutEffect(() => {
         if (!isOpen) {
             return;
         }
+
         const self = Symbol('popup');
         open.add(self);
         document.documentElement.setAttribute('data-popup-open', '');
+
         return () => {
             open.delete(self);
+
             if (open.size === 0) {
                 document.documentElement.removeAttribute('data-popup-open');
             }
@@ -27,8 +29,8 @@ function usePopupLayer(isOpen: boolean): void {
 
 function LayerPositioner({ open: isOpen, ...props }: ComponentProps<'div'> & { readonly open: boolean }) {
     usePopupLayer(isOpen);
+
     return createElement('div', props);
 }
 
-/* The `render` of a popup's positioner, which knows whether the popup is open and so marks the root for as long as it is. */
 export const renderPositioner = (props: ComponentProps<'div'>, state: { open: boolean }) => createElement(LayerPositioner, { ...props, open: state.open });

package/src/prefetch.ts

@@ -4,9 +4,8 @@ export type Loader = () => Promise<unknown>;
 export type WhenIdle = (run: () => void) => void;
 
 /*
- * Loads lazy modules ahead of their first opening, one per idle moment and never two at once, so
- * the first open resolves from the module cache. A loader registered while everything is on
- * joins the end, which is how a lazy surface inside another lazy one gets its turn.
+ * One module per idle moment and never two at once. A loader registered while everything is on joins
+ * the end, which is how a lazy surface inside another lazy one gets its turn.
  */
 export class Prefetcher {
     private readonly registered: Loader[] = [];
@@ -16,6 +15,7 @@ export class Prefetcher {
     private running: Promise<void> | null = null;
     private loading = false;
     private readonly whenIdle: WhenIdle;
+
     /* Asked on every ask and again before every load, since a person can turn data saving on while the page runs. */
     private readonly allowed: () => boolean;
 
@@ -31,17 +31,19 @@ export class Prefetcher {
 
     register(load: Loader): void {
         this.registered.push(load);
+
         if (this.everythingOn) {
             this.enqueue(load);
         }
     }
 
-    /* Loads this one module, ahead of whatever is registered. */
     prefetch(load: Loader): Promise<void> {
         if (!this.allowed()) {
             return Promise.resolve();
         }
+
         this.enqueue(load);
+
         return this.drain();
     }
 
@@ -50,10 +52,13 @@ export class Prefetcher {
         if (!this.allowed()) {
             return Promise.resolve();
         }
+
         this.everythingOn = true;
+
         for (const load of this.registered) {
             this.enqueue(load);
         }
+
         return this.drain();
     }
 
@@ -61,6 +66,7 @@ export class Prefetcher {
         if (this.queued.has(load)) {
             return;
         }
+
         this.queued.add(load);
         this.queue.push(load);
         void this.drain();
@@ -71,6 +77,7 @@ export class Prefetcher {
         if (this.running === null && this.queue.length > 0) {
             this.running = this.loadQueue();
         }
+
         return this.running ?? Promise.resolve();
     }
 
@@ -78,12 +85,16 @@ export class Prefetcher {
         try {
             for (let load = this.queue.shift(); load; load = this.queue.shift()) {
                 await new Promise<void>((resolve) => this.whenIdle(resolve));
+
                 if (!this.allowed()) {
                     // Data saving came on while it waited; a later ask may queue it again.
                     this.queued.delete(load);
+
                     continue;
                 }
+
                 this.loading = true;
+
                 try {
                     await load();
                 } catch {
@@ -100,19 +111,21 @@ export class Prefetcher {
 
 /* Safari has no idle callback; the timeout at least lets the frame that asked finish first. */
 const FALLBACK_DELAY_MS = 50;
+
 /* A canvas that keeps drawing (a blinking cursor, a stream) may never leave an idle moment, and a prefetch that never runs helps nobody. */
 const IDLE_TIMEOUT_MS = 2000;
 
 const whenIdle: WhenIdle = (run) => {
     if (typeof requestIdleCallback === 'function') {
         requestIdleCallback(() => run(), { timeout: IDLE_TIMEOUT_MS });
+
         return;
     }
+
     setTimeout(run, FALLBACK_DELAY_MS);
 };
 
 /* Not in every DOM typing yet, and only Chromium reports it. */
 const savesData = (): boolean => (navigator as { connection?: { saveData?: boolean } }).connection?.saveData === true;
 
-/* The one every `lazyNamed` and `lazyDialog` registers with. */
 export const prefetcher = /* @__PURE__ */ new Prefetcher(whenIdle, () => !savesData());

package/src/project-switcher-row.tsx

@@ -15,6 +15,7 @@ export function ProjectSwitcherRow<Item extends ProjectSwitcherItem>({
 }) {
     const { t } = useTranslation('ui');
     const hasActions = Boolean(project.actions);
+
     const item = (
         <Menu.Item
             className={clsx('min-w-0', project.muted && 'opacity-50')}
@@ -27,6 +28,7 @@ export function ProjectSwitcherRow<Item extends ProjectSwitcherItem>({
             {project.hint && <span className="ml-auto truncate pl-3 text-xs text-text-faint">{project.hint}</span>}
         </Menu.Item>
     );
+
     const row = project.description ? (
         <Tooltip label={project.description} side="right" sideOffset={hasActions ? 41 : undefined}>
             {item}

package/src/segmented-keys.ts

@@ -5,6 +5,7 @@ const STEPS: Readonly<Record<string, number>> = { ArrowRight: 1, ArrowDown: 1, A
 // The index of the one tab stop: the picked option, or the first that can be picked when that one is missing or disabled.
 export function segmentedStop<T extends string>(options: readonly SegmentedOption<T>[], value: T): number {
     const picked = options.findIndex((option) => option.id === value);
+
     return picked !== -1 && !options[picked]!.disabled ? picked : options.findIndex((option) => !option.disabled);
 }
 
@@ -13,21 +14,26 @@ export function segmentedTarget(options: readonly SegmentedOption<string>[], ind
     const nearest = (from: number, step: number): number | null => {
         for (let offset = 0; offset < options.length; offset++) {
             const candidate = (((from + step * offset) % options.length) + options.length) % options.length;
+
             if (!options[candidate]!.disabled) {
                 return candidate;
             }
         }
+
         return null;
     };
 
     if (key in STEPS) {
         return nearest(index + STEPS[key]!, STEPS[key]!);
     }
+
     if (key === 'Home') {
         return nearest(0, 1);
     }
+
     if (key === 'End') {
         return nearest(options.length - 1, -1);
     }
+
     return null;
 }

package/src/select-shared.ts

@@ -4,8 +4,10 @@ import clsx from 'clsx';
 export interface SelectItem<T extends string> {
     value: T;
     label: string;
+
     /* A second line under the label, for what the choice does. */
     description?: string;
+
     icon?: ReactNode;
     disabled?: boolean;
 }

package/src/selection.ts

@@ -1,22 +1,22 @@
-/*
- * The text selection, as a context menu has to read it. The app has one selection at a time and a
- * menu belongs to the surface the click landed on, so both of these are scoped to an element.
- * A selection somewhere else is no selection this menu can copy.
- */
+/* A menu belongs to the surface the click landed on, so both of these are scoped to an element: a selection elsewhere is none this menu can copy. */
 
 export const selectionWithin = (element: HTMLElement | null): string => {
     const selection = window.getSelection();
+
     if (!element || !selection || selection.isCollapsed || selection.rangeCount === 0) {
         return '';
     }
+
     return element.contains(selection.getRangeAt(0).commonAncestorContainer) ? selection.toString() : '';
 };
 
 export const selectAllWithin = (element: HTMLElement | null): void => {
     const selection = window.getSelection();
+
     if (!element || !selection) {
         return;
     }
+
     const range = document.createRange();
     range.selectNodeContents(element);
     selection.removeAllRanges();

package/src/settings/ConfirmDialog.tsx

@@ -7,10 +7,13 @@ export interface ConfirmDialogProps {
     title: string;
     description: string;
     confirmLabel: string;
+
     /* Closes the dialog once it resolves; a rejection stays on screen as the reason. */
     onConfirm(): Promise<void>;
+
     /* Extra on the popup. */
     className?: string;
+
     ref?: Ref<HTMLDivElement>;
 }