@k2b/ui 0.41.0 → 0.43.0

package/dist/types/actions/Dropdown.d.ts

@@ -22,7 +22,8 @@ export type DropdownActionBase = {
     description?: string;
     /** Quiet trailing information, such as a count. */
     trailing?: JSX.Element;
-    variant?: "danger";
+    /** `danger` for destructive entries; `accent` for the entry most people want, such as creating a blank item. */
+    variant?: "danger" | "accent";
 };
 export type DropdownAction = (DropdownActionBase & {
     action: () => void;
@@ -83,9 +84,23 @@ export type DropdownSection = {
     items: readonly (DropdownAction | DropdownChoice)[];
 };
 export type DropdownItem = DropdownAction | DropdownChoice | DropdownSection;
+/** A search field above the entries, for a menu long enough that finding an entry takes reading. */
+export type DropdownSearch = {
+    /** Names the field and is its placeholder unless `placeholder` is set, such as "Find template". */
+    label: string;
+    placeholder?: string;
+    /**
+     * The entries for a query that is not blank. Defaults to the actions and choices whose label or description contains
+     * the query, kept in their sections.
+     */
+    filter?: (query: string) => readonly DropdownItem[];
+    /** What a screen reader hears after the query changes; defaults to the number of matching entries. */
+    status?: (query: string, matches: number) => string;
+};
 export type DropdownProps = {
     items: readonly DropdownItem[];
-    children: JSX.Element;
+    /** The `Dropdown.Trigger`; leave it out for a menu opened through `attach` or `openAt`. */
+    children?: JSX.Element;
     position?: DropdownPosition | (() => DropdownPosition);
     /** Larger menu rows and typography for touch. Defaults to `default`. */
     variant?: "default" | "touch";
@@ -123,6 +138,21 @@ export type DropdownProps = {
     openAt?: (open: (anchor: DropdownAnchor, returnFocus?: DropdownReturnFocus) => void) => void;
     /** Receives `close`, which closes the menu or sheet and returns focus. */
     closeWith?: (close: () => void) => void;
+    /**
+     * Puts a search field above the entries. Focus starts in the field; Up and Down move through the matching entries,
+     * Enter chooses one, and the first stays marked while the query changes.
+     */
+    search?: DropdownSearch;
+    /**
+     * Adopts an element rendered elsewhere as the trigger, such as a server-rendered link: a plain click, Enter, Space,
+     * Up, or Down opens the menu, while a modified or middle click keeps the link. The element gets `aria-expanded` and
+     * `aria-controls`; render `aria-haspopup` with it, so the server HTML already says it opens a menu. Read once on mount.
+     */
+    attach?: () => HTMLElement | null | undefined;
+    /** `tile` sets every entry's icon on a quiet square, for menus whose icons tell entries apart, such as templates. */
+    icons?: "plain" | "tile";
+    /** One quiet sentence below the entries that explains them all, such as what choosing one keeps; it describes the menu. */
+    note?: string;
 };
 export type DropdownTriggerProps = Omit<ButtonProps, "aria-controls" | "aria-expanded" | "aria-haspopup" | "children" | "disabled" | "onClick" | "onKeyDown"> & {
     children: JSX.Element;
@@ -148,7 +178,7 @@ export type DropdownItemProps = {
     trailing?: JSX.Element;
     disabled?: boolean;
     danger?: boolean;
-    variant?: "danger";
+    variant?: "danger" | "accent";
     href?: string;
     external?: boolean;
     /** Runs when the item is chosen. With `href`, a plain click runs it instead of following the link. */
@@ -166,6 +196,7 @@ export declare function DropdownItem(props: DropdownItemProps): JSX.Element;
 export declare function DropdownItems(props: {
     items: readonly DropdownItem[];
     close: (restoreFocus?: boolean) => void;
+    role?: "menuitem" | "option";
 }): JSX.Element;
 type DropdownComponent = ((props: DropdownProps) => JSX.Element) & {
     Root: (props: DropdownProps) => JSX.Element;

package/dist/types/actions/index.d.ts

@@ -8,7 +8,7 @@ export type { DisclosureProps } from "./Disclosure";
 export { Disclosure } from "./Disclosure";
 export type { DragPayload, DragSourceProps, DropTargetProps } from "./DragAndDrop";
 export { activeDrag, DragSource, DropTarget, useKeyboardDrag } from "./DragAndDrop";
-export type { DropdownAction, DropdownActionBase, DropdownAnchor, DropdownChoice, DropdownItemProps, DropdownPosition, DropdownProps, DropdownReturnFocus, DropdownSection, DropdownTriggerProps, } from "./Dropdown";
+export type { DropdownAction, DropdownActionBase, DropdownAnchor, DropdownChoice, DropdownItemProps, DropdownPosition, DropdownProps, DropdownReturnFocus, DropdownSearch, DropdownSection, DropdownTriggerProps, } from "./Dropdown";
 export { Dropdown, DropdownItem, dropdownPosition } from "./Dropdown";
 export type { FilterChipOption, FilterChipProps, FilterChipSection, FilterToggleProps } from "./FilterChip";
 export { FilterChip, FilterToggle } from "./FilterChip";

package/dist/types/actions/menu-search.d.ts

@@ -0,0 +1,27 @@
+import { type Accessor, type JSX } from "solid-js";
+import type { DropdownItem, DropdownSearch } from "./Dropdown";
+/** The actions and choices whose label or description contains the query, kept in their sections. */
+export declare const filterDropdownItems: (items: readonly DropdownItem[], query: string, locale?: string) => DropdownItem[];
+export type MenuSearchApi = {
+    /** Moves the focus into the field and marks the first or last entry. */
+    focus: (mark: "first" | "last") => void;
+};
+/**
+ * A search field over a list box of the menu's entries: the combobox pattern. The field keeps the focus, the marked
+ * entry is its active descendant, and a polite status says how many entries match.
+ */
+export declare function MenuSearch(props: {
+    Items: (props: {
+        items: readonly DropdownItem[];
+        close: (restoreFocus?: boolean) => void;
+        role?: "menuitem" | "option";
+    }) => JSX.Element;
+    items: readonly DropdownItem[];
+    search: DropdownSearch;
+    /** Names the list box. */
+    label: string;
+    query: Accessor<string>;
+    setQuery: (query: string) => void;
+    close: (restoreFocus?: boolean) => void;
+    api?: (api: MenuSearchApi) => void;
+}): JSX.Element;

package/dist/types/actions/menu-sheet.d.ts

@@ -1,5 +1,5 @@
 import { type JSX } from "solid-js";
-import type { DropdownItem } from "./Dropdown";
+import type { DropdownItem, DropdownSearch } from "./Dropdown";
 /** Phones, where a menu opens as a bottom sheet instead of beside its trigger. */
 export declare const PHONE_SHEET_QUERY = "(max-width: 47.999rem)";
 export declare const prefersMenuSheet: () => boolean;
@@ -16,6 +16,10 @@ export type MenuSheetOptions = {
     locale: string;
     /** Shown above the menu, for example a row of quick reactions. `close` closes the sheet. */
     top?: (close: () => void) => JSX.Element;
+    search?: DropdownSearch;
+    icons?: "plain" | "tile";
+    /** A quiet sentence below the entries. */
+    note?: string;
     signal?: AbortSignal;
 };
 /** Opens menu items as a bottom sheet; resolves after the sheet closed and the chosen action ran. */

package/dist/types/content/CountryMap.d.ts

@@ -0,0 +1,21 @@
+import { type JSX } from "solid-js";
+export type CountryMapDatum = {
+    /** ISO 3166-1 alpha-2 code. Other values appear neither on the map nor in the list. */
+    code: string;
+    value: number;
+};
+export type CountryMapProps = {
+    data: readonly CountryMapDatum[];
+    /** Accessible name of the map, such as the panel title. */
+    label: string;
+    format?: (value: number) => string;
+    /** How many countries the ranked list names. */
+    limit?: number;
+    class?: string;
+};
+/**
+ * A world map that shades countries by one value, with a ranked list that names the same numbers.
+ * The geometry ships with the component, so the map makes no network request.
+ * @example <CountryMap label="Visitors" data={[{ code: "DE", value: 1200 }, { code: "FR", value: 300 }]} />
+ */
+export declare function CountryMap(props: CountryMapProps): JSX.Element;

package/dist/types/content/world-countries.d.ts

@@ -0,0 +1,6 @@
+export declare const WORLD_MAP_VIEW_WIDTH = 1000;
+export declare const WORLD_MAP_VIEW_HEIGHT = 450;
+/** ISO 3166-1 alpha-2 code and SVG path. */
+export declare const WORLD_COUNTRY_SHAPES: readonly (readonly [string, string])[];
+/** Countries too small for a shape: ISO 3166-1 alpha-2 code, x and y. */
+export declare const WORLD_COUNTRY_DOTS: readonly (readonly [string, number, number])[];

package/dist/types/country-map.d.ts

@@ -0,0 +1,2 @@
+/** A separate entry because the country shapes weigh about 90 KB; load it only where a map appears. */
+export { CountryMap, type CountryMapDatum, type CountryMapProps } from "./content/CountryMap";

package/dist/types/inputs/IconChoices.d.ts

@@ -0,0 +1,19 @@
+import { type JSX } from "solid-js";
+import type { ValueFieldProps } from "./field-contract";
+export type IconChoiceOption<T extends string = string> = {
+    value: T;
+    /** What the icon shows; screen readers and the tooltip use it, so the picture is never the only signal. */
+    label: string;
+    /** An icon class, such as `ti ti-report`. */
+    icon: string;
+};
+export type IconChoicesProps<T extends string = string> = Omit<ValueFieldProps<T | null>, "onValueChange" | "onValueCommit"> & {
+    options: readonly IconChoiceOption<T>[];
+    onValueChange?: (value: T) => void;
+    onValueCommit?: (value: T) => void;
+};
+/**
+ * A labeled single choice from a few named icons, shown as a row of icon buttons. Use `IconInput` when any icon of the
+ * catalogue is allowed.
+ */
+export declare function IconChoices<T extends string = string>(props: IconChoicesProps<T>): JSX.Element;

package/dist/types/inputs/index.d.ts

@@ -39,6 +39,8 @@ export { FileDropTarget, fileDropTarget } from "./FileDropTarget";
 export type { FileDropzoneProps, ImageCropperProps, ImageInputProps } from "./FileInputs";
 export { FileDropzone, ImageCropper, ImageInput } from "./FileInputs";
 export type { DateContext, FieldProps, MaybeAccessor, ValueFieldProps } from "./field-contract";
+export type { IconChoiceOption, IconChoicesProps } from "./IconChoices";
+export { IconChoices } from "./IconChoices";
 export { DEFAULT_ICON_GROUPS, DEFAULT_ICON_OPTIONS } from "./icon-options";
 export type { ImageCropAspect, ImageCropOutput, ImageCropRect, ImageCropRotation, ImageCropSize, ImageCropSource, ImageCropState, } from "./image-crop";
 export { clampImageCropRect, createCroppedImageCanvas, createCroppedImageDataUrl, getInitialImageCropRect, imageCropRectToPixels, normalizeImageCropRotation, resizeImageCropAroundCenter, rotateImageCropRight, } from "./image-crop";

package/dist/types/intl/messages.d.ts

@@ -42,6 +42,9 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     search: string;
     searchLabel: string;
     searchResults: string;
+    searchMatches: ({ count }: {
+        count: number;
+    }) => string;
     save: string;
     select: string;
     time: string;

package/dist/types/layout/AppWorkspace.d.ts

@@ -21,12 +21,17 @@ export type AppWorkspaceHeadProps = {
     count?: JSX.Element;
     /** Secondary actions at the end of the row. Never a filled button. */
     actions?: JSX.Element;
-    /** The one filled primary action. Below 48rem it becomes a round icon button beside the host's bottom bar. */
+    /**
+     * The one filled primary action. Below 48rem it becomes a round icon button beside the host's bottom bar. `popup`
+     * says it opens a menu, such as one a `Dropdown` with `attach` shows: server HTML then carries `aria-haspopup`, and a
+     * chevron follows the label.
+     */
     primary?: {
         label: string;
         icon: string;
         href?: string;
         onClick?: (event: MouseEvent) => void;
+        popup?: "menu" | "dialog";
     };
 };
 export type AppWorkspaceProps = {

package/dist/types/text-editor/table.d.ts

@@ -61,6 +61,8 @@ export type TableHost = {
 export type MenuAction = "completeColumns" | "rowAbove" | "rowBelow" | "colLeft" | "colRight" | "deleteRow" | "deleteCol" | "moveRowUp" | "moveRowDown" | "moveColLeft" | "moveColRight" | "toggleHeader" | "deleteTable" | "alignLeft" | "alignCenter" | "alignRight";
 export declare const tableHost: Facet<TableHost, TableHost | null>;
 export declare const tablesIn: (state: EditorState) => T.Table[];
+/** Render the same Markdown tokens as prose, keeping code and escaped markers literal. */
+export declare const renderInline: (raw: string) => string;
 /** A local source draft for one table. Invalid drafts never replace shared text.
  * Collaborative structure changes require the host's confirmed anchored action. */
 export declare const editTableSource: (view: EditorView, wrap: HTMLElement) => void;

package/dist/types/text-editor.d.ts

@@ -2,4 +2,4 @@ export { codeMirrorDictationTarget, dictationExtension } from "./text-editor/dic
 export { createTextEditor, type TextEditorController, type TextEditorMode, type TextEditorOptions } from "./text-editor/engine";
 export { commands as textEditorCommands, formatLabels as textEditorFormatLabels, type InlineFormat } from "./text-editor/format";
 export { TableSizePicker, type TableSizePickerProps, TextEditor, type TextEditorControls, type TextEditorProps, } from "./text-editor/TextEditor";
-export { editTableSource, type MenuAction, runMenuAction, runTableAction, type TableFocusTarget, type TableHost, type TableTarget, tableGrid, tableHost, } from "./text-editor/table";
+export { editTableSource, type MenuAction, renderInline, runMenuAction, runTableAction, type TableFocusTarget, type TableHost, type TableTarget, tableGrid, tableHost, } from "./text-editor/table";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.41.0",
+  "version": "0.43.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",
@@ -36,6 +36,12 @@
       "browser": "./dist/browser/charts.js",
       "default": "./dist/ssr/charts.js"
     },
+    "./country-map": {
+      "types": "./dist/types/country-map.d.ts",
+      "browser": "./dist/browser/country-map.js",
+      "import": "./dist/ssr/country-map.js",
+      "default": "./dist/ssr/country-map.js"
+    },
     "./package.json": "./package.json",
     "./map-glyphs/*": "./map-glyphs/*",
     "./text-editor": {
@@ -61,6 +67,8 @@
     "fixture:build": "bun run build && NODE_ENV=production bun run fixture/scripts/build.ts",
     "fixture:typecheck": "tsc -p fixture/tsconfig.json --noEmit --pretty false",
     "test": "bun run build && bun test --path-ignore-patterns '**/*.behavior.test.*' src scripts test/browser.browser.test.ts && bun run scripts/check-packed-consumer.ts",
+    "test:part:layout-content": "bun run build && bun test --path-ignore-patterns '**/*.behavior.test.*' src/layout src/content",
+    "test:part:rest": "bun run build && bun test --path-ignore-patterns '**/*.behavior.test.*' --path-ignore-patterns 'src/layout/**' --path-ignore-patterns 'src/content/**' src scripts test/browser.browser.test.ts && bun run scripts/check-packed-consumer.ts",
     "typecheck": "tsc --checkers 2 -p tsconfig.json --noEmit --pretty false && bun run check:declarations && bun run typecheck:dom",
     "typecheck:dom": "tsc -p test/tsconfig.json --noEmit --pretty false",
     "prepack": "bun run build"