@behindthemusictree/app-kit-ui 36.0.0 → 37.0.0

package/dist/genre-tree/index.d.ts

@@ -130,6 +130,7 @@ type SearchBoxProps = {
     onPicked?: (groupKey: string, itemKey: string) => void;
     /** Shows the clear button when set. */
     onClear?: () => void;
+    clearLabel?: string;
     /** An action left of the text, e.g. a Previous button. */
     leading?: ReactNode;
     className?: string;
@@ -137,7 +138,7 @@ type SearchBoxProps = {
     onFocus?: () => void;
 };
 /** A search pill over any number of result groups; picking an item calls that item's `onSelect`. */
-declare function SearchBox({ label, placeholder, value, onValueChange, groups, onPicked, onClear, leading, className, onFocus, }: SearchBoxProps): react.JSX.Element;
+declare function SearchBox({ label, placeholder, value, onValueChange, groups, onPicked, onClear, clearLabel, leading, className, onFocus, }: SearchBoxProps): react.JSX.Element;
 
 declare function useArtistSearchGroup(getBaseUrl: () => string, text: string, onSelect: (artist: ArtistSearchResult) => void, enabled?: boolean): SearchGroup | undefined;
 
@@ -165,6 +166,9 @@ type GenreSearchProps<T extends CriteriaPlaylistSimple = CriteriaPlaylistSimple>
     onPrevious?: () => void;
     /** Called by the clear button, after it empties the input. */
     onClear?: () => void;
+    /** Forces the clear button on or off; by default it shows while the input has something to clear. */
+    showClear?: boolean;
+    clearLabel?: string;
     placeholder?: string;
     /** Called with what the user types, and with "" on clear or pick; never when `selectedName` refills the input. */
     onQueryChange?: (query: string) => void;
@@ -173,7 +177,7 @@ type GenreSearchProps<T extends CriteriaPlaylistSimple = CriteriaPlaylistSimple>
     /** Called when the input gains focus. */
     onFocus?: () => void;
 };
-declare function GenreSearch<T extends CriteriaPlaylistSimple = CriteriaPlaylistSimple>({ genrePlaylists, onSelect, selectedName, onClear, onPrevious, placeholder, onQueryChange, extraGroups, onFocus, }: GenreSearchProps<T>): react.JSX.Element;
+declare function GenreSearch<T extends CriteriaPlaylistSimple = CriteriaPlaylistSimple>({ genrePlaylists, onSelect, selectedName, onClear, showClear, clearLabel, onPrevious, placeholder, onQueryChange, extraGroups, onFocus, }: GenreSearchProps<T>): react.JSX.Element;
 
 interface GenreSearchGroupsProps {
     query: string;
@@ -393,9 +397,10 @@ type GenreDetailPanelProps<O extends CriteriaOverview> = {
     /** Tab on the panel's inner edge, for hosts that hide and show the panel. */
     edgeTab?: ComponentProps<typeof DetailPanel>["edgeTab"];
     extras?: GenreInfoPanelBodyProps<O>["extras"];
-    headerClassName?: ComponentProps<typeof DetailPanel>["headerClassName"];
+    /** The host's search field shows this genre's name and closes the panel. */
+    titleInSearch?: boolean;
 };
-declare function GenreDetailPanel<O extends CriteriaOverview>({ genreUuid, scope, getBackendBaseUrl, onClose, onSelectGenre, onZoomIn, shareUrl, shareTarget, collapsed, expanded, onExpandedChange, edgeTab, extras, headerClassName, }: GenreDetailPanelProps<O>): react.JSX.Element;
+declare function GenreDetailPanel<O extends CriteriaOverview>({ genreUuid, scope, getBackendBaseUrl, onClose, onSelectGenre, onZoomIn, shareUrl, shareTarget, collapsed, expanded, onExpandedChange, edgeTab, extras, titleInSearch, }: GenreDetailPanelProps<O>): react.JSX.Element;
 
 type GenrePlaylistTreePerRootProps<T extends TrackBase> = {
     scope: Scope;

package/dist/genre-tree/index.js

@@ -21,7 +21,7 @@ import {
   useGenrePlaylistPlayback,
   useGenreRemoteSearchGroup,
   useSongSearchGroup
-} from "../chunk-RTXLUHJY.js";
+} from "../chunk-FTYMRCJS.js";
 import "../chunk-DKQQLLMY.js";
 export {
   GenreDetailPanel,

package/dist/index.cjs

@@ -1047,6 +1047,7 @@ function SearchBox({
   groups,
   onPicked,
   onClear,
+  clearLabel,
   leading,
   className: className2,
   onFocus
@@ -1078,6 +1079,7 @@ function SearchBox({
       status,
       loading,
       onClear,
+      clearLabel,
       leading,
       inputClassName: "focus-visible:ring-0"
     }
@@ -1173,6 +1175,8 @@ function GenreSearch({
   onSelect,
   selectedName = null,
   onClear,
+  showClear,
+  clearLabel,
   onPrevious,
   placeholder,
   onQueryChange,
@@ -1220,7 +1224,8 @@ function GenreSearch({
         if (groupKey !== "genres") setQuery("");
         onQueryChange?.("");
       },
-      onClear: canClear ? () => {
+      clearLabel,
+      onClear: showClear ?? canClear ? () => {
         clear();
         onQueryChange?.("");
       } : void 0,
@@ -2057,10 +2062,12 @@ function useGenreDetailContent({
     };
   }, [detail, scope]);
   if (isError) return {
+    name: null,
     title: "Genre unavailable",
     content: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { role: "alert", className: "p-4 text-sm text-[var(--color-text)]", children: "This genre could not be loaded." })
   };
   if (isPending || !detail || !view) return {
+    name: null,
     title: "Loading genre\u2026",
     content: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-3 p-4", "aria-busy": "true", "data-testid": "genre-detail-panel-skeleton", children: [
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui10.Skeleton, { className: "h-6 w-2/3" }),
@@ -2082,6 +2089,7 @@ function useGenreDetailContent({
   );
   const ancestors = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_genre_tree_view4.GenreNodeAncestors, { ancestorNodes: view.ancestorNodes, onSelectNode: selectGenre });
   return {
+    name: detail.name,
     title: detail.name,
     headerAccent: { background: view.fill, color: import_genre_tree_view4.ACCENT_TEXT_COLOR },
     aside: expanded ? ancestors : void 0,
@@ -2123,7 +2131,7 @@ function GenreDetailPanel({
   onExpandedChange,
   edgeTab,
   extras,
-  headerClassName
+  titleInSearch
 }) {
   const panel = useGenreDetailContent({
     genreUuid,
@@ -2146,7 +2154,7 @@ function GenreDetailPanel({
       onExpandedChange,
       edgeTab,
       aside: panel.aside,
-      headerClassName,
+      titleInSearch,
       headerActions: onExpandedChange ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui10.IconButton, { "aria-label": expanded ? "Shrink panel" : "Extend panel", onClick: () => onExpandedChange(!expanded), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react12.Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react12.Maximize2, { "aria-hidden": "true", className: "h-4 w-4" }) }) : void 0,
       children: panel.content
     }
@@ -3122,7 +3130,6 @@ function GenreTreeView({
     if (node !== null && songUuid !== null) changeSong(null);
     selectNode(node);
   };
-  const handleGenreSearchClear = clearSelection;
   const handleGenreSearchSelect = (genrePlaylist2) => {
     reopenPanel();
     if (songUuid !== null) changeSong(null);
@@ -3205,7 +3212,7 @@ function GenreTreeView({
       expanded: overlayPanel.expanded ?? false,
       onExpandedChange: overlayPanel.onExpandedChange,
       onClose: overlayPanel.onClose,
-      compact: false
+      titleInSearch: false
     };
   } else if (selectedGenreUuid) {
     activePanel = {
@@ -3215,7 +3222,7 @@ function GenreTreeView({
       expanded: isExpanded,
       onExpandedChange: changeExpanded,
       onClose: clearSelection,
-      compact: false,
+      titleInSearch: true,
       headerAccent: relations ? { background: relations.fill, color: relations.textColor } : genreContent.headerAccent
     };
   } else if (builtInPanel) {
@@ -3226,7 +3233,7 @@ function GenreTreeView({
       expanded: builtInPanel.expanded,
       onExpandedChange: builtInPanel.onExpandedChange,
       onClose: builtInPanel.onClose,
-      compact: true
+      titleInSearch: true
     };
   }
   const isPanelShown = activePanel !== null && (selectedGenreUuid !== null || isTreeReady);
@@ -3294,8 +3301,10 @@ function GenreTreeView({
           if (songUuid) changeSong(null);
           selectGenre(uuid);
         },
-        selectedName: (selectedGenreUuid ? genreContent.title : null) ?? (typeof builtInPanel?.title === "string" ? builtInPanel.title : null),
-        onClear: builtInSongPanel ? () => changeSong(null) : builtInArtistPanel ? () => changeArtist(null) : handleGenreSearchClear,
+        selectedName: selectedGenreUuid ? genreContent.name : typeof builtInPanel?.title === "string" ? builtInPanel.title : null,
+        onClear: activePanel?.onClose,
+        showClear: activePanel?.titleInSearch ?? false,
+        clearLabel: "Close panel",
         onPrevious: handlePrevious,
         onQueryChange: onSearchQueryChange,
         onFocus: onSearchFocus,
@@ -3485,8 +3494,7 @@ function GenreTreeView({
               ref: panelRef,
               side: "left",
               title: activePanel?.title ?? "",
-              hideTitle: activePanel?.compact,
-              hideClose: activePanel?.compact,
+              titleInSearch: activePanel?.titleInSearch,
               headerAccent: activePanel?.headerAccent,
               headerActions: expandButton,
               onClose: activePanel?.onClose ?? noop,
@@ -3495,7 +3503,7 @@ function GenreTreeView({
               onExpandedChange: activePanel?.onExpandedChange,
               aside: activePanel?.aside,
               edgeTab: detailTab,
-              headerClassName: "pt-[calc(var(--layout-search-h)+var(--layout-panel-inset)+0.5rem)]",
+              headerClassName: activePanel?.titleInSearch ? void 0 : "pt-[calc(var(--layout-search-h)+var(--layout-panel-inset)+0.5rem)]",
               children: activePanel?.aside && !activePanel.expanded ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
                 activePanel.content,
                 activePanel.aside