@inploi/plugin-job-search 0.10.0 → 0.12.0

package/dist/job-search.api.d.ts

@@ -283,6 +283,7 @@ export declare const getAvailableFilters: ({ apiClient, filters, logger, signal,
     [x: string]: {
         label: string;
         value: string;
+        jobs: number;
     }[];
 }>;
 export type GetAvailableFiltersResponse = Awaited<ReturnType<typeof getAvailableFilters>>;

package/dist/job-search.d.ts

@@ -48,6 +48,17 @@ export type FilterProperty = {
      *  - "only-available" (⚠️ leads to layout shifts) will show results that are available for the current filters
      */
     results?: 'only-available' | 'all';
+    /** How to sort the suggestions
+     *  @default { by: 'results-count', order: 'ascending' }
+     *  @description
+     *  - 'results-count' will sort the suggestions by the number of results they have
+     *  - 'alphabetically' will sort the suggestions alphabetically
+     *  - 'numerically' will sort the suggestions numerically, coercing any string values to numbers
+     */
+    sortSuggestions?: {
+        by: 'results-count' | 'alphabetically' | 'numerically';
+        order: 'ascending' | 'descending';
+    };
 };
 export type DisplayableFilterProperty = {
     key: /** Enter any key or traverse any custom_data object returned by the job with dot-separated keys.
@@ -87,7 +98,8 @@ export type JobSearchPluginParams = {
         subheading: DisplayableFilterProperty | null;
         infoTags: DisplayableFilterProperty[];
         logo?: 'hidden' | '1:1' | '2:1';
-        /** Whether to show the posted date or not.
+        /**
+         * Whether to show the posted date or not.
          *  @default 'show'
          *  @description
          *  - 'show' will show the posted date and the "NEW" badge if the job is new (less than 7 days old).
@@ -96,6 +108,23 @@ export type JobSearchPluginParams = {
          */
         postedDate?: 'hide' | 'show' | 'only-new';
         overrides?: JobSearchPluginCardOverrides;
+        /**
+         * Specifies how the job link should be opened.
+         * @default 'redirect'
+         * @description
+         * - 'redirect': Navigates to the job's URL in the current tab.
+         * - 'redirect-new-tab': Opens the job's URL in a new tab.
+         */
+        openJob?: 'redirect' | 'redirect-new-tab';
+    };
+    filter?: {
+        /**
+         * Defines the number of filter options to show per page in a filter section.
+         * @default 8
+         * @description
+         * Also specifies the number of additional options to show upon clicking the "Load more" button.
+         */
+        suggestionsPerPage?: number;
     };
     /** Enables the job alerts button */
     enableJobAlerts?: boolean;
@@ -165,10 +194,10 @@ export declare const jobSearchPlugin: () => ({ apiClient, logger, analytics }: {
                         town?: string | undefined;
                         city?: string | undefined;
                         country?: string | undefined;
-                    };
-                    id: number; /** Whether users can select one or multiple values.
+                    }; /** Whether users can select one or multiple values.
                      *  @default `'one'`
                      */
+                    id: number;
                     isNew: boolean;
                     company: {
                         name: string;

package/dist/job-search.schemas.d.ts

@@ -3,16 +3,20 @@ import { Output } from 'valibot';
 export declare const AvailablePropertiesSchema: import('valibot').RecordSchema<import('valibot').StringSchema<string>, import('valibot').ArraySchema<import('valibot').ObjectSchema<{
     label: import('valibot').StringSchema<string>;
     value: import('valibot').StringSchema<string>;
+    jobs: import('valibot').NumberSchema<number>;
 }, undefined, {
     label: string;
     value: string;
+    jobs: number;
 }>, {
     label: string;
     value: string;
+    jobs: number;
 }[]>, {
     [x: string]: {
         label: string;
         value: string;
+        jobs: number;
     }[];
 }>;
 export type AvailablePropertiesSchema = Output<typeof AvailablePropertiesSchema>;

package/dist/plugin-job-search.cjs

@@ -1161,7 +1161,7 @@ const getRelativeTimeDifference = ({ from = /* @__PURE__ */ new Date(), to, form
 };
 const SEVEN_DAYS_MS = 1e3 * 60 * 60 * 24 * 7;
 const AvailablePropertiesSchema = record(
-  array(object({ label: coerce(string(), String), value: coerce(string(), String) }))
+  array(object({ label: coerce(string(), String), value: coerce(string(), String), jobs: number() }))
 );
 const URLSchema = string([url()]);
 const PaginationSchema = object({
@@ -3375,6 +3375,31 @@ const toggleInArray = (array2, value) => {
     return [...array2, value];
   return array2.filter((_2, i2) => i2 !== index);
 };
+const coerceNumberLoosely = (value) => {
+  var _a;
+  const number2 = Number((_a = value.match(/\d/g)) == null ? void 0 : _a.join(""));
+  return isNaN(number2) ? 0 : number2;
+};
+const sortResults = (results, sort = { by: "results-count", order: "descending" }) => {
+  switch (sort.by) {
+    case "results-count":
+      results.sort((a2, b2) => b2.jobs - a2.jobs);
+      break;
+    case "alphabetically":
+      results.sort((a2, b2) => a2.label.localeCompare(b2.label));
+      break;
+    case "numerically":
+      results.sort((a2, b2) => {
+        const aValue = coerceNumberLoosely(a2.value);
+        const bValue = coerceNumberLoosely(b2.value);
+        return aValue - bValue;
+      });
+      break;
+  }
+  if (sort.order === "descending")
+    results.reverse();
+  return results;
+};
 const FilterContentActive = ({
   value,
   property,
@@ -3382,7 +3407,8 @@ const FilterContentActive = ({
   useQuery,
   onValueChange,
   unfilteredQuery,
-  onRender
+  onRender,
+  filterParams
 }) => {
   const filterQuery = getQueryState(useQuery());
   const availablePropertyKeys = T$1(() => {
@@ -3401,7 +3427,8 @@ const FilterContentActive = ({
   }, [filterQuery, property.key]);
   const selectedValues = getSelectedValues(value);
   const hasValue = selectedValues.length > 0;
-  const [displayCount, setDisplayCount] = h(SUGGESTION_COUNT);
+  const suggestionsPerPage = (filterParams == null ? void 0 : filterParams.suggestionsPerPage) ?? SUGGESTION_COUNT;
+  const [displayCount, setDisplayCount] = h(suggestionsPerPage);
   const [search, setSearch] = h();
   y(() => {
     onRender();
@@ -3454,7 +3481,7 @@ const FilterContentActive = ({
           ) });
         case "revalidating":
         case "loaded": {
-          const allSuggestions = unfilteredQuery.data[property.key] ?? [];
+          const allSuggestions = sortResults(unfilteredQuery.data[property.key] ?? [], property.sortSuggestions);
           const filteredSuggestions = search && search.length > 1 ? allSuggestions.filter((s2) => s2.label.toLowerCase().includes(search.toLowerCase())) : allSuggestions;
           const suggestions = [];
           for (const suggestion of filteredSuggestions) {
@@ -3525,7 +3552,7 @@ const FilterContentActive = ({
                       class: "border-px flex w-full max-w-full flex-none flex-nowrap justify-center truncate border-transparent"
                     }),
                     onClick: () => {
-                      setDisplayCount(displayCount + SUGGESTION_COUNT);
+                      setDisplayCount(displayCount + suggestionsPerPage);
                     },
                     children: [
                       /* @__PURE__ */ u$1("span", { class: "font-style-tag font-family-tag font-weight-tag text-style-tag", children: "Show More" }),
@@ -3636,7 +3663,8 @@ const Filter = ({
   onSkip,
   onValueChange,
   unfilteredQuery,
-  useQuery
+  useQuery,
+  filterParams
 }) => {
   const defaultIcon = isKeyInObj(property.key, filterIcons) ? filterIcons[property.key] : void 0;
   const icon = property.icon ?? defaultIcon ?? "filter";
@@ -3678,7 +3706,8 @@ const Filter = ({
               onValueChange,
               unfilteredQuery,
               property,
-              value
+              value,
+              filterParams
             }
           ) }) })
         ] }),
@@ -3758,7 +3787,8 @@ const FilterSection = ({
   appliedFilters,
   onFilterValueChange,
   apiClient,
-  logger
+  logger,
+  filterParams
 }) => {
   var _a;
   const [activeKey, setActiveKey] = h((_a = properties[0]) == null ? void 0 : _a.key);
@@ -3825,7 +3855,8 @@ const FilterSection = ({
           setActiveKey(nextPropertyKey);
         },
         useQuery,
-        onValueChange
+        onValueChange,
+        filterParams
       }
     ) }, property.key);
   }) }) });
@@ -4337,7 +4368,7 @@ const JobCard = ({ job, config }) => {
     ((_a = config.overrides) == null ? void 0 : _a.salary) ? getDisplayableProperty({ job, property: config.overrides.salary }) : job.pay
   ).filter(Boolean);
   const postedDateConfig = config.postedDate ?? "show";
-  return /* @__PURE__ */ u$1("a", { href: job.href, class: wrapperClass(), children: [
+  return /* @__PURE__ */ u$1("a", { href: job.href, target: config.openJob === "redirect-new-tab" ? "_blank" : void 0, class: wrapperClass(), children: [
     /* @__PURE__ */ u$1("div", { class: "flex min-w-0 flex-1 flex-col gap-4", children: [
       /* @__PURE__ */ u$1("div", { class: "gap-logo flex items-center", children: [
         /* @__PURE__ */ u$1(JobCardLogo, { job, config: config.logo }),
@@ -4567,6 +4598,7 @@ const JobSearch = ({
               return { default: false, filters: { ...prev.filters, [key]: value } };
             });
           },
+          filterParams: params.filter,
           properties,
           parentRef: appRef,
           logger,

package/dist/plugin-job-search.js

@@ -1159,7 +1159,7 @@ const getRelativeTimeDifference = ({ from = /* @__PURE__ */ new Date(), to, form
 };
 const SEVEN_DAYS_MS = 1e3 * 60 * 60 * 24 * 7;
 const AvailablePropertiesSchema = record(
-  array(object({ label: coerce(string(), String), value: coerce(string(), String) }))
+  array(object({ label: coerce(string(), String), value: coerce(string(), String), jobs: number() }))
 );
 const URLSchema = string([url()]);
 const PaginationSchema = object({
@@ -3373,6 +3373,31 @@ const toggleInArray = (array2, value) => {
     return [...array2, value];
   return array2.filter((_2, i2) => i2 !== index);
 };
+const coerceNumberLoosely = (value) => {
+  var _a;
+  const number2 = Number((_a = value.match(/\d/g)) == null ? void 0 : _a.join(""));
+  return isNaN(number2) ? 0 : number2;
+};
+const sortResults = (results, sort = { by: "results-count", order: "descending" }) => {
+  switch (sort.by) {
+    case "results-count":
+      results.sort((a2, b2) => b2.jobs - a2.jobs);
+      break;
+    case "alphabetically":
+      results.sort((a2, b2) => a2.label.localeCompare(b2.label));
+      break;
+    case "numerically":
+      results.sort((a2, b2) => {
+        const aValue = coerceNumberLoosely(a2.value);
+        const bValue = coerceNumberLoosely(b2.value);
+        return aValue - bValue;
+      });
+      break;
+  }
+  if (sort.order === "descending")
+    results.reverse();
+  return results;
+};
 const FilterContentActive = ({
   value,
   property,
@@ -3380,7 +3405,8 @@ const FilterContentActive = ({
   useQuery,
   onValueChange,
   unfilteredQuery,
-  onRender
+  onRender,
+  filterParams
 }) => {
   const filterQuery = getQueryState(useQuery());
   const availablePropertyKeys = T$1(() => {
@@ -3399,7 +3425,8 @@ const FilterContentActive = ({
   }, [filterQuery, property.key]);
   const selectedValues = getSelectedValues(value);
   const hasValue = selectedValues.length > 0;
-  const [displayCount, setDisplayCount] = h(SUGGESTION_COUNT);
+  const suggestionsPerPage = (filterParams == null ? void 0 : filterParams.suggestionsPerPage) ?? SUGGESTION_COUNT;
+  const [displayCount, setDisplayCount] = h(suggestionsPerPage);
   const [search, setSearch] = h();
   y(() => {
     onRender();
@@ -3452,7 +3479,7 @@ const FilterContentActive = ({
           ) });
         case "revalidating":
         case "loaded": {
-          const allSuggestions = unfilteredQuery.data[property.key] ?? [];
+          const allSuggestions = sortResults(unfilteredQuery.data[property.key] ?? [], property.sortSuggestions);
           const filteredSuggestions = search && search.length > 1 ? allSuggestions.filter((s2) => s2.label.toLowerCase().includes(search.toLowerCase())) : allSuggestions;
           const suggestions = [];
           for (const suggestion of filteredSuggestions) {
@@ -3523,7 +3550,7 @@ const FilterContentActive = ({
                       class: "border-px flex w-full max-w-full flex-none flex-nowrap justify-center truncate border-transparent"
                     }),
                     onClick: () => {
-                      setDisplayCount(displayCount + SUGGESTION_COUNT);
+                      setDisplayCount(displayCount + suggestionsPerPage);
                     },
                     children: [
                       /* @__PURE__ */ u$1("span", { class: "font-style-tag font-family-tag font-weight-tag text-style-tag", children: "Show More" }),
@@ -3634,7 +3661,8 @@ const Filter = ({
   onSkip,
   onValueChange,
   unfilteredQuery,
-  useQuery
+  useQuery,
+  filterParams
 }) => {
   const defaultIcon = isKeyInObj(property.key, filterIcons) ? filterIcons[property.key] : void 0;
   const icon = property.icon ?? defaultIcon ?? "filter";
@@ -3676,7 +3704,8 @@ const Filter = ({
               onValueChange,
               unfilteredQuery,
               property,
-              value
+              value,
+              filterParams
             }
           ) }) })
         ] }),
@@ -3756,7 +3785,8 @@ const FilterSection = ({
   appliedFilters,
   onFilterValueChange,
   apiClient,
-  logger
+  logger,
+  filterParams
 }) => {
   var _a;
   const [activeKey, setActiveKey] = h((_a = properties[0]) == null ? void 0 : _a.key);
@@ -3823,7 +3853,8 @@ const FilterSection = ({
           setActiveKey(nextPropertyKey);
         },
         useQuery,
-        onValueChange
+        onValueChange,
+        filterParams
       }
     ) }, property.key);
   }) }) });
@@ -4335,7 +4366,7 @@ const JobCard = ({ job, config }) => {
     ((_a = config.overrides) == null ? void 0 : _a.salary) ? getDisplayableProperty({ job, property: config.overrides.salary }) : job.pay
   ).filter(Boolean);
   const postedDateConfig = config.postedDate ?? "show";
-  return /* @__PURE__ */ u$1("a", { href: job.href, class: wrapperClass(), children: [
+  return /* @__PURE__ */ u$1("a", { href: job.href, target: config.openJob === "redirect-new-tab" ? "_blank" : void 0, class: wrapperClass(), children: [
     /* @__PURE__ */ u$1("div", { class: "flex min-w-0 flex-1 flex-col gap-4", children: [
       /* @__PURE__ */ u$1("div", { class: "gap-logo flex items-center", children: [
         /* @__PURE__ */ u$1(JobCardLogo, { job, config: config.logo }),
@@ -4565,6 +4596,7 @@ const JobSearch = ({
               return { default: false, filters: { ...prev.filters, [key]: value } };
             });
           },
+          filterParams: params.filter,
           properties,
           parentRef: appRef,
           logger,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inploi/plugin-job-search",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "type": "module",
   "main": "dist/plugin-job-search.js",
   "types": "dist/index.d.ts",
@@ -48,7 +48,7 @@
     "@inploi/core": "1.14.0",
     "@inploi/design-tokens": "0.2.1",
     "@inploi/plugin-job-alerts": "0.2.0",
-    "@inploi/sdk": "1.13.1",
+    "@inploi/sdk": "1.13.2",
     "eslint-config-custom": "0.1.0"
   },
   "msw": {