@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.e16cf59

package/dist/elements/Hierarchy/Search/HierarchySearchInput.js

@@ -0,0 +1,115 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { FilterIcon } from '../../../icons/Filter/index.js';
+import { SearchIcon } from '../../../icons/Search/index.js';
+import { XIcon } from '../../../icons/X/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { CheckboxPopup } from '../../CheckboxPopup/index.js';
+const baseClass = 'hierarchy-search-input';
+export const HierarchySearchInput = t0 => {
+  const $ = _c(9);
+  const {
+    collectionSpecificOptions,
+    onChange,
+    onClear,
+    onFilterChange,
+    onSearch,
+    placeholder,
+    selectedFilters: t1,
+    value
+  } = t0;
+  const selectedFilters = t1 === undefined ? [] : t1;
+  const {
+    t
+  } = useTranslation();
+  let t2;
+  if ($[0] !== onChange) {
+    t2 = e => {
+      onChange(e.target.value);
+    };
+    $[0] = onChange;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const handleChange = t2;
+  let t3;
+  if ($[2] !== onSearch || $[3] !== value) {
+    t3 = e_0 => {
+      if (e_0.key === "Enter" && value.length > 0) {
+        onSearch(value);
+      }
+    };
+    $[2] = onSearch;
+    $[3] = value;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const handleKeyDown = t3;
+  let t4;
+  if ($[5] !== onClear) {
+    t4 = () => {
+      onClear();
+    };
+    $[5] = onClear;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  const handleClear = t4;
+  let t5;
+  if ($[7] !== onFilterChange) {
+    t5 = t6 => {
+      const {
+        selectedValues
+      } = t6;
+      onFilterChange?.(selectedValues);
+    };
+    $[7] = onFilterChange;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  const handleFilterChange = t5;
+  const hasFilters = collectionSpecificOptions && collectionSpecificOptions.length > 0;
+  const hasActiveFilters = selectedFilters.length > 0;
+  const hasValue = value.length > 0;
+  return _jsxs("div", {
+    className: baseClass,
+    children: [_jsx("div", {
+      className: `${baseClass}__icon-container`,
+      children: _jsx(SearchIcon, {})
+    }), _jsx("input", {
+      "aria-label": placeholder,
+      className: `${baseClass}__input`,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      placeholder,
+      type: "text",
+      value
+    }), _jsxs("div", {
+      className: `${baseClass}__actions`,
+      children: [hasValue && _jsx("button", {
+        "aria-label": t("general:clear"),
+        className: `${baseClass}__clear`,
+        onClick: handleClear,
+        type: "button",
+        children: _jsx(XIcon, {})
+      }), hasFilters && _jsx(CheckboxPopup, {
+        Button: _jsx("div", {
+          "aria-label": t("general:filter"),
+          className: [`${baseClass}__filter`, hasActiveFilters && `${baseClass}__filter--active`].filter(Boolean).join(" "),
+          children: _jsx(FilterIcon, {})
+        }),
+        onChange: handleFilterChange,
+        options: collectionSpecificOptions,
+        selectedValues: selectedFilters
+      })]
+    })]
+  });
+};
+//# sourceMappingURL=HierarchySearchInput.js.map

package/dist/elements/Hierarchy/Search/HierarchySearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HierarchySearchInput.js","names":["c","_c","React","useCallback","FilterIcon","SearchIcon","XIcon","useTranslation","CheckboxPopup","baseClass","HierarchySearchInput","t0","$","collectionSpecificOptions","onChange","onClear","onFilterChange","onSearch","placeholder","selectedFilters","t1","value","undefined","t","t2","e","target","handleChange","t3","e_0","key","length","handleKeyDown","t4","handleClear","t5","t6","selectedValues","handleFilterChange","hasFilters","hasActiveFilters","hasValue","_jsxs","className","children","_jsx","onKeyDown","type","onClick","Button","filter","Boolean","join","options"],"sources":["../../../../src/elements/Hierarchy/Search/HierarchySearchInput.tsx"],"sourcesContent":["'use client'\n\nimport type { ChangeEvent, KeyboardEvent } from 'react'\n\nimport React, { useCallback } from 'react'\n\nimport { FilterIcon } from '../../../icons/Filter/index.js'\nimport { SearchIcon } from '../../../icons/Search/index.js'\nimport { XIcon } from '../../../icons/X/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { CheckboxPopup } from '../../CheckboxPopup/index.js'\n\nconst baseClass = 'hierarchy-search-input'\n\ntype FilterOption = {\n  label: string\n  value: string\n}\n\ntype HierarchySearchInputProps = {\n  collectionSpecificOptions?: FilterOption[]\n  onChange: (value: string) => void\n  onClear: () => void\n  onFilterChange?: (values: string[]) => void\n  onSearch: (value: string) => void\n  placeholder?: string\n  selectedFilters?: string[]\n  value: string\n}\n\nexport const HierarchySearchInput: React.FC<HierarchySearchInputProps> = ({\n  collectionSpecificOptions,\n  onChange,\n  onClear,\n  onFilterChange,\n  onSearch,\n  placeholder,\n  selectedFilters = [],\n  value,\n}) => {\n  const { t } = useTranslation()\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange(e.target.value)\n    },\n    [onChange],\n  )\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter' && value.length > 0) {\n        onSearch(value)\n      }\n    },\n    [value, onSearch],\n  )\n\n  const handleClear = useCallback(() => {\n    onClear()\n  }, [onClear])\n\n  const handleFilterChange = useCallback(\n    ({ selectedValues }: { selectedValues: string[] }) => {\n      onFilterChange?.(selectedValues)\n    },\n    [onFilterChange],\n  )\n\n  const hasFilters = collectionSpecificOptions && collectionSpecificOptions.length > 0\n  const hasActiveFilters = selectedFilters.length > 0\n  const hasValue = value.length > 0\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__icon-container`}>\n        <SearchIcon />\n      </div>\n      <input\n        aria-label={placeholder}\n        className={`${baseClass}__input`}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        placeholder={placeholder}\n        type=\"text\"\n        value={value}\n      />\n      <div className={`${baseClass}__actions`}>\n        {hasValue && (\n          <button\n            aria-label={t('general:clear')}\n            className={`${baseClass}__clear`}\n            onClick={handleClear}\n            type=\"button\"\n          >\n            <XIcon />\n          </button>\n        )}\n        {hasFilters && (\n          <CheckboxPopup\n            Button={\n              <div\n                aria-label={t('general:filter')}\n                className={[\n                  `${baseClass}__filter`,\n                  hasActiveFilters && `${baseClass}__filter--active`,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n              >\n                <FilterIcon />\n              </div>\n            }\n            onChange={handleFilterChange}\n            options={collectionSpecificOptions}\n            selectedValues={selectedFilters}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Hierarchy/Search/HierarchySearchResultItem.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type HierarchySearchResultItemProps = {
+    id: number | string;
+    onClick: ({ id }: {
+        id: number | string;
+    }) => void;
+    path: string;
+    title: string;
+    truncateSegments?: number;
+};
+export declare const HierarchySearchResultItem: React.FC<HierarchySearchResultItemProps>;
+export {};
+//# sourceMappingURL=HierarchySearchResultItem.d.ts.map

package/dist/elements/Hierarchy/Search/HierarchySearchResultItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HierarchySearchResultItem.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Search/HierarchySearchResultItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAInD,KAAK,8BAA8B,GAAG;IACpC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAClD,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,8BAA8B,CA+C9E,CAAA"}

package/dist/elements/Hierarchy/Search/HierarchySearchResultItem.js

@@ -0,0 +1,88 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from 'react';
+const baseClass = 'hierarchy-search-result-item';
+export const HierarchySearchResultItem = t0 => {
+  const $ = _c(11);
+  const {
+    id,
+    onClick,
+    path,
+    title,
+    truncateSegments: t1
+  } = t0;
+  const truncateSegments = t1 === undefined ? 3 : t1;
+  let t2;
+  if ($[0] !== id || $[1] !== onClick) {
+    t2 = () => {
+      onClick({
+        id
+      });
+    };
+    $[0] = id;
+    $[1] = onClick;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const handleClick = t2;
+  let t3;
+  if ($[3] !== id || $[4] !== onClick) {
+    t3 = e => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClick({
+          id
+        });
+      }
+    };
+    $[3] = id;
+    $[4] = onClick;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const handleKeyDown = t3;
+  let t4;
+  bb0: {
+    if (!path) {
+      t4 = "";
+      break bb0;
+    }
+    const segments = path.split(" / ");
+    if (segments.length <= truncateSegments) {
+      t4 = path;
+      break bb0;
+    }
+    t4 = "... / " + segments.slice(-truncateSegments).join(" / ");
+  }
+  const truncatedPath = t4;
+  let t5;
+  if ($[6] !== handleClick || $[7] !== handleKeyDown || $[8] !== title || $[9] !== truncatedPath) {
+    t5 = _jsxs("div", {
+      className: baseClass,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: 0,
+      children: [_jsx("div", {
+        className: `${baseClass}__title`,
+        children: title
+      }), truncatedPath && _jsx("div", {
+        className: `${baseClass}__path`,
+        children: truncatedPath
+      })]
+    });
+    $[6] = handleClick;
+    $[7] = handleKeyDown;
+    $[8] = title;
+    $[9] = truncatedPath;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  return t5;
+};
+//# sourceMappingURL=HierarchySearchResultItem.js.map

package/dist/elements/Hierarchy/Search/HierarchySearchResultItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HierarchySearchResultItem.js","names":["c","_c","React","useCallback","useMemo","baseClass","HierarchySearchResultItem","t0","$","id","onClick","path","title","truncateSegments","t1","undefined","t2","handleClick","t3","e","key","preventDefault","handleKeyDown","t4","bb0","segments","split","length","slice","join","truncatedPath","t5","_jsxs","className","onKeyDown","role","tabIndex","children","_jsx"],"sources":["../../../../src/elements/Hierarchy/Search/HierarchySearchResultItem.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useMemo } from 'react'\n\nconst baseClass = 'hierarchy-search-result-item'\n\ntype HierarchySearchResultItemProps = {\n  id: number | string\n  onClick: ({ id }: { id: number | string }) => void\n  path: string\n  title: string\n  truncateSegments?: number\n}\n\nexport const HierarchySearchResultItem: React.FC<HierarchySearchResultItemProps> = ({\n  id,\n  onClick,\n  path,\n  title,\n  truncateSegments = 3,\n}) => {\n  const handleClick = useCallback(() => {\n    onClick({ id })\n  }, [id, onClick])\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        onClick({ id })\n      }\n    },\n    [id, onClick],\n  )\n\n  const truncatedPath = useMemo(() => {\n    if (!path) {\n      return ''\n    }\n\n    const segments = path.split(' / ')\n\n    if (segments.length <= truncateSegments) {\n      return path\n    }\n\n    return '... / ' + segments.slice(-truncateSegments).join(' / ')\n  }, [path, truncateSegments])\n\n  return (\n    <div\n      className={baseClass}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <div className={`${baseClass}__title`}>{title}</div>\n      {truncatedPath && <div className={`${baseClass}__path`}>{truncatedPath}</div>}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,IAASC,WAAW,EAAEC,OAAO,QAAQ;AAE5C,MAAMC,SAAA,GAAY;AAUlB,OAAO,MAAMC,yBAAA,GAAsEC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,EAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC,KAAA;IAAAC,gBAAA,EAAAC;EAAA,IAAAP,EAMnF;EADC,MAAAM,gBAAA,GAAAC,EAAoB,KAAAC,SAAA,OAApBD,EAAoB;EAAA,IAAAE,EAAA;EAAA,IAAAR,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAE,OAAA;IAEYM,EAAA,GAAAA,CAAA;MAC9BN,OAAA;QAAAD;MAAA,CAAa;IAAA;IACfD,CAAA,MAAAC,EAAA;IAAAD,CAAA,MAAAE,OAAA;IAAAF,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAFA,MAAAS,WAAA,GAAoBD,EAEJ;EAAA,IAAAE,EAAA;EAAA,IAAAV,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAE,OAAA;IAGdQ,EAAA,GAAAC,CAAA;MAAA,IACMA,CAAA,CAAAC,GAAA,KAAU,WAAWD,CAAA,CAAAC,GAAA,KAAU;QACjCD,CAAA,CAAAE,cAAA,CAAgB;QAChBX,OAAA;UAAAD;QAAA,CAAa;MAAA;IAAA;IAEjBD,CAAA,MAAAC,EAAA;IAAAD,CAAA,MAAAE,OAAA;IAAAF,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EANF,MAAAc,aAAA,GAAsBJ,EAOP;EAAA,IAAAK,EAAA;EAAAC,GAAA;IAAA,KAIRb,IAAA;MACHY,EAAA,GAAO;MAAA,MAAAC,GAAA;IAAA;IAGT,MAAAC,QAAA,GAAiBd,IAAA,CAAAe,KAAA,CAAW;IAAA,IAExBD,QAAA,CAAAE,MAAA,IAAmBd,gBAAA;MACrBU,EAAA,GAAOZ,IAAA;MAAA,MAAAa,GAAA;IAAA;IAGTD,EAAA,GAAO,WAAWE,QAAA,CAAAG,KAAA,EAAgBf,gBAAA,EAAAgB,IAAA,CAAuB;EAAA;EAX3D,MAAAC,aAAA,GAAsBP,EAYK;EAAA,IAAAQ,EAAA;EAAA,IAAAvB,CAAA,QAAAS,WAAA,IAAAT,CAAA,QAAAc,aAAA,IAAAd,CAAA,QAAAI,KAAA,IAAAJ,CAAA,QAAAsB,aAAA;IAGzBC,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAA5B,SAAA;MAAAK,OAAA,EAEUO,WAAA;MAAAiB,SAAA,EACEZ,aAAA;MAAAa,IAAA,EACN;MAAAC,QAAA;MAAAC,QAAA,GAGLC,IAAA,CAAC;QAAAL,SAAA,EAAe,GAAA5B,SAAA,SAAqB;QAAAgC,QAAA,EAAGzB;MAAA,C,GACvCkB,aAAA,IAAiBQ,IAAA,CAAC;QAAAL,SAAA,EAAe,GAAA5B,SAAA,QAAoB;QAAAgC,QAAA,EAAGP;MAAA,C;;;;;;;;;;SAR3DC,E;CAWJ","ignoreList":[]}

package/dist/elements/Hierarchy/Search/HierarchySearchResults.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { SearchResult } from './types.js';
+type HierarchySearchResultsProps = {
+    hasNextPage: boolean;
+    isLoading: boolean;
+    onLoadMore: () => void;
+    onSelect: ({ id }: {
+        id: number | string;
+    }) => void;
+    query: string;
+    results: SearchResult[];
+    titleField: string;
+    totalDocs: number;
+};
+export declare const HierarchySearchResults: React.FC<HierarchySearchResultsProps>;
+export {};
+//# sourceMappingURL=HierarchySearchResults.d.ts.map

package/dist/elements/Hierarchy/Search/HierarchySearchResults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HierarchySearchResults.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Search/HierarchySearchResults.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAQ9C,KAAK,2BAA2B,GAAG;IACjC,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACnD,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAwCxE,CAAA"}

package/dist/elements/Hierarchy/Search/HierarchySearchResults.js

@@ -0,0 +1,85 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { LoadMoreRow } from '../../LoadMoreRow/index.js';
+import { HierarchySearchResultItem } from './HierarchySearchResultItem.js';
+const baseClass = 'hierarchy-search-results';
+export const HierarchySearchResults = t0 => {
+  const $ = _c(14);
+  const {
+    hasNextPage,
+    isLoading,
+    onLoadMore,
+    onSelect,
+    query,
+    results,
+    titleField,
+    totalDocs
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  if (results.length === 0 && !isLoading) {
+    let t1;
+    if ($[0] !== query || $[1] !== t) {
+      t1 = _jsx("div", {
+        className: `${baseClass}__empty`,
+        children: t("hierarchy:noResults", {
+          query
+        })
+      });
+      $[0] = query;
+      $[1] = t;
+      $[2] = t1;
+    } else {
+      t1 = $[2];
+    }
+    return t1;
+  }
+  let t1;
+  if ($[3] !== hasNextPage || $[4] !== isLoading || $[5] !== onLoadMore || $[6] !== onSelect || $[7] !== results || $[8] !== titleField || $[9] !== totalDocs) {
+    let t2;
+    if ($[11] !== onSelect || $[12] !== titleField) {
+      t2 = result => _jsx(HierarchySearchResultItem, {
+        id: result.id,
+        onClick: onSelect,
+        path: result.path,
+        title: String(result[titleField] || result.id)
+      }, result.id);
+      $[11] = onSelect;
+      $[12] = titleField;
+      $[13] = t2;
+    } else {
+      t2 = $[13];
+    }
+    t1 = _jsxs("div", {
+      className: baseClass,
+      children: [_jsx("div", {
+        className: `${baseClass}__list`,
+        children: results.map(t2)
+      }), _jsx(LoadMoreRow, {
+        className: `${baseClass}__load-more`,
+        currentCount: results.length,
+        hasMore: hasNextPage,
+        isLoading,
+        onLoadMore,
+        totalDocs
+      })]
+    });
+    $[3] = hasNextPage;
+    $[4] = isLoading;
+    $[5] = onLoadMore;
+    $[6] = onSelect;
+    $[7] = results;
+    $[8] = titleField;
+    $[9] = totalDocs;
+    $[10] = t1;
+  } else {
+    t1 = $[10];
+  }
+  return t1;
+};
+//# sourceMappingURL=HierarchySearchResults.js.map

package/dist/elements/Hierarchy/Search/HierarchySearchResults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HierarchySearchResults.js","names":["c","_c","React","useTranslation","LoadMoreRow","HierarchySearchResultItem","baseClass","HierarchySearchResults","t0","$","hasNextPage","isLoading","onLoadMore","onSelect","query","results","titleField","totalDocs","t","length","t1","_jsx","className","children","t2","result","id","onClick","path","title","String","_jsxs","map","currentCount","hasMore"],"sources":["../../../../src/elements/Hierarchy/Search/HierarchySearchResults.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport type { SearchResult } from './types.js'\n\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { LoadMoreRow } from '../../LoadMoreRow/index.js'\nimport { HierarchySearchResultItem } from './HierarchySearchResultItem.js'\n\nconst baseClass = 'hierarchy-search-results'\n\ntype HierarchySearchResultsProps = {\n  hasNextPage: boolean\n  isLoading: boolean\n  onLoadMore: () => void\n  onSelect: ({ id }: { id: number | string }) => void\n  query: string\n  results: SearchResult[]\n  titleField: string\n  totalDocs: number\n}\n\nexport const HierarchySearchResults: React.FC<HierarchySearchResultsProps> = ({\n  hasNextPage,\n  isLoading,\n  onLoadMore,\n  onSelect,\n  query,\n  results,\n  titleField,\n  totalDocs,\n}) => {\n  const { t } = useTranslation()\n\n  if (results.length === 0 && !isLoading) {\n    return <div className={`${baseClass}__empty`}>{t('hierarchy:noResults', { query })}</div>\n  }\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__list`}>\n        {results.map((result) => (\n          <HierarchySearchResultItem\n            id={result.id}\n            key={result.id}\n            onClick={onSelect}\n            path={result.path}\n            // eslint-disable-next-line @typescript-eslint/no-base-to-string\n            title={String(result[titleField] || result.id)}\n          />\n        ))}\n      </div>\n      <LoadMoreRow\n        className={`${baseClass}__load-more`}\n        currentCount={results.length}\n        hasMore={hasNextPage}\n        isLoading={isLoading}\n        onLoadMore={onLoadMore}\n        totalDocs={totalDocs}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAIlB,SAASC,cAAc,QAAQ;AAC/B,SAASC,WAAW,QAAQ;AAC5B,SAASC,yBAAyB,QAAQ;AAE1C,MAAMC,SAAA,GAAY;AAalB,OAAO,MAAMC,sBAAA,GAAgEC,EAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAAC;IAAAS,WAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC,QAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,UAAA;IAAAC;EAAA,IAAAT,EAS7E;EACC;IAAAU;EAAA,IAAcf,cAAA;EAAA,IAEVY,OAAA,CAAAI,MAAA,MAAmB,KAAMR,SAAA;IAAA,IAAAS,EAAA;IAAA,IAAAX,CAAA,QAAAK,KAAA,IAAAL,CAAA,QAAAS,CAAA;MACpBE,EAAA,GAAAC,IAAA,CAAC;QAAAC,SAAA,EAAe,GAAAhB,SAAA,SAAqB;QAAAiB,QAAA,EAAGL,CAAA,CAAE;UAAAJ;QAAA,CAA+B;MAAA,C;;;;;;;WAAzEM,E;;;;;;MAMUI,EAAA,GAAAC,MAAA,IACXJ,IAAA,CAAAhB,yBAAA;QAAAqB,EAAA,EACMD,MAAA,CAAAC,EAAA;QAAAC,OAAA,EAEKd,QAAA;QAAAe,IAAA,EACHH,MAAA,CAAAG,IAAA;QAAAC,KAAA,EAECC,MAAA,CAAOL,MAAM,CAACT,UAAA,KAAeS,MAAA,CAAAC,EAAS;MAAA,GAJxCD,MAAA,CAAAC,EAAS;MAAAjB,CAAA,OAAAI,QAAA;MAAAJ,CAAA,OAAAO,UAAA;MAAAP,CAAA,OAAAe,EAAA;IAAA;MAAAA,EAAA,GAAAf,CAAA;IAAA;IALtBW,EAAA,GAAAW,KAAA,CAAC;MAAAT,SAAA,EAAAhB,SAAA;MAAAiB,QAAA,GACCF,IAAA,CAAC;QAAAC,SAAA,EAAe,GAAAhB,SAAA,QAAoB;QAAAiB,QAAA,EACjCR,OAAA,CAAAiB,GAAA,CAAYR,EAGK;MAAA,C,GAQpBH,IAAA,CAAAjB,WAAA;QAAAkB,SAAA,EACa,GAAAhB,SAAA,aAAyB;QAAA2B,YAAA,EACtBlB,OAAA,CAAAI,MAAA;QAAAe,OAAA,EACLxB,WAAA;QAAAC,SAAA;QAAAC,UAAA;QAAAK;MAAA,C;;;;;;;;;;;;;SAhBbG,E;CAuBJ","ignoreList":[]}

package/dist/elements/Hierarchy/Search/index.css

@@ -0,0 +1,183 @@
+@layer payload-default {
+  .hierarchy-search {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .hierarchy-search-input {
+    display: flex;
+    align-items: center;
+    height: var(--spacer-4);
+    background: var(--bg-secondary);
+    border-radius: var(--radius-medium);
+    border: 1px solid transparent;
+    padding-inline-end: var(--spacer-2);
+
+    &:has(input:focus-visible) {
+      outline: var(--accessibility-outline);
+      outline-offset: var(--accessibility-outline-offset);
+    }
+
+    .icon--search {
+      width: var(--spacer-3);
+      height: var(--spacer-3);
+    }
+  }
+
+  .hierarchy-search-input__icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--spacer-4);
+    height: var(--spacer-4);
+    color: var(--icon-secondary);
+  }
+
+  .hierarchy-search-input__input {
+    flex: 1;
+    min-width: 0;
+    background: transparent;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    color: var(--text-default);
+    outline: none;
+    border: none;
+    padding: 0;
+    &:focus-visible {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--text-tertiary);
+    }
+  }
+
+  .hierarchy-search-input__actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacer-1);
+    margin-inline-start: var(--spacer-1);
+  }
+
+  .hierarchy-search-input__filter,
+  .hierarchy-search-input__clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: var(--icon-secondary);
+    padding: 0;
+    width: var(--spacer-3);
+    height: var(--spacer-3);
+    border-radius: var(--radius-small);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--icon-default);
+    }
+  }
+
+  .hierarchy-search-input__filter--active {
+    color: var(--icon-success-default);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--icon-success-default);
+    }
+  }
+
+  .hierarchy-search-input__filter .icon--filter,
+  .hierarchy-search-input__clear .icon--x {
+    width: var(--spacer-3);
+    height: var(--spacer-3);
+  }
+
+  .hierarchy-search-results {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    max-height: calc(100vh - 200px);
+    width: calc(100% + var(--nav-padding-inline-start) + var(--nav-padding-inline-end));
+    margin-left: calc(-1 * var(--nav-padding-inline-start));
+  }
+
+  .hierarchy-search-results__list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .hierarchy-search-results__empty {
+    color: var(--text-secondary);
+    padding: var(--spacer-1) 0;
+  }
+
+  .hierarchy-search-results__load-more {
+    margin-top: var(--spacer-1);
+    padding-left: calc(var(--nav-padding-inline-start) - 2px);
+    padding-right: var(--nav-padding-inline-end);
+    border: none;
+    background: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: var(--text-body-small-font-size);
+
+    &:hover {
+      color: var(--text-default);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  .hierarchy-search-result-item {
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    transition: background-color 150ms ease;
+    padding-block: var(--spacer-1);
+    padding-inline-start: calc(var(--nav-padding-inline-start) * 0.5);
+    padding-inline-end: calc(var(--nav-padding-inline-end) * 0.5);
+    border-radius: var(--radius-small);
+    margin-inline-start: calc(0.5 * var(--nav-padding-inline-start));
+    margin-inline-end: calc(0.5 * var(--nav-padding-inline-end));
+    gap: var(--spacer-1);
+    border: 1px solid transparent;
+
+    &:hover .hierarchy-search-result-item__title {
+      color: var(--text-default);
+      text-decoration: underline;
+    }
+
+    &:hover .hierarchy-search-result-item__path {
+      color: var(--text-secondary);
+    }
+
+    &:focus {
+      outline: none;
+      border-color: var(--border-strong);
+    }
+
+    &:focus .hierarchy-search-result-item__title {
+      text-decoration: underline;
+    }
+  }
+
+  .hierarchy-search-result-item__title {
+    color: var(--text-default);
+    line-height: 1;
+  }
+
+  .hierarchy-search-result-item__path {
+    color: var(--text-tertiary);
+    line-height: 1;
+  }
+}

package/dist/elements/Hierarchy/Search/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { HierarchySearchProps } from './types.js';
+import './index.css';
+export declare const HierarchySearch: React.FC<HierarchySearchProps>;
+export { HierarchySearchInput } from './HierarchySearchInput.js';
+export { HierarchySearchResultItem } from './HierarchySearchResultItem.js';
+export { HierarchySearchResults } from './HierarchySearchResults.js';
+export type { HierarchySearchProps, SearchResult } from './types.js';
+export { useHierarchySearch } from './useHierarchySearch.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Hierarchy/Search/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Search/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAEpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAOtD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAwF1D,CAAA;AAED,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AACpE,YAAY,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA"}